Webdesign 101: Internet Explorers filtre

Drop Shadow-filtret

Drop Shadow-filteret er et filter, hvormed du kan påtrykke et element en skyggeeffekt.

Vis effekten

Reset

Stylesheet formregel:

#box {
filter:progid:DXImageTransform.Microsoft.dropshadow
(positive='false', color='#666666', offX='5', offY='5')
}
#pix {
filter: progid:DXImageTransform.Microsoft.dropshadow
(positive='false', color='gold', offX='5', offY='5')

positive-værdier: true: Skyggeeffekten vises. false: Skyggeeffekten vises ikke.

color-værdier: Farveværdi eller farvenavn for skyggen.

offX-værdier: Antal pixel, skyggens vandrette offset fra billedet.

offY-værdier: Antal pixel, skyggens lodrette offset fra billedet.

Bemærk, 1) at effekten her er anvendt på såvel den div, der indeholder billedet på en gylden baggrund, som på selve billedet; 2) at denne effekt uden videre kan anvendes på et tekstblok, f.eks. en H2 overskrift med sin egen id:

Drop Shadow

Her skal du huske på, at elementet skal have en reel, specifik udstrækning. I eksemplet er H2-elementet givet en bredde på 200 pixel.

Dynamisk ændring af filteregenskaberne

De 2 scripts, der er knyttet til knapperne til højre for billedet er:

function doTrans(){
	box.style.filter ="progid:DXImageTransform.Microsoft.dropshadow
	-->	(positive='true', color='#666666', offX='10', offY='10')"
	pix.style.filter ="progid:DXImageTransform.Microsoft.dropshadow
	-->	(positive='true', color='#cc0000', offX='20', offY='8')"
}
function resetTrans(){
	box.style.filter ="progid:DXImageTransform.Microsoft.dropshadow
	-->	(positive='false', color='#666666', offX='10', offY='5')"
	pix.style.filter ="progid:DXImageTransform.Microsoft.dropshadow
	-->	(positive='false', color='gold', offX='5', offY='5')"
}

Bemærk her, at jeg nøjes med at ændre positive-værdien fra false til true og omvendt. Det vil sige, jeg behøver ikke at ændre på de øvrige attributter.