Thumbnail Hover Interaction

31.03.2020

Pure CSS thumbnail hover interaction.

Made with: HTML,CSS (SCSS)

View Code

Thumbnail Hover Interaction

Box Shadow Patterns

31.03.2020

Each pattern is created using a single div. Each square or circle is a shadow of a pseudo element.

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

View Code

Box Shadow Patterns

Animated Gradient Underglow

31.03.2020

Made with: HTML,CSS (SCSS)

View Code

Animated Gradient Underglow

404

31.03.2020

Made with: HTML,CSS

View Code

404

Profile Card With Tabs

30.03.2020

Made with: HTML,CSS

View Code

PlaceholderProfile Card With Tabs

Tailwind Css Accordion

30.03.2020

Made with: HTML,CSS,JS

View Code

Tailwind Css Accordion

Trash Button

30.03.2020

Delete button with animated trash in vanilla JavaScript.

Made with: HTML,CSS (SCSS),JS

View Code

Trash Button

Bootstrap Pagination Style 120

29.03.2020

Made with: HTML,CSS

View Code

Bootstrap Pagination Style 120

Multiple Border-Radius Values

29.03.2020

You probably knew that you can set the border-radius of an element to 4 values, and using shorthand, it goes clock-wise from top, right, bottom, left. But did you know you can actually set up to 8 values if you separate them? Each corner can have 2 values as you can see in this example.

Made with: HTML,CSS

View Code

Multiple Border-Radius Values

Vertical Dark Timeline

29.03.2020

Made with: HTML,CSS (SCSS)

View Code

Vertical Dark Timeline

Cassette Tape Svg Animation

29.03.2020

Made with: HTML,CSS,JS

View Code

Cassette Tape Svg Animation

Rock'n'roll Half-Marathon Animation

29.03.2020

Made with: HTML,CSS (SCSS)

View Code

Rock'n'roll Half-Marathon Animation

Custom Range Slider With Values

28.03.2020

Made with: HTML,CSS,JS

View Code

Custom Range Slider With Values

Curved Dusseldot - Variable Fonts

28.03.2020

Made with: HTML,CSS (SCSS)

View Code

Curved Dusseldot - Variable Fonts

Bootstrap Custom Checkbox

27.03.2020

Made with: HTML,CSS

View Code

PlaceholderBootstrap Custom Checkbox

Product Grid Style 149

27.03.2020

Made with: HTML,CSS

View Code

Product Grid Style 149

Breadcrumb

27.03.2020

Made with: HTML,CSS

View Code

Breadcrumb

Netflix Logo Single Div

27.03.2020

One div Netflix logo. CSS only.

Made with: HTML,CSS

View Code

Netflix Logo Single Div

Pure Css Card With Social Icons

27.03.2020

Made with: HTML,CSS

View Code

Pure Css Card With Social Icons

Simple Artistic Button

27.03.2020

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

View Code

Simple Artistic Button