Your SlideShare is downloading. ×

SwapSkills css3

1,963

Published on

By Satoshi Kikuchi …

By Satoshi Kikuchi
Talk about CSS3 and PE.

All in Japanease sorry !!

Published in: Technology
1 Comment
7 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,963
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
1
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide





























































































  • Transcript

    • 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
    • 7. Takashi Kikuchi
    • 8. 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
    • 26. ,TX SXSW 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
    • 30. Graceful Degradation
    • 31. Progressive Enhancement
    • 32. Sample Takashi Kikuchi
    • 33. YUI 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
    • 92. Adobe Max09 Takashi Kikuchi
    • 93. Takashi Kikuchi
    • 94. Takashi Kikuchi
    • 95. More Read http://old.macedition.com/cb/cb_20030616.php http://www.mezzoblue.com/archives/2003/06/25/mose/ http://developer.yahoo.com/yui/articles/gbs/ Takashi Kikuchi

    ×