Cascading Style Sheets/Nieuw in CSS3
CSS3 biedt verschillende nieuwe mogelijkheden.
@font-face
bewerkenVanaf CSS3 is er de mogelijkheid om zelf een lettertype mee te sturen (zie Cascading Style Sheets/Tekstopmaak).
meerdere backgrounds
bewerkenVanaf CSS3 kunnen meerdere achtergrondafbeeldingen gebruikt worden (zie Cascading Style Sheets/Appendices/Properties/background-image).
border-radius
bewerkenMet border-radius kan je vanaf CSS3 hoeken van objecten afronden, maar ook ellipsen en tekstballonnen maken.
CSS-code: Voorbeeld van border-radius
aside {
border-radius: 10px;
}
box-shadow
bewerkenBox-shadow maakt het mogelijk om kaders en gradiënten te maken, zowel binnen als buiten het object te maken. De eerste waarde geeft de verschuiving van de schaduw over de X-as, de tweede over de Y-as, de derde geeft aan hoe scherp de overgang moet zijn.
CSS-code: Voorbeeld van box-shadow
aside {
box-shadow: -5px 5px 1px #999;
}
opacity
bewerkenMet opacity kan je de ondoorzichtigheidsratio van een figuur bepalen. Waarde 1 betekent ondoorzichtig, 0.5 is half doorzichtig, 0 is volledig doorzichtig.
CSS-code: Voorbeeld van opacity
section article figure img {
opacity: 0.5;
}
transition
bewerkenMet transition kan je overgangen definiëren. Telkens worden meegegeven:
- de eigenschap die verandert (vb. background)
- het interval tussen de veranderingen (vb. 0.3s)
- de tijdspanne waarin dat gebeurt (vb. ease)
CSS-code: Voorbeeld van transition
nav ul li {
background-color: #93c;
transition: background-color 2s ease-out;
}
nav ul li:hover {
background-color: #690;
}
transform
bewerken2D transform kan je gebruiken om grootte, plaats, oriëntatie en vorm van een object te veranderen:
- met scale verander je de grootte: positieve waarden tussen 0 en 1 vergroten, negatieve waarden verkleinen, een (optionele) komma geeft aan dat de X- en Y-inschaling verschillend zijn (vb. scale(3,0.5))
- translate laat het object verschuiven in de opgegeven X- en Y-richting (vb. translate(10px,-20px))
- rotate laat het object draaien (vb. rotate(90deg))
- skew laat het object scheef vervormen (vb. skew(10deg,40deg))
Indien er meerdere transform staan, dan worden zij in volgorde uitgevoerd.
CSS-code: Voorbeeld van transform
nav ul li {
background-color: #93c;
}
nav ul li:hover {
transform: skew(5deg);
}