Vertical Breadcrumb

30.04.2018

Simple CSS vertical breadcrumbs.

Made with: HTML (Pug),CSS (Stylus)

View Code

Vertical Breadcrumb

Svg Mobile Tab Bar

30.04.2018

Your hybrid/web app tab bar doesn't need to be plain. You can make it playful and vibrant with SVG and CSS animations. This is one example how.

Made with: HTML,CSS,JavaScript

View Code

Svg Mobile Tab Bar

Responsive Toggle Switch

30.04.2018

A toggle switch to use in your forms (using radio inputs as the core) that is responsive. Styled with CSS, using flexbox for sizing.

Made with: HTML

View Code

Responsive Toggle Switch

Wiggle Button

29.04.2018

CSS button with wiggle effect on hover.

Made with: HTML (Pug),CSS

View Code

Wiggle Button

Flexbox Image Carousel

29.04.2018

A simple images carousel using Flexbox layout and jQuery.

Made with: HTML,CSS,JS

View Code

Flexbox Image Carousel

Text Marquee

28.04.2018

3D text marquee effect in HTML and CSS.

Made with: HTML,CSS

View Code

Text Marquee

404 Error Page

28.04.2018

Error page 404 with pure CSS: Monument Valley inspiration.

Made with: HTML (Pug),CSS (Sass)

View Code

404 Error Page

Css Grid + Flexbox Gig Poster

27.04.2018

Made with: HTML,CSS (SCSS)

View Code

Css Grid + Flexbox Gig Poster

404 Page

27.04.2018

Yet another HTML 404 animated page template.

Made with: HTML,CSS,JavaScript

View Code

404 Page

Tomato Loader With Css Vars

26.04.2018

Doesn't work in Edge due to lack of support for calc() as an animation-delay value.

Made with: HTML/Pug

View Code

Tomato Loader With Css Vars

City 3D

26.04.2018

3D city - experiment with three.js.

Made with: JavaScript

View Code

City 3D

3d Button Effects

25.04.2018

Metallic glossy 3D button effects.

Made with: HTML,CSS

View Code

3d Button Effects

Dithered Css Gradients

25.04.2018

Mixing noise with CSS gradients helps to remove banding, but results in an overall grainy texture. By overlaying gradients and applying masks the dithering can be controlled to affect the areas where colours blend only. The strength of the dithering is affected by the noise image (the one used here is quite pronounced giving a grainy look, but the effect can be much more subtle).

Made with: HTML,CSS (SCSS)

View Code

Dithered Css Gradients

2011 - Greetings Poster B - Haguruma Envelope. Shinnoske Design

24.04.2018

An abstract geomatrical poster in gray, white and black.

Made with: HTML,CSS (SCSS)

View Code

2011 - Greetings Poster B - Haguruma Envelope. Shinnoske Design

Social Share Buttons

24.04.2018

Animated share button design.

Made with: HTML,CSS (SCSS),JS

View Code

Social Share Buttons

Triangle

24.04.2018

3D triangle.

Made with: HTML (Haml),CSS (Sass)

View Code

Triangle

Stripe Border

24.04.2018

Diagonal stripe border effects in pure CSS.

Made with: HTML,CSS

View Code

Stripe Border

Css Dash Loader

23.04.2018

Rotating dashes.

Made with: HTML

View Code

Css Dash Loader

404 Page - Lost In Space

23.04.2018

Animated 404 Lost in Space Page. CSS3 Keyframe animations used.

Made with: HTML,CSS,JavaScript

View Code

404 Page - Lost In Space

Css Animation: Time Of Day

23.04.2018

CSS animations experiment.

Made with: HTML (Pug),CSS (SCSS),JavaScript

View Code

Css Animation: Time Of Day