Documente Academic
Documente Profesional
Documente Cultură
What I do
Books
Web
now
soon
Stunning CSS3:
A Project-based Guide to
the Latest in CSS
www.stunningcss3.com
Freelance graphic
designer and web
developer
CSS consultant
Member of Adobe
Task Force for WaSP
What is CSS3?
See modules at
www.w3.org/Style/
CSS/current-work
Progressive enhancement
border-radius
www.blueskyresumes.com, http://blog.gesteves.com,
http://nicolasgallagher.com/demo/pure-css-speech-bubbles/bubbles.html
box-shadow
Text Module
text-shadow
http://crushlovely.com, http://sixrevisions.com/css/how-to-create-inset-typography-with-css3,
http://desandro.com, www.time2project.com
10
Gradients
http://designindevelopment.com/demos/grooveshark, www.yummly.com,
www.broken-links.com/tests/studio_effect
11
Color Module
http://24ways.org, http://css-tricks.com/text-blocks-over-image,
www.marcofolio.net/css/sweet_tabbed_navigation_using_css3.html
12
Fonts Module
@ font-face
13
2D Transforms Module
Transforms
14
Benefits of CSS3
Decrease
Increase
development time
maintenance time
page loading time
usability
accessibility
adaptability across devices
search engine placement
15
16
18
Increased usability
Real text
Optimized styles based on device
capabilities
19
Real-world example
20
Before CSS3
HTTP requests
Loading time seconds
FF 3.6
36
1.5
IE 8
37
1.3
IE 6
47
3
21
inactive
hovered
current page indicator
22
inactive
hovered
current page indicator
After: 1 image
23
FF 3.6
29
1.3
13%
IE 8
30
1.15
11%
IE 6
33
2
33%
24
After CSS3
HTTP requests
Loading time seconds
decrease
FF 3.6
22
1.1
15%
IE 8
23
1
13%
IE 6
24
1.5
25%
25
IE 8
26
IE 6
27
Wrapping tabs
28
29
30
(max-device-width: 480px)
landscape only
(min-width: 321px)
portrait only
(max-width: 320px)
31
Targeting iPad
@media screen and
portrait & landscape (min-device-width: 768px) and
(max-device-width: 1024px)
landscape only
(min-width: 769px)
landscape only
portrait only
33
Learn more
Download slides, get links:
www.zomigi.com/blog/css-summit-2010/
Book:
www.stunningcss3.com
Zoe Mickley Gillenwater
@ zomigi
design@ zomigi.com
www.zomigi.com
34
Questions?