Scribd
Upload
86 views57 pages

05 Box Shadow 101006074734 Phpapp02

The CSS box-shadow property allows you to add shadows to boxes. You can add outer shadows, which are drawn outside the border, or inner shadows, which are drawn inside the padding. Box-shadow takes horizontal and vertical offsets, blur radius, spread distance, color, and an optional inset keyword. Multiple shadows can be defined by separating values with commas. Shadows are layered front to back. Box-shadow respects border-radius curved corners.

Uploaded by

Walter Angolar Da Silva
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
86 views57 pages

05 Box Shadow 101006074734 Phpapp02

The CSS box-shadow property allows you to add shadows to boxes. You can add outer shadows, which are drawn outside the border, or inner shadows, which are drawn inside the padding. Box-shadow takes horizontal and vertical offsets, blur radius, spread distance, color, and an optional inset keyword. Multiple shadows can be defined by separating values with commas. Shadows are layered front to back. Box-shadow respects border-radius curved corners.

Uploaded by

Walter Angolar Da Silva
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 57

CSS3

BOX-SHADOW

The CSS3 box-shadow property allows you to apply one or more shadows to any box.

You can also define outer and inner box shadows.

An outer box-shadow casts a shadow as if the box were opaque. The shadow is drawn outside the border edge only.

An inner box-shadow casts a shadow as if everything outside the box were opaque. The inner shadow is drawn inside the padding edge only.

Browser support

Browser Firefox 3.6 Firefox 4 Safari 5 Chrome 10 IE 9 Opera 11

Supported syntax -moz-box-shadow box-shadow -webkit-box-shadow box-shadow box-shadow box-shadow

box-shadow syntax

The property allows 4 <length> values, a color value and an optional inset keyword.

.test { box-shadow: 10px 10px 5px 5px #000 inset; }

The <length> values can include relative and absolute values.


p p p p p p p p { { { { { { { { box-shadow: box-shadow: box-shadow: box-shadow: box-shadow: box-shadow: box-shadow: box-shadow: 1em 2ex 3px 4in 5cm 6mm 7pt 8pc 1em 2em 3px 4in 5cm 6mm 7pt 8pc 1em 2em 3px 4in 5cm 6mm 7pt 8pc #000; #000; #000; #000; #000; #000; #000; #000; } } } } } } } }

Horizontal offset

The horizontal offset of the shadow is defined first:

.test { box-shadow: 10px 10px 5px 5px #000 inset; }


Horizontal offset

A positive value will place the shadow on the right of the box.

.test { box-shadow: 10px 10px 5px 5px #000 inset; }

Box

Positive horizontal box-shadow

A negative value will place the shadow on the left of the box.

.test { box-shadow: -10px 10px 5px 5px #000 inset; }

Box

Negative horizontal box-shadow

Vertical offset

The vertical offset of the shadow is defined second:

.test { box-shadow: 10px 10px 5px 5px #000 inset; }


Vertical offset

A positive value will place the shadow below the box.

.test { box-shadow: 10px 10px 5px 5px #000 inset; }

Box

Positive vertical box-shadow

A negative value will place the shadow above the box.

.test { box-shadow: 10px -10px 5px 5px #000 inset; }

Box

Negative vertical box-shadow

Blur radius

The blur radius of the shadow is defined third:

.test { box-shadow: 10px 10px 5px 5px #000 inset; }


Blur radius

If set to a value of 0 the shadow will be hard edged.

.test { box-shadow: 10px 10px 0 5px #000 inset; }

Box

Hard edged box-shadow

The higher the blur radius number, the softer the box-shadow will be.
.test { box-shadow: 10px 10px 10px 5px #000 inset; }

Box

Soft box-shadow

Negative values are not allowed for the bur radius.

.test { box-shadow: -10px -10px 5px -5px #000 inset; }

Spread distance

The spread distance of the shadow is defined fourth:

.test { box-shadow: 10px 10px 5px 5px #000 inset; }


Spread distance

Positive values cause the shadow to expand in all directions (so the shadow appears larger than the box).
.test { box-shadow: 10px 10px 5px 5px #000 inset; }

Box Positive value spread

Negative values cause the shadow to contract in all directions (so the shadow appears smaller than the box).
.test { box-shadow: 10px 10px 5px -5px #000 inset; }

Box Negative value spread

Color

The color can specified using a variety of methods including


keyword six-digit hexadecimal notation three-digit hexadecimal notation RGB/RGBA numeric notation RGB/RGBA percentage notation HSL/HSLA

inset

If the inset keyword is present, browsers will render the box with an inset shadow.

.test {
box-shadow: 10px 10px 5px 5px #000 inset;

Essential and optional values

Box-shadow must include the two offset values. Blur radius, spread, shadow color and inset are optional.
.test { }
essential optional

box-shadow: 10px 10px 5px -5px #000 inset;

If no blur radius is specified, browsers will assume a 0 value and the shadow will be hard edged.

.test { }

Zero value used if none defined

box-shadow: 10px 10px ? -5px #000 inset;

If no spread is specified, browsers will assume a 0 value and the shadow will be the same size as the box.
.test { }
Zero value used if none defined

box-shadow: 10px 10px 5px ? #000 inset;

If no color is specified, a user-agent color should be used. Most browsers use the color of the text.
Safari 5.0 and Chrome 9.0 do not render the box-shadow unless a color is included. Text color value used if none defined

.test { }

box-shadow: 10px 10px 5px 5px ? inset;

If no inset keyword is defined, browsers will assume the shadow is not inset.

.test { }

Non-inset value used if none defined

box-shadow: 10px 10px 5px 5px #000 ?;

Multiple box-shadows

Multiple box shadows can be defined, separated by commas.

.test { Box-shadow 1 box-shadow: 10px 10px 5px #000, 20px 20px 20px yellow; }

Multiple box shadows can be defined, separated by commas.

.test { Comma separator box-shadow: 10px 10px 5px #000, 20px 20px 20px yellow; }

Multiple box shadows can be defined, separated by commas.

.test { box-shadow: 10px 10px 5px #000, 20px 20px 20px yellow; }

Box-shadow 2

The shadow effects are applied front-to-back: the first shadow is on top and the others are layered behind.

Box

Box-shadow 1

Box-shadow 2

box-shadow and border-radius

The box-shadow should follow any curved corners that have been defined with border-radius.

Lets go and do an exercise on box-shadow

Russ Weakley
Max Design
Site: maxdesign.com.au Twitter: twitter.com/russmaxdesign Slideshare: slideshare.net/maxdesign Linkedin: linkedin.com/in/russweakley

You might also like