CSS3

1. <Bleeding Edge/>
HTML5 & CSS3
WebExpo Tour, Bratislava Budapest Vienna 2010
Tuesday, June 15, 2010

2. <NAME/>
Zi Bin Cheah
twitter:zibin
<WORK/>
Web Evangelist
Tuesday, June 15, 2010

3. <Bleeding Edge/>
CSS3
Tuesday, June 15, 2010

4. Question
raise your hand....
Tuesday, June 15, 2010

5. Question
raise your hand....
if you are a designer
Tuesday, June 15, 2010

6. Question
raise your hand....
if you are a designer
if you are a front end developer
Tuesday, June 15, 2010

7. Question
raise your hand....
if you are a designer
if you are a front end developer
if you are a backend developer
/programmer
Tuesday, June 15, 2010

8. Question
raise your hand....
if you are a designer
if you are a front end developer
if you are a backend developer
/programmer
if you are new to CSS / CSS3
Tuesday, June 15, 2010

9. Question
raise your hand....
if you are a designer
if you are a front end developer
if you are a backend developer
/programmer
if you are new to CSS / CSS3
if you hate raising your hand
Tuesday, June 15, 2010

10. HTML5
Semantics
CSS3
Design
Tuesday, June 15, 2010

11. Once upon a time....
CSS3
CSS1 CSS2 CSS3 CSS2.1
Tuesday, June 15, 2010

12. Today we will look at a few
CSS3
Borders and background allows styling of boxes and
div, and also have multiple background
Transitions and transform an element by rotating, “on-
the-fly” movement and such
Web fonts allows styling of fonts
Text shadow creates shadows
Tuesday, June 15, 2010

13. Today we will look at a few
CSS3
Borders and background allows styling of boxes and
div, and also have multiple background
Transitions and transform an element by rotating, “on-
the-fly” movement and such
Web fonts allows styling of fonts
Text shadow creates shadows
Tuesday, June 15, 2010

14. Borders
Background
Tuesday, June 15, 2010

15. border-radius aka rounded-corners
border-radius: 25px;
Tuesday, June 15, 2010

16. border-radius aka rounded-corners
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
Tuesday, June 15, 2010

17. border-radius aka rounded-corners
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
Tuesday, June 15, 2010

18. border-radius aka rounded-corners
Tuesday, June 15, 2010

19. border-radius aka rounded-corners
Tuesday, June 15, 2010

20. multiple background
Tuesday, June 15, 2010

21. multiple background
background:
url(rose.png) no-repeat 150px -20px,
url(driedrose.png) no-repeat,! ! ! ! ! !
url(fieldsky.jpg) no-repeat;
Tuesday, June 15, 2010

22. box-shadow
box-shadow: 10px 10px 0px #fff;
Tuesday, June 15, 2010

23. box-shadow
box-shadow: 10px 10px 20px #fff;
Tuesday, June 15, 2010

24. box-shadow
width, height: 100px;
box-shadow:10px 10px 20px #ff0000;
border-radius:60px;
Tuesday, June 15, 2010

25. Today we will look at a few
CSS3
Borders and background allows styling of boxes and
div, and also have multiple background
Transitions and transform an element by rotating, “on-
the-fly” movement and such
Web fonts allows styling of fonts
Text shadow creates shadows
Tuesday, June 15, 2010

26. Transitions
Transform
Tuesday, June 15, 2010

27. Transitions
Tuesday, June 15, 2010

28. div {
-o-transition-property: background-color,
width, height;
-o-transition-duration: 4s, 8s, 5s;
-o-transition-delay: 0s, 0s 2s;
}
Tuesday, June 15, 2010

29. Transitions
Tuesday, June 15, 2010

30. Transform
Tuesday, June 15, 2010

31. Transform - translate
-o-transform: translate(50px, 100px);
Tuesday, June 15, 2010

32. Transform - scale
-o-transform: scale(2.5);
Tuesday, June 15, 2010

33. Transform - skew
-o-transform: skew(10deg, 20deg)
Tuesday, June 15, 2010

34. Transform - rotate
-o-transform: rotate(30deg)
Tuesday, June 15, 2010

35. Today we will look at a few
CSS3
Borders and background allows styling of boxes and
div, and also have multiple background
Transitions and transform an element by rotating, “on-
the-fly” movement and such
Web fonts allows styling of fonts
Text shadow creates shadows
Tuesday, June 15, 2010

36. Web Fonts
Tuesday, June 15, 2010

37. @font-face {
src: url(DeutscheZierschrift.ttf) format("truetype");
font-family: "Zierschrift";
font-style: normal;
}
Tuesday, June 15, 2010

38. Tuesday, June 15, 2010

39. SVG web fonts
@font-face {
! font-family: Blackout-Midnight;
! src: url(Blackout-Midnight.ttf) format("truetype");
! }
Tuesday, June 15, 2010

40. Today we will look at a few
CSS3
Borders and background allows styling of boxes and
div, and also have multiple background
Transitions and transform an element by rotating, “on-
the-fly” movement and such
Web fonts allows styling of fonts
Text shadow creates shadows
Tuesday, June 15, 2010

41. text shadow
Tuesday, June 15, 2010

42. text-shadow
text-shadow: #000000 10px 10px 19px;
Tuesday, June 15, 2010

43. text-shadow
text-shadow:
0 0 4px white, 0 -5px 4px #ff3,
2px -10px 6px #fd3, -2px -15px 11px #f80,
2px -25px 18px #f20;
Tuesday, June 15, 2010

44. p le
x a m
E
CSS3 + HTML5
Tuesday, June 15, 2010

45. When ?
Can I use
Tuesday, June 15, 2010

46. Tuesday, June 15, 2010

47. Tuesday, June 15, 2010

48. Tuesday, June 15, 2010

49. Progressive Graceful
Enhancement Degradation
Tuesday, June 15, 2010

50. -o-border-radius
-moz-border-radius
CSS3
-webkit-border-radius
Vendor Prefix
-ms-border-radius
border-radius
Tuesday, June 15, 2010

51. Debugger Dragonfly
JavaScript
CSS
HTTP Header
DOM
Tuesday, June 15, 2010

52. Future
is
Now
Tuesday, June 15, 2010

53. <Thank you:-)/>
Tuesday, June 15, 2010

54. Q&A
zibin AT opera.com shwetankd AT opera.com
twitter: zibin twitter: shwetank
Tuesday, June 15, 2010

55. Creative Commons license image
clap
http://www.flickr.com/photos/tudor/953584594/
spider web
http://www.flickr.com/photos/luc_viatour/2843025968/sizes/l/in/set-72157614714349217/
now
http://www.gottabemobile.com/2010/01/18/ebook-readers-strike-back-at-publishers-trying-to-
maximize-profits
shadow
http://www.flickr.com/photos/jenny-pics/3115479281/sizes/m/
transitions transform
http://www.flickr.com/photos/28481088@N00/1298930743/
borders and background
http://www.flickr.com/photos/cheekyneedle/178950842/sizes/o/
web fonts
http://www.flickr.com/photos/sekimura/4363831481/sizes/o/
clapping photo
http://splashclubpenguin.files.wordpress.com/2009/03/101606sly_claps.jpg
sun flower
http://www.flickr.com/photos/treyevan/429692359/sizes/l/
transition
http://www.flickr.com/photos/28481088@N00/1290363773/sizes/o/
Tuesday, June 15, 2010

56. Demo & artlcle
background and borders articles
http://dev.opera.com/articles/view/css3-border-background-boxshadow/
border-radius flower demo
http://people.opera.com/zibin/css3flower/flower.html
transiitons and transform article
http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/
web fonts article
http://dev.opera.com/articles/view/seven-web-fonts-showcases/
9elements HTML5 demo
http://9elements.com/io/projects/html5/canvas/
David’s photobook demo
http://people.opera.com/dstorey/transforms/image-gallery.html
Presentation reference
introduction to CSS2.1 and CSS3
http://www.slideshare.net/marcamos/introduction-to-css-21-and-css-3
Tuesday, June 15, 2010