css-drop-shadow-effect.pdf

Loading ...
Global Do...
News & Politics
5
0
 
 
 
 
 
 
 
 
Create a drop shadow background effect 
 
 
This guide will teach you how to create a drop shadow background effect for your website using only a single image 
and some CSS. Not only is a drop shadow effect simple to create (only a few lines of code) but it also adds a new 
dimension to your site and can really make your content stand out. 
 
 
A fully detailed explanation, including all the code and graphics, can be downloaded at the bottom. 
 
 
 
Drop shadow effect example: 
 
The shadow effect is achieved by repeating the image of the drop shadow vertically (see download link below) by 
applying the style to your <body> using CSS. Two drop shadow images have been created, allowing you to use a larger 
width if necessary. Included sizes are optimised for 800×600 and 1024×768 monitor resolutions. Depending on which 
size you wish to use, simply change the width property of the #container style. 
 
 
Now that the background effect is applied to the website, add a #container div to your html and give it the property 
margin: 0 auto; this means it will always sit perfectly in the middle of your page. If you’re using the smaller shadow 
image make sure the width of the #container is 760px or if you’re using the wider image the width should be 960px. 
HTML Code: 
<div id=”container”> 
<p>Your Content Here</p> 
</div> 
 
 
CSS Code: 
body { 
background-image: url(images/background_760.jpg); 
background-repeat: repeat-y; 
background-position: center; 
background-color: #f7f4ee; 
} 
 
 
#container { 
width: 760px; margin: 0 auto; text-align: center; 
} 
 
Download the full tutorial here: 
http://www.hostgee.com/blog/HI_Drop_Shadow.zip 
 
 
 
 
 
 
Page 1