De Vrijes website Menu sluitenMenu openenNaar top gaan

Menu opties

CSS - Voorbeelden

Inhoud


CSS element: animation
  • met het gebruik van 'from' en 'to':
    xxxxxxx
  • met het gebruik van 'nn%':
    xxxxxxx
CSS element: background met de gradient attributen
  • met het attribuut: linear−gradient(red,yellow)
  • met het attribuut: linear−gradient(to bottom right,red,yellow)
  • met het attribuut: linear−gradient(45deg,red,yellow)
  • met het attribuut: radial−gradient(red, yellow, green);
  • met het attribuut: radial−gradient(circle,red, yellow, green);
  • met het attribuut: radial−gradient(closest−corner,red, yellow, green);
  • met het attribuut: radial−gradient(closest−side,red, yellow, green);
  • met het attribuut: radial−gradient(farthest−corner,red, yellow, green);
  • met het attribuut: radial−gradient(farthest−side,red, yellow, green);
  • met het attribuut: repeating−linear−gradient(red,yellow 25%,green 50%)
  • met het attribuut: repeating−radial−gradient(red,yellow 25%,green 50%)
CSS element: background−color
  • In de kleurnaam:
     aqua   black   blue   fuchsia   gray   green   lime   maroon   navy   olive   purple   red   silver   teal   white   yellow
  • In de hexadecimale waarde
  • In de RGB waarde
CSS element: background−image met background−repeat
  • met het attribuut: no−repeat
    xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx
  • met het attribuut: repeat
    xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx
  • met het attribuut: repeat−x
    xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx
  • met het attribuut: repeat−y
    xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx
CSS element: background−size met background−image
  • met het attribuut: auto
  • met het attribuut: contain
  • met het attribuut: cover
  • met het attribuut: 50%
  • met het attribuut: 50% 100%
CSS element: border−collapse met border−spacing
  • met het attribuut: collapse
    xxxxxxxxxxxxxx
    xxxxxxxxxxxxxx
  • met het attribuut: separate (zonder spacing)
    xxxxxxxxxxxxxx
    xxxxxxxxxxxxxx
  • met het attribuut: separate (met spacing)
    xxxxxxxxxxxxxx
    xxxxxxxxxxxxxx
CSS element: border−color
  • In de kleurnaam:
     aqua    black    blue    fuchsia    gray    green    lime    maroon    navy    olive    purple    red    silver    teal    white    yellow
  • In de hexadecimale waarde
  • In de RGB waarde
CSS element: border−image−…
  • origineel plaatje:
    Jan op de heide
  • zonder CSS element 'border−image−…'
    xxxxxxx
    xxxxxxx
    xxxxxxx
  • met het CSS elementen 'border−image−repeat: stretch' en 'border−image−slice: 10'
    xxxxxxx
    xxxxxxx
    xxxxxxx
  • met het CSS elementen 'border−image−repeat: stretch' en 'border−image−slice: 10%'
    xxxxxxx
    xxxxxxx
    xxxxxxx
  • met het CSS elementen 'border−image−repeat: stretch' en 'border−image−slice: 10%'
    xxxxxxx
    xxxxxxx
    xxxxxxx
  • met het CSS elementen 'border−image−repeat: repeat' en 'border−image−slice: 10%'
    xxxxxxx
    xxxxxxx
    xxxxxxx
  • met het CSS elementen 'border−image−repeat: stretch' en 'border−image−slice: fill'
    xxxxxxx
    xxxxxxx
    xxxxxxx
  • met het CSS elementen 'border−image−outset: 1em', 'border−image−repeat: stretch' en 'border−image−slice: 10%'

    xxxxxxx
    xxxxxxx
    xxxxxxx

CSS element: border−radius  xxxxxxx  
CSS element: border−style dashed    dotted    double    inset    groove    outset    ridge    solid
CSS element: border−width 1px    2px    3px    4px    5px    6px
 thin    medium    thick
CSS element: box−shadow
  • zonder het attribuut: inset
    xxxxxxx
  • met het attribuut: inset
    xxxxxxx
CSS element: box−sizing
  • met het attribuut: box−sizing: content−box (= default)
    box met de breedte van 50%
    box met de breedte van 50%
  • met het attribuut: box−sizing: border−box
    box met de breedte van 50%
    box met de breedte van 50%
CSS element: caption−side
  • met het attribuut: bottom
    zzzzzzz
    xxxxxxxxxxxxxx
    xxxxxxxxxxxxxx
  • met het attribuut: top
    zzzzzzz
    xxxxxxxxxxxxxx
    xxxxxxxxxxxxxx
CSS element: color
  • In de kleurnaam:
     aqua  black  blue  fuchsia  gray  green  lime  maroon  navy  olive  purple  red  silver  teal  white   yellow
  • In de hexadecimale waarde
  • In de RGB waarde
CSS element: column−count met column−gap, column−rule−color, column−rule−style en column−rule−width
xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx
CSS element: content
  • met het attribuut: attr(href)
  • zonder het attribuut: attr(href)
  • met de attributen: close−quote en open−quote
    xxxxxxx
  • met het attribuut: counter(ctr)
    xxxxxxxxxxxxxxxxxxxxx
CSS element: cursor auto  crosshair  default  e−resize  help  move  ne−resize  n−resize  nw−resize  pointer  progress  s−resize  se−resize  sw−resize  text  w−resize  wait
CSS element: direction
  • van links naar rechts
  • van rechts naar links
CSS element: display
  • met het attribuut: block
    xxxxxxxyyyyyyyzzzzzzz
  • met het attribuut: inline
    xxxxxxxyyyyyyyzzzzzzz
  • met het attribuut: list−item
    xxxxxxxyyyyyyyzzzzzzz
  • met het attribuut: none
    xxxxxxxyyyyyyyzzzzzzz
CSS elementen: flex, flex−basis, flex−grow en flex−shrink
  • Zonder flex−basis, flex−grow en flex−shrink:
    xxx1xxx
    xxx3xxx
    xxx1xxx
  • Met flex−basis, flex−grow en flex−shrink:
    xxx1xxx
    xxx3xxx
    xxx1xxx
CSS elementen: flex−direction
  • met het attribuut 'column':
    xxx1xxx
    xxx2xxx
    xxx3xxx
  • met het attribuut 'column-reverse':
    xxx1xxx
    xxx2xxx
    xxx3xxx
  • met het attribuut 'row':
    xxx1xxx
    xxx2xxx
    xxx3xxx
  • met het attribuut 'row-reverse':
    xxx1xxx
    xxx2xxx
    xxx3xxx
CSS elementen: flex−wrap
  • met het attribuut 'nowrap':
    xxx1xxx
    xxx2xxx
    xxx3xxx
  • met het attribuut 'wrap':
    xxx1xxx
    xxx2xxx
    xxx3xxx
  • met het attribuut 'wrap-reverse':
    xxx1xxx
    xxx2xxx
    xxx3xxx
CSS element: font−family
ArialPa's wijze lynx bezag vroom het fikse aquaduct. 1234567890
Comic Sans MSPa's wijze lynx bezag vroom het fikse aquaduct. 1234567890
Courier NewPa's wijze lynx bezag vroom het fikse aquaduct. 1234567890
Franklin GothicPa's wijze lynx bezag vroom het fikse aquaduct. 1234567890
GeorgiaPa's wijze lynx bezag vroom het fikse aquaduct. 1234567890
HelveticaPa's wijze lynx bezag vroom het fikse aquaduct. 1234567890
ImpactPa's wijze lynx bezag vroom het fikse aquaduct. 1234567890
Lucida ConsolePa's wijze lynx bezag vroom het fikse aquaduct. 1234567890
Microsoft Sans SerifPa's wijze lynx bezag vroom het fikse aquaduct. 1234567890
MS Sans SerifPa's wijze lynx bezag vroom het fikse aquaduct. 1234567890
Palatino LinotypePa's wijze lynx bezag vroom het fikse aquaduct. 1234567890
sans-serifPa's wijze lynx bezag vroom het fikse aquaduct. 1234567890
scriptPa's wijze lynx bezag vroom het fikse aquaduct. 1234567890
serifPa's wijze lynx bezag vroom het fikse aquaduct. 1234567890
SylfaenPa's wijze lynx bezag vroom het fikse aquaduct. 1234567890
TahomaPa's wijze lynx bezag vroom het fikse aquaduct. 1234567890
Times New RomanPa's wijze lynx bezag vroom het fikse aquaduct. 1234567890
Trebuchet MSPa's wijze lynx bezag vroom het fikse aquaduct. 1234567890
VerdanaPa's wijze lynx bezag vroom het fikse aquaduct. 1234567890

Zie de map 'C:\Windows\Fonts' voor alle beschikbare fonts

CSS element: font−sizexx−small x−small small medium large x−large xx−large
smaller initial larger
1.00em 1.25em 1.50em 1.75em 2.00em
CSS element: font−styleitalic normal oblique
CSS element: font−variantnormal small−caps
CSS element: font−weight100 200 300 400 500 600 700 800 900 bold bolder initial lighter normal
CSS element: letter−spacing
  • 0.00em
  • 0.25em
  • 0.50em
  • 0.75em
  • 1.00em
CSS element: line−height
  • 1.00em
  • 2.00em
  • 3.00em
CSS element: list−style−image
  • xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx
  • xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx
  • xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx
CSS element: list−style−position
  • met het attribuut: inside
    1. xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx
    2. xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx
    3. xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx
  • met het attribuut: outside
    1. xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx
    2. xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx
    3. xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx
CSS element: list−style−type
  • met het attribuut: circle
    • xxxxxxx
    • xxxxxxx
    • xxxxxxx
  • met het attribuut: decimal
    • xxxxxxx
    • xxxxxxx
    • xxxxxxx
  • met het attribuut: disc
    • xxxxxxx
    • xxxxxxx
    • xxxxxxx
  • met het attribuut: lower−alpha
    • xxxxxxx
    • xxxxxxx
    • xxxxxxx
  • met het attribuut: lower−roman
    • xxxxxxx
    • xxxxxxx
    • xxxxxxx
  • met het attribuut: none
    • xxxxxxx
    • xxxxxxx
    • xxxxxxx
  • met het attribuut: square
    • xxxxxxx
    • xxxxxxx
    • xxxxxxx
  • met het attribuut: upper−alpha
    • xxxxxxx
    • xxxxxxx
    • xxxxxxx
  • upper−roman
    • xxxxxxx
    • xxxxxxx
    • xxxxxxx
CSS element: opacityxxxxxxx
CSS element: order
  • zonder volgnummers:
    xxxxxxxyyyyyyyzzzzzzz
  • met volgnummers in de omgekeerde:
    xxxxxxxyyyyyyyzzzzzzz
CSS element: outliner−color, outliner−style en outliner−widthxxxxxxx
CSS element: overflow
  • met het attribuut: auto
    xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx
  • met het attribuut: hidden
    xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx
  • met het attribuut: scroll
    xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx
  • met het attribuut: visible
    xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx xxxxxxx

 

 

CSS element: quotes met het attribuut: "[" "]"   "{" "}"   "«" "»"
… xxxxxxx yyyyyyy zzzzzzz zzzzzzz zzzzzzz yyyyyyy xxxxxxx …
CSS element: text−align
  • met het attribuut: center
    xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx
  • met het attribuut: justify
    xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx
  • met het attribuut: left
    xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx
  • met het attribuut: right
    xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx
CSS element: text−decoration line−through  none  overline  underline
CSS element: text−indent
  • -2em: xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx
  • -1em: xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx
  • 0em: xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx
  • 1em: xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx
  • 2em: xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx
CSS elementen 'overflow' en 'text−overflow'
  • zonder CSS elementen 'overflow' en 'text−overflow'
    xxxxxxx yyyyyyy zzzzzzz
  • met het attribuut 'clip'
    xxxxxxx yyyyyyy zzzzzzz
  • met het attribuut 'ellipsis'
    xxxxxxx yyyyyyy zzzzzzz
CSS element: text−shadowxxxxxxx
CSS element: text−transform capitalize  lowercase  none  uppercase
CSS element: transform met/zonder transform−origin
  • met het CSS element transform−origin: 100% 200% 0:




    none   rotate(45deg)   scale(1,2)       skew(45deg,-10deg)   translate(1em,-2em)


  • zonder het CSS element transform−origin (= 50% 50% 0):


    none   rotate(45deg)   scale(1,2)       skew(45deg,-10deg)   translate(1em,-2em)


CSS element: transition
  • met het CSS element: transition−timing−function: cubic−bezier(0.1,0.9,0.1,1)
    xxxxxxx
  • met het CSS element: transition−timing−function: ease (= cubic-bezier(0.25,0.1,0.25,1))
    xxxxxxx
  • met het CSS element: transition−timing−function: ease−in (= cubic-bezier(0.42,0,1,1))
    xxxxxxx
  • met het CSS element: transition−timing−function: ease−in−out (= cubic-bezier(0.42,0,0.58,1))
    xxxxxxx
  • met het CSS element: transition−timing−function: ease−out (= cubic-bezier(0,0,0.58,1))
    xxxxxxx
  • met het CSS element: transition−timing−function: linear (= cubic-bezier(0,0,1,1))
    xxxxxxx
CSS element: visibility
  • voor elk element behalve bij een tabel:
    • met het attribuut: hidden
      xxxxxxx xxxxxxx xxxxxxx
    • met het attribuut: visible
      xxxxxxx xxxxxxx xxxxxxx
  • alléén voor een tabel:
    • met het attribuut: collapse
      xxxxxxxxxxxxxx
      xxxxxxxxxxxxxx
    • met het attribuut: hidden
      xxxxxxxxxxxxxx
      xxxxxxxxxxxxxx
    • met het attribuut: visible
      xxxxxxxxxxxxxx
      xxxxxxxxxxxxxx
CSS element: white−space
  • met het attribuut: normal
    xxxxxxx xxxxxxx xxxxxxx
  • met het attribuut: nowrap
    xxxxxxx xxxxxxx xxxxxxx
CSS element: word−spacing
  • 0em: xxx xxx xxx
  • 1em: xxx xxx xxx
  • 2em: xxx xxx xxx
  • 3em: xxx xxx xxx
CSS element: z−index
xxx1xxx
xxx2xxx
xxx3xxx
CSS pseudo−class:   :active | :hover | :link | :visited
  • met het attribuut: link: witte achtergrond met rode letters
  • met het attribuut: hover: gele achtergrond met onveranderde letterkleur.
  • met het attribuut: visited: witte achtergrond met blauwe letters
  • met het attribuut: active: blauwe achtergrond met witte letters
CSS pseudo−class:   :checked
xxxxxxx
xxxxxxx
xxxxxxx
CSS pseudo−class:   :disabled en :enabled
xxxxxxx:
xxxxxxx:
xxxxxxx:
CSS pseudo−class:   :empty
  • xxxxxxx
  • xxxxxxx
CSS pseudo−class:   :first−child
  • xxxxxxx
  • xxxxxxx
  • xxxxxxx
CSS pseudo−class:   :first−of−type
  • xxxxxxx
  • xxxxxxx
  • xxxxxxx
CSS pseudo−class:   :focus
xxxxxxx:
xxxxxxx:
xxxxxxx:
CSS pseudo−class:   :in−range
Getal tussen 12 en 18 inclusief:
CSS pseudo−class:   :invalid
E-mailadres:
CSS pseudo−class:   :lang
  • xxxxxxx xxxxxxx xxxxxxx
  • xxxxxxx xxxxxxx xxxxxxx
  • xxxxxxx xxxxxxx xxxxxxx
CSS pseudo−class:   :last−child
  • xxxxxxx
  • xxxxxxx
  • xxxxxxx
CSS pseudo−class:   :last−of−type
  • xxxxxxx
  • xxxxxxx
  • xxxxxxx
CSS pseudo−class:   :not(p)

xxx

xxx
CSS pseudo−class:   :nth−child(2)
  • xxxxxxx
  • xxxxxxx
  • xxxxxxx
  • xxxxxxx
  • xxxxxxx
CSS pseudo−class:   :nth−last−child(2)
  • xxxxxxx
  • xxxxxxx
  • xxxxxxx
  • xxxxxxx
  • xxxxxxx
CSS pseudo−class:   :nth−last−of−type(2)
  • xxxxxxx
  • xxxxxxx
  • xxxxxxx
  • xxxxxxx
  • xxxxxxx
CSS pseudo−class:   :nth−of−type(2)
  • xxxxxxx
  • xxxxxxx
  • xxxxxxx
  • xxxxxxx
  • xxxxxxx
CSS pseudo−class:   :only−child
  • xxxxxxx
  • ppppppp
  • ppppppp xxxxxxx ppppppp
CSS pseudo−class:   :only−of−type
  • xxxxxxx
  • ppppppp
  • ppppppp xxxxxxx ppppppp
CSS pseudo−class:   :optional
CSS pseudo−class:   :out−of−range
Getal niet tussen 12 en 18 inclusief:
CSS pseudo−class:   :read−only
CSS pseudo−class:   :read−write
CSS pseudo−class:   :required
CSS pseudo−class:   :valid
E-mailadres:
CSS pseudo−element:   ::after
  • xxxxxxx xxxxxxx xxxxxxx
  • xxxxxxx xxxxxxx xxxxxxx
  • xxxxxxx xxxxxxx xxxxxxx
CSS pseudo−element:   ::before
  • xxxxxxx xxxxxxx xxxxxxx
  • xxxxxxx xxxxxxx xxxxxxx
  • xxxxxxx xxxxxxx xxxxxxx
CSS pseudo−element:   ::first−letter
xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx
CSS pseudo−element:   ::first−line
xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx
CSS pseudo−element:   ::selection
xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx
CSS regel-element: @font−faceHet Nederlandse handalfabet:
abcdefghijklmnopqrstuvwxyz
0123456789
+-*/=
CSS regel-element: @supportsDe functie '@supports' wordt door deze browser nietwel ondersteund.