Home > CSS, HTML > Shadow Effects to DIV, IMAGE etc. with CSS

Shadow Effects to DIV, IMAGE etc. with CSS

November 3rd, 2009 Mehmatrix Leave a comment Go to comments

We may need to use shadows behind objects in some cases on our web sites; but browsers don’t support all shadow codes. It is possible to see the same page with different appearances via different browsers. So, we found a little solution for that.


PNG files are going to be used for giving shadow effect to elements, because PNG format gives us lots of advantages and one of them is opacity. Make a shadow image and set size of it as you want. We made a PNG file and you can download it from here.

CSS File: Style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
div.shadowbox {
padding: 0;
float: left;
display: block;
position: relative;
margin: 6px 0px 0px 6px !important;
background: url(img/shadow.png) no-repeat bottom right !important;
}

div.shadowbox ELEMENT{
margin: -6px 6px 6px -6px;
position:relative;
display:block;
}

Simply, we made put a DIV behind our element and set our shadow PNG file as background of this DIV. You can write special html tag that you will use instead of “ELEMENT“. For example;

CSS File: Initializing special tags in shadowbox class.

1
2
3
4
5
6
div.shadowbox img,
div.shadowbox div{
margin: -6px 6px 6px -6px;
position:relative;
display:block;
}

HTML Code:

1
2
3
4
5
<div class="container">
<div class="shadowbox">YOU CAN PUT AN IMAGE ELEMENT HERE</div>
<div class="shadowbox">YOU CAN PUT A DIV ELEMENT HERE</div>
<div class="shadowbox">YOU CAN PUT AN INPUT ELEMENT HERE</div>
</div>

That’s it. From now on you can give shadow effects to your pages as you wish.

View DEMO:


Download This Application:

Bookmark and Share
Categories: CSS, HTML Tags: , , , , ,
  1. No comments yet.
  1. No trackbacks yet.
eXTReMe Tracker