Archive

Posts Tagged ‘Shadow’

Shadow Effects to DIV, IMAGE etc. with CSS

November 3rd, 2009 Mehmatrix No 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 Click to Read Complete Article »

Bookmark and Share
Categories: CSS, HTML Tags: , , , , ,
eXTReMe Tracker