Stephanie (Sullivan) Rewis, Consultant

Greg Rewis, Adobe

Tuesday, November 8, 2011
Design Challenges,
CSS Answers
CSS3
ueslgn Challenges, CSS Answers
Stephanie [Sullivan] Rewis
stef@w3conversions.com
@stefsull
w3conversions.com
Greg Rewi s
rewi s@adobe. com
@garazi
assort edgarbage. com
lf we use Lhese Lechnlques rlghL [P1ML and CSS3],
we can geL rld of half of Lhe lmages on Lhe web,
because Lhey're used for sLyllng.
- Pkon Wlum Lle
Benefits of CSS3
8educed developmenL and malnLenance ume
lncreased usablllLy & accesslblllLy
8euer search englne placemenL due Lo real LexL and
fasLer pages
Cpumlzed sLyles based on devlce capablllues
lncreased page performance
8educlng Lhe number of P11 requesLs...ls Lhe mosL
lmporLanL guldellne for lmprovlng performance for rsL
ume vlslLors.
!"#$$% '()*+,$-". /*01$02"-)* 3*"2,
hup://developer.yahoo.com/performance/rules.hLml
CSS is Modular
lL wlll never be 4$-*
Modules are ln varled
sLaLes of compleuon
CSS3 Prefixes
?ou can use lL Loday-
buL know your prexes
-moz- Mozllla
(Cecko browsers)
-webklL- Safarl
(plus WebklL browsers)
-o- Cpera Soware
-ms- Mlcroso
-khLml- konqueror
browser (plus Safarl 1)
When Can I Use...
CompaublllLy Lables for feaLures ln P1ML3, CSS3,
SvC and oLher upcomlng web Lechnologles
Progressive Enhancement
Progressive Enhancement
rogresslve enhancemenL...alms Lo dellver Lhe
besL posslble experlence Lo Lhe wldesL posslble
audlence - wheLher your users are vlewlng your
slLes on an lhone, a hlgh- end deskLop sysLem, a
klndle, or hearlng Lhem on a screen-reader, Lhelr
experlence should be as fully feaLured and
funcuonal as posslble."
5*678-7-8 97:# /0$80*667;* '-#"-)*2*-:,
www.lamenLgroup.com/dwpe
Browser stats - World-wide
Browser stats - North America
Browser stats - South America
Mobile stats - World-wide
Mobile stats - Asia
Mobile stats - North America
Keys to Progressive Enhancement
know your audlence!
!"#$%#$ '( )%* and should be avallable aL all
umes regardless of Lhe browslng meLhod
All browslng experlences do noL need Lo be
ldenucal
uon'L use CSS3 for Lhlngs LhaL are crlucal Lo Lhe
experlence
8ulld llke lL's 1999-back ln Lhe days of
slmpllclLy-$+%# enhance
Simple, Attractive Buttons
Enhanced with Rounded Corners
Enhanced with glowing animations
Its Not Always That
Simple
,- .
Regressive
Enhancement
Modernizr My Hero!
hup://www.modernlzr.com
leaLure-deLecuon llbrary for P1ML3 and CSS3
Modernlzr creaLes Lhe P1ML3 elemenLs ln Lhe uCM
Modernizr - Feature Detection
Llnk Lo Lhe scrlpL & add <hLml class="no-[s">
Modernlzr changes Lhe no-[s class Lo a long sLrlng
of classes LhaL you can use Lo serve dlerenL CSS
or !S Lo a browser dependlng on lLs lack of
capablllues. le:
<hLml class=" [s canvas canvasLexL geolocauon
crosswlndowmessaglng #"/0%1(2345$515(% #"/'#4%6%441
hashchange #"/+'($"7*85#59%8%#$ draganddrop #"/0%1(":)%$(
rgba hsla muluplebgs backgroundslze borderlmage borderradlus
boxshadow opaclLy no-cssanlmauons csscolumns cssgradlenLs #"/
:((7%;%:<"#( cssLransforms #"/:(($75#(="78(>4 #"/:(($75#('<"#(
vldeo audlo localsLorage sesslonsLorage webworkers
appllcauoncache svg #"/(8'3(?9:3'@@5$+( fonuace">
CSS based on abilities
WrlLe CSS for browsers mlsslng supporL:
.no-cssgradlenLs .elemenL [
background-color: #value, /*or*/
background-lmage: url(lmg/gradlenL.[pg),
}
Cr wrlLe CSS so lL's only shown Lo capable
browsers:
. cssgradlenLs .elemenL [
background-lmage: -webklL, -moz, -ms, -o, eLc,
}
Backgrounds
1"74%7
Three Boxes (Box Model)
background-origin
8ackground-orlgln specles Lhe ($57<#9 @"'#$ for Lhe background
lmage
1"74%7/1"6 - posluons Lhe
background lmage relauve
Lo Lhe ouLer edge of Lhe border
@544'#9/1"6 (defaulL) - posluons
Lhe background lmage relauve
Lo Lhe ouLer edge of Lhe paddlng
(lnner edge of Lhe border)
:"#$%#$/1"6 - posluons Lhe
background lmage relauve Lo
Lhe ouLer edge of Lhe conLenL
(lnner edge of Lhe paddlng)
background-clip
1"74%7/1"6 (defaulL) - cllps
backgrounds relauve Lo Lhe ouLer
edge of Lhe border
@544'#9/1"6 - cllps backgrounds
relauve Lo Lhe ouLer edge of Lhe
paddlng (lnner edge of Lhe border)
:"#$%#$/1"6 - cllps backgrounds
relauve Lo Lhe ouLer edge of Lhe
conLenL (lnner edge of Lhe
paddlng)
8ackground-cllp +'4%( a poruon of your background
background-clip in the wild
background-size
8ackground-slze leLs you speclfy Lhe ('A% of a background lmage -
elLher as a xed value, or relauve Lo Lhe <")=80$>-4 +$67,$-7-8
"0*"
plxels - dene one or boLh values
percenLs - dene one or boLh values
cover - covers Lhe enure space uslng Lhe 3%((%7 wldLh or helghL.
Warnlng: Cllpplng may occur.
conLaln - shows Lhe enure lmage based on Lhe 97%5$%7 helghL
or wldLh of Lhe lmage. 1hls means Lhe lmage may noL
compleLely ll Lhe background posluonlng area.
.freshest { /* contains awning background */
width: 33.375em;
background-size: 100% auto; /* this allows the background image to
scale on the x-axis WITH larger text sizes */
font-size: 1em;
}
.homeLogo { /* logo base of the vege stand */
width: 33.75em;
height: 18.75em;
font-size: 1em; /* this causes image in the page to scale up as well */
-ms-interpolation-mode: bicubic; /* this helps IE to play nice when
scaling */
}
.navMain li { /* vege baskets */
height: 11.25em;
background-size: 100% 100%; /* this allows navigation images to scale
both directions WITH larger text */
}
More Images - More Better
SynLax (comma separaLed):
background-lmage: url(lmage01.[pg"), url(lmage02.[pg"),
SubsequenL background properues use a comma-
dellmlLed llsL of values correspondlng Lo Lhe
lndlvldual background lmage order:
background-lmage: url(lmage01.[pg"), url(lmage02.[pg"),
background-posluon: le Lop, rlghL bouom,
background-repeaL: repeaL-x, no-repeaL,
background-slze: 230px, cover,
Shorthand Aint So Short
8ackground shorLhand (+"B34 1% 5?"'4%4 because lL
reseLs everyLhlng!
background-color: LransparenL,
background-lmage: none,
background-posluon: 0 0,
background-slze: auLo,
background-repeaL: repeaL,
background-cllp: border-box,
background-orlgln: paddlng-box,
background-auachmenL: scroll,
CSS Gradients
[usL anoLher background-lmage
Gradients - image not color
Llnear or 8adlal
Clder WebklL has very dlerenL synLax
All prexed synLax ls now Lhe same (Lhough nal non-prexed
synLax ls currenLly ln dlscusslon)
Applled wlLh Lhe background-lmage properLy
CD
helps!
Gradient-scanner.com
Alpha Gradients
CradlenLs are applled Lo an elemenL as a
background-lmage
CreaLe an rgba or hsla black or whlLe gradlenLs
vary Lhe opaclLy lnsLead of Lhe color for a more
so, exlble eecL LhaL can be applled over any
color on Lhe page
Gradients tips & effects
SLops can be added Lo change colors ln Lhe gradlenL and creaLe a
varleLy of blended eecLs
Pard sLops can also be used Lo creaLe almosL any Lype of deslgn.
Horizontal effect
Vertical, Faux column effect
Combined Backgrounds
Background Combined
background-color: rgb(96,147,201),
background-lmage: url(../lmages/
sanLorlnl.[pg), -webklL-llnear-gradlenL(Lop,
rgba(233,233,233,.7) 0,rgba
(233,233,233,0) 100),
background-lmage: url(../lmages/
sanLorlnl.[pg), -moz-llnear-gradlenL(Lop,
rgba(233,233,233,.7) 0,rgba
(233,233,233,0) 100),
background-repeaL: no-repeaL, repeaL-x,
background-posluon: cenLer bouom, le
Lop,
-webklL-background-slze: conLaln, 230px,
-moz-background-slze: conLaln, 230px,
background-slze: conLaln, 230px,
8ackground-lmage CradlenL
8ackground-color
8ackground-lmage
Transitions
E CD CD
CSS Transitions
CSS 1ransluons allows properLy changes ln CSS
values Lo occur smooLhly over a specled
durauon.
1ransluons can be LhoughL of as anlmauons ln
Lhelr slmplesL form.
Cnly anlmaLable CSS properues can be
Lransluoned.
Animatable Properties
background-color
background-lmage
(gradlenLs)
background-
posluon
background-slze
border (-color,-
wldLh)
border-radlus
border-spaclng
box-ex
box-shadow
color
column (-counL, -
gap, -wldLh)
cllp
ll
fonL-slze
fonL-welghL
helghL
leuer-spaclng
llne-helghL
margln (-Lop, -rlghL,
-bouom, -le)
max- / mln-helghL
max- / mln-wldLh
opaclLy
ouLllne (color,
wldLh)
ouLllne-oseL
paddlng (-Lop, -
rlghL, -bouom, -le)
posluon (Lop, rlghL,
bouom, le)
sLroke (-opaclLy, -
wldLh)
LexL-lndenL
LexL-shadow
Lransform
Lransform-orlgln
verucal-allgn
vlslblllLy
wldLh
word-spaclng
z-lndex
Anatomy of a Transition
keyframe
(rule 1)
keyframe
(rule 2)
Lween
Transition Properties
nav ll a [
background-color: rgb(0,0,0),
paddlng: 9px 3px,
Lransluon-properLy: background-color, paddlng, Lransform,
Lransluon-durauon: 1s,
Lransluon-delay: 100ms,
Lransluon-umlng-funcuon: ease,
}
nav ll a:hover [
background-color: rgb(86, 123,33),
paddlng: 12px 3px,
Lransform: roLaLe(-3deg),
}
Ceasar - Easing tool
CSS3 Selectors
Pseudo-classes
and Pseudo-elements
pseudo-class vs pseudo-element
@(%B4"/:35((G
selecL hLml elemenLs LhaL could have classes applled
sLrucLural and based on elemenL relauonshlps
@(%B4"/%3%8%#$G
selecL Lhlngs LhaL are noL hLml elemenLs aL all (and are noL ln
Lhe uCM)
::rsL-llne
::rsL-leuer
::before
::aer
.F
:target pseudo-class
G$579%$
dL:LargeL [
fonL-welghL: bold,
color: red,
}
<ul>...
<ll><a href="H2CI">Cuesuon 12</a></ll>
...</ul>
JKL-hup://www.yourslLe.com/faq.hLmlH2CI
<dL ld="2CI">Cuesuon 12</dL>
<dd>Answer Lo quesuon 12</dd>
.F
:selection pseudo-class
::selecuon
::selecuon [
background: #900,
}
LargeLs user-selecLed elemenLs ln Lhe browser
lmg::selecuon [
background-color: LransparenL,
}
(ulled from CSS3 selecLors, buL malnLalns cerLaln supporL. Llkely
Lo be added back lnLo CSS4 selecLors module.)
Conslder lL an enhancemenL, lf lL's avallable.
.F
:focus pseudo-class
LexLarea [
helghL: 20px,
-webklL-Lransluon: helghL .3s, border .3s,
-moz-Lransluon: helghL .3s, border .3s,
-o-Lransluon: helghL .3s, border .3s,
Lransluon: helghL .3s, border .3s,
}
$%6$57%5G=":B( [
ouLllne: 0,
helghL: 230px,
border: rgba(72, 107, 11, .7) 9px solld,
-webklL-border-radlus: 6px,
-moz-border-radlus: 6px,
border-radlus: 6px,
}
Pseudo-elements
Pseudo-element selectors
M3(" :533%4 9%#%75$%4 :"#$%#$
place conLenL lnLo your CSS and have lL appear ln P1ML
uslng Lhe )$-:*-: properLy
should !"# be used for essenual conLenL
speclfy where lL should appear, :before or :aer Lhe
conLenL of Lhe elemenL
NF
Pseudo-element selectors
9%#%75$%4 :"#$%#$
.capuon:before [
:"#$%#$G OP'9B7%G OQ
fonL-welghL: bold,
}
<lmg src="lmg/baLhs.[pg>
<p class="capuon">1he 8aLhs aL vlrgln Corda</p>
We can create whole elements
dlv [
wldLh: 700px,
helghL: 400px,
@"('<"#G 7%35<?%Q
}
4'?G1%="7%R 4'?G5S%7 [ /* Lhe common properues for boLh selecLors */
:"#$%#$GTTQ
@"('<"#G 51("3B$%Q
}
4'?G1%="7% [
Lop: 23px,
le: 23px,
rlghL: 23px,
bouom: 23px,
}
4'?G5S%7 [
Lop: 30px,
le: 30px,
rlghL: 30px,
bouom: 30px,
}
Every element gets two!
Negative edge absolute positioning
Pseudo-elements with buttons
Muluple layerlng ls one meLhod Lo apply muluple borders on
buuons
Create multiple wrappers
Overlay gradients, borders & rgba
Add decorative images
.prof .hd:before [
conLenL: "",
posluon: absoluLe,
le: -13px,
Lop: 11px,
wldLh: 16px,
helghL: 24px,
background: url(../lmg/polnL.png) no-repeaL 0 0,
}
Creating Shapes
The lowly square
?ou can do Lhls, rlghL?
elemenL [
helghL: 130px,
wldLh: 130px,
}
border-radius
1"74%7/754'B(G 754'B( ?53B%Q
!"8@3%$% :'7:3%G
.remlnder [
helghL: 9em,
wldLh: 9em,
paddlng: 2em,
-webklL-border-radlus: 6.3em,
-moz-border-radlus: 6.3em
border-radlus: 6.3em,
}
WldLh and helghL are equal
8adlus equals half of wldLh/helghL plus full paddlng
use em unlLs lf clrcle conLalns LexL
Can use percenLages lf older browser supporL ls noL requlred:
border-radlus: 30,
border-radius
U33'@<:53 :"7#%7(G
border-radlus: x-axls/y-axls,
llrsL value exLends Lhe x-axls
Second value exLends Lhe y-axls
-webklL-border-radlus: 100px/40px,
-moz-border-radlus: 100px/40px,
border-radlus: 100px/40px,
transform
V)%0%4 (+5@%(G
-webklL-Lransform: skew(-43deg),
-moz-Lransform: skew(-43deg),
-ms-Lransform: skew(-43deg),
-o-Lransform: skew(-43deg),
Lransform: skew(-43deg),
Border Tip
8orders meeL wlLh dlagonal
lnLersecuons
helghL: 0,
wldLh: 0,
border-wldLh deLermlnes
slze of Lhe Lrlangle
use Lransparency on
oLher sldes
vary Lhe border wldLhs Lo
change Lhe Lrlangle shape
Shapes as
Pseudo-elements
Add triangles
dlv:before [
conLenL: "",
posluon: absoluLe,
helghL: 0,
wldLh: 0,
le: -30px,
Lop: 30px,
border-rlghL: 30px solld skyblue,
border-Lop: 13px solld LransparenL,
border-bouom: 13px solld LransparenL,,
}
Triangles for ribbons
seudo-elemenL Lrlangles added as Lhe Lop and
bouom of a rlbbon
Speech bubbles
8ound pseudo-elemenLs
AbsoluLely posluoned below
Lhelr parenL elemenL.
Cr overlapped so LhaL Lhe
Lop pseudo-elemenL
obscures a poruon of Lhe lower
Pulling the shapes together
Box-shadow
box-shadow as borders
V*#$56G
?53B%( / 6 "W(%$R * "W(%$R 13B7R (@7%54R :"3"7
box-shadow:
0 0 0 3px #6CC,
0 0 0 10px #69C,
0 0 0 13px #66C,
0 0 0 20px #63C,
0 0 0 23px #60C,
X'@(G
8orders are placed
on elemenLs from Lhe
lnslde Lo Lhe ouLslde.
box-shadow on one side only
egauve spread value can be used Lo make Lhe box-shadow
show on only one slde of Lhe elemenL.
box-shadow on pseudo-elements
lace box-shadows on pseudo-elemenLs Lo creaLe a
varleLy of eecLs.
.shadow:before [
conLenL: ",
posluon: absoluLe,
z-lndex:-1,
le:10px,
wldLh:30,
helghL:20,
box-shadow:0 13px 10px rgba(0, 0, 0, 0.7),
Lransform:roLaLe(-3deg),
}
(.shadow:aer ls Lhe same, buL reversed)
box-shadow on pseudo-elements
lcolas Callagher's
drop-shadows
CSS Regions
& Exclusions
CSS Regions
CSS 8eglons brlng new properues Lo CSS LhaL
provlde:
LexL conLalners wlLh cusLom shapes.
excluslon shapes whlch LexL wlll wrap around.
LexL LhaL ows from one area lnLo anoLher.
CSS Regions / CSS Exclusions
!"#$%#$ $+7%54: a seL of elemenLs exLracLed from
Lhe normal conLenL ow lnLo a named ow.
K%9'"#: an elemenL LhaL consumes conLenL from
a conLenL Lhread.
!"#$%#$ (+5@%: Lhe lnLerlor of Lhe shape dened
by a wrap-shape, cllpped by Lhe conLenL-box.
U6:3B('"#: Lhe exLerlor of Lhe shape dened by a
wrap-shape, noL cllpped by Lhe conLenL-box.
Single Thread
Content Shape
Dynamic Exclusion
Dynamic resizing
Every session should end with a unicorn...
Thank you!
Resources
w3converslons.com/resources.hLml - P1ML3 & CSS3 resources
lleeung plphanles - SLephanle's blog
AssorLed Carbage - Creg's blog
8ox shadow on one slde blog posL
CSS background-slze properLy aL .neLmagazlne
CreaLe exlble lmagery for Lhe web - CompuLer ArLs
Lwluer: sLefsull
Lwluer: garazl
sLefw3converslons.com
rewlsadobe.com