Skip links en inhoudsopgave
Ondoorzichtige tekst op meegroeiende doorzichtige achtergrond, gebruikt opacity

Korte omschrijving

Achter de tekst staat een achtergrond die doorzichtig is. De tekst zelf is niet doorzichtig. Hoogte en breedte van de achtergrond passen zich aan de hoeveelheid tekst aan.

Alles op deze site kan vrij worden gebruikt. Je gebruikt het wel op eigen risico: als er ergens fouten in zitten, ben ik daar niet verantwoordelijk voor en ook niet voor eventueel daardoor aangerichte schade in welke vorm dan ook. Een link naar https://www.css-voorbeelden.nl is niet verplicht, maar wordt wel gewaardeerd.

Opmerkingen

Zonder css ziet de tekst op de pagina er volkomen normaal uit, alsof er helemaal geen opmaak is gebruikt. In de html staat namelijk alleen de tekst, meer niet. Dit is belangrijk voor spraakbrowsers en dergelijke, die de tekst vaak voorlezen zoals hij in de html staat.

Op de site staat ook een methode die gebruikt maakt van de css3-eigenschap rgba() (en voor Internet Explorer ouder dan versie 9 van 'n filter dat op dezelfde manier werkt). Het belangrijkste verschil is dat de methode met rgba() simpeler is en dat de kinderen de doorzichtigheid niet erven. Bij opacity gaat de doorzichtigheid van de ouder over op de kinderen. Maar rgba() werkt alleen met effen kleuren, niet met afbeeldingen en dergelijke

Internet Explorer 9 ondersteunt rgba() ook eindelijk.

Links in deze uitleg, vooral links naar andere sites, kunnen verouderd zijn. Op de pagina met links vind je steeds de meest recente links.

Alles op deze site is gemaakt op een systeem met Linux. Daarbij is vooral gebruik gemaakt van Quanta Plus, GIMP en Firefox met extensies. De pdf-bestanden zijn gemaakt met LibreOffice.

Vragen of opmerkingen? Fout gevonden? Ga naar het forum.

Iets gevonden waar je wat aan hebt? Mooi. Als je je waardering wilt uiten, maak dan een donatie over aan War Child Nederland, een organisatie die kinderen uit oorlogsgebieden helpt hun trauma's te verwerken. Of - nog beter - wordt donateur:
War Child Nederland

Achterliggend idee

Doorzichtigheid werd tot voor kort niet ondersteund in de standaard van css (versie 2.1). In versie 3 wordt het wel ondersteund. Alle nieuwe browsers ondersteunen het. Internet Explorer (ook versie 7 en 8) heeft een eigen niet-standaardmanier. 't Blijft natuurlijk wel Microsoft, en waarom zou je 't simpel doen als je 't ook ingewikkeld kunt maken.

(Internet Explorer 9 ondersteunt eindelijk de standaardmanier.)

Omdat Microsoft een niet-standaardmanier gebruikt is de css niet valide, tenzij je deze opbergt in een conditional comment dat alleen voor Internet Explorer is bestemd.

In dit geval zet ik het gewoon bij de rest van de style, omdat ik exact weet waarom het niet wordt gevalideerd. En dan til ik daar niet zo zwaar aan.

Als ik een doorzichtige achtergrond heb kan ik daar op 'n aantal manieren tekst overheen zetten. Maar ik kan het niet in hetzelfde element als de achtergrond zetten, want dat hele element heeft doorzichtigheid, en ook alle kind-elementen daarbinnen, dus ook de tekst. Daar is op geen enkele manier iets aan te doen. Je zult dus 'n andere manier moeten gebruiken, waarbij de tekst buiten de doorzichtige div wordt gezet. De truc is om doorzichtige div en tekst beide in een eigen div te zetten. Hierdoor heeft de doorzichtige div geen invloed op de tekst.

Deze twee divs worden dan samen in een gezamenlijke ouderdiv gezet, die ik een position geef zodat ik de twee divs kan positioneren ten opzichte van de gezamenlijke ouderdiv.

De div met de doorzichtige achtergrond geef ik een hoogte en breedte in em's. Daardoor verandert de grootte - en dus de achtergrond - van deze div als ik de lettergrootte verander. Deze div geef ik geen position, die staat dus op de normale plaats.

De div met de tekst zet ik onder de div met de achtergrond. Maar omdat deze binnen dezelfde ouderdiv staat als de div met de achtergrond, kan ik hem terug omhoog zetten, waardoor de tekst over de doorzichtige achtergrond komt te staan. Breedte en hoogte van de achtergrond veranderen mee met de lettergrootte.

Tot voor niet al te lang geleden waren er drie verschillende methoden om iets doorzichtig te maken. Nu zijn het er nog maar twee. Op Internet Explorer na werken alle browsers met de standaard-eigenschap opacity. (Internet Explorer 9 ondersteunt opacity ook.) Het gebruik van -moz-opacity voor gecko-georiënteerde browsers als Firefox is niet meer nodig.

Beschrijving van code en css

De code die te maken heeft met de basis van dit voorbeeld is rood gekleurd. Alle voor dit voorbeeld niet-essentiële code is bruin.

Deze uitleg hoort bij het voorbeeld dat in de download zit. Het voorbeeld uit de download verschilt iets van het voorbeeld hier op de site. In de download ontbreken bijvoorbeeld de witte vlakken met de links. Ook in de kopregels zit vaak wat verschil. Daarnaast kunnen er nog andere (meestal kleine) verschillen zijn.

Als je deze uitleg leest naast de broncode van het voorbeeld op de site, kan het dus bijvoorbeeld zijn dat 'n h1 uit de css bij 'n <h2> uit de html hoort. Maar het gaat niet om hele grote, fundamentele afwijkingen.

Als je dit lastig vindt, downloadt dan de hele handel (ga terug naar het voorbeeld en kies daar voor downloaden). In de download zit 'n voorbeeld dat wel naadloos aansluit op de uitleg in de download.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">

Een document moet met een doctype beginnen om weergaveverschillen tussen browsers te voorkomen. Zonder doctype is de kans op verschillende (en soms volkomen verkeerde) weergave tussen verschillende browsers heel erg groot.

Geldige doctypes vind je op www.w3.org/QA/2002/04/valid-dtd-list.html.

Gebruik het volledige doctype, inclusief de url, anders werkt het niet goed.

De toevoeging achter <html hierboven hoort bij het gekozen doctype.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Zorgt dat de browser letters met accenten en dergelijke goed kan weergeven. Als je als doctype html hebt gekozen, moet je niet eindigen op />, maar op > (dit geldt voor alles in de head wat eindigt op />).

utf-8 is de beste charset (tekenset), omdat deze alle talen van de wereld (en nog heel veel andere extra tekens) bestrijkt, maar toch niet meer ruimte inneemt voor de code dan nodig is. Als je utf-8 gebruikt, hoef je veel minder entiteiten (&auml; en dergelijke) te gebruiken, maar kun je bijvoorbeeld gewoon ä gebruiken.

Deze regel moet zo hoog mogelijk komen te staan, als eerste regel binnen de head, omdat hij anders door sommige browsers niet wordt gelezen.

<link rel="stylesheet" type="text/css" href="../../css/naam-van-stylesheet.css" />

Deze regel heeft in dit voorbeeldbestand geen enkel nut. Normaal genomen is het een verwijzing naar een extern stylesheet, waarin de style staat. In dit voorbeeld verwijst de href naar een niet bestaand bestand.

De bedoeling is dat je bovenstaande regels aanpast voor je eigen bestand. De hele style, die onder deze regels in de <head> staat, wordt dan in het externe bestand geplaatst waar de href naar verwijst. In dat bestand komt de style precies zo te staan zoals die nu in de <head> staat. Het bestand moet eindigen op .css.

Voordeel van een externe stylesheet is onder andere, dat deze geldig is voor alle pagina's waaraan deze is gelinkt. 'n Verandering in de lay-out hoef je dan maar op één enkele centrale plek te aan te brengen.

In die externe stylesheet zet je alles wat in dit voorbeeld tussen <style type="text/css"> en </style> staat (zonder deze begin- en eindregel).

Deze regel is gewoon 'n link die naar 'n bestand elders verwijst, waar de css in staat. Op de plaats van "../../css/naam-van-stylesheet.css" moet je pad naar en naam van jouw stylesheet invullen.

<style type="text/css">

Voor de duidelijkheid staat de style hier in het bestand zelf, maar het is beter deze in een apart stylesheet te zetten, zoals hierboven beschreven. In dat stylesheet komt alles wat tussen bovenstaande regel en </style> staat.

Technisch gezien is er geen enkel bezwaar om het in die stylesheet te zetten met dezelfde vreselijke lay-out als die ik in dit voorbeeld gebruik. Maar als je dat doet, garandeer ik je hele grote problemen omdat het volstrekt onoverzichtelijk is. Ik gebruik alleen deze lay-out omdat het anders veel te veel regels worden.

Voorbeeld van 'n goede lay-out in je css:


	div#header-buiten
	{
	    position: absolute;
	    right: 16px;
	    width: 100%;
	    height: 120px;
	    background: yellow;
	}

	div#header-binnen
	{
	    margin-left: 16px;
	    height: 120px;
	    text-align: center;
	}
body margin: 0; padding: 0;

Slim om te doen om kleine verschillen tussen browsers te voorkomen.

font-family: Arial, Helvetica, sans-serif;

Lettersoort. Als er geen Arial is, wordt gezocht naar Helvetica. Als dat er ook niet is in ieder geval 'n lettersoort zonder schreef (dwarsstreepjes).

font-size: 110%;

Iets groter dan standaard. 't Zal de leeftijd zijn, maar ik vind de standaardgrootte wat te klein.

Ik gebruik hier % als eenheid, en voor alle andere lettergroottes gebruik ik em. Dat komt door Internet Explorer. Als ik als maateenheid iets als px neem, kunnen gebruikers van Internet Explorer de lettergrootte niet veranderen.

Maar als ik overal em neem als maateenheid, wat dan voor de hand zou liggen, kom ik in de problemen met versies van Internet Explorer ouder dan versie 8. De stappen van de verkleining of vergroting zijn in die browsers zo groot, dat 't gelijk onleesbaar klein of absurd groot is.

Als je nou echter bij body geen em gebruikt (font-size: 1.1em; zou hetzelfde moeten zijn als font-size: 110%;), dan is de lettergrootte in Internet Explorer te veranderen, en in oudere versies dan versie 8 zijn de tussenstappen teruggebracht tot normale grootte.

Dit werkt ook als je als lettergrootte 100% invult. Dat heeft geen enkele invloed op de lettergrootte, behalve dus dat de tussenstappen in oudere versies nu normaal werken.

In Internet Explorer 8 is deze bug eindelijk gerepareerd. Aangezien we waarschijnlijk nog vele jaren met oudere versies dan Internet Explorer 8 zitten opgescheept, zal deze truc ook nog jaren moeten worden toegepast.

color: #000;

Tekst zwart.

Hoewel dit de standaardkleur is, geef ik de kleur toch op. Hieronder geef ik een achtergrondkleur op. Sommige mensen hebben zelf de kleur en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als ik nu de achtergrondkleur verander, maar niet de tekstkleur, loop ik het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

Door beide op te geven, weet ik redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt, is er nog niets aan de hand, want dan veranderen achtergrond- en tekstkleur geen van beide.

background: #ff9 url(031-pics/tekst-031-bg.jpg);

Een achtergrondkleurtje geven voor de mensen die plaatjes uit hebben staan. Het plaatje zelf is een klein vierkant plaatje, dat wordt herhaald tot de achtergrond volledig is gevuld.

div#buiten

De div met id="buiten". Dit is de div aan de buitenkant, ten opzichte waarvan de hierbinnen liggende elementen worden gepositioneerd.

position: relative;

Hoewel ik hier verder niets invul, is dit toch nodig. Als deze div geen position heeft, kan ik ook geen kind-elementen ten opzichte van deze div positioneren.

width: 26em;

Breedte geven om te kunnen centreren. Ik neem de breedte 1 em groter dan die van div#onder waarin de tekst komt te staan, omdat de doorzichtige achtergrond 1 em breder wordt dan div#onder. Dan kan ik voor 'n soort padding zorgen tussen tekst en rand van de achtergrond.

Als maateenheid moet ik de relatieve eenheid em nemen, want andere eenheden veranderen niet mee bij Internet Explorer.

margin-top: 60px auto 0;

Omdat hier maar drie waarden zijn ingevuld, wordt automatisch voor de waarde van links dezelfde waarde als van rechts gebruikt: auto.

60 px: afstand van bovenkant venster van de browser tot div.

auto: links en rechts evenveel afstand, oftewel: horizontaal gecentreerd.

0: geen afstand aan de onderkant.

div#binnen

De div met id="binnen". Dit is de div waarbinnen de doorzichtige achtergrond komt te staan.

width: 26em; height: 9.5em;

Breedte en hoogte. Als maateenheid moet ik de relatieve eenheid em nemen, want andere eenheden veranderen niet mee bij Internet Explorer.

Bij deze div is de hoogte ook belangrijk, omdat die ook de hoogte van de doorzichtige achtergrond bepaalt. Ik neem breedte en hoogte 1 em meer dan die van div#onder met de tekst, zodat ik kan zorgen voor 'n soort padding tussen tekst en rand van de achtergrond.

Hoe groot deze eenheden moeten zijn is 'n kwestie van uitproberen met de hoeveelheid tekst die erin komt te staan. Als 't eenmaal past, zal 't ook blijven passen omdat de breedte en hoogte mee veranderen met de lettergrootte.

background: black;

De zwarte achtergrond, die doorzichtig wordt gemaakt.

opacity: 0.5;

De standaardmanier om doorzichtigheid mee aan te geven. De waarden lopen van 0 tot 1. 0.5 is dus de helft: 50.

filter: alpha(opacity=50);

Deze opdracht is voor Internet Explorer 7 en 8. Hier lopen de waarden van 0 tot 100. Dit is geen valid css, maar persoonlijk til ik daar niet zo zwaar aan: ik weet precies waarom de validator begint te mopperen. Zie verder bij Bekende problemen.

Internet Explorer 9 ondersteunt gewoon opacity.

div#onder

De div met id="onder". In deze div komt de tekst te staan. Omdat deze div buiten div#binnen staat, is hij niet doorzichtig. We moeten alleen de tekst goed op de doorzichtige div hierboven plaatsen, zodat er niet 'n deel ergens buiten de achtergrond komt te staan.

position: absolute;

Om de div op de juiste plaats te kunnen positioneren. Het eerste ouder-element met een positie is div#buiten, dus er wordt gepositioneerd ten opzichte van div#buiten. En dat is precies de bedoeling, want daarbinnen staat ook div#binnen met de doorzichtige achtergrond.

top: 0.5em;

De div komt ten opzichte van div#buiten te staan. Ik heb hierboven bij div#binnen 'n hoogte van 9.5 em opgegeven. Dat is ongeveer 1 em te veel. Dus ik kan bovenaan 'n afstand van 0.5 em geven: 'n soort padding waar je wel de doorzichtige achtergrond ziet, maar geen tekst. Ik kan ook top: 0; en padding: 0.5em; gebruiken, maar dit is simpeler.

En weer em als eenheid: de tekst moet op precies dezelfde manier van grootte veranderen als de bijbehorende achtergrond.

left: 0.5em;

Zelfde verhaal als hierboven bij top: 0.5em; maar nu voor de zijkant.

width: 25em;

De totale breedte van deze div is nu ook 26 em. Althans: voor 't oog. 25 em in het midden, links 'n afstand van 0.5em, dus rechts nog 'n kier van 0.5em waar je wel achtergrond maar geen tekst ziet. Voor 't oog dus net of 't gecentreerd staat met 'n padding links en rechts.

color: yellow;

De kleur van de tekst. Je kunt elke kleur nemen die je wilt, als 't maar leesbaar blijft. Geel op licht-oranje is niet zo'n goed idee.

De code aanpassen aan je eigen ontwerp

Toegankelijkheid en zoekmachines

Toegankelijkheid (accessibility in het Engels) is belangrijk voor bijvoorbeeld blinden die een spraakbrowser gebruiken, of voor motorisch gehandicapte mensen die moeite hebben met het bedienen van een muis. Een spider van een zoekmachine (dat is het programmaatje wat de site indexeert voor de zoekmachine) is te vergelijken met een blinde. Als je je site goed toegankelijk maakt voor gehandicapten, is dat dus gelijk goed voor een hogere plaats in een zoekmachine. Dus als je 't niet uit sociale motieven wilt doen, kun je 't uit egoïstische motieven doen.

(Op die plaats in de zoekmachine heb je maar beperkt invloed. De toegankelijkheid van je site is maar één van de factoren, maar zeker niet onbelangrijk.)

Als je bij het maken van je site al rekening houdt met toegankelijkheid, is dat nauwelijks extra werk. 't Is ongeveer te vergelijken met inbraakbescherming: doe dat bij 'n nieuw huis en 't is nauwelijks extra werk, doe 't bij 'n bestaand huis en 't is al snel 'n enorme klus.

Enkele tips die helpen bij toegankelijkheid:

Getest in

Laatst gecontroleerd op 26 september 2011.

(Internet Explorer 6 is voor het laatst gecontroleerd op 10 november 2009. Op deze browser test ik niet meer. Maar omdat de code niet is veranderd, neem ik aan dat dit voorbeeld ook nog werkt in Internet Explorer 6.)

Dit voorbeeld is getest in Firefox, Opera, Safari, Google Chrome, Internet Explorer 6, 7, 8 en 9 in de resoluties 800x600, 1024x768 en 1280x1024. Steeds met de laatste versie van die browsers, omdat ik geen zin heb om rekening te houden met mensen die met zwaar verouderde browsers surfen. Dat is trouwens vragen om ellende, want updates van browsers hebben heel vaak met beveiligingsproblemen te maken. In de resoluties 1024x768 en 1280x1024 is ook in- en uitzoomen en een kleinere en grotere letter getest. Er is ingezoomd en vergroot tot zover de browser kan, maar niet verder dan tot 200%. Eventuele problemen staan bij Bekende problemen.

Naast deze 'gewone' browsers is alles ook getest in Lynx, WebbIE en Jaws. Lynx is een browser die alleen tekst laat zien en geen css gebruikt. WebbIE is een browser die gericht is op mensen met een handicap. Jaws is een screenreader, zoals die door blinden wordt gebruikt. Als het voorbeeld in deze drie programma's toegankelijk is, zou het in principe toegankelijk moeten zijn in alle aangepaste browsers en dergelijke. En dus ook voor zoekmachines, want een zoekmachine is redelijk vergelijkbaar met een blinde. Eventuele opmerkingen over de toegankelijkheid van dit voorbeeld staan bij Opmerkingen.

Nieuwe browsers test ik pas als ze uit het bèta-stadium zijn, omdat er anders 'n redelijke kans is dat ik 'n bug zit te omzeilen die voor de uiteindelijke versie nog gerepareerd wordt. Dit voorbeeld is alleen getest in de hierboven met name genoemde browsers. Vragen over niet-geteste browsers kan ik niet beantwoorden, en het melden van fouten in niet-geteste browsers heeft ook geen enkel nut. (Melden van fouten, problemen, enz. in wel geteste browsers: graag!)

Wijzigingen

1 mei 2008:

Nieuw opgenomen.

10 april 2009:

Tekst aangepast aan de nieuw verschenen Internet Explorer 8. De code is niet veranderd.

26 september 2011:

Tekst aangepast aan de nieuw verschenen Internet Explorer 9. De code is niet veranderd.

Bekende problemen

Valideren

De opdracht voor doorzichtigheid is onderdeel van css 3. Om valide code te krijgen moet je dus valideren op CSS 3. Maar ook dan krijg je geen valide code, omdat de opdracht voor Internet Explorer 7 en 8 geen standaard-css is.

Persoonlijk vind ik dit geen probleem, omdat ik precies weet waarom de css niet valid is. Maar als je erg fundamentalistisch bent op dit gebied kun je de regel voor Internet Explorer 7 en 8 opnemen in een conditional comment (als je zo fel bent op valid code ga ik ervan uit dat je weet wat conditional comments zijn).