Uitleg schaduwen zonder gebruik van afbeeldingen (box-shadow)

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

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

p

Alle paragrafen. Een aantal instellingen is voor alle paragrafen hetzelfde, dus die kan ik hier in één keer opgeven. Dan hoef ik later bij elke paragraaf apart alleen nog maar de afwijkende instellingen op te geven.

In elke div staan in principe twee paragrafen. In de linker staat een afbeelding, in de rechter een werkend voorbeeld. In sommige divs staat nog 'n extra paragraaf, omdat Internet Explorer 7 en 8 die nodig hebben, maar eigenlijk zouden die niet nodig moeten zijn. In Internet Explorer 9 zíjn ze gelukkig ook niet meer nodig, want dat ondersteunt border-radius en box-shadow.

float: right;

Zet zo hoog mogelijk neer en dan zover mogelijk naar rechts. Hierdoor komen álle paragrafen dus netjes op onder elkaar uitgelijnd tegen de rechterkant van de divs te staan. De <p>'s die links moeten komen te staan, zet ik zo meteen op hun plaats.

(Bij sommige paragrafen zijn kleine correcties nodig, omdat sommige iets breder zijn dan andere. Dat doe ik verderop in de css bij de afzonderlijke paragrafen.)

width: 270px;

Alle paragrafen worden even breed. Voor zover een paragraaf een afwijkende breedte heeft, geef ik dat later op met css voor die specifieke paragraaf.

height: 60px;

Alle paragrafen worden even hoog. In de linkerparagrafen komen afbeeldingen, die vaak hoger zijn dan 60 px. Maar dat maakt niet uit. overflow staat standaard op visible, dus de afbeeldingen zullen gewoon zichtbaar zijn.

Voor zover een paragraaf een afwijkende hoogte heeft, geef ik dat later op met css voor die specifieke paragraaf.

margin: 0;

Standaard heeft een paragraaf een marge aan boven- en onderkant. Die wil ik hier niet hebben, ik regel het hier zelf.

padding: 3px;

Kleine afstand tussen de inhoud van de paragraaf en de border. Bij de afbeeldingen maakt dat niets uit, maar de rechterparagrafen met de voorbeelden hebben meestal een border en er staat tekst in. Dit voorkomt dat de tekst tegen de border aan komt te staan.

font-size: 0.8em;

Iets kleinere letter, zodat de tekst niet gelijk uit de paragraaf knalt als iemand de letters iets vergroot. Als eenheid neem ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

Hoewel dit de standaardkleur is, geef ik de kleur toch op. Hieronder geef ik een achtergrondkleur op. Sommige mensen hebben zelf de voorgrond- en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als ik nu de achtergrondkleur verander, maar niet de voorgrondkleur, 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 voorgrondkleur geen van beide.

Ik heb dit ook al bij de body opgegeven, maar sommige mensen hebben bij álle elementen de kleuren veranderd. Het heeft immers weinig zin als ze dat alleen bij de body doen, terwijl de sitebouwer de kleuren ook bij bijvoorbeeld de paragrafen heeft aangepast.

background: white;

Achtergrondkleur wit. Als dat nodig is, verander ik dit later weer voor afzonderlijke paragrafen.

p#rechtsonder

De paragraaf met id="rechtsonder". Wordt in alle browsers hetzelfde weergegeven.

border: black solid 1px;

Zwarte rand. Deze is alleen maar gebruikt voor de duidelijkheid.

box-shadow: 5px 7px black;

Het eerste getal geeft de plaats en de breedte in horizontale richting aan. Een positief getal betekent, dat de schaduw rechts van het element komt. Een negatief getal zorgt ervoor, dat de schaduw links van het element komt te staan. De schaduw komt hier dus rechts te staan en is 5 px breed.

Het tweede getal geeft de plaats en de breedte in verticale richting aan. Een positief getal betekent, dat de schaduw onder het element komt. Een negatief getal zorgt ervoor, dat de schaduw boven het element komt te staan. De schaduw komt hier dus aan de onderkant te staan en wordt 7 px breed.

black is gewoon de kleur van de schaduw.

p#dubbel

De paragraaf met id="dubbel". Wordt in alle browsers hetzelfde weergegeven.

border: black solid 1px;

Zwarte rand. Deze is alleen maar gebruikt voor de duidelijkheid.

box-shadow: 5px 7px gray, -5px -7px black;

Er staan hier twee schaduwen aangegeven achter box-shadow, gescheiden door een komma. Dat levert geen enkel probleem op. De eerste opdracht zorgt voor de grijze schaduw rechtsonder, de tweede voor de zwarte schaduw linksboven. De opbouw van de schaduw is altijd hetzelfde, hoeveel schaduwen er ook staan.

Het eerste getal geeft de plaats en de breedte in horizontale richting aan. Een positief getal betekent, dat de schaduw rechts van het element komt. Een negatief getal zorgt ervoor, dat de schaduw links van het element komt te staan. De grijze schaduw komt dus rechts te staan, de zwarte schaduw links. Beide zijn 5 px breed.

Het tweede getal geeft de plaats en de breedte in verticale richting aan. Een positief getal betekent, dat de schaduw onder het element komt. Een negatief getal zorgt ervoor, dat de schaduw boven het element komt te staan. De grijze schaduw komt dus aan de onderkant te staan, de zwarte aan de bovenkant. Beide zijn 7 px breed.

gray en black zijn gewoon de kleuren van de schaduwen.

p#linksboven

De paragraaf met id="linksboven". Wordt in alle browsers hetzelfde weergegeven, hoewel voor Internet Explorer 7 en 8 een extra div nodig is.

border: black solid 1px;

Zwarte rand. Deze is alleen maar gebruikt omdat je anders, buiten de schaduw, geen ronde hoeken ziet.

box-shadow: -4px -5px #888;

Het eerste getal geeft de plaats en de breedte in horizontale richting aan. Een positief getal betekent, dat de schaduw rechts van het element komt. Een negatief getal zorgt ervoor, dat de schaduw links van het element komt te staan. De schaduw komt hier dus links te staan en is 4 px breed.

Het tweede getal geeft de plaats en de breedte in verticale richting aan. Een positief getal betekent, dat de schaduw onder het element komt. Een negatief getal zorgt ervoor, dat de schaduw boven het element komt te staan. De schaduw komt hier dus aan de bovenkant te staan en wordt 5 px breed.

#888 is gewoon de kleur van de schaduw: grijs.

border-radius: 10px;

Deze eigenschap zorgt voor de ronde hoeken. Omdat ik maar één maat opgeef, wordt de hoek gelijkmatig rond.

De schaduw moet dezelfde ronding volgen als de hoeken van het element waar de schaduw bij hoort. Als ik de schaduw helemaal niet zou verplaatsen (box-shadow: 0 0;), zou hij precies achter de paragraaf vallen, omdat hij precies dezelfde ronde hoeken heeft.

Maar omdat ik de schaduw wel heb verplaatst, komt hij rechtsboven de paragraaf te staan. Maar wel met dezelfde ronde hoeken als de paragraaf heeft.

p#linksboven-ie, p#rechtsonder-blur-ie, p#spread-ie, p#blur-neg-ie

De paragrafen met id="linksboven-ie", "rechtsonder-blur-ie", "spread-ie" en "blur-neg-ie".

Al deze paragrafen zijn alleen voor Internet Explorer 7 en 8 nodig. Ze verstoren de lay-out en worden daarom verborgen voor de browsers die ze niet nodig hebben. Voor Internet Explorer 7 en 8 tover ik ze later met aparte css voor die twee overjarige gedrochten weer tevoorschijn.

display: none;

Niet tonen. Omdat ik display: none; gebruik, zijn ze niet alleen onzichtbaar, maar nemen ze ook geen enkele ruimte in. Ze verpesten de lay-out dus ook niet.

Als ik visibility: hidden; zou gebruiken, zijn ze wel onzichtbaar, maar ze nemen dan nog steeds ruimte in en slopen dan dus nog steeds de lay-out.

p#rechtsonder-inset

De paragraaf met id="rechtsonder-inset". Wordt in alle browsers hetzelfde weergegeven, hoewel voor Internet Explorer 7 en 8 een extra span nodig is.

border: black solid 1px;

Zwarte rand. Deze is alleen maar gebruikt omdat je anders, buiten de schaduw, geen ronde hoeken ziet.

box-shadow: inset -4px -5px #999;

De waarde inset zorgt ervoor, dat de schaduw aan de binnenkant van de paragraaf komt te staan. Normaal genomen komt de schaduw aan de buitenkant te staan.

(Ik heb mij een bepaalde volgorde van kleuren en dergelijke aangewend. Normaal genomen zou ik om die reden inset achteraan hebben gezet. Op dit moment zit er echter in de css-validator een bug, waardoor hij dan een foutmelding geeft. Het gaat wel goed als inset vooraan wordt gezet. Overigens werkt het prima, waar het ook staat, alleen de validator geeft een foutmelding. Omdat die onterechte foutmeldingen nogal verwarrend zijn, pas ik de volgorde aan.)

Het eerste getal geeft de plaats en de breedte in horizontale richting aan. Omdat de waarde inset is gebruikt, werkt dit iets anders dan normaal. Een positief getal betekent nu, dat de schaduw links aan de binnenkant van het element komt te staan. Een negatief getal zorgt ervoor, dat de schaduw rechts aan de binnenkant komt te staan. De schaduw komt hier dus aan de rechterbinnenkant te staan en is 4 px breed.

Het tweede getal geeft de plaats en de breedte in verticale richting aan. Omdat de waarde inset is gebruikt, werkt dit iets anders dan normaal. Een positief getal betekent nu, dat de schaduw boven aan de binnenkant van het element komt te staan. Een negatief getal zorgt ervoor, dat de schaduw onder aan de binnenkant komt te staan. De schaduw komt hier dus aan de binnenkant van de onderkant te staan en wordt 5 px breed.

#999 is gewoon de kleur: grijs.

border-radius: 10px;

Deze eigenschap zorgt voor de ronde hoeken. Omdat ik maar één maat opgeef, wordt de hoek gelijkmatig rond.

De schaduw moet dezelfde ronding volgen als de hoeken van het element waar de schaduw bij hoort. Als ik de schaduw helemaal niet zou verplaatsen (box-shadow: inset 0 0;), zou hij precies achter de paragraaf vallen, omdat hij precies dezelfde ronde hoeken heeft.

Maar omdat ik de schaduw wel heb verplaatst, komt hij rechtsonder binnen de paragraaf te staan. Maar wel met dezelfde ronde hoeken als de paragraaf heeft.

p#rechtsonder-blur

De paragraaf met id="rechtsonder-blur". Wordt in alle browsers hetzelfde weergegeven, hoewel voor Internet Explorer 7 en 8 een extra div nodig is.

border: black solid 1px;

Zwarte rand. Deze is alleen maar gebruikt voor de duidelijkheid.

box-shadow: 5px 7px 20px black;

Het eerste getal geeft de plaats en de breedte in horizontale richting aan. Een positief getal betekent, dat de schaduw rechts van het element komt. Een negatief getal zorgt ervoor, dat de schaduw links van het element komt te staan. De schaduw komt hier dus rechts te staan en is 5 px breed.

Het tweede getal geeft de plaats en de breedte in verticale richting aan. Een positief getal betekent, dat de schaduw onder het element komt. Een negatief getal zorgt ervoor, dat de schaduw boven het element komt te staan. De schaduw komt hier dus aan de onderkant te staan en wordt 7 px breed.

Het derde getal zorgt voor het vervagen van de schaduw. Dit getal mag niet negatief zijn, want dan verdwijnt de hele schaduw. Hoe groter het getal is, hoe groter de afstand waarover de schaduw vervaagt.

black is gewoon de kleur van de schaduw.

p#spread

De paragraaf met id="spread". Wordt in alle browsers hetzelfde weergegeven, hoewel voor Internet Explorer 7 en 8 een extra div nodig is.

margin: 10px 1px 0 0;

De paragraaf boven deze heeft een vervagende schaduw aan de onderkant. Deze <p> heeft een vervagende schaduw aan de bovenkant. Daarom geef ik aan de bovenkant 10 px extra ruimte, zodat de schaduwen niet over elkaar heen komen te staan.

De meeste andere paragrafen met een schaduw hebben een border van 1 px breed. Deze paragraaf heeft dat niet. Daarom zet ik hem 1 px naar links, zodat hij toch op gelijke lijn komt met de paragrafen die wel 'n border hebben.

box-shadow: black 0 0 20px 8px;

(Ik heb mij een bepaalde volgorde van kleuren en dergelijke aangewend. Normaal genomen zou ik om die reden black achteraan hebben gezet. Op dit moment zit er echter in de css-validator een bug, waardoor hij een foutmelding geeft als het eerste cijfer achter box-shadow een nul is. Het gaat wel goed als de kleur vooraan wordt gezet. Overigens werkt het prima, wat de volgorde ook is, alleen de validator geeft een foutmelding. Omdat die onterechte foutmeldingen nogal verwarrend zijn, pas ik de volgorde aan.)

black is gewoon de kleur van de schaduw.

Het eerste getal geeft de plaats en de breedte in horizontale richting aan.

In dit geval is er geen 'plaats', omdat de schaduw in de rondte komt te staan, overal even ver van de paragraaf af. Als hier een positief getal zou staan, zou de hele schaduw naar rechts verschuiven. Bij een negatief getal schuift de schaduw naar links.

De breedte van de schaduw regel ik in dit geval met het vierde getal.

Hoewel de nul dus feitelijk geen enkel nut heeft, moet ik hem toch invullen. Zou ik hem gewoon weglaten, dan zou de betekenis van de getallen in de war raken. Het eerste getal geeft áltijd horizontale richting en breedte aan, het tweede áltijd verticale richting en breedte. Als ik ze weg zou laten, komt het derde getal op de eerste plaats te staan: 20px. De browser zet de schaduw dan gewoon aan de rechterkant, 20 px breed.

Het tweede getal geeft de plaats en de breedte in verticale richting aan. Hiervoor geldt precies hetzelfde verhaal als hierboven staat voor het eerste getal. Alleen verplaatst een positief getal de hele schaduw naar beneden en een negatief getal naar boven.

Het derde getal zorgt voor het vervagen van de schaduw. Dit getal mag niet negatief zijn, want dan verdwijnt de hele schaduw. Hoe groter het getal is, hoe groter de afstand waarover de schaduw vervaagt.

Als er een vierde getal staat, zoals hier het geval is, zorgt dit ervoor dat de schaduw helemaal rondom het element komt te staan: aan alle kanten. De waarde van het getal geeft de breedte van de schaduw aan. Als ik de schaduw meer uit het midden wil hebben, bijvoorbeeld hoger, kan ik dat regelen met het eerste en/of tweede getal.

p#spread-inset

De paragraaf met id="spread-inset". In Internet Explorer 7 en 8 is dit onmogelijk na te maken. Dit is 'n beetje onzinnig gebruik van box-shadow, het laat alleen zien wat er mogelijk is.

Dezelfde knop met rode achtergrond.

Bij p hebben alle paragrafen een witte achtergrond gekregen. Dat is ook bij deze schaduw van belang. Als je de achtergrond bijvoorbeeld rood zou maken, ziet het er totaal anders uit.

height: 46px;

Bij p is een hoogte van 60 px opgegeven voor alle paragrafen, plus nog 3 px padding. De totale hoogte is dus 3 + 60 + 3 = 66 px. Deze paragraaf krijgt hieronder echter een padding van 10 px, dus moet de hoogte hier 46 px zijn. Dan wordt hij 10 + 46 + 10 = 66 px, even hoog als de andere paragrafen.

margin-right: -7px;

Bij p hebben alle paragrafen een padding van 3 px gekregen. Deze paragraaf krijgt hieronder echter een padding van 10 px, 7 px meer. Omdat hij naar rechts is gefloat, komt de linkerkant daardoor 14 px meer naar links dan bij de meeste andere paragrafen het geval is. Door hem 7 px naar rechts te zetten, komt hij netjes in lijn met de andere paragrafen met schaduwen te staan: er steekt evenveel links als rechts uit.

padding: 10px;

Bij het gebruik van border-radius kan de tekst buiten de ronde hoeken komen te staan. Met een padding die groot genoeg is, kun je dat voorkomen.

box-shadow: inset 0 0 40px 15px blue;

(Ik heb mij een bepaalde volgorde van kleuren en dergelijke aangewend. Normaal genomen zou ik om die reden inset en blue achteraan hebben gezet. Op dit moment zit er echter in de css-validator een bug, waardoor hij een foutmelding geeft als het eerste cijfer achter box-shadow een nul is. Het gaat wel goed als inset vooraan wordt gezet. Overigens werkt het prima, wat de volgorde ook is, alleen de validator geeft een foutmelding. Omdat die onterechte foutmeldingen nogal verwarrend zijn, pas ik de volgorde aan.)

De waarde inset zorgt ervoor, dat de schaduw aan de binnenkant van de paragraaf komt te staan. Normaal genomen komt de schaduw aan de buitenkant te staan.

Het eerste getal geeft de plaats en de breedte in horizontale richting aan.

In dit geval is er geen 'plaats', omdat de schaduw in de rondte komt te staan, overal even ver van de paragraaf af. Als hier een positief getal zou staan, zou de hele schaduw naar rechts verschuiven. Bij een negatief getal schuift de schaduw naar links.

De breedte van de schaduw regel ik in dit geval met het vierde getal.

Hoewel de nul dus feitelijk geen enkel nut heeft, moet ik hem toch invullen. Zou ik hem gewoon weglaten, dan zou de betekenis van de getallen in de war raken. Het eerste getal geeft áltijd horizontale richting en breedte aan, het tweede áltijd verticale richting en breedte. Als ik ze weg zou laten, komt het derde getal op de eerste plaats te staan: 40px. De browser zet de schaduw dan gewoon aan de rechterkant, 40 px breed.

Het tweede getal geeft de plaats en de breedte in verticale richting aan. Hiervoor geldt precies hetzelfde verhaal als hierboven staat voor het eerste getal. Alleen verplaatst een positief getal de hele schaduw naar beneden en een negatief getal naar boven.

Het derde getal zorgt voor het vervagen van de schaduw. Dit getal mag niet negatief zijn, want dan verdwijnt de hele schaduw. Hoe groter het getal is, hoe groter de afstand waarover de schaduw vervaagt.

Als er een vierde getal staat, zoals hier het geval is, zorgt dit ervoor dat de schaduw helemaal rondom het element komt te staan: aan alle kanten. De waarde van het getal geeft de breedte van de schaduw aan. Omdat de waarde inset is gebruikt, komt de schaduw hier aan de binnenkant van het element te staan.

Als ik de schaduw meer uit het midden wil hebben, bijvoorbeeld hoger, kan ik dat regelen met het eerste en/of tweede getal. Voor het oog lijkt het alsof het witte middendeel verschuift, maar in werkelijkheid verschuift de blauwe schaduw.

blue is gewoon de kleur van de schaduw.

border-radius: 25px;

Deze eigenschap zorgt voor de ronde hoeken. Omdat ik maar één maat opgeef, wordt de hoek gelijkmatig rond.

De schaduw moet dezelfde ronding volgen als de hoeken van het element waar de schaduw bijhoort. Omdat de schaduw hier met inset aan de binnenkant van de paragraaf is gezet, staat hij netjes tegen de ronde hoeken aan en volgt deze.

p#blur-neg

De paragraaf met id="blur-neg". Wordt in alle browsers hetzelfde weergegeven, hoewel voor Internet Explorer 7 en 8 een extra div nodig is.

border: black solid 1px;

Zwarte rand. Deze is alleen maar gebruikt voor de duidelijkheid.

box-shadow: blue 0 0 50px -4px;

(Ik heb mij een bepaalde volgorde van kleuren en dergelijke aangewend. Normaal genomen zou ik om die reden blue achteraan hebben gezet. Op dit moment zit er echter in de css-validator een bug, waardoor hij een foutmelding geeft als het eerste cijfer achter box-shadow een nul is. Het gaat wel goed als blue vooraan wordt gezet. Overigens werkt het prima, wat de volgorde ook is, alleen de validator geeft een foutmelding. Omdat die onterechte foutmeldingen nogal verwarrend zijn, pas ik de volgorde aan.)

blue is gewoon de kleur van de schaduw.

Het eerste getal geeft de plaats en de breedte in horizontale richting aan.

In dit geval is er geen 'plaats', omdat de schaduw in de rondte komt te staan, overal even ver van de paragraaf af. Als hier een positief getal zou staan, zou de hele schaduw naar rechts verschuiven. Bij een negatief getal schuift de schaduw naar links.

De breedte van de schaduw regel ik in dit geval met het vierde getal.

Hoewel de nul dus feitelijk geen enkel nut heeft, moet ik hem toch invullen. Zou ik hem gewoon weglaten, dan zou de betekenis van de getallen in de war raken. Het eerste getal geeft áltijd horizontale richting en breedte aan, het tweede áltijd verticale richting en breedte. Als ik ze weg zou laten, komt het derde getal op de eerste plaats te staan: 50px. De browser zet de schaduw dan gewoon aan de rechterkant, 50 px breed.

Het tweede getal geeft de plaats en de breedte in verticale richting aan. Hiervoor geldt precies hetzelfde verhaal als hierboven staat voor het eerste getal. Alleen verplaatst een positief getal de hele schaduw naar beneden en een negatief getal naar boven.

Het derde getal zorgt voor het vervagen van de schaduw. Dit getal mag niet negatief zijn, want dan verdwijnt de hele schaduw. Hoe groter het getal is, hoe groter de afstand waarover de schaduw vervaagt.

Als er een vierde getal staat, zoals hier het geval is, zorgt dit ervoor dat de schaduw helemaal rondom het element komt te staan: aan alle kanten. De waarde van het getal geeft de breedte van de schaduw aan. Omdat de waarde hier -4 is, dus negatief, gaat het van de breedte van de blur, het derde getal, af.

p#inset-outset

De paragraaf met id="inset-outset". Wordt in alle browsers hetzelfde weergegeven, maar in Internet Explorer 7 en 8 is het gewoon een platte border.

height: 50px;

Bij p is een hoogte van 60 px opgegeven voor alle paragrafen, plus nog 3 px padding. De totale hoogte is dus 3 + 60 + 3 = 66 px. Deze paragraaf krijgt echter een padding van 8 px, dus moet de hoogte hier 50 px zijn. Dan wordt hij 8 + 50 + 8 = 66 px, even hoog als de andere paragrafen.

margin-right: -5px;

Bij p hebben alle paragrafen een padding van 3 px gekregen. Deze paragraaf krijgt hieronder echter een padding van 8 px, 5 px meer. Omdat hij naar rechts is gefloat, komt de linkerkant daardoor 10 px (2 x 5px) meer naar links dan bij de meeste andere paragrafen het geval is. Door hem 5 px naar rechts te zetten, komt hij netjes in lijn met de andere paragrafen met schaduwen te staan: er steekt evenveel links als rechts uit.

border: black solid 1px;

In dit geval geeft een kleine border een klein extra effect. Door gewoon van alles te proberen blijkt er van alles mogelijk. Of je 't mooi vindt of niet, is een andere zaak...

padding: 8px;

Bij het gebruik van border-radius kan de tekst buiten de ronde hoeken komen te staan. Met een padding die groot genoeg is, kun je dat voorkomen.

box-shadow: inset 3px 3px 10px black, 3px 3px 10px black;

Er staan hier twee schaduwen aangegeven achter box-shadow, gescheiden door een komma. Dat levert geen enkel probleem op. De opbouw van de schaduw is altijd hetzelfde, hoeveel schaduwen er ook staan. In dit geval levert de combinatie van de twee schaduwen een opstaande rand op.

De eerste schaduw begint met inset. De waarde inset zorgt ervoor, dat de schaduw aan de binnenkant van de paragraaf komt te staan. Normaal genomen komt de schaduw aan de buitenkant te staan. De tweede schaduw komt dus wel buiten het element te staan.

(Ik heb mij een bepaalde volgorde van kleuren en dergelijke aangewend. Normaal genomen zou ik om die reden inset en black achteraan hebben gezet. Op dit moment zit er echter in de css-validator een bug, waardoor hij een foutmelding geeft als inset achter de getallen staat. Het gaat wel goed als inset vooraan wordt gezet. Overigens werkt het prima, wat de volgorde ook is, alleen de validator geeft een foutmelding. Omdat die onterechte foutmeldingen nogal verwarrend zijn, pas ik de volgorde aan.)

Het eerste getal geeft de plaats en de breedte in horizontale richting aan. Een positief getal betekent, dat de schaduw rechts van het element komt. Een negatief getal zorgt ervoor, dat de schaduw links van het element komt te staan. De schaduw komt hier dus rechts te staan en is 3 px breed.

Omdat bij de eerste schaduw de waarde inset is gebruikt, werkt het bij de eerste schaduw iets anders normaal. Een positief getal betekent nu, dat de schaduw links aan de binnenkant van het element komt te staan, een negatief getal zorgt ervoor dat de schaduw rechts aan de binnenkant komt te staan. De schaduw komt hier dus aan de linkerbinnenkant te staan en is 3 px breed.

Het tweede getal geeft de plaats en de breedte in verticale richting aan. Een positief getal betekent, dat de schaduw onder het element komt. Een negatief getal zorgt ervoor, dat de schaduw boven het element komt te staan. De schaduw komt hier dus aan de onderkant te staan en wordt 3 px breed.

Omdat bij de eerste schaduw de waarde inset is gebruikt, werkt het bij de eerste schaduw iets anders dan normaal. Een positief getal betekent nu dat de schaduw boven aan de binnenkant van het element komt te staan, een negatief getal zorgt ervoor dat de schaduw onder aan de binnenkant komt te staan. De schaduw komt hier dus aan de binnenkant van de bovenkant te staan en wordt 3 px breed.

Het derde getal zorgt voor het vervagen van de schaduw. Dit getal mag niet negatief zijn, want dan verdwijnt de hele schaduw. Hoe groter het getal is, hoe groter de afstand waarover de schaduw vervaagt.

black is gewoon de kleur van de schaduw.

border-radius: 8px;

Deze eigenschap zorgt voor de ronde hoeken. Omdat ik maar één maat opgeef, wordt de hoek gelijkmatig rond.

De schaduw moet dezelfde ronding volgen als de hoeken van het element waar de schaduw bijhoort. Bij de schaduw zonder inset wordt de buitenkant gevolgd, de schaduw met inset wordt aan de binnenkant van de paragraaf tegen de ronde gezet en volgt deze.

#img-foto-2

Het element met id="img-foto-2". Dit is de afbeelding rechts die de schaduw krijgt. De weergave van deze schaduw is in alle browsers hetzelfde.

box-shadow: 5px 6px #666;

Het eerste getal geeft de plaats en de breedte in horizontale richting aan. Een positief getal betekent, dat de schaduw rechts van het element komt. Een negatief getal zorgt ervoor, dat de schaduw links van het element komt te staan. De schaduw komt hier dus rechts te staan en is 5 px breed.

Het tweede getal geeft de plaats en de breedte in verticale richting aan. Een positief getal betekent, dat de schaduw onder het element komt. Een negatief getal zorgt ervoor, dat de schaduw boven het element komt te staan. De schaduw komt hier dus aan de onderkant te staan en wordt 6 px breed.

#666 is gewoon de kleur van de schaduw: grijs.

p#knop, p#knop-muis

De paragrafen met id="knop" en id="knop-muis". In p#knop staat de lichtblauwe knop met de tekst 'HOVER', in p#knop-muis de donkerder knop met 'GEWOON'. Als je over een van de knoppen hovert, krijgt hij hetzelfde uiterlijk als de ander.

In Internet Explorer 7 en 8 zijn de kleuren effen, omdat dit gewoon niet is te imiteren. Bovendien werkt het hoveren niet, want dat werkt niet in combinatie met de behavior die nodig is voor de ronde hoeken.

Een aantal instellingen is hetzelfde voor beide knoppen, die geef ik hier op. Instellingen voor één van beide knoppen geef ik later apart op.

width: 100px;

Bij p hebben alle paragrafen een breedte van 270 px gekregen. Dat is veel te breed voor deze knoppen.

height: 46px;

Bij p hebben alle paragrafen een hoogte van 60 px en een padding van 3 px gekregen, samen 3 + 60 + 3 = 66 px hoog. Deze knoppen krijgen een padding van 10 px. De hoogte wordt dan dus 10 + 46 + 10 = 66 px, even hoog als de andere knoppen.

margin-top: 7px;

Door al het gestoei met floaten, marges en hoogtes staan deze knoppen niet meer gelijk met de bijbehorende afbeelding. Door ze iets omhoog te zetten, staan ze weer netjes op dezelfde hoogte.

padding: 10px;

Bij het gebruik van border-radius kan de tekst buiten de ronde hoeken komen te staan. Met een padding die groot genoeg is, kun je dat voorkomen.

box-shadow: inset 0 0 40px 15px blue;

Eigenlijk is deze schaduw alleen bestemd voor p#knop en niet voor p#knop-muis, want die heeft standaard (zonder hoveren) een andere schaduw. Ik neem hem toch hier op, omdat ik anders een aparte regel alleen voor deze schaduw moet opnemen.

Dat p#knop-muis een andere schaduw krijgt, maakt niet uit. Verderop overrule ik deze schaduw gewoon.

De waarde inset zorgt ervoor, dat de schaduw aan de binnenkant van de paragraaf komt te staan. Normaal genomen komt de schaduw aan de buitenkant te staan.

(Ik heb mij een bepaalde volgorde van kleuren en dergelijke aangewend. Normaal genomen zou ik om die reden inset en blue achteraan hebben gezet. Op dit moment zit er echter in de css-validator een bug, waardoor hij een foutmelding geeft als gelijk achter box-shadow het getal 0 staat. Het gaat wel goed als inset vooraan wordt gezet. Overigens werkt het prima, wat de volgorde ook is, alleen de validator geeft een foutmelding. Omdat die onterechte foutmeldingen nogal verwarrend zijn, pas ik de volgorde aan.)

Het eerste getal geeft de plaats en de breedte in horizontale richting aan.

In dit geval is er geen 'plaats', omdat de schaduw in de rondte komt te staan, overal even ver binnen de paragraaf. Als hier een positief getal zou staan, zou de hele schaduw naar rechts verschuiven. Bij een negatief getal schuift de schaduw naar links.

De breedte van de schaduw regel ik in dit geval met het vierde getal.

Hoewel de nul dus feitelijk geen enkel nut heeft, moet ik hem toch invullen. Zou ik hem gewoon weglaten, dan zou de betekenis van de getallen in de war raken. Het eerste getal geeft áltijd horizontale richting en breedte aan, het tweede áltijd verticale richting en breedte. Als ik ze weg zou laten, komt het derde getal op de eerste plaats te staan: 40px. De browser zet de schaduw dan gewoon aan de rechterkant, 40 px breed.

Het tweede getal geeft de plaats en de breedte in verticale richting aan. Hiervoor geldt precies hetzelfde verhaal als hierboven staat voor het eerste getal. Alleen verplaatst een positief getal de hele schaduw naar beneden en een negatief getal naar boven.

Het derde getal zorgt voor het vervagen van de schaduw. Dit getal mag niet negatief zijn, want dan verdwijnt de hele schaduw. Hoe groter het getal is, hoe groter de afstand waarover de schaduw vervaagt.

Als er een vierde getal staat, zoals hier het geval is, zorgt dit ervoor dat de schaduw helemaal rondom het element komt te staan: aan alle kanten. De waarde van het getal geeft de breedte van de schaduw aan. Omdat de waarde inset is gebruikt, komt de schaduw hier aan de binnenkant van het element te staan.

Als ik de schaduw meer uit het midden wil hebben, bijvoorbeeld hoger, kan ik dat regelen met het eerste en/of tweede getal. Voor het oog lijkt het alsof het witte middendeel verschuift, maar in werkelijkheid verschuift de blauwe schaduw.

blue is gewoon de kleur van de schaduw.

border-radius: 25px;

Deze eigenschap zorgt voor de ronde hoeken. Omdat ik maar één maat opgeef, wordt de hoek gelijkmatig rond.

De schaduw moet dezelfde ronding volgen als de hoeken van het element waar de schaduw bijhoort. Omdat de schaduw hier met inset aan de binnenkant van de paragraaf is gezet, staat hij netjes tegen de ronde hoeken aan en volgt deze.

text-align: center;

Tekst horizontaal in het midden zetten.

line-height: 46px;

Tekst wordt altijd in het midden van de regelhoogte gezet. Door die even hoog te maken als de knop zelf, komt de tekst dus ook verticaal in het midden van de knop te staan.

p#knop:hover, p#knop-muis

De paragraaf met id="knop", maar alleen als ik erover hover, en de paragraaf met id="knop-muis". Dit zijn de rechter- en de linker smalle knop.

Bij p#knop, p#knop-muis heb ik een bepaalde schaduw opgegeven. Die moet veranderen als ik over de knop hover.

p#knop-muis moet juist altijd deze schaduw krijgen. Omdat ik bij p#knop, p#knop-muis een andere schaduw heb opgegeven, overrule ik die hier.

box-shadow: inset 0 0 30px 20px rgba(38, 38, 255, 0.5), 0 0 20px 5px blue;

Er staan hier twee schaduwen aangegeven achter box-shadow, gescheiden door een komma. Dat levert geen enkel probleem op. De opbouw van de schaduw is altijd hetzelfde, hoeveel schaduwen er ook staan.

De eerste schaduw begint met inset. De waarde inset zorgt ervoor, dat de schaduw aan de binnenkant van de paragraaf komt te staan. Normaal genomen komt de schaduw aan de buitenkant te staan. De tweede schaduw komt dus wel gewoon buiten het element te staan.

(Ik heb mij een bepaalde volgorde van kleuren en dergelijke aangewend. Normaal genomen zou ik om die reden inset en rgba() achteraan hebben gezet. Op dit moment zit er echter in de css-validator een bug, waardoor hij een foutmelding geeft als er gelijk achter box-shadow een 0 staat. Het gaat wel goed als inset vooraan wordt gezet. Overigens werkt het prima, wat de volgorde ook is, alleen de validator geeft een foutmelding. Omdat die onterechte foutmeldingen nogal verwarrend zijn, pas ik de volgorde aan.)

Het eerste getal geeft de plaats en de breedte in horizontale richting aan.

In dit geval is er geen 'plaats', omdat de schaduw in de rondte komt te staan, overal even ver binnen en buiten de paragraaf. Als hier een positief getal zou staan, zou de hele schaduw naar rechts verschuiven. Bij een negatief getal schuift de schaduw naar links.

De breedte van de schaduw regel ik in dit geval met het vierde getal.

Hoewel de nul dus feitelijk geen enkel nut heeft, moet ik hem toch invullen. Zou ik hem gewoon weglaten, dan zou de betekenis van de getallen in de war raken. Het eerste getal geeft áltijd horizontale richting en breedte aan, het tweede áltijd verticale richting en breedte. Als ik ze weg zou laten, komt het derde getal op de eerste plaats te staan: 30px voor de eerste schaduw, 20px voor de tweede schaduw. De browser zet beide schaduwen dan gewoon aan de rechterkant.

Het tweede getal geeft de plaats en de breedte in verticale richting aan. Hiervoor geldt precies hetzelfde verhaal als hierboven staat voor het eerste getal. Alleen verplaatst een positief getal de hele schaduw naar beneden en een negatief getal naar boven.

Het derde getal zorgt voor het vervagen van de schaduw. Dit getal mag niet negatief zijn, want dan verdwijnt de hele schaduw. Hoe groter het getal is, hoe groter de afstand waarover de schaduw vervaagt. Bij de eerste schaduw is die afstand 30 px, bij de tweede schaduw 20 px. Door het gebruik van de waarde inset bij de eerste schaduw, vindt de vervaging daar naar binnen toe plaats. Bij de tweede schaduw is de richting naar buiten toe.

Als er een vierde getal staat, zoals hier het geval is, zorgt dit ervoor dat de schaduw helemaal rondom het element komt te staan: aan alle kanten. De waarde van het getal geeft de breedte van de schaduw aan. Als ik de schaduw meer uit het midden wil hebben, bijvoorbeeld hoger, kan ik dat regelen met het eerste en/of tweede getal.

Bij de eerste schaduw wordt de breedte dus 5 px, bij de tweede schaduw 20 px. Door het gebruik van de waarde inset bij de eerste schaduw, staat die schaduw aan de binnenkant van de paragraaf. De tweede schaduw staat aan de buitenkant.

rgba(38, 38, 255, 0.5) en blue zijn de kleuren van de eerste en tweede schaduw.

De eerste schaduw is doorzichtig. De eerste drie getallen geven de kleur aan. De waarde ervan moet tussen 0 en 255 liggen. Het eerste getal geeft rood aan, het tweede groen en het derde blauw.

Het vierde getal achter rgba geeft aan, dat de schaduw half doorzichtig moet zijn. Deze waarde ligt tussen 0 en 1.

p#knop-muis:hover

De paragraaf met id="knop-muis", maar alleen als ik erover hover. Dit is de paragraaf met de linker smalle blauwe knop.

{box-shadow: inset 0 0 40px 15px blue; border-radius: 25px;}

Als ik over deze knop hover, geef hem dan een andere schaduw. Die schaduw is precies dezelfde als de andere knop heeft zonder hoveren. Hij wordt beschreven bij p#knop, p#knop-muis.

p#meerkleurig

De paragraaf met id="meerkleurig". Dit voorbeeld heeft (natuurlijk) geen enkel praktisch nut. Het laat alleen zien wat er mogelijk is met 'n beetje spelen.

In Internet Explorer 7 en 8 is dit gewoon niet weer te geven met alleen css. Punt.

width: 75px; height: 75px;

Bij p hebben alle paragrafen een hoogte van 270 px en een breedte van 60 px opgekregen. Die zijn hier niet bruikbaar.

margin: 45px 105px 0 0;

Door al het gefloat en gestoei met hoogte en marges en zo, staat deze paragraaf niet op de goede plaats. 'n Marge aan de bovenkant van 45 px is de simpelste manier om dat goed te krijgen. De marge van 105 px links zorgt ervoor, dat deze smalle paragraaf ongeveer in midden onder de bredere komt te staan.

box-shadow: red 0 -15px 15px, 15px 0 15px blue, 0 15px 15px yellow, -15px 0 15px green, 0 0 30px 25px black, 0 0 0 35px orange;

In totaal staan hier 6 schaduwen, gescheiden door een komma. Omdat dit alleen maar 'n speelsel is, ga ik die niet uitgebreid beschrijven, maar alleen de hoofdlijnen.

De eerste schaduw, de rode, staat bovenaan. De tweede, de blauwe, komt daaronder, enz. De eerste schaduw is dus altijd volledig zichtbaar.

In totaal zijn vier getallen mogelijk. De betekenis van het getal wordt afgeleid uit de plaats, dus als je het vierde getal gebruikt, moet je altijd de eerste drie ook gebruiken. Desnoods vul je 'n 0 in.

De eerste twee getallen geven de richting van de schaduw aan. Het derde getal, indien aanwezig, geeft de lengte van de vervaging aan. Het vierde getal, indien aanwezig, zorgt voor een schaduw aan alle kanten.

Bij de eerste schaduw staat red vooraan. Ik heb in de loop der jaren een volgorde ontwikkeld, die mij het best bevalt en fouten helpt voorkomen. Liever zou ik red achteraan zetten, zoals bij de andere schaduwen. Er zit in de validator echter een bug waardoor hij een 0 gelijk achter box-shadow fout rekent. En die fouten zijn verwarrend, dus pas ik de syntax aan. Overigens werkt het altijd, ongeacht de volgorde, het is alleen de validator die de hik krijgt.

border-radius: 40px;

Deze eigenschap zorgt voor de ronde hoeken. Omdat ik maar één maat opgeef, wordt de hoek gelijkmatig rond.

De schaduw moet dezelfde ronding volgen als de hoeken van het element waar de schaduw bijhoort. Dat je dit op meerdere manieren kunt uitleggen, blijkt uit bovenstaande afbeeldingen.

Speciaal voor Internet Explorer 7 en 8

<!--[if (IE 7) | (IE 8)]> <style> p#rechtsonder {filter: progid:DXImageTransform.Microsoft.dropshadow OffX=5, OffY=7, Color='black');} p#dubbel {filter: progid:DXImageTransform.Microsoft.dropshadow OffX=5, OffY=7, Color=#888888) progid: DXImageTransform.Microsoft.dropshadow(OffX=-5, OffY=-7, Color='black'); margin: -7px 5px 0 0;} p#linksboven-ie {display: block; position: relative; z-index: -1; top: -6px; left: -7px; margin-bottom: -66px; behavior: url(092-files/border-radius.htc); border-radius: 10px; background: #888;} p#linksboven {behavior: url(092-files/border-radius.htc);} p#rechtsonder-inset {behavior: url(092-files/border-radius.htc); background: #999;} p#rechtsonder-inset span {display: block; width: 268px; height: 57px; position: relative; top: -4px; left: -4px; z-index: 0; padding: 4px 0 0 4px; behavior: url(092-files/border-radius.htc); border-radius: 10px; background: white;} p#rechtsonder-blur-ie {display: block; position: relative; z-index: -1; margin: -6px -270px -12px 0; filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='12'); background: black;} p#spread-ie {display: block; position: relative; z-index: -1; width: 285px; height: 77px; margin: 0 -270px -12px 0; filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='11'); background: black;} p#spread-inset {behavior: url(092-files/border-radius.htc); background: #a1a3f6;} p#blur-neg-ie {display: block; position: relative; z-index: -1; width: 285px; height: 77px; margin: -20px -270px -12px 0; filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='15'); background: #9588e3;} p#inset-outset {behavior: url(092-files/border-radius.htc); margin-right: -7px; border: #333 solid 3px;} #img-foto-2 {filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=6, Color=#666666);} p#knop {behavior: url(092-files/border-radius.htc); background: #4044fd;} p#knop-muis {behavior: url(092-files/border-radius.htc); background: #c1c3fc;} p#meerkleurig span {display: inline;} </style> <![endif]-->

Dit eigenaardige stukje code heet een 'conditional comment' en wordt door alle browsers gezien als commentaar, omdat het tussen <!-- en --> staat. Maar Internet Explorer herkent het, door de extra toevoegingen, als speciaal voor Internet Explorer bedoeld en zal het dus uitvoeren. Het is veiliger dan een zogenaamde 'hack', waarbij vaak gebruik wordt gemaakt van 'n fout (bug) in de browser. Dit is opzettelijk aangebracht door Microsoft en zal dus blijven bestaan, terwijl 'n bug gerepareerd kan worden.

De style voor Internet Explorer moet ná de normale komen, omdat de opdrachten voor Internet Explorer dan over de normale heen gaan.

Dit stukje geldt voor Internet Explorer 7 en 8 (het verticale streepje betekent 'of'), maar je kunt het ook voor andere versies aangeven.

In plaats van de style kun je ook 'n normale link naar 'n extern css-bestand aanbrengen:

<!--[if (IE 7) | (IE 8)]> <link rel="stylesheet" href="../../css/naam-van-ie-stylesheet.css"> <![endif]-->

Op de plaats van "../../css/naam-van-ie-stylesheet.css" vul je pad naar en naam van jouw stylesheet voor Internet Explorer 7 en 8 in. De css voor Internet Explorer 7 en 8 komt dan apart in die stylesheet te staan, zodat het de andere browsers niet stoort.

Het is belangrijk dat de spaties in <!--[if (IE 7) | (IE 8)]> en <![endif]--> precies zo worden overgenomen zoals ze hier staan.

Ik heb geprobeerd de css voor Internet Explorer 7 en 8 net zoals alle andere css te beschrijven. Dat is niet gelukt. Om te beginnen blijkt exact dezelfde html en css in Internet Explorer 7 en 8 volstrekt verschillend uit te pakken. En niet 'n beetje, nee, elementen staan echt op plaatsen die honderden pixels uit elkaar liggen.

Daarnaast lijkt ogenschijnlijk (vrijwel) dezelfde html en css binnen dezelfde versie ook totaal verschillende uit te pakken. Kennelijk zorgen heel kleine veranderingen in de code voor enorme verschillen in weergave. z-index, float, margin, noem maar op, werken op de meest krankzinnige manieren. Het gebruik van behaviors en/of filters schijnt Internet Explorer 7 en 8 gewoon enorm te ontregelen.

Op Internet vind je ook 'n eindeloze hoeveelheid problemen bij het gebruik van filters en/of behaviors. Heel vaak spreken mensen elkaar tegen. Ik neem aan, dat daarbij hetzelfde speelt als wat ik heb gemerkt: om volstrekt onduidelijke redenen werkt (vrijwel) dezelfde code bij de ene constructie wel, bij de andere niet.

En dat is dus ook de reden waarom ik niet goed kan beschrijven wat er gebeurt: het hangt van idiotigheden aan elkaar.

Ik ga hieronder zo goed mogelijk aangeven waarom ik iets heb gedaan, maar details laat ik heel vaak weg. Het komt erop neer, dat je gewoon maar net zolang moet proberen, tot het er net zo als in andere browsers uitziet. Voor zover dat al kan.

Als bij een bepaalde schaduw een extra paragraaf wordt gebruikt voor Internet Explorer 7 en 8, moet die op een of andere manier onder de paragraaf met de tekst komen te staan. Ook hier kun je dat eigenlijk alleen maar uitproberen: er is geen lijn in te ontdekken hoe dingen als marge en relatieve posities werken.

Voor de juiste maten en positie kun je position: relative; (met top en left), margin, float, padding, width en height gebruiken. Verder kan z-index af en toe helpen iets te verbergen of zichtbaar te maken, maar vraag me niet wanneer, want ik heb er geen enkele lijn in kunnen ontdekken. Gewoon uitproberen tot iets werkt.

p#rechtsonder

De paragraaf met id="rechtsonder". De bovenste paragraaf met de zwarte schaduw rechtsonder.

filter: progid:DXImageTransform.Microsoft.dropshadow OffX=5, OffY=7, Color='black');

Internet Explorer 7 en 8 kennen box-shadow niet. In Internet Explorer 9 is dit (eindelijk) geïmplementeerd. Maar voor Internet Explorer 7 en 8 zal gebruik gemaakt moeten worden van een filter: een methode die alleen werkt in Internet Explorer.

Bij het gebruik van hoofdletters heb ik me zoveel mogelijk gehouden aan wat op de site van Microsoft zelf aan voorbeelden staat. Mogelijk werkt het ook prima zonder of met andere hoofdletters.

filter: hiermee wordt de hele handel geopend. Microsoft noemt het zelf uitbreidingen bij css.

progid:DXImageTransform.Microsoft.dropshadow: de naam van het filter. Waarom dit zo ingewikkeld is (vergeleken met box-shadow), weet ik ook niet.

OffX: de breedte in horizontale richting. Positieve getallen leveren een schaduw aan de rechterkant op, negatieve aan de linkerkant. De grootte van het getal is de breedte van de schaduw in px.

OffY: de hoogte in verticale richting. Positieve getallen leveren een schaduw aan de onderkant op, negatieve aan de bovenkant. De grootte van het getal is de hoogte van de schaduw in px.

Color='black': dit ga je niet geloven: de kleur. Mogelijk is dit niet echt nodig als het gewoon de standaardkleur is, maar in de voorbeelden van Microsoft staat de kleur er ook steeds bij, dus heb ik dat voor de zekerheid ook maar gedaan. Bovendien is het 'n goede gewoonte om bij dit soort eigenschappen altijd de kleur op te geven. Als je later de standaardkleur verandert, veranderen anders de schaduwen ook mee.

Een kleur moet worden opgegeven met de naam of als zes hexadecimale eenheden: #113355. Een kleur opgeven met drie hexadecimale eenheden, zoals #135, werkt niet bij dit filter.

p#dubbel

De paragraaf met id="dubbel". De tweede paragraaf van boven met twee schaduwen: een zwarte schaduw linksboven en een grijze rechtsonder.

filter: progid:DXImageTransform.Microsoft.dropshadow OffX=5, OffY=7, Color=#888888) progid: DXImageTransform.Microsoft.dropshadow(OffX=-5, OffY=-7, Color='black')

Hoe dit filter werkt staat bij filter: Het enige verschil is, dat hier twee filters staan. Beide beginnen met progid. Hierdoor krijg je dus twee schaduwen.

margin: -7px 5px 0 0;

Het gebruik van dit filter levert soms een verplaatsing op van het element dat de schaduw krijgt. Hier staat iets meer over bij Een schaduw die is gemaakt met...

Wanneer dat precies wel en niet gebeurt, is mij niet helemaal duidelijk geworden. Het simpelste is om het gewoon maar uit te proberen en dan van geval tot geval te corrigeren. Aan deze waardes ben ik dus gekomen door uitproberen.

p#linksboven-ie

De paragraaf met id="linksboven-ie". Dit is een extra paragraaf voor Internet Explorer 7 en 8, omdat deze browsers niet in hetzelfde element ronde hoeken én een schaduw kunnen weergeven. Althans: niet met alleen css. In alle andere browsers krijgt p#linksboven ronde hoeken én schaduw.

In de html blijkt deze paragraaf vóór p#linksboven, waar tekst in staat, te moeten staan. p#linksboven-ie heeft een grijze achtergrond, en als deze na p#linksboven zou komen te staan, komt deze achtergrond over de tekst heen te staan. Maar bij andere schaduwen in dit voorbeeld moet dit weer precies andersom. Geen lijn in te ontdekken. Uitproberen dus.

display: block;

In de algemene css voor alle browsers is deze paragraaf met display: none; verborgen. Voor Internet Explorer 7 en 8 maak ik hem weer zichtbaar.

position: relative; z-index: -1; top: -6px; left: -7px; margin-bottom: -66px;

Deze combinatie blijkt ongeveer dezelfde weergave op te leveren als in alle andere browsers.

Ondanks dat deze paragraaf vóór p#linksboven met de tekst staat, wordt hij in Internet Explorer 7 toch over de tekst heen gezet. Een negatieve z-index plaatst deze paragraaf onder alles wat er verder nog staat, en dat werkt. En omdat Internet Explorer 8 er geen last van heeft, zet ik het gewoon hier neer. Dat spaart 'n selector uit in de aparte css voor Internet Explorer 7 verderop. Vraag me niet waarom dit nodig is.

behavior: url(092-files/border-radius.htc);

Internet Explorer 7 en 8 kennen border-radius niet. Door gebruik te maken van een zogenaamde behavior, kunnen we deze fossielen zover krijgen dat ze het wel herkennen. Een behavior kan worden gebruikt om bepaalde code als het ware te importeren binnen een pagina. Dat is hier het bestand met de naam border-radius.htc.

Hoewel het bestand wordt aangeroepen vanuit de css, moet een pad worden opgegeven ten opzichte van het html-bestand, waarin het wordt gebruikt. Dit is dus anders dan bij bijvoorbeeld een achtergrond-afbeelding, waar het pad moet worden opgegeven ten opzichte van het css-bestand. Waarom Microsoft dit zo afwijkend en verwarrend heeft geïmplementeerd, weet ik ook niet.

In border-radius.htc staat JavaScript. Deze JavaScript stuurt weer VML (Vector Markup Language) aan, een taal die alleen werkt in Internet Explorer. Alle andere browsers gebruiken voor soortgelijke doeleinden de standaardtaal SVG (Scalable Vector Graphics). (Internet Explorer 9 maakt eindelijk ook een allereerste begin maken met de ondersteuning van SVG).

Met behulp van VML worden de ronde hoeken weergegeven. Een uiterst omslachtige methode. En dat zie je ook: in eerste instantie worden de ronde hoeken gewoon rechthoekig op het scherm gezet. Pas na het laden en verwerken van border-radius.htc worden de hoeken alsnog afgerond.

border-radius: 10px;

Omdat deze paragraaf de grijze schaduw bij p#linksboven moet maken, moet hij dezelfde ronding krijgen als p#linksboven in de css voor alle browsers heeft gekregen.

background: #888;

Grijze achtergrond.

p#linksboven

De paragraaf met id="linksboven". De paragraaf die bij alle andere browsers de ronde hoeken en de grijze schaduw linksboven krijgt.

behavior: url(092-files/border-radius.htc);

Met alle extra code en zo bij p#linksboven-ie heb ik alleen nog maar een grijze rechthoek met ronde hoeken geproduceerd, die iets linksboven p#linksboven staat. Nu moet ik p#linksboven nog ronde hoeken geven.

Daarvoor is deze regel nog nodig, uitleg bij behavior: url(092-files/border-radius.htc);

p#rechtsonder-inset

De paragraaf met id="rechtsonder-inset". De vierde paragraaf die bij alle andere browsers de ronde hoeken en een grijze schaduw rechtsonder bínnen de paragraaf krijgt.

behavior: url(092-files/border-radius.htc);

Internet Explorer 7 en 8 hebben dit nodig om ronde hoeken weer te kunnen geven, uitleg bij behavior: url(092-files/border-radius.htc);

background: #999;

Omdat Internet Explorer 7 en 8 geen schaduw én ronde hoeken kunnen weergeven in hetzelfde element, en ik hierboven al ronde hoeken heb gegeven, geef ik de hele paragraaf de kleur van de schaduw. Als ik daar dan een witte achtergrond overheen zet en die iets verschuif, zie je een grijze schaduw met ronde hoeken. Dat dat in werkelijkheid een volledig grijze <p> is met ronde hoeken, zie je niet.

p#rechtsonder-inset span

Ik heb hierboven p#rechtsonder-inset ronde hoeken gegeven. Maar dan kan ik er geen schaduw meer aan geven, want allebei tegelijk kunnen deze stakkers niet aan. Dus zet ik de tekst gewoon in een span en geef die span ronde een witte achtergrond en ronde hoeken.

Als ik de span een klein stukje omhoog verplaats, wordt aan de onderkant een stukje van de grijze achtergrond van p#rechtsonder-inset zichtbaar: de grijze schaduw.

display: block;

Een span is van zichzelf een inline-element. Door er een blok-element van te maken, kan ik eigenschappen als breedte en hoogte gebruiken.

width: 268px; height: 57px; position: relative; top: -4px; left: -4px; z-index: 0; padding: 4px 0 0 4px;

Deze combinatie blijkt het gewenste resultaat op te leveren.

De witte achtergrond van de span zou over de grijze achtergrond van de paragraaf horen te staan. Maar dat gebeurt niet. Met een andere z-index dan 0, zie je óf alleen wit, óf alleen grijs, en geen tekst. Met een z-index van 0 zie je precies wat de bedoeling is. Vraag me niet waarom. Dit soort vreemde verschijnselen krijg je dus als je met filters en/of behaviors werkt.

behavior: url(092-files/border-radius.htc);

Internet Explorer 7 en 8 hebben dit nodig om ronde hoeken weer te kunnen geven, uitleg bij behavior: url(092-files/border-radius.htc);

border-radius: 10px;

Ik moet de span nog ronde hoeken geven.

background: white;

Omdat de span een witte achtergrond heeft en de iets grotere paragraaf een grijze, lijkt het er nu op dat de paragraaf een grijze schaduw rechtsonder aan de binnenkant heeft.

p#rechtsonder-blur-ie

De paragraaf met id="rechtsonder-blur-ie". Deze extra paragraaf hoort bij het vijfde voorbeeld: de vervagende schaduw rechts en onder.

Omdat Internet Explorer 7 en 8 geen vervagende schaduw aan alleen de rechter- en onderkant kunnen weergeven, wordt een extra <p> gebruikt. De schaduw wordt aan de extra <p> gegeven en door die <p> iets te verplaatsen, komt er toch 'n vervagende schaduw aan slechts twee kanten te staan.

In de html blijkt deze paragraaf na p#rechtsonder-blur, waar tekst in staat, te moeten staan. p#rechtsonder-blur-ie heeft een zwarte achtergrond, en als deze vóór p#rechtsonder-blur zou komen te staan, komt deze achtergrond over de tekst heen te staan. Maar bij andere schaduwen in dit voorbeeld moet dit weer precies andersom. Geen lijn in te ontdekken. Uitproberen dus.

display: block;

In de algemene css is deze paragraaf verborgen met display: none;, zodat hij de andere browsers niet in de weg zit. Voor Internet Explorer 7 en 8 moet ik hem weer zichtbaar maken.

position: relative; z-index: -1; margin: -6px -270px -12px 0;

Deze combinatie is gevonden door gewoon uit te proberen. Met deze marge blijkt het in Internet Explorer 7 en 8 hetzelfde te werken. Als ik de marge weglaat, maar met de rest van de html en css exact hetzelfde, staat deze paragraaf in beide browsers op een totaal andere plaats, zowel in de hoogte als in de breedte.

filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='12');

Internet Explorer 7 en 8 kunnen alleen een massieve schaduw weergeven, geen vervagende. Maar er bestaat een ander filter, dat wel kan vervagen: Blur.

filter: hiermee wordt de hele handel geopend. Microsoft noemt het zelf uitbreidingen bij css.

progid:DXImageTransform.Microsoft.Blur: de naam van het filter. Klachten over de ingewikkeldheid bij Microsoft.

PixelRadius='12': de breedte van de vervaging in px.

background: black;

Bij p hebben alle paragrafen een witte achtergrond gekregen. Om een zwarte vervagende schaduw te krijgen, moet ik een zwarte achtergrond aan de paragraaf geven.

p#spread-ie

De paragraaf met id="spread-ie". Deze extra paragraaf hoort bij het zesde voorbeeld, de vervagende zwarte schaduw rondom, gelijk boven de brede blauwe knop.

Een vervagende zwarte schaduw rondom een element kan alleen maar in Internet Explorer 7 en 8 als je het hele element een massief zwarte achtergrond geeft. Dat is geen goed idee, want dat leest 'n tikkeltje lastig.

Daarom wordt achter p#spread, waar de tekst in staat, een extra paragraaf gezet. En die extra paragraaf krijgt rondom de vervagende schaduw. De zwarte achtergrond van de extra paragraaf valt weg achter de witte achtergrond van p#spread.

In de html blijkt deze paragraaf na p#spread, waar tekst in staat, te moeten staan. p#spread-ie heeft een zwarte achtergrond, en als deze vóór p#spread zou komen te staan, komt deze achtergrond over de tekst heen te staan. Maar bij andere schaduwen in dit voorbeeld moet dit weer precies andersom. Geen lijn in te ontdekken. Uitproberen dus.

display: block;

In de algemene css is deze paragraaf verborgen met display: none;, zodat hij de andere browsers niet in de weg zit. Voor Internet Explorer 7 en 8 moet ik hem weer zichtbaar maken.

position: relative; z-index: -1; width: 285px; height: 77px; margin: 0 -270px -12px 0;

Deze combinatie blijkt het juiste resultaat op te leveren. Waarom is mij niet geheel duidelijk, maar het blijkt te werken. De z-index is nodig omdat je anders alleen maar de zwarte achtergrond ziet.

filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='11')

Internet Explorer 7 en 8 kunnen alleen een massieve schaduw weergeven, geen vervagende. Maar er bestaat een ander filter dat wel kan vervagen: Blur.

filter: hiermee wordt de hele handel geopend. Microsoft noemt het zelf uitbreidingen bij css.

progid:DXImageTransform.Microsoft.Blur: de naam van het filter. Klachten over de ingewikkeldheid bij Microsoft.

PixelRadius='11': de breedte van de vervaging in px.

background: black;

Bij p hebben alle paragrafen een witte achtergrond gekregen. Om een zwarte vervagende schaduw te krijgen, moet ik een zwarte achtergrond aan de paragraaf geven.

p#spread-inset

De paragraaf met id="spread-inset". De brede blauwe knop. Deze is op geen enkele manier met alleen css en html te imiteren in Internet Explorer 7 en 8. Ik heb hem gewoon een egale kleur en ronde hoeken gegeven, meer niet.

behavior: url(092-files/border-radius.htc);

Internet Explorer 7 en 8 hebben dit nodig om ronde hoeken weer te kunnen geven, uitleg bij behavior: url(092-files/border-radius.htc);

background: #a1a3f6;

Achtergrondkleurtje.

p#blur-neg-ie

De paragraaf met id="blur-neg-ie". Deze extra paragraaf hoort bij het achtste voorbeeld, de vervagende blauwe schaduw rondom, gelijk onder de brede blauwe knop.

Een vervagende blauwe schaduw rondom een element kan alleen maar in Internet Explorer 7 en 8 als je het hele element een massief blauwe achtergrond geeft. Dat is geen goed idee. Daarom wordt achter p#blur-neg, waar de tekst in staat, een extra paragraaf gezet. En die extra paragraaf krijgt rondom de vervagende schaduw. De blauwe achtergrond van de extra paragraaf valt weg achter de witte achtergrond van p#blur-neg.

In de html blijkt deze paragraaf na p#blur-neg, waar tekst in staat, te moeten staan. p#blur-neg-ie heeft een blauwe achtergrond, en als deze vóór p#blur-neg zou komen te staan, komt deze achtergrond over de tekst heen te staan. Maar bij andere schaduwen in dit voorbeeld moet dit weer precies andersom. Geen lijn in te ontdekken. Uitproberen dus.

display: block;

In de algemene css is deze paragraaf verborgen met display: none;, zodat hij de andere browsers niet in de weg zit. Voor Internet Explorer 7 en 8 moet ik hem weer zichtbaar maken.

position: relative; z-index: -1; width: 285px; height: 77px; margin: -20px -270px -12px 0;

Deze combinatie blijkt het juiste resultaat op te leveren. Waarom is mij niet geheel duidelijk, maar het blikt te werken. De z-index is nodig omdat je anders alleen maar de blauwe achtergrond ziet.

filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='15')

Internet Explorer 7 en 8 kunnen alleen een massieve schaduw weergeven, geen vervagende. Maar er bestaat een ander filter dat wel kan vervagen: Blur.

filter: hiermee wordt de hele handel geopend. Microsoft noemt het zelf uitbreidingen bij css.

progid:DXImageTransform.Microsoft.Blur: de naam van het filter. Klachten over de ingewikkeldheid bij Microsoft.

PixelRadius='15': de breedte van de vervaging in px.

background: #9588e3;

Bij p hebben alle paragrafen een witte achtergrond gekregen. Om een blauwe vervagende schaduw te krijgen, moet ik een blauwe achtergrond aan de paragraaf geven.

p#inset-outset

De paragraaf met id="inset-outset". Deze hoort bij het negende voorbeeld, gelijk boven de foto.

behavior: url(092-files/border-radius.htc);

Internet Explorer 7 en 8 hebben dit nodig om ronde hoeken weer te kunnen geven, uitleg bij behavior: url(092-files/border-radius.htc);

margin-right: -7px;

7 px naar rechts verplaatsen, zodat hij op gelijke lijn staat met de andere schaduwen.

border: #333 solid 3px;

Omdat een opstaande rand niet lukt, wordt gewoon een platte rand gegeven. Ook outset, ridge, en dergelijke, waarmee je een opstaande rand en dergelijke zou moeten kunnen maken, werken niet bij gebruik van een behavior.

#img-foto-2

Het element met id="img-foto-2". Dit is de foto die de schaduw moet krijgen.

filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=6, Color=#666666);

Hoe dit filter werkt staat bij filter: Alleen de waarden en de kleur zijn anders.

p#knop

De paragraaf met id="knop". De smalle blauwe knop met 'GEWOON'. Deze is op geen enkele manier met alleen css en html te imiteren in Internet Explorer 7 en 8. Ik heb hem gewoon een egale kleur en ronde hoeken gegeven, meer niet.

Ook hoveren werkt niet in combinatie met een behavior.

behavior: url(092-files/border-radius.htc);

Internet Explorer 7 en 8 hebben dit nodig om ronde hoeken weer te kunnen geven, uitleg bij behavior: url(092-files/border-radius.htc);

background: #4044fd;

Achtergrondkleurtje.

p#knop-muis

De paragraaf met id="knop". De smalle blauwe knop met 'GEWOON'. Deze is op geen enkele manier met alleen css en html te imiteren in Internet Explorer 7 en 8. Ik heb hem gewoon een egale kleur en ronde hoeken gegeven, meer niet.

Ook hoveren werkt niet in combinatie met een behavior.

behavior: url(092-files/border-radius.htc);

Internet Explorer 7 en 8 hebben dit nodig om ronde hoeken weer te kunnen geven, uitleg bij behavior: url(092-files/border-radius.htc);

background: #c1c3fc;

Achtergrondkleurtje.

p#meerkleurig span

De spans binnen de paragraaf met id="meerkleurig". Dit is hier maar één span. Deze bevat een tekst, die getoond moet worden in Internet Explorer 7 en 8. Hierin staat, dat de meerkleurige rand onmogelijk gemaakt kan worden met alleen html en css. In alle andere browsers wordt deze tekst verborgen.

display: inline;

In de css voor alle browsers is deze span verborgen met display: none; Voor Internet Explorer 7 en 8 moet hij zichtbaar worden gemaakt.

Speciaal voor Internet Explorer 7

<!--[if IE 7]> <style> p#dubbel-ie {margin: 0 9px -60px 0;} p#rechtsonder-blur-ie {margin: -6px -296px -12px 0;} p#spread-ie {width: 287px; height: 74px; margin: 0 -294px -16px 0;} p#blur-neg-ie {width: 287px; height: 74px; margin: -20px -301px -16px 0;} </style> <![endif]-->

Deze code geldt alleen voor Internet Explorer 7. Uitleg zie bij Speciaal voor Internet Explorer 7 en 8.

In deze css staan alleen maar wat aanpassingen om de paragrafen met schaduw op de goede plaats te krijgen en de goede breedte en hoogte te geven. Omdat je dit alleen maar via uitproberen kunt regelen, valt er weinig aan uit te leggen. Gewoon net zolang aan sleutelen tot het goed staat. De benodigde maten kunnen totaal anders zijn dan voor Internet Explorer 8. Vraag me niet waarom. Bij het gebruik van behaviors en filters breekt gewoon de totale chaos uit.