Nodig: een up-to-date versie van Microsoft Internet Explorer.
De voorbeelden hieronder werken niet in Mozilla Firefox.

 

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

 

Opacity (transparantie) m.b.t. tekst, deel 3 (CSS)

In deel 1 en deel 2 heb ik verteld dat je opacity ook op tekst kunt toepassen. Behalve de verschillende opacity-waarden, kun je ook aangeven wat voor opacity-stijl er gebruikt moet worden en op welk punt de vervaging moet beginnen en ophouden.

Maar voordat ik hierover verder ga, heb ik een zeer belangrijke opmerking. Vermeld een achtergrondkleur of achtergrondafbeelding in je code. Als je de achtergrond niet definieert of er transparant van maakt, krijg je rafelige randen. Kijk maar:

Plaatjesmakerij

Hieronder dezelfde tekst, maar nu met background:#eee (de kleur van mijn webpagina):

Plaatjesmakerij

Groot verschil nietwaar?

* * *

In mijn alpha opacity-les heb ik plaatjes laten zien met 4 verschillende stijlen. Diezelfde stijlen kunnen ook op tekst toegepast worden. Zie hieronder een voorbeeld van

stijl 1, opacity-waarde 80:

Plaatjesmakerij

stijl 2, opacity-waarde 80:

Plaatjesmakerij

De code voor deze 2 voorbeelden:

1. <div style="color:darksalmon; width:65%; background:#eee; filter:alpha(opacity=80, style=1); font-family: Arial Black; font-size:36pt;">Plaatjesmakerij</div> 2. <div style="color:darksalmon; width:65%; background:#eee; filter:alpha(opacity=80, style=2); font-family: Arial Black; font-size:36pt;">Plaatjesmakerij</div>

* * *

Als je de vervaging alleen maar links wilt laten beginnen, laat je de opacity op 100 staan, maar zul je iets extra's moeten toevoegen:

StartX=20, FinishX=0

Plaatjesmakerij

Of StartX=60, FinishX=0

Plaatjesmakerij

Of StartX=100, FinishX=0

Plaatjesmakerij

20 geeft dus weinig vervaging en bij 100 breidt het zich juist uit.

De code voor de 3 voorbeelden:

1. <div style="color:darksalmon; width:65%; background:#eee; filter:alpha(opacity=100, FinishOpacity=0, Style=1, StartX=20, StartY=0, FinishX=0, FinishY=0); font-family: Arial Black; font-size:36pt;">Plaatjesmakerij</div> 2. <div style="color:darksalmon; width:65%; background:#eee; filter:alpha(opacity=100, FinishOpacity=0, Style=1, StartX=60, StartY=0, FinishX=0, FinishY=0); font-family: Arial Black; font-size:36pt;">Plaatjesmakerij</div> 3. <div style="color:darksalmon; width:65%; background:#eee; filter:alpha(opacity=100, FinishOpacity=0, Style=1, StartX=100, StartY=0, FinishX=0, FinishY=0); font-family: Arial Black; font-size:36pt;">Plaatjesmakerij</div>

* * *

De vervaging van bovenaf laten beginnen kan ook. Laat de opacity op 100 staan.

StartY=100, FinishY=0

Plaatjesmakerij

De code:

<div style="color:darksalmon; width:65%; background:#eee; filter:alpha(opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=100, FinishX=0, FinishY=0); font-family: Arial Black; font-size:36pt;">Plaatjesmakerij</div>

* * *

Bij het alpha filter-onderdeel van de MSDN website van Microsoft krijg je de gelegenheid om te experimenteren met de verschillende opacity-waarden en stijlen. Dan zie je gelijk wat er allemaal mogelijk is.

* * *

---

Zie ook mijn andere opacity tutorials:

Opacity - CSS
Opacity - Javascript
Gradual Highlight Image Script - CSS/Javascript
Opacity en tekst, deel 1 - CSS
Opacity en tekst, deel 2 - CSS
Opacity: afbeelding en tekst - CSS
Alpha/Opacity Alg.
Emboss/Engrave/Opacity filters
Transparant tekstvak - CSS
Transparant venster - PSP

 

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