jina bolton
DESCRIPTION
CSS3 And What Could BeTRANSCRIPT
3JINA BOLTON
http://creatingsexystylesheets.com/
by Cameron Adams
Jina Bolton
David Johnson
Steve Smith
Jonathan Snook
Published by SitePoint
The Art & Science of css
css3
“css 3
A Giant Servingof FAIL!
— alex russellhttp://alex.dojotoolkit.org/?p=625
“css 3
"Third Time Lucky#!— andy clarke
css 1 1996
css 2 1997
candidate recommendationcss 2.1
css 3 modul!
Sele$orsMulti%columnLayout
GridPositioning
AdvancedLayoutMedia
Queries
Backgrounds& Borders
Style any box&s borders and background including attach multiple background%images to a single element.
Backgrounds& Borders
Backgrounds & Borders
%border-radius
%border-break
%border-image
%box-shadow
<div class="vcard">
<div class="addr-bl">
<div class="addr-tr">
…
</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="vcard">…</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%;
}
Making it simpler to create column layouts without additional markup by using column widths, counts, gaps and rules.
Multi%column Layout
<div class="entry-content">
<div class="col first">
…
</div>
<div class="col">
…
</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="entry-content">
…
</div>
.entry-content {
column-count: 2;
column-gap: 30px;
}
<div class="entry-content">
…
</div>
.entry-content {
column-width: 270px;
column-gap: 30px;
}
<div class="vcard">…</div>
.vcard {
border-image:
url("border.png")
30 30 30 30
stretch;
border:
double green 1em;
}
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.
Advanced Layout
a b c d
e f g h
i j k l
a a c d
e e g g
i j k l
@ @ . .
e @ @ h
. j j l
Gives the ability to add invisible grid rules to create grid layouts "like in books and newspapers#, and uses sizing and new )oat properties for placing content.
Grid Positioning
<div class="entry-content">
…
</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="entry-content">
…
<img src="sushi.jpg"
class="photo"
alt="" />
…
</div>
.entry-content img.photo {
float: page bottom left;
float-offset: 4gr 1gr;
}
<div class="entry-content">
<h2>What is Sushi?</h2>
…
<img src="sushi.jpg"
class="photo"
alt="" />
</div>
ic
.entry-content h2 {
float: page top left;
width: 6gr;
height: 1gr;
margin-left: -30px;
}
.entry-content img.photo {
float: page bottom left;
float-offset: 4gr 1gr;
}
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
Sele$ors
%E:only-of-typean element which is the only sibling of its type
%E:not(s)an element that d+s not match simple sele$ors
%E ~ Fan F element preceded by an E element
an element which is the n%th child of its parent
E:nth-child(n)
Sele$ors
<tr class="alt"></tr>
<tr></tr>
tr.alt td {
background: #ecffd9;
}
<tr></tr>
tr:nth-child(odd) td {
background: #ecffd9;
}
<tr class="high-rank">…</tr>
<tr class="high-rank">…</tr>
<tr class="high-rank">…</tr>
<tr>…</tr>
tr.high-rank td {
background: #ecffd9;
}
<tr>…</tr>
tr:nth-child(-n+3) td {
background: #ecffd9;
}
an element which is the n%th child of its parent, counting from the la, one
E:nth-last-child(n)
Sele$ors
<tr>…</tr>
<tr class="low-rank">…</tr>
<tr class="low-rank">…</tr>
<tr class="low-rank">…</tr>
tr.low-rank td {
opacity: .75;
}
<tr>…</tr>
tr:nth-last-child(-n+2) td {
opacity: .75;
}
an element which is the n%th sibling of its type
E:nth-of-type(n)
Sele$ors
<p class="intro">…</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;
}
Extending the usefulness of media types in combination with window widths, heights and aspe$ ratio.
Media Queries
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 3w3.org/TR/css3-roadmap
%css Working Group Blogw3.org/blog/CSS
%456 Berea Street456bereastreet.com
%css3.info
Resources
%A Li, Apartalistapart.com
%Transcending css Supporttranscendingcss.com/support/
creatingsexy,ylesheets.com
Q&A