css-voorbeelden homepage

www.css-voorbeelden.nl

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

Over deze pagina

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 alle voorbeelden op één pagina wilt zien, kun je dat vinden in 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.

Artikelen

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

Menu

Alles waarbij de belangrijkste functie is om, op welke manier dan ook, naar 'n andere pagina of zo te gaan. Knoppen waar 'n link onder zit, dropdownmenu's, uitklapmenu's, menubalken. Ook afbeeldingen waarvan de belangrijkste functie het menu is.

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, lijnen. Alles waarbij de tekst het belangrijkste onderdeel is.

Veranderen van tekst, 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.


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

Bij openen van de pagina staat in kleinere vensters alleen tekst. Bij aanraking van 'Menu site openen' bovenin opent een menu, waarmee je andere pagina's en dergelijke kunt bezoeken.

In iets bredere vensters worden, naast de tekst, ook witte knoppen met daarin de naam van een onderwerp getoond. De plaats van de knoppen is afhankelijk van de breedte van het venster.

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 kleine afbeeldingen van de voorbeelden. Op de knop verschijnt een thumbnail, waarin de voorbeelden van het betreffende onderwerp één voor één worden getoond.

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

Op deze site worden voornamelijk html en css gebruikt. In slechts enkel gevallen worden andere talen gebruikt. Iets verderop staat omschreven, wanneer en waarom soms andere talen worden 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.

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

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.

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

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

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 de meest gebruikte browsers op de meest gebruikte systemen, op het moment dat een bepaald voorbeeld werd gemaakt. In de regel zijn ook dingen als zoomen en andere lettergroottes getest.

In de uitleg bij elk voorbeeld staat onder het kopje Getest in een uitgebreid overzicht, op welke manieren in welke browsers 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 (en oplossingen) 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.

Andere talen dan css en html

In enkele gevallen worden meer talen dan alleen css en html gebruikt, maar vrijwel altijd aanvullend. Als dit bij een voorbeeld het geval is, wordt altijd in de uitleg verteld, waarom en hoe een andere taal is gebruikt.

xhtml

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 alleen nog html gebruikt. Praktisch maakt dat weinig uit. Als het doctype maar strict is, kunnen beide probleemloos naar html5 worden overgezet. Maar in oudere voorbeelden wordt in plaats van html xhtml gebruikt.

SSI (Server Side Includes)

In 'n enkel voorbeeld wordt SSI gebruikt om tekst, een menu, of iets soortgelijks in te voegen. Dit is handig als een bepaalde tekst, een menu, enz. op veel pagina's terugkomt. (Meestal wordt hiervoor PHP gebruikt, maar een simpele invoeging kan ook prima met het veel minder bekende SSI.)

PHP

Op de site zelf wordt PHP gebruikt voor het forum. Met html5 zou je misschien een forum kunnen maken, maar een kant-en-klaar forum is veel makkelijker. Bovendien heb ik niets tegen andere talen, ik wil alleen de mogelijkheden van css laten zien. In de voorbeelden wordt nergens PHP gebruikt.

JavaScript

Voor het forum wordt ook JavaScript gebruikt, omdat dit veel extra mogelijkheden oplevert.

Ook wordt soms JavaScript gebruikt, of getoond hoe je dat zou kunnen gebruiken, als JavaScript echt enorme voordelen heeft boven het gebruik van css. En soms is er geen andere mogelijkheid, zoals bij de nieuwe API's uit html5. Maar in principe werkt het ook dan op de desktop nog steeds zonder JavaScript. Op mobiele apparaten werkt het hier niet altijd zonder JavaScript. Maar daar is de kans dat JavaScript uit staat heel klein, omdat een mobiel apparaat zonder JavaScript niet veel meer is dan een buitensporig groot horloge. Bij elk voorbeeld wordt dit steeds uitgebreid toegelicht.

Internet Explorer

Versies ouder dan versie 9 zijn een groot probleem, omdat Microsoft op tal van punten van de standaard afweek. Bij versie 9 en later speelt dit niet meer. Omdat versies ouder dan versie 9 niet meer door mij worden ondersteund, verdwijnt dit probleem vanzelf. In oudere voorbeelden worden voor versie 8 en eerder van Internet Explorer regelmatig aanpassingen aangebracht, omdat veel dingen anders stomweg niet kunnen in deze weerzinwekkend slechte misbaksels. Ook ook wordt soms gebruik gemaakt van .htc-bestanden, behavior, expression of SVG. Ook dit gebruik wordt altijd duidelijk vermeld.

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