advanced code snippet search

We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.

Posted By

wizard04 on 09/03/08


Tagged

css html opacity transparency drop shadow


Versions (?)


Who likes this?

4 people have marked this snippet as a favorite

SpinZ
doublej
basicmagic
monapdx


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.

Plain TextExpand 
  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.