Jump to content
xisto Community
Sign in to follow this  
cragllo

Making Shadows Without Images

Recommended Posts

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! :D

 

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:

Posted Image

 

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 :D Edited by OpaQue (see edit history)

Share this post


Link to post
Share on other sites

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. :D I don't mind it seeing more of those. Very nice tutorial.

Share this post


Link to post
Share on other sites

<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).

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.