css-voorbeelden

Alleen css en (x)html

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

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 vrijwel nergens 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 (x)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. Maar verder werkt alles op deze site dus alleen met behulp van css en (x)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 xhtml. Met 'n ander doctype zijn ze ook te gebruiken met css en html. Ik raad aan 'n doctype van strict te gebruiken, dat levert de duidelijkste code en is ook voor zoekmachines en speciale programma's als spraakbrowsers het meest geschikt. 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 Toolbar 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.

Alles is getest in Firefox, Opera, Safari, Google Chrome, Internet Explorer 7 en 8 in de resoluties 800x600, 1024x768 en 1280x1024. Steeds met de laatste versie van die browsers, omdat ik geen zin heb om rekening te houden met mensen die met zwaar verouderde browsers surfen. Dat is trouwens vragen om ellende, want updates van browsers hebben heel vaak met beveiligingsproblemen te maken. In de resoluties 1024x768 en 1280x1024 is ook in- en uitzoomen en een kleinere en grotere letter getest. Eventuele problemen staan bij Bekende problemen bij het betreffende voorbeeld.

Oudere voorbeelden zijn ook getest in Internet Explorer 6. Nieuwere voorbeelden niet meer. Waar precies in is getest, kun je bij elk voorbeeld lezen onder Getest in.

Naast deze 'gewone' browsers is alles ook getest in Lynx, WebbIE en Fangs Screen Reader Emulator. Lynx is een browser die alleen tekst laat zien en geen css gebruikt. WebbIE is een browser die gericht is op mensen met een handicap. Fangs Screen Reader Emulator is een extensie bij Firefox die de pagina laat zien zoals een screenreader hem ziet. Als het in deze drie programma's goed werkt, zou het in principe ook toegankelijk moeten zijn voor aangepaste browsers zoals spraakbrowsers. En dus ook voor zoekmachines. Een veel uitgebreider verhaal hierover vind je in de uitleg bij elk voorbeeld.

Nieuwe browsers test ik pas als ze uit het bèta-stadium zijn, omdat er anders 'n redelijke kans is dat ik 'n bug zit te omzeilen die voor de uiteindelijke versie nog gerepareerd wordt. De voorbeelden zijn alleen getest in de in het voorbeeld met name genoemde browsers. Vragen over niet-geteste browsers kan ik niet beantwoorden, en het melden van fouten in niet-geteste browsers heeft ook geen enkel nut. (Melden van fouten, problemen, enz. in wel geteste browsers: graag!)

In de algemene teksten (zoals op deze pagina) wordt een browser pas genoemd als zijnde getest als die in alle voorbeelden is getest. Het kan dus zijn dat in een voorbeeld al een browser wordt genoemd, die hierboven nog niet staat. In dat geval is die browser in dat betreffende voorbeeld al getest.

Omdat ik wil dat alles ook op 'n klein scherm van 800x600 redelijk zichtbaar blijft, heb ik vaak gekozen voor een compromis tussen de verschillende resoluties. Als je 800x600 niet zo belangrijk vindt en je vooral op hogere resoluties richt, is de indeling van veel dingen behoorlijk te verbeteren.

Problemen worden steeds bij het onderwerp zelf vermeld.

Voorzover 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

Omdat ik wilde dat alles ook te zien is op een 800x600-scherm, staan de pop-ups voor een groter scherm niet optimaal. Als je voor zo'n klein scherm scrollen geen probleem vindt, kan dit dus beter.

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 xhtml. 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.

Pop-up

Alles waarvan de belangrijkste functie het gewoon tevoorschijn floepen is. Vaak kun je wel 'n link achter 'n pop-up stoppen, maar het belangrijkste is de pop-up zelf.

Tekst

Inhoudsopgaves, speciale effecten zoals beginkapitalen, doorzichtige achtergronden, illustraties in de tekst. Alles waarbij de tekst het belangrijkste onderdeel is.

Veranderen, formulieren. Invoegen van teksten, menu's, enz. uit andere bestanden door gebruik van Server Side Includes (SSI).

Afbeelding

Alles waarbij de afbeelding het belangrijkste is. Grote illustraties met tekst, afbeeldingen die je (tijdelijk) kunt veranderen, foto-albums, imagemaps, video.

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, voorzover 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.

Artikelen

Artikelen over van alles en nog wat, tabellen met codes, enz.

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: