Popular
Ads by Google
Donate
If you like articles and you want an increase of them, please make a little donation. If you make a donation you can submit us by mail an argument for next articles!
add RSS
| Shadowed div |
| Lunedì 30 Marzo 2009 20:32 |
|
This post explains how to apply a shadow on borders of a div with css. The shadow effect is very useful to give rilief to a div and to break the flat effect of the layout. It's incredible, but with this little expedient the final effect will be very different. Then, we can take a simple html page with a navigation column on the left and the main column in the rest of the space. <div id="main-body"> <div id="leftcol"> <ul> <li>first</li> <li>second</li> </ul> </div> <div id="maincol" style="width: 350px"> <br><br><br><br><br><br><br><br><br><br> <div style="background: yellow">test text</div> <br><br><br><br><br><br><br><br><br><br> </div> </div> and here the associate css #main-body {position: relative;z-index: 1;overflow: hidden; border: solid 1px blue} #leftcol {float: left;width: 215px;background: gray;} #maincol {background : white;float: left}  We will use two little png for shadows, 15 px of width are enought.   the best solution in my opinion is the surrounding of the div "maincol" with other two div like in the following case: <div id="shadow-left" style="width: 365px"> <div id="shadow-right" style="width: 350px"> <div id="maincol" style="width: 335px"> <br><br><br><br><br><br><br><br><br><br> <div style="background: yellow">test text</div> <br><br><br><br><br><br><br><br><br><br> </div> </div> </div> and applyng a related css like this : #shadow-left { float: left; margin-left: -15px; background-image: url('shad_left.png'); background-repeat: repeat-y; background-position: 0px 0px; } #shadow-right { float: left; margin-left: 15px; background-image: url('/shad_right.png'); background-repeat: repeat-y; background-position: 735px; }  you will loss 15 px in the maincol , but you will have a nice effect with little effort and a good rendering time, bacause you load few pixels from images. To create link towards this article on your website, copy and paste the text below in your page. Preview : Powered by QuoteThis © 2008 |
Ricerca personalizzata