advanced code snippet search

Posted By

doublej on 09/02/08


Tagged

div hack image jpg png gif opacity Firefox filter ie6 ie7 graphic drop gradient shadow IE8 Depth drop-shadow


Versions (?)

Who likes this?

10 people have marked this snippet as a favorite

localhorst
jonhenshaw
Almer
doublej
wizard04
SpinZ
basicmagic
joaosalless
jeroldan
steviraab


Image-less Dropshadow

 / Published in: CSS
 

URL: http://www.dubbelj.nl/drop-shadow/

As seen in maps.google.nl. Drop Shadow without any images. 5 DIV's with different opacity creates the gradient/shadow like effect. Lightweight and no png (or any IE6 hacks for that matter) hacks.

Any improvements are welcome...

Expand | Embed | Plain Text 
  1. #north {position: absolute;width: 200px;left: 100px;top: 100px;height: 5px;}
  2.  
  3. #east {width: 5px;position: absolute;height: 200px;top: 100px;left: 100px}
  4.  
  5. #south {position: absolute;width: 200px;height: 5px;left: 100px;top: 302px;}
  6.  
  7. #west {width: 5px;position: absolute;height: 200px;top: 100px;left: 305px}
  8.  
  9. .ds_ch {height: 1px;line-height: 1px;width: 100%;background: black;display: block;overflow: hidden;}
  10.  
  11. #east .ds_ch, #west .ds_ch {width: 1px;height: 100%;float: left;clear: none;display: inline;}
  12.  
  13. .o1 {opacity: .5;filter: alpha(opacity=50);}
  14.  
  15. .o2 {opacity: .4;filter: alpha(opacity=40);}
  16.  
  17. .o3 {opacity: .3;filter: alpha(opacity=30);}
  18.  
  19. .o4 {opacity: .20;filter: alpha(opacity=20);}
  20.  
  21. .o5 {opacity: .10;filter: alpha(opacity=10);}
  22.  
  23. /* For connecing the shadow in 2 corners */
  24.  
  25. .mv1 {margin-top: 0px;padding-bottom: 7px;}
  26.  
  27. .mv2 {margin-top: 1px;padding-bottom: 5px;}
  28.  
  29. .mv3 {margin-top: 2px;padding-bottom: 3px;}
  30.  
  31. .mv4 {margin-top: 3px;padding-bottom: 1px;}
  32.  
  33. .mv5 {margin-top: 4px;padding-bottom: 0px;}
  34.  
  35. .m1 {margin-left: 1px;padding-right: 8px;}
  36.  
  37. .m2 {margin-left: 2px;padding-right: 6px;}
  38.  
  39. .m3 {margin-left: 3px;padding-right: 4px;}
  40.  
  41. .m4 {margin-left: 4px;padding-right: 2px;}
  42.  
  43. .m5 {margin-left: 5px;padding-right: 0px;}
  44.  
  45. /*
  46. ds = dropshadow
  47.  
  48. ch = child
  49. pa = parent
  50.  
  51. o = opacity
  52. m = margin
  53. mv = margin vertical
  54.  
  55. */
  56.  
  57. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  58. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr">
  59. <head>
  60. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  61. <meta name="Author" content="#" />
  62. <meta name="Description" content="#" />
  63. <meta name="Copyright" content="#" />
  64. <meta name="Robots" content="#" />
  65. <meta name="Generator" content="#" />
  66. <meta name="Keywords" content="#" />
  67. <link rel="stylesheet" href="shadows.css" type="text/css"  media="screen"/>
  68. </head>
  69. <body>
  70. <div id="north">
  71. 		<div class="ds_ch o1 m1">
  72. 		</div>
  73. 		<div class="ds_ch o2 m2">
  74. 		</div>
  75. 		<div class="ds_ch o3 m3">
  76. 		</div>
  77. 		<div class="ds_ch o4 m4">
  78. 		</div>
  79. 		<div class="ds_ch o5 m5">
  80. 		</div>
  81. </div>
  82. <div id="east">
  83. 		<div class="ds_ch o5 mv5">
  84. 		</div>
  85. 		<div class="ds_ch o4 mv4">
  86. 		</div>
  87. 		<div class="ds_ch o3 mv3">
  88. 		</div>
  89. 		<div class="ds_ch o2 mv2">
  90. 		</div>
  91. 		<div class="ds_ch o1 mv1">
  92. 		</div>
  93. </div>
  94. <div id="south">
  95. 		<div class="ds_ch o5 m5">
  96. 		</div>
  97. 		<div class="ds_ch o4 m4">
  98. 		</div>
  99. 		<div class="ds_ch o3 m3">
  100. 		</div>
  101. 		<div class="ds_ch o2 m2">
  102. 		</div>
  103. 		<div class="ds_ch o1 m1">
  104. 		</div>
  105. </div>
  106. <div id="west">
  107. 		<div class="ds_ch o1 mv1">
  108. 		</div>
  109. 		<div class="ds_ch o2 mv2">
  110. 		</div>
  111. 		<div class="ds_ch o3 mv3">
  112. 		</div>
  113. 		<div class="ds_ch o4 mv4">
  114. 		</div>
  115. 		<div class="ds_ch o5 mv5">
  116. 		</div>
  117. </div>
  118. </body>
  119. </html>

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: wizard04 on September 3, 2008

I like your use of north/east/south/west. I've always used top/right/bottom/left and it can get confusing in large stylesheets.

Posted By: doublej on September 3, 2008

Thanks. I always use North, East, South and West in my mind when entering shorthand CSS for borders and padding. Makes it a lot easier to remeber which is which.

Posted By: wizard04 on September 3, 2008

Well, I just couldn't help myself... Just wrote another drop shadow implementation: http://snipplr.com/view/8166/css-drop-shadow/

Posted By: wizard04 on September 4, 2008

Just noticed you've got the id's for the east and west divs reversed ("east" should be "west" & vice versa).

You need to login to post a comment.