Ik kwam al een tijdje her en der op Internet iets leuks tegen. Shaduw op afbeeldingen. Erg stoer al zeg ik het zelf. Het leukste aan het geheel was niet zozeer de schaduw als meer de wetenschap dat hiervoor geen gebruik werd gemaakt van aangepaste afbeeldingen. De schaduw wordt met behulp van een goed stukje CSS toegevoegd aan de afbeelding. Helaas vereist dit wel een kleine aanpassing/toevoeging aan de html code. Er moet namelijk een div element om de afbeelding heen worden geplaatst. Dat maakt opzich niet zoveel uit. Het is alleen zo dat het dus niet op de complete blog toegepast zal worden. Enkel op nieuwe posts.

Hoe heb ik het gedaan? Met hulp van redemption in a blog voor het geven van een mooi idee en voor het verwijzen naar wat uitleg op een fantastische site.

Er zijn twee stukken CSS die toegevoegd moeten worden:

div.img-dec {
	background: url(shadow.gif) no-repeat bottom right;
	clear: right;
	float: right;
	margin: 0 0 15px 25px;
	padding: 0;
	position: relative;
}

div.img-dec img {
	background-color: #fff;
	border: 1px solid #a9a9a9;
	display: block;
	margin: -5px 5px 5px -5px;
	padding: 4px;
	position: relative;
}

div.img-ilus {
	background: url(shadow.gif) no-repeat bottom right;
	margin: 10px 5px;
	padding: 0;
	position: relative;
}

div.img-ilus img {
	background-color: #fff;
	border: 1px solid #a9a9a9;
	margin: -5px 5px 5px -5px;
	padding: 4px;
	position: relative;
	vertical-align: bottom;
}

Voor het eerste stukje CSS code maak je gebruik van de div toevoeging: <div class="img-dec">
En voor de tweede
<div class="img-ilus" style="width: 270px;">
waarbij in het laatste geval de opgegeven breedte heel belangrijk is. Deze is namelijk 10px meer dan de breedte van de afbeelding zelf. Beide hebben hun voordelen, welke wordt uitgelegd op de eerder genoemde site. In mijn geval is de tweede vooral praktisch.