aboutsummaryrefslogtreecommitdiff
path: root/_posts/2019-01-08-better-box-shadows.md
blob: 39d5fb5432d827452e09c33f822b78cf2010552a (plain)
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)