Deze pagina is niet bedoeld als een tutorial. Ik zou dat wel willen, maar er is geen tijd om een stap voor stap artikel te schrijven en de pagina's met natuur inhoud hebben prioriteit. Maar ik gebruik op deze website nog al wat css trucjes, die ik verzameld heb van het web en uit boeken. En hoewel ik maar een amateur ben en sommige van mijn css stijl regels pijn kunnen doen aan de ogen van professionele programmeurs, wil ik toch wat van de leuke en zelfs opwindende mogelijkheden met u delen. Omwille van de moderne laagdrempeligheid, neem ik de vrijheid u verder in het artikel te tutoyeren.
Voordat je verder leest: dit artikel is bedoeld voor mensen met een zekere ervaring op het gebied van (x)HTML en CSS. Jij weet wat je kunt doen met <divs> en <spans> - zo niet, dan is het beter nu te stoppen en eventueel terug te keren nadat je daar meer van begrijpt. Je bent er nog? Mooi, dan duiken we meteen in de meest ingewikkelde pagina van mijn website, waar ik bijna alle CSS trucs die ik ken heb gebruikt! In de bron van die pagina vind je de namen van de Cascading Style Sheets die daar gebruikt worden. De eerste is galstyle.css (een bestandje wat begonnen is als stijl blad voor mijn plaatjes galerijen maar nu voor veel meer pagina's gebruikt wordt). De eerste taak van dit stijl blad is het formatteren van de basis pagina indeling. Die indeling was eerst met frames (of deelpagina's zoals Wiki aangeeft) waarbij die frames dan gebruikt werden voor de paginaranden. Die paginaranden worden in de huidige versie geplaatst als <div>'s en dat zal voor jou gesneden koek zijn. Wat echter niet direkt te zien is: de linker rand wordt gevormd door het <body> achtergrond plaatje. Als je dat interesseert: hier zijn voorbeeld pagina's die stap voor stap de opbouw van de pagina achtergrond laten zien Het nu behandelde deel van galstyle.css is de #linktab definitie. Deze vormt de tabs van het menu bovenaan de pagina. Het tweede stijlblad subgalstyle.css is ooit opgesteld, zoals de naam al aangeeft, voor de "sub-galerij" pagina's (dit plaatjes galerijen waar de hoofdgalerijen naar verwijzen, ze vormen als het ware vertakkingen) Voor de duikerwants pagina, die we hier als voorbeeld gekozen hebben, doet het niet veel meer dan het verzorgen van de "INDEX" menu tabs links boven aan.
We kijken nu even naar de menu tabs aan de bovenrand van de duikerwants pagina die hier besproken wordt (die met "INDEX" en de " 1 2 3 4 .." rij). Deze tabs zijn een iets aangepaste versie van de hoofd galerijpagina's menu tabs, waarvan hier onder een ingekort voorbeeld (met zwarte lijntjes, zie verder):
(NB de zwarte lijntjes langs de boven- en zijranden zijn hier toegevoegd om goed te kunnen zien hoe de achtergrondplaatjes van de tabs werken).
In oudere paginaversies gebruikte ik een <table> gebaseerd menu. Dat heb ik omgezet naar deze left floating <list> versie, waarbij ik een geweldig idee van Douglas Bouwman (alistapart.com) gebruikte: de sliding doors of css. Ik ga hier niet in detail, Douglas kan de opbouw veel beter uitleggen (engelstalig). Maar het komt er op neer dat voor menu tabs oversized plaatjes gebruikt worden, die (als deuren) over elkaar kunnen schuiven.
Het "schuivende deuren" idee is in principe dit: een anker
tag <a> plaatje schuift over een <li> plaatje (de plaatjes uiteraard in het
CSS toegekend). Op deze manier wordt de breedte van de tabs bepaald door hun tekst inhoud.
Voor de anker tag gebruikte ik een smal plaatje, zoals je hieronder kunt zien. De rest van
de achtergrond van elke tab is eenzelfde plaatje als dat voor de pagina, alleen iets
donkerder, om de indruk te krijgen dat de tabs iets lager liggen dan de pagina zelf. We
kunnen de tabs een animatie geven, door (bijvoorbeeld) het achtergrond plaatje te veranderen
en/of de tekstkleur of stijl, op het moment dat de anker tag in de a:hover stand gaat
(muispijl over de link). Voor die animatie heb ik de volgende mogelijkheden gebruikt.
Als eerste: twee plaatjes, eentje met een schaduwrand en eentje zonder (ltablinks.gif
en ltabrechts.gif) voor de linker rand van elke tab:
Voor de <a> tag in ruststand de schaduwversie: en voor de hover stand die zonder schaduw: Ze geven de illusie dat de tab omhoog komt,
richting kijker.
(NB: hoewel de .gifs op de linkerkant van de tabs liggen, geeft het dunne lijntje de indruk
dat het de rechter rand is van het "papier" wat links van elke tab ligt en dat die
rand een schaduw over de linkerkant van de tab werpt - als je begrijpt wat ik bedoel).
Als tweede: de padding ("witruimte") van de tekst van de <a> tag in ruststand is 5px 5px 2px 15px, in de hover stand is dat 4px 6px 3px 14px. Daarmee wordt de tekst iets naar boven en naar links geschoven, dat ondersteunt de illusie dat de tab omhoog komt naar de kijker.
Als laatste: de onderrand is 1px op de <a> tag in ruststand, maar in de hover stand met 2px iets dikker. Dat geeft de illusie van een schaduw onder de tab op de pagina en daarmee, opnieuw, het omhoog komen naar de kijker. Je kunt de drie effecten bekijken op de demo tabs hierboven.
Zoals hierboven geschreven, is de achtergrond van de tab een iets donkerder versie van de achtergrond .jpg en de illusie zou misschien beter zijn als de tab achtergrond óók veranderde met de hover stand, in die van de pagina achtergrond. Maar ik weet niet hoe. Als je op de link klikt, verandert de achtergrond wél naar die van de pagina, omdat de <li> achtergrond dan transparant is. De <a> tag van deze aangeklikte tab (#nolink) heeft de .gif zonder schaduw, die hierboven afgebeeld is. Dit, samen met de onderrand op 0px (geen rand) en de tekst kleur op zwart gezet, geeft de illusie dat je de pagina waar de tab een deel van was hebt geselecteerd. Je kunt zien wat ik hiermee bedoel, door op de galerij pagina's op de menu tabs te klikken.
Aan de rechterkant van de menu tab reeks zit een eindtab, maar de details daarvan wil ik je besparen. Die kun je zelf makkelijk vinden, nu het principe bekend is.
Maar hier is in elk geval het .gif plaatje voor de rand ervan. Dit wordt gebruikt om de rand van de pagina zelf te simuleren:
Voor de mensen die het tot hier volgehouden hebben, nu de truc voor het wisselende
plaatje(s) en tekst menu op de voorbeeld pagina die we
behandelen.
Jaren geleden vond ik ergens op het web deze handige CSS constructie, die geen Javascript
nodig heeft - maar ik ben de url kwijt. Om een indruk van de werking te krijgen, kun je de
muiswijzer bewegen over de menu items ("HELP, algemeen, kop, borststuk,..."), dan
zie je de plaatjes en tekst veranderen. Hoe werkt dat?
Nu, dat kun je vinden in het "style type CDATA" gedeelte van de paginabron. Als eerste is er div#topcorn die het donkerbruine plaatjes blok vormt. Rechts naast die <div> wordt de container div#plinks gelegd, dat is het licht gekleurde gedeelte waar de menu items geplaatst zijn met hun div#plinks a stijl.
In die container, zijn het weer de <a> tags die de truc doen. Beweegt de muispijl over een item dan maakt div#plinks a:hover de achtergrond wit, niets bijzonders. Maar nu komt het: div#plinks a:hover img zet zijn plaatje, niet onder de item tekst, zelfs niet in de div#plinks container, maar ergens anders op de pagina, bepaald door een absolute position aanduiding! In dit geval is dat het bovenste gedeelte van het donkerbruine plaatjesblok. En daar blijft het niet bij: een tweede plaatje wordt onder het eerste geplaatst, met div#plinks a:hover img.p2 - dat is het grotere plaatje met een detail van de duikerwants. En tenslotte gooit div#plinks a:hover span een blok toepasselijke tekst op de pagina, rechts van het menublok. Het zou me niet verbazen als er nog meer mogelijk blijkt...
Je kunt zien hoe elk menu item samengesteld wordt, door het <div id="plinks"> gedeelte van de paginabron te beijken. Maar ik ben verbaasd dat je tot hier hebt gelezen en dank je voor je aandacht !