Posted By

wizard04 on 09/03/08


Tagged

css html opacity transparency drop shadow


Versions (?)

Who likes this?

9 people have marked this snippet as a favorite

localhorst
SpinZ
doublej
basicmagic
monapdx
dsquare
Bluewall
tmbrenneke
clacwebstudio


CSS Drop Shadow


 / Published in: CSS
 

URL: http://test.dragonzreef.com/cssDropShadow.htm

Creates a drop shadow for a div. In IE I can't get filter:alpha(opacity=__) to work right, but it degrades gracefully without it so I left it out.

  1. ****************
  2. ***** CSS ******
  3. ****************
  4.  
  5. .dropShadow {
  6. position:relative;
  7. z-index:1;
  8. }
  9.  
  10. /*border boxes; inside-->outside*/
  11. .dropShadow .drop1, .dropShadow .drop2, .dropShadow .drop3,
  12. .dropShadow .drop4, .dropShadow .drop5 {
  13. position:absolute;
  14. right:0;
  15. bottom:0;
  16. width:100%;
  17. height:100%;
  18. }
  19. .dropShadow .drop1 { opacity:0.5; }
  20. .dropShadow .drop2 { opacity:0.4; }
  21. .dropShadow .drop3 { opacity:0.3; }
  22. .dropShadow .drop4 { opacity:0.2; }
  23. .dropShadow .drop5 { opacity:0.1; }
  24.  
  25. .dropShadow.dropBR .drop1, .dropShadow.dropBR .drop2, .dropShadow.dropBR .drop3,
  26. .dropShadow.dropBR .drop4, .dropShadow.dropBR .drop5 {
  27. top:0; left:0; /*shadow positioned bottom-right*/
  28. }
  29. .dropShadow.dropBL .drop1, .dropShadow.dropBL .drop2, .dropShadow.dropBL .drop3,
  30. .dropShadow.dropBL .drop4, .dropShadow.dropBL .drop5 {
  31. top:0; left:-16px; /*shadow positioned bottom-left*/
  32. }
  33. .dropShadow.dropTR .drop1, .dropShadow.dropTR .drop2, .dropShadow.dropTR .drop3,
  34. .dropShadow.dropTR .drop4, .dropShadow.dropTR .drop5 {
  35. top:-16px; left:0; /*shadow positioned top-right*/
  36. }
  37. .dropShadow.dropTL .drop1, .dropShadow.dropTL .drop2, .dropShadow.dropTL .drop3,
  38. .dropShadow.dropTL .drop4, .dropShadow.dropTL .drop5 {
  39. top:-16px; left:-16px; /*shadow positioned top-left*/
  40. }
  41.  
  42. /*top & bottom borders*/
  43. .dropShadow .drop1 div, .dropShadow .drop2 div, .dropShadow .drop3 div,
  44. .dropShadow .drop4 div, .dropShadow .drop5 div {
  45. position:absolute;
  46. top:8px; right:0; bottom:0; left:8px;
  47. border-style:solid;
  48. border-color:#999999;
  49. }
  50. .dropShadow .drop1 div { margin:7px -1px -1px 7px; border-width:1px 0 1px 0; background-color:#999999; }
  51. .dropShadow .drop2 div { margin:6px -2px -2px 6px; border-width:1px 0 1px 0; }
  52. .dropShadow .drop3 div { margin:4px -4px -4px 4px; border-width:2px 0 2px 0; }
  53. .dropShadow .drop4 div { margin:2px -6px -6px 2px; border-width:2px 0 2px 0; }
  54. .dropShadow .drop5 div { margin:0 -8px -8px 0; border-width:2px 0 2px 0; }
  55.  
  56. /*left & right borders*/
  57. .dropShadow .drop1 div div, .dropShadow .drop2 div div, .dropShadow .drop3 div div,
  58. .dropShadow .drop4 div div, .dropShadow .drop5 div div {
  59. position:absolute;
  60. top:0; right:0; bottom:0; left:0;
  61. margin:0;
  62. }
  63. .dropShadow .drop1 div div { border-width:0 1px 0 1px; }
  64. .dropShadow .drop2 div div { border-width:0 1px 0 1px; }
  65. .dropShadow .drop3 div div { border-width:0 2px 0 2px; }
  66. .dropShadow .drop4 div div { border-width:0 2px 0 2px; }
  67. .dropShadow .drop5 div div { border-width:0 2px 0 2px; }
  68.  
  69. /*content being shadowed*/
  70. .dropShadow .dropContent {
  71. position:relative;
  72. z-index:1;
  73. background-color:white;
  74. }
  75.  
  76. ****************
  77. ***** HTML *****
  78. ****************
  79.  
  80. <div class="dropShadow dropBR" style="float:left; position:absolute;">
  81. <div class="drop1"><div><div></div></div></div>
  82. <div class="drop2"><div><div></div></div></div>
  83. <div class="drop3"><div><div></div></div></div>
  84. <div class="drop4"><div><div></div></div></div>
  85. <div class="drop5"><div><div></div></div></div>
  86. <div class="dropContent" style="border:1px solid black; padding:2px;">
  87.  
  88. <img src="birdhouse4.gif">
  89.  
  90. </div>
  91. </div>

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: doublej on September 4, 2008

Nice job, how come the filter doesn't work? Works fine in mine, right?

Posted By: wizard04 on September 4, 2008

Yours works fine; I have no idea why mine doesn't. Does it work for you if you put it in?

Posted By: doublej on September 4, 2008

It is not working, but it seems that you are not using the same technique as i am. You're using borders while i am using the actual block to produce the contrast.

As for rule 43 & 44. A selector like this works fine as well: /top & bottom borders/
.dropShadow div div{
position:absolute;
top:8px; right:0; bottom:0; left:8px;
border-style:solid;
border-color:#999999;
}

Posted By: wizard04 on September 4, 2008

True, unless you have a div inside .dropContent. I could reverse it in .dropShadow .dropContent div, but that could cause problems with priorities if you're not paying attention.

Posted By: wizard04 on September 4, 2008

I wouldn't think applying opacity to borders would make any difference. :-? Trying a simple example like this works fine:
``

Posted By: wizard04 on September 4, 2008

...so much for Markdown markup... &lt;div style="width:100px; height:100px; border:3px solid black; filter:alpha(opacity=10);"&gt;&lt;/div&gt;

You need to login to post a comment.