Learn to Love CSS3 [English]
-
Upload
themepartner -
Category
Technology
-
view
107 -
download
1
description
Transcript of Learn to Love CSS3 [English]
Robin Poort (@rhcpoort)
CEO & co-founder ThemePartner (@theme_partner)
J and Beyond, Bad Nauheim, may 2012
CSS3
1993
Robert Raisch proposed "named Stylesheets"
Source: http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/www-talk-1993q2.messages/443.html
1994
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
1996
CSS1 recommended by the W3C
1998
CSS2 recommended by the W3C
1999
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;
background: rgba(255,255,255,.25);
}
div.rgba3 {
background: #1ebdbe;
background: rgba(30,189,190,.5);
}
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;
border-color: rgba(255,255,255,.5);
}
div.rgba3 {
background: url(seaguls.png);
border: 10px solid;
border-color: #black;
border-color: rgba(0,0,0,.5);
}
<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 class=”shadow2”>Lorem ipsum</p>
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 class=”shadow3”>Lorem ipsum</p>
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 class=”shadow2”>Lorem ipsum</div>
div.shadow2 {
background: #FFF;
text-align: center;
-webkit-box-shadow: ...;
-moz-box-shadow: ...;
box-shadow:
0 0 1px black,
0 0 15px white;
}
<div class=”shadow3”>Lorem ipsum</div>
div.shadow3 {
background: #FFF;
text-align: center;
-webkit-box-shadow: ...;
-moz-box-shadow: ...;
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 class=”radius2”>Lorem ipsum</div>
div.radius2 {
background: #FFF;
text-align: center;
width: 200px;
height: 200px;
font-size: 20px;
line-height: 200px;
-webkit-border-radius: ...;
-moz-border-radius: ...;
border-radius: 9999px;
}
<div class=”radius3”>Lorem ipsum</div>
div.radius3 {
background: #FFF;
text-align: center;
-webkit-border-radius: ...;
-moz-border-radius: ...;
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 class=”gradient2”></div>
div.gradient2 {
/* Basic color */
background-color: #183c7a;
/* Chrome, Safari4+ */
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 class=”gradient3”></div>
div.gradient3 {
/* Basic color */
background-color: red;
/* Chrome, Safari4+ */
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;
}
table tr:nth-child(odd) {
background: #DDD;
}
table tr:nth-child(5) {
background: #fcf79f;
}
table tr:nth-child(odd) {
background: #DDD;
}
table tr:nth-child(5) {
background: #fcf79f;
}
table tr:first-of-type {
background: #9fecf9;
}
table tr:nth-child(odd) {
background: #DDD;
}
table tr:nth-child(5) {
background: #fcf79f;
}
table tr:first-of-type {
background: #9fecf9;
}
table tr:last-child {
background: #9fecf9;
}
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