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