css3 (dutch)
DESCRIPTION
Benieuwd waar die hele CSS3 hype over gaat? Bezoek deze presentatie om te leren dat het niet slechts een hype is. CSS3 voegt krachtige nieuwe mogelijkheden toe aan de set van gereedschappen die een front-end ontwikkelaar heeft om mooie (en functionele) sites te bouwen.Leer meer over verschillende van de beste nieuwe opties die CSS3 ons te bieden heeft, het huidige niveau van ondersteuning door de internet browsers voor CSS3 en een verzameling an bronnen om jezelf up-to-date te houden en nog meer te leren.TRANSCRIPT
Robin Poort (@rhcpoort)
CEO & Mede-oprichter ThemePartner (@theme_partner)
JD12NL, Zeist, april 2012
CSS3
1993
Robert Raisch stelde "named Stylesheets" voor
Source: http://ksi.cpsc.ucalgary.ca/archives/WWW-TALK/www-talk-1993q2.messages/443.html
1994
Håkon Wium Lie & Bert Bos bedenken 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 ontwikkeling
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 door W3C
1998
CSS2 recommended door W3C
1999
CSS3 voor het eerst genoemd
1999?!
CSS3 gebruiken
Waar & wanneer?
Niet op kritieke elementen
Niet op huisstijl, vormgeving & gebruikersvriendelijkheid
Progressively enhance!
Website moet werken in oudere browsers
Performance problemen
Je website dient snel te zijn!
Nu wat voorbeelden!
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);
}
Zet de standaard kleur voor browsers zonder rgba support altijd vóór de rgba waarde
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%);
}
Begin altijd met een kleur voor oudere 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(zelfde als webkit)
background: o-radial-gradient(zelfde als 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(zelfde als webkit)
background-image: o-radial-gradient(zelfde als webkit)
background-image: radial-gradient(center, ellipse cover,
rgba(24,60,122,1) 0%,rgba(132,182,244,0.5) 100%);
}
Een verloop naar 0% opacity met een achtergrond kleur betekent 1 keer aanpassen
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;
}
Door background-color als laatste te definiëren verander je alleen de kleur.
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} maakt de tekst weer zichtbaar.
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;
}
Handige websites
Je hoeft niet alles te onthouden
CSS3.info
HTML5please.com
HTML5boilerplate.com
CSS3please.com
colorzilla.com/gradient-editor
w3.org/TR/selectors
Vragen?
Maak er geen kermis van!
CSS3
Gebruik het vandaag, maar pas op waar!
Gebruikers eerst!
Progressively enhance!
Robin Poort (@rhcpoort)
ThemePartner (@theme_partner)
Time up