Successfully reported this slideshow.

Css3

4.321 Aufrufe

Veröffentlicht am

  • Gehören Sie zu den Ersten, denen das gefällt!

Css3

  1. 1. CSS3:<br />What you can use today and how it degrades in browsers<br />sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza<br />
  2. 2. What we’ll cover<br />Some nifty CSS3<br />A brief intro into the following CSS3 elements:<br /> CSS3 PIE <br /> @font-face<br />border-radius<br />border-image<br />rgba<br />box-shadow<br />text-shadow<br />linear-gradient<br />columns<br />Slide 2 of 15<br />rethink | redesign | results<br />
  3. 3. CSS3 PIE<br />Mmmm, pie!<br />What can it do? <br />PIE makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features.<br />PIE stands for Progressive Internet Explorer. It is an IE attached behaviour that allows IE to recognise and display some CSS3 properties.<br />You can download CSS3 PIE from:<br />http://css3pie.com/<br />CSS3 PIE will let you use the following CSS3 elements:<br /><ul><li> border-radius
  4. 4. border-image ( needs a padding fix though )
  5. 5. RGBa
  6. 6. box-shadow
  7. 7. linear-gradient</li></ul>Slide 3 of 15<br />rethink | redesign | results<br />
  8. 8. @font-face<br />Wave goodbye to cufon!<br />.comment p {<br />font-family: RabioheadRegular, "Comic Sans MS", Arial, sans-serif;<br />font-size:30px;<br />}<br />Grab a font-face kit from http://www.fontsquirrel.com to try it out. <br />The CSS<br />The Result<br />@font-face {<br />font-family: 'RabioheadRegular';<br />src: url('rabiohead/rabiohead-webfont.eot');<br />src: local('☺'), url('rabiohead/rabiohead-webfont.woff') format('woff'), url('rabiohead/rabiohead-webfont.ttf') format('truetype'), url('rabiohead/rabiohead-webfont.svg#webfont6j7ChCgu') format('svg');<br />font-weight: normal;<br />font-style: normal;<br />}<br />Browsers: IE4+, FF3.5+, Opera 10+, Chrome 4+, Safari 3.1+<br />Slide 4 of 15<br />rethink | redesign | results<br />
  9. 9. border-radius<br />Her curves are kickin’!<br />#circle {<br />background-color:#662d91;<br />color:#fff;<br />width:100px;<br />height:100px;<br />margin:10px;<br />-webkit-border-radius: 100px;<br />-moz-border-radius: 100px;<br />border-radius: 100px;<br />behavior: url(pie/PIE.htc);<br />}<br />The CSS<br />#box {<br />background-color:#662d91;<br />color:#fff;<br />width:100px;<br />height:100px;<br />margin:10px;<br />-webkit-border-radius: 15px;<br />-moz-border-radius: 15px;<br />border-radius: 15px;<br />behavior: url(pie/PIE.htc);<br />}<br />The Result<br />Browsers: IE6+, FF3.5+, Opera 10+, Chrome 4+, Safari 3.1+<br />Slide 5 of 15<br />rethink | redesign | results<br />
  10. 10. border-image<br />Haha I suck with a Wacom tablet!<br />The image<br />The measurements<br />Browsers: IE6+, FF3.5+, Opera 10+, Chrome 4+, Safari 3.1+<br />Slide 6 of 15<br />rethink | redesign | results<br />
  11. 11. border-image<br />The CSS<br />The Result<br />.comment {<br />border-width: 15px 15px 15px 30px;<br />-o-border-image: url("images/bubble.jpg") 46 46 75 61 stretch stretch;<br />-icab-border-image: url("images/bubble.jpg") 46 46 75 61 stretch stretch;<br />-khtml-border-image: url("images/bubble.jpg") 46 46 75 61 stretch stretch;<br />-moz-border-image: url("images/bubble.jpg") 46 46 75 61 stretch stretch;<br />-web-kit-border-image: url("images/bubble.jpg") 46 46 75 61 stretch stretch;<br />border-image: url("images/bubble.jpg") 46 46 75 61 stretch stretch;<br />behavior: url(pie/PIE.htc);<br />}<br />Browsers: IE6+ (needs padding with CSS3PIE), FF3.5+, Opera 10+, Chrome 4+, Safari 3.1+<br />Slide 7 of 15<br />rethink | redesign | results<br />
  12. 12. rgba<br />I see through your lies!<br />The Result<br />The CSS<br />#box {<br />/*background-color:#662d91;*/<br />-pie-background:rgba(102, 51, 153, .25);<br />background-color:rgba(102, 51, 153, .25);<br />color:#fff;<br />width:100px;<br />height:100px;<br />margin:10px;<br />behavior: url(pie/PIE.htc);<br />}<br />The Format<br />rgba (102, 51, 153, .25)<br />(red, green, blue, alpha (0-1, 0 = 0%, 1 = 100%)<br />Browsers: IE6+, FF3.5+, Opera 10+, Chrome 4+, Safari 3.1+<br />Slide 8 of 15<br />rethink | redesign | results<br />
  13. 13. box-shadow<br />My shadow follows me everywhere!<br />The Result<br />The CSS<br />#box {<br />background-color:#662d91;<br />color:#fff;<br />width:100px;<br />height:100px;<br />margin:10px;<br />-moz-box-shadow:5px 5px 10px #999;<br />-webkit-box-shadow:5px 5px 10px #999;<br />box-shadow:5px 5px 10px #999;<br />behavior: url(pie/PIE.htc);<br />}<br />The Format<br />box-shadow:5px 5px 10px #999;<br />(x offset, y offset, blur, colour)<br />Browsers: IE6+, FF3.1+, Opera 10+, Chrome 4+, Safari 3.1+<br />Slide 9 of 15<br />rethink | redesign | results<br />
  14. 14. text-shadow<br />Me and my shadow: what a team!<br />The Result<br />The CSS<br />h1 {<br />color:#662d91;<br />font-family:Arial, Helvetica, sans-serif;<br />letter-spacing:-1px;<br />text-shadow:2px 2px 2px #c79ce8;<br />}<br />The Format<br />text-shadow:2px 2px 2px#999;<br />(x offset, y offset, blur, colour)<br />Browsers: FF3.1+, Opera 10+, Chrome 4+, Safari 3.1+<br />Slide 10 of 15<br />rethink | redesign | results<br />
  15. 15. linear-gradient<br />Can we give it a gradient?<br />The CSS<br />The Result<br />#box {<br />background-color:#662D91;<br />color:#fff;<br />width:100px;<br />height:100px;<br />margin:10px;<br />background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#A94AF0), to(#662D91));<br />background:-moz-linear-gradient(100% 100% 90deg, #A94AF0, #662D91);<br />-pie-background: linear-gradient(90deg, #A94AF0, #662D91);<br />behavior: url(pie/PIE.htc);<br />}<br />The Format<br />background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#A94AF0), to(#662D91));<br />-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)<br />background:-moz-linear-gradient(100% 100% 90deg, #A94AF0, #662D91);<br />-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )<br />Browsers: IE6+, FF3.1+, Chrome 4+, Safari 3.1+<br />Slide 11 of 15<br />rethink | redesign | results<br />
  16. 16. columns<br />Ssssaaayyy what? Automatic grids?!?! ZOMG!<br />The CSS<br />The Result<br />body {<br />margin:30px;<br />-moz-column-count: 4;<br />-webkit-column-count:4;<br />column-count:4;<br />-moz-column-rule : thin solid #662d91;<br />-webkit-column-rule : thin solid #662d91;<br />column-rule : thin solid #662d91;<br />-moz-column-gap : 4em;<br />-webkit-column-gap : 4em;<br />column-gap : 4em;<br />}<br />Browsers: FF3.5+, Chrome 4+, Safari 3.1+<br />Slide 12 of 15<br />rethink | redesign | results<br />
  17. 17. CSS3 Links<br />Clickity, click!<br />CSS3 PIE<br />http://css3pie.com<br />Font Squirrel<br />http://www.fontsquirrel.com/<br />An iPhone drawn purely with CSS3<br />http://demos.jeffbatterton.com/iphone-css3/<br />CSS3 Sandpit – Play with gradients, shadows, text strokes and transforms<br />http://www.westciv.com/tools/gradients/index.html<br />CSS3 Button Generator<br />http://css-tricks.com/examples/ButtonMaker/<br />CSS3 Speech Bubbles<br />http://nicolasgallagher.com/demo/pure-css-speech-bubbles/bubbles.html<br />Slide 13 of 15<br />rethink | redesign | results<br />
  18. 18. Thanks & Questions<br />Blatant plug for a new Meetup group<br />WordPress Brisbane<br />http://www.meetup.com/WordPress-Brisbane<br />There seems to be a lack of WordPress Meetups or groups in Brisbane so let’s get the ball rolling. Please join us and when we get to around 30 members we’ll start organising Meetups!<br />Slide 14 of 15<br />rethink | redesign | results<br />
  19. 19. bronson@sennza.com.au<br />http://www.sennza.com.au/<br />Twitter: @sennza<br />rethink | redesign | results<br />

×