Instructions
- [arrow keys] to go next and previous
- [mouse scroll wheel] to go next and previous
- [Ctrl or Command] + [+/-] to zoom in and out
- [touch gestures] for mobile devices
Settings
CSS3 is Here! Are You?
Selling Progressive Enhancements to Clients
HTML5 ~=
HTML5
+
CSS3
+
"Fancy" JS
HTML5 will be the
Web 2.0 of the 2010's
CSS3 Advantages
- Reduces reliance on images for visual design
- Adds new visual design capabilities
- Improves interaction design
- Increases content versatility
- Allows for dynamic style controls
800 lb. Gorilla
HTML5 & CSS3 are NOT
supported by Internet Explorer
prior to Version 9
What is Progressive Enhancement?
Web sites do NOT have to look exactly the same on every browser and every version…
What is Progressive Enhancement?
…but should take full advantage of each browser’s capabilities to deliver the best possible experience.
Who will it affect?
Less than 50% of your surfers…
Progressive Enhancement Means…
- basic content should be accessible to all browsers
- basic functionality should be accessible to all browsers
- enhanced layout is provided by externally linked CSS
- end user browser preferences are respected
CSS3 — Shadows
The Shadow Knows
text-shadow: rgba(64, 64, 64, 0.5) 0px 0px 0px;
box-shadow: rgba(0, 0, 128, 0.25) 0px 0px 0px;
CSS3 — Text stroke
Stroke It!
div {
-webkit-text-fill-color: black;
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 0.00px;
}
CSS3 — Text wrapping
A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.
A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.
A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.
Play with the slider on this and further pages!
div {
text-overflow: ellipsis;
}
CSS3 — Opacity
Invisible Man
color: rgba(255, 0, 0, 1.0); background: rgba(0, 0, 255, 1.0);
CSS3 — Hue/saturation/luminance
Color Me Impressed!
color: hsla( 128 74% 33% 1.00
CSS3 — Rounded corners
border-radius: 0px;
CSS3 — Gradients
background: -webkit-gradient(linear, left top, left bottom,
from(#00abeb), to(white),
color-stop(0.5, white), color-stop(0.5, #66cc00))
CSS3 — Radial Gradients
background: -webkit-gradient(radial, 430 50, 0, 430 50, 200, from(red), to(#000))
CSS3 — Background Sizing
#theeye {
background: url(bg_theeye.jpg) center center no-repeat;
background-size:
;
}
CSS3 — Multiple backgrounds
In the Forefront
div {
background: url(lines_bg.jpg) center center no-repeat,
url(saturn_bg.png) 0 center repeat;
}
CSS 3 — Transitions
#box.left {
margin-left: 0;
}
#box.right {
margin-left: 1000px;
}
#box {
-webkit-transition: margin-left 1s ease-in-out;
}
Forum One - Chrome
Forum One - IE7
Why Progressive Enhancement?
- sites are faster to develop
- code is cheaper to maintain and modify
- can maintain branding more effectively
- designs are more versatile
How to make Progressive Enhancement Work
- Esablish your browser matrix before begining
- For functional QA, define user stories to test successful outcomes
- For visual QA, define a style guide indicating which styles may degrade
CSS3 is Here! Are You?
Questions
A Jason Cranford Teague Production
Made in glorious HTML5 & CSS3!
Credits
- Examples Based on: HTML5Rocks Interactive Presentation
- Slides Created Using: HTML5 Studio Slideshow
- Colophon: Lobster & Rockwell