Upload
peter-gasston
View
107
Download
2
Tags:
Embed Size (px)
DESCRIPTION
Completely updated version of my talk, given at Front Row 2011 in Krakow, in October 2011. Contains links and brief annotation.
Citation preview
THE CSS3 OFTOMORROW
PETER GASSTON@STOPSATGREEN
BROKEN-LINKS.COM
“35 Awesome CSS3 Examples!”
“50+ Best CSS3 Examples!”
“350+ Amazing CSS3Resources - All You'll Ever
Need to Become a CSS3 Master!”
CSS3 TODAY
border-radius: 5px;
box-shadow: 2px 2px 4px #000;
text-shadow: 4px 4px 2px #000;
BACKGROUNDS & BORDERS
background-image: url('img1.png'), url('img2.png'), url('img3.png');
border-image:url('img1.png')20 25 20 25 stretch;
SELECTORS
:first-child | :last-child
:first-of-type | :last-of-type
:nth-child() | :nth-last-child()
:nth-of-type() | :nth-last-of-type()
OPACITY, ALPHA & COLOUR
opacity: 0.5;
color: rgba(255,0,0,0.5);
color: hsl(0,100%,50%);
color: hsla(0,100%,50%,0.5);
WEB FONTS
@font-face { font-family: 'My Font'; src: url('/path/to/font.woff');}
h1 { font-family: 'My Font'; }
MEDIA QUERIES
@media all and (min-device-width: 480px)
@media all and (pixel-ratio: 2)
@media screen not (monochrome)
@media screen and (max-device-width: 640px) and (touch-enabled: 1)
GRADIENTS
linear-gradient(45deg,red,yellow);
repeating-linear-gradient(red,blue 10%);
radial-gradient(circle cover,red,blue);
repeating-radial-gradient(red,blue 10%);
http://leaverou.me/css3patterns/
TRANSFORMATIONS
transform: rotate(45deg);
transform: rotate3d(1,1,0,45deg);
http://westciv.com/tools/transforms/
TRANSITIONS & ANIMATIONS
@keyframes foo { from { color: #f00; } 50% { color: #00f; } to { color: #0f0; }}
div { animation: foo 1s linear; }
transition: all 2s 500ms ease-in;
TRANSITIONS & ANIMATIONS
http://daneden.me/animate/
MULTIPLE COLUMNS
div { column-count: 3; column-width: 25em; column-gap: 1.5em; column-rule: 3px double #f00;}
h2 { column-span: all; }
Implemented fully in Chrome, Opera, Safari, coming in IE10, in Firefox but using -moz- prefix.
FLEXIBLE BOX LAYOUT
A Bdiv { display: flexbox; }.a,.b { width: 40%; }
A B.a,.b { width: flex(1); }
A B.a { width: flex(3); }.b { width: flex(2); }
Currently in Chrome, Firefox, Safari, coming in IE10, but all use an older syntax; you can read more about this in an article I wrote: http://www.netmagazine.com/tutorials/css3-flexible-box-model-explained
FLEXIBLE BOX LAYOUT
a
.a { flex-align: center; flex-pack: center; width: flex(0);}
c
a
b
div { flex-flow: column; }.a,.b { flex-order: 2; }.c { flex-order: 1; }
GRID LAYOUT
div { display: grid; grid-columns: 1fr 1fr 2fr;}
div { display: grid; grid-columns: 1fr 1fr 2fr; grid-rows: 80px auto 10em;}
Coming in IE10, work apparently underway in WebKit too. Latest spec: http://dev.w3.org/csswg/css3-grid-align/
GRID LAYOUT
article { grid-column: 2; grid-row: 2; grid-column-span: 2;}
GRID LAYOUT
a
b
c
.a { grid-cell: a; }
.b { grid-cell: b; }
.c { grid-cell: c; }
a b c
div { grid-template: 'abc';}
GRID LAYOUT
a
b c
div { grid-template: 'aa' 'bc';}
a
b
cdiv { grid-template: 'acc' 'a.b';}
REGIONSa
b
.a { flow-into: foo; }
.b { flow-from: foo; }
b
c
d
e
.b, .c, .d, .e { flow-from: foo;}
@region .b { color: #f00 }
Currently in IE10: http://msdn.microsoft.com/en-us/ie/hh272902.aspx#_CSSConnected and in an experimental WebKit build, using a different syntax: http://labs.adobe.com/technologies/cssregions/. Latest spec: http://dev.w3.org/csswg/css3-regions/
LINE GRID
article { layout-grid-line: 1.5; }
h1 { layout-grid-mode: block;}
p { layout-grid-mode: line; margin-bottom: 1gd;}
Not currently implemented. Latest spec: http://dev.w3.org/csswg/css-line-grid/
EXCLUSIONS
div { shape-outside: circle(50%, 50%, 50px); wrap-flow: both;}
Currently only in an experimental WebKit build, with a different syntax: http://labs.adobe.com/technologies/cssregions/. Latest spec: http://dev.w3.org/csswg/css3-exclusions/
EXCLUSIONS
div { shape-inside: polygon(150px,0 0,300px 300px,300px);}
PAGED MEDIA
@media paged { height: 100%; overflow: paged-x;}
<link rel="next" href="p2.htm">
@navigation { nav-right: link-rel(next);}
Currently only in an experimental Opera build: http://people.opera.com/howcome/2011/reader/index.html
FILTER EFFECTSimg { filter: grayscale(0.25); }
img { filter: blur(5,2) sepia(1); }
Currently unimplemented. Latest spec: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/publish/Filters.html
SHADERS
img { filter: custom(url(foo.fs), 20 20, phase 90);}
Currently unimplemented. Introduction: http://dstorey.tumblr.com/post/11059109286/cssshaders. Latest spec: https://dvcs.w3.org/hg/FXTF/raw-file/tip/custom/index.html
IMAGES
background-image: image('img.svg','img.png',#f00);
background-image: url('img.png#xywh=0,20,25,30');
background-image: element(#foobar);
Latest spec: http://www.w3.org/TR/2011/WD-css3-images-20110908/
VALUES
width: calc((12em * 3) + 10px);
height: min(3em, 30px);
list-style-type: cycle(disk, circle);
content: attr(href);
Latest spec: http://www.w3.org/TR/css3-values/
CONDITIONAL RULES
@supports (display: grid) {}
@supports (display: box)and (background: linear-gradient) {}
@supports (display: box)or (background: linear-gradient) {}
@supports not (transform: rotate3d) {}
Latest spec: http://dev.w3.org/csswg/css3-conditional/
CONDITIONAL RULES
@document url('http://w3.org/index.html') {}
@document url-prefix('http://w3.org/blog/') {}
@document domain('w3.org') {}
@document regexp('http://w3.org/[^/]*-\\d{8}/') {}
Implemented in Firefox: https://developer.mozilla.org/en/CSS/@-moz-document
DEVICE ADAPTATION
@viewport { width: device-width; }
<meta name="viewport" content="width=device-width">
Implemented in Opera: http://www.opera.com/docs/specs/presto28/css/viewportdeviceadaptation/. Latest spec: http://dev.w3.org/csswg/css-device-adapt/
VARIABLES
@var $myColor #f00;
h1 { color: $myColor; }
Only a suggestion at the moment: http://www.xanthir.com/blog/b4AD0
MIXINS
@mixin myStuff { color: #f00; font-size: 1.5em;}
h1 { @mix myStuff; font-weight: bold;}
Only a suggestion at the moment: http://www.xanthir.com/blog/b4Av0
MIXINS
@mixin myStuff($myColor #f00) { color: $myColor; font-size: 1.5em;}
h1 { @mix myStuff(#00f); font-weight: bold;}
NESTING
h1 { border: 1px solid #f00;
& a { color: #00f;
&:hover { color: #ff0; }
}}
Only a suggestion at the moment: http://www.xanthir.com/blog/b49w0
SELECTORS
:matches(header,aside,div) h1 {}
:not(header,aside,div) h1 {}
$div h1 {}
Introduction: http://www.blog.highub.com/css/whats-new-in-css-selectors-level-4/. Latest spec: http://dev.w3.org/csswg/selectors4/
http://www.netmagazine.com/features/developers-guide-browser-adoption-rates
http://caniuse.com/
THX. PLEASE BUY MY BOOK
http://nostarch.com/css3.htm
http://thebookofcss3.com or http://nostarch.com/css3.htm
Superman copyright is a contentious issue, but the images I use here belong to DC Comics and no permission was given. I
hope they fall under fair use doctrines. You should buy a copy of All Star Superman – it’s really good!
LEGAL NOTE