Css3

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