Damsustainability 13054265721522-phpapp02-110514213257-phpapp02
05-box-shadow-101006074734-phpapp02
-
Upload
walter-angolar-da-silva -
Category
Documents
-
view
215 -
download
0
Transcript of 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
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 2/57
The CSS3 box-shadow property
allows you to apply one or moreshadows to any box.
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 3/57
You can also define outer and
inner box shadows.
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 4/57
An outer box-shadow casts a
shadow as if the box wereopaque. The shadow is drawn
outside the border edge only.
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 5/57
An inner box-shadow casts a
shadow as if everything outsidethe box were opaque. The inner
shadow is drawn inside the
padding edge only.
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 6/57
Browser support
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 7/57
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
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 8/57
box-shadow syntax
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 9/57
The property allows 4 <length>
values, a color value and anoptional “inset” keyword.
.test
{
box-shadow: 10px 10px 5px 5px #000 inset;
}
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 10/57
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; }
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 11/57
Horizontal offset
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 12/57
The horizontal offset of the
shadow is defined first:
.test
{
box-shadow: 10px 10px 5px 5px #000 inset;
}
Horizontal offset
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 13/57
A positive value will place the
shadow on the right of the box.
.test
{
box-shadow: 10px 10px 5px 5px #000 inset;
}
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 14/57
Box Positive horizontal box-shadow
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 15/57
A negative value will place the
shadow on the left of the box.
.test
{
box-shadow: -10px 10px 5px 5px #000 inset;
}
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 16/57
Box
Negative horizontal box-shadow
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 17/57
Vertical offset
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 18/57
The vertical offset of the shadow
is defined second:
.test
{
box-shadow: 10px 10px 5px 5px #000 inset;
}
Vertical offset
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 19/57
A positive value will place the
shadow below the box.
.test
{
box-shadow: 10px 10px 5px 5px #000 inset;
}
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 20/57
BoxPositive vertical box-shadow
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 21/57
A negative value will place the
shadow above the box.
.test
{
box-shadow: 10px -10px 5px 5px #000 inset;
}
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 22/57
Box Negative vertical box-shadow
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 23/57
Blur radius
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 24/57
The blur radius of the shadow is
defined third:
.test
{
box-shadow: 10px 10px 5px 5px #000 inset;
}
Blur radius
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 25/57
If set to a value of “0” the shadow
will be hard edged.
.test
{
box-shadow: 10px 10px 0 5px #000 inset;
}
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 26/57
BoxHard edged box-shadow
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 27/57
The higher the blur radius
number, the softer thebox-shadow will be.
.test
{
box-shadow: 10px 10px 10px 5px #000 inset;
}
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 28/57
Box Soft box-shadow
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 29/57
Negative values are not allowed
for the bur radius.
.test
{
box-shadow: -10px -10px 5px -5px #000 inset;
}
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 30/57
Spread distance
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 31/57
The spread distance of the
shadow is defined fourth:
.test
{
box-shadow: 10px 10px 5px 5px #000 inset;
}
Spread distance
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 32/57
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;}
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 33/57
Box
Positive value spread
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 34/57
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;}
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 35/57
Box
Negative value spread
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 36/57
Color
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 37/57
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
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 38/57
inset
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 39/57
If the “inset” keyword is present,
browsers will render the box withan inset shadow.
.test
{box-shadow: 10px 10px 5px 5px #000 inset;
}
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 40/57
Essential and
optional values
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 41/57
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
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 42/57
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 43/57
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
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 44/57
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
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 45/57
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
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 46/57
Multiple
box-shadows
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 47/57
Multiple box shadows can be
defined, separated by commas.
.test
{
box-shadow:
10px 10px 5px #000,20px 20px 20px yellow;
}
Box-shadow 1
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 48/57
Multiple box shadows can be
defined, separated by commas.
.test
{
box-shadow:
10px 10px 5px #000,20px 20px 20px yellow;
}
Comma separator
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 49/57
Multiple box shadows can be
defined, separated by commas.
.test
{
box-shadow:
10px 10px 5px #000,20px 20px 20px yellow;
}
Box-shadow 2
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 50/57
The shadow effects are applied
front-to-back: the first shadow ison top and the others are layered
behind.
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 51/57
Box
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 52/57
Box-shadow 1
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 53/57
Box-shadow 2
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 54/57
box-shadow and
border-radius
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 55/57
The box-shadow should
follow any curved cornersthat have been defined with
border-radius.
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 56/57
Let’s go and do
an exercise onbox-shadow
7/30/2019 05-box-shadow-101006074734-phpapp02
http://slidepdf.com/reader/full/05-box-shadow-101006074734-phpapp02 57/57
Russ WeakleyMax Design
Site: maxdesign.com.auTwitter: twitter.com/russmaxdesign
Slideshare: slideshare.net/maxdesign
Linkedin: linkedin.com/in/russweakley