CSS - BOX-SHADOW v.1

============================
======== CSS - BOX-SHADOW
============================
== http://codepen.io/tag/box-shadow/
== http://www.css3.info/preview/box-shadow/

The Syntax:
box-shadow: none | <shadow> [ , <shadow> ]*

<shadow> = inset? && [ <length>{2,4} && <color>? ]


Examples:
box-shadow: 10px 10px;
box-shadow: 10px 10px 5px #888;
box-shadow: inset 2px 2px 2px 2px black;

==
TEST:
BLUE :  TOP + LEFT
GREEN : TOP/RIGHT CORNER
RED:    BOTTOM/LEFT CORNER
box-shadow: 10px 10px BLUE, -10px -10px GREEN, 0px 0px 5px 5px RED;

==
TEST:
RED :   RIGHT + BOTTOM
GREEN : TOP + LEFT
YELLOW: TOP/RIGHT CORNER
TAN :   BOTTOM/LEFT CORNER

box-shadow: 10px 10px RED, -10px -10px GREEN, 10px -10px 0px YELLOW, -10px 10px 0px TAN , -10px 10px 0px TOMATO !important;

==
TEST:
RED : RIGHT + BOTTOM
GREEN : TOP + LEFT
YELLOW: TOP/RIGHT CORNER + BOTTOM/LEFT CORNER
box-shadow: 10px 10px RED, -10px -10px GREEN, 10px -10px 0px YELLOW, -10px 10px 0px TAN  !important;

============================
======== PERSO FLICKR ADD TO GROUP
: TOP LEFT + RIGHT BLACK RGB
    box-shadow: -10px -10px 3px 1px rgba(0, 0, 0, 0.3), 10px -10px 3px 1px rgba(0, 0, 0, 0.3) !important;

============================
======== PERSO FLICKR BUDY ICON MENU /*rgba(0, 0, 0, 0.3) */
: BOTOM RIGHT BLACK RGB
#personmenu_down_menu {
box-shadow: 7px 7px 3px 1px rgba(0, 0, 0, 0.9) !important;
    border: 1px solid #333 !important;
    background: #222 !important;
}
============================
======== CSS drop-shadows EXAMPLE USERSTYLES FORUM ICON USER
/* (new37X) - TEST - FORUM - USER BUDY ICON - BACKGROUND - */
.Vanilla a.ProfileLink img.ProfilePhotoMedium {
    display: inline-block !important;
    padding: 2px !important;
/*    border: 2px solid #222222 !important;*/
    border-radius: 8px !important;
    box-shadow: 1px 1px 6px 4px rgba(0,0,0,0.7) inset !important;
    background: white !important;
}

============================
======== CSS drop-shadows without images
== http://nicolasgallagher.com/css-drop-shadows-without-images/
== EXAMPLES : http://nicolasgallagher.com/css-drop-shadows-without-images/demo/
The basic technique :
There is no need for extra markup, the effect can be applied to a single element.
A couple of pseudo-elements are generated from an element and then pushed behind it.

.drop-shadow {
   position:relative;
   width:90%;
}

.drop-shadow:before,
.drop-shadow:after {
   content:"";
   position:absolute;
   z-index:-1;
}

The pseudo-elements need:
- To be positioned
- Given explicit or implicit dimensions.

.drop-shadow:before,
.drop-shadow:after {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
}

The next step is to add a CSS3 box-shadow and apply CSS3 transforms.
Different types of drop-shadow can be produced by varying these values and the types of transforms applied.

.drop-shadow:before,
.drop-shadow:after {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
   -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -webkit-transform:rotate(-3deg);
   -moz-transform:rotate(-3deg);
   -o-transform:rotate(-3deg);
   transform:rotate(-3deg);
}

One of the pseudo-elements then needs to be positioned on the other side of the element
and rotated in the opposite direction.
This is easily done by overriding only the properties that need to differ.

.drop-shadow:after{
   right:10px;
   left:auto;
   -webkit-transform:rotate(3deg);
   -moz-transform:rotate(3deg);
   -o-transform:rotate(3deg);
   transform:rotate(3deg);
 }

The final core code is as shown below. There is just one more addition – max-width –
to prevent the drop-shadow from extending too far below very wide elements.

.drop-shadow {
   position:relative;
   width:90%;
}

.drop-shadow:before,
.drop-shadow:after {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
   max-width:300px;
   -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -webkit-transform:rotate(-3deg);
   -moz-transform:rotate(-3deg);
   -o-transform:rotate(-3deg);
   transform:rotate(-3deg);
}

.drop-shadow:after{
   right:10px;
   left:auto;
   -webkit-transform:rotate(3deg);
   -moz-transform:rotate(3deg);
   -o-transform:rotate(3deg);
   transform:rotate(3deg);
 }

============================
======== BOX-SHADOW == Drop Shadows
== http://sixrevisions.com/css/css3-techniques-you-should-know/
The drop shadow effect accepts multiple values.
- First = color of the shadow =
4 length values:
- first 2 are the x (horizontal) offset and the y (vertical) offset.
- The next value = blur added to the shadow.
- The fourth and final value is the spread amount of the blur.
 Box shadow will also accept an inset keyword that will create an inset shadow.

box-shadow: #333 3px 3px 4px;
-moz-box-shadow: #333 3px 3px 4px;
-webkit-box-shadow: #333 3px 3px 4px;


============================
======== BOX-SHADOW ==  box-shadow
== <a href="http://www.css3.info/preview/box-shadow/">Box-shadow, one of CSS3′s best new features</a>
== Box-shadow, one of CSS3′s best new features

EXAMPLE PERSO (YAHOO MAIL SORT MAIL) :
/* (new12)TEST OK - ITEMS - EACH CHOICE - with INSET BOX  SHADOW - === */
/*#menu-ml-sortby.optionMenu ul.first li {
    box-shadow: inset 0 0 2px 2px #888 ! important;
}*/

/*#menu-ml-sortby.optionMenu ul.first li {
    box-shadow: inset 0px 0px 3px 3px #888;
}*/

/* OK - OFFSET SHADOW FIN BAS DROITE - === */
#menu-ml-sortby.optionMenu ul.first li {
    box-shadow: 2px 2px 2px #333 ! important;
    border-radius: 5px ! important;
}

/* (new12)TEST - ITEMS - EACH CHOICE - with OFFSET BOX  SHADOW - === */
/*#menu-ml-sortby.optionMenu ul.first li {
    box-shadow: 0 0 2px 1px #333! important;
}*/

== OFFSET + RADIUS + BLUR DISTANCE
shadow offset to the bottom and right by 5px
+ border-radius of 5px applied to each corner
+ blur distance of 5px:

#Example_R {
    -moz-border-radius: 5px;
    box-shadow: 5px 5px 5px black;
}

== RGBa OPACITY :
Example O shows the same shadow
+  color black RGBa color
+  opacity of 70%:
#Example_O {
    box-shadow: 5px 5px rgba(0,0,0,0.7);
}

============================
======== BOX-SHADOW == COLOR SHADOW
5 shadows specified in the following order;
- firstly : black shadow with a spread distance of px and a blur distance of px
- secondly : lime shadow offset to the top right
- thirdly : red shadow offset to the bottom right with a blur distance applied
- fourthly : yellow shadow offset to the bottom left, and lastly a blue shadow offset to the top left with a blur distance applied:

#Example_M {
    box-shadow: 0 0 10px 5px black, 40px -30px lime, 40px 30px 50px red, -40px 30px yellow, -40px -30px 50px blue;
}