Making Shadows Without Images

[cragllo 0]

Im going to show you very simply how to create boxes with Shadows using div tags and css, no images needed, meaning fat pageload times!

 

You simple need to create two layers, one behind the other, the one behind will have a top and left margin on 20px, the one infront 10px, set teh background colour of the one behing darker than teh one infront, you should end up with something like this:

 

Here is th html to create this effect:

<div id="Layer1" style="position:absolute; left:15px; top:15px; width:400px; height:200px; z-index:1; background-color: #000066; layer-background-color: #000066; border: 1px solid #000000;"></div><div id="Layer2" style="position:absolute; left:10px; top:10px; width:400px; height:200px; z-index:2; background-color: #0099FF; layer-background-color: #0099FF; border: 1px solid #000000;"></div>

Its as simple as that, two divtags, a bit of css, no images Edited August 7, 2005 by OpaQue (see edit history)

[rvovk 0]

Nice one

[Dragonfly 0]

Really cool. Somewhere in someone's webpage I saw something like this when I tried to right-click no images was coming and I was wondering how he did it. Thanks for sharing it here. Keep sharing those with us. I don't mind it seeing more of those. Very nice tutorial.

[Adamrosso 0]

wow, thats nicely done =D. I never knew with such simple CSS coding you could get such a good outcome

[Tyssen 0]

<div id="Layer1" style="position:absolute; left:15px; top:15px; width:400px; height:200px; z-index:1; background-color: #000066; layer-background-color: #000066; border: 1px solid #000000;"></div><div id="Layer2" style="position:absolute; left:10px; top:10px; width:400px; height:200px; z-index:2; background-color: #0099FF; layer-background-color: #0099FF; border: 1px solid #000000;"></div>

One flaw with this method is that you've given absolute positioning to your first element. You can achieve the same result without absolutely positioning your first element like this:

<div id="Layer1" style="width:400px; height:200px; z-index:1; background-color: #000066; layer-background-color: #000066; border: 1px solid #000000;"><div id="Layer2" style="position:absolute; left:5px; top:10px; width:400px; height:200px; z-index:2; background-color: #0099FF; layer-background-color: #0099FF; border: 1px solid #000000;"></div></div>

The second <div> is positioned absolutely in relation to the first (ie it's inside the first div).
I've just posted this in another thread, but it seems relevant to this one too: CSS dropshadows (with feathered edges).