Login Screen

20.09.2017

Trendy login screen user interface.

Made with: HTML

View Code

Login Screen

Skewed Header

20.09.2017

Skewed header with HTML and CSS.

Made with: HTML/Pug

View Code

Skewed Header

Add Button

20.09.2017

Inspired by Eddie Lobanovskiy's Plus expanded on Dribbble https://dribbble.com/shots/3208361-Plus-expanded.

Made with: HTML

View Code

Add Button

Breadcrumbs With 'Smart' Ellipsis (Flex)

18.09.2017

Play with the browser size to see how the breadcrumbs behave when there's no room left for them.

Made with: HTML,CSS (SCSS)

View Code

Breadcrumbs With 'Smart' Ellipsis (Flex)

Inspiration Business Card

18.09.2017

Made with: HTML,CSS

View Code

Inspiration Business Card

Tetris

18.09.2017

Made with: HTML,CSS,JS

View Code

Tetris

Card Hover Effect

17.09.2017

Simple card hover effect in HTML and CSS.

Made with: HTML,CSS

View Code

Card Hover Effect

Pricing Table Ui Design

16.09.2017

Pricing table with animation.

Made with: HTML

View Code

Pricing Table Ui Design

Color Palette

15.09.2017

Color palette with CSS flexbox.

Made with: HTML

View Code

Color Palette

Flyer

15.09.2017

Made with: HTML,CSS

View Code

Flyer

Spring Text Hover Effect

15.09.2017

Just playing around with effects for buttons and thought this was pretty cool.

Made with: HTML

View Code

Spring Text Hover Effect

Penrose Triangle

15.09.2017

The Penrose Triangle, also known as the impossible tribar, created by the Swedish artist Oscar Reutersvärd. Created using HTML and SCSS only.

Made with: HTML,CSS (SCSS)

View Code

Penrose Triangle

Pop Out Text

14.09.2017

Pure CSS pop out text.

Made with: HTML,CSS (SCSS)

View Code

Pop Out Text

Morphing Fullscreen Navigation Menu [~60Fps Animation]

14.09.2017

Performant fullscreen navigation menu transition using javascript and custom properties (css variables). Ideal for mobile in terms of reachability.

Made with: HTML,CSS,JS (Babel)

View Code

Morphing Fullscreen Navigation Menu [~60Fps Animation]

Download Button

14.09.2017

Jelly download button with little jQuery.

Made with: HTML,CSS (Sass),JavaScript

View Code

Download Button

Iphone X Css Only

13.09.2017

Made with: HTML,CSS (SCSS),JS (Babel)

View Code

Iphone X Css Only

Wall Clock

13.09.2017

Giant clock to have as fullscreen on a screen while not using it.

Made with: HTML

View Code

Wall Clock

Material Inspired Radio Groups

12.09.2017

HTML and CSS radio groups.

Made with: HTML

View Code

Material Inspired Radio Groups

React Reading Rrogress

12.09.2017

Made with:

View Code

PlaceholderReact Reading Rrogress

Material Inspired Checkboxes

12.09.2017

The trick to this is placing the label after the checkbox. That way you can use the :checked state to toggle the different pseudo elements on the label. No javascript necessary. To make the background animation work, you'll need a tiny bit of magic. The label:before element is a small 10x10 circle. We animate the scale of it instead of the size so that we can keep the proportion of the circle and make it look like it "fills out" the bar. The max width of the form is set to 550px. The :before element animates by using scale3d (for hardware acceleration) by 56 times. 56 * 10 === 560. This allows the circle to fill out the bar by going slightly outside the bounds of the input group container.

Made with: HTML

View Code

Material Inspired Checkboxes