Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Css3

4,354 views

Published on

  • Be the first to like this

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 />

×