Today I am going to write my first ever tutorial on CSS, In this tutorial I will be discussing about the CSS box-shadow property and how we can manipulate the codes little bit to create a multi shadowed box. The box-shadow property is used to give elements a shadow effect, the code changes depending on the
browsers, as for example if we want to show a box shadow in Mozilla Firefox we need to manipulate the code as -moz-box-shadow . So it's basically depend upon the proper coding to visualize the CSS effects globally.
You can see the demo result of this tutorial by clicking the following link
Below are the necessary codes
1) The minimal html format to show this CSS effect
Here we have taken the box1 as a class and assigned all the necessary styles to get the multi shadowed box.
To make it worked, place the html and css code in a codepan or any other code editing software.
You can change the default color of the box by changing the HEX color codes, which is clearly visible in the above CSS.
Final words
Always try to manipulate codes in your own way to make it understandable by yourself, if you are not capable of changing a lot of things, still you are good to go with different colors of the box by changing the HEX code.
browsers, as for example if we want to show a box shadow in Mozilla Firefox we need to manipulate the code as -moz-box-shadow . So it's basically depend upon the proper coding to visualize the CSS effects globally.
You can see the demo result of this tutorial by clicking the following link
Below are the necessary codes
1) The minimal html format to show this CSS effect
<html> <body> <div class="box1"> Multishadow </div> </body> </html>2) The necessary CSS of the multi shadow CSS box
.box1 {
width: 200px;
height: 100px;
margin: 100px auto;
background-color: #5c8dc8;
box-shadow: 0px 10px 1px -5px #92bbed, 0px 20px 1px -9px #c2d9f5;0px 40px 1px -18px #222222;
-moz-box-shadow:0px 10px 1px -5px #92bbed, 0px 20px 1px -9px #c2d9f5;0px 40px 1px -18px #222222;
-webkit-box-shadow:0px 10px 1px -5px #92bbed, 0px 20px 1px -9px #c2d9f5;0px 40px 1px -18px #222222;
line-height: 100px;
text-align: center;
font-size: 20px;
text-transform: uppercase;
font-family: Arial;
color: #ebebeb;
text-shadow: 1px 1px 1px #000000;
border-radius: 5px;
}
Here we have taken the box1 as a class and assigned all the necessary styles to get the multi shadowed box.
To make it worked, place the html and css code in a codepan or any other code editing software.
You can change the default color of the box by changing the HEX color codes, which is clearly visible in the above CSS.
Final words
Always try to manipulate codes in your own way to make it understandable by yourself, if you are not capable of changing a lot of things, still you are good to go with different colors of the box by changing the HEX code.