SwapSkills css3
•
7 likes•2,180 views
This document discusses the history and evolution of CSS, including early CSS specifications from 1996-1997 and the CSS2.1 recommendation. It covers progressive enhancement versus graceful degradation and provides examples of using CSS3 properties like border-radius, box-shadow, gradients, transforms and transitions. New CSS3 selectors like attribute and nth-child selectors are presented along with examples. The talk concludes with a discussion of browser prefixes for CSS3 and advancing CSS standards going forward.
Recommended
More Related Content
Similar to SwapSkills css3
Similar to SwapSkills css3 (20)
More from Satoshi Kikuchi
More from Satoshi Kikuchi (16)
Recently uploaded
Recently uploaded (20)
SwapSkills css3
- 1. 3 Swap SKILLS CSS Progressive Enhancemnt Web Takashi Kikuchi
- 2. Salem,Mass Takashi Kikuchi
- 3. 3 Takashi Kikuchi
- 4. 3 Takashi Kikuchi
- 5. 3 Takashi Kikuchi
- 6. allweb Takashi Kikuchi
- 9. 4 Takashi Kikuchi
- 10. 3 & Progressive Enhancement Css Takashi Kikuchi
- 11. Css History Takashi Kikuchi
- 12. 1996 Css1 Takashi Kikuchi
- 13. 1997 Css2 Takashi Kikuchi
- 14. CR Css2.1 Takashi Kikuchi
- 15. Takashi Kikuchi
- 16. Css3 Takashi Kikuchi
- 17. CSS3 Takashi Kikuchi
- 18. Ie6 ? IE7 ? Takashi Kikuchi
- 19. Ie6/7 Takashi Kikuchi
- 20. 18inch Webkit User ZOOM Mobile TV Agent iiXGA Gecko DSi Trident 42inch iPh Takashi Kikuchi
- 21. 2003.1 MOSe Takashi Kikuchi
- 22. Mozilla Opera Safari enhancement Takashi Kikuchi
- 23. Dave Shea Css Zen Garden Takashi Kikuchi
- 24. Takashi Kikuchi
- 25. 2003.10 Progressive Enhancement Takashi Kikuchi
- 27. Progressive Enhancement vs Graceful Degradation Takashi Kikuchi
- 28. Content=” ” Presentation=”CSS” Client-side scripting=”JavaScript” A List Apart: http://www.alistapart.com/articles/understandingprogressiveenhancement/ Takashi Kikuchi
- 29. Progressive Enhancement ≒ Graceful Degradation Takashi Kikuchi
- 34. CSS3 Takashi Kikuchi
- 35. Third Time Lucky -Andy Clarke-
- 36. CSS3 Selectors Takashi Kikuchi
- 37. Attribute Selectors Takashi Kikuchi
- 38. <ul> <li> <a class=”pdf” href=quot;xxxx.pdfquot;>XXX(PDF20KB)</a> </li> </ul> <ul> <li> <a class=”mail” href=quot;mailto:quot;>OO@OOO</a> </li> </ul> Takashi Kikuchi
- 39. a[href$=quot;.pdfquot;]{ padding-right: 20px; background: transparent url(pdf.png) no-repeat 100% 50%; } a[href^=quot;mailto:quot;]{ padding-right: 20px; background: transparent url(email.png) no-repeat 100% 50%; } Takashi Kikuchi
- 40. demo Takashi Kikuchi
- 41. E:Nth-Child() Takashi Kikuchi
- 42. E:Nth-Child() ‣n ‣ HTML JavaScript ‣ (odd) (even) Takashi Kikuchi
- 43. <table> <tr class=”odd”> </tr> <tr class=”even”> </tr> <tr class=”odd”> </tr> <tr class=”even”> </tr> </table> Takashi Kikuchi
- 44. tr:nth-child(even){ background-color: #; } tr:nth-child(odd){ background-color: #; } <table> <tr> </tr> <tr> </tr> </table> Takashi Kikuchi
- 45. demo Takashi Kikuchi
- 46. E:last-Child() Takashi Kikuchi
- 47. E:last-Child() ‣ ‣ HTML JavaScript Takashi Kikuchi
- 48. CSS3 Properties Takashi Kikuchi
- 49. Box-shadow Takashi Kikuchi
- 50. Box-shadow ‣ ‣ -webkit-box-shadow: 2px 2px 2px #aaa; ‣
- 51. demo Takashi Kikuchi
- 52. Border-Radius Takashi Kikuchi
- 53. Border-Radius • border • • -moz-border-radius-topleft • (-webkit-)border-top-left-radius
- 54. demo Takashi Kikuchi
- 55. Web fonts Takashi Kikuchi
- 56. Web fonts •@font-face • IE eot IE4 • Firefox3.1 • Opera10a SVG Takashi Kikuchi
- 57. html{ font-family: sans-serif; } Takashi Kikuchi
- 58. @font-face { font-family: VL-PGothic-Regular; src: url(VL-PGothic-Regular.ttf) format(quot;truetypequot;); } Takashi Kikuchi
- 59. demo Takashi Kikuchi
- 60. ::SCROLL
- 61. SCROLL ::-webkit-scrollbar { width: 13px; height: 13px; } Takashi Kikuchi
- 62. demo Takashi Kikuchi
- 63. Math Takashi Kikuchi
- 64. Math • • , 2em, 30px
- 65. Math #main{ width: calc(100% - 200px); }
- 66. SVG
- 67. SVG ‣ ‣ ‣ ‣ native ‣ ‣ CSS Takashi Kikuchi
- 68. Gradient
- 69. Gradient ‣ ‣ -webkit-box-reflect ‣ ‣ webkit-mask ‣ Mozilla with SVG ‣ ‣ -webkit-gradient ‣ Opera SVG Takashi Kikuchi
- 70. ‣http://files.myopera.com/chaals/0604/Newmins.svg Takashi Kikuchi
- 71. Transform Takashi Kikuchi
- 72. Transform • rotate( ) deg, rad • skew( ) • scale( ) • translate( ) • matrix( ) Takashi Kikuchi
- 73. Transform- origin • tnransform-origin • 50% 50% Takashi Kikuchi
- 74. demo Takashi Kikuchi
- 75. Transition Takashi Kikuchi
- 76. Transition • • • • -webkit-transition: background-color, .5s liner; Takashi Kikuchi
- 77. demo Takashi Kikuchi
- 78. Animation
- 79. Animation ‣ ‣ -webkit-box-reflect ‣ ‣ webkit-mask ‣ Mozilla with SVG ‣ ‣ -webkit-gradient ‣ Opera SVG Takashi Kikuchi
- 80. demo Takashi Kikuchi
- 81. CSS3 Takashi Kikuchi
- 82. CSS3 ‣ : ‣-webkit-, -moz-, -ms-,-o-, ‣ web : CSS ‣ Takashi Kikuchi
- 83. CSS3 ‣ CSS3 ‣ ‣ ‣ ‣ invalid Takashi Kikuchi
- 84. CSS3 ‣ CSS3 ‣ ‣ ‣ ‣ Takashi Kikuchi
- 85. demo Takashi Kikuchi
- 86. MAX Takashi Kikuchi
- 87. demo Takashi Kikuchi
- 88. From now Takashi Kikuchi
- 89. CSS Takashi Kikuchi
- 90. -webkit- -ms- -moz- Takashi Kikuchi
- 91. CSS3 Takashi Kikuchi
- 93. Takashi Kikuchi
- 94. Takashi Kikuchi