Effekter på billeder ved hjælp af StyleSheets
Sat på siden 23-05-2003
I dette ugebrev vil jeg skrive om nogle sjove effekter, du kan lave på hjemmesiden ved hjælp af StyleSheets. StyleSheets har jeg tidligere været inde på i ugebrev nr. 2 "Mouse over effekt på links" fra 21/03-2003.
Mange af de effekter, som kan laves med billeder ved hjælp af fx PhotoShop eller Paint Shop Pro, kan laves ved hjælp af StyleSheets.
Man uploader et helt normalt billede, og StyleSheeten gør resten af arbejdet. Desværre - som det meget ofte er tilfældet - virker disse StyleSheets kun i Internet Explorer (MSIE), da de ikke er godkendte af W3.org.
Du kan lave negativer, vende billedet på hovedet (virker også i Opera), vride billede, gøre det tåget og meget andet.
Hovedprincippet er ganske enkelt:
Hvis et normalt HTML-tag til at indsætte billeder ser således ud:
<img src="billede.jpg" width="50" height="500"
border="0" alt="Billedtekst">
så skal der blot tilføjes et filter således:
<img style="filter:filternavn" src="billede.jpg" width="50"
height="500" border="0" alt="Billedtekst">
Lad os tage nogle eksempler på simple filtre.
Først et tåget (blur) billede:
<img style="filter:blur" src="billede.jpg" width="50" height="50" alt="billedtekst">
Dernæst et negativ - eller røngtgen (xray):
<img style="filter:xray()" src="billede.jpg" width="50" height="50" alt="billedtekst">
et mere eller mindre gennemsigtigt billede:
<img style="filter:alpha(opacity=20) src="billede.jpg" width="50" height="50" border="0" alt="billedtekst">
Du kan sætte andre tal for opacity, som er gennemsigtigheden. Hvis du sletter ikke skriver noget, bliver værdien nul, ingen gennemsigtighed.
Hvis du vil se eksempler på de nævnte muligheder, kan du kigge her: www.malka.it/libris/tips/billeder.html
Du har mulighed for at teste de muligheder, der er, og endda få serveret kildekoden til effekten via dette link: http://www.webreference.com/js/column69/jukebox.html
Alle filtrene på Microsofts hjemmeside: http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/filters/alpha.asp