Leuke lijsten maken met html en css

Een lijst die op een opvallende manier is vormgegeven, geeft een saaie tekstpagina direct meer karakter!

Bestaan je webpagina’s voornamelijk uit tekst, en dreigen ze daardoor wat saai te worden, dan kun je ze verlevendigen door eventuele lijsten binnen die tekst een wat sprekender layout te geven. Op deze pagina heb ik vier voorbeelden staan van gewone lijsten, die eruitspringen door een bijzonder opsommingsteken, een heldere kleur, opvallende vorm, of een afwijkend lettertype.

Ongenummerde lijst, met bijzondere opsommingstekens

Het opsommingsteken uit de lijst hieronder is geen plaatje, maar een letter uit een speciaal font. Het font dat ik hiervoor heb gebruikt, is het Pointers font. Met behulp van de instructies over het gebruik van bijzondere lettertypes heb ik dit font omgezet in de vereiste bestandsformaten, deze geüpload naar mijn server, en mijn stylesheet aangepast, zodat de browsers de lettertype-bestanden kunnen vinden.

Ongenummerde lijst, met een randje links

De tweede lijst is een ongenummerde lijst, met een grijze achtergrondkleur voor de verschillende list items, en een rood blokje aan de linkerkant. Dat blokje is gewoon een brede border en de tekst heeft wat diepte gekregen doordat er een text-shadow aan toe is gevoegd.

Genummerde lijst, met getallen in een afwijkende kleur

De lijst hieronder is een genummerde lijst. De cijfers uit de opsomming hebben een afwijkende kleur gekregen, doordat ik de teksten binnen de list items tussen paragraaf-tags heb gezet. De paragrafen (de teksten van deze lijst dus) kunnen zo andere een andere opmaak krijgen dan de nummers. In dit voorbeeld hebben ze een andere kleur, een ander lettertype en een andere lettergrootte gekregen. Het streepje is weer niet meer dan een border van de paragraaf.

Genummerde lijst met letters én cijfers

De laatste lijst heeft een opsomming die bestaat uit letters én cijfers. Deze lijst is op een ongebruikelijke manier gemaakt: de onderdelen staan namelijk niet tussen lijst-tags, maar gewoon tussen paragraaf-tags. De oplopende cijfers zijn gegenereerd met de css-eigenschappen counter-reset en counter-increment.