The CSS3 of Tomorrow

THECSS3 OF
TOMORROW

peter gasston
broken-links.com
@stopsatgreen

“35 Awesome CSS3 Examples!”
“50+ Best CSS3 Examples!”
“Push Your Web Design Into
The Future With CSS3!”
“Amazing CSS3 Techniques
You Can’t live Without!”
“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 & TEXT SHADOW

box-shadow: 2px 2px 2px #000;

text-shadow: 2px 2px 2px #000;

text-shadow: inset 2px 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()

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

INTERMISSION



http://css3pie.com/

WEB FONTS

@font-face {
font-family: 'My Font';
src: url('/path/to/font.woff');
}

h1 { font-family: 'My Font'; }

http://fontsquirrel.com

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(#f00,#00f);

linear-gradient(45deg,#f00,#0f0,#00f);

repeating-linear-gradient(#f00,#00f 10%);

RADIAL GRADIENTS

radial-gradient(#f00,#00f);

repeating-radial-gradient(#f00,#00f 10%);

RADIAL GRADIENTS

-moz-radial-gradient(100% 0,circle
farthest-corner,#f00,#00f);

-webkit-gradient(radial,100% 0,0,100%
0,[number],from(#f00),to(#00f));

GRADIENTS

http://leaverou.me/css3patterns/

TRANSITIONS

transition: all 1s linear;

transition:
border-width 2s 500ms ease-in-out;

TRANSITIONS

http://broken-links.com/tests/upintheair

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

3D TRANSFORMATIONS

http://paulrhayes.com/experiments/sphere/

COMBINING EFFECTS

http://thefeed.orange.co.uk

ANIMATIONS
@keyframes 'name' {
from { border-width: 10px; }
50% { border-width: 1px; }
to {
border-width: 1px;
height: 120px;
}
}

div { animation: name 1s linear; }

ANIMATIONS

http://animatable.com/demos/madmanimation/

INTERMISSION
<link href="basic.css"
media="screen" rel="stylesheet">

<link href="desktop.css"
media="screen and (min-width:
481px)" rel="stylesheet">

INTERMISSION




etc.

INTERMISSION
<html class="no-js">
<script src="modernizr.js"></script>
<html class="svg no-cssgradients">

http://modernizr.com

INTERMISSION
div {
background: url('img.png');
background: linear-gradient(#f00,#00f);
transition: all 1s ease-in;
}

.multiplebgs div {
background: url('img1.png'),
url('img2.png'), url('img3.png');
}

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

width: calc((85% / 4) – (1em + 2px));

border-width: calc(110px mod 4);

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 { box-flex: 1; }

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

FLEXIBLE BOX LAYOUT
c

a
a
b

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

GRID POSITIONING
div {
display: grid;
grid-columns: 1fr
1fr 2fr;
grid-rows: 100px
5em 1fr;
}

GRID POSITIONING
.a {
grid-column: 2;
grid-row: 3;
grid-column-span: 2;
}

TEMPLATE LAYOUT
a

b a b c

c

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

TEMPLATE LAYOUT
a
c

a
b c b

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

REGIONS
a .x { flow-thread: a; }
.y { flow-thread: b; }
b .a,.c {
region-thread: a;
c }
.b { region-thread: b; }

REGIONS
1 .a,.b,.c,.d {
display: region;
4 }
2 .a { region-index: 1; }
3 .b { region-index: 2; }
.c { region-index: 3; }
.d { region-index: 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;

VARIABLES & MIXINS
@var $myColor #f00;

h1 { color: $myColor; }

@mixin myStuff {
color: #f00;
font-size: 1.5em;
}

h1 {
font-weight: bold;
@mix myStuff;
}

VARIABLES & MIXINS

@mixin myStuff($myColor #f00) {
color: $myColor;
font-size: 1.5em;
}

h1 {
font-weight: bold;
@mix myStuff(#00f);
}

FEATURE QUERIES
@supports (display: grid) {}

@supports (display: box) and
(background: linear-gradient) {}

@supports not (transform: rotate3d) {}

THANK YOU & GOOD NIGHT

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!

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

The CSS3 of Tomorrow

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (6)

Similaire à The CSS3 of Tomorrow

Similaire à The CSS3 of Tomorrow (20)

Dernier

Dernier (20)

The CSS3 of Tomorrow