How to Give Box shadow in css


In css3, Provide Drop shadow or box shadow and that you can use to create better look website for other.

HTML file Is :

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>krButani</title>
<style>
.t1 {

margin:10px;
padding:20px;
height:200px;
width:200px;

font-size:24px;
font-family:Verdana, Arial, Helvetica, sans-serif;

background:#5886F1;
color:#fff;
border:5px solid #fff;

/*
*
* First offset Indicates x position.
* Second offset Indicates y Position.
* Third offset Indicates the size of the shadow.
* Fourth offset Indicates the darkness of the shadow.
* And Last Give the Color Of The Shadow
*
*/

box-shadow:0px 0px 3px 2px #999;

/* Box Shadow have Two Prefix is below */

-moz-box-shadow:0px 0px 3px 2px #999; /* -moz is mozila */
-webkit-box-shadow:0px 0px 3px 2px #999; /* -webkit is Chrome */
}

/* if you can give diffent proerties of all side apply like below */

.t2 {

margin:10px;
padding:20px;
height:200px;
width:200px;

font-size:24px;
font-family:Verdana, Arial, Helvetica, sans-serif;

background:#5886F1;
color:#fff;
border:5px solid #fff;

box-shadow:2px 0px 5px green, -2px 0px 5px blue,0px -2px 5px red,0px 2px 5px black;
}
</style>
</head>

<body>
<div class="t1">
Title
</div>
<div class="t2">
Title
</div>
</body>
</html>

Output Is :


Popular posts from this blog

How to create a custom form in wordpress

My new Jquery Plugin name is krDailog