The CSS3 of Tomorrow (Version 2)

THECSS3 OF
TOMORROW

peter gasston
@stopsatgreen
broken-links.com

“35 Awesome CSS3 Examples!”

“50+ Best CSS3 Examples!”

“350+ Amazing CSS3
Resources - 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;

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);

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);

linear-gradient(45deg,red,yellow,blue);

repeating-linear-gradient(red,blue 10%);

RADIAL GRADIENTS

radial-gradient(red,blue);

radial-gradient(0 100%,farthest-side,
red,yellow,blue);
repeating-radial-gradient(red,blue 10%);

RADIAL GRADIENTS

-moz-radial-gradient(100% 0,
circle,red,blue);

-webkit-gradient(radial,100% 0,0,100%
0,number,from(red),to(blue));

GRADIENTS

http://leaverou.me/css3patterns/

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
div { display: box;
A B width: 80em; }
.a,.b { width: 25em; }

A B .a,.b { box-flex: 1; }

A B
.a { box-flex: 3; }
.b { box-flex: 2; }

http://netmag.co.uk/tutorials/css3-flexible-box-model-explained

FLEXIBLE BOX LAYOUT
c

a a

b

.a { div {
box-orient: vertical; }
box-flex: 0; .a,.b {
box-align: center; box-ordinal-group: 2; }
box-pack: center; .c {
} box-ordinal-group: 1; }

GRID POSITIONING
div { div {
display: grid; display: grid;
grid-columns: 1fr 1fr 2fr; 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 a b c

c

.a { position: a; } div {
.b { position: b; } display: 'abc';
.c { position: c; } }

http://www.w3.org/TR/css3-layout/
http://code.google.com/p/css-template-layout/

TEMPLATE LAYOUT
a
c

a
b c b

div { div {
display: 'aa' 'bc'; display: 'acc' 'a.b';
} }

GRID POSITIONING

a a

b

b c
c

.a { grid-cell: a; } div {
.b { grid-cell: b; } grid-template: 'aa' 'bc';
.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/

REGIONS
a

.a { flow: foo; }
.b { content: from(foo); }
b

b

.b, .c, .d, .e {
e content: from(foo);
c }
d

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 (display: box)
or (background: linear-gradient) {}

@supports not (transform: rotate3d) {}

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);
}

THX. PLEASE BUY MY BOOK
http://nostarch.com/css3.htm

LEGAL NOTE

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!

The CSS3 of Tomorrow (Version 2)

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to The CSS3 of Tomorrow (Version 2)

Similar to The CSS3 of Tomorrow (Version 2) (20)

Recently uploaded

Recently uploaded (20)

The CSS3 of Tomorrow (Version 2)