Thu, 06/02/2011 - 07:51 — Isk

CSS Drop Shadow

Css drop shadow is a Technique which can be implemented on a block element , it’s really easy and flexible , we will make it without using any image , so our page won’t be heavy .
If you are one of those people , who likes to see an example of it before starting the tutorial , you can click here .

Let’s start :

1- The HTML code , it’s really easy and understandable

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>css dropshadow</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link media="screen" type="text/css" rel="stylesheet" href="style-dropshadow.css" /> </head>

You can write here whatever you want.You can write here whatever you want.You can write here whatever you want.You can write here whatever you want.You can write here whatever you want.You can write here whatever you want.You can write here whatever you want.You can write here whatever you want.

                    </div>
            </div>
        </div>
   </div>

</body>

</html>

2- the .css code , I named the css (style-dropshadow.css)

body { margin: 0px; padding: 20px; font-family: verdana; font-size: 12px; }

#shadow-box {
            position: relative;
            left: 3px;
            top: 3px;
            margin-right: 3px;
            margin-bottom: 3px;
}

#shadow-box .box, #shadow-box .second-shadow {
            position: relative;
            left: -1px;
            top: -1px;
}

#shadow-box .box {
                        background: #ffffff;
                        border: 1px solid #909090;
                        padding: 8px;
            }

#shadow-box .first-shadow {
background: #f6f6f6;
}

#shadow-box .second-shadow {
background: #DBDADB;
}

That was the first way to make it , there is another way to make it using css3 , its much much easier (but it's not supported by all browsers untill now . and click here for the example

the code :-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>css dropshadow</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

-moz-box-shadow: 3px 3px 10px #000;
-webkit-box-shadow: 3px 3px 10px #000;
box-shadow: 3px 3px 10px #000;
}
</style>

</head>

<body>

<div id="shadow-example">
WWW.GROOK.NET
</div>

</body>

</html>

End of this tutorial , I have that you enjoyed .

Author : Ibrahim Kettaneh .

Forums:

Web Development