Cascading Style Sheets/Nieuw in CSS3

CSS3 biedt verschillende nieuwe mogelijkheden.

@font-face

Vanaf CSS3 is er de mogelijkheid om zelf een lettertype mee te sturen (zie Cascading Style Sheets/Tekstopmaak).

meerdere backgrounds

Vanaf CSS3 kunnen meerdere achtergrondafbeeldingen gebruikt worden (zie Cascading Style Sheets/Appendices/Properties/background-image).

border-radius

Met 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

Box-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

Met 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

Met 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

2D 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);
}