Learn to Love CSS3 [English]

Robin Poort (@rhcpoort)

CEO & co-founder ThemePartner (@theme_partner)

J and Beyond, Bad Nauheim, may 2012

CSS3

Robert Raisch proposed "named Stylesheets"

Source: http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/www-talk-1993q2.messages/443.html

Håkon Wium Lie & Bert Bos create CSS1

Source: http://www.w3c.de/Events/2006/images/PrintSymposium/slides/_DSC0209.JPG

Source: http://upload.wikimedia.org/wikipedia/commons/5/54/H%C3%A5kon_Wium_Lie.jpg

CSS1 in development

h1.font.size = 24pt 100%

40%font.family = timesh1.font.family = helvetica 100%

60%AGE > 3d ? background.color = pale_yellow : background.color = whiteDISPLAY_HEIGHT > 30cm ? http://NYT.com/style : http://LeMonde.fr/style

CSS1 recommended by the W3C

CSS2 recommended by the W3C

CSS3 mentioned for the first time

1999?!

Using CSS3

Where & when?

Not on the critical layers

don't use it on branding, layout & usability

Progressively enhance!

Make sure the website works in older browsers

Performance problems

Make your website fast!

Some examples!

p.rgba1 {

color: #000000;

color: rgba(0,0,0,1);

}

p.rgba2 {

color: #FF0000;

color: rgba(255,0,0,.5);

}

p.rgba3 {

color: #1ebdbe;

color: rgba(30,189,190,.25);

}

Always put the non-rgba color for older browsers before the rgba color

div.rgba1 {

background: #000000;

background: rgba(0,0,0,.8);

color: #FFF;

}

div.rgba2 {

background: #FFF;


}

div.rgba3 {

background: #1ebdbe;


}

div.rgba1 {

background: #555;

border: 5px solid;

border-color: #000;

border-color: rgba(0,0,0,.3);

}

div.rgba2 {

background: #3d3877;

border: 5px solid;

border-color: #9d9bba;


}

div.rgba3 {

background: url(seaguls.png);

border: 10px solid;

border-color: #black;


}

<p class=”shadow1”>Lorem ipsum</p>

p.shadow1 {

font-weight: bold;

font-size: 75px;

line-height: 1em;

color: #137576;

text-shadow:

1px 1px 0 #42d5d6,

-1px -1px 0 #084a4a,

-2px -2px 1px rgba(0,0,0,.2),

2px 2px 1px rgba(255,255,255,.2);

}


p.shadow2 {

font-weight: bold;

font-size: 75px;

line-height: 1em;

color: #FFF;

text-shadow:

0 1px 0 #96e0e0,

0 2px 0 #86e0e0,

0 3px 0 #76e0e0,

0 4px 0 #56e0e0,

0 5px 5px rgba(0,0,0,.3),

0 10px 10px rgba(0,0,0,.2);

}


p.shadow3 {

font-weight: bold;

font-size: 75px;

line-height: 1em;

color: #FFF;

background: #222;

text-shadow:

0 0 4px black,

0 -5px 4px #ff3,

2px -10px 6px #fd3,

-2px -15px 11px #f80,

2px -25px 18px #f20;

}

<div class=”shadow1”>Lorem ipsum</div>

div.shadow1 {

background: #FFF;

text-align: center;

-webkit-box-shadow: ...;

-moz-box-shadow: ...;

box-shadow:

5px 5px 0 rgba(0,0,0,.3);

}


div.shadow2 {

background: #FFF;

text-align: center;



box-shadow:

0 0 1px black,

0 0 15px white;

}


div.shadow3 {

background: #FFF;

text-align: center;



box-shadow:

5px 5px 0 white inset,

-5px -5px 0 white inset,

6px 6px 0 rgba(0,0,0,.15) inset,

-6px -6px 0 rgba(0,0,0,.15) inset,

0 0 20px rgba(0,0,0,.5) inset,

0 0 7px rgba(0,0,0,.2),

0 10px 10px -10px black;

}

<div class=”radius1”>Lorem ipsum</div>

div.radius1 {

background: #FFF;

text-align: center;

-webkit-border-radius: ...;

-moz-border-radius: ...;

border-radius: 20px;

}


div.radius2 {

background: #FFF;

text-align: center;

width: 200px;

height: 200px;

font-size: 20px;

line-height: 200px;



border-radius: 9999px;

}


div.radius3 {

background: #FFF;

text-align: center;



border-radius: 20px 60px;

}

<div class=”gradient1”></div>

div.gradient1 {

/* Basic color */

background-color: #183c7a;

/* Chrome, Safari4+ */

background-image: -webkit-gradient(linear, left top, left bottom,

color-stop(0%,#183c7a), color-stop(100%,#84b6f4));

/* Chrome10+, Safari5.1+ & The rest */

background-image: -webkit-linear-gradient(top, #183c7a 0%,#84b6f4 100%);

background-image: -moz-linear-gradient(top, #183c7a 0%, #84b6f4 100%);

background-image: -o-linear-gradient(top, #183c7a 0%,#84b6f4 100%);

background-image: -ms-linear-gradient(top, #183c7a 0%,#84b6f4 100%);

background-image: linear-gradient(top, #183c7a 0%,#84b6f4 100%);

}

Always start with a solid color for older browsers


div.gradient2 {

/* Basic color */

background-color: #183c7a;


background: -webkit-gradient(radial, center center, 0px, center center,

100%, color-stop(0%,rgba(24,60,122,1)),

color-stop(100%,rgba(132,182,244,0.5)));

/* Chrome10+, Safari5.1+ & The rest */

background: -webkit-radial-gradient(center, ellipse cover,

rgba(24,60,122,1) 0%,rgba(132,182,244,0.5) 100%);

background: -moz-radial-gradient(Same as webkit)

background: o-radial-gradient(Same as webkit)

background: radial-gradient(center, ellipse cover,

rgba(24,60,122,1) 0%,rgba(132,182,244,0.5) 100%);

}


div.gradient3 {

/* Basic color */

background-color: red;


background-image: -webkit-gradient(radial, center center, 0px, center

center, 100%, color-stop(0%,rgba(24,60,122,1)),

color-stop(100%,rgba(132,182,244,0.5)));

background-image: -webkit-radial-gradient(center, ellipse cover,

rgba(24,60,122,1) 0%,rgba(132,182,244,0.5) 100%);

background-image: -moz-radial-gradient(Same as webkit)

background-image: o-radial-gradient(Same as webkit)

background-image: radial-gradient(center, ellipse cover,

rgba(24,60,122,1) 0%,rgba(132,182,244,0.5) 100%);

}

body {

background: url(../images/pattern2.png) repeat-x top left,

url(../images/pattern.png),

linear-gradient(top, rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 100%);

background-color: #1EBDBE;

}

By setting background-color last you can simply only change the color

div.wordwrap1 {

word-wrap: normal;

}

div.wordwrap2 {

word-wrap: break-word;

}

div.textoverflow1 {

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

div.textoverflow2 {

white-space: nowrap;

overflow: hidden;

text-overflow: clip;

}

:hover {overflow:visible} makes the text visible again

a.transition1 {

background: #FFF;

color: #000;

-webkit-transition: background .5s ease-in-out,color .5s ease-in-out;

-moz-transition: background .5s ease-in-out,color .5s ease-in-out;

-ms-transition: background .5s ease-in-out,color .5s ease-in-out;

-o-transition: background .5s ease-in-out,color .5s ease-in-out;

transition: background .5s ease-in-out,color .5s ease-in-out;

}

a.transition1:hover {

background: #000;

color: #FFF;

}

transition: all .5s ease-in-out;

img.transform1 {

border: 5px solid white;

box-shadow: 5px 5px 5px rgba(0,0,0,.2);

transform: rotate(5deg);

}

img.transform2 {

border: 5px solid white;

box-shadow: 5px 5px 5px rgba(0,0,0,.2);

transform: skew(10deg) scale(1.1,1.1) rotate(-5deg)

translate(10px, 20px);

}

-webkit-transform:

-moz-transform:

-ms-transform:

-o-transform:

@keyframes animate {

0% {

width: 300px;

height: 100px;

}

25% {

width: 600px;

background: black;

color: #FFF;

height: 200px;

}

100% {

width: 300px;

height: 100px;

}

}

@-webkit-keyframes animate {...}

@-moz-keyframes animate {...}

@-ms-keyframes animate {...}

@-o-keyframes animate {...}

div.animate1 {

width: 300px;

height: 100px;

background: #FFF;

padding: .5em;

}

div.animate1:hover {

-webkit-animation: animate 3s infinite;

-moz-animation: animate 3s infinite;

-ms-animation: animate 3s infinite;

-o-animation: animate 3s infinite;

animation: animate 3s infinite;

}

table {

border-collapse: collapse;

width: 400px;

}

table th {

background: #555;

color: #FFF;

padding: 5px;

border: 1px solid #AAA;

text-align: left;

font-weight: bold;

}

table td {

border: 1px solid #CCC;

padding: 5px;

}

table tr:nth-child(odd) {

background: #DDD;

}


background: #DDD;

}

table tr:nth-child(5) {

background: #fcf79f;

}


background: #DDD;

}



}

table tr:first-of-type {

background: #9fecf9;

}


background: #DDD;

}



}

table tr:first-of-type {


}

table tr:last-child {


}

Useful websites

Because we're not encyclopedias

CSS3.info

HTML5please.com

CSS3please.com

colorzilla.com/gradient-editor

w3.org/TR/selectors

Questions?

Don't let it take over

CSS3

Use it today, but be careful where to use it

Put users first!

Progressively enhance!

Robin Poort (@rhcpoort)

ThemePartner (@theme_partner)

Time up

Learn to Love CSS3 [English]

Technology

Transcript of Learn to Love CSS3 [English]