Nodig: Microsoft Internet Explorer.
(Ik heb alleen de code voor de Internet Explorer vermeld, dus de voorbeelden hieronder werken niet in Mozilla Firefox).
Deel 1 - Alpha Opacity filter
Met de Alpha Opacity filter (van Microsoft Internet Explorer) kun je interessante effecten bereiken zonder dat je een beeldbewerkingsprogramma nodig hebt. Maar dan moet je wel een up-to-date versie van de Internet Explorer hebben!
We nemen deze afbeelding als uitgangspunt:
Hieronder de code om het plaatje te vervagen:
<IMG style="filter:alpha(opacity=50,style=0)" src="afbeelding.jpg">
Zie hier het resultaat:
Omdat voor style=0 gekozen is, is de vervaging gelijkmatig over de hele afbeelding verspreid.
* * *
De opacity/vervaging loopt van 0 tot 100. Hoe lager het getal hoe groter de mate van vervaging.
Er zijn in totaal 4 stijlen: 0, 1, 2, 3.
0 = uniform, 1 = lineair, 2 = radiaal en 3 = rechthoekig.
Hieronder een aantal voorbeelden:
De code:
<IMG style="filter:alpha(opacity=80,style=1)" src="afbeelding.jpg">
Zo ziet het er dan uit:
* * *
De code:
<IMG style="filter:alpha(opacity=50,style=2)" src="afbeelding.jpg">
Zo ziet het er uit:
* * *
De code:
<IMG style="filter:alpha(opacity=100,style=3)" src="afbeelding.jpg">
En hieronder het resultaat:
* * *
Hieronder zie je hoe de Alpha Opacity filter in combinatie met CSS toegepast kan worden. Ga er maar met je muis overheen. Verzonnen door Brett Merkey.
De code bestaat uit 2 delen:
Zie ook mijn tutorial over gebosseleerde en gegraveerde afbeeldingen met vervaging.
En mijn opacity tutorials!
Start |
Tutorials |
Korte Lesjes |
CSS |
Fonts |
Filters |
Links |
Allerlei |
Zoeken |
PSP-varia |
P-Filiaal