This talk covers new features of CSS3, such as drop shadows, gradients, animations, transitions, transforms, and web fonts. I discuss what the features allow you to do, why they are worth knowing about and how you can use them today. I delivered this to a class at Oxford Brookes university on the 25th March 2011.

1. CSS3: stay tuned
for style
Chris Mills, Opera Software
Slides available on http://slideshare.net/chrisdavidmills

2. CSS3!
http://www.flickr.com/photos/burningmax/4956554644/

3. In this talk I'll cover
‣ Where CSS3 came from
‣ What it brings to the table
‣ Why it is worth knowing about
‣ When (and how) you can start using it

4. Where did it evolve from?
http://www.flickr.com/photos/dyanna/3202542828/

5. Brief CSS history
‣ CSS1 published in 1996
‣ CSS2 rec published 1998, including things like
absolute, relative, and fixed positioning, z-index,
media types
‣ CSS 2.1 work started soon after, to remove
errors and inconsistencies, but this is still not
completely finished

6. Brief CSS history
‣ CSS3 work also started soon after CSS2, to add
new features
‣ Looking at common design features, and
implementing ways to make them easier
‣ Earliest CSS3 drafts published in June 1999
‣ As of March 2011, there are over 40 CSS3
module drafts published

7. What does CSS3 offer?
http://www.flickr.com/photos/bre/552152780/

8. The modules
Selectors | Color | Backgrounds and borders
Media queries | Multi-column layout | Fonts
2D Transformations | Transitions | Animation
Image values | Basic user interface | Text
Flexible box layout | 3D transformations
Grid positioning | Ruby | Template layout

9. The modules
And loads more!
See http://www.w3.org/Style/CSS/current-
work.en.html for more information

10. Modular = good
‣ Browser vendors can work on one module at a
time
‣ Less worry and pressure about supporting the
entire spec

11. Why is CSS3 so cool?
http://www.flickr.com/photos/mafleen/3780072133/

12. We've done most of
this stuff before...
http://www.flickr.com/photos/monkeytime/4120229885/

13. ...so why...
http://www.flickr.com/photos/shawnblog/566041143/

14. ...should we care?
http://www.flickr.com/photos/philliecasablanca/2816530573/

15. Simple...makes common
tasks easier and simpler
‣ Less time spent in Photoshop
‣ Less time spent with JavaScript
‣ Less presentational markup
‣ Less time spent dicking about with Flash
‣ More time spent in the pub

16. Less Photoshop
Doing this programmatically is so much more
flexible!
Classic examples:
‣ Drop shadows
‣ Gradients
‣ Rounded corners
‣ Transparency

17. Drop shadows
text‐shadow: black 3px 3px 5px;
box‐shadow: black 4px 4px 5px;
text‐shadow: 0 0 4px white,
0 ‐5px 4px #ffff33,
2px ‐10px 6px #ffdd33,
‐2px ‐15px 11px #ff8800,
2px ‐25px 18px #ff2200,

18. Gradients
background‐image: ‐o‐linear‐gradient(top
left,rgb(255,0,0),rgb(150,0,0));

19. Rounded corners
border‐radius: 10px;
border‐radius: 0px 0px 10px 0px;

20. Transparency
opacity: 0.6;
background‐color: rgba(204,204,204,0.6);

21. Less JavaScript
Designers don't like coding
And not relying on JS can mean smaller
downloads, and better compatibility
Obvious behavioural stuff:
‣ Animation
‣ Style/layout switchers
‣ Showing/hiding

22. Animation
‣ CSS keyframe animations allow you to create
animations that run independently
‣ Transitions allow animation that is dependant
on state changes

23. CSS keyframe animation
@‐webkit‐keyframes cloudmove {
0% {
left: ‐20px;
}
50% {
left: 550px;
}
100% {
left: ‐20px;
}
}

24. CSS keyframe animation
#cloud {
‐webkit‐animation‐name: cloudmove;
‐webkit‐animation‐duration: 20s;
‐webkit‐animation‐iteration‐count: infinite;
‐webkit‐animation‐delay: 5s;
}

25. Transitions
Offer animation-like abilities
‣ Set a default state for the element
‣ Choose property to transition, and duration
‣ Then set state to transition to

26. Transition default state
nav a, nav a:link {
...
background‐color: rgba(30,30,255,0.4);
transition‐property: background‐color;
transition‐duration: 1s;

27. Transitioned state
#links a:hover, #links a:active {
background‐color: rgba(30,30,255,1);
}

28. Easing
Controlling the pattern of acceleration/
deceleration, for a more natural feel
animation‐timing‐function: linear;
transition‐timing‐function: linear;
ease‐in, ease‐out, ease‐in‐out, ease‐out‐in;

29. Delay
Add a delay before the transition starts
animation‐delay: 2s;
transition‐delay: 2s;

30. Multiple Animations
Each with their own start time
transition‐property: background‐color, width;
transition‐duration: 1s, 3s;

31. Animation shorthand
Order of properties: property, duration, timing-
function, delay.
transition: all 1s ease‐in 2s;

32. 2D Transforms
Transform element size, position, rotation, skew,
etc.

33. Transform origin
What point does the transform occur around?
transform‐origin: 3em bottom;
transform‐origin: center;
transform‐origin: 20% 50%;

34. Moving elements
Along X and Y elements
transform: translateX(50px);
transform: translateY(100px);
transform: translate(50px, 100px);

35. Resizing elements
By a set scale factor
transform: scale(1.1);

36. Skewing elements
Squishy distortion!
transform: skew(7deg, 3deg);

37. Rotating elements
Around the origin point
transform: rotate(3deg);

38. Combining transforms
Doing multiple things in one declaration
transform: scale(2) rotate(10deg) translateX(30px);

39. Controlling layouts
‣ Media queries allow you to apply CSS
depending on browser/device attributes such
as resolution, screen width and height, and
more
‣ Multi-column layout allows you to easily put
your content into columns

40. 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

41. Device attributes
‣ Browser width/height
‣ Device width/height
‣ Resolution
‣ Aspect ratio
‣ Monochromacity
‣ etc.

42. A sample media query
@media all and (max‐width: 480px), all and (max‐
device‐width: 480px) {
...
}

43. Showing/hiding
‣ :target pseudo-class: apply CSS depending on
whether the element selected is the target of a
fragment identifier
‣ So when links are clicked you could make
panels, etc. appear.

44. :target is cool!
<li><a href="#page1"><p class="menubutton">Page 1</
p></a></li>
<li><a href="#page2"><p class="menubutton">Page 2</
p></a></li>
<div id="page1"></div>
<div id="page2"></div>

45. :target is cool!
div[id*=page] {
position: absolute;
width: 440px; height: 480px;
padding: 20px 30px 20px 30px;
opacity: 0;
transition: 1s all;
}

46. :target is cool!
div[id*=page]:target {
opacity: 1;
z‐index: 5;
}

47. Less presentational markup
‣ CSS3 includes a wide variety of new selectors
to allow you to select what you want more
easily, with less classes/ids
‣ Features like multiple background images and
rounded corners allow you to get rid of some of
those nested divisions!

48. CSS3 selectors
[attr*=str] :nth‐last‐of‐type(n)
[attr^=str] :nth‐last‐child(n)
[attr~=str] :only‐child
:first‐child :only‐of‐type
:last‐child :checked
:first‐of‐type :valid
:last‐of‐type :invalid
:nth‐child(n) :enabled :target
:nth‐of‐type(n) :disabled And more!

49. Multiple backgrounds
header {
background: url(icon.gif) top left no‐repeat,
url(pattern.jpg) repeat,
url(center‐spine.png) top center
repeat‐y;
}

50. Less Reliance on Flash
‣ Web fonts are a classic example here
‣ To use custom fonts we often have to rely on
siFR

51. Web fonts
@font‐face {
font‐family: “My font”;
src: url(http://www.myweb.com/fonts/myfont.ttf);
format(“truetype”);
}

52. Using the font
p {
font‐family: “My font”;
}

53. When can we start using
these tools?

54. Now!
http://www.flickr.com/photos/ilamont/5538511847/

55. Yes, there's browser
support to consider
‣ But most browsers support most of this stuff
now, even IE9!
‣ Most of it degrades gracefully
‣ And you can work around problems
‣ Depends on what your client needs
‣ By “identical”, how similar do you mean??

56. 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

57. Selectivizr

58. CSS3 pie

59. Modernizr

60. Vendor prefixes help...
Like sandboxes for browsers to experiment!
http://www.flickr.com/photos/horiavarlan/4290846294/

61. Vendor prefixes...
‐ms‐transform‐origin: center;
‐moz‐transform‐origin: center;
‐o‐transform‐origin: center;
‐webkit‐transform‐origin: center;
transform‐origin: center;

62. Thanks for listening!
‣ cmills@opera.com
‣ @chrisdavidmills
‣ http://dev.opera.com
‣ http://www.opera.com/wsc