3D shade effect with CSS ?

  • VentsyV
  • Student
  • Student
  • VentsyV
  • Posts: 65

Post 3+ Months Ago

I want to add 3D feel to my boxes, by adding a shade "under" the box.
I tried by setting the borders different colors:
Code: [ Select ]
div.box
{
  border-left: 1px solid #8a8a8a;
  border-top : 1px solid #8a8a8a;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
}
  1. div.box
  2. {
  3.   border-left: 1px solid #8a8a8a;
  4.   border-top : 1px solid #8a8a8a;
  5.   border-right: 2px solid black;
  6.   border-bottom: 2px solid black;
  7. }

This kind of does what I need, but it is kind of not very "smooth".
Another aproach I'm thinking about is to add a box under this one, so that only about 2px are visible on the right and bottom side of my original box. I can set the bgcolor to whatever my shade is going to be and still add borders around the original box.
I do not what to clutter the code too much, or to make it too havy.
Any other ideas ??
Thanks
  • Mas Sehguh
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1852

Post 3+ Months Ago

I think this is what you want. Here is an example from my Web space. Feel free to steal the code.

http://www.rpi.edu/~hughes/www/tricks/shadowbox/

For each box, three extra tags are needed.
  • VentsyV
  • Student
  • Student
  • VentsyV
  • Posts: 65

Post 3+ Months Ago

Yes this is the type of thing I am looking for. So you use a white point at the edges to get that "shadow feel" a ? Thats kind of slick. I will probably "borrow" from your code if mine does not work out well. :)
Thanks
  • VentsyV
  • Student
  • Student
  • VentsyV
  • Posts: 65

Post 3+ Months Ago

Hmm I realized that the "shadow feeling" comes from the fact that the top box is a bit wider on the left and a bit higher on the top side than the shadow box. therefore I thought that I might use possitioning in some way to get this effect.
I did a quick google and I found those sites that address this problem:
http://www.w3.org/Style/Examples/007/shadows.html
http://nontroppo.org/test/shadow.html
I decided to post them here for future refference.
Thanks
  • Mas Sehguh
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1852

Post 3+ Months Ago

I now have put a more interesting example up in which the shadows are not drop shadows -- they have diagonal edges.

http://www.rpi.edu/~hughes/www/tricks/shadowbox/
  • VentsyV
  • Student
  • Student
  • VentsyV
  • Posts: 65

Post 3+ Months Ago

yeah thats nice. However on the big box, you should use different colors for the right and left shade so that there is an edge in the bottom right corner, the same way there is edge on the example text shadow.
  • VentsyV
  • Student
  • Student
  • VentsyV
  • Posts: 65

Post 3+ Months Ago

I found another easy way to create drop shadows. I notice that the top of your top layer has to be a bit higher and the right side a bit to the left than the corresponding sides of the shade. Thats why I used relative positioning. It worked nicely.
Here is the code:
Code: [ Select ]
div.box
{
  width: 100%;
 
border-top: 1px solid #8a8a8a;
  border-left: 1px solid #8a8a8a;
  border-right: 1px solid black;
  border-bottom: 1px solid black;

  background-color: white;
 
  position: relative;
  right: 6px;
  bottom: 6px;
  z-index: 1;
}

div.shadow
{
  background-color: #d3d3d3;
  width: 15%;
  float: left;
  margin-right: 1em;

}
  1. div.box
  2. {
  3.   width: 100%;
  4.  
  5. border-top: 1px solid #8a8a8a;
  6.   border-left: 1px solid #8a8a8a;
  7.   border-right: 1px solid black;
  8.   border-bottom: 1px solid black;
  9.   background-color: white;
  10.  
  11.   position: relative;
  12.   right: 6px;
  13.   bottom: 6px;
  14.   z-index: 1;
  15. }
  16. div.shadow
  17. {
  18.   background-color: #d3d3d3;
  19.   width: 15%;
  20.   float: left;
  21.   margin-right: 1em;
  22. }

That works well in IE 6.0. I need to test it in other browsers. If someone feels like it would you mind testing this ? I would offer my web site URL but I have not got my hosting yet ...
Thanks

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 20 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.