What's Going on with CSS?

A look at the newest features of the language that are rapidly changing the way we style the web.

Tyler Gaw
Refresh NYC
May 25, 2010

You can use your left arrow & right arrow keys to navigate

Selectors

CSS3 offers a boatload of new selectors to make styling content quicker and cleaner than ever.

Selectors

E[foo^="bar"]
E[foo$="bar"]
E[foo*="bar"]
E ~ F
:enabled
:disabled
:checked
:root
:nth-child(n)
:nth-last-child(n)

:nth-of-type(n)
:nth-last-of-type(n)
:last-child
:first-of-type
:last-of-type
:only-child
:only-child-of-type
:empty
:target
:not(s)

Selectors

Thing One

Thing Two

Thing Three

1
2
3
4

#things p:nth-of-type(2) {
background-color: #0a0a0a;
color: #860b0b;
}

Selectors

Reddit Google dribble

1
2
3
4
5
6

#links a[href*="dribb"] {
background-color: #ec0064;
}
#links a[href*="red"] {
background-color: #5f99cf;
}

Staples

The bread and butter, the very anticipated, the "freakin finally" of CSS.

Staples

I like 'em real round

1
2
3
4
5

#rounded {
-webkit-border-radius: 22px;
-moz-border-radius: 22px;
border-radius: 22px;
}

Staples

Circles!

1
2
3
4
5
6
7

#circles span {
border-radius: 35px;
[...]
display: inline-block;
width: 65px;
height: 65px;
}

Staples

Webkit Flavor Linear Gradient

1
2
3
4
5
6

#wradient {
background:
-webkit-gradient(linear,
left top, left bottom,
from(#840084), to(#0f000f));
}

Staples

Webkit Flavor Radial Gradient

1
2
3
4
5
6

#rad-wradient {
background:
-webkit-gradient(radial,
50% 80%, 30, 50% 80%, 200
from(#840084), to(#0f000f));
}

Staples

Mozilla Flavor Linear Gradient

1
2
3
4
5

#mozient {
background:
-moz-linear-gradient(top,
#840084, #0f000f);
}

Staples

Mozilla Flavor Radial Gradient

1
2
3
4
5

#rad-mozient {
background:
-moz-radial-gradient(circle,
#840084 10%, #0f000f 80%);
}

Staples

Multiple Background Images!

1
2
3
4
5
6
7
8
9

#multi {
background-image:
url(multi_bg_01.jpg),
url(multi_bg_02.jpg),
url(multi_bg_03.jpg);
background-repeat: no-repeat;
background-position:
left top, 291px top, 617px top;
}

Text

When a bunch of letters get together and form a bunch of words, it's party time!

Text

Look at my sweet text overflow

1
2
3
4
5
6

/*------------ Webkit only -----------*/
#flow {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

Text

I'M FREAKIN GLOWING!

1
2
3
4
5

#glowstick {
text-shadow:
rgba(164, 255, 132, 0.8)
0px 0px 16px;
}

Transforms

Use CSS to stretch, turn and twist html elements into submission.

Transforms

Rotated

1
2
3
4

.rotated {
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
}

Transforms

Scaled

1
2
3
4

.scaled {
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
}

Transforms

Skewed

1
2
3
4

.skewed {
-webkit-transform: skewX(25deg);
-moz-transform: skewX(25deg);
}

Transitions

Smoothly change CSS properties over a specified duration.

Transitions

Hello World!

1
2
3
4
5
6
7

#hello-world:hover {
-webkit-transition:
top 0.3s ease-out,
opacity 0.2s linear;
top: -10px;
opacity: 1;
}

Animations

Totally impress your friends and family by making things fly around the screen!

Animations

Whoa!

1
2
3
4
5
6
7

/*----------- Webkit only ------------*/
.whoaSlide {
-webkit-animation-name: whoa-slide
-webkit-animation-duration: 2s
-webkit-animation-iteration-count:
infinite
}

Animations

Whoa!

1
2
3
4
5
6

/*----------- Webkit only ------------*/
@-webkit-keyframes whoa-slide {
0% { left: 0; }
50% { left: 744px; }
100% { left: 0; }
}

Animations

NO!

1
2
3
4
5
6

/*-------------- NSFA ---------------*/
@-webkit-keyframes whoa-blink {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}

Media Queries

Control the styles that specific output devices see using CSS media types and expressions.

Media Queries

1
2
3
4
5
6
7
8

/*------------- iPhone ------------*/
@media only screen and
(max-device-width: 480px) {
a.transport-control {
opacity: 1;
width: 60px
}
}

In Action

A practical example showing how cool this coolness can be.

In Action

Name	Time	Artist	Play Count	Album
Texas Cops	2:14	Tim Barry	18	Manchester
On and On	2:40	Tim Barry	19	Manchester
South Hill	3:55	Tim Barry	19	Manchester
5 Twenty 5	4:10	Tim Barry	20	Manchester

In Action

Name	Time	Artist	Play Count	Album
Texas Cops	2:14	Tim Barry	18	Manchester
On and On	2:40	Tim Barry	19	Manchester
South Hill	3:55	Tim Barry	19	Manchester
5 Twenty 5	4:10	Tim Barry	20	Manchester

1
2
3

tr:nth-child(odd) {
background-color: #e1f3ff;
}

In Action

Name	Time	Artist	Play Count	Album
Texas Cops	2:14	Tim Barry	18	Manchester
On and On	2:40	Tim Barry	19	Manchester
South Hill	3:55	Tim Barry	19	Manchester
5 Twenty 5	4:10	Tim Barry	20	Manchester

1
2
3
4
5
6

thead tr {
background: -webkit-gradient(linear,
left top, left bottom,
from(#fcfcfc), to(#cfcfcf));
text-shadow: #fffff 1px 1px 1px;
}

In Action

Name	Time	Artist	Play Count	Album
Texas Cops	2:14	Tim Barry	18	Manchester
On and On	2:40	Tim Barry	19	Manchester
South Hill	3:55	Tim Barry	19	Manchester
5 Twenty 5	4:10	Tim Barry	20	Manchester

1
2
3
4
5

tr td:nth-of-type(2),
tr td:nth-of-type(4) {
width: 140px;
text-align: right;
}

In Action

Name	Time	Artist	Play Count	Album
Texas Cops	2:14	Tim Barry	18	Manchester
On and On	2:40	Tim Barry	19	Manchester
South Hill	3:55	Tim Barry	19	Manchester
5 Twenty 5	4:10	Tim Barry	20	Manchester

1
2
3
4
5

td.active {
background: -webkit-gradient(linear,
left top, left bottom,
from(#d9ebf7), to(#7099b6));
}

Browsers?

Which ones support getting awesome and how to handle those that don't.

Browsers?

http://findmebyip.com/litmus

Browsers?

Design and build for advanced browsers first, then find ways to bring the others up to speed.

What's Going on with CSS?

A look at the newest features of the language that are rapidly changing the way we style the web.

Selectors

CSS3 offers a boatload of new selectors to make styling content quicker and cleaner than ever.

Selectors

Selectors

Selectors

Staples

The bread and butter, the very anticipated, the "freakin finally" of CSS.

Staples

Staples

Staples

Staples

Staples

Staples

Staples

Text

When a bunch of letters get together and form a bunch of words, it's party time!

Text

Text

Transforms

Use CSS to stretch, turn and twist html elements into submission.

Transforms

Transforms

Transforms

Transitions

Smoothly change CSS properties over a specified duration.

Transitions

Animations

Totally impress your friends and family by making things fly around the screen!

Animations

Animations

Animations

Media Queries

Control the styles that specific output devices see using CSS media types and expressions.

Media Queries

In Action

A practical example showing how cool this coolness can be.

In Action

In Action

In Action

In Action

In Action

Browsers?

Which ones support getting awesome and how to handle those that don't.

Browsers?

Browsers?

Thank You!