www.css-voorbeelden.nl
Laatst aangepast: .
Deze site bevat aan te passen voorbeelden, waarbij (vrijwel) alleen css, html en afbeeldingen zijn gebruikt. Alle code met bijbehorende uitgebreide uitleg is gratis te downloaden en vrij te gebruiken.
Over deze pagina
De site is ingedeeld in categorieën, maar de grens tussen die categorieën 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 of in de Sitemap met thumbnails.
De voorbeelden zijn bij de categorie gezet, waar ze het meest mee te maken hebben. Maar het is uitstekend mogelijk daar een andere mening over te hebben.
In kleinere vensters zijn de categorieën te bereiken via de knop 'Menu site openen' bovenaan de pagina.
Afbeelding
Alles waarbij de afbeelding het belangrijkste is. Grote illustraties met tekst, afbeeldingen die je (tijdelijk) kunt veranderen, foto-albums, imagemaps, video. Omdat geluid grotendeels hetzelfde werkt als video, is ook dit hier ondergebracht.
Artikelen
Artikelen over van alles en nog wat rondom het maken van een site.
Lay-out
Modellen van complete pagina's met bijvoorbeeld kolommen, headers en footers, waarin je onderdelen kunt zetten.
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.
Overig
Alles wat niet ergens anders onder valt.
Animatie: alles wat met animaties te maken heeft. Animaties staan op meer plaatsen op de site, maar hier staat de animatie echt centraal.
Figuren: allerlei vormen zoals pijlen, driehoeken, enzovoort. Meestal zonder gebruik van afbeeldingen.
Kader: alles wat iets met een kader te maken heeft. Ronde hoeken, randjes, enzovoort. 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.
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.
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, enzovoort uit andere bestanden door gebruik van PHP.
Deze pagina zelf is volledig gemaakt met html en css. (Er is alleen een klein beetje JavaScript gebruikt om de toegankelijkheid voor gebruikers van schermlezers en/of toetsenbord te verbeteren. Maar ook zonder JavaScript werkt alles voor hen nog, alleen soms wat onhandiger.)
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 grotere vensters worden, naast de tekst, ook witte knoppen met daarin de naam van een categorie getoond. De plaats van de knoppen is afhankelijk van de grootte van het venster.
In elke knop staat bovenin een grijs blokje met een driehoekje en 'Toon thumbs'. Als je dat blokje aanraakt, erop klikt of er met de Tab-toets naartoe gaat, opent een pop-up met kleine afbeeldingen van de voorbeelden uit de betreffende categorie.
Sluiten van de pop-up gaat door het aanraken van of klikken op de sluitknop die bij openen is verschenen, door de Tab-toets nogmaals in te drukken, of door op Escape te drukken.
Als een pagina al is bezocht, staat in het grijze blokje bovenin een klein vinkje.
Over de site
In de voorbeelden op deze site wordt voornamelijk html en css gebruikt. In slechts enkele gevallen wordt JavaScript en/of PHP gebruikt. Bij de voorbeelden wordt het eventuele gebruik van andere talen uitgebreid beschreven. Vrijwel altijd werkt het voorbeeld ook zonder JavaScript, maar vooral op iOS en iPadOS ontkom je af en toe niet aan wat JavaScript.
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 hier gebruikte kleuren, aantal knoppen, grootte van de tekst, en dergelijke.
Alles op deze site kan vrij worden gebruikt, met twee beperkingen.
Het kan zijn dat er materiaal van anderen is gebruikt. In dat geval kan het zijn dat dat materiaal onder een of andere licentie valt en niet zonder meer verspreid mag worden. Als dat het geval is, staat dat vermeld in de uitleg bij het voorbeeld onder het kopje Inhoud van de download en licenties.
De voorbeelden (en de bijbehorende uitleg en dergelijke) worden min of meer regelmatig bijgewerkt. Om die reden moet je, als je een voorbeeld op een of andere manier wilt verspreiden, daarbij duidelijk vermelden dat voorbeeld, uitleg, en dergelijke afkomstig zijn van www.css-voorbeelden.nl en dat daar altijd de nieuwste versie is te vinden. Dit is om te voorkomen dat er verouderde versies worden verspreid. Een link naar https://www.css-voorbeelden.nl wordt trouwens altijd gewaardeerd.
Je gebruikt het materiaal 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.
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.
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, enzovoort, 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, Verteller, Orca 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 Bekende problemen (en oplossingen).
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 (onderdelen 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.
PHP
Op de site zelf wordt PHP gebruikt voor het forum. In een aantal voorbeelden wordt het gebruikt om teksten die vaker worden gebruikt, zoals een menu, in te voegen.
JavaScript
De site zelf werkt in principe volledig zonder JavaScript. Met JavaScript heeft het forum echter wel wat meer mogelijkheden. Ook wordt op een aantal pagina's wat JavaScript gebruikt om de toegankelijkheid voor gebruikers van schermlezers en/of toetsenbord te verbeteren, en om problemen op iOS en/of iPadOS op te lossen.
In een (toenemend) aantal voorbeelden wordt ook JavaScript gebruikt of getoond, hoe je dat zou kunnen gebruiken. Er zijn drie redenen om JavaScript te gebruiken:
- op sommige mobiele systemen, met name iOS en iPadOS, werken sommige dingen gewoon niet zonder een minieme hoeveelheid JavaScript. Een probleem zal dit niet snel zijn, want zonder JavaScript heb je weinig aan je peperdure iPad of iPhone;
- een enkele keer wordt gebruik gemaakt van een html5-API. 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 de kans dat JavaScript daar uitstaat, is niet erg groot;
- ten slotte wordt af en toe wat JavaScript gebruikt om de toegankelijkheid voor gebruikers van schermlezers en/of toetsenbord te verbeteren. In die gevallen werkt alles nog steeds zonder JavaScript, maar JavaScript heeft hier wat toegevoegde waarde.
Bij het betreffende voorbeeld staat steeds vermeld, waarom JavaScript is gebruikt, en wat er gebeurt als JavaScript uitstaat.