2. What I do
Books Web
new Stunning CSS3: Accessibility
A Project-based Guide to specialist for AT&T
the Latest in CSS Web design/CSS
www.stunningcss3.com consultant
Member of Adobe
Dec '08 Flexible Web Design: Task Force for WaSP
Creating Liquid and Elastic
Layouts with CSS
www.flexiblewebbook.com
2
3. Is it ready yet?
Photo by U.S. Department of Agriculture, www.flickr.com/photos/usdagov/5201431107/ 3
10. A few of the things
you can use...
Photo by Kristin Roach, www.flickr.com/photos/kristinroach/3995676135 10
11. Go forth and style
Safe when used Use a little more
wisely cautiously
border-radius transforms
box-shadow gradients
text-shadow animations
multiple backgrounds HSLA (or RGBA if youyourself)
things hard on
like to make
border-image new selectors
box-sizing
transitions
@font-face
media queries
11
12. Benefits of CSS3 (besides looking cool)
Decrease Increase
development time usability
maintenance time accessibility
page loading time adaptability across devices
search engine placement
12
14. Increased page performance
• Smaller file sizes
• Fewer HTTP requests
Reducing the number of HTTP requests…is
the most important guideline for improving
performance for first time visitors.
Yahoo! Exceptional Performance Team,
http://developer.yahoo.com/performance/rules.html
14
27. Media query for nav bar
@media all and (max-width:52em) { English translation:
#swoosh { display: none; } Up to a maximum
#mainnav { padding: 8px 0; }
width of 52 ems, use
#mainnav ul { margin: 0; }
#mainnav li {
these styles. Once you
margin-left: 12px; get past 52 ems, use
padding: 0; the regular styles.
border: none;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
background: none; }
#mainnav li:hover { background: none; }
}
27
28. Media queries separated
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="narrow.css"
media="only screen and (max-width:52em)">
28
29. IE support
Make it work in IE 5-8 with JavaScript
http://code.google.com/p/css3-mediaqueries-js/
<!--[if lte IE 8]>
<script src="css3-mediaqueries.js"></script>
<![endif]-->
29
30. Media queries for mobile
min-width
max-width
device-width
min-device-width
max-device-width
orientation
-webkit-min-device-pixel-ratio
30
31. Targeting iPhone, Android, etc.
@media screen and
portrait & landscape (min-width: 320px) and
(max-width: 480px)
portrait & landscape (min-device-width: 320px) and
(max-device-width: 480px)
portrait & landscape (max-device-width: 480px)
landscape only (min-width: 321px)
portrait only (max-width: 320px)
31
32. Targeting iPad
@media screen and
portrait & landscape (min-device-width: 768px) and
(max-device-width: 1024px)
landscape only (min-width: 769px)
landscape only (min-device-width: 481px) and
(max-device-width: 1024px)
and (orientation: landscape)
portrait only (min-device-width: 481px) and
(max-device-width: 1024px)
and (orientation: portrait)
32
33. Viewport meta tag
Forces mobile devices to scale viewport to
actual device width
<meta name="viewport"
content="width=device-width,
minimum-scale=1.0,
maximum-scale=1.0">
33
34. Closer look: tabs
• border-radius for rounded corners on
top only
• HSLA semitransparent white gradient for
background
34
35. Closer look: multiple columns
• column-count on paragraph to set
number of columns with variable width
• column-gap to control gutter width
35
36. Closer look: deals badge
• width/height set in
ems
• border-radius set to
half width/height to
make circle
• green dashed border is
actual border; white
solid border is hard-
edged box-shadow
• second fuzzy gray
box-shadow beneath 36
37. Learn more
Download slides, get links:
www.zomigi.com/blog/css3-book-launch-event/
Stunning CSS3 book:
www.stunningcss3.com
Zoe Mickley Gillenwater
@zomigi
design@zomigi.com
www.zomigi.com
37
