Nodig: een up-to-date versie van Microsoft Internet Explorer of Mozilla Firefox.

 

 Hou er rekening mee dat opacity niet door alle browsers ondersteund wordt.

 

Opacity (transparantie) m.b.t. tekst, deel 1 (CSS in-line style)

In mijn tutorial over CSS opacity heb ik al iets uitgelegd over de verschillende opacity-waarden. Behalve op afbeeldingen kun je opacity ook toepassen op tekst. Hieronder een aantal voorbeelden waarbij ik 4 verschillende opacity-waarden: 100, 75, 50, 25, heb gebruikt. De letterkleur is zwart en de achtergrond is wit.

De code voor de 100-waarde:

<h1 style="color:black;width:100%;background:white;filter:alpha(opacity=100);-moz-opacity:1.0;opacity:1.0;font-size:42px;line-height:2em;text-align:center;">Dit is een proef-tekst</h1><P>

Zie hieronder:

Dit is een proef-tekst

* * *

Dit is de code voor de 75-waarde:

<h1 style="color:black;width:100%;background:white;filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;font-size:42px;line-height:2em;text-align:center;">Dit is een proef-tekst</h1><P>

Zie hieronder:

Dit is een proef-tekst

* * *

Dit is de code voor de 50-waarde:

<h1 style="color:black;width:100%;background:white;filter:alpha(opacity=50);-moz-opacity:.50;opacity:.50;font-size:42px;line-height:2em;text-align:center;">Dit is een proef-tekst</h1><P>

Zie hieronder:

Dit is een proef-tekst

* * *

Dit is de code voor de 25-waarde:

<h1 style="color:black;width:100%;background:white;filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;font-size:42px;line-height:2em;text-align:center;">Dit is een proef-tekst</h1><P>

Zie hieronder:

Dit is een proef-tekst

Zoals je ziet verandert de zwarte kleur van de letters langzaam maar zeker naar grijs. De achtergrond verandert mee.

* * *

Zou je als achtergrond transparant kiezen (background:transparant;), dan moet je oppassen, want meestal geeft dat in de Internet Explorer een vreselijk resultaat (dit geldt niet voor Mozilla Firefox):

Dit is een proef-tekst

Het veiligste is een kleur op te geven voor de achtergrond. Daardoor blijven de letters mooi. De kleur die ik hieronder heb gekozen is (background:cadetblue;). De opgegeven letterkleur is zwart, maar door de opacity-waarde van 50 is-ie grijs geworden.

Dit is een proef-tekst

Zou ik een waarde van 25 toepassen dan ziet het er zo uit:

Dit is een proef-tekst

* * *

Je kunt natuurlijk ook een plaatje als achtergrond gebruiken. Voor de letterkleur heb ik dit keer wit gekozen. Dan ziet de code er zo uit:

<h1 style="color:white;width:100%;background:url(typo8gr.jpg);filter:alpha(opacity=50);-moz-opacity:.50;opacity:.50;font-size:42px;line-height:2em;text-align:center;">Dit is een proeftekst</h1>

Zie hieronder:

Dit is een proeftekst

* * *

Je gelooft het misschien niet, maar de kleur van het gebruikte lettertype hieronder is zwart!

~ ~ dit is een tekst met verschillende opacity-waarden bestudeer de code maar~ ~

De code:

<div style="color:black;width:250px;background:#eee;filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25; margin-top:10px;margin-bottom:10px;margin-left:10px;font-family:Verdana, Arial, Helvetica,Georgia;font-size: 28px;line-height:26px;"> <span style="filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;">~ ~ dit is een tekst</span> met verschillende <b>opacity-waarden</b> bestudeer de <span style="filter:alpha(opacity=90);-moz-opacity:.90;opacity:.90;">code maar~ ~</span> </div>

Met dank aan Mandarin Design

---

Zie ook het vervolg op deze tutorial en al mijn andere opacity en MSIE filter tutorials.

 

Start | Tutorials | Korte Lesjes | CSS | Fonts | Filters | Links | Allerlei | Zoeken | PSP-varia | P-Filiaal