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