Advertisement
decembre

CSS - BOX-SHADOW v.1

May 8th, 2016
129
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.03 KB | None | 0 0
  1.  
  2. ============================
  3. ======== CSS - BOX-SHADOW
  4. ============================
  5. == http://codepen.io/tag/box-shadow/
  6. == http://www.css3.info/preview/box-shadow/
  7.  
  8. The Syntax:
  9. box-shadow: none | <shadow> [ , <shadow> ]*
  10.  
  11. <shadow> = inset? && [ <length>{2,4} && <color>? ]
  12.  
  13.  
  14. Examples:
  15. box-shadow: 10px 10px;
  16. box-shadow: 10px 10px 5px #888;
  17. box-shadow: inset 2px 2px 2px 2px black;
  18.  
  19. ==
  20. TEST:
  21. BLUE : TOP + LEFT
  22. GREEN : TOP/RIGHT CORNER
  23. RED: BOTTOM/LEFT CORNER
  24. box-shadow: 10px 10px BLUE, -10px -10px GREEN, 0px 0px 5px 5px RED;
  25.  
  26. ==
  27. TEST:
  28. RED : RIGHT + BOTTOM
  29. GREEN : TOP + LEFT
  30. YELLOW: TOP/RIGHT CORNER
  31. TAN : BOTTOM/LEFT CORNER
  32.  
  33. box-shadow: 10px 10px RED, -10px -10px GREEN, 10px -10px 0px YELLOW, -10px 10px 0px TAN , -10px 10px 0px TOMATO !important;
  34.  
  35. ==
  36. TEST:
  37. RED : RIGHT + BOTTOM
  38. GREEN : TOP + LEFT
  39. YELLOW: TOP/RIGHT CORNER + BOTTOM/LEFT CORNER
  40. box-shadow: 10px 10px RED, -10px -10px GREEN, 10px -10px 0px YELLOW, -10px 10px 0px TAN !important;
  41.  
  42. ============================
  43. ======== PERSO FLICKR ADD TO GROUP
  44. : TOP LEFT + RIGHT BLACK RGB
  45. box-shadow: -10px -10px 3px 1px rgba(0, 0, 0, 0.3), 10px -10px 3px 1px rgba(0, 0, 0, 0.3) !important;
  46.  
  47. ============================
  48. ======== PERSO FLICKR BUDY ICON MENU /*rgba(0, 0, 0, 0.3) */
  49. : BOTOM RIGHT BLACK RGB
  50. #personmenu_down_menu {
  51. box-shadow: 7px 7px 3px 1px rgba(0, 0, 0, 0.9) !important;
  52. border: 1px solid #333 !important;
  53. background: #222 !important;
  54. }
  55. ============================
  56. ======== CSS drop-shadows EXAMPLE USERSTYLES FORUM ICON USER
  57. /* (new37X) - TEST - FORUM - USER BUDY ICON - BACKGROUND - */
  58. .Vanilla a.ProfileLink img.ProfilePhotoMedium {
  59. display: inline-block !important;
  60. padding: 2px !important;
  61. /* border: 2px solid #222222 !important;*/
  62. border-radius: 8px !important;
  63. box-shadow: 1px 1px 6px 4px rgba(0,0,0,0.7) inset !important;
  64. background: white !important;
  65. }
  66.  
  67. ============================
  68. ======== CSS drop-shadows without images
  69. == http://nicolasgallagher.com/css-drop-shadows-without-images/
  70. == EXAMPLES : http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
  71. The basic technique :
  72. There is no need for extra markup, the effect can be applied to a single element.
  73. A couple of pseudo-elements are generated from an element and then pushed behind it.
  74.  
  75. .drop-shadow {
  76. position:relative;
  77. width:90%;
  78. }
  79.  
  80. .drop-shadow:before,
  81. .drop-shadow:after {
  82. content:"";
  83. position:absolute;
  84. z-index:-1;
  85. }
  86.  
  87. The pseudo-elements need:
  88. - To be positioned
  89. - Given explicit or implicit dimensions.
  90.  
  91. .drop-shadow:before,
  92. .drop-shadow:after {
  93. content:"";
  94. position:absolute;
  95. z-index:-1;
  96. bottom:15px;
  97. left:10px;
  98. width:50%;
  99. height:20%;
  100. }
  101.  
  102. The next step is to add a CSS3 box-shadow and apply CSS3 transforms.
  103. Different types of drop-shadow can be produced by varying these values and the types of transforms applied.
  104.  
  105. .drop-shadow:before,
  106. .drop-shadow:after {
  107. content:"";
  108. position:absolute;
  109. z-index:-1;
  110. bottom:15px;
  111. left:10px;
  112. width:50%;
  113. height:20%;
  114. -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  115. -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  116. box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  117. -webkit-transform:rotate(-3deg);
  118. -moz-transform:rotate(-3deg);
  119. -o-transform:rotate(-3deg);
  120. transform:rotate(-3deg);
  121. }
  122.  
  123. One of the pseudo-elements then needs to be positioned on the other side of the element
  124. and rotated in the opposite direction.
  125. This is easily done by overriding only the properties that need to differ.
  126.  
  127. .drop-shadow:after{
  128. right:10px;
  129. left:auto;
  130. -webkit-transform:rotate(3deg);
  131. -moz-transform:rotate(3deg);
  132. -o-transform:rotate(3deg);
  133. transform:rotate(3deg);
  134. }
  135.  
  136. The final core code is as shown below. There is just one more addition – max-width –
  137. to prevent the drop-shadow from extending too far below very wide elements.
  138.  
  139. .drop-shadow {
  140. position:relative;
  141. width:90%;
  142. }
  143.  
  144. .drop-shadow:before,
  145. .drop-shadow:after {
  146. content:"";
  147. position:absolute;
  148. z-index:-1;
  149. bottom:15px;
  150. left:10px;
  151. width:50%;
  152. height:20%;
  153. max-width:300px;
  154. -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  155. -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  156. box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
  157. -webkit-transform:rotate(-3deg);
  158. -moz-transform:rotate(-3deg);
  159. -o-transform:rotate(-3deg);
  160. transform:rotate(-3deg);
  161. }
  162.  
  163. .drop-shadow:after{
  164. right:10px;
  165. left:auto;
  166. -webkit-transform:rotate(3deg);
  167. -moz-transform:rotate(3deg);
  168. -o-transform:rotate(3deg);
  169. transform:rotate(3deg);
  170. }
  171.  
  172. ============================
  173. ======== BOX-SHADOW == Drop Shadows
  174. == http://sixrevisions.com/css/css3-techniques-you-should-know/
  175. The drop shadow effect accepts multiple values.
  176. - First = color of the shadow =
  177. 4 length values:
  178. - first 2 are the x (horizontal) offset and the y (vertical) offset.
  179. - The next value = blur added to the shadow.
  180. - The fourth and final value is the spread amount of the blur.
  181. Box shadow will also accept an inset keyword that will create an inset shadow.
  182.  
  183. box-shadow: #333 3px 3px 4px;
  184. -moz-box-shadow: #333 3px 3px 4px;
  185. -webkit-box-shadow: #333 3px 3px 4px;
  186.  
  187.  
  188. ============================
  189. ======== BOX-SHADOW == box-shadow
  190. == <a href="http://www.css3.info/preview/box-shadow/">Box-shadow, one of CSS3′s best new features</a>
  191. == Box-shadow, one of CSS3′s best new features
  192.  
  193. EXAMPLE PERSO (YAHOO MAIL SORT MAIL) :
  194. /* (new12)TEST OK - ITEMS - EACH CHOICE - with INSET BOX SHADOW - === */
  195. /*#menu-ml-sortby.optionMenu ul.first li {
  196. box-shadow: inset 0 0 2px 2px #888 ! important;
  197. }*/
  198.  
  199. /*#menu-ml-sortby.optionMenu ul.first li {
  200. box-shadow: inset 0px 0px 3px 3px #888;
  201. }*/
  202.  
  203. /* OK - OFFSET SHADOW FIN BAS DROITE - === */
  204. #menu-ml-sortby.optionMenu ul.first li {
  205. box-shadow: 2px 2px 2px #333 ! important;
  206. border-radius: 5px ! important;
  207. }
  208.  
  209. /* (new12)TEST - ITEMS - EACH CHOICE - with OFFSET BOX SHADOW - === */
  210. /*#menu-ml-sortby.optionMenu ul.first li {
  211. box-shadow: 0 0 2px 1px #333! important;
  212. }*/
  213.  
  214. == OFFSET + RADIUS + BLUR DISTANCE
  215. shadow offset to the bottom and right by 5px
  216. + border-radius of 5px applied to each corner
  217. + blur distance of 5px:
  218.  
  219. #Example_R {
  220. -moz-border-radius: 5px;
  221. box-shadow: 5px 5px 5px black;
  222. }
  223.  
  224. == RGBa OPACITY :
  225. Example O shows the same shadow
  226. + color black RGBa color
  227. + opacity of 70%:
  228. #Example_O {
  229. box-shadow: 5px 5px rgba(0,0,0,0.7);
  230. }
  231.  
  232. ============================
  233. ======== BOX-SHADOW == COLOR SHADOW
  234. 5 shadows specified in the following order;
  235. - firstly : black shadow with a spread distance of px and a blur distance of px
  236. - secondly : lime shadow offset to the top right
  237. - thirdly : red shadow offset to the bottom right with a blur distance applied
  238. - fourthly : yellow shadow offset to the bottom left, and lastly a blue shadow offset to the top left with a blur distance applied:
  239.  
  240. #Example_M {
  241. box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;
  242. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement