CSS3 eigenschappen

26 november 2018
Terug naar artikelen

Navigeer naar een specifieke categorie

Hieronder staan alle mogelijke CSS3 eigenschappen

Animatie/Animation

Eigenschap Beschrijving
animation keyframe-based animatie name | duration | timing-function | delay | iteration-count | direction | fill-mode | play-state
animation-delay bevat de waarde wanneer de animatie moet beginnen. .5s betekend dat de animatie een vertraging heeft van een halve seconde. time
animation-direction beschrijft hoe de animatie zich moet afspelen; normal | reverse | alternate | alternate-reverse
animation-duration beschrijft hoelang de animatie nodig heeft om volledig af te spelen. time
animation-fill-mode beschrijft hoe de animatie de stijl moet aannemen voordat of nadat de animatie klaar is met afspelen; none | forwards | backwards | both
animation-iteration-count beschrijft hoevaak de animatie opnieuw afgespeeld moet worden. -1 als waarde betekent onneidig. number | infinite (-1)
animation-name hier geef je je animatie een naam, zodat je binnen de keyframes functionaliteit de animatie kunt aanroepen. keyframe-name | none
animation-play-state beschrijft wat de status van de animatie is; running | paused
animation-timing-function hier geef je aan hoe de animatie zich gedurende de lengte afspeelt: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n)

Achtergrond/Background

Eigenschap Beschrijving
background hierin kan je alle onderstaande eigenschappen over een achtergrond-element in één regel code samenvatten. image | position/size | repeat | attachment | origin | clip | color
background-attachment beschrijft of de achtergrond afbeelding vast staat of mee kan scrollen. scroll | fixed
background-clip beschrijft de mate waarop de achtergrond onder de border door komt of niet. border-box | padding-box | content-box
background-color beschrijft de achtergrond kleur voor een element color | transparent
background-image beschrijft de achtergrond afbeelding voor een element url | none
background-origin beschrijft het positionerings oppervlak van de achtergrond. border-box | padding-box | content-box
background-position beschrijft de positie van de achtergrond afbeelding. percentage | length | left | center | right (1 of 2 van deze eigenschappen)
background-repeat beschrijft of de achtergrond afbeelding herhaalt zal worden of enkel 1x weergeven is. repeat | repeat-x | repeat-y | no-repeat
background-size beschrijft de grootte van de achtergrond afbeelding. length | percentage | auto | cover | contain

Border

Eigenschap Beschrijving
border beschrijft de breedte, stijl en kleur van een border voor alle 4 de zijden van een element.border-width | border-style | border-color
border-bottom beschrijft de breedte, stijl en kleur van de onderkant van een element border-width | border-style | border-color
border-bottom-color beschrijft de kleur van de onderkant van een elementcolor | transparent
border-bottom-left-radius beschrijft de waarde van de ronde hoek van de linker-onderkant van een elementlength | percentage (1 of 2 eigenschappen)
border-bottom-right-radius beschrijft de waarde van de ronde hoek van de rechter-onderkant van een elementlength | percentage (1 of 2 eigenschappen)
border-bottom-style beschrijft de stijl van de onderkant van een elementnone | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
border-bottom-width beschrijft de breedte van de onderkant van een elementthin | medium | thick
border-color beschrijft de kleur voor alle 4 de zijden van een element. color | transparent (1 tot 4 eigenschappen)

  • 1 eigenschap; alle zijden
  • 2 eigenschappen; eerste waarde is voor de boven-en onderkant. Tweede waarde is voor de rechter-en linkerkant.
  • 3 eigenschappen; eerste waarde is voor de bovenkant, tweede waarde is voor de rechter en linkerkant en derde waarde is voor de onderkant.
  • 4 eigenschappen; elke zijde een andere kleur in volgorde van bovenkant, rechts, onderkant en links.
border-image beschrijft hoe een afbeelding neergezet moet worden gekeken naar de stijl van de border.source | slice | width | outset | repeat
border-image-outset beschrijft hoe ver de ruimte van de afbeelding buiten de border-box mag komen.length | number
border-image-repeat stretch | repeat | round | space (1 of 2 eigenschappen)
border-image-slice number | percentage (1 tot 4 eigenschappen)
border-image-source beschrijft de afbeelding die gebruikt moet worden voor de border, in plaats van de border-stylenone | image
border-image-width beschrijft de breedte van de borderlength | percentage | number | auto (1 tot 4 eigenschappen)
border-left beschrijft de breedte, stijl en kleur van de linker zijkant van een element.border-left-width | border-left-style | border-left-color
border-left-color beschrijft de kleur van de linker zijkant van een elementcolor | transparent
border-left-style beschrijft de stijl van de linker zijkant van een elementnone | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
border-left-width beschrijft de breedte van de linker zijkant van een elementthin | medium | thick | length
border-radius beschrijft de waarde van de ronde hoek van alle 4 de hoeken van een element.length | percentage

  • 1 eigenschap; alle zijden
  • 2 eigenschappen; eerste waarde is voor de boven-en onderkant. Tweede waarde is voor de rechter-en linkerkant.
  • 3 eigenschappen; eerste waarde is voor de bovenkant, tweede waarde is voor de rechter en linkerkant en derde waarde is voor de onderkant.
  • 4 eigenschappen; elke zijde een andere kleur in volgorde van bovenkant, rechts, onderkant en links.
border-right beschrijft de breedte, stijl en kleur van de rechter zijkant van een element.border-right-width | border-right-style | border-right-color
border-right-color beschrijft de kleur van de rechter zijkant van een element.color | transparent
border-right-style beschrijft de stijl van de rechter zijkant van een element.none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
border-right-width beschrijft de breedte van de rechter zijkant van een element.thin | medium | thick | length
border-style beschrijft de stijl van alle 4 de kanten van een elementnone | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
border-top beschrijft de breedte, stijl en kleur van de bovenkant van een element.border-top-width | border-top-style | border-top-color
border-top-color beschrijft de kleur van de bovenkant van een element.color | transparent
border-top-left-radius beschrijft de waarde van de ronde hoek van de linker-bovenkant van een elementlength | percentage (1 of 2 eigenschappen)
border-top-right-radius beschrijft de waarde van de ronde hoek van de rechter-bovenkant van een elementlength | percentage (1 of 2 eigenschappen)
border-top-style beschrijft de stijl van de bovenkant van een elementnone | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
border-top-width beschrijft de breedte van de bovenkant van een elementthin | medium | thick | length
border-width beschrijft de breedte van alle 4 de kanten van een elementthin | medium | thick | length

Kleur/Color

Eigenschap Beschrijving
color beschrijft de kleur van de tekst van een elementcolor
opacity beschrijft de doorzichtigheid van een elementalphavalue (nummer tussen 0 en 1)

Dimensie/Dimension

Eigenschap Beschrijving
height beschrijft de hoogte van een elementlength | percentage | auto
max-height beschrijft de maximale hoogte van een elementlength | percentage | none
max-width beschrijft de maximale breedte van een elementlength | percentage | none
min-height beschrijft de minimale hoogte van een elementlength | percentage
min-width beschrijft de minimale breedte van een elementlength | percentage
width beschrijft de breedte van een elementlength | percentage | auto

Gegenereerde content/Generated Content

Eigenschap Beschrijving
content deze eigenschap bevat content die door het ::before of ::after pseudo-element kan worden gebruikt.normal | none | counter | string | url(url) | attr(attribute) | open-quote | close-quote | no-open-quote | no-close-quote
quotes
counter-reset
counter-increment

Flexbox layout

Eigenschap Beschrijving
align-content
align-items
align-self
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
justify-content
order

Font

Eigenschap Beschrijving
font
font-family
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight

Lijst/List

Eigenschap Beschrijving
list-style
list-style-image
list-style-position
list-style-type