3                JINA BOLTON

    http://creatingsexystylesheets.com/
The Art & Science of css
by Cameron Adams
  Jina Bolton
  David Johnson
  Steve Smith
  Jonathan Snook




  Published by ...
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
             ...
Backgrounds
& Borders
    Style any box&s borders and background
    including attach multiple background%
    images to a...
Backgrounds & Borders
% border-radius

% border-break

% border-image

% box-shadow
<div class=quot;vcardquot;>
    <div class=quot;addr-blquot;>
        <div class=quot;addr-trquot;>
           …
        <...
.vcard {
    background:
       #000
       url(a-grad.gif)
       repeat-x;
}
.addr-bl {
    background:
       url(a-bl....
<div class=quot;vcardquot;>…</div>
.vcard {
    background-color: #000;

    background-image:
       url(a-grad.gif),
       url(a-bl.gif),
       url(a-tr....
Multi%column
Layout
    Making it simpler to create column layouts
    without additional markup by using
    column width...
<div class=quot;entry-contentquot;>
    <div class=quot;col firstquot;>
        …
    </div>
    <div class=quot;colquot;>...
.entry-content .col {
    float: left;
    width: 467px;
    margin-left: 30px;
}
.entry-content .first {
    margin-left:...
<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
     ...
Advanced
Layout
   Aims to fully separate visual layout order
   from a document&s content by de'ning
   (slots! in a grid...
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
    n...
<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;
    col...
<div class=quot;entry-contentquot;>
    …
    <img src=quot;sushi.jpgquot;
        class=quot;photoquot;
        alt=quot;...
.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;...
.entry-content h2 {
         float: page top left;
         width: 6gr;
         height: 1gr;
         margin-left: -30px;...
Sele$ors
    Re'ned sele$ors to target an element
    based on an attribute or position in the
    document )ow plus new p...
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 s...
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>…</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 ...
<tr>…</tr>
<tr class=quot;low-rankquot;>…</tr>
<tr class=quot;low-rankquot;>…</tr>
<tr class=quot;low-rankquot;>…</tr>



...
<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 ...
Resources
% w3c Introdu$ion to css 3
 w3.org/TR/css3-roadmap



% css Working Group Blog
 w3.org/blog/CSS



%456 Berea St...
Resources
% A Li, Apart
alistapart.com



% Transcending css Support
transcendingcss.com/support/
creatingsexy,ylesheets.com
Q&A
Jina Bolton
Jina Bolton
Jina Bolton
Jina Bolton
Jina Bolton
Jina Bolton
Jina Bolton
Jina Bolton
Jina Bolton
Jina Bolton
Jina Bolton
Jina Bolton
Jina Bolton
Jina Bolton
Jina Bolton
Jina Bolton
Jina Bolton
Jina Bolton
Jina Bolton
Jina Bolton
Jina Bolton
Jina Bolton
Jina Bolton
Jina Bolton
Jina Bolton
Jina Bolton
Jina Bolton
Upcoming SlideShare
Loading in...5
×

Jina Bolton

16,894

Published on

CSS3 And What Could Be

Published in: Business, Technology
4 Comments
31 Likes
Statistics
Notes
No Downloads
Views
Total Views
16,894
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
764
Comments
4
Likes
31
Embeds 0
No embeds

No notes for slide

Jina Bolton

  1. 1. 3 JINA BOLTON http://creatingsexystylesheets.com/
  2. 2. The Art & Science of css by Cameron Adams Jina Bolton David Johnson Steve Smith Jonathan Snook Published by SitePoint
  3. 3. 3 css
  4. 4. “css 3 A Giant Serving of FAIL! — a lex rus se l l http://alex.dojotoolkit.org/?p=625
  5. 5. “css 3 quot;Third Time Lucky#! — andy cla rke
  6. 6. 1996 css 1
  7. 7. 1997 css 2
  8. 8. css 2.1 candidate recommendation
  9. 9. css 3 modul!
  10. 10. Sele$ors Backgrounds & Borders Multi%column Layout Media Advanced Layout Queries Grid Positioning
  11. 11. Backgrounds & Borders Style any box&s borders and background including attach multiple background% images to a single element.
  12. 12. Backgrounds & Borders % border-radius % border-break % border-image % box-shadow
  13. 13. <div class=quot;vcardquot;> <div class=quot;addr-blquot;> <div class=quot;addr-trquot;> … </div> </div> </div>
  14. 14. .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; }
  15. 15. <div class=quot;vcardquot;>…</div>
  16. 16. .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%; }
  17. 17. Multi%column Layout Making it simpler to create column layouts without additional markup by using column widths, counts, gaps and rules.
  18. 18. <div class=quot;entry-contentquot;> <div class=quot;col firstquot;> … </div> <div class=quot;colquot;> … </div> </div>
  19. 19. .entry-content .col { float: left; width: 467px; margin-left: 30px; } .entry-content .first { margin-left: 0; } /* .entry-content clear-fix rules */
  20. 20. <div class=quot;entry-contentquot;> … </div> .entry-content { column-count: 2; column-gap: 30px; }
  21. 21. <div class=quot;entry-contentquot;> … </div> .entry-content { column-width: 270px; column-gap: 30px; }
  22. 22. <div class=quot;vcardquot;>…</div> .vcard { border-image: url(quot;border.pngquot;) 30 30 30 30 stretch; border: double green 1em; }
  23. 23. 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.
  24. 24. a b c d e h f g i j k l
  25. 25. a a c d e g e g i j k l
  26. 26. @ @ . . e h @ @ . j j l
  27. 27. 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.
  28. 28. <div class=quot;entry-contentquot;> … </div> .entry-content { column-count: 4; column-gap: 30px; }
  29. 29. .entry-content { grid-columns: (30px * *)[4]; column-count: 4; column-gap: 30px; }
  30. 30. .entry-content { grid-columns: (30px * *)[4]; grid-rows: 9em 33.3% *; column-count: 4; column-gap: 30px; }
  31. 31. <div class=quot;entry-contentquot;> … <img src=quot;sushi.jpgquot; class=quot;photoquot; alt=quot;quot; /> … </div>
  32. 32. .entry-content img.photo { float: page bottom left; float-offset: 4gr 1gr; }
  33. 33. <div class=quot;entry-contentquot;> <h2>What is Sushi?</h2> … <img src=quot;sushi.jpgquot; class=quot;photoquot; alt=quot;quot; /> </div>
  34. 34. .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; }
  35. 35. 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.
  36. 36. 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
  37. 37. Sele$ors E:nth-child(n) an element which is the n%th child of its parent
  38. 38. <tr class=quot;altquot;></tr> <tr></tr> tr.alt td { background: #ecffd9; }
  39. 39. <tr></tr> tr:nth-child(odd) td { background: #ecffd9; }
  40. 40. <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; }
  41. 41. <tr>…</tr> tr:nth-child(-n+3) td { background: #ecffd9; }
  42. 42. Sele$ors E:nth-last-child(n) an element which is the n%th child of its parent, counting from the la, one
  43. 43. <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; }
  44. 44. <tr>…</tr> tr:nth-last-child(-n+2) td { opacity: .75; }
  45. 45. Sele$ors E:nth-of-type(n) an element which is the n%th sibling of its type
  46. 46. <p class=quot;introquot;>…</p> <p>…</p> p.intro { background: #fafcf5; font-size: 1.3em; color: #060; }
  47. 47. <p>…</p> p:first-of-type { background: #fafcf5; font-size: 1.3em; color: #030; }
  48. 48. Media Queries Extending the usefulness of media types in combination with window widths, heights and aspe$ ratio.
  49. 49. Resources
  50. 50. 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.
  51. 51. 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
  52. 52. Resources % A Li, Apart alistapart.com % Transcending css Support transcendingcss.com/support/
  53. 53. creatingsexy,ylesheets.com
  54. 54. Q&A
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×