Having shadow to a border using CSS
Do you want to add a shadow to a border using CSS code? Hope you agree with me that CSS is nice to work with… I think you can implement whatever you want, except you have to choose the right method. Follow the next steps … it is the way I choose to add a shadow to a border.
Before started you should know I make the shadow from small pictures (3×4 pixels for the vertical shadow).
Step 1 Make a div with the follow properties:
.page{
width:805px;
background-image:url(images/shadow.gif);
background-repeat:repeat-y;
background-position:right;
}
Here we have the main container. I set the width - I initially wanted a 800 pixels width, but this width has added the borders and the image for the shadow (3 pixels width). I wanted a shadow added to the right border so I set the background-position right.
Step 2 In the page div I added another div - I called it main.
.main{
width:800px;
border:1px solid #CFCFE8;
margin-right:3px;
}
Here we have the border set and the width. Until here we have a 800 pixels width div with a border and in the right side we also have a small shadow.
Step 3 We need now a shadow for the bottom. Here is the HTML code:
<div class="shadow"><div class="corner"> </div></div>
.shadow{width:805px;
height:3px;
background-image:url(images/butShadow.gif);
background-repeat:repeat-x;
}
.corner{
float:left;
background-image:url(images/corner.gif);
background-repeat:no-repeat;
}
What I’ve done here? I put a div under the page div which has on the background a small image for the shadow. Because I wanted a special left corner I added one more div with another picture on the background (see the corner class).
That should be all! This is my method for adding a shadow to the right and to the bottom of a container. If you have another suggestion I wait to talk about this on forum. 
Post a comment
RSS/XML