Laatst aangepast: .
Schaduwen zonder gebruik van afbeeldingen, dubbele divs, en dergelijke, met gebruik van de css3-eigenschap box-shadow
. In Internet Explorer 7 en 8 wordt dit zo goed mogelijk geïmiteerd.
Alles op deze site kan vrij worden gebruikt, met twee beperkingen:
* Je gebruikt het materiaal op deze site volledig op eigen risico. Het kan prima zijn dat er fouten in de hier verstrekte info zitten. Voor eventuele schade die door gebruik van materiaal van deze site ontstaat, in welke vorm dan ook, zijn www.css-voorbeelden.nl en medewerkers daarvan op geen enkele manier verantwoordelijk.
* Deze uitleg wordt regelmatig bijgewerkt. Het is daarom niet toegestaan deze uitleg op welke manier dan ook te verspreiden, zonder daarbij duidelijk te vermelden dat de uitleg afkomstig is van www.css-voorbeelden.nl en dat daar altijd de nieuwste versie is te vinden. Dit is om te voorkomen dat er verouderde versies worden verspreid.
Een link naar www.css-voorbeelden.nl wordt trouwens altijd op prijs gesteld.
Bij het maken van dit voorbeeld ben ik gewoon begonnen wat met box-shadow
te spelen. Dat levert dus ook een aantal volstrekt onbruikbare dingen op. Maar het laat wel zien wat er zoal mogelijk is. En dat kan allicht weer tot wel bruikbare dingen leiden.
Nadat alles af was in de echte browsers, heb ik geprobeerd alles na te maken in Internet Explorer 7 en 8. Vandaar dat veel helemaal niet of onvolledig werkt in deze twee programma's.
Internet Explorer 7 en 8 kennen de eigenschap box-shadow
niet. In deze browsers probeer ik de schaduwen zo goed mogelijk te imiteren, maar veel dingen zijn gewoon stomweg onmogelijk. Bij Bekende problemen staat een volledig overzicht van de verschillen tussen fatsoenlijke browsers aan de ene kant en Internet Explorer 7 en 8 aan de andere kant.
Internet Explorer 9 ondersteunt box-shadow
, dus speelt dit niet meer.
border-radius
. Omdat Internet Explorer 9 dit ook eindelijk ondersteunt, maakt dit de voor Internet Explorer 7 en 8 benodigde kunstgrepen overbodig.Het voor Internet Explorer 7 en 8 gebruikte htc-bestand om border-radius
te kunnen gebruiken is door de maker Remiz Rahnas gratis ter beschikking gesteld en kan worden gedownload vanaf curved corner. Dit bestand bevat JavaScript. Ronde hoeken maken in Internet Explorer 7 en 8 zonder gebruik van JavaScript is onmogelijk, tenzij je afbeeldingen gebruikt.
Op internet circuleren, naast dit script, nogal wat tovermiddelen die beloven op simpele manier Internet Explorer 7 en 8, en soms zelfs Internet Explorer 6, te veranderen in een fatsoenlijke browser. Zoals scripts die ronde hoeken én schaduw mogelijk maken.
Geen van de door mij geteste scripts bleek zelfs maar enigszins fatsoenlijk te werken, behalve het gebruikte border-radius.htc. Ik sluit niet uit dat er goede scripts zijn, maar ik heb ze niet kunnen vinden.
Oplossingen met complete JavaScript-bibliotheken en zo werken vaak wel goed. Zie voor dat soort bibliotheken de pagina met links.
box-shadow
en border-radius
niet kennen, negeren het gewoon. Alles wordt gewoon weergegeven, maar zonder schaduw of ronde hoeken. box-shadow
en border-radius
leveren dus geen problemen op in oudere browsers.box-shadow
. Anders is de schaduw volledig doorzichtig, waardoor je hem niet ziet.De schaduwen die met behulp van box-shadow
worden gemaakt, worden niet bij de breedte en hoogte van het element opgeteld. (Voor Internet Explorer 7 en 8 ligt dit anders, want die werken niet met box-shadow
. Zie daarvoor bij Bekende problemen.)
Als je een element een schaduw geeft, komt die schaduw dus over of onder de elementen ernaast te staan. In de standaard is niet echt duidelijk geregeld wat dan zichtbaar is: de schaduw of het buur-element waar de schaduw overheen komt te staan: dit is afhankelijk van welk element normaal genomen zichtbaar zou zijn, als de elementen over elkaar heen zouden staan.
Een box-shadow
aan de buitenkant komt gelijk ónder de achtergrond van het element waar hij bij hoort te staan, een box-shadow
aan de binnenkant gelijk bóven die achtergrond. De plaats van de box-shadow
in de 'hoogte' (z-index
) van de pagina is dus gekoppeld aan de plaats van de achtergrond van het element waar de box-shadow
bij hoort.
Bij een doorzichtige box-shadow
kan het nog onvoorspelbaarder worden. Het simpelste is om het gewoon even uit te proberen. Gelukkig blijken alle browsers dit op dezelfde manier af te handelen.
In onderstaande afbeelding staat op de bovenste regel gewoon een span met de tekst 'een'.
Op de tweede regel staan een span met 'twee', de <p> die later aan alle kanten een schaduw krijgt, en een span met 'drie'. Deze drie elementen zijn naar links gefloat en de <p> heeft geen marge. In de spans met 'twee' en 'drie' is elk woord met een <br> op een nieuwe regel gezet.
Op de vierde regel staat weer een span met 'vier'.
Het resultaat van deze constructie is een rechthoek, waar aan alle kanten tekst tegenaan komt te staan:
Aan deze constructie voeg ik aan alle kanten een grijze schaduw toe:
Zonder gebruik van position: relative;
bij de span met 'twee'.
De tekst is aan alle kanten door de grijze schaduw heen te zien, behalve links. Gelukkig is deze weergave dus in alle genoemde browsers hetzelfde.
Het toevoegen van een simpel position: relative;
aan de span met 'twee' zorgt ervoor, dat deze een hogere z-index
krijgt en daardoor nu ook zichtbaar is.
Met gebruik van position: relative;
bij de span met 'twee'.
Duidelijk is wel, dat goed getest moet worden bij gebruik van box-shadow
, om dit soort lastig van tevoren te bedenken effecten te voorkomen. Dit speelt nog sterker voor Internet Explorer 7 en 8, die er helemaal een puinhoop van maken.
Als ik de schaduw zwart maak, maakt het niet meer uit wat er boven of onder staat, omdat zwarte tekst op een massief zwarte schaduw gewoon onzichtbaar is:
Zwarte tekst op een massief zwarte schaduw valt weg.
Als ik de tekst echter een kleurtje geef, is hij wel weer zichtbaar. De tekst blijkt dus gewoon boven de schaduw gezet te worden. Behalve aan de linkerkant, maar dat kan ik oplossen door het toevoegen van een position: relative; aan de span met 'twee', zoals iets hoger is beschreven.
Dezelfde constructie als op de afbeelding hierboven, maar nu is de tekst oranje en dus wel te zien boven de zwarte schaduw.
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.
Het maken van een schaduw-effect rondom bijvoorbeeld een afbeelding of menu is veel moeilijker dan je zou denken. Aan een combinatie van schaduw en ronde hoeken kun je beter helemaal niet beginnen: herstellingsoorden zitten vol overspannen sitebouwers die dit geprobeerd hebben.
Nog ingewikkelder wordt het, als je ook rekening wilt houden met andere lettergroottes en zoomen. Het overgrote deel van de technieken die je op internet kunt vinden, stort als een kaartenhuis in elkaar op het moment dat je de lettergrootte verandert of zoomt.
Tot css3 verscheen, kon je alleen schaduw bereiken door gebruik te maken van afbeeldingen, extra divs, en dergelijke. css3 heeft de eigenschap box-shadow
, waarmee je op uiterst simpele wijze een element van een schaduw kunt voorzien. En zelfs van veel meer dan een enkele simpele schaduw.
Als je box-shadow
combineert met een andere css3-eigenschap, border-radius
voor ronde hoeken, zijn de mogelijkheden vrijwel eindeloos.
En omdat dit in de browser zelf is ingebouwd, gaat het ook goed bij andere lettergroottes en zoomen. Tot nu toe moest elke sitebouwer dit zelf oplossen, maar het is natuurlijk veel handiger als de browser dit zelf doet.
Naast het maken van een simpele schaduw heeft box-shadow
ook de mogelijkheid om meerdere schaduwen weer te geven. Het tweede voorbeeld heeft een grijze én een zwarte schaduw. En het laatste voorbeeld, de veelkleurige cirkel, is opgebouwd uit zes schaduwen, gecombineerd met border-radius
. Bij gebruik van meerdere schaduwen komt de eerst opgegeven schaduw bovenaan te staan, de tweede daaronder, enz. De eerste schaduw is dus altijd volledig zichtbaar.
Met de eerste twee getallen geef je de plaats en de breedte van de schaduw aan. Als het eerste getal positief is, komt de schaduw rechts van het element te staan. Als het negatief is, komt de schaduw links van het element te staan.
Als het tweede getal positief is, staat de schaduw beneden het element, als het positief is erboven.
Een eventueel derde getal geeft de blur aan: over de afstand van dit getal vervaagt de schaduw langzaam. Dit getal mag niet negatief zijn.
Een eventueel vierde getal zorgt voor een schaduw, die volledig rondom het element staat: aan alle kanten. De waarde van het getal bepaalt de breedte. Met behulp van de eerste twee getallen, kun je de schaduw eventueel meer aan de ene of meer aan de andere kant zetten. Je kunt de schaduw zelfs op een totaal andere plaats neerzetten dan het element, waar hij bij hoort.
Deze vier getallen werken met elkaar samen. Wat precies de juiste waarden zijn, is vaak een kwestie van even uitproberen.
Een andere totaal nieuwe mogelijkheid is het gebruik van inset
, waardoor de schaduw niet buiten, maar bínnen het element komt te staan. Dit is gebruikt bij de blauwe knoppen. Bij de opstaande rand bij het voorbeeld gelijk boven de foto is een inset
-schaduw gebruikt samen met een gewone schaduw.
Door gewoon wat te spelen, kun je de grappigste effecten ontdekken. In dit voorbeeld is steeds een 'gewone' kleur genomen, maar je kunt ook een doorzichtige kleur maken met rgba()
, wat weer heel andere effecten geeft.
Helaas kennen Internet Explorer 7 en 8 box-shadow
en border-radius
niet. Om in die browsers een schaduw te krijgen, kan een zogenaamd filter worden gebruikt, een techniek die alleen in Internet Explorer werkt. Met dit filter kan maar één schaduw worden gemaakt, en het kent geen inset
. Internet Explorer 9 ondersteunt box-shadow
.
Voor de ronde hoeken wordt in Internet Explorer 7 en 8 gebruik gemaakt van een behavior. Dat is een constructie, die alleen in Internet Explorer werkt. Het importeert een bestand waarin JavaScript en Vector Markup Language (VML) staan. VML is een taal voor grafische constructies, die alleen in Internet Explorer werkt, het is geen standaard. Internet Explorer 9 ondersteunt gelukkig border-radius
.
De lijst aan problemen die ronde hoeken en schaduwen in Internet Explorer 7 en 8 met zich meebrengen, is helaas omgekeerd evenredig aan de mogelijkheden. Lang niet alle dingen die mogelijk zijn met box-shadow
en border-radius
kun je in deze browsers reproduceren. Eigenlijk zijn alleen simpele, effen schaduwen zonder ronde hoeken goed te maken in Internet Explorer 7 en 8. Dit kunnen ook meerdere schaduwen zijn, als ze maar effen zijn en geen ronde hoeken hebben.
De problemen worden uitgebreider besproken bij Speciaal voor Internet Explorer 7 en 8.
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>
<html 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 eventuele url, anders werkt het niet goed.
Het hier gebruikte doctype is dat van html5. Dit kan al veilig worden gebruikt.
<meta charset="utf-8">
Zorgt dat de browser letters met accenten en dergelijke goed kan weergeven.
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 (ä
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" href="../../css/naam-van-stylesheet.css">
<!--Instellingen voor Internet Explorer -->
<!--[if IE]>
<link rel="stylesheet" href="../../css/naam-van-ie-stylesheet.css">
<![endif]-->
Dit stukje code 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>
en </style>
staat (zonder deze begin- en eindregel).
De bovenste regel is voor de algemene stylesheet, geldig voor alle browsers. Dit 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.
Het eigenaardige stukje code daaronder 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. Op deze manier kun je 'n stylesheet alleen voor Internet Explorer opnemen.
Dit stukje geldt voor alle versies van Internet Explorer, maar je kunt het ook per versie aangeven.
De link verwijst naar een aparte stylesheet voor Internet Explorer, waarin je css speciaal voor die browser zet. Op de plaats van "../../css-naam-van-ie-stylesheet.css"
moet je pad naar en naam van je stylesheet voor Internet Explorer invullen.
De link naar het aparte stylesheet voor Internet Explorer moet ná de link naar het algemene stylesheet komen, omdat de opdrachten voor Internet Explorer dan over die uit het algemene stylesheet heen gaan.
<style>
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 die stylesheet komt alles wat tussen <style>
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 deze lay-out alleen, 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
Het element waarbinnen de hele pagina staat. Veel instellingen die hier worden opgegeven, worden geërfd door de kinderen van <body>. Ze gelden voor de hele pagina, tenzij ze later worden gewijzigd. Dit geldt bijvoorbeeld voor de lettersoort, de lettergrootte en de voorgrondkleur.
margin: 0; padding: 0;
Slim om te doen, is soms wat afwijkend in verschillende browsers.
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.
In dit voorbeeld wordt geen em gebruikt bij lettergroottes, omdat het veranderen van de lettergrootte in Internet Explorer problemen geeft bij het gebruik van border-radius
. Maar op de meeste pagina's zal niet alles binnen een element met ronde hoeken staan, dus dan is deze methode wel zinvol.
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.
background: #ff9;
Achtergrondkleurtje.
div
Alle divs.
Van elk voorbeeld is ook een afbeelding aanwezig, waarop te zien is hoe de schaduw er uit zou moeten zien. In elke div staat links een afbeelding en rechts de daarbij horende werkende code. Door deze twee aan twee in een div te zetten, kan ik het redelijk makkelijk over het venster van de browser verdelen.
clear: both;
Wat er gebeurt zonder gebruik van clear: both;
Zet de inhoud van de divs op een nieuwe regel, ook als eerdere elementen zijn gefloat.
Een div is een blok-element en wordt daarom in principe altijd op een nieuwe regel gezet. Anders is dat voor de inhoud van een blok-element. Als eerdere elementen zijn gefloat, wordt in de regel de inhoud van het volgende blok-element achter of voor het gefloate element neergezet, voor zover er ruimte is.
Wat er zonder clearen gebeurt kun je op de afbeelding hiernaast zien. De puinhoop wordt nog 'ns extra groot, omdat in dit voorbeeld redelijk vaak negatieve marges en zo zijn gebruikt.
Omdat er naar links en naar rechts is gefloat, gebruik ik clear: both
: clear naar beide zijden.
(Overigens gebruik ik altíjd both, tenzij dat echt niet de bedoeling is. Er is niets op tegen en soms komt er later 'n float naar de andere kant bij. Waarna je je soms ongelukkig zoekt naar de reden, waarom plotsklaps de lay-out overgaat tot deze verregaande virtuele vorm van het anarchisme van de daad.)
width: 690px;
Door de divs een breedte te geven, kan ik makkelijker floaten. De afbeeldingen komen allemaal tegen de linkerkant van de divs te staan, de voorbeelden rechts. En omdat alle divs even breed zijn, komen afbeeldingen en voorbeelden (ongeveer) op dezelfde plaats te staan. (Het waarom van het 'ongeveer' komt bij de afbeeldingen en voorbeelden afzonderlijk ter sprake.)
Omdat de divs een breedte hebben, kan ik ook horizontaal centreren met behulp van de methode gelijk hieronder.
margin: 0 auto;
Omdat voor onder en links geen waarde is ingevuld, krijgen die automatisch dezelfde waarde als boven en rechts. Hier staat dus eigenlijk 0 auto 0 auto
in de volgorde boven - rechts - onder - links.
Boven en onder geen marge, links en rechts auto
, wat hier betekent: evenveel. Links en rechts is de marge dus altijd even groot, ongeacht de grootte van het venster van de browser, dus horizontaal staan de divs (en dus ook de inhoud daarvan) altijd in het midden.
padding-top: 30px;
Kleine afstand tussen de verschillende afbeeldingen en voorbeelden.
Waarom gebruik ik geen marge aan de bovenkant? Ik heb in de vorige regel toch al een marge gebruikt, dus als ik die verander van margin: 0 auto;
in margin: 30px auto 0;
dan heb ik toch ook 30 px afstand aan de bovenkant, en ik spaar een regel css uit.
In dit geval 'verdwijnen' de marges omdat er is gefloat. Ik ga hier niet verder op in, het is een van de ingewikkeldste dingen van css. Er zijn goede redenen voor dit gedrag, maar soms komt het wat onhandig uit.
Bij elementen met een clear
werkt padding vrijwel altijd wel goed. Dat is de reden dat ik hier padding gebruik.
(Je kunt met kunstgrepen een marge ook wel werkend krijgen, maar dat is veel ingewikkelder. Bovendien moet je dan weer - het zal 'ns niet zo zijn - voor Internet Explorer ouder dan versie 8 allerlei correcties aan gaan brengen, want die grossieren in afwijkingen van de standaard en de meest exotische bugs bij floats en marges.)
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:first-child
Alle paragrafen, maar alleen maar als ze het eerste kind van een ouder zijn.
Een van de aardige dingen van het maken van sites is, dat je de meest vreemde dingen uit kunt halen met kinderen (en ouders, grootouders, broers en zussen, enz.), zonder dat dat tot vreemde gezichten of juridische gevolgen leidt. Probeer op 'n school maar 'ns uit te leggen waarom je vindt dat alle eerstgeborenen links moeten zitten, en dat alle andere kinderen, de meester en de juf over ze heen mogen lopen alsof ze er niet zijn...
In dit geval zit in elke eerstgeborene een afbeelding: elke eerste paragraaf binnen een div bevat de afbeelding van een voorbeeld.
Hierboven bij p heb ik de instellingen opgegeven die voor álle <p>'s gemeenschappelijk zijn. Verderop komen de instellingen voor elke <p> afzonderlijk. Maar ook de <p>'s met afbeeldingen hebben nog een aantal instellingen gemeenschappelijk, en die geef ik hier op.
float: left;
Bij p heb ik opgegeven dat alle paragrafen naar rechts moeten floaten. Hier geef ik op, dat de paragrafen met een afbeelding zo hoog mogelijk en dan zover mogelijk naar links moeten worden neergezet. Ze komen daardoor netjes op één lijn onder elkaar tegen de linkerkant van de divs te staan. En dus de erin zittende afbeeldingen ook.
Omdat deze afbeeldingen niet allemaal even groot zijn, moet ik later voor een aantal afbeeldingen nog wel kleine correcties aanbrengen.
(De afbeeldingen kunnen niet allemaal even groot zijn. Sommige schaduwen zijn precies even groot als de paragraaf. Bij andere schaduwen staat een deel buiten de paragraaf. De bijbehorende afbeelding is daardoor noodgedwongen ook groter, anders zou het deel van de schaduw buiten de paragraaf er niet op passen.)
background: none;
Bij p heb ik een witte achtergrond aan alle <p>'s gegeven. Maar niet alle afbeeldingen in de rechterparagrafen vullen de paragraaf helemaal. Daardoor zou ik om sommige afbeeldingen grotere of kleinere delen van de witte achtergrond zien. Door de achtergrond weg te halen, voorkom ik die witte plekken.
div#kop p
De paragrafen binnen de div met id="kop". Hierbinnen staan de tekstjes, die boven beide kolommen staan.
height: auto; min-height: 3.6em;
Bij p heb ik alle paragrafen een hoogte van 60 px gegeven. Omdat hier in de linkerparagraaf vrij veel tekst staat, kan die hoogte bij 'n iets grotere letter al snel te klein worden. Daarom laat ik hier de hoogte automatisch aanpassen aan de inhoud.
Eén tekstregel is ongeveer 1.2 em hoog. In de linkerparagraaf staan, bij een normale lettergrootte, 3 regels tekst. Dat is samen dus ongeveer 3.6 em hoog.
In de rechterparagraaf staat minder tekst. Als ik nu de minimumhoogte 3.6 em maak, zal deze bij een normale lettergrootte toch even hoog zijn als de linkerparagraaf. Als ik de lettergrootte verklein, blijven beide paragrafen nog steeds even hoog door de minimumhoogte. Als ik de lettergrootte verhoog, wordt de linkerparagraaf wel hoger dan de rechter. Maar voor zo'n voorbeeld vind ik dit netjes genoeg: vrijwel altijd zullen beide paragrafen even hoog zijn.
border: black dashed 1px;
Zwarte streepjeslijn rondom de paragrafen.
background: #eee;
Achtergrond lichtgrijs.
div#kop p:first-child
De paragraaf die het eerste kind is van de div met id="kop". Dit is de paragraaf met tekst boven de linkerkolom.
margin-left: 4px;
Iets naar rechts verplaatsen. Deze paragraaf staat boven de plaatjes met voorbeelden. Deze plaatjes zijn vaak iets verplaatst, omdat ze niet allemaal even groot zijn. Met deze kleine correctie staat de paragraaf met tekst netjes uitgelijnd boven de afbeeldingen.
#img-rechtsonder, #img-spread-inset
De elementen met id="rechtsonder" en id="img-spread-inset".
De eerste selector hoort bij de bovenste afbeelding met de zwarte schaduw rechtsonder, de tweede selector hoort bij de brede blauwe knop. Beide hebben toevallig dezelfde correctie nodig.
margin: -3px 0 0 1px;
Afbeeldingen 3 px omhoog verplaatsen en 1 px naar rechts.
Omdat de afbeeldingen niet allemaal even groot zijn, zijn er soms kleine correcties nodig om ze netjes uitgelijnd boven elkaar en op gelijke hoogte met de bijbehorende voorbeelden te krijgen.
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.
#img-dubbel
Het element met id="img-dubbel". Deze hoort bij de tweede afbeelding met twee schaduwen: een zwarte schaduw linksboven en een grijze rechtsonder.
margin: -11px 0 0 -5px;
Afbeelding 11 px omhoog verplaatsen en 5 px naar links.
Omdat de afbeeldingen niet allemaal even groot zijn, zijn er soms kleine correcties nodig om ze netjes uitgelijnd boven elkaar en op gelijke hoogte met de bijbehorende voorbeelden te krijgen.
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.
#img-linksboven
Het element met id="img-linksboven". Deze hoort bij de derde afbeelding met ronde hoeken en een grijze schaduw linksboven.
margin: -8px 0 0 -3px;
Afbeelding 8 px omhoog verplaatsen en 3 px naar links.
Omdat de afbeeldingen niet allemaal even groot zijn, zijn er soms kleine correcties nodig om ze netjes uitgelijnd boven elkaar en op gelijke hoogte met de bijbehorende voorbeelden te krijgen.
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.
#img-rechtsonder-inset
Het element met id="img-rechtsonder-inset". Deze hoort bij de vierde afbeelding met ronde hoeken en een grijze schaduw rechtsonder bínnen de paragraaf.
margin: -3px 0 0 1px;
Afbeelding 3 px omhoog verplaatsen en 1 px naar rechts.
Omdat de afbeeldingen niet allemaal even groot zijn, zijn er soms kleine correcties nodig om ze netjes uitgelijnd boven elkaar en op gelijke hoogte met de bijbehorende voorbeelden te krijgen.
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.
#img-rechtsonder-blur
Het element met id="img-rechtsonder-blur". Deze hoort bij de vijfde afbeelding met een vervagende schaduw rechtsonder.
margin: -15px 0 0 -11px;
Afbeelding 15 px omhoog verplaatsen en 11 px naar links.
Omdat de afbeeldingen niet allemaal even groot zijn, zijn er soms kleine correcties nodig om ze netjes uitgelijnd boven elkaar en op gelijke hoogte met de bijbehorende voorbeelden te krijgen.
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.
#img-spread
Het element met id="img-spread". Deze hoort bij de zesde afbeelding met een vervagende schaduw rondom, gelijk boven de brede blauwe knop.
margin: -13px 0 0 -16px;
Afbeelding 13 px omhoog verplaatsen en 16 px naar links.
Omdat de afbeeldingen niet allemaal even groot zijn, zijn er soms kleine correcties nodig om ze netjes uitgelijnd boven elkaar en op gelijke hoogte met de bijbehorende voorbeelden te krijgen.
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.
#img-spread-inset
Het element met id="img-spread-inset". Deze hoort bij de zevende afbeelding, de brede blauwe knop met ronde hoeken.
margin-left: -5;
Afbeelding 5 px naar links verplaatsen.
Omdat de afbeeldingen niet allemaal even groot zijn, zijn er soms kleine correcties nodig om ze netjes uitgelijnd boven elkaar en op gelijke hoogte met de bijbehorende voorbeelden te krijgen.
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.
#img-blur-neg
Het element met id="img-blur-neg". Deze hoort bij de achtste afbeelding met de blauwe schaduw rondom, gelijk onder de brede blauwe knop.
margin: -25px 0 0 -19px;L
Afbeelding 25 px naar boven en 19 px naar links verplaatsen.
Omdat de afbeeldingen niet allemaal even groot zijn, zijn er soms kleine correcties nodig om ze netjes uitgelijnd boven elkaar en op gelijke hoogte met de bijbehorende voorbeelden te krijgen.
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.
#img-inset-outset
Het element met id="img-inset-outset". Deze hoort bij de negende afbeelding met de ronde hoeken en de opstaande rand, gelijk boven de foto.
margin: -12px 0 0 -7px;
Afbeelding 12 px omhoog en 7 px naar links verplaatsen.
Omdat de afbeeldingen niet allemaal even groot zijn, zijn er soms kleine correcties nodig om ze netjes uitgelijnd boven elkaar en op gelijke hoogte met de bijbehorende voorbeelden te krijgen.
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
Het element met id="img-foto". Deze hoort bij de tiende afbeelding: de foto.
margin: -11px 0 0 55px;
Afbeelding 11 px omhoog en 55 px naar rechts verplaatsen.
De foto is veel smaller dan de andere afbeeldingen. De marge links van 55 px zorgt ervoor, dat hij horizontaal ongeveer in het midden van de andere afbeeldingen komt te staan.
p#foto
De paragraaf met id="foto". Dit is de paragraaf waar de foto in komt te staan. Een beetje een buitenbeentje, want het is de enige paragraaf die niet zelf een schaduw krijgt. De schaduw wordt aangebracht bij de afbeelding die in deze paragraaf staat.
width: 149px;
Bij p hebben alle paragrafen een breedte van 270 px gekregen. Dat is veel breder dan nodig is om de foto met de schaduw neer te kunnen zetten. De simpelste manier om de foto op de goede plaats te krijgen, is gewoon de paragraaf even breed te maken als de foto: 149 px.
height: 233px;
Bij p hebben alle paragrafen een hoogte van 60 px gekregen. Dat is te laag om de foto in te kunnen zetten. De simpelste manier om de foto op de goede plaats te krijgen, is gewoon de paragraaf even hoog te maken als de foto: 149 px.
margin-right: 63px;
De foto is veel smaller dan de andere paragrafen met een schaduw. De marge rechts van 63 px zorgt ervoor, dat hij horizontaal ongeveer midden onder de andere afbeeldingen komt te staan.
background: none;
Bij p hebben alle paragrafen een padding van 3 px gekregen. En ook een witte achtergrond. Daardoor is, waar geen schaduw staat, de witte achtergrond zichtbaar rondom de foto. De simpelste manier om dit te voorkomen is gewoon de witte achtergrond weghalen.
#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.
#img-knop
Het element met id="img-knop". Deze hoort bij de elfde afbeelding: de twee kleine blauwe knoppen. Beide knoppen staan samen op één afbeelding.
margin: -15px 0 0 -12px;
Afbeelding 15 px omhoog en 12 px naar links verplaatsen.
Omdat de afbeeldingen niet allemaal even groot zijn, zijn er soms kleine correcties nodig om ze netjes uitgelijnd boven elkaar en op gelijke hoogte met de bijbehorende voorbeelden te krijgen.
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
De paragraaf met id="knop-muis". Dit is de paragraaf waar de links smalle blauwe knop in staat.
margin-right: 35px;
Bij p heb ik alle paragrafen naar rechts gefloat. De eerste paragraaf binnen elke div, dat is de <p> waarbinnen de afbeeldingen staan, wordt bij p:first-child naar links gefloat.
In deze div staan echter drie paragrafen. De eerste en de laatste staan goed, maar de middelste staat tegen de laatste aan. Hierdoor staan beide knoppen pal tegen elkaar aan. Door rechts een marge te geven, staan beide knoppen redelijk goed ten opzichte van de andere paragrafen en ten opzichte van elkaar.
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.
#img-meerkleurig
Het element met id="img-meerkleurig". Deze hoort bij de onderste afbeelding: de veelkleurige rand.
margin-left: 58px;
Afbeelding 58 px naar rechts verplaatsen.
Deze afbeelding is veel smaller dan de andere afbeeldingen. De marge links van 58 px zorgt ervoor, dat hij horizontaal ongeveer in het midden van de andere afbeeldingen komt te staan.
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.
p#meerkleurig span
De spans binnen de paragraaf met id="meerkleurig". Dat is hier maar één span, waarbinnen een tekst staat, die alleen in Internet Explorer 7 en 8 moet worden weergegeven.
display: none;
Tekst niet weergeven. Ik gebruik display: none;
zodat ook geen ruimte wordt ingenomen. Als ik visibility: hidden;
gebruik, zie je de tekst niet, maar hij neemt nog steeds ruimte in en verstoort daardoor de lay-out.
<!--[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.
<!--[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.
Gebruik vooral geen FrontPage, Publisher of Word (alle drie van Microsoft). Deze programma's maken niet-standaard code die alleen goed te bekijken is in Internet Explorer. In alle andere browsers zie je grotendeels bagger, áls je al iets ziet.
Publisher en Word zijn niet bedoeld om websites mee te maken. FrontPage is zwaar verouderd en wordt niet meer onderhouden door Microsoft. Als je beslist iets van Microsoft wilt gebruiken, schaf dan (voor honderden euro's) een nieuwer programma aan, dat zich wel aan de standaarden houdt.
Je kunt natuurlijk ook een goed gratis programma gebruiken. Links naar dat soort programma's vind je op de pagina met links onder Gereedschap → wysiwyg-editor.
Maar het allerbeste is om gewoon zelf html, css, enz. te leren, omdat zelfs het allerbeste programma het nog steeds zwaar verliest van 'n op de juiste manier met de hand gemaakte pagina.
Als je 'n site maakt in Firefox, Opera, Safari, Google Chrome of Edge, is er 'n hele grote kans dat hij in alle browsers werkt. Ik geef de voorkeur aan Firefox, omdat het de enige grote browser is die niet bij een bedrijf hoort dat vooral op je centen of je data uit is.
Google Chrome wordt ook door veel mensen gebruikt, maar ik heb dus wat moeite met hoe Google je hele surfgedrag, je schoenmaat en de kleur van je onderbroek vastlegt. Daarom gebruik ik Google Chrome zelf alleen om in te testen.
Het allereerste dat je moet invoeren is het doctype, vóór welke andere code dan ook. Een lay-out met een missend of onvolledig doctype ziet er totaal anders uit dan een lay-out met een geldig doctype. Wát er anders is, verschilt ook nog 'ns tussen de diverse browsers. Als je klaar bent en dan nog 'ns 'n doctype gaat invoeren, weet je vrijwel zeker dat je van voren af aan kunt beginnen met de lay-out.
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.
Gebruik een 'strict' doctype of het doctype voor html5. Deze zijn bedoeld voor nieuwe sites. Het transitional doctype is bedoeld voor al bestaande sites, niet voor nieuwe. Het transitional doctype staat talloze tags toe, die in html5 zijn verboden. Deze tags worden al zo'n tien jaar afgeraden. Het transitional doctype is echt alleen bedoeld om de puinhoop van vroeger, toen niet volgens standaarden werd gewerkt, enigszins te herstellen.
Het strict doctype staat verouderde tags niet toe. Daardoor kan met 'n strict doctype, of het nu html of xhtml is, probleemloos worden overgestapt naar html5. Met een transitional doctype en het gebruik van afgekeurde tags kun je niet overstappen naar html5. Je moet dan eerst alle verouderde tags verwijderen, wat echt ontzettend veel werk kan zijn.
Als het om een lay-out of iets dergelijks gaat: zorg eerst dat header, kolommen, footer, menu, en dergelijke staan en bewegen zoals je wilt, en ga dan pas details binnen die blokken invullen. In eerste instantie gebruik je dus bijvoorbeeld 'n leeg blok voor waar uiteindelijk het menu komt te staan.
Als je begint met allerlei details, is er 'n heel grote kans dat die de werking van de blokken gaan verstoren. Bouw eerst het huis, en ga dan pas de kamers inrichten. Als de blokken eenmaal werken zoals je wilt, zul je het gelijk merken als 'n toegevoegd detail als tekst of 'n afbeelding iets gaat storen. Daarvoor moet je natuurlijk wel regelmatig controleren in verschillende browsers of alles nog wel goed werkt.
Je kunt de blokken tijdens het aanpassen opvullen met bijvoorbeeld <br>1<br>2<br>3 enz., tot ze de juiste hoogte hebben. Het is handig om aan het einde even iets toe te voegen als 'laatste', zodat je zeker weet dat er niet drie regels onderaan naar 't virtuele walhalla zijn verhuisd.
Om de breedte te vullen kun je het best 'n kort woord als 'huis' duizend keer of zo herhalen. Ook hier is het handig om aan 't einde (en hier ook aan 't begin) 'n herkenningsteken te maken, zodat je zeker weet dat je de hele tekst ziet.
Valideren, valideren, valideren en dan voor 't slapen gaan nog 'ns valideren.
Valiwie???
Valideren is het controleren van je (x)html en css op 'n hele serie fouten. Computers zijn daar vaak veel beter in dan mensen. Als je 300 keer <h2> hebt gebruikt en 299 keer </h2> vindt 'n computer die ene missende </h2> zonder enig probleem. Jij ook wel, maar daarna ben je misschien wel aan vakantie toe.
Je kunt je css en (x)html zowel valideren als 't online staat, als wanneer 't nog in je computer staat. Web Developer ('n Firefox-extensie) heeft zelfs 'n mogelijkheid om de html voortdurend, bij elke wijziging, opnieuw te valideren. (Die mogelijkheid is er ook bij css, maar daar wordt altijd aangegeven dat 't valid is, wat je er ook aan onzin in zet. Maar als je in de balk op css klikt ga je naar de echte validator, en die controleert wel goed.)
(x)html kun je valideren op: validator.w3.org
css kun je valideren op: jigsaw.w3.org/css-validator
Valideren kan helpen om gekmakende fouten te vinden. Valid code garandeert ook dat de weergave in verschillende browsers (vrijwel) hetzelfde is. En valid code is over twintig jaar ook nog te bekijken.
Het eerste deel van deze tekst is voor alle voorbeelden hetzelfde. Eventueel specifiek voor dit voorbeeld geldende dingen staan verderop onder het kopje Specifiek voor dit voorbeeld.
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:
Accesskeys (sneltoetsen) kun je beter niet gebruiken, deze gaven te veel problemen omdat ze vaak dubbelop zijn met sneltoetsen voor de browser of andere al gebruikte sneltoetsen. Bovendien is voor de gebruiker meestal niet duidelijk welke toetsen het zijn.
In de komende html5 waren ze eerst niet toegestaan, maar inmiddels lijkt het erop dat ze toch worden toegestaan, maar op 'n andere manier dan in html 4.01. Ik ga ze zelf pas weer gebruiken als duidelijk is hoe ze gaan werken, en als ze beter zijn uitgedacht dan in html 4.01 het geval was, want bij een goede toepassing is het op zich een heel goed idee.
In het verleden werd vaak aangeraden de volgorde van de code aan te passen. Een menu bijvoorbeeld kon in de html onderaan worden gezet, terwijl het op het scherm met behulp van css bovenaan werd gezet. Inmiddels zijn screenreaders en dergelijke zo verbeterd, dat dit niet meer wordt aangeraden. De volgorde in de html kan tegenwoordig beter hetzelfde zijn als op het scherm, omdat het anders juist verwarrend kan werken.
Een andere mogelijkheid is een zogenaamde skip-link: een link die je buiten het scherm parkeert met behulp van css, zodat hij normaal genomen niet te zien is. Zo'n link is wel zichtbaar te maken in speciale programma's zoals spraakbrowsers. Die link staat boven het menu en linkt naar de inhoud van de pagina, zodat mensen met één klik het hele menu kunnen passeren.
Van oorsprong was html een taal om wetenschappelijke documenten weer te geven, pas later is hij gebruikt voor lay-out. Maar daar is hij dus eigenlijk nooit voor bedoeld geweest. Het gebruiken van html voor lay-out leidt tot enorme problemen voor gehandicapten en tot een lage plaats in zoekmachines.
De html hoort alleen inhoud te bevatten, lay-out doe je met behulp van css. Die css moet in een extern stylesheet staan of, als hij alleen voor één bepaalde pagina van toepassing is, in de head van die pagina. Zoekmachines zijn ook niet dol op een oerwoud van inline-stijlen (dat zijn stijlen in de tag zelf: <div style="...">
.)
Breng een logische structuur aan in je document. Gebruik een <h1> voor de belangrijkste kop, een <h2> voor een subkop, enz. Spraakbrowsers en dergelijke kunnen van kopregel naar kopregel springen. En een zoekmachine gaat ervan uit dat <h1> belangrijke tekst bevat.
Dit geldt voor al dit soort structuurbepalende tags.
Als een <h1> te grote letters geeft, maak daar dan met behulp van je css 'n kleinere letter van, maar blijf die <h1> gewoon gebruiken. Op dezelfde manier kun je al dit soort dingen oplossen.
Frames horen bij een volstrekt verouderde techniek, die heel veel nadelen met zich meebrengt. <iframe>'s hebben voor een deel dezelfde nadelen. Eén van die nadelen is dat de verschillende frames voor zoekmachines, schermlezers, en dergelijke als los zand aan elkaar hangen, omdat ze los van elkaar worden weergegeven. Ze staan wel naast elkaar op het scherm, maar er zit intern geen verband tussen.
Als je 'n stuk code vaker wilt gebruiken, zoals 'n menu dat op elke pagina hetzelfde is, voeg dat dan in met PHP of SSI. Dan wordt de pagina niet pas in de browser, maar al op de server samengesteld. Hierdoor zien zoekmachines, schermlezers, en dergelijke één pagina, net zoals wanneer je maar één pagina met html zou hebben geschreven.
(Je kunt beter PHP dan SSI gebruiken, omdat SSI min of meer aan het uitsterven is en PHP veel meer mogelijkheden heeft. Op deze site wordt in enkele voorbeelden nog SSI gebruikt, maar zodra die worden bijgewerkt, gaat dat vervangen worden door PHP.)
lang=".."
. Ik doe dat op mijn eigen site maar af en toe, omdat de tekst (en vooral de code) een mengsel is van Engels, Nederlands en eigengemaakte namen. Dit soort teksten is gewoon niet goed in te delen in een taal.<abbr>
bij afkortingen. Doe dat de eerste keer op een pagina samen met de title-eigenschap: <abbr title="en dergelijke">e.d.</abbr>
. Daarna kun je op dezelfde pagina volstaan met <abbr>e.d.</abbr>
. Doe je dit niet, dan is er 'n grote kans dat 'n spraakbrowser e.d. uit gaat spreken als Ed, en 'n zoekmachine kan er ook geen chocola van maken.De spider van 'n zoekmachine, schermlezers, en dergelijke kunnen geen plaatjes 'lezen'. Het is soms verbazingwekkend om te zien hoe veel, of eigenlijk: hoe weinig tekst er overblijft op een pagina, als de plaatjes worden weggehaald.
Op Linux kun je met Lynx kijken, hoe je pagina eruitziet zonder plaatjes en dergelijke, als echt alleen de tekst overblijft. Een installatie-programma voor Lynx op Windows is te vinden op invisible-island.net/lynx.
Ook kun je in Windows het gratis programma WebbIE installeren. WebbIE laat de pagina zien, zoals een tekstbrowser en dergelijke hem ziet. WebbIE is te downloaden vanaf www.webbie.org.uk.
Ten slotte kun je je pagina nog online op toegankelijkheid laten controleren op 'n behoorlijk aantal sites, zoals:
lowvision.support: laat zien hoe een kleurenblinde de site ziet. Engelstalig.
wave.webaim.org: deze laat grafisch zien, hoe de toegankelijkheid is. Engelstalig. Deze tester is ook als extensie in Firefox en Google Chrome te installeren.
Op de pagina met links kun je onder Toegankelijkheid links naar meer tests en dergelijke vinden.
Omdat zonder css, zoals veel spraakbrowsers en dergelijke de pagina weergeven, alleen de schaduwen en de afgeronde hoeken en/of borders verdwijnen, leveren box-shadow
en border-radius
geen problemen op wat betreft toegankelijkheid.
Laatst gecontroleerd op 1 mei 2012.
Dit voorbeeld is getest op de volgende systemen:
Er is steeds getest met de laatste versie van de browsers op de hierboven genoemde controledatum, 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 resoluties groter dan 800x600 is ook in- en uitzoomen en – voor zover de browser dat kan - een kleinere en grotere letter getest. Er is ingezoomd en vergroot tot zover de browser kan, maar niet verder dan tot 200%.
Er is getest met behulp van muis en toetsenbord, behalve op de iPad en Android.
Eventuele problemen, ook die met betrekking tot zoomen en lettergroottes, staan bij Bekende problemen. Dat stukje is er niet voor niets. Hierboven is alleen aangegeven, waarin is getest. Dat wil niet zeggen dat het werkt, en al helemaal niet dat het foutloos werkt. Lees Bekende problemen dus!
Naast deze 'gewone' browsers is ook getest in Lynx, WebbIE, NVDA en Fangs Screen Reader Emulator. 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. NVDA is een screenreader, zoals die door blinden wordt gebruikt. Fangs Screen Reader Emulator is een extensie bij Firefox, die de pagina laat zien zoals een screenreader hem ziet.
Als het voorbeeld in deze vier 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 onderaan Toegankelijkheid en zoekmachines onder het kopje Specifiek voor dit voorbeeld.
Alleen op de hierboven genoemde systemen en browsers is getest. Er is dus niet getest bijvoorbeeld 'n Blackberry. De kans is (heel erg) groot dat dit voorbeeld niet (volledig) werkt op niet-geteste systemen en apparaten. Om het wel (volledig) werkend te krijgen, zul je vaak wijzigingen en/of aanvullingen moeten aanbrengen, bijvoorbeeld met JavaScript.
De html is gevalideerd met de validator van w3c, de css ook. Als om een of andere reden niet volledig gevalideerd kon worden, wordt dat bij Bekende problemen vermeld.
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!)
Alleen grotere wijzigingen worden hier vermeld, geen dingen als een link die is geüpdatet.
:
Nieuw opgenomen.
25 december 2010:
Tot mijn niet geringe verbazing blijkt Safari op OS X het voorvoegsel -webkit-
nog nodig te hebben, terwijl het op Windows border-radius
zonder voorvoegsel al herkent.
Op alle plaatsen waar dat nodig was, zijn hiervoor wijzigingen aangebracht.
box-shadow
op Windows al volledig te werken (als -webkit-box-shadow-
), maar op OS X nog bij lange na niet. Nodige waarschuwingen toegevoegd.19 mei 2011:
-webkit-
weggehaald bij -webkit-border-radius
, omdat dit niet meer nodig is.box-shadow
inmiddels even volledig op OS X als op Windows.-moz-
in -moz-box-shadow
niet meer nodig. Ik heb het laten staan omdat op oudere Apples en in sommige Linux-distributies nog met Firefox 3 wordt gewerkt. (Op 1 mei 2012 alsnog weggehaald.)box-shadow
in de z-index
. (De specificatie is daar inmiddels iets duidelijker over.)inset
werd gebruikt bij border-radius
, de achtergrond rechthoekig weergegeven. Deze bug is gerepareerd.1 mei 2012:
type="text/css"
weggehaald bij <style>, omdat dit niet meer hoeft in html5.-moz-box-shadow
en -webkit-box-shadow
, de experimentele vorm van box-shadow
voor Firefox, Safari en Google Chrome, zijn niet meer nodig, omdat deze browsers nu box-shadow
herkennen. Tekst en code aangepast.-moz-border-radius
, de experimentele vorm van border-radius
voor Firefox, is niet meer nodig, omdat Firefox nu border-radius
herkent. Tekst en code aangepast.Er lijkt een bug in de css3-validator van w3c te zitten. Niet zo vreemd, want box-shadow
is nog behoorlijk nieuw. box-shadow
valideert niet altijd goed, terwijl de syntax goed is.
inset
lijkt vooraan te moeten staan, maar soms geeft dat juist een fout. Een 0 mag niet gelijk als eerste na box-shadow
staan. Een kleur mag niet altijd vooraan staan.
Het zijn overduidelijk bugs, want de voorbeelden die w3c zelf in de specificatie geeft, valideren ook niet.
Ik heb gewoon wat geprobeerd tot het wel valideerde. Echt uitgezocht heb ik het niet. Omdat het bugs zijn, is dat tijdverspilling.
(Aanvulling 19 mei 2011 en 1 mei 2012: ik heb niet gekeken of deze bug inmiddels is verholpen.)
Safari en Google Chrome moeten bij box-shadow
een kleur krijgen. Als je geen kleur meegeeft, wordt de schaduw doorzichtig en zie je hem dus niet.
Hoveren (over de onderste twee blauwe knoppen) werkt niet.
Als je de onderste twee blauwe knoppen aanraakt, verkleuren ze net zo als wanneer je er op de desktop over hovert. Dat is leuk, maar in feite werkt hoveren natuurlijk gewoon niet op 'n touchscreen.
Op Windows werkt box-shadow
volledig, al is nog wel het voorvoegsel -webkit-
nodig. Vreemd genoeg werkt het op OS X nog lang niet volledig. Vreemd, omdat Safari door Apple wordt gemaakt, wat ook de maker van OS X is.
Omdat Safari, net als Google Chrome, voor de weergave gebruik maakt van webkit, neem ik aan dat het niet al te lang zal duren, voordat box-shadow
(of -webkit-box-shadow
) ook op OS X volledig werkt.
Op dit moment werkt de waarde inset
niet, en ook het vierde getal, dat aangeeft dat de schaduw volledig rondom moet komen te staan, werkt nog niet. Als je inset
of het vierde getal gebruikt, heeft dit tot gevolg dat er helemaal geen schaduw verschijnt.
Dit houdt voor deze pagina met voorbeelden concreet in, dat de voorbeelden 4, 6, 7, 8, 9, de knoppen en de veelkleurige ring niet worden getoond in Safari op OS X. Als er ook een border is opgegeven, wordt alleen die normale border getoond. Als er geen border is opgegeven, zie je dus helemaal geen rand.
Ronde hoeken worden wel gewoon weergegeven. En ook de tekst en dergelijke wordt gewoon weergegeven, alleen de schaduw zie je niet.
Een schaduw die is gemaakt met behulp van box-shadow
, maakt het element niet groter. Breedte en hoogte blijven gelijk. Voor Internet Explorer 8 en helemaal voor Internet Explorer 7 ligt dit anders. Voor deze browsers wordt gebruikt gemaakt van het filter Dropshadow, omdat deze browsers box-shadow
niet kennen.
Filters zijn een bedenksel van Microsoft, die alleen maar in Internet Explorer werken. Microsoft heeft het, zoals vaker, voor elkaar weten te krijgen dat exact dezelfde code in deze twee versies van Internet Explorer verschillend werkt.
In onderstaande afbeeldingen is het rode deel de met behulp van het filter gemaakte schaduw. De tekst hoort tegen de witte rechthoek aan te staan. Dit gebeurt alleen in Internet Explorer 8 bij gebruik van positieve waarden (schaduw rechtsonder). In Internet Explorer 7 en in Internet Explorer 8 bij gebruik van negatieve waarden (schaduw linksboven) worden elementen naast de schaduw verplaatst.
Dit moet dus grondig worden getest en op een of andere manier gecorrigeerd. Helaas moet die correctie voor Internet Explorer 7 anders zijn dan voor Internet Explorer 8, omdat de afwijkingen ook anders zijn. In Internet Explorer 9 is deze ellende achter de rug.
Weergave in Internet Explorer 7 met gebruik van het filter Dropshadow met negatieve waarden.
Weergave in Internet Explorer 8 met gebruik van het filter Dropshadow met negatieve waarden. De code is exact hetzelfde als die bij de afbeelding links hiervan is gebruikt.
Weergave in Internet Explorer 7 met gebruik van het filter Dropshadow met positieve waarden.
Weergave in Internet Explorer 8 met gebruik van het filter Dropshadow met positieve waarden. De code is exact hetzelfde als die bij de afbeelding links hiervan is gebruikt.
Hoe je in Internet Explorer 7 en 8 een en ander op de juiste plaats kunt krijgen, staat uitgebreider beschreven bij Speciaal voor Internet Explorer 7 en 8.
border-radius
is gebruikt. Gelijk daarna worden de rechte hoeken alsnog veranderd in ronde. Hier is niets aan te doen, dit ligt aan de krakkemikkige werking van Internet Explorer 7 en 8.black
of als zes hexadecimale eenheden: #000000
. Een kleur aangeven met drie eenheden, zoals #000
, werkt niet.inset
en outset
, stijlen bij een border, werken niet als je bij dezelfde selector een behavior gebruikt. Vandaar dat je bij het voorbeeld gelijk boven de foto geen opstaande rand ziet, zoals in andere browsers, maar een gewone platte border.De pseudo-class :hover
werkt niet als je bij dezelfde selector een behavior gebruikt. Vandaar dat de twee blauwe knoppen niet van kleur veranderen als je erover hovert: ze hebben met behulp van een behavior ronde hoeken gekregen.
Er doen verhalen de ronde op internet dat hoveren wel zou werken in combinatie met een behavior, maar anderen ontkennen dat weer. Ik heb het in ieder geval niet werkend kunnen krijgen.
In Internet Explorer 7 en 8 kan de behavior voor ronde hoeken niet worden gecombineerd met het filter voor een dropshadow. Dus óf ronde hoeken, óf een schaduw, beide gelijk kan niet. Als je toch meerdere van dit soort effecten tegelijk wilt gebruiken, moet je afbeeldingen gebruiken of JavaScript of zoiets. Met alleen css zijn de smalle en brede blauwe knoppen en de veelkleurige figuur niet te imiteren.
Bij gebruik van het filter voor dropshadow én de behavior voor ronde hoeken, slaan Internet Explorer 7 en 8 werkelijk volledig op hol. z-index, position, float, enz. gaan de meest vreemde fratsen uithalen. Zo blijken bijvoorbeeld <p>'s die binnen een div staan, maar absoluut zijn gepositioneerd, de hoogte van totaal andere elementen binnen die div over te nemen. Om maar iets te noemen. Totale chaos.