Tekst → Lijnen

Combinaties van lijnen en tekst, zoals de stippellijntjes (voorlooppunten) in een inhoudsopgave. Onderstrepen, overstrepen en doorstrepen van tekst.

Deze pagina zelf is volledig gemaakt met html en css. (Alleen voor iOS en Opera Mini is een minimieme hoeveelheid JavaScript gebruikt. In Opera Mini opent het menu anders niet, op iOS moet je anders twee keer een knop aanraken, voordat de link werkt.)

Bij openen van de pagina in kleinere vensters zie je knoppen met daarin kleine thumbnails van de voorbeelden, met daarnaast een beschrijving van het voorbeeld. De tekst die je nu leest staat onder die knoppen. Bij aanraking van 'Menu site openen' bovenin opent een menu, waarmee je andere pagina's e.d. op de site kunt bezoeken.

In iets bredere vensters zijn de knoppen en de daarin zittende thumbnails iets groter. De tekst die je nu leest, staat tussen de knoppen. In elke knop staat een doorzichtig vraagteken. Als je dat vraagteken aanraakt, erop klikt, de cursor eroverheen beweegt, of er met de Tab-toets naartoe gaat, opent een pop-up met een grotere afbeelding en een beschrijving van het voorbeeld. Deze beschrijving is hetzelfde als die in een kleiner venster, maar is dus weggewerkt in een pop-up.

Sluiten van de pop-up gaat door het aanraken van of klikken op de sluitknop die bij openen is verschenen, door de cursor buiten de pop-up te bewegen, of door de Tab-toets nogmaals in te drukken.

Als een pagina al is bezocht, staat in de bijbehorende knop een klein vinkje naast het vraagteken

Over de site

Alles op deze site kan vrij worden gebruikt. Je gebruikt het wel op eigen risico: als er ergens fouten in zitten, zijn de medewerkers van deze site daar niet verantwoordelijk voor en ook niet voor eventueel daardoor aangerichte schade in welke vorm dan ook.

Een link naar http://www.css-voorbeelden.nl is niet verplicht, maar wordt wel gewaardeerd. Hier is één uitzondering op: als je een volledig voorbeeld met uitleg en al verspreidt, is een link naar deze site wel verplicht. Bij die link moet je duidelijk vermelden dat de uitleg afkomstig is van www.css-voorbeelden.nl en dat daar altijd de nieuwste versie is te vinden. Dit voorkomt hopelijk het gebruik van verouderde versies.

Eventuele problemen worden steeds bij het voorbeeld zelf vermeld.

Alle voorbeelden zijn te downloaden als zip-bestand. De zip bevat de code van het werkende voorbeeld, inclusief de gebruikte plaatjes en dergelijke. De code van het gedownloade voorbeeld is vrijwel hetzelfde als de code op de site. (Er zitten wat kleine verschillen in, omdat bijvoorbeeld de navigatie van de site ontbreekt.)

Verder zit in de download een uitgebreide uitleg in pdf-formaat. Daarin wordt exact uitgelegd, waarom iets is gedaan, zoals het is gedaan. Als je het echt wilt begrijpen, ga dan vooral dingen veranderen, zodat je ziet wat het effect is. Ik kan hiervoor Firefox met de extensies Web Developer en Firebug aanbevelen. Er zijn nog veel meer handige extensies voor het maken van 'n site, maar dit zijn de twee uitgebreidste.

Extensies bij Firefox voor het maken van sites en voor surfen kun je vinden op de pagina met extensies.

De voorbeelden zijn bedoeld om te laten zien, wat de mogelijkheden van css zijn. Je kunt ze (volledig) aanpassen aan je eigen smaak en wensen. Laat je dus niet afschrikken door de door mij gebruikte kleuren, aantal knoppen, grootte van de tekst, en dergelijke.

Hoe je het voorbeeld precies kunt aanpassen, verschilt van voorbeeld tot voorbeeld en zal meestal enig denkwerk vereisen. Als je met dit soort constructies wilt werken en je wilt die aanpassen, is het beslist nodig dat je je 'n beetje verdiept in html en css.

Ooit stond hier een overzicht van browsers, resoluties, enz., waarin is getest. Inmiddels is het aantal combinaties van dat soort dingen dermate groot, en het verandert zo snel, dat een overzicht op deze plaats zinloos is. Er is getest in Opera, Safari, Google Chrome, Firefox en verschillende versies van Internet Explorer in allerlei resoluties op allerlei systemen met allerlei lettergroottes in allerlei zoom-standen. Nieuwere of bijgewerkte voorbeelden zijn ook in mobiele browsers zoals Android browser getest.

In de uitleg bij elk voorbeeld staat onder het kopje Getest in een uitgebreid overzicht, in welke browsers en op welke besturingssystemen dat voorbeeld precies is getest. Er is getest op allerlei mogelijke manieren. Uit die test kan prima tevoorschijn komen dat iets niet werkt in een bepaalde browser of zo. Daarom is het hoofdstukje Bekende problemen in de uitleg echt verplicht leesvoer.

In de regel is ook getest op toegankelijkheid met programma's als Lynx, WebbIE, VoiceOver, TalkBack en/of NVDA. In principe zijn de voorbeelden toegankelijk voor speciale programma's zoals schermlezers voor blinden en slechtzienden. Ook zijn de voorbeelden in principe goed toegankelijk, als in plaats van de muis het toetsenbord wordt gebruikt. Als er bij een voorbeeld problemen met toegankelijkheid zijn, wordt dat in de uitleg vermeld onder het kopje Toegankelijkheid en zoekmachines.

Voor zover (oudere versies van) Internet Explorer gebruik maken van afwijkende, foutieve css, heb ik gekozen voor 'conditional comments': code die alleen door Internet Explorer is te lezen. Hierdoor blijft de code voor fatsoenlijke browsers aan de w3c-standaard voldoen. Dit soort code verdwijnt in snel tempo, omdat ook Microsoft zich met ingang van Internet Explorer 9 eindelijk aan standaarden houdt.

Tabellen worden alleen gebruikt, waar ze voor bedoeld zijn: voor de weergave van tabulaire gegevens, niet voor lay-out. Hier is een enkele uitzondering op, maar dat wordt bij het betreffende voorbeeld vermeld. Nergens levert het gebruik van (elementen van) een tabel problemen voor toegankelijkheid of zoekmachines op.

Iets gevonden waar je wat aan hebt? Mooi. Als je je waardering wilt uiten, maak dan een donatie over aan War Child Nederland, een organisatie die kinderen uit oorlogsgebieden helpt hun trauma's te verwerken. Of - nog beter - wordt donateur:

Naar site van War Child Nederland