Using background with style is confusing but with the use of the simple tutorial you are guided on how to create a shadow.
background-image: -webkit-gradient(linear, center top, center bottom, from(white), to(black));
background-image: -webkit-gradient(linear, left top, right bottom, from(white), to(black));
background-image: -webkit-gradient(linear, center top, center bottom, from(#fc0000), to(#770000));
background-image: -webkit-gradient(linear, center top, center bottom, from(black), color-stop(50%, white), to(#black));
Other example:
#wd {
background: vendor-type-gradient( start / position ,shape size , color 1 , color2 [postion] );
background: -moz-linear-gradient ( top left , red , #c10000, #ae0000 );
: -webkit-linear-gradient
: -linear-gradient
Sample 3:
#wd {
background:-moz-linear-gradient( top left, white, transparent 25% ),-moz-linear-gradient( bottom right, white, transparent 25% ),-moz-radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),-moz-radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )black;background:-webkit-linear-gradient( top left, white, transparent 25% ),-webkit-linear-gradient( bottom right, white, transparent 25% ),-webkit-radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),-webkit-radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )black;background:-o-linear-gradient( top left, white, transparent 25% ),-o-linear-gradient( bottom right, white, transparent 25% ),-o-radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),-o-radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )black;background:-khtml-linear-gradient( top left, white, transparent 25% ),-khtml-linear-gradient( bottom right, white, transparent 25% ),-khtml-radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),-khtml-radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )black;background:-ms-linear-gradient( top left, white, transparent 25% ),-ms-linear-gradient( bottom right, white, transparent 25% ),-ms-radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),-ms-radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )black;background:linear-gradient( top left, white, transparent 25% ),linear-gradient( bottom right, white, transparent 25% ),radial-gradient( 25% 50%, circle, white, white 20%, transparent 25% ),radial-gradient( 75% 50%, contain, white, white 20%, transparent 25% )black; }
Add your comments