• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
SwapSkills css3
 

SwapSkills css3

on

  • 3,386 views

By Satoshi Kikuchi

By Satoshi Kikuchi
Talk about CSS3 and PE.

All in Japanease sorry !!

Statistics

Views

Total Views
3,386
Views on SlideShare
3,163
Embed Views
223

Actions

Likes
7
Downloads
0
Comments
1

5 Embeds 223

http://swapskills.info 185
http://ss.dotbranch.com 26
http://www.slideshare.net 10
http://static.slidesharecdn.com 1
http://ethertank.tumblr.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

SwapSkills css3 SwapSkills css3 Presentation Transcript

  • 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 iPh Takashi Kikuchi
  • 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=”CSS” Client-side scripting=”JavaScript” A List Apart: http://www.alistapart.com/articles/understandingprogressiveenhancement/ Takashi Kikuchi
  • 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:quot;>OO@OOO</a> </li> </ul> Takashi Kikuchi
  • 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
  • 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> Takashi Kikuchi
  • tr:nth-child(even){ background-color: #; } tr:nth-child(odd){ background-color: #; } <table> <tr> </tr> <tr> </tr> </table> Takashi Kikuchi
  • 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 Kikuchi
  • 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 Takashi Kikuchi
  • ‣http://files.myopera.com/chaals/0604/Newmins.svg Takashi Kikuchi
  • Transform Takashi Kikuchi
  • Transform • rotate( ) deg, rad • skew( ) • scale( ) • translate( ) • matrix( ) Takashi Kikuchi
  • 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 Takashi Kikuchi
  • demo Takashi Kikuchi
  • CSS3 Takashi Kikuchi
  • CSS3 ‣ : ‣-webkit-, -moz-, -ms-,-o-, ‣ web : CSS ‣ Takashi Kikuchi
  • 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://developer.yahoo.com/yui/articles/gbs/ Takashi Kikuchi