Articles

what is really css3 box-shadow

In CSS3 on June 17, 2012 by patrellery Tagged:


most people still create crappy images for shadows. so to make it simple, and easy let’s just use the shadow properties:

div
{
box-shadow: 10px 10px 5px #888888;
}

so what this really means:

box-shadow: h-pos v-pos (blur) (spread) (color) (inset);

here’s the definitions:

Valeur Description Unité
h-pos horizontal position of the shadow – this is the X axe. (required) em, ex, ch, rem, in, pt, pc, cm, mm, px
(can be negative)
v-pos vertical position of the shadow – this is the Y axe. (required) em, ex, ch, rem, in, pt, pc, cm, mm, px
(can be negative)
blur distance of the blur. (optional – default is 0) em, ex, ch, rem, in, pt, pc, cm, mm, px
spread Size of the shadow. (optional – default is 0) em, ex, ch, rem, in, pt, pc, cm, mm, px (can be negative)
color Color of the shadow. (optional – default : #000 or the color of the property)  
inset internal position of the shadow (optional – default : empty) value of the “inset” or empty.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: