css3 (dutch)

Robin Poort (@rhcpoort)

CEO & Mede-oprichter ThemePartner (@theme_partner)

JD12NL, Zeist, april 2012

CSS3

Robert Raisch stelde "named Stylesheets" voor

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

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

CSS1 recommended door W3C

CSS2 recommended door W3C

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;


}

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%);

}

Begin altijd met een kleur voor oudere 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(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.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(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;

}


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 {


}

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

css3 (dutch)

Documents

px webkit

px rgba0

px height

px black

px rgba255

px white

px solid bordercolor

px fontsize