05-box-shadow-101006074734-phpapp02

7/30/2019 05-box-shadow-101006074734-phpapp02

http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 1/57

CSS3BOX-SHADOW



The CSS3 box-shadow property

allows you to apply one or moreshadows to any box.



You can also define outer and

inner box shadows.



An outer box-shadow casts a

shadow as if the box wereopaque. The shadow is drawn

outside the border edge only.



An inner box-shadow casts a

shadow as if everything outsidethe 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 anoptional “inset” keyword.

.test

{

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

}



The <length> values can include

relative and absolute values.

p { box-shadow: 1em 1em 1em #000; }p { box-shadow: 2ex 2em 2em #000; }

p { box-shadow: 3px 3px 3px #000; }

p { box-shadow: 4in 4in 4in #000; }

p { box-shadow: 5cm 5cm 5cm #000; }p { box-shadow: 6mm 6mm 6mm #000; }

p { box-shadow: 7pt 7pt 7pt #000; }

p { box-shadow: 8pc 8pc 8pc #000; }



Horizontal offset



The horizontal offset of the

shadow is defined first:

.test

{


}

Horizontal offset



A positive value will place the

shadow on the right of the box.

.test

{


}



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

{


}

Vertical offset



A positive value will place the

shadow below the box.

.test

{


}



BoxPositive 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

{


}

Blur radius



If set to a value of “0” the shadow

will be hard edged.

.test

{

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

}



BoxHard edged box-shadow



The higher the blur radius

number, the softer thebox-shadow will be.

.test

{


}



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

{


}

Spread distance



Positive values cause the shadow

to expand in all directions (sothe 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 (sothe 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 withan 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

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

}

essential optional



If no spread is specified, browsers

will assume a ‘0’ value and theshadow will be the same size as the

box.

.test

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

}

Zero value used if none defined



If no color is specified, a user-agent

color should be used. Mostbrowsers use the color of the text.

Safari 5.0 and Chrome 9.0 do not render the box-shadow

unless a color is included.

.test

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

}

Text color value used if none defined



If no “inset” keyword is defined,

browsers will assume the shadowis “not inset”.

.test

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

}

Non-inset value used if none defined



Multiple

box-shadows



Multiple box shadows can be

defined, separated by commas.

.test

{

box-shadow:

10px 10px 5px #000,20px 20px 20px yellow;

}

Box-shadow 1





.test

{

box-shadow:


}

Comma separator





.test

{

box-shadow:


}

Box-shadow 2



The shadow effects are applied

front-to-back: the first shadow ison 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 cornersthat have been defined with

border-radius.



Let’s go and do

an exercise onbox-shadow



Russ WeakleyMax Design

Site: maxdesign.com.auTwitter: twitter.com/russmaxdesign

Slideshare: slideshare.net/maxdesign

Linkedin: linkedin.com/in/russweakley

05-box-shadow-101006074734-phpapp02

Documents