Pop-up

Pop-up

Venstertjes met allerlei inhoud die openen bij aanraking, als er met de cursor over wordt gehoverd, en dergelijke.

Zo'n venstertje heet een pop-up, omdat het boven de pagina zelf komt te staan. Het kan bijvoorbeeld openen, als je de cursor over een bepaalde plaats beweegt, als je een bepaalde plaats op het scherm aanraakt, op een bepaalde plaats klikt, enzovoort. Die 'bepaalde plaats' kan bijvoorbeeld een link zijn, maar dat hoeft niet. Bij deze pop-ups wordt geen JavaScript gebruikt, alleen html en css. (Alleen op iOS kan wat JavaScript zijn gebruikt.)

Over deze pagina

Omdat er te veel over pop-ups kwam voor één pagina, zijn de pop-ups verdeeld over meerdere subpagina's. Deze pagina is een ingang naar de verschillende subpagina's.

Tekst

Pop-ups waarvan de tekst het belangrijkst is. Er kunnen eventueel ook extra's als 'n afbeelding of 'n link naar 'n achterliggende pagina aanwezig zijn.

Tabel

Pop-ups waarvan de lay-out op een tabel lijkt, of die uit een echte tabel bestaan. Er kunnen eventueel ook extra's als 'n afbeelding of 'n link naar 'n achterliggende pagina aanwezig zijn.

Plaatjes

Pop-ups waarvan de plaatjes het belangrijkste zijn. Er kan eventueel ook tekst of extra's als 'n link naar 'n achterliggende pagina aanwezig zijn.


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 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 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 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 (in oudere voorbeelden onder het kopje Toegankelijkheid en zoekmachines).

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