Give a card some depth.
What to build
One rule for .card.
Requirements
- A background colour of
white. - A
border-radiusof12px. - A
box-shadowwith0horizontal offset,2pxvertical offset,8pxblur and a colour ofrgb(0 0 0 / 0.2).
Constraints
Use box-shadow, and not border, to create the edge.
Example
box-shadow: 0 1px 3px gray;
Why it works
A shadow slightly below a box looks like light falling from above, which makes it seem raised off the page.
Hints
Hint 1
box-shadow values are x, y, blur and colour.
Hint 2
The background shorthand takes a colour.
Solution
Show one correct solution (try it yourself first)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Card</title>
<style>
body { background: whitesmoke; }
.card {
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgb(0 0 0 / 0.2);
}
</style>
</head>
<body>
<div class="card">A card</div>
</body>
</html>