Saturated Vs Desaturated Box-Shadow

24.07.2020

Made with: HTML,CSS

View Code

Saturated Vs Desaturated Box-Shadow

Dropplets

20.07.2020

SVG filters and CSS shadows.

Made with: HTML,CSS (SCSS)

View Code

Dropplets

Box Shadow Piano

21.03.2020

Made with: HTML,CSS (SCSS)

View Code

Box Shadow Piano

Parallax Shadows (Mobile-Friendly)

5.11.2018

Made with: HTML,CSS,JS

View Code

Parallax Shadows (Mobile-Friendly)

Image Shadows

10.08.2018

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

View Code

Image Shadows

Multiple Shadows

16.10.2017

Playing with placing multiple shadows on an element. This gives it the look of depth with a "natural" shadow, as if there was actually a light shining on the page.

Made with: HTML,CSS (SCSS)

View Code

Multiple Shadows

Css Pixel Animation

31.08.2017

8 bit pixelated woman made with box-shadows on a single div.

Made with: HTML,CSS (SCSS)

View Code

Css Pixel Animation

Button Hover Effects With Box-Shadow

4.06.2017

Making some basic animations with box-shadows. No extra elements or even pseudo elements required. Tips: - We're setting all the blurs to 0 since we want a solid fill; - Add the inset keyword so the box-shadow is on the inside of the element; - Animating the inset shadow on hover looks like the element is filling in from whatever side you specify ([top] and [left] accept negative values to become [bottom] and [right]); - Multiple shadows can be stacked; - If you're animating multiple shadows, be sure to keep the same number of shadows so the animation is smooth. Otherwise, you'll get something choppy.

Made with: HTML,CSS (SCSS)

View Code

Button Hover Effects With Box-Shadow

Box-Shadow Spill

12.10.2016

Using offsetting inset and outer box-shadows to create a 3D-like effect.

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

View Code

Box-Shadow Spill

Box-Shadow Pseudo Loaders

15.05.2016

Leveraging the use of box-shadow to create interesting loading effects with just pseudo elements. Just by adding a class to an element you can get a cool loading animation in an overlay.

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

View Code

Box-Shadow Pseudo Loaders

Dynamic Box Shadow

14.08.2015

Made with: HTML,CSS (SCSS),JS

View Code

Dynamic Box Shadow

Isolating Css Box Shadows

11.06.2015

A simple & often misunderstood CSS fundamental. To isolate a single shadow we apply a negative spread and offset in the desired direction, then add a blur radius of equal distance to compensate. For inset shadows, the spread remains constant but we apply an offset in the opposite(-ve) direction. For multiple sides/shadows, simply combine any of the desired single-side rules into a comma separated list.

Made with: HTML,CSS (SCSS)

View Code

Isolating Css Box Shadows

Material Design Box Shadows

1.04.2015

Made with: HTML,CSS

View Code

Material Design Box Shadows

Live Stripes

25.02.2014

Made with box-shadows. CSS only.

Made with: HTML,CSS (SCSS)

View Code

Live Stripes