Nodig: Microsoft Internet Explorer

 

Shadow filter (CSS in-line style)

Dit is weer een filter die alleen maar met de Internet Explorer werkt. In mijn tutorial over tekstvakken met schaduw heb ik dit onderwerp al eerder aangeroerd. Hieronder ga ik er wat uitgebreider op in.

Deze afbeelding heeft geen schaduw:

Dit plaatje heeft wel een schaduw (aan de onderkant):

De code voor het plaatje met schaduw (aan de onderkant) is:

<div style="width:115px; height:115px;filter:shadow(color:gray);">
<img src="judas.jpg" width="100" height="100">
</div>

* * *

Je kunt behalve schaduw aan de onderkant, ook schaduw aan de linkerkant toevoegen. Gebruik dezelfde code als hierboven, maar zet er padding:15 px bij.

<div style="width:115px; height:115px; padding:15px; filter:shadow(color:gray);">
<img src="judas.jpg" width="100" height="100">
</div>

* * *

Uiteraard kun je de kleur van de schaduw naar believen veranderen. Ik laat de schaduw nu even grijs. Minder bekend zijn de extra eigenschappen die de filter bezit:
strength en direction.

De eigenschap 'strength' maakt de schaduw wat dieper. Kijk maar hieronder:

Dit is de code:

<div style="width:115px;height:115px;filter:shadow(color:gray, strength:18);">
<img src="judas.jpg" width="100" height="100">
</div>

* * *

En als je de eigenschap 'direction' gebruikt, kun je bepalen welke richting de schaduw uit moet wijzen.

De code:

<div style="width:115px;height:115px;filter:shadow(color:gray, strength:32, direction:135);">
<img src="judas.jpg" width="100" height="100">
</div>

* * *

'For good measure' doe ik er nog een extreem voorbeeld bij:

De code:

<div style="width:155px;height:155px;filter:shadow(color:gray, strength:32, direction:135);">
<img src="judas.jpg" width="100" height="100">
</div>

De clou is dat je de breedte en de hoogte van de div-container vergroot.

Bij Microsoft kun je uitgebreide informatie vinden over de shadow filter.

---

Zie ook mijn andere shadow tutorials:

CSS box met schaduw
Mr Picassohead
Perspectief-schaduw

 

Start | Tutorials | Korte Lesjes | CSS | Fonts | Filters | Links | Allerlei | Zoeken | PSP-varia | P-Filiaal