Cascading Style Sheets/Nieuw in CSS3

Uit Wikibooks
Naar navigatie springen Naar zoeken springen

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.

HTML-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.

HTML-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.

HTML-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)

HTML-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.

HTML-code: Voorbeeld van transform

nav ul li {
  background-color: #93c;
}
nav ul li:hover {
  transform: skew(5deg);
}
Informatie afkomstig van http://nl.wikibooks.org Wikibooks NL.
Wikibooks NL is onderdeel van de wikimediafoundation.