Visuella filter

Filter kan man applicera bl.a. på text, teckningar och foton. Vissa filter passar bäst för foton andra för text eller bilder.

ligger texten i ett DIV- eller SPAN-element, som har relativ placering måste antingen höjd eller bredd anges, annars fungerar inte filtret.

För att illustrera hur dom olika filtren fungerar, kommer jag att använda mig av fyra olika element, som man kan se nedanför.

FILTER

Det översta elementet, längst till vänster, är en text skriven med Wide Latin.
Det översta elementet, längst till högter, är samma text men är här gjord i ett ritprogram.
Det nedersta elementet, längst till vänster, är ett foto som har sparats i jpg-format.
Det nedersta elementet, längst till höger, är en transparent gif-bild.

Elementen är här lagda i en tabell. Det första elementet som är en text skriven med Wide Latin, har jag definierat stilen för mellan HEAD-taggarna på följande sätt:

<HEAD>
<STYLE TYPE="text/css">
	<!--
TD.filt{ font-family: Wide Latin;
	 font-size: 19 pt;
         color: blue;
         position: relative;
         width: 300}
	-->
	</STYLE>
</HEAD>

Det finns 14 visuella och två övergångsfilter till MSIE4.
Dom visuella filtren är:

Filtereffekt	Beskrivning
Alpha	Ger genomskinlighet.
Blur	Ger oskärpa, rörelsefilter.
Croma	Gör en speciell färg genomskinlig.
DropShadow	Ger en droppskugga.
FlipH	Vänder horisontellt.
FlipV	Vänder vertikalt.
Glow	Glöd. Ger en strålning runt elementet.
Gray	Gråskala.
Invert	Inverterar färger.
Light	Projicierar en ljuskälla på ett element.
Mask	Skapar en genomskinlig mask.
Shadow	Ger en solid skugga.
Wave	Ger en vågformig förvrängning
XRay	Visar endast konturerna.

Filtret Alpha - Genomskinlighet

FILTER

För den enklaste fomen av alpha-filtret krävs endas ett attribut, Opacity, täthet.
Värdet kan variera mellan 0, helt genomskinlig, och 100 helt tät.
För bilderna ovanför har Opacity=30 använts.
(Det går att lägga till ytterligare attribut om man vill gradera tätheten.)

För att åstadkomma ovanstående effekt på elementen har jag skrivit:

<TABLE ALIGN=CENTER WIDTH="95%" BORDER=0 CELLPADDING=15>
 <TR ALIGN=CENTER>
  <TD CLASS=filt STYLE="filter: alpha(opacity=30);">FILTER</TD>
  <TD STYLE="filter: alpha(opacity=30);">
     <IMG SRC="gifs/html/filter.gif" ALT="Text FILTER"></TD>
 </TR>
 <TR ALIGN=CENTER>
  <TD STYLE="filter: alpha(opacity=30);">
     <IMG SRC="photos/html/newyork.jpg" ALT="Manhattan"></TD>
  <TD STYLE="filter: alpha(opacity=30);">
     <IMG SRC="gifs/html/varg.gif" ALT="Ett varghuvud"></TD>
 </TR>
</TABLE>

Filtret Blur - Oskärpa, rörelse

FILTER

Det här filtret ska ha tre attribut, Add, Direction och Strength.

Dom möjliga värdena för Add, är 0 eller 1.
I ovanstående exempel är add=1, detta innebär att den ursprungliga bilden läggs till efter det att filtret applicerats. Det man då får är dels en skarp bild, dels en rörelse som ger ett intryck av en skugga.
Använder man däremot värdet 0 får man ett intryck av att bilden har rört sig. (Se nästa exempel.)

Direction bestämmer vilken riktning rörelsen ska ha och kan anta vinkelvärden i 45-graders intervall.
(0,45,90,135,180,225,270,360)
I ovanstående exempel är direction=135.

Strength använder man för att ange hur långt rörelsen skall sträcka sig utryckt i pixels.
I ovanstående exempel är strength=5.

För att åstadkomma ovanstående effekt på elementen har jag skrivit:

STYLE="filter: blur(add=1, direction=135, strength=5);"

FILTER

I ovanstående exempel har filtret blur satts med add=0, vilket ger en oskarp bild.

Filtret DropShadow - droppskugga

FILTER

Filtret DropShadow ska ha tre attribut, Color, OffX och Offy.

Med attributet Color, bestämmer man vilken färg skuggan ska ha, vilken ska uttryckas i rgb-format. I ovanstående exempel har jag angett färgen teal med värdet #00FFFF

Med attributen OffX och Offy anger man avståndet till droppskuggan i pixlar. Anger man positiva värden flyttas skuggan åt höger (x) och nedåt (y). Med negativa värden flyttas skuggan åt vänster (x) och uppåt (y).
I ovanstående exempel har skuggan förflyttats med 4 pixlar åt höger och 4 pixlar nedåt.

För att åstadkomma ovanstående effekt på elementen har jag skrivit:

STYLE="filter: dropshadow(color=#00FFFF,offx=4,offy=4,);"

Det finns ett fjärde attribut för DropShadow nämligen attributet Positive. Attributet kan ha värdena 1 eller 0. Standardvärdet är 1 vilket används om inget annat anges. Värdet 0 ger ett ganska konstigt intryck.

Filtret FlipH - Vänd horisontellt

FILTER

Detta filter har inga attribut. Filtret gör som synes att elementen vänds horisontellt. Matematiskt får man samma resultat som om man speglar i en vertikal linje, som sätts omedelbart till vänster om föremålet, och att man sedan flyttar bilden till föremålets plats.

För att åstadkomma ovanstående effekt på elementen har jag skrivit:

STYLE="filter: fliph"

Filtret FlipV - Vänd vertikalt

FILTER

Detta filter har inga attribut. Filtret gör som synes att elementen vänds vertikalt. Matematiskt får man samma resultat som om man speglar i en horisontell linje, som sätts omedelbart till vänster om föremålet, och att man sedan flyttar bilden till föremålets plats.

För att åstadkomma ovanstående effekt på elementen har jag skrivit:

STYLE="filter: flipv"

Filtret Glow - Glöd

FILTER

Filtret Glow ska ha två attribut, Color och Strength.

Med attributet Color, bestämmer man vilken färg glöden ska ha, vilken ska uttryckas i rgb-format. I ovanstående exempel har jag angett en färg med värdet #FFD700.

Attributet Strength kan ha ett värde mellan 1-255, vilket är ett mått på glödens styrka och hur långt från elementet den sträcker sig.

För att åstadkomma ovanstående effekt på elementen har jag skrivit:

STYLE="filter: glow(color=#FFD700, strength=6);"

Filtret Gray - Gråskala

FILTER

Detta filter har inga attribut. Filtret bortser från all information om färg och visar elementen i gråskala.

För att åstadkomma ovanstående effekt på elementen har jag skrivit:

STYLE="filter: gray"

Filtret Invert - Invertera

FILTER

Detta filter har inga attribut. Filtret inverterar alla värden för nyans mättnad och ljusstyrka.

För att åstadkomma ovanstående effekt på elementen har jag skrivit:

STYLE="filter: invert"

Filtret Shadow - Skugga

FILTER

Det här filtret ska ha två attribut, Color och Direction.

Med attributet Color, bestämmer man vilken färg skuggan ska ha, vilken ska uttryckas i rgb-format. I ovanstående exempel har jag angett en färg med värdet #00FF00.

Direction bestämmer vilken riktning rörelsen ska ha och kan anta vinkelvärden i 45-graders intervall.
(0,45,90,135,180,225,270,360)
I ovanstående exempel är direction=135.

Man kan kan jämföra med Blur då add satts till 1. Den största skillnaden är att med Shadow kan man välja färg på skuggan.

För att åstadkomma ovanstående effekt på elementen har jag skrivit:

STYLE="filter: shadow(color=#00FF00, direction=135);"

Filtret Wave - Vågform

FILTER

Det här filtret ska ha fem olika attribut, Add, Freq, LightStrength, Phase, och Strength.

Attributet Add kan som tidigare nämnts ha värdena 0 eller 1. Värdet 1 gör att den ursprungliga bilden läggs till. Med detta filter är det bäst med add=0.

Med attributet Freq anger man antalet sinus-vågor som ska visas.

Med attributet LightStrength anger man ljusstyrkan vilken kan ha ett värde mellan 0-100. Bilden blir ljusare ju lägre värdet är.

Attributet Phase anger var i sinuskurvan som starten sker. Attributet kan ha ett värde mellan 0 och 360.

Attributet trength anger höjden på sinustopparna i pixlar.

För att åstadkomma ovanstående effekt på elementen har jag skrivit:

STYLE="filter: wave(add=0, freq=3, lightstrength=20,
                    phase=90, strength=10);"

Filtret XRay - Röntgenbild

FILTER

Detta filter har inga attribut. Filtret ger en bild med endast några få gtåtoner.
Jämför med filtret Gray

För att åstadkomma ovanstående effekt på elementen har jag skrivit:

STYLE="filter: xray"

Filtret Chroma - Genomskinlig färg

Med hjälp av detta filter kan man få en speciell färg att bli genomskinlig.

För att åstadkomma ovanstående effekt på elementet har jag skrivit:

STYLE="filter: chroma(color=#FF007B)"

Klicka på knapparna för att backa tillbaka eller för att läsa vidare om HTML-guiden.