In this example, we will go through the box-shadow property of css.
Just like the text-shadow property, box-shadow will give an element of html a new look by adding different styled shadows.
As you can imagine, this is going to be more of an examples show rather than exaplanation because the property is pretty straight-forward.
The cases you’ll see below, are of a very high usage all over the web, and I recommend you consider these shadow designs on your projects.
They will make content on boxes in your website more catchy and attractive, so do not hesitate to use them.
1. Prerequisites
Below, I will present you to the necessary knowledge you should have to get through this.
1.1 Basic Set Up
First, go ahead and create a new html file and add the basic html and css like this:
<!DOCTYPE html> <html> <head> <title>CSS Buttons</title> </head> <body> <!-- STYLE SECTION --> <style type="text/css"> </style> <!-- HTML SECTION --> </body> </html>
1.2 Pseudo-Elements :before and :after
A pseudo-element creates a phoney element and inserts it before or after the content of the element that you’ve targeted.
We will use the :before and :after pseudo-elements to add shadows left, right, top, bottom or combinations of these.
See this simple example of its usage so you have a better clue:
– HTML
<!-- HTML SECTION --> <h1 class="text">This is the first item</h1>
– CSS
<!-- STYLE SECTION -->
.text:before {
content:"1. "; /* what to display before text element */
}
.text:after {
content: "!"; /* what to display after text element */
}
</style>
This would give the number 1. before the text and ! after the text like this:
1.3 Extra properties to consider
Along with the pseudo-elements, there are also some properties I’d like you to understand:
z-index – specifies the stack order of an element.
position – allows you to position elements within a page.
content – used when appyling :before and :after pseudo-elements.
left, right, top, bottom – defines the left, right, top, bottom edge of an element.
transform – self-explanatory, transforms an object by degree, scale ect.
2. Basic Box-Shadow Property
Application of the box-shadow property is pretty simple. It goes like this:
box-shadow: horizontal-offset vertical-offset blur-radius spread-radius color;
2.1 Attribute values explanation
But what do these attributes mean?
1. The horizontal offset (required):
– A positive value will make the shadow lie on the right of the box.
– A negative offset will make it lie on the left of the box.
2. The vertical offset (required):
– A negative value makes the shadow lie above the box.
– A positive value make it lie below the box.
3. The blur radius (required):
– Sharp shadows come with a value of 0, and the higher the number, the more blurred it will be, and the further out the shadow will extend.
4. The spread radius (optional):
– Positive values increase the size of the shadow.
– Negative values decrease the size.
Default is 0 (the shadow is same size as blur).
5. Color (required):
– Using HEX color: e.g. #ccc, #9895AF ect.
– Using RGBA color: e.g. rgba(192,192,192,0.3);
2.2 Application of the basic property
Create a div with a class of box.
<!-- HTML SECTION --> <div class="box basic"> <h3>WEB CODE GEEKS</h3> </div>
We are using multiple classes on an element, in this case two, because the box element will be the same for all examples, while the other class will contain distinctive attributes according to the effect we want to create.
Now give the body a light gray color and box element these initial attributes to create a standard now.
<!-- STYLE SECTION -->
body {
background:#E6E6E6;
}
.box {
width:70%;
height:200px;
background:#FFF;
margin:40px auto;
}
And the basic application of the box-shadow property would be:
/* no horizontal shadow, 10px vertical shadow, 6px blur, -6px spread radius, gray color */
.basic{
-webkit-box-shadow: 0 10px 6px -6px #777;
-moz-box-shadow: 0 10px 6px -6px #777;
box-shadow: 0 10px 6px -6px #777;
}
A basic shadow applied to a box like above will look like this:
3. Advanced 3D Looking Box Shadows
Now, let’s look at some popular designs with shadows.
For the first effect, every line of code is commented so that you know what we are doing.
3.1 Soft Box Shadow on Both Sides
/* EFFECT 1 */
/* Here shadows are styled as elements to give impressive look */
/* However, the box shadow property is applied at the end to make final touches */
.effect1
{
position: relative; /* relative positioning referring to before and after */
}
.effect1:before, .effect1:after /* apply some mutual properties before and after this element */
{
z-index: -1; /* send this element backward */
position: absolute; /* absolute positioning referring to effect2 */
content: ""; /* just required, no need to put anything inside */
bottom: 15px; /* bottom shadow alignment, less is closer to bottom */
left: 10px; /* consider this like a margin left */
width: 50%; /* width of the shadow element background */
top: 80%; /* consider this as margin top of the shadow element */
max-width:300px; /* restricts the max width of the shadow element */
background: #777; /* gives a background color to the shadow element */
-webkit-box-shadow: 0 15px 10px #777; /* compatibility case application */
-moz-box-shadow: 0 15px 10px #777; /* compatibility case application */
box-shadow: 0 15px 10px #777; /* applied the basic box-shadow property */
/* rotation of shadows/elements gives that 3D look to the box */
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.effect1:after
{
-webkit-transform: rotate(3deg); /* aligns the shadow right */
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px; /* consider this like a margin right */
left: auto; /* leave this auto to automatically set the left */
}
View:
3.2 Left and Right Box Shadow
In this effect, we take a look at the left and right box-shadows.
/* LEFT SHADOW */
.effect2
{
position: relative;
}
.effect2:before
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
/* RIGHT SHADOW */
.effect3
{
position: relative;
}
.effect3:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
right: 10px;
left: auto;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
}
View:
3.3 Hard Box Shadow on Both Sides
In this example, we look at a 3D like effect on both sides box shadow.
/* EFFECT 4 */
.effect4
{
position: relative;
}
.effect4:before, .effect4:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 25px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 35px 20px #777;
-moz-box-shadow: 0 35px 20px #777;
box-shadow: 0 35px 20px #777;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
-o-transform: rotate(-8deg);
-ms-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.effect4:after
{
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
-o-transform: rotate(8deg);
-ms-transform: rotate(8deg);
transform: rotate(8deg);
right: 10px;
left: auto;
}
View:
3.4 Soft Inset Shadow
You can also set inset shadows in a box element.
/* EFFECT 5 */
.effect5
{
position:relative;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect5:before, .effect5:after
{
content:"";
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:50%;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}
.effect5:after
{
right:10px;
left:auto;
-webkit-transform:skew(8deg) rotate(3deg);
-moz-transform:skew(8deg) rotate(3deg);
-ms-transform:skew(8deg) rotate(3deg);
-o-transform:skew(8deg) rotate(3deg);
transform:skew(8deg) rotate(3deg);
}
View:
3.5 Top, Bottom and Left, Right Inset Shadow
These two examples show: top and bottom inset shadow, left and right inset shadow.
/* TOP AND BOTTOM INSET SHADOW */
.effect6
{
position:relative;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect6:before, .effect6:after
{
content:"";
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:0;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}
.effect6:after
{
right:10px;
left:auto;
-webkit-transform:skew(8deg) rotate(3deg);
-moz-transform:skew(8deg) rotate(3deg);
-ms-transform:skew(8deg) rotate(3deg);
-o-transform:skew(8deg) rotate(3deg);
transform:skew(8deg) rotate(3deg);
}
/* LEFT AND RIGHT INSET SHADOW */
.effect7
{
position:relative;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect7:before, .effect7:after
{
content:"";
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:10px;
bottom:10px;
left:0;
right:0;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}
.effect7:after
{
right:10px;
left:auto;
-webkit-transform:skew(8deg) rotate(3deg);
-moz-transform:skew(8deg) rotate(3deg);
-ms-transform:skew(8deg) rotate(3deg);
-o-transform:skew(8deg) rotate(3deg);
transform:skew(8deg) rotate(3deg);
}
View:
4. Conclusion
Generally speaking, shadows are a great way to make some nice touches on elements.
They do create interesting look and feel of elements and that’s why you should consider using them.
Sometimes the code will be complicated, but feel free to use effects we used in this example, (just copy and paste) if you like any of them just the way they are.
However, if you feel professional at this, you can change values according to your needs.
5. Download
Below you can find all these shadow examples in one html file.
You can download the full source code of this example here: CSS Box-Shadow
