Foto met schaduwrand in CSS

Wanneer je een foto wat meer eruit wilt laten springen dan kun je er een schaduwrand achter laten vallen
zodat de foto oplicht. Dit kan met behulp van CSS. Je hebt een foto nodig en een schaduwplaatje. In
ons artikel willen we gaan kijken hoe je dit precies aan moet pakken.

Het eerste wat je natuurlijk nodig hebt is de foto die je wilt gaan verfraaien met een schaduw. Nu zal dit
het probleem niet zijn dus daar hebben we het verder niet meer over.
Het tweede wat je moet maken is een
achtergrondplaatje met een egale kleur, in ons voorbeeld hebben we een .png gemaakt van 600×600 pixels.
in principe is deze groot genoeg voor ieder plaatje wat op een website komt te staan.
Maak van het zelfde
plaatje ook een .gif bestand aan, dat hebben we nodig voor Internet Explorer. Wij hebben in ons voorbeeld
gekozen voor de kleur grijs (#666666).

We zetten de foto voor het gemak in de htmlcode in een fotolijst. Dat doen we door het in een div te
zetten met de klasse “fotolijst”. Dus zo:

<div class="fotolijst">
<img src="img/woman1.jpg" alt="voorbeeldfoto met schaduwrand" width="150" height="186">
</div>

In het stijlblad komt de volgende code te staan voor de achtergrond

div.fotolijst{
	float: left;
 	background: url(shadow.png) no-repeat bottom right !important;
 	background: url(shadow.gif) no-repeat bottom right;
 	margin: 10px 7px 0 10px !important;
 	margin: 10px 7px 0 10px;
	}

en voor het plaatje zelf komt er de volgende code te staan:

div.fotolijst img{
 	display: block;
 	position: relative;
 	background-color: #FFF;
 	border: 1px solid #000;
 	margin: -3px 5px 5px -3px;
 	padding: 2px;
 	}

Valt meteen op dat er in de code van div.fotolijst twee keer !important staat. Dat heeft te maken met
het feit dat deze de eerste keuze is. Een .png plaatje heeft als voordeel dat er geen effect optreed als de achtergrond
kleur of het plaatje veranderd. Browser die deze regel niet ondersteunen worden doorverwezen naar
het .gif plaatje.
De margin-left en margin-bottom zorgen er bij ‘div.fotolijst img’ voor hoe breed de schaduw wordt. In
ons voorbeeld dus 5 pixels.