In this tutorial we'll use the box-shadow property to create a layered card component, and animate it on hover.
Beautiful effects expertly combining colour, clever box-shadow configurations and position-based animation.
Inspired by Tobias Bjerrome’s blog post Smoother & sharper shadows with layered box-shadows
Sometimes when coding a UI element you want a shadow around the whole box. However, most CSS box-shadow examples/tutorials tend to show inset box-shadows or ones that otherwise sit off to the side.
Here’s how to apply box-shadow to the whole box for a simple but nice effect.
.box-with-shadow {
box-shadow: 0 0 4px #ccc;
}And here’s how it looks:
See all tags.