Sitemap
16 juni 2019
Rechtstreekse links naar de belangrijkste pagina's, alle voorbeelden en alle pagina's met uitleg.
Je kunt deze zelfde sitemap ook met thumbnails van de voorbeelden bekijken.
css -imagemap : thumbnail met pop-ups met voorvertoning en extra informatie (25): voorbeeld uitleg css -imagemap : landkaart met pop-ups van uitsnedes en extra informatie (46): voorbeeld uitleg css -imagemap : afbeelding met hotspots waaronder extra informatie zit (99): voorbeeld uitleg
Nieuw: preloaden van afbeeldingen (76): voorbeeld uitleg
Nieuw: art direction : browser beste afbeelding laten kiezen voor scherm en/of venster (117): voorbeeld uitleg
Slideshow met thumbnail en foto's van verschillende grootte. Gebruikt weinig bandbreedte (11): voorbeeld uitleg Slideshow met verticale rij thumbnails en foto's van verschillende grootte. Gebruikt weinig bandbreedte (39): voorbeeld uitleg Slideshow met horizontale rij thumbnails en foto's. Gebruikt weinig bandbreedte (55): voorbeeld uitleg
Bij hoveren over, aanraken van of tabben naar één van de thumbnails opent boven de thumbnail een grotere afbeelding met onderschrift (16): voorbeeld uitleg
Bij hoveren over, aanraken van of tabben naar één van de thumbnails opent in het midden een grotere afbeelding met onderschrift (17): voorbeeld uitleg
Van bovenaf tijdelijke nieuwe afbeelding over bestaande afbeelding slepen (32): voorbeeld uitleg
Van boven, onder of opzij tijdelijke nieuwe afbeelding over bestaande afbeelding slepen (33): voorbeeld uitleg
Afhankelijk van over welk plaatje je hovert, veranderen 1 tot 4 plaatjes tijdelijk (42): voorbeeld uitleg
Tijdelijk afbeelding door slepen van bovenaf laten overvloeien in nieuwe afbeelding (53): voorbeeld uitleg
Bij hoveren over de afbeelding verandert deze (88): voorbeeld uitleg
Afbeeldingen zijn afzonderlijk meer of minder (on)zichtbaar te maken (58): voorbeeld uitleg
Link en antwoord op vraag verbergen onder afbeelding (72): voorbeeld uitleg
Lijsten met utf -8-codes en entiteiten (bijzondere tekens, accenten, enzovoort) (63): artikel
charset , tekenset, utf-8 , entiteiten, accenten, en dergelijke (64): artikel Hoe krijg ik veilig een gratis bezoekersteller? (77): artikel
Doorzichtige border mogelijk maken in Internet Explorer 6 (82): artikel
Een pagina met behulp van css printvriendelijk maken (90): artikel
Selector, identiteit, class , specificiteit: hoe overleef ik de nieuwe klassenstrijd? (94): artikel
Wat is het beste doctype? En waarom is dat zo? En hoe is dat zo gekomen? En waarom...? Daarom! (102): artikel
Lengte-eenheden in css (inclusief calc() en procenten) (119): artikel
Pijl met tekst erin. Pijl past zich aan lettergrootte aan (49): voorbeeld uitleg
Schaalbare driehoeken zonder gebruik van een afbeelding (59): voorbeeld uitleg
Makkelijk aan te passen horizontale staafdiagrammen (60): voorbeeld uitleg
Makkelijk aan te passen verticale staafdiagrammen (81): voorbeeld uitleg
Doorzichtig kader met ronde hoeken. Hoogte groeit mee met inhoud (40): voorbeeld uitleg
Dubbel kader met ronde hoeken. Hoogte groeit mee met inhoud (69): voorbeeld uitleg
Ronde hoeken zonder gebruik van afbeeldingen (border-radius) (91): voorbeeld uitleg
Flexibel kader bestaande uit afbeeldingen rondom blok-element (border-image) (111): voorbeeld uitleg
Eénkoloms lay-out met (vaste) footer en (in bredere vensters) zijvleugels (13): voorbeeld uitleg
Eénkoloms lay-out met vast menu en kader (5): voorbeeld uitleg
Drie kolommen, middelste kolom flexibele breedte, vaste rechter- en linkerkolom, vaste header (83): voorbeeld uitleg
Drie kolommen, middelste kolom flexibele breedte, header en footer (41): voorbeeld uitleg
Drie kolommen met flexibele breedte, vaste linkerkolom, vaste header en vaste footer (100): voorbeeld uitleg
Eén tot vier kolommen met flexibele breedte, vaste linkerkolom en vaste header (101): voorbeeld uitleg
Lijst met automatische nummering en bijpassende (lelijke) lay-out (65): voorbeeld uitleg
Sitemap met lijnen. Gebruikt geen plaatjes (71): voorbeeld uitleg
Positie, kleur, symbool, enzovoort in een lijst wijzigen (84): voorbeeld uitleg
Sitemap met ronde hoeken en doorzichtigheid. Opent bij hoveren (95): voorbeeld uitleg
Sitemap met twee verschillende lay-outs binnen één pagina. Css kan worden gekozen via SSI (96): voorbeeld uitleg
Lijst met leesbare en met knoppen uitvouwbare officiële versie van een verdrag (107): voorbeeld uitleg
Lijst met links die groepsgewijs via trefwoorden kunnen worden getoond of verborgen (113): voorbeeld uitleg
Menu voor kinderen met tekening en pop-ups. Elk puzzelstukje is een link (14): voorbeeld uitleg
Menu met afbeelding. Elke link heeft 'n bijbehorende vergrote uitsnede (54): voorbeeld uitleg
Horizontaal responsief uitklapmenu, tot vier niveaus diep (35): voorbeeld uitleg
Kies via een uitklapmenu een afbeelding en open de bijbehorende pagina (48): voorbeeld uitleg
Simpel uitklapmenu, twee niveaus diep (66): voorbeeld uitleg
Verticaal responsief uitklapmenu, tot vier niveaus diep (36): voorbeeld uitleg
Menu met knoppen met rand, die aangeeft of link al bezocht is of nog niet (20): voorbeeld uitleg
Menu met knoppen met ronde rand, die aangeeft of link al bezocht is of nog niet (21): voorbeeld uitleg
Werking van de submenu's op de site (19): voorbeeld uitleg
Menu met knoppen die verkleuren, afhankelijk van of link al is bezocht (22): voorbeeld uitleg
Menu met knoppen. Symbool en/of tekst verschilt afhankelijk van bezocht of onbezocht (23): voorbeeld uitleg
Menu met knoppen. Aanraking/klik volgt gelijk link; hoveren/focus verandert eerst link (27): voorbeeld uitleg
Menu met knoppen. Aanraking/klik volgt gelijk link; hoveren/focus verschuift eerst afbeelding (28): voorbeeld uitleg
Menu met verkleurende knoppen met indicatie van huidige, bezochte en onbezochte pagina's (8): voorbeeld uitleg
Knoppen met toelichting en indicatie van huidige, bezochte en onbezochte pagina's (12): voorbeeld uitleg
Horizontale wegwijzer in de vorm van broodkruimels (breadcrumbs ) (86): voorbeeld uitleg
Bij hoveren over vlag verschijnt gedraaide tekst (transform) (93): voorbeeld uitleg
Verticaal menu met tekeningen. Bij hoveren verkleuren ze (45): voorbeeld uitleg
Verticaal slide-outmenu. Maakt gebruik van :target (125): voorbeeld uitleg
Beweeg de cursor of raak het scherm aanen er verschijnen smileys (15): voorbeeld uitleg
Bij hoveren over, aanraken of aanklikken van, of tabben naar een vraagteken opent een pop-up met smileys (18): voorbeeld uitleg
Geneste pop-ups die openen bij aanraken, hoveren of tabben (109): voorbeeld uitleg
Pop-up met tabel en achterliggende pagina (9): voorbeeld uitleg
Pop-up met Periodiek Systeem en links naar betreffende Wikipedia-pagina's (74): voorbeeld uitleg
Footer altijd onderaan venster of lager ('sticky footer ') (30): voorbeeld uitleg Scrollbare en schaalbare tabel met vaste header (97): voorbeeld uitleg
Responsieve en toegankelijke tabel met (in bredere vensters) vaste kolomkoppen (114): voorbeeld uitleg
Horizontaal centreren van pagina of blok-element met bekende breedte (34): voorbeeld uitleg
Horizontaal én verticaal centreren van blok-element met bekende hoogte en breedte (68): voorbeeld uitleg
Twee of meer kolommen gemeenschappelijke rand en/of achtergrond geven (89): voorbeeld uitleg
Twee in een venstertje naast elkaar staande kolommen gelijktijdig scrollen (104): voorbeeld uitleg
Twee kolommen die altijd even hoog zijn, ongeacht de inhoud (123): voorbeeld uitleg
Verticaal op gelijke afstand zetten van tekst (waaronder centreren) (38): voorbeeld uitleg
Verticaal centreren van pagina of blok-element met bekende hoogte (6): voorbeeld uitleg
Drie manieren om pagina of blok-element met onbekende hoogte verticaal te centreren (7): voorbeeld uitleg
Onderste blokje staat altijd onderaan, ongeacht zoomen, hoeveelheid tekst, lettergrootte, enzovoort (110): voorbeeld uitleg
Schaduw bij een element met een vaste breedte en hoogte, zoals een afbeelding (50): voorbeeld uitleg
Blok tekst met schaduw. Schaduw past zich aan grootte blok, lettergrootte, en dergelijke aan (51): voorbeeld uitleg
Tekst met schaduw zonder gebruik van plaatjes of dubbele tekst (text-shadow ) (70): voorbeeld uitleg
Schaduwen zonder gebruik van afbeeldingen (box-shadow ) (92): voorbeeld uitleg
Serie blok-elementen met doorzichtige schaduw (box-shadow ) (112): voorbeeld uitleg
Lange tekst met inhoudsopgave. Inhoudsopgave en tekst zijn onafhankelijk te scrollen (29): voorbeeld uitleg
Oplosbare kruiswoordpuzzel met extra toeters en bellen (73): voorbeeld uitleg
Toegankelijk formulier met allerlei soorten invoervelden (79): voorbeeld uitleg
Onderdelen van een formulier in- en uitschakelen met behulp van enabled en disabled (106): voorbeeld uitleg
Met behulp van counter(), calc(), en dergelijke allerlei statistische gegevens over aankruisvakjes weergeven (122): voorbeeld uitleg
Ondoorzichtige tekst op meegroeiende doorzichtige achtergrond, gebruikt rgba() (31): voorbeeld uitleg
Bij overflow wordt tekst onderaan langzaam vager (57): voorbeeld uitleg
Initiaal ('drop cap ') met en zonder gebruik van plaatje (75): voorbeeld uitleg
Ondoorzichtige tekst op doorzichtige achtergrond, gebruikt rgba() (78): voorbeeld uitleg
Met @font-face eigen aangepaste fonts (webfonts) gebruiken (98): voorbeeld uitleg
Tekst verticaal weergeven (115): voorbeeld uitleg
Kiezen uit vijf combinaties van voor- en achtergrondkleur (120): voorbeeld uitleg
Tekstkleur aanpassen aan achtergrond met gebruik van mix-blend-mode (121): voorbeeld uitleg
Bij aanraken van, hoveren over of tabben naar een gearceerd woord opent een illustratie (37): voorbeeld uitleg
Tekst uitlijnen naast een ronde afbeelding (43): voorbeeld uitleg
Pagina met afbeelding, beschrijving en prijs van gereedschappen (47): voorbeeld uitleg
Tekst uit een ander bestand invoegen met Server Side Includes (SSI ) (52): voorbeeld uitleg
Menu uit een ander bestand invoegen met Server Side Includes (SSI ) (87): voorbeeld uitleg
Invoegen van tekst vanuit een ander bestand met behulp van <object> (108): voorbeeld uitleg
Schaalbare inhoudsopgave met voorlooppunten (62): voorbeeld uitleg
Overstrepen, onderstrepen en doorstrepen van tekst in alle soorten en maten (85): voorbeeld uitleg
Voorbeelden van <hr>'s die geen aaneengesloten, rechte lijn zijn (105): voorbeeld uitleg
Afbeelding als onderstreping. Afbeelding past zich aan de lengte van de tekst aan (124): voorbeeld uitleg