Box shadow
In this article we are going to learn about box shadow in css, how to add drop shadow around html element box.
We learnt about css in general, minimum height, maximum height, scroll, inline css, internal css, external css, selectors css, positions in css, display in css, lists style in css, multiple css, fixed layout in css, liquid layout in css and links style in css so, we will be focusing on box shadows.
Box shadow
Box shadow is a Cascading Style Sheet property used to add drop shadow around html elements box and the box shadow color can be specified.
Let us create a div element with box shadow applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.box-shadow-example {
box-shadow: 1px 2px 3px 3px;
}
<style/>
</head>
<body>
<div class="box-shadow-example">This is a div element with box shadow applied.</div>
</body>
</html>
So, we should have the following results and the div element has dark drop shadow around it.
Let us create another div element with orange box shadow color specified, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.box-shadow-example {
box-shadow: 1px 2px 3px 3px orange;
}
<style/>
</head>
<body>
<div class="box-shadow-example">This is a div element with box shadow and orange box shadow color specified.</div>
</body>
</html>
So, we should have the following results and the div element has orange drop shadow around it.
Let us create two div elements with orange box shadow color specified, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.box-shadow-example1 {
box-shadow: 1px 2px 3px 3px orange;
float: left;
width: 45%;
}
.box-shadow-example2 {
box-shadow: 1px 2px 3px 3px orange;
float: right;
width: 45%;
}
<style/>
</head>
<body>
<div class="box-shadow-example1">This is a div element with box shadow and box shadow color specified.</div>
<div class="box-shadow-example2">This is a div element with box shadow and box shadow color specified.</div>
</body>
</html>
So, we should have the following results and the div elements have orange drop shadow color around them.
Let us create two div elements with purple and orange box shadow colors specified, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.box-shadow-example1 {
box-shadow: 3px 0px 1px 2px purple;
float: left;
width: 45%;
}
.box-shadow-example2 {
box-shadow: 0px 3px 7px 3px orange;
float: right;
width: 45%;
}
<style/>
</head>
<body>
<div class="box-shadow-example1">This is a div element with purple box shadow color specified.</div>
<div class="box-shadow-example2">This is a div element with orange box shadow color specified.</div>
</body>
</html>
So, we should have the following results and the div elements have different drop shadow color around them.