the css3 of tomorrow (version 2)
DESCRIPTION
Revised and updated talk about the (possible) future of CSS3, as presented at London Web Standards on 27/06/11.TRANSCRIPT
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!”
BORDER-RADIUS
border-radius: 5px;border-radius: 5px 5px 0 0;border-radius: 5px 0 / 2px 0;
BOX SHADOW
box-shadow: 2px 2px 2px #000;box-shadow: inset 2px 2px 2px #000;
TEXT SHADOW
text-shadow: 2px 2px 2px #000;text-shadow: 0 -1px #000, 0 1px #fff;
BACKGROUNDS & BORDERS
background-image: url('img1.png'),url('img2.png'), url('img3.png');
border-image: url('img1.png')20 25 20 25 stretch;
BACKGROUNDS & BORDERS
BACKGROUNDS & BORDERS
SELECTORS
:first-child | :last-child
:first-of-type | :last-of-type
:nth-child() | :nth-last-child()
:nth-of-type() | :nth-last-of-type()
SELECTORS
:nth-of-type(even):not(: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);
OPACITY, ALPHA & COLOUR
WEB FONTS
@font-face {font-family: 'My Font';src: url('/path/to/font.woff');
}
h1 { font-family: 'My Font'; }
WEB FONTS
http://lostworldsfairs.com
MEDIA QUERIES
@media all and (min-device-width:480px)
@media all and (-webkit-pixel-ratio:2)
@media screen not (monochrome)
@media screen and (max-device-width: 640px) and (-moz-touch-enabled: 1)
MEDIA QUERIES
http://mediaqueri.es
LINEAR GRADIENTS
linear-gradient(red,blue);
repeating-linear-gradient(red,blue 10%);
linear-gradient(45deg,red,yellow,blue);
RADIAL GRADIENTS
radial-gradient(red,blue);
repeating-radial-gradient(red,blue 10%);
radial-gradient(0 100%,farthest-side, red,yellow,blue);
RADIAL GRADIENTS
-moz-radial-gradient(100% 0, circle,red,blue);
-webkit-gradient(radial,100% 0,0,100% 0,number,from(red),to(blue));
sqrt(x2+y2)
http://leaverou.me/css3patterns/
GRADIENTS
2D TRANSFORMATIONS
transform: rotate(45deg);
transform: skew(15deg,7.5deg);
transform: scale(2) translate(1em,-25px);
2D TRANSFORMATIONS
http://media.24ways.org/2009/14/5/index.html
3D TRANSFORMATIONS
transform: rotate3d(1,1,0,45deg);
transform: translate3d(1em,-15px,10%);
transform: scale3d(0.5,3,1.1);
3D TRANSFORMATIONS
http://broken-links.com/tests/nakamats
TRANSITIONS
transition: all 1s linear;
transition: width 2s 500ms ease-in-out;
ANIMATIONS
@keyframes 'name' {from { border-width: 10px; }50% { border-width: 1px; }to {
border-width: 1px;height: 120px;
}}
div { animation: name 1s linear; }
MULTIPLE COLUMNS
column-count: 3;
column-width: 25em;
column-gap: 1.5em;
column-rule: 3px double #f00;
column-span: all;
FLEXIBLE BOX LAYOUT
A B .a,.b { box-flex: 1; }
A.a { box-flex: 3; }.b { box-flex: 2; }
B
A B
div { display: box;width: 80em; }.a,.b { width: 25em; }
http://netmag.co.uk/tutorials/css3-flexible-box-model-explained
FLEXIBLE BOX LAYOUT
a
.a {box-flex: 0;box-align: center;box-pack: center;}
c
a
b
div {box-orient: vertical; }.a,.b {box-ordinal-group: 2; }.c {box-ordinal-group: 1; }
GRID POSITIONING
div {display: grid;grid-columns: 1fr 1fr 2fr;}
div {display: grid;grid-columns: 1fr 1fr 2fr;grid-rows: 80px auto 10em;}
http://j.mp/kul0H1
GRID POSITIONING
.a {grid-column: 2;grid-row: 2;grid-column-span: 2;}
TEMPLATE LAYOUT
a
b
c
.a { position: a; }
.b { position: b; }
.c { position: c; }
div {display: 'abc';
}
a b c
http://www.w3.org/TR/css3-layout/http://code.google.com/p/css-template-layout/
TEMPLATE LAYOUT
a
b c
div {display: 'aa' 'bc';}
div {display: 'acc' 'a.b';}
a
b
c
GRID POSITIONING
a
b c
div {grid-template: 'aa' 'bc';}
a
b
c
.a { grid-cell: a; }
.b { grid-cell: b; }
.c { grid-cell: c; }
EXTENDED FLOATS
div {float: positioned;position: absolute;left: 33.3%;top: 100px;width: 33.3%;}
http://www.interoperabilitybridges.com/css3-floats/
REGIONSa
b
.a { flow: foo; }
.b { content: from(foo); }
b
c
d
e
.b, .c, .d, .e {content: from(foo);}
http://labs.adobe.com/technologies/cssregions/http://dev.w3.org/csswg/css3-regions/
EXCLUSIONS
.b {wrap-shape: polygon(150px,0 0,300px 300px,300px);wrap-shape-mode: around;}
http://dev.w3.org/csswg/css3-exclusions/
EXCLUSIONS
.a { wrap-shape-mode: content; }
.b {wrap-shape: polygon(150px,0 0,300px 300px,300px);wrap-shape-mode: around;}
GROUPING SELECTOR
header h1, article h1, aside h1 {};
:any(header,article,aside) h1 {}
ol ul li a, ul ul li a, ul ul ul li a, ol ul ul li a {};
:any(ol,ul,ul ul,ol ul) ul li a {}
CALCULATIONS
width: calc(20em + 10px);
height: calc((85% / 4) – (1em + 2px));
border-width: calc(110px mod 4);
IMAGES
background: url('img.png#xywh=0,20,25,30');
background: -moz-image-rect(url('img.png'),20,20,0,0);
background-image: url('img.svg'),url('img.png') or #f00;
CONDITIONAL RULES
@supports (display: grid) {}
@supports (display: box)and (background: linear-gradient) {}
@supports not (transform: rotate3d) {}
@supports (display: box)or (background: linear-gradient) {}
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}/') {}
VARIABLES & MIXINS
@var $myColor #f00;
h1 { color: $myColor; }
@mixin myStuff {color: #f00;font-size: 1.5em;
}
h1 {font-weight: bold;@mix myStuff;
}
http://www.xanthir.com/blog/b4Av0
VARIABLES & MIXINS
@mixin myStuff($myColor #f00) {color: $myColor;font-size: 1.5em;
}
h1 {font-weight: bold;@mix myStuff(#00f);
}
CSS4
THX. PLEASE BUY MY BOOK
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