effective efficient design css3
TRANSCRIPT
-
7/26/2019 Effective Efficient Design CSS3
1/35
1
Effective & Efficient
Design with CSS3July 28, 2010
CSS Summit
Zoe Micley !illenw"te#
$ %omigi
-
7/26/2019 Effective Efficient Design CSS3
2/35
2
h"t ' (o
)oos*le+ile e Design-
C#e"ting .i/ui( "n( El"stic
."youts with CSSwwwfle+ileweoocom
Stunning CSS3-
#oect4"se( !ui(e tothe ."test in CSS
wwwstunningcss3com
e*#eel"nce g#"5hic
(esigne# "n( we
(evelo5e#CSS consult"nt
Meme# of (oe
6"s *o#ce fo# "S
now
soon
-
7/26/2019 Effective Efficient Design CSS3
3/35
3
h"t is CSS37
See mo(ules "t
wwww3o#gStyle
CSScu##ent4wo#
-
7/26/2019 Effective Efficient Design CSS3
4/35
9
:se the 5"#ts of CSS3 th"t-
h"ve gene#"lly st"le synt"+
h"ve goo( su55o#t
(on;t h"#m non4su55o#ting #owse#s ythei# l"c
-
7/26/2019 Effective Efficient Design CSS3
5/35
few of the thingsyou c"n use
hoto y ?#istin @o"ch, wwwflic#com5hotos#istin#o"ch3AA=13
'E =
-
7/26/2019 Effective Efficient Design CSS3
28/35
28
#"55ing t"s
."#ge# te+t H n"##ow win(ow Iugly m"%on (oule4#ow t"s f#om 2000
-
7/26/2019 Effective Efficient Design CSS3
29/35
2A
Me(i" /ue#y fo# n"v "#
@media all and (max-width:52em) {
#swoosh { display: none; }
#mainnav { padding: 8px 0; }
#mainnav l { ma!gin: 0; }
#mainnav li {
ma!gin-le"t: 2px;
padding: 0;
$o!de!: none;
-mo%-$o!de!-!adis: 0;
-we$&it-$o!de!-!adis: 0;
$o!de!-!adis: 0;
$a'&g!ond: none; }
#mainnav li:hove! { $a'&g!ond: none; }
}
English translation:
Up to a maximum
width of 52 ems, use
these styles. nce you
get past 52 ems, usethe regular styles.
-
7/26/2019 Effective Efficient Design CSS3
30/35
30
Me(i" /ue#ies fo# moile
min-width
max-width
devi'e-width
min-devi'e-width
max-devi'e-width
o!ientation
-we$&it-min-devi'e-pixel-!atio
-
7/26/2019 Effective Efficient Design CSS3
31/35
31
6"#geting ihone, n(#oi(, etc
(min-width: 20px) and
(max-width: 80px)
(min-devi'e-width: 20px) and(max-devi'e-width: 80px)
(max-devi'e-width: 80px)
(min-width: 2px)
(max-width: 20px)
@media s'!een andportrait ! landscape
portrait ! landscape
portrait ! landscape
landscape only
portrait only
-
7/26/2019 Effective Efficient Design CSS3
32/35
32
6"#geting i"(
(min-devi'e-width: *+8px) and(max-devi'e-width: 02px)
(min-width: *+,px)
(min-devi'e-width: 8px) and(max-devi'e-width: 02px)and (o!ientation: lands'ape)
(min-devi'e-width: 8px) and(max-devi'e-width: 02px)and (o!ientation: po!t!ait)
@media s'!een andportrait ! landscape
landscape only
landscape only
portrait only
-
7/26/2019 Effective Efficient Design CSS3
33/35
33
iew5o#t met" t"g
*o#ces moile (evices to sc"le view5o#t to"ctu"l (evice wi(th
meta name./viewpo!t/'ontent./width.devi'e-width
minimm-s'ale.10maximm-s'ale.10/
-
7/26/2019 Effective Efficient Design CSS3
34/35
39
.e"#n mo#e
Downlo"( sli(es, get lins-
www%omigicomlogcss4summit42010
)oo-wwwstunningcss3com
Zoe Micley !illenw"te#
$ %omigi
(esign$ %omigicom
www%omigicom
-
7/26/2019 Effective Efficient Design CSS3
35/35
3