Css3
Upcoming SlideShare
Loading in...5
×
 

Css3

on

  • 3,857 views

 

Statistics

Views

Total Views
3,857
Views on SlideShare
3,662
Embed Views
195

Actions

Likes
0
Downloads
38
Comments
1

2 Embeds 195

http://shawwebsitedesign.jimdo.com 122
http://www37.jimdo.com 73

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Css3 Css3 Presentation Transcript

  • 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
  • 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
  • CSS3 PIE
    Mmmm, pie!
    What can it do?
    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/
    CSS3 PIE will let you use the following CSS3 elements:
    • border-radius
    • border-image ( needs a padding fix though )
    • RGBa
    • box-shadow
    • linear-gradient
    Slide 3 of 15
    rethink | redesign | results
  • @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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • bronson@sennza.com.au
    http://www.sennza.com.au/
    Twitter: @sennza
    rethink | redesign | results