Using CSS box-shadow(s) to create 3D Depth, Transitions and Neomorphism

Adrian Twarog - Feb 7 '20 - - Dev Community

This video will share some ways to use CSS box-shadows to add more depth to elements on the page, and animate hover transitions and more.

This includes things like:

  • Introduction to Box Shadows in CSS
  • Using Box Shadows to add depth
  • Transition the shadow on hover both towards and away from the screen
  • Neomorphism and how it works

My favourite type of box shadow:

box-shadow:0px 15px 10px rgba(0,0,0,0.15);

This video will expand on what we learn about transitions in the previous post. If you want to read that, I will provide it in the links below.

Want to see more:

I will try to post new great content every day. Here are the latest items:

PS. Does anyone know how to add colors to 'pre' code on dev.to?

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .