Shadow without using images in CSS

Hi,

Here is a small piece of code which i found very useful. In normal cases we used to create images for producing shadows like this. Imagine if your page has around 4 coloumns where each coloumn is of diffrent width. You need to cut around 6 to 8 images for producing this shadow effect.

By using this code you can produce shadow effect without the use of images.

Shadow without using images

Concept : Main container div is surrounded by 4 divs. Each div is going 1px negative margin giving 1px visible area for each 4 divs. All the divs uses background colors starting with darker color to the innermost div and light color to the outer most div.

Here is the demo

Here is the HTML and CSS required to produce this effect

<div class="shContainer">
		<div class="shadow1">
			<div class="shadow2">
				<div class="shadow3">
					<div class="container">
This is div dropping shadow in its outer surface. No images are used. Works well with all the browesers.
CSS driven.
If you resize the page also the look and feel of the shadow is not affected.
This is a very optimistic coding, which saves lot of memory.
 Means your page load time will be more ( coz there is no image).
					</div>
				</div>
			</div>
		</div>
	</div>

CSS for this is:

.shContainer {
position: relative;
left: 3px;
top: 3px;
margin-right: 3px;
margin-bottom: 3px;
}

.shContainer .shadow2,
.shContainer .shadow3,
.shContainer .container {
position: relative;
left: -1px;
top: -1px;
}

.shContainer .shadow1 {
background: #F1F0F1;
}

.shContainer .shadow2 {
background: #DBDADB;
}

.shContainer .shadow3 {
background: #B8B6B8;
}

.shContainer .container {
background: #ffffff;
border: 1px solid #848284;
padding: 10px;
}

Advertisement