Thursday, 25 July 2013

Box shadow css

Examples:
A
B
C
D
E
F

Example A shows a shadow offset to the left and top by 5px:
#Example_A {
-moz-box-shadow: -5px -5px #888;
-webkit-box-shadow: -5px -5px #888;
box-shadow: -5px -5px #888;
}

Example B shows the same shadow with a blur distance of 5px:
#Example_B {
-moz-box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
box-shadow: -5px -5px 5px #888;
}

Example C shows the same shadow with a spread distance of 5px:
#Example_C {
-moz-box-shadow: -5px -5px 0 5px #888;
-webkit-box-shadow: -5px -5px 0 5px#888;
box-shadow: -5px -5px 0 5px #888;
}

Example D shows the same shadow with both a blur distance of 5px and a spread distance of 5px:
#Example_D {
-moz-box-shadow: -5px -5px 5px 5px #888;
-webkit-box-shadow: -5px -5px 5px 5px#888;
box-shadow: -5px -5px 5px 5px #888;
}

Example E shows a shadow with no offset and a blur distance of 5px:
#Example_E {
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
}

Example F shows a shadow with no offset and both a blur distance of 5px and a spread distance of 5px:
#Example_F {
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}


No comments:

Post a Comment