css-voorbeelden

Alleen css en html

Deze site bevat (aan te passen) voorbeelden, waarbij alleen css, html en afbeeldingen zijn gebruikt. Van alle voorbeelden zijn de code en een uitgebreide uitleg gratis te downloaden.

(In oudere voorbeelden wordt ook nog xhtml gebruikt.)

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.

Er wordt, op enkele uitzonderingen na, geen JavaScript, PHP, of welke andere taal dan ook gebruikt, Niet omdat ik iets tegen die talen heb, maar om te laten zien dat met simpele css en html veel meer mogelijk is dan veel mensen denken. Waar afbeeldingen zijn gebruikt, zijn die meestal gelijk als zodanig te herkennen.

In 'n enkel voorbeeld wordt SSI gebruikt om tekst in te voegen. Dit wordt duidelijk vermeld. Voor het forum wordt wel gebruik gemaakt van JavaScript en PHP, want 'n forum in alleen css en html is onmogelijk.

Internet Explorer is (uiteraard) een apart geval. Voor Internet Explorer 7 en 8 wordt regelmatig JavaScript gebruikt, om nieuwere elementen te kunnen gebruiken. Daarnaast wordt, afhankelijk van de versie van Internet Explorer, soms gebruik gemaakt van .htc-bestanden, behavior, expression of JavaScript. Dat is nodig omdat Microsoft na het uitkomen van een nieuwe versie nooit iets nieuws toevoegt. Hierdoor is élke versie van Internet Explorer in 'n vloek en 'n zucht zwaar verouderd. Ook dit gebruik wordt altijd duidelijk vermeld.

Maar in elke échte browser (alles behalve Internet Explorer) werkt alles op deze site dus alleen met behulp van css en html.

Alles op deze site kan vrij worden gebruikt. Je gebruikt het wel op eigen risico: als er ergens fouten in zitten, ben ik 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.

Alle voorbeelden en templates op deze site zijn geschreven in alleen css en html. Oudere voorbeelden kunnen ook nog in xhtml zijn geschreven. Ik raad aan 'n doctype van html 4.01 strict of html5 te gebruiken, dat levert de duidelijkste code en is ook voor zoekmachines en speciale programma's als spraakbrowsers het meest geschikt.

Toen ik met deze site begon, leek xhtml de toekomst te hebben. Inmiddels is dat niet meer zo: html heeft de toekomst. In het verleden werd op deze site alleen xhtml gebruikt. Nu de situtatie zo is veranderd, wordt ook op deze site geleidelijk aan steeds meer html gebruikt. Praktisch maakt dat weinig uit. Als het doctype maar strict is, kunnen beide probleemloos naar html5 worden overgezet.

Alle code is valid, op een enkele uitzondering na, maar dat wordt steeds vermeld. (Mocht je bepaalde dingen uit deze tekst niet begrijpen: in de uitleg bij de voorbeelden worden ze uitgebreid besproken.)

Alle voorbeelden zijn te downloaden als zip-bestand. De zip bevat de code van het werkende voorbeeld met alle gebruikte plaatjes en dergelijke, zodat het gedownloade voorbeeld precies hetzelfde is als dat op de site. Verder zit er een uitgebreide uitleg in pdf-formaat bij. 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 deze pagina met extensies.

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. In de uitleg bij elk voorbeeld staat onder Getest in een uitgebreid overzicht van combinaties, waarin dat voorbeeld is getest. Eventuele problemen staan ook in die uitleg.

Er is in de regel getest op de nieuwste versies van Opera, Safari, Google Chrome, Firefox en Internet Explorer. Van deze laatste zijn in de regel ook oudere versies getest. Met verschillende zoomstanden en - voor zover relevant - met verschillende lettergroottes.

In de regel is ook getest op toegankelijkheid met programma's als Lynx, WebbIE, Fangs Screen Reader Emulator en/of NVDA.

Voor zover Internet Explorer 6 (en in mindere mate Internet Explorer 7) gebruik maakt van afwijkende, foutieve css heb ik gekozen voor 'conditional comments': code die alleen door Internet Explorer is te lezen, en die daardoor wel aan de w3c-standaard voldoet, net zoals alle code op deze site. In principe is het dus ook goed toegankelijk voor speciale programma's als spraakbrowsers voor blinden en slechtzienden.

Ik heb niet gekozen voor zogenaamde 'hacks' om verschillen tussen browsers te verhelpen. 'n Hack maakt vaak gebruik van een bug (fout) in een browser, en je weet nooit helemaal zeker of die niet verholpen is in een nieuwere versie of update. Bovendien maakt het de code vaak uiterst onoverzichtelijk. Hacks zijn nuttig, de mensen die ze bedenken hebben heel veel bijgedragen aan de ontwikkeling van goede css, maar 't is naar mijn mening als praktische toepassing minder geschikt.

Tabellen worden alleen gebruikt waar ze voor bedoeld zijn: voor de weergave van tabellen, niet voor lay-out. Hier is een enkele uitzondering op, maar dat wordt daar dan vermeld, en het levert geen problemen met betrekking tot toegankelijkheid voor spraakbrowsers en dergelijke op.

Frames en iframes worden ook niet gebruikt: die hebben veel te veel nadelen, vooral voor speciale programma's zoals gehandicapten die gebruiken. (Overigens is 'n zoekmachine redelijk met 'n blinde te vergelijken, dus als je 'n slecht toegankelijke site maakt, scoor je meestal ook niet hoog in 'n zoekmachine).

Over deze pagina

Bij openen van de pagina staan alleen de naam van het onderwerp en een vraagteken in de vierkante knoppen. Als de link bezocht is, wordt boven de naam van het onderwerp een vinkje weergegeven. Alles op deze pagina, inclusief het verschijnen en verdwijnen van allerlei afbeeldingen, werkt met alleen css en html. De uitleg en code hiervan kun je vinden bij menu 019.

De site is ingedeeld in onderwerpen, maar de grens tussen die onderwerpen is vaak nogal vaag, omdat er een groot grijs gebied is. Is een imagemap meer een afbeelding of een menu? Als je alles op één pagina wilt zien, kun je dat vinden op de Sitemap.

Ik heb de voorbeelden bij het onderwerp gezet waar ze volgens mij het meest mee te maken hebben. Maar ik geef direct toe dat je daarover 'n totaal andere mening kunt hebben.

Lay-out

Modellen van complete pagina's met bijvoorbeeld kolommen, headers en footers, waarin je onderdelen kunt zetten.

Positioneren

Alles wat met het op 'n bepaalde plaats zetten van 'n onderdeel te maken heeft. Bijvoorbeeld het centreren van een pagina, gelijkelijk verdelen of centreren van onderdelen en tekst, losse footers en headers.

Overig

Alles wat niet ergens anders onder valt.

Figuren: allerlei vormen zoals pijlen, driehoeken, enz. Meestal zonder gebruik van afbeeldingen.

Kader: alles wat iets met een kader te maken heeft. Ronde hoeken, randjes, enz. Alles wat op een of andere manier iets anders insluit.

Lijst: alles wat met geordende en ongeordende lijsten te maken heeft, voor zover het echt om het weergeven van 'n lijst gaat. Dus geen menu's, bijvoorbeeld. Omdat de css-eigenschappen en pseudo-elementen content, counter(), counters(), :after en :before vaak samen met lijsten worden gebruikt, vind je ook die hier.

Schaduw: alles wat op een of andere manier een illusie van schaduw suggereert.

css-voorbeelden

Alleen css en html

Over deze pagina

Lay-out

Positioneren

Overig

Artikelen

Menu

Pop-up

Tekst

Afbeelding