In the post this time, We’ll try one of the greatness of the CSS3 Box shadow and rounded Corners.
To try this css code, please you are using a browser chrome firefox 3.6 or 4.1 or the latest released safari
please follow the following steps :
1. Add the following code in to your style.css .
.box-shadow {
background-color:green;
border: 1 px solid ;
padding:5px;
text-align: center;
width:400px;
box-shadow:10px 10px 20px #000;
-webkit-box-shadow:10px 10px 20px #000;
-moz-box-shadow: 10px 10px 20px #000;
}
.box-shadow2 {
background-color:green;
border: 1 px solid ;
padding:5px;
text-align: center;
width:400px;
box-shadow:10px 10px 20px #000;
-webkit-box-shadow:5px 5px 10px #000;
-moz-box-shadow: 10px 10px 20px #000;
background-color:green;
border: 1 px solid ;
padding:5px;
text-align: center;
width:400px;
box-shadow:10px 10px 20px #000;
-webkit-box-shadow:10px 10px 20px #000;
-moz-box-shadow: 10px 10px 20px #000;
}
.box-shadow2 {
background-color:green;
border: 1 px solid ;
padding:5px;
text-align: center;
width:400px;
box-shadow:10px 10px 20px #000;
-webkit-box-shadow:5px 5px 10px #000;
-moz-box-shadow: 10px 10px 20px #000;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-border-radius: 8px;
}
2. Add the following code into your template you want to show them.
<div class=”box-shadow”>
testing
</div>
testing
</div>
And below code to show an other one.
<div class=”box-shadow2″>
testing
</div>
testing
</div>
Finish.
the result:
Firefox 3.6
Chrome 4.1
For Online Demo :
you can modify according to your wishes
Hopefuly useful.
Related posts:
