• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Jina Bolton
 

Jina Bolton

on

  • 19,992 views

CSS3 And What Could Be

CSS3 And What Could Be

Statistics

Views

Total Views
19,992
Views on SlideShare
15,680
Embed Views
4,312

Actions

Likes
31
Downloads
763
Comments
4

53 Embeds 4,312

http://creatingsexystylesheets.com 3434
http://www.creatingsexystylesheets.com 499
http://www.adii.co.za 154
http://webstandard.kulando.de 45
http://raja.tistory.com 18
http://www.wretch.cc 16
http://209.85.135.104 11
http://adii.co.za 10
http://boni-seronoser.blogspot.com 9
http://www.slideshare.net 7
http://www.graphicrating.com 6
http://64.233.183.104 6
http://64.233.169.104 6
http://webcache.googleusercontent.com 5
http://209.85.129.132 5
http://209.85.229.132 5
http://66.102.9.104 5
http://static.slideshare.net 4
http://74.125.39.104 4
http://translate.googleusercontent.com 4
http://localhost 4
http://kapeller.wordpress.com 4
http://iktkoolitus.blogspot.com 3
http://www.webdeveloper2.com 3
http://lucidlab.tistory.com 3
http://www.ibreakthrough.com 3
http://74.125.77.132 3
http://64.233.167.104 3
http://dev 2
http://localhost:3000 2
http://search.mywebsearch.com 2
http://losduendesdecolores.blogspot.com 2
http://www.netvibes.com 2
http://www.fandm.edu 2
http://armarbos.blogia.com 2
http://64.233.179.104 2
http://sundale.clubsetup.com 1
http://74.125.153.132 1
http://74.125.93.132 1
http://203.208.39.132 1
http://209.85.135.132 1
http://66.102.9.132 1
http://74.125.95.132 1
http://jansblog.wordpress.com 1
http://blogs.lavozdelaescuela.es 1
http://72.14.205.104 1
http://webdeveloper2.com 1
http://www.blogger.com 1
http://74.125.93.104 1
http://74.125.95.104 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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

14 of 4 previous next Post a comment

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

    Jina Bolton Jina Bolton Presentation Transcript

    • 3 JINA BOLTON http://creatingsexystylesheets.com/
    • The Art & Science of css by Cameron Adams Jina Bolton David Johnson Steve Smith Jonathan Snook Published by SitePoint
    • 3 css
    • “css 3 A Giant Serving of FAIL! — a lex rus se l l http://alex.dojotoolkit.org/?p=625
    • “css 3 quot;Third Time Lucky#! — andy cla rke
    • 1996 css 1
    • 1997 css 2
    • css 2.1 candidate recommendation
    • css 3 modul!
    • Sele$ors Backgrounds & Borders Multi%column Layout Media Advanced Layout Queries Grid Positioning
    • Backgrounds & Borders Style any box&s borders and background including attach multiple background% images to a single element.
    • Backgrounds & Borders % border-radius % border-break % border-image % box-shadow
    • <div class=quot;vcardquot;> <div class=quot;addr-blquot;> <div class=quot;addr-trquot;> … </div> </div> </div>
    • .vcard { background: #000 url(a-grad.gif) repeat-x; } .addr-bl { background: url(a-bl.gif) 100% 0 no-repeat; } .addr-tr { background: url(a-tr.gif) 100% 0 no-repeat; }
    • <div class=quot;vcardquot;>…</div>
    • .vcard { background-color: #000; background-image: url(a-grad.gif), url(a-bl.gif), url(a-tr.gif); background-repeat: repeat-x, no-repeat, no-repeat; background-position: 0 0, 100% 0, 0 100%; }
    • Multi%column Layout Making it simpler to create column layouts without additional markup by using column widths, counts, gaps and rules.
    • <div class=quot;entry-contentquot;> <div class=quot;col firstquot;> … </div> <div class=quot;colquot;> … </div> </div>
    • .entry-content .col { float: left; width: 467px; margin-left: 30px; } .entry-content .first { margin-left: 0; } /* .entry-content clear-fix rules */
    • <div class=quot;entry-contentquot;> … </div> .entry-content { column-count: 2; column-gap: 30px; }
    • <div class=quot;entry-contentquot;> … </div> .entry-content { column-width: 270px; column-gap: 30px; }
    • <div class=quot;vcardquot;>…</div> .vcard { border-image: url(quot;border.pngquot;) 30 30 30 30 stretch; border: double green 1em; }
    • Advanced Layout Aims to fully separate visual layout order from a document&s content by de'ning (slots! in a grid in which content can )ow or be placed, or that remain empty * all without additional markup.
    • a b c d e h f g i j k l
    • a a c d e g e g i j k l
    • @ @ . . e h @ @ . j j l
    • Grid Positioning Gives the ability to add invisible grid rules to create grid layouts quot;like in books and newspapers#, and uses sizing and new )oat properties for placing content.
    • <div class=quot;entry-contentquot;> … </div> .entry-content { column-count: 4; column-gap: 30px; }
    • .entry-content { grid-columns: (30px * *)[4]; column-count: 4; column-gap: 30px; }
    • .entry-content { grid-columns: (30px * *)[4]; grid-rows: 9em 33.3% *; column-count: 4; column-gap: 30px; }
    • <div class=quot;entry-contentquot;> … <img src=quot;sushi.jpgquot; class=quot;photoquot; alt=quot;quot; /> … </div>
    • .entry-content img.photo { float: page bottom left; float-offset: 4gr 1gr; }
    • <div class=quot;entry-contentquot;> <h2>What is Sushi?</h2> … <img src=quot;sushi.jpgquot; class=quot;photoquot; alt=quot;quot; /> </div>
    • .entry-content h2 { float: page top left; width: 6gr; height: 1gr; margin-left: -30px; ic } .entry-content img.photo { float: page bottom left; float-offset: 4gr 1gr; }
    • Sele$ors Re'ned sele$ors to target an element based on an attribute or position in the document )ow plus new pseudo%classes and pseudo%elements.
    • Sele$ors % E:only-of-type an element which is the only sibling of its type % E:not(s) an element that d+s not match simple sele$ors %E ~ F an F element preceded by an E element
    • Sele$ors E:nth-child(n) an element which is the n%th child of its parent
    • <tr class=quot;altquot;></tr> <tr></tr> tr.alt td { background: #ecffd9; }
    • <tr></tr> tr:nth-child(odd) td { background: #ecffd9; }
    • <tr class=quot;high-rankquot;>…</tr> <tr class=quot;high-rankquot;>…</tr> <tr class=quot;high-rankquot;>…</tr> <tr>…</tr> tr.high-rank td { background: #ecffd9; }
    • <tr>…</tr> tr:nth-child(-n+3) td { background: #ecffd9; }
    • Sele$ors E:nth-last-child(n) an element which is the n%th child of its parent, counting from the la, one
    • <tr>…</tr> <tr class=quot;low-rankquot;>…</tr> <tr class=quot;low-rankquot;>…</tr> <tr class=quot;low-rankquot;>…</tr> tr.low-rank td { opacity: .75; }
    • <tr>…</tr> tr:nth-last-child(-n+2) td { opacity: .75; }
    • Sele$ors E:nth-of-type(n) an element which is the n%th sibling of its type
    • <p class=quot;introquot;>…</p> <p>…</p> p.intro { background: #fafcf5; font-size: 1.3em; color: #060; }
    • <p>…</p> p:first-of-type { background: #fafcf5; font-size: 1.3em; color: #030; }
    • Media Queries Extending the usefulness of media types in combination with window widths, heights and aspe$ ratio.
    • Resources
    • CSS ELEVEN IS AN INTERNATIONAL GROUP OF VISUAL WEB DESIGNERS AND DEVELOPERS WHO ARE COMMITTED TO HELPING THE W3C'S CSS WORKING GROUP TO BETTER DELIVER THE TOOLS THAT ARE NEEDED TO DESIGN TOMORROW'S WEB.
    • Resources % w3c Introdu$ion to css 3 w3.org/TR/css3-roadmap % css Working Group Blog w3.org/blog/CSS %456 Berea Street 456bereastreet.com % css3.info
    • Resources % A Li, Apart alistapart.com % Transcending css Support transcendingcss.com/support/
    • creatingsexy,ylesheets.com
    • Q&A