This document discusses CSS3 and its new features. CSS3 is made up of modules that add functionality on top of CSS2.1. Some key features covered include drop shadows, opacity, RGBA/HSLA colors, border-radius, transitions, transforms, media queries, web fonts, and animations. The presenter encourages using CSS3 now as most browsers support many of its features and provides ways to work around any issues. Modernizr is recommended to help with feature detection.
3. Who the hell am I?
‣ Opera open standards evangelist and tech writer
‣ Telling the world about open standards & Opera
‣ Improving web education
‣ Moaning
‣ Drinking beer & saving the world before morning
‣ Drumming in a heavy metal band
5. What is CSS3?
‣ A series of new modules
‣ Add extra functionality on top of CSS2.1
‣ Lets us do things more quickly and easily
6. Sounds good!
‣ Less time spent in Photoshop
‣ Less time spent with JavaScript
‣ Less time spent maintaining sites
‣ More time spent in the pub
7. Modular = good
‣ Browser vendors can work on one module at a
time
‣ Less worry and pressure about supporting the
entire spec
8. When should I use it?
I’d argue “now”
‣ Most browsers support most of this stuff now
‣ Most of it degrades gracefully
‣ And you can work around problems
‣ Depends on what your client needs
‣ By “identical”, how similar do you mean??
9. Try to argue the case...
...”identical in every browser” is outdated
‣ Especially with mobile phones, iPad, tablets...
‣ And IE6 is a decade old now
‣ Surely providing an acceptable experience in
each browser is, well, acceptable?
‣ Then you can spend more less time on hacking
23. Transitions: easing
Controlling the pattern of acceleration/
deceleration, for a more natural feel
transition‐timing‐function: ease‐in;
transition‐timing‐function: ease‐out;
transition‐timing‐function: ease‐in‐out;
transition‐timing‐function: ease‐out‐in;
transition‐timing‐function: linear;
34. Combining transitions with
transforms
This is where it starts to get really fun!
li a .menubutton {
transition: 0.5s all;
transform‐origin: center;
transform: scale(1);
opacity: 0.5;
}
42. This is what you need!
@font‐face {
font‐family: 'ActionIsRegular';
src: url('actionis‐webfont.eot?') format('eot'),
url('actionis‐webfont.woff') format('woff'),
url('actionis‐webfont.ttf')
format('truetype'),
url('actionis‐webfont.svg#webfontg3JxrxOm')
format('svg');
font‐weight: normal;
font‐style: normal;
}
43. Media queries
Media types on steroids
‣ Apply CSS depending on device/browser
attributes
‣ Very useful for optimizing layouts for different
devices
‣ (http://people.opera.com/danield/css3/vangogh/
index.php)
‣ http://mediaqueri.es
44. Device attributes
‣ Browser width/height
‣ Device width/height
‣ Resolution
‣ Aspect ratio
‣ Monochromacity
‣ etc.
45. A sample media query
@media all and (max‐width: 480px), all and (max‐
device‐width: 480px) {
...
}
