This document introduces several CSS3 features including CSS3 PIE, @font-face, border-radius, border-image, rgba, box-shadow, text-shadow, linear-gradient, and columns. For each feature, it provides a brief description, examples of CSS code to implement the feature, and the browsers that support it. It also includes links to additional CSS3 resources.

1. CSS3: What you can use today and how it degrades in browsers sennza | (07) 3040-1545 | bronson@sennza.com.au | http://www.sennza.com.au/ | Twitter: @sennza

2. What we’ll cover Some nifty CSS3 A brief intro into the following CSS3 elements: CSS3 PIE @font-face border-radius border-image rgba box-shadow text-shadow linear-gradient columns Slide 2 of 15 rethink | redesign | results

4. border-image ( needs a padding fix though )

5. RGBa

6. box-shadow

7. linear-gradientSlide 3 of 15 rethink | redesign | results

8. @font-face Wave goodbye to cufon! .comment p { font-family: RabioheadRegular, "Comic Sans MS", Arial, sans-serif; font-size:30px; } Grab a font-face kit from http://www.fontsquirrel.com to try it out. The CSS The Result @font-face { font-family: 'RabioheadRegular'; src: url('rabiohead/rabiohead-webfont.eot'); src: local('☺'), url('rabiohead/rabiohead-webfont.woff') format('woff'), url('rabiohead/rabiohead-webfont.ttf') format('truetype'), url('rabiohead/rabiohead-webfont.svg#webfont6j7ChCgu') format('svg'); font-weight: normal; font-style: normal; } Browsers: IE4+, FF3.5+, Opera 10+, Chrome 4+, Safari 3.1+ Slide 4 of 15 rethink | redesign | results

9. border-radius Her curves are kickin’! #circle { background-color:#662d91; color:#fff; width:100px; height:100px; margin:10px; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; behavior: url(pie/PIE.htc); } The CSS #box { background-color:#662d91; color:#fff; width:100px; height:100px; margin:10px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; behavior: url(pie/PIE.htc); } The Result Browsers: IE6+, FF3.5+, Opera 10+, Chrome 4+, Safari 3.1+ Slide 5 of 15 rethink | redesign | results

10. border-image Haha I suck with a Wacom tablet! The image The measurements Browsers: IE6+, FF3.5+, Opera 10+, Chrome 4+, Safari 3.1+ Slide 6 of 15 rethink | redesign | results

11. border-image The CSS The Result .comment { border-width: 15px 15px 15px 30px; -o-border-image: url("images/bubble.jpg") 46 46 75 61 stretch stretch; -icab-border-image: url("images/bubble.jpg") 46 46 75 61 stretch stretch; -khtml-border-image: url("images/bubble.jpg") 46 46 75 61 stretch stretch; -moz-border-image: url("images/bubble.jpg") 46 46 75 61 stretch stretch; -web-kit-border-image: url("images/bubble.jpg") 46 46 75 61 stretch stretch; border-image: url("images/bubble.jpg") 46 46 75 61 stretch stretch; behavior: url(pie/PIE.htc); } Browsers: IE6+ (needs padding with CSS3PIE), FF3.5+, Opera 10+, Chrome 4+, Safari 3.1+ Slide 7 of 15 rethink | redesign | results

12. rgba I see through your lies! The Result The CSS #box { /*background-color:#662d91;*/ -pie-background:rgba(102, 51, 153, .25); background-color:rgba(102, 51, 153, .25); color:#fff; width:100px; height:100px; margin:10px; behavior: url(pie/PIE.htc); } The Format rgba (102, 51, 153, .25) (red, green, blue, alpha (0-1, 0 = 0%, 1 = 100%) Browsers: IE6+, FF3.5+, Opera 10+, Chrome 4+, Safari 3.1+ Slide 8 of 15 rethink | redesign | results

13. box-shadow My shadow follows me everywhere! The Result The CSS #box { background-color:#662d91; color:#fff; width:100px; height:100px; margin:10px; -moz-box-shadow:5px 5px 10px #999; -webkit-box-shadow:5px 5px 10px #999; box-shadow:5px 5px 10px #999; behavior: url(pie/PIE.htc); } The Format box-shadow:5px 5px 10px #999; (x offset, y offset, blur, colour) Browsers: IE6+, FF3.1+, Opera 10+, Chrome 4+, Safari 3.1+ Slide 9 of 15 rethink | redesign | results

14. text-shadow Me and my shadow: what a team! The Result The CSS h1 { color:#662d91; font-family:Arial, Helvetica, sans-serif; letter-spacing:-1px; text-shadow:2px 2px 2px #c79ce8; } The Format text-shadow:2px 2px 2px#999; (x offset, y offset, blur, colour) Browsers: FF3.1+, Opera 10+, Chrome 4+, Safari 3.1+ Slide 10 of 15 rethink | redesign | results

15. linear-gradient Can we give it a gradient? The CSS The Result #box { background-color:#662D91; color:#fff; width:100px; height:100px; margin:10px; background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#A94AF0), to(#662D91)); background:-moz-linear-gradient(100% 100% 90deg, #A94AF0, #662D91); -pie-background: linear-gradient(90deg, #A94AF0, #662D91); behavior: url(pie/PIE.htc); } The Format background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#A94AF0), to(#662D91)); -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) background:-moz-linear-gradient(100% 100% 90deg, #A94AF0, #662D91); -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* ) Browsers: IE6+, FF3.1+, Chrome 4+, Safari 3.1+ Slide 11 of 15 rethink | redesign | results

16. columns Ssssaaayyy what? Automatic grids?!?! ZOMG! The CSS The Result body { margin:30px; -moz-column-count: 4; -webkit-column-count:4; column-count:4; -moz-column-rule : thin solid #662d91; -webkit-column-rule : thin solid #662d91; column-rule : thin solid #662d91; -moz-column-gap : 4em; -webkit-column-gap : 4em; column-gap : 4em; } Browsers: FF3.5+, Chrome 4+, Safari 3.1+ Slide 12 of 15 rethink | redesign | results

17. CSS3 Links Clickity, click! CSS3 PIE http://css3pie.com Font Squirrel http://www.fontsquirrel.com/ An iPhone drawn purely with CSS3 http://demos.jeffbatterton.com/iphone-css3/ CSS3 Sandpit – Play with gradients, shadows, text strokes and transforms http://www.westciv.com/tools/gradients/index.html CSS3 Button Generator http://css-tricks.com/examples/ButtonMaker/ CSS3 Speech Bubbles http://nicolasgallagher.com/demo/pure-css-speech-bubbles/bubbles.html Slide 13 of 15 rethink | redesign | results

18. Thanks & Questions Blatant plug for a new Meetup group WordPress Brisbane http://www.meetup.com/WordPress-Brisbane 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! Slide 14 of 15 rethink | redesign | results

19. bronson@sennza.com.au http://www.sennza.com.au/ Twitter: @sennza rethink | redesign | results