3
Swap SKILLS

CSS
Progressive Enhancemnt
      Web



                Takashi Kikuchi
Salem,Mass




       Takashi Kikuchi
3




    Takashi Kikuchi
3




    Takashi Kikuchi
3




    Takashi Kikuchi
allweb




         Takashi Kikuchi
Takashi Kikuchi
Takashi Kikuchi
4




    Takashi Kikuchi
3
&
 Progressive
Enhancement


Css     Takashi Kikuchi
Css History


      Takashi Kikuchi
1996
 Css1


   Takashi Kikuchi
1997
 Css2


   Takashi Kikuchi
CR
Css2.1


    Takashi Kikuchi
Takashi Kikuchi
Css3


  Takashi Kikuchi
CSS3


       Takashi Kikuchi
Ie6 ?
IE7 ?

   Takashi Kikuchi
Ie6/7




        Takashi Kikuchi
18inch
Webkit
            User
   ZOOM
Mobile TV  Agent
iiXGA  Gecko
            DSi
    Trident
42inch                   ...
2003.1
MOSe

    Takashi Kikuchi
Mozilla
 Opera Safari
enhancement

       Takashi Kikuchi
Dave Shea

 Css Zen Garden




Takashi Kikuchi
Takashi Kikuchi
2003.10
 Progressive
Enhancement

      Takashi Kikuchi
,TX
 SXSW




Takashi Kikuchi
Progressive
Enhancement
     vs
  Graceful
Degradation

       Takashi Kikuchi
Content=”                    ”

                                                                           Presentation=”C...
Progressive
Enhancement
     ≒
 Graceful
Degradation


         Takashi Kikuchi
Graceful
Degradation
Progressive
Enhancement
Sample




Takashi Kikuchi
YUI




Takashi Kikuchi
CSS3


  Takashi Kikuchi
Third Time
  Lucky
     -Andy Clarke-
CSS3
Selectors

     Takashi Kikuchi
Attribute
Selectors

     Takashi Kikuchi
<ul>
<li>
<a class=”pdf” href=quot;xxxx.pdfquot;>XXX(PDF20KB)</a>
</li>
</ul>

<ul>
<li>
<a class=”mail” href=quot;mailto:...
a[href$=quot;.pdfquot;]{
  padding-right: 20px;
  background: transparent
  url(pdf.png) no-repeat 100% 50%;
}

a[href^=qu...
demo


  Takashi Kikuchi
E:Nth-Child()


       Takashi Kikuchi
E:Nth-Child()
‣n

‣ HTML    JavaScript

‣ (odd)         (even)




                         Takashi Kikuchi
<table>
<tr class=”odd”>    </tr>
<tr class=”even”>    </tr>
<tr class=”odd”>    </tr>
<tr class=”even”>    </tr>
</table>...
tr:nth-child(even){
background-color: #;
}

tr:nth-child(odd){
background-color: #;
}

<table>
<tr>       </tr>
<tr>      ...
demo


  Takashi Kikuchi
E:last-Child()


        Takashi Kikuchi
E:last-Child()
‣



‣ HTML   JavaScript




                      Takashi Kikuchi
CSS3
Properties

     Takashi Kikuchi
Box-shadow


     Takashi Kikuchi
Box-shadow
‣

‣ -webkit-box-shadow: 2px 2px 2px #aaa;

‣
demo


  Takashi Kikuchi
Border-Radius


       Takashi Kikuchi
Border-Radius

•       border

•
•   -moz-border-radius-topleft

•   (-webkit-)border-top-left-radius
demo


  Takashi Kikuchi
Web fonts


     Takashi Kikuchi
Web fonts
•@font-face
 • IE eot         IE4

  • Firefox3.1
     • Opera10a   SVG


                    Takashi Kikuchi
html{
 font-family: sans-serif;
 }




  Takashi Kikuchi
@font-face {
font-family: VL-PGothic-Regular;
src: url(VL-PGothic-Regular.ttf)
format(quot;truetypequot;);
}




  Takashi...
demo


  Takashi Kikuchi
::SCROLL
SCROLL
::-webkit-scrollbar {
    width: 13px;
    height: 13px;
}


             Takashi Kikuchi
demo


  Takashi Kikuchi
Math


  Takashi Kikuchi
Math

•
•   ,    2em,   30px
Math

#main{
width: calc(100% - 200px);
}
SVG
SVG
‣
    ‣

‣
    ‣ native

‣
    ‣ CSS

                Takashi Kikuchi
Gradient
Gradient
‣
    ‣ -webkit-box-reflect
‣
    ‣ webkit-mask
    ‣ Mozilla with SVG
‣
    ‣ -webkit-gradient
    ‣ Opera SVG
 ...
‣http://files.myopera.com/chaals/0604/Newmins.svg




                             Takashi Kikuchi
Transform


     Takashi Kikuchi
Transform
• rotate( ) deg, rad
• skew( )
• scale(         )

• translate( )
• matrix(      )



                       Tak...
Transform-
     origin
• tnransform-origin
•        50% 50%




                      Takashi Kikuchi
demo


  Takashi Kikuchi
Transition


     Takashi Kikuchi
Transition
•
•
•
• -webkit-transition:
 background-color, .5s liner;



                    Takashi Kikuchi
demo


  Takashi Kikuchi
Animation
Animation
‣
    ‣ -webkit-box-reflect
‣
    ‣ webkit-mask
    ‣ Mozilla with SVG
‣
    ‣ -webkit-gradient
    ‣ Opera SVG
...
demo


  Takashi Kikuchi
CSS3




  Takashi Kikuchi
CSS3
‣               :
    ‣-webkit-, -moz-, -ms-,-o-,

‣         web       :

                        CSS
    ‣




     ...
CSS3

‣ CSS3
 ‣
 ‣
 ‣
 ‣ invalid



               Takashi Kikuchi
CSS3

‣ CSS3
 ‣
 ‣
 ‣
 ‣



           Takashi Kikuchi
demo


  Takashi Kikuchi
MAX


  Takashi Kikuchi
demo


  Takashi Kikuchi
From now


    Takashi Kikuchi
CSS



  Takashi Kikuchi
-webkit-   -ms-   -moz-




                  Takashi Kikuchi
CSS3



       Takashi Kikuchi
Adobe Max09
Takashi Kikuchi
Takashi Kikuchi
Takashi Kikuchi
More Read

http://old.macedition.com/cb/cb_20030616.php
http://www.mezzoblue.com/archives/2003/06/25/mose/
http://develope...
Upcoming SlideShare
Loading in …5
×

SwapSkills css3

3,217 views

Published on

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
3,217
On SlideShare
0
From Embeds
0
Number of Embeds
232
Actions
Shares
0
Downloads
0
Comments
1
Likes
7
Embeds 0
No embeds

No notes for slide





























































































  • SwapSkills css3

    1. 1. 3 Swap SKILLS CSS Progressive Enhancemnt Web Takashi Kikuchi
    2. 2. Salem,Mass Takashi Kikuchi
    3. 3. 3 Takashi Kikuchi
    4. 4. 3 Takashi Kikuchi
    5. 5. 3 Takashi Kikuchi
    6. 6. allweb Takashi Kikuchi
    7. 7. Takashi Kikuchi
    8. 8. Takashi Kikuchi
    9. 9. 4 Takashi Kikuchi
    10. 10. 3 & Progressive Enhancement Css Takashi Kikuchi
    11. 11. Css History Takashi Kikuchi
    12. 12. 1996 Css1 Takashi Kikuchi
    13. 13. 1997 Css2 Takashi Kikuchi
    14. 14. CR Css2.1 Takashi Kikuchi
    15. 15. Takashi Kikuchi
    16. 16. Css3 Takashi Kikuchi
    17. 17. CSS3 Takashi Kikuchi
    18. 18. Ie6 ? IE7 ? Takashi Kikuchi
    19. 19. Ie6/7 Takashi Kikuchi
    20. 20. 18inch Webkit User ZOOM Mobile TV Agent iiXGA Gecko DSi Trident 42inch iPh Takashi Kikuchi
    21. 21. 2003.1 MOSe Takashi Kikuchi
    22. 22. Mozilla Opera Safari enhancement Takashi Kikuchi
    23. 23. Dave Shea Css Zen Garden Takashi Kikuchi
    24. 24. Takashi Kikuchi
    25. 25. 2003.10 Progressive Enhancement Takashi Kikuchi
    26. 26. ,TX SXSW Takashi Kikuchi
    27. 27. Progressive Enhancement vs Graceful Degradation Takashi Kikuchi
    28. 28. Content=” ” Presentation=”CSS” Client-side scripting=”JavaScript” A List Apart: http://www.alistapart.com/articles/understandingprogressiveenhancement/ Takashi Kikuchi
    29. 29. Progressive Enhancement ≒ Graceful Degradation Takashi Kikuchi
    30. 30. Graceful Degradation
    31. 31. Progressive Enhancement
    32. 32. Sample Takashi Kikuchi
    33. 33. YUI Takashi Kikuchi
    34. 34. CSS3 Takashi Kikuchi
    35. 35. Third Time Lucky -Andy Clarke-
    36. 36. CSS3 Selectors Takashi Kikuchi
    37. 37. Attribute Selectors Takashi Kikuchi
    38. 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. 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. 40. demo Takashi Kikuchi
    41. 41. E:Nth-Child() Takashi Kikuchi
    42. 42. E:Nth-Child() ‣n ‣ HTML JavaScript ‣ (odd) (even) Takashi Kikuchi
    43. 43. <table> <tr class=”odd”> </tr> <tr class=”even”> </tr> <tr class=”odd”> </tr> <tr class=”even”> </tr> </table> Takashi Kikuchi
    44. 44. tr:nth-child(even){ background-color: #; } tr:nth-child(odd){ background-color: #; } <table> <tr> </tr> <tr> </tr> </table> Takashi Kikuchi
    45. 45. demo Takashi Kikuchi
    46. 46. E:last-Child() Takashi Kikuchi
    47. 47. E:last-Child() ‣ ‣ HTML JavaScript Takashi Kikuchi
    48. 48. CSS3 Properties Takashi Kikuchi
    49. 49. Box-shadow Takashi Kikuchi
    50. 50. Box-shadow ‣ ‣ -webkit-box-shadow: 2px 2px 2px #aaa; ‣
    51. 51. demo Takashi Kikuchi
    52. 52. Border-Radius Takashi Kikuchi
    53. 53. Border-Radius • border • • -moz-border-radius-topleft • (-webkit-)border-top-left-radius
    54. 54. demo Takashi Kikuchi
    55. 55. Web fonts Takashi Kikuchi
    56. 56. Web fonts •@font-face • IE eot IE4 • Firefox3.1 • Opera10a SVG Takashi Kikuchi
    57. 57. html{ font-family: sans-serif; } Takashi Kikuchi
    58. 58. @font-face { font-family: VL-PGothic-Regular; src: url(VL-PGothic-Regular.ttf) format(quot;truetypequot;); } Takashi Kikuchi
    59. 59. demo Takashi Kikuchi
    60. 60. ::SCROLL
    61. 61. SCROLL ::-webkit-scrollbar { width: 13px; height: 13px; } Takashi Kikuchi
    62. 62. demo Takashi Kikuchi
    63. 63. Math Takashi Kikuchi
    64. 64. Math • • , 2em, 30px
    65. 65. Math #main{ width: calc(100% - 200px); }
    66. 66. SVG
    67. 67. SVG ‣ ‣ ‣ ‣ native ‣ ‣ CSS Takashi Kikuchi
    68. 68. Gradient
    69. 69. Gradient ‣ ‣ -webkit-box-reflect ‣ ‣ webkit-mask ‣ Mozilla with SVG ‣ ‣ -webkit-gradient ‣ Opera SVG Takashi Kikuchi
    70. 70. ‣http://files.myopera.com/chaals/0604/Newmins.svg Takashi Kikuchi
    71. 71. Transform Takashi Kikuchi
    72. 72. Transform • rotate( ) deg, rad • skew( ) • scale( ) • translate( ) • matrix( ) Takashi Kikuchi
    73. 73. Transform- origin • tnransform-origin • 50% 50% Takashi Kikuchi
    74. 74. demo Takashi Kikuchi
    75. 75. Transition Takashi Kikuchi
    76. 76. Transition • • • • -webkit-transition: background-color, .5s liner; Takashi Kikuchi
    77. 77. demo Takashi Kikuchi
    78. 78. Animation
    79. 79. Animation ‣ ‣ -webkit-box-reflect ‣ ‣ webkit-mask ‣ Mozilla with SVG ‣ ‣ -webkit-gradient ‣ Opera SVG Takashi Kikuchi
    80. 80. demo Takashi Kikuchi
    81. 81. CSS3 Takashi Kikuchi
    82. 82. CSS3 ‣ : ‣-webkit-, -moz-, -ms-,-o-, ‣ web : CSS ‣ Takashi Kikuchi
    83. 83. CSS3 ‣ CSS3 ‣ ‣ ‣ ‣ invalid Takashi Kikuchi
    84. 84. CSS3 ‣ CSS3 ‣ ‣ ‣ ‣ Takashi Kikuchi
    85. 85. demo Takashi Kikuchi
    86. 86. MAX Takashi Kikuchi
    87. 87. demo Takashi Kikuchi
    88. 88. From now Takashi Kikuchi
    89. 89. CSS Takashi Kikuchi
    90. 90. -webkit- -ms- -moz- Takashi Kikuchi
    91. 91. CSS3 Takashi Kikuchi
    92. 92. Adobe Max09 Takashi Kikuchi
    93. 93. Takashi Kikuchi
    94. 94. Takashi Kikuchi
    95. 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

    ×