Afbeelding
Op deze pagina vind je alles waarbij de afbeelding het belangrijkste is. Omdat er te veel over afbeeldingen kwam voor één scherm, heb ik het menu over afbeeldingen gesplitst in verschillende submenu's. Deze pagina is alleen 'n ingang naar die verschillende submenu's.
Afbeeldingen is een breed begrip: er vallen feitelijk ook (verkleurende) knoppen en dergelijke uit een menu onder, maar die staan bij menu. Hier staan alleen dingen die op een of andere manier met grotere afbeeldingen te maken hebben.
Je kunt 'n submenu bezoeken door op een van de kopjes in de tekst hieronder te klikken, of op een van de grote witte knoppen. Als je 'n submenu nog niet hebt bezocht, is het kopje zwart en staat er 'n zwart vraagteken op de witte knop. Na bezoek is de kop paars en staat er 'n groen vinkje op de witte knop.
Afbeelding - Thumbnails
Kleine afbeeldingen die op een of andere manier een bijbehorende grote afbeelding openen.
Afbeelding - Verbergen
Op een of andere manier 'n afbeelding (tijdelijk) (on)zichtbaar maken.
Afbeelding - Imagemap
De afbeelding is op een of andere manier in grotere of kleinere stukken verdeeld. Bij hoveren over een bepaald stukje opent een pop-up met bijvoorbeeld een vergroting of achtergrondtekst, of er gebeurt een soortgelijke actie.
De grens tussen een imagemap en een afbeelding waar 'n menu onder zit is nogal vaag. Dat soort menu's vind je bij Menu - Afbeelding.
Afbeelding - Veranderen
Afbeeldingen die op een of andere manier (tijdelijk) vervangen kunnen worden door een andere afbeelding.
Afbeelding - Slideshow
Een serie foto's die met behulp van hoveren, toetsen, de muis of op 'n andere manier één voor één verschijnt.
Afbeelding - Video
Alles wat op een of andere manier met video te maken heeft.
Afbeelding - Overig
Alles wat niet in een van de andere onderdelen past. Preloaden.
Over de site
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.
Hoe je het voorbeeld precies kunt aanpassen verschilt van model tot model en zal meestal enig denkwerk vereisen. Als je met dit soort modellen wilt werken en je wilt die aanpassen, is het beslist nodig dat je je 'n beetje verdiept in html en css.
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.
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.
Problemen worden steeds bij het voorbeeld zelf vermeld.
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, maten, en dergelijke.
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. In de uitleg bij elk voorbeeld staat onder Getest in een uitgebreid overzicht van combinaties, waarin dat voorbeeld is getest. Eventuele problemen staan ook in die uitleg.
Er is in de regel getest op de nieuwste versies van Opera, Safari, Google Chrome, Firefox en Internet Explorer. Van deze laatste zijn in de regel ook oudere versies getest. Met verschillende zoomstanden en - voor zover relevant - met verschillende lettergroottes.
In de regel is ook getest op toegankelijkheid met programma's als Lynx, WebbIE, Fangs Screen Reader Emulator en/of Jaws.
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:
