In de begindagen van het internet was transparantie alleen mogelijk d.m.v. GIF-bestanden. Deze hadden wat rafelige randjes omdat er geen bepaalde mate van transparantie mogelijk was. Het was gewoon transparant of niet-transparant. Toen het PNG-bestand werd geintroduceerd was dat wel mogelijk en konden er mooie gelijkmatige verloopjes naar transparantie worden gemaakt binnen een afbeelding.
Door bijvoorbeeld menu-items te voorzien van een achtergrondafbeelding en deze bij mouse-over te vervangen door dezelfde afbeelding met transparantie konden gelikte menu-effecten worden gemaakt. En door met behulp van javascript afbeeldingen te laten overvloeien werd het allemaal nog mooier.
Inmiddels is het mogelijk om met CSS transparantie toe te passen. Op alle elementen. Dus of je nu een paragraaf, een afbeelding, en kopregel of een div hebt, je kunt het transparant maken. Met onderstaande code maak je alle afbeeldingen transparant met een doorzichtigheid van 50%. Je maakt dan gebruik van opaciteit.
Wat is Opaciteit
Opaciteit is een maat voor de lichtondoorlatendheid van een materiaal. Wanneer je opaciteit instelt is er bij een hoge waarde dus weinig transparantie. Bij een opaciteit van '0' is iets dus 100% transparant.
img {
opacity: 0.5;
filter: alpha(opacity=50); /* Voor IE8 en ouder */
}
Dat is in de meeste gevallen natuurlijk teveel van het goede. Dus pas je dat toe op alleen een bepaalde afbeelding door er een class aan toe te kennen.
<img class="trans-image" src="/afbeelding.jpg">
img.trans-image {
opacity: 0.5;
filter: alpha(opacity=50); /* Voor IE8 en ouder */
}
In het bovenstaande geval zal dus iedere afbeelding met de class 'trans-image' doorzichtig worden.
Zoals gezegd kun je transparantie toekennen aan ieder HTML-element. In de onderstaande code heeft een div een eigen id met de naam 'trans-div-501' en dus zal alleen deze div transparantie krijgen. Een beetje dan: bij een opaciteit van 90% is er bijna geen transparantie.
<div id="trans-div-501">
Deze div heeft een eigen id met de naam 'trans-div-501' en dus
zal alleen deze div transparantie krijgen. Een beetje dan: bij een opaciteit
van 90% is er bijna geen transparantie.
</div>
div#trans-div-501 {
opacity: 0.9;
filter: alpha(opacity=90); /* Voor IE8 en ouder */
}
Een transparante kleur met RGBA
Een transparante achtergrond of een transparante tekst doe je op een andere manier. Daarvoor gebruik je RGBA. Hiermee specificeer je een kleur in RGB (rood, groen en blauw) en neem je de mate van opaciteit mee als laatste argument.
div.trans-groen {
background-color: rgba(215, 221, 100, 0.5);
}
Als je tekst transparantie wilt geven, gaat dat net even anders.
h2.trans-groen,
p.trans-groen {
color: rgba(215, 221, 100, 0.2);
}
De tekst van zowel de h2 als de paragrafen met de classe 'trans-groen' zullen transparantie krijgen. Misschien wel iets teveel want bij een opaciteit van 20% krijg je een doorzichtigheid van 80%! (Let op de komma na 'h2.trans-groen': deze is noodzakelijk als CSS moet worden toegepast op meerdere elementen.
Een handig linkje
Gemak dient de mens dus ik maak vaak gebruik van deze link om even snel iets te maken.
css3maker.com
Over de auteur:
Jan van de Laar is oprichter en eigenaar van het bedrijf VDL Webdevelopment.
Hij is gespecialiseerd in systemen als Wordpress en Joomla alsmede in HTML en CSS.
Naast VDL Webdevelopment is Jan tevens oprichter en eigenaar van de Joomla Update Services