Maar onze vaste kunsten en trucs lopen soms ook vast. Zeker in het geval van een slagschaduw of een mooie ronde hoek, en vooral als die er op verschillende achtergronden goed uit moet blijven zien. Daarom wil ik je hier aan de hand van een simpel voorbeeld laten zien hoe je er eens anders tegen aan kunt kijken.

Wat ik je ga laten lezen is een simpel voorbeeld om te tonen hoe de visuele representatie van een pagina niet altijd overeenkomt met je CSS- en HTML-structuur. Soms is wat je ziet niet helemaal wat je krijgt.

De uitdaging

Mijn voorbeeld vindt zijn basis in een ontwerp van ‘verticale tabs’ die als een soort dakpannen op elkaar gestapeld liggen. De hoeken zijn afgerond, om elke tab zit een 5 pixel breed wit kader én de afrondingen moeten vloeiend verlopen naar de achtergrond, waarbij elke tab bovendien een andere achtergrondkleur zal krijgen (dit wordt ook wel ‘anti-aliased’ genoemd).

Om de uitdaging nog wat aan te scherpen komt er nog eens bij dat het aantal tabs niet vast staat en de volgorde van de tabs ook niet. Dat maakt het natuurlijk moeilijker om de tabs altijd zonder kartelrand naar de achterliggende tab over te laten vloeien.

Een collega stelde me voor om de kaders te splitsen. De bovenkant van elke tab zou dan visueel aan de onderkant van de bovenliggende tab worden toegevoegd. De andere helft van het kader zou dan aan de tab zélf worden toegevoegd. Dan moest ik nog wel iets bedenken voor de bovenste tab, maar in essentie was dit een heel goed idee, waard om verder uit te werken.

Voortbordurend op dit idee besloot ik om inderdaad de tabs visueel te voorzien van de bovenkant van de opvolgende tab. Alleen bedacht ik om de bovenkant van iedere tab gewoon een volledig 5 pixels breed kader mee te geven, ge-aliased naar de algemene achtergrondkleur (zie de illustratie hierboven). Zo is iedere tab al klaar om de onderste op de stapel te zijn. Ik moet nu de tabs nog onder elkaar zien te schuiven, zodat alleen de bovenkant van de eerste tab zichtbaar is en de andere verborgen blijven onder de voorgaande tabs (zie de illustratie hieronder).

Wat ik nu zo grappig vind aan deze techniek is dat de structurele stapelvolgorde van de elementen exact het omgekeerde is van de visuele volgorde waarin je ze ziet. Na een afbeelding van mijn idee ga ik je uitleggen hoe ik het uitgevoerd heb.

In de bovenstaande afbeelding is trouwens ook direct duidelijk wat het belang is van de ‘anti-alias’ techniek die toegepast moet worden op de afgeronde hoeken. Het is bij de schaduwpartijen pijnlijk duidelijk waar de witte gekartelde rand ophoudt en de schaduw begint. Dit willen we natuurlijk in een website liever niet zien. In dit voorbeeld schept het echter wel duidelijkheid... Maar goed, dit even terzijde: on with the show.

De markup

Ik ga beginnen met het aanmaken van een lijst die met een paar simpele stijlregels omgezet kan worden tot de basis van de tabs.

<ul class="rooftiles">
 <li><a href="#1">subject1</a></li>

 <li><a href="#2">subject2</a></li>
 <li><a href="#3">subject3</a></li>
</ul>

Om te beginnen verwijderen we de standaard vormgeving van een lijst en maken er weer een standaard blok-element van.

ul {
 margin: 0;
 /*maak ruimte voor negatieve marges*/
 padding: 10px 0 0;
 list-style: none;
 width: 381px;
}

Vervolgens ga ik de list-items voorzien van een achtergrond. Om te beginnen neem ik als basis de groene kleur, de andere kleuren zullen we later introduceren. Ook gebruik ik hier nog een negatieve marge om de list-items onder elkaar te schuiven: het dakpan-effect waar ik het eerder al over had.

De position wordt hier ook op relative gezet. Dit doe ik om te zorgen dat de volgende techniek die ik ga tonen toegepast kan worden op de list-items zonder dat zij hun positie en dimensie in het document verliezen. Dit is een veelgebruikte truc wanneer een element positie nodig heeft.

li {
 background-color: transparent;
 background-image: url( images/green_top.gif);
 background-repeat: no-repeat;
 background-position: 0 0;
 height: 22px;
 padding: 7px 10px 15px;
 text-align: center;
 margin-top: -15px; /*stapel de tabs*/
 position: relative;
}

Dit zou natuurlijk de list-items in hun normale stapelvolgorde houden: niet echt een mooi gezicht. Dus moeten we de stapelvolgorde om gaan draaien. Helaas hebben we hier voor elk list-item in de lijst een aparte stijlregel nodig. En daardoor kunnen we geen algemene stijlregels opzetten voor een willekeurig aantal list-items.

Gelukkig is de stijlregel wel zó simpel dat we gemakkelijk een ruim aantal kunnen voorprogrammeren. We maken hiervoor gebruik van z-index en een sibling selector in combinatie met de al eerder genoemde relatieve positie. De sibling selector selecteert een element dat direct volgt op een element. Dit kunnen we uitbaten om dus opeenvolgende li-elementen te selecteren en van de correcte z-index te voorzien.

Het volgende blok code is de aanzet voor een voorgedefineerd maximum van 10 tabs.

li { z-index: 10; } /Draai z-index om*/
li+li { z-index: 9; }
li+li+li { z-index: 8; }
...

Ik kan me zo voorstellen dat je dit geheel nu eens wilt zien, al moet ik er wel even bij vermelden dat niet alle browsers het op deze manier goed kunnen tonen. Internet Explorer is bijvoorbeeld niet in staat om de gebruikte sibling selector te lezen.

Rekening houden met Microsoft

Uiteraard hadden we deze oplossing niet nodig gehad als Internet Explorer in staat was geweest om PNG’s zonder CSS-hack te tonen. En zoals ik al eerder heb vermeld kan Internet Explorer ook niet overweg met de sibling selector die ik heb gebruikt. We zullen dus extra code toe moeten voegen om hiermee overweg te kunnen en helaas kunnen we dan ook niet om het gebruik van class-namen heen.

En als we dan toch bezig zijn om een paar class-namen toe te voegen aan het document, kunnen we meteen even de verschillende kleuren bij de staart pakken. Ik heb hier gekozen om class-namen te gebruiken om de lijsten herbruikbaar te maken, met gelijke achtergrondkleuren over de lijsten verspreid. Uiteraard is er ook veel te zeggen voor het gebruik van id’s in dit geval, maar die keuze laat ik aan jou over. Ik gebruik in dit voorbeeld vooralsnog even class-namen.

<ul class="rooftiles">
 <li class="row1 subject1">
   <a href="#1">subject1</a>
 </li>
 <li class="row2 subject2">

   <a href="#2">subject2</a>
 </li>
 <li class="row3 subject3">
   <a href="#3">subject3</a>
 </li>

</ul>

En om het geheel af te ronden: de bijbehorende stijlregels.

 /*Keer de z-index van de  list-items om*/
.row1 { z-index: 10; }
.row2 { z-index: 9; }
.row3 { z-index: 8; }
.row4 { z-index: 7; }

/*Voorzie de tabs van verschillende kleuren*/
.subject2 {
 background-image: url(images/red_top.gif);
}
.subject3 {
 background-image: url(images/yellow_top.gif);
}

De standaard veelgebruikte browsers moet in staat zijn om er een mooi geheel van te maken met al deze stijlregels. In dit voorlaatste voorbeeld heb ik een tweede set opgenomen waarin ik de volgorde heb veranderd. Zo zie je dat de gebruikte techniek zeer veelzijdig is.

La grande finale ;)

In het laatste voorbeeld had ik nog niet het oranje vlak met inhoud had toegevoegd. Die heb ik namelijk nog even achter gehouden, als toetje. Het laatste voorbeeld heeft dit oranje vlak wel, en bovendien heb ik nog wat diepte toegevoegd aan dit visuele getover en er een sliding-doors implementatie aan toegevoegd. Zo maken we het mogelijk om meerdere regels tekst te tonen op de titels van de tabs.

• Home
• Artikelen
• Colofon