Cascading Style Sheets/Nieuw in CSS3

CSS

CSS toepassen
  1. Inline CSS
  2. Embedded CSS
  3. Linked CSS
Opmaak
  1. Tekstopmaak
  2. Alineaopmaak
  3. Kleur
  4. Borders
  5. Nieuw in CSS3
Appendices
  1. Properties
  2. Zie ook

CSS3 biedt verschillende nieuwe mogelijkheden.

@font-face

bewerken

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

meerdere backgrounds

bewerken

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

border-radius

bewerken

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

bewerken

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

bewerken

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

bewerken

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

bewerken

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);
}
Informatie afkomstig van https://nl.wikibooks.org Wikibooks NL.
Wikibooks NL is onderdeel van de wikimediafoundation.