Using CSS box-shadow(s) to create 3D Depth, Transitions and Neomorphism
Adrian Twarog
Posted on February 7, 2020
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:
- 4 Simple CSS Hover Transitions for your Elements Background
- How to implement Dark Mode with CSS new media call: prefers-color-scheme
- Why you should Whiteboard your Design & Development, UI & UX
- Creating a Mobile Design and Developing it
PS. Does anyone know how to add colors to 'pre' code on dev.to?
💖 💪 🙅 🚩
Adrian Twarog
Posted on February 7, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.