Posted By

ichnoweb on 04/19/11


Tagged

drop-shadow


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

notturnale
JonathanBurton


Different CSS Drop-Shadows


 / Published in: CSS
 

URL: http://nicolasgallagher.com/css-drop-shadows-without-images/demo/

  1. /* Shared styles */
  2.  
  3. .drop-shadow {
  4. position:relative;
  5. float:left;
  6. width:40%;
  7. padding:1em;
  8. margin:2em 10px 4em;
  9. background:#fff;
  10. -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  11. -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  12. box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  13. }
  14.  
  15. .drop-shadow:before,
  16. .drop-shadow:after {
  17. content:"";
  18. position:absolute;
  19. z-index:-2;
  20. }
  21.  
  22. .drop-shadow p {
  23. font-size:16px;
  24. font-weight:bold;
  25. }
  26.  
  27. /* Lifted corners */
  28.  
  29. .lifted {
  30. -moz-border-radius:4px;
  31. border-radius:4px;
  32. }
  33.  
  34. .lifted:before,
  35. .lifted:after {
  36. bottom:15px;
  37. left:10px;
  38. width:50%;
  39. height:20%;
  40. max-width:300px;
  41. -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  42. -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  43. box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  44. -webkit-transform:rotate(-3deg);
  45. -moz-transform:rotate(-3deg);
  46. -ms-transform:rotate(-3deg);
  47. -o-transform:rotate(-3deg);
  48. transform:rotate(-3deg);
  49. }
  50.  
  51. .lifted:after {
  52. right:10px;
  53. left:auto;
  54. -webkit-transform:rotate(3deg);
  55. -moz-transform:rotate(3deg);
  56. -ms-transform:rotate(3deg);
  57. -o-transform:rotate(3deg);
  58. transform:rotate(3deg);
  59. }
  60.  
  61. /* Curled corners */
  62.  
  63. .curled {
  64. border:1px solid #efefef;
  65. -moz-border-radius:0 0 120px 120px / 0 0 6px 6px;
  66. border-radius:0 0 120px 120px / 0 0 6px 6px;
  67. }
  68.  
  69. .curled:before,
  70. .curled:after {
  71. bottom:12px;
  72. left:10px;
  73. width:50%;
  74. height:55%;
  75. max-width:200px;
  76. -webkit-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
  77. -moz-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
  78. box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
  79. -webkit-transform:skew(-8deg) rotate(-3deg);
  80. -moz-transform:skew(-8deg) rotate(-3deg);
  81. -ms-transform:skew(-8deg) rotate(-3deg);
  82. -o-transform:skew(-8deg) rotate(-3deg);
  83. transform:skew(-8deg) rotate(-3deg);
  84. }
  85.  
  86. .curled:after {
  87. right:10px;
  88. left:auto;
  89. -webkit-transform:skew(8deg) rotate(3deg);
  90. -moz-transform:skew(8deg) rotate(3deg);
  91. -ms-transform:skew(8deg) rotate(3deg);
  92. -o-transform:skew(8deg) rotate(3deg);
  93. transform:skew(8deg) rotate(3deg);
  94. }
  95.  
  96. /* Perspective */
  97.  
  98. .perspective:before {
  99. left:80px;
  100. bottom:5px;
  101. width:50%;
  102. height:35%;
  103. max-width:200px;
  104. -webkit-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
  105. -moz-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
  106. box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
  107. -webkit-transform:skew(50deg);
  108. -moz-transform:skew(50deg);
  109. -ms-transform:skew(50deg);
  110. -o-transform:skew(50deg);
  111. transform:skew(50deg);
  112. -webkit-transform-origin:0 100%;
  113. -moz-transform-origin:0 100%;
  114. -ms-transform-origin:0 100%;
  115. -o-transform-origin:0 100%;
  116. transform-origin:0 100%;
  117. }
  118.  
  119. .perspective:after {
  120. display:none;
  121. }
  122.  
  123. /* Raised shadow - no pseudo-elements needed */
  124.  
  125. .raised {
  126. -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  127. -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  128. box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  129. }
  130.  
  131. /* Curved shadows */
  132.  
  133. .curved:before {
  134. top:10px;
  135. bottom:10px;
  136. left:0;
  137. right:50%;
  138. -webkit-box-shadow:0 0 15px rgba(0,0,0,0.6);
  139. -moz-box-shadow:0 0 15px rgba(0,0,0,0.6);
  140. box-shadow:0 0 15px rgba(0,0,0,0.6);
  141. -moz-border-radius:10px / 100px;
  142. border-radius:10px / 100px;
  143. }
  144.  
  145. .curved-vt-2:before {
  146. right:0;
  147. }
  148.  
  149. .curved-hz-1:before {
  150. top:50%;
  151. bottom:0;
  152. left:10px;
  153. right:10px;
  154. -moz-border-radius:100px / 10px;
  155. border-radius:100px / 10px;
  156. }
  157.  
  158. .curved-hz-2:before {
  159. top:0;
  160. bottom:0;
  161. left:10px;
  162. right:10px;
  163. -moz-border-radius:100px / 10px;
  164. border-radius:100px / 10px;
  165. }
  166.  
  167. /* Rotated box */
  168.  
  169. .rotated {
  170. -webkit-box-shadow:none;
  171. -moz-box-shadow:none;
  172. box-shadow:none;
  173. -webkit-transform:rotate(-3deg);
  174. -moz-transform:rotate(-3deg);
  175. -ms-transform:rotate(-3deg);
  176. -o-transform:rotate(-3deg);
  177. transform:rotate(-3deg);
  178. }
  179.  
  180. .rotated > :first-child:before {
  181. content:"";
  182. position:absolute;
  183. z-index:-1;
  184. top:0;
  185. bottom:0;
  186. left:0;
  187. right:0;
  188. background:#fff;
  189. -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  190. -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  191. box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  192. }
  193.  
  194. /* HTML START */
  195.  
  196. <div class="drop-shadow lifted">
  197. <p>Lifted corners</p>
  198. </div>
  199.  
  200. <div class="drop-shadow curled">
  201.  
  202. <p>Curled corners</p>
  203. </div>
  204.  
  205. <div class="drop-shadow perspective">
  206. <p>Perspective</p>
  207. </div>
  208.  
  209. <div class="drop-shadow raised">
  210. <p>Raised box</p>
  211.  
  212. </div>
  213.  
  214. <div class="drop-shadow curved curved-vt-1">
  215. <p>Single vertical curve</p>
  216. </div>
  217.  
  218. <div class="drop-shadow curved curved-vt-2">
  219. <p>Vertical curves</p>
  220. </div>
  221.  
  222.  
  223. <div class="drop-shadow curved curved-hz-1">
  224. <p>Single horizontal curve</p>
  225. </div>
  226.  
  227. <div class="drop-shadow curved curved-hz-2">
  228. <p>Horizontal curves</p>
  229. </div>
  230.  
  231.  
  232. <div class="drop-shadow lifted rotated">
  233.  
  234. <p>Rotated box</p>
  235. </div>
  236.  
  237. /* HTML END */

Report this snippet  

You need to login to post a comment.