box-shadow

Box-shadow is a CSS3 property witch attaches one or more drop-shadows to the box. This property applies to all elements, including ::first-letter selector. Multiple box-shadows are possible, separated by comas. Z-ordering of multiple box-shadows – the first specified shadow is on top.

Syntax:

box-shadow:
    [inset]
    [horizontal-shadow]
    [vertical-shadow]
    [blur-radius]
    [spread-radius]
    [color]; 

Horizontal-shadow (offset-x) – required – the position of the horizontal shadow.

  • (+) – positive value means that shadow will be on the right side of the box;
  • (-) – negative value means that shadow will be on the left side of the box;

Vertical-shadow (offset-y) – required- the position of the vertical shadow.

  • (+) – positive value means that shadow will be below box;
  • (-) – negative value means that shadow will be above box;

Blur-radius – optional – the blur distance.

  • (0) – If value is equal 0 the shadow will be sharp.

The higher value the more blurred shadow will be. The value of blur radius is added to horizontal/vertical offset ( 10px offset + 10px blur = 20px shadow).

Spread radius – optional – the size of shadow.

  • (0) – value equal to zero (default value) means that spread is the same as blur;
  • (+) – positive value increase the size of the shadow;
  • (-) – negative value decrease the size of the shadow;

Color – required – rgba, hsla, text, hex. If omitted, the color of box shadow will be equal to rgb(0, 0 , 0). Caution: Safari 5.1.7 for windows ignores the rule if color is omitted.

inset – optional – changes drop shadow from an outer box-shadow to inner box-shadow.
Default value is none.
box-shadow horizontal and vertical values

Examples:

The shadow on all sides of the box

The offset-x and the offset-y must be set to 0.

See the Pen
qBdVYjo
by majadc (@majadc)
on CodePen.

The shadow at the right-bottom and left-top of the element

See the Pen
box-shadow: offset-x offset-y
by majadc (@majadc)
on CodePen.

The shadow at the one side of the element

See the Pen
box-shadow-one side of the box
by majadc (@majadc)
on CodePen.

box-shadow: inset

See the Pen
box-shadow: inset
by majadc (@majadc)
on CodePen.

Multiple shadows

See the Pen
multiple shadows
by majadc (@majadc)
on CodePen.

Resources

Posted in CSS

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.