House-of-Training

Boxeigenschappen vormgeven met CSS3 biedt heel veel mogelijkheden!

Met de komst van CSS3 zijn er veel meer mogelijkheden voor het vormgeven van de box bijgekomen.
Je kunt nu meerdere achtergrondafbeeldingen verbinden aan een element. Je kunt eenvoudig verlopen toepassen, slagschaduwen maken, transparanties toepassen en afgeronde hoeken maken.

Voorheen moest de ontwerper vaak gebruik maken van afbeeldingen voor het creëren van bijzondere vormgeving en effecten. Deze kun je nu eenvoudigweg beschrijven in een CSS-stijl.

Achtergrondafbeeldingen plaatsen.

Elk element, zowel een inline als een blockelement kun je voorzien van een of meerdere achtergrondafbeeldingen. De achtergrondafbeelding die als laatste wordt ingelezen door de browser ligt het meest bovenop.

Je kunt voor de eigenschap "background" de volgende waarden bepalen en als je de shorthand-notation gebruikt houd je deze volgorde aan:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
Meer informatie

CSS3 Borders

Met CSS3 kun je de box afgeronde hoeken geven, zelfs een box tot een cirkel omzetten. Je kunt een slagschaduw toevoegen aan de box of een afbeelding gebruiken voor het maken van een kaderrand.

Je kunt voor de propertie "border" de volgende waarden bepalen:

  • border-radius
  • box-shadow
  • border-image

De border radius kun je opgeven in pixels of em's maar ook in procenten. Zodra je een afronding opgeeft in procenten dan kan dit een vreemd resultaat opleveren op het moment dat het kader niet perfect vierkant is. Het percentage wordt namelijk apart toegepast op de hoogte en breedte van het kader.

Meer informatie