login  Naam:   Wachtwoord: 
Registreer je!
 Tutorials
Tutorials > CSS

Gegevens:
Geschreven door:
 JoWannes
Moeilijkheidsgraad:
 Gemakkelijk
Hits:
 20884
Punten:
Aantal punten:
  (4.17)
Aantal stemmen:
 6
Stem:
 Niet ingelogd
Nota's:
 Lees de nota's (16)
 

Tutorial:

Transparantie

1. Inleiding - Transparantie
2. Transparantie en het W3C
3. Crossbrowser compatibiliteit?
3.1 Firefox
3.2 Opera
3.3 Internet Explorer 5 & 6
3.4 Internet Explorer 7
4 Crossbrowser!
5 Voorbeeld
6 Conclusie

1. Inleiding - Transparantie

In deze tutorial leer je transparantie gebruiken op je website.
Je leert het voor- en nadeel ervan, en hoe je transparantie voor elke browser 'begrijpbaar' maakt.

Transparantie is een opmaak die we definiëren via Cascading Style Sheets (CSS).
Alle in deze tutorial geplaatste code moet dus tussen de <style> -tags staan.
Voorbeeld:

<style type="text/css">
#naam-element {
opacity: 0.90;
}
</style>

In de volgende code in deze tutorial laten we deze code, voor de duidelijkheid, achterwege.

We beperken ons in deze tutorial tot de 4 meest gebruikte browsers, namelijk Internet Explorer 6 & 7, Firefox en Opera.

pijl top

2. Transparantie en het W3C

Laten we direct met de deur in huis vallen, transparantie wordt niet ondersteund door het W3C.
Dat heeft enkele gevolgen:

  • Je CSS code valideert niet meer geldig; wat niet leuk is, maar ook geen ramp is.
  • De verschillende browsers hebben verschillende codes voor transparantie.

pijl top

3. Crossbrowser compatibiliteit?

Zoals in de vorige paragraaf uitgelegd is, hebben de verschillende verschillende codes voor transparantie.

In de volgende paragrafen zie je de code per browser, en uiteindelijk voegen we alle code samen tot een crossbrowser compatibele code!

pijl top

3.1 Firefox

Browser Firefox verstaat naast z'n eigen -moz-* codes ook de code die Opera gebruikt.

Voor FireFox gebruik je de volgende code:

#naam-element {
-moz-opacity: 0.90;
}

Het getal 0.90 geeft het percentage transparantie aan, in dit geval 90%.
Hoe hoger dit getal, hoe minder dat de content eronder (tekst, afbeelding) zichtbaar is!

pijl top

3.2 Opera

Browser Opera verstaat bijna de identieke code als Firefox, maar dan zonder '-moz-':

#naam-element {
opacity: 0.90;
}

Met deze code heb je dus zowel in Opera als in Firefox transparantie.
Ook deze eigenschap geef je in percentage weer, decimaal geschreven.

pijl top

3.3 Internet Explorer 5 & 6

Microsoft introduceerde voor Internet Explorer eigen codes, zogenaamde filters, specifiek voor grafische effecten.
Deze codes worden niet erkend door het W3C, zodoende gebruiken andere browsers als Internet Explorer deze filters niet.
De filter voor transparantie ziet er als volgt uit:

#naam-element {
filter: alpha(opacity=90);
}

Let op: hier geef je het percentage weer als gewoon getal, dus 90 i.p.v. 0.90!!!

pijl top

4. Internet Explorer 7

Samen met Internet Explorer 7 introduceerde Microsoft een nieuwe filter voor transparantie, namelijk deze:

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90);

Desondanks werkt de vorige filter nog:

filter: alpha(opacity=90);

Maar: je moet een breedte ingeven, anders werken beide filters niet!
Dus: gebruik de volgende code:

#naam-element {
filter: alpha(opacity=89);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=89);
width: 100%;
}

Let op:

  • De breedtebepaling 'width' moet erbij staan, anders werkt het niet!
  • Voeg best bijde filters in, misschien ondersteunen volgende versies enkel de nieuwe filter.

Ook bij deze filter geef je het percentage in als een gewoon getal, bvb. 90.

pijl top

4. Crossbrowser!

Uiteraard is het de bedoeling dat je in alle browsers dezelfde website ziet, dus moet de transparantie door elke browser herkend worden.
Daarvoor voegen we alle codes samen. Dan krijg je dit:

#naam-element {
filter: alpha(opacity=90);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90);
-moz-opacity: 0.90; opacity: 0.90;
width: 100%;
}

Dankzij deze code heb je crossbrowser compatibele transparantie.

pijl top

5. Voorbeeld

Voor een voorbeeld verwijs ik door naar m'n eigen site, waar je bovenaan een DHTML navigatiebalk vindt, en die is transparant.

De site kan je vinden op: http://www.aromatheek.be .

pijl top

6. Conclusie

Transparantie en geldige CSS gaan niet samen, het CSS ondersteund het immers niet.

Als je toch transparantie wil, moet je opletten dat je code crossbrowser compatibel is,
maar na het lezen van deze tutorial mag dat geen probleem meer zijn. ;)

Het voordeel van transparantie is de mooie grafische 'look' die je ermee kan creëren,
het nadeel is dat je CSS niet volledig 'geldig' meer is

Ik dank je voor het lezen van de tutorial en hoop je hiermee iets te hebben bijgeleerd. ;)

 

« Vorige tutorial : Formulier Opmaak

© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.013s