Learn to Love CSS3 [English]

CSS3

Robin Poort (@rhcpoort)
CEO & co-founder ThemePartner (@theme_partner)
J and Beyond, Bad Nauheim, may 2012

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://upload.wikimedia.org/wikipedia/commons/5/54/H%C3%A5kon_Wium_Lie.jpg
Source: http://www.w3c.de/Events/2006/images/PrintSymposium/slides/_DSC0209.JPG

CSS1 in development

h1.font.size = 24pt 100%

40%
font.family = times
h1.font.family = helvetica 100%

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

CSS3 mentioned for the first time

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!

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 { @-webkit-keyframes animate {...}
0% { @-moz-keyframes animate {...}
width: 300px; @-ms-keyframes animate {...}
height: 100px; @-o-keyframes animate {...}
}
25% {
width: 600px;
background: black;
color: #FFF;
height: 200px;
}
100% {
width: 300px;
height: 100px;
}
}

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

Use it today, but be Progressively enhance!
careful where to use it

CSS3

Don't let it take
Put users first!
over

Time up

Robin Poort (@rhcpoort)
ThemePartner (@theme_partner)

Learn to Love CSS3 [English]

More Related Content

What's hot (14)

Viewers also liked (7)

Similar to Learn to Love CSS3 [English] (20)

More from ThemePartner (14)

Recently uploaded (20)

Learn to Love CSS3 [English]

Editor's Notes