Categorized | CSS, CSS 3, Tutorial, Wordpress

how to create a shaded box and shaded box with rounded corners

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;

-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>

And below code to show an other one.

<div class=”box-shadow2″>
testing
</div>

Finish.

the result:

Firefox 3.6

Chrome 4.1

For Online Demo :

you can modify according to your wishes

Hopefuly useful.

Leave a Reply

*

Our Partner

Our Partner

Update ESET Nod32

Update 11322, 15 Mar 2015

Update 15 Mar 2015

~ For Eset All Version, OS XP, Vista dan Win7