Transparante kleuren in CSS
In het artikel "Figuren transparant maken met CSS" wordt besproken hoe je figuren (en ook andere HTML-elementen zoals <p> en <div>) in meer of mindere mate transparant kunt maken. Dit gaat echter niet op voor teksten en randen. Toch kun je ook die doorzichtig maken met behulp van CSS.
Hieronder zie je een tabel. De randen rond de cellen worden –van links naar rechts– steeds vager.
De tekst in de bovenste rij vervaagt ook van links naar rechts. De tekst in de onderste rij vervaagt echter van rechts naar links.
| Tekst | Tekst | Tekst | Tekst | Tekst |
| Tekst | Tekst | Tekst | Tekst | Tekst |
Op deze pagina wordt besproken hoe je tekst en randen meer of minder doorzichtig kunt maken. De code van het voorbeeld kun je downloaden om zelf te gebruiken.
- Er worden twee items besproken:
- Het alfa-kanaal in combinatie met RGB- en HSL-kleurdefinitie.
- Toepassing in je website.
- Een kleur definieer je in HTML met behulp van de bijbehorende RGB-code of met behulp van een standaard kleurnaam. In CSS kun je naast RBG ook HSL gebruiken om kleuren op te geven. De systemen RGB en HSL worden besproken in het item Kleurcodes voor tekst, links en achtergrond.
- Om in CSS een kleur te definiëren met RGB gebruik je bijvoorbeeld:
color:#fa2367.
Je kunt ook de rgb-function gebruiken, bijvoorbeeld:
color:rgb(250, 35, 103).
De drie getallen geven de waarde van rood, groen en blauw aan. Voor elke waarde geldt: 0 ≤ getal ≤ 255. - Om in CSS een kleur te definiëren met HSL gebruik je de hsl-function, bijv.:
color:hsl(341, 96%, 56%).
Het eerste getal geeft de verdraaiing van het kleurenwiel aan, in graden. Dat is een geheel getal waarvoor geldt: 0 ≤ getal ≤ 355. Het tweede en derde getal zijn het percentage van respectievelijk de verzadiging en de helderheid. Ook dit zijn gehele getallen: 0 ≤ getal ≤ 100.
- De definitie van transparantie (eigenlijk: dekkingsgraad) van HTML-elementen zoals <p> en <div>
verwijs ik naar het item Figuren transparant maken met CSS.
De dekkingsgraad is het tegenovergestelde van de transparantie. - Om de dekkingsgraad aan te geven van een kleur is het alfa-kanaal bedacht. Eerst in software voor fotobewerking, daarna ook in CSS3.
- Om dit in CSS3 te realiseren zijn uitbreidingen gemaakt van de functions rgb en hsl:
- rgba(r,g,b,a). De betekenis van de parameters r, g en b is zoals hierboven is beschreven
voor rgb(r,g,b).
De parameter a definieert de dekkingsgraad (opacity). Het is een getal tussen 0 en 1. 1 = volledige dekking, 0 = geen dekking, dus volledig transparant. - hsla(h,s,l,a). De betekenis van de parameters h, s en l is zoals hierboven is beschreven
voor hsl(h,s,l).
De parameter a definieert de dekkingsgraad (opacity), op precies de zelfde manier als bij rgba(r,g,b,a).
- rgba(r,g,b,a). De betekenis van de parameters r, g en b is zoals hierboven is beschreven
voor rgb(r,g,b).
- In het voorbeeld wordt rgba(0,0,127,a) (donkerblauw) gebruikt voor de randen en rgba(127,0,0,a) (maroon) voor de tekst. Er is gebruik gemaakt van een <table> om het netjes op het scherm te krijgen.
- De dekkingsgraad van de randen is gedefinieerd in de classes border_1000 t.m. border_100.
- De dekkingsgraad van de tekst is gedefinieerd in de classes tekst_1000 t.m. tekst_100.
- De combinatie van border en tekst is gemaakt door aan de betreffende tabel-cellen twee classes mee te geven:
één voor de rand en één voor de tekst, gescheiden door een spatie. Let op de manier waarop de
verschillende classes in het voorbeeld zijn gebruikt.
Het meegeven van meerdere classes of id's aan een element is een efficiënte methode om verschillende eigenschappen te combineren.
Gebruik:
- De code van het voorbeeld staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code ziet er als volgt uit:
(Zet dit in de <HEAD>).
(Dit staat in de <BODY>).<style>
td { width:100px; height:50px; text-align:center }
.border_1000 { border:2px solid rgba(0,0,127,1) }
.border_775 { border:2px solid rgba(0,0,127,.775) }
.border_550 { border:2px solid rgba(0,0,127,.55) }
.border_325 { border:2px solid rgba(0,0,127,.325) }
.border_100 { border:2px solid rgba(0,0,127,.1) }
.tekst_1000 { color:rgba(127,0,0,1) }
.tekst_775 { color:rgba(127,0,0,.775) }
.tekst_550 { color:rgba(127,0,0,.55) }
.tekst_325 { color:rgba(127,0,0,.325) }
.tekst_100 { color:rgba(127,0,0,.1) }
</style>
<table border="0" cellpadding="0" cellspacing="2" align="center"><tr>
<td class="border_1000 tekst_1000">Tekst</td>
<td class="border_775 tekst_775">Tekst</td>
<td class="border_550 tekst_550">Tekst</td>
<td class="border_325 tekst_325">Tekst</td>
<td class="border_100 tekst_100">Tekst</td>
</tr><tr>
<td class="border_1000 tekst_100">Tekst</td>
<td class="border_775 tekst_325">Tekst</td>
<td class="border_550 tekst_550">Tekst</td>
<td class="border_325 tekst_775">Tekst</td>
<td class="border_100 tekst_1000">Tekst</td>
</tr></table>
Downloaden:
Druk op de knop:
File: voorb355.zip, 534 bytes.
