1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
---
layout: post
title: "Better Box Shadows"
date: 2019-01-08
---
Box shadow on <abbr title="hypertext markup language">HTML</abbr> elements has been widely supported across most browsers for a while now, but I find the default options don't allow for much visual manipulation of the shadows in general.
Let's take a look at a default configuration of `box-shadow`:
.box-container {
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
In the example above the first property number is the origin of the *x-axis*, the second number is the origin of the *y-axis* and the third is the amount of *blur*.
We should also add some minimal styling to cleanup the `.box-container` a little bit for our example:
<div class="box-container"></div>
.box-container {
box-shadow: 0 4px 8px rgba(0,0,0,0.3);
/* Styles to make it less ugly */
background: white;
border-radius: 10px;
border: 1px solid #eee;
height: 200px;
padding: 10px;
position: relative;
width: 250px;
}
Not bad - but we can do a lot better than this.
## Please sir, I want some more (depth)
We just need to add a simple child `div` (or use a `pseudo` element if you prefer) inside our main element we want to apply the shadow to:
<div class="box-container">
<div class="box-container-inner"></div>
</div>
Now we make our inner child element `absolute` and set it's `height` and `width` dynamically to be slightly smaller than it's parent (percentages work best for this).
Remember to set this child element behind it's parent by adding `z-index: -1`.
.box-container {
/* No box-shadow needed on this element anymore */
/* Styles to make it less ugly */
background: white;
border-radius: 10px;
border: 1px solid #eee;
height: 200px;
padding: 10px;
position: relative;
width: 250px;
}
## Inner Containers
We also need to target the `box-container-inner` element set inside the current parent to reflect our custom shadow styling:
.box-container-inner {
bottom: 0;
/* The box-shadow is added here now */
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
height: 94%;
left: 3%;
position: absolute;
width: 94%;
z-index: -1;
}
Which will make the drop-shadow render with a little more realistic depth.
## But wait - there's more!
We could stop now and have a decent drop-shadow that is certainly easier on the eyes - but we can make this even better with one extra property - `filter:blur();`.
So your final code would look like this:
.box-container {
/* Styles to make it less ugly */
background: white;
border-radius: 10px;
border: 1px solid #eee;
height: 200px;
padding: 10px;
position: relative;
width: 250px;
}
.box-container-inner {
bottom: 0;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
filter: blur(6px);
height: 94%;
left: 3%;
position: absolute;
width: 94%;
z-index: -1;
}
Which renders out into a much smoother blend of a drop-shadow, creating a more realistic illusion of depth.
Take a look at all the examples in the [CodePen examples](https://codepen.io/bradleytaunt/pen/dyNbZNj)
|
