css3
DESCRIPTION
TRANSCRIPT
CSS3:What you can use today and how it degrades in browsers
sennza | (07) 3040-1545 | [email protected] | http://www.sennza.com.au/ | Twitter: @sennza
What we’ll cover
A brief intro into the following CSS3 elements:
• CSS3 PIE
• @font-face
• border-radius
• border-image
• rgba
• box-shadow
• text-shadow
• linear-gradient
• columns
rethink | redesign | results Slide 2 of 15
Some nifty CSS3
CSS3 PIE
PIE makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features.
PIE stands for Progressive Internet Explorer. It is an IE attached behaviour that allows IE to recognise and display some CSS3 properties.
You can download CSS3 PIE from:
http://css3pie.com/
rethink | redesign | results Slide 3 of 15
CSS3 PIE will let you use the following CSS3 elements:
• border-radius
• border-image ( needs a padding fix though )
• RGBa
• box-shadow
• linear-gradient
Mmmm, pie! What can it do?
@font-face
Grab a font-face kit from http://www.fontsquirrel.com to try it out.
rethink | redesign | results Slide 4 of 15
Wave goodbye to cufon! .comment p {font-family: RabioheadRegular, "Comic Sans MS", Arial, sans-serif;font-size:30px;}
The CSS
@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;}
The Result
Browsers: IE4+, FF3.5+, Opera 10+, Chrome 4+, Safari 3.1+
border-radius
rethink | redesign | results Slide 5 of 15
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);}
Browsers: IE6+, FF3.5+, Opera 10+, Chrome 4+, Safari 3.1+
The Result
border-image
rethink | redesign | results Slide 6 of 15
Haha I suck with a Wacom tablet!The image
Browsers: IE6+, FF3.5+, Opera 10+, Chrome 4+, Safari 3.1+
The measurements
border-image
rethink | redesign | results Slide 7 of 15
The CSS
.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+
The Result
rgba
rethink | redesign | results Slide 8 of 15
I see through your lies!
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);}
Browsers: IE6+, FF3.5+, Opera 10+, Chrome 4+, Safari 3.1+
The Result
The Format
rgba (102, 51, 153, .25)
(red, green, blue, alpha (0-1, 0 = 0%, 1 = 100%)
box-shadow
rethink | redesign | results Slide 9 of 15
My shadow follows me everywhere!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);}
Browsers: IE6+, FF3.1+, Opera 10+, Chrome 4+, Safari 3.1+
The Result
The Format
box-shadow:5px 5px 10px #999;
(x offset, y offset, blur, colour)
text-shadow
rethink | redesign | results Slide 10 of 15
Me and my shadow: what a team!The CSS
h1 {color:#662d91;font-family:Arial, Helvetica, sans-serif;letter-spacing:-1px;text-shadow:2px 2px 2px #c79ce8;}
Browsers: FF3.1+, Opera 10+, Chrome 4+, Safari 3.1+
The Result
The Format
text-shadow:2px 2px 2px #999;
(x offset, y offset, blur, colour)
linear-gradient
rethink | redesign | results Slide 11 of 15
Can we give it a gradient?
The CSS
#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);}
Browsers: IE6+, FF3.1+, Chrome 4+, Safari 3.1+
The Formatbackground:-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>]* )
The Result
columns
rethink | redesign | results Slide 12 of 15
Ssssaaayyy what? Automatic grids?!?! ZOMG!The CSS
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+
The Result
CSS3 Links
rethink | redesign | results Slide 13 of 15
Clickity, click!
CSS3 PIEhttp://css3pie.com
Font Squirrelhttp://www.fontsquirrel.com/
An iPhone drawn purely with CSS3http://demos.jeffbatterton.com/iphone-css3/
CSS3 Sandpit – Play with gradients, shadows, text strokes and transformshttp://www.westciv.com/tools/gradients/index.html
CSS3 Button Generatorhttp://css-tricks.com/examples/ButtonMaker/
CSS3 Speech Bubbleshttp://nicolasgallagher.com/demo/pure-css-speech-bubbles/bubbles.html
Thanks & Questions
rethink | redesign | results Slide 14 of 15
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!
[email protected]://www.sennza.com.au/Twitter: @sennza
rethink | redesign | results