Wat is nieuw in CSS3?
CSS3 is de opvolger van …. juist ja: CSS2. Het biedt enkele erg interessante nieuwigheden, maaar… deze worden enkel door de nieuwste browsers ondersteund: Internet Explorer 9, Firefox 4, enz.
Wat kan je doen via CSS3? Je kan objecten draaien, een kleur geven, afgeronde hoeken, gradienten (zonder figuren), tekst een schaduw geven, meerdere achtergrondfiguren, transparantie toevoegen, elk lettertype gebruiken enz. Toch wel heel coole items voor een webdesigner, die je nu meestal moest oplossen via figuren.
- Border-color: maakt het mogelijk om aan elke afzonderlijke border een eigen kleur mee te geven en het is zelfs mogelijk om een gradient aan de border mee te geven.
- Border-image: hiermee kun je voor elke border een aparte afbeelding meegeven.
- Border-radius: dit vind ik persoonlijk een van de leukste nieuwe functies. Hiermee wordt het mogelijk om ronde hoeken te maken, zonder dat je gebruik hoeft te maken van afbeeldingen.
- Text-shadow: de woorden zeggen het al, geef schaduw mee aan je tekst.
- Opacity: hiermee kun je kleuren doorzichtig maken. Een functie die het web een totaal ander beeld zal gaan geven.
- Multiple backgrounds: maakt het mogelijk om aan een element meerdere achtergronden toe te voegen.
- @font-face: met deze nieuwe functie zal je fonts kunnen gebruiken op je website die niet op andermans computer geïnstalleerd hoeven te zijn.
Een voorbeeld in de praktijk:
We maken in een lege HTML-pagina een div aan:
<div id="kader"> </div>
We plaatsen er wat tekst in:
<div id="kader">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque tincidunt dui, id luctus eros dignissim sit amet. Ut scelerisque vehicula tortor, pretium feugiat velit molestie at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In nec facilisis augue. Vivamus sed nunc nulla. Donec scelerisque, neque non pharetra viverra, risus enim condimentum magna, in vulputate leo sem nec libero.</div>
Dit geeft nog geen resultaat in de browser, want een div is van nature uit doorzichtig en je ziet geen rand.
We geven dus een achtergrondkleur en een grootte. Dit is nog steeds CSS2 – niets nieuws dus.
We plaatsen tussen de <head>-tags:
<style type="text/css">
#kader {
background-color: #9C0;
height: 200px;
width: 400px;
border: 1px solid #000;
}
</style>
Resultaat:
Nu gaan we wat nieuwe snufjes uit CSS3 toevoegen!
border-radius: 15px;
Resultaat (in Firefox 4):
text-shadow: 2px 2px 2px #000;
Resultaat (in Firefox 4):
opacity: 0.6;
Resultaat (in Firefox 4):
De achtergrondkleur wordt 40% doorzichtig en daardoor lichter. Je ziet de kleur dus nog voor 60% (0.6). Je kan de transparantie beter ervaren, als je een achtergrondfiguur instelt voor de pagina, of een gradient. Dit doen we nu.
We maken nu een kleurverloop (gradient). Dit is wat moeilijker, als je de kleuren niet kent. Hiervoor zijn er sites, die je helpen met een color-picker: http://gradients.glrzad.com
body{
background-image: -moz-linear-gradient(
center bottom,
rgb(252,186,124) 26%,
rgb(158,65,11) 100%
);
Resultaat (in Firefox 4):
@font-face { font-family: Hawaii Killer; src: local('Hawaii_Killer.ttf');}
En in p of #kader:
font-family: Hawaii Killer;
Download hier het lettertype Hawaii Killer en plaats het in de map bij de webpagina en css:
http://1001freefonts.com/font/HawaiiKiller.zip
Resultaat (in Firefox 4):
box-shadow: 10px 10px 5px #888;
Resultaat (in Firefox 4):
Let op dat je dit alles test in een browser die dit ondersteunt (bv Firefox4). Anders zie je er gewoon niets van:
Je kan Firefox4 gratis downloaden: http://www.mozilla.com/nl/firefox/
Zo, nu kan je ook al weer een mondje CSS3 meepraten!
Geïnteresseerd in HTML en CSS? Bekijk onze cursus!
Lukt het bij jou niet?
Hier nog de volledige css-code:
body{
background-image: -moz-linear-gradient(
center bottom,
rgb(252,186,124) 26%,
rgb(158,65,11) 100%
);
}
@font-face { font-family: Hawaii Killer; src: local('Hawaii_Killer.ttf');}
#kader {
background-color: #9C0;
height: 200px;
width: 400px;
border: 1px solid #000;
border-radius: 15px;
text-shadow: 2px 2px 2px #000;
opacity: 0.6;
font-family: Hawaii Killer;
box-shadow: 10px 10px 5px #888;
}
En de volledige HTML-code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body{
background-image: -moz-linear-gradient(
center bottom,
rgb(252,186,124) 26%,
rgb(158,65,11) 100%
);
}
@font-face { font-family: Hawaii Killer; src: local('Hawaii_Killer.ttf');}
#kader {
background-color: #9C0;
height: 200px;
width: 400px;
border: 1px solid #000;
border-radius: 15px;
text-shadow: 2px 2px 2px #000;
opacity: 0.6;
font-family: Hawaii Killer;
box-shadow: 10px 10px 5px #888;
}
</style>
</head>
<body>
<div id="kader">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque tincidunt dui, id luctus eros dignissim sit amet. Ut scelerisque vehicula tortor, pretium feugiat velit molestie at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In nec facilisis augue. Vivamus sed nunc nulla. Donec scelerisque, neque non pharetra viverra, risus enim condimentum magna, in vulputate leo sem nec libero.</div>
</body>
</html>
