Visual Filter

Tämän sivun aiheena on Visual Filter eli visuaaliset filtterit. Ne eivät kuulu viralliseen, W3C:n hyväksymään, CSS1- tai CSS2 -standardiin, mutta ne ovat mukana DHTML -määrittelyssä Visual filter -ominaisuudet toimivat vain Microsoftin selaimissa, versiosta 4.0 lähtien.

Esimerkeissä käytetään kahta kuvaa sekä 'ruutupaperia' taustakuvana, jotta tehosteet erottuisivat. Huomaa, että kuvat ovat samankokoisia (120*120). Eli lampun ympärillä on läpinäkyvää 'tyhjää tilaa', näin jotkut filtterit toimivat paremmin.

Piilota esimerkit

VisualFilter?

Visual Filter (visuaalinen filtteri) on joukko epästandardin mukaisia CSS-sääntöjä. Ne muodostavat, nimensä mukaisesti, haluttuun elementtiin (kuva, teksti, lista, painike jne.) erilaisia, kuvankäsittelyohjelmista tuttuja toimintoja, kuten varjostus tai läpinäkyvyys efektejä.

Syntaksi:

{ filter: nimi (ominaisuus=arvo, ominaisuus=arvo...) }

Nimi-kohtaan tulee filtterin nimi, sivun yläosassa on 13 eri vaihtoehtoa tähän.
ominaisuus-kohtaan tulee kyseisen filtterin ominaisuus/ominaisuudet. Jotkin filtterit eivät sisällä ominaisuutta
arvo-kohtaan tulee kyseiseen ominaisuuteen kuuluva arvo.

Ainut ero muihin CSS-sääntöihin on, että elementin koko ('widht' ja 'height') on aina ilmoitettava! Toinen mahdollisuus on ilmoittaa ylemmän tason elementin koko (yleensä <div> -elementti) ja kytkeä filtteri siihen, jolloin kaikki sen sisällä olevat elementit saavat määritellyn filtterin.

Yksinkertainen filtterisääntö voisi näyttää tältä:
h2 {
filter: Shadow (Color=Black)
widht: 200px; height: 30px;
color: red }
!IE 4:ssä sääntö toimii paremmin <DIV> -elementin kanssa, jolloin <h2> tulee laittaa sen sisään.

 H2-elementti

alpha

Alpha määrittää elementin läpikuultavavuoden. Style-parametrilla voidaan määritellä onko läpikuultavuus: tasainen (0), viiva (1), asteittainen (2) vai suorakulmainen (3).

{ filter: Alpha (
Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)
}

Parametri Käyttö: Sallitut arvot Oletus: Pakol-
linen
Opacity määrittää läpikuultamisen tason arvot 0-100 0 Kyllä
FinishOpacity määrittää 'liuku' läpikuultavuuden loppuarvon 0-100 - Ei
Style läpikuultavuuden nousun tyyli 0-3 - Ei
StartX / -Y X / Y -arvo, josta läpikuultavuus alkaa numero - Ei
FinishX / -Y X / Y -arvo, johon läpikuultavuus loppuu numero - Ei

alpha esimerkki:

Ei
efektiä

Alpha-
efekti

Alpha-
efekti

Normaali kuva Opacity=30 Opacity=10, FinishOpacity=100, Style=1, StartX=20, StartY=20, FinishX=100, FinishY=100

<<Alkuun | Seuraava >

blur

Blur luo vaikutelma liikkeestä 'tuhrimalla' elementtiä.

{ filter: Blur (Add=?, Direction=?, Strength=?)}

Parametri: Käyttö: Sallitut arvot Oletus: Pakol-
linen
Add määrittää lisätäänkö alkuperäinen kuva efektiin True / False True Kyllä
Direction liikkeen suunta (0-315°)
45° välein
270 Ei
Strength 'paksuus' pikseleinä, jolla efekti tehdään numero arvo 5 Ei

blur esimerkki:

Ei
efektiä

Blur-
efekti

Blur-
efekti

Normaali kuva Add = 0 Add = 1,
Direction = 135,
Strength =25

<<Alkuun | Seuraava >

chroma

Chroma luo läpikuultavuuden jollekin elementin värille.

{ filter: Chroma (Color=?)}

Parametri: Käyttö: Sallitut arvot Oletu: Pakol-
linen
Color läpikuultava väri RGB / keyword - Kyllä

chroma esimerkki:

Ei
efektiä

Chroma-
efekti

Chroma-
efekti

Normaali kuva Color = #00CC00
(vihreä on läpinäkyvä)
Color = #999933
(ruskea on läpinäkyvä)

<<Alkuun | Seuraava >

dropshadow

DropShadow saa elementin 'kellumaan', jolloin siitä jää varjo.

{ filter: DropShadow (Color=?, OffX=?, OffY=?, Positive=? )}

Parametri: Käyttö: Sallitut arvot Oletus: Pakol-
linen:
Color varjon väri RGB / nimi - -
OffX / -Y varjon pikseleiden määrä vaaka / pysty numero - -
Positive luodaanko varjo myös läpinäkyville osille True / False - -

dropshadow esimerkki:

Ei
efektiä

DropShadow-efekti

DropShadow-efekti

Normaali kuva Color = #000000, OffX=5, OffY=5, Positive=True Color = Skyblue, OffX=8, OffY=8, Positive=False

<<Alkuun | Seuraava >

fliph ja flipv

(Koska FlipH ja FlipV eivät saa parametreja ja ovat siis varsin helppoja käyttää, esittelen ne tässä yhtäaikaa)

FlipH kääntää elementin horisontaalisesti ja FlipV vertikaalisesti.

{ filter: FlipH }(Ei parametreja!)

{ filter: FlipV }(Ei parametreja!)

Suodatin Käyttö: Sallitut arvot Oletus: Pakol-
linen:
FlipH elementin kääntö vaakasuunnassa - - Kyllä
FlipV elementin kääntö pystysuunnassa - - Kyllä

fliph ja flipv esimerkki:

Ei
efektiä

FlipH-efekti

FlipV-efekti

Normaali kuva { filter: FlipH } { filter: FlipV }

<<Alkuun | Seuraava >

glow

Glow määrittää elementille 'hehkun'.

{ filter: Glow (Color=?, Strength=?) }

Parametri: Käyttö: Sallitut arvot Oletus: Pakol-
linen:
Color hehkun väri väri Red Ei ole
Strength hehkun voimakkuus 0-100 5 -

glow esimerkki:

Ei
efektiä

Glow-efekti

Glow-efekti

Normaali kuva Color=Blue, Strength=3 Color=Gold, Strength=20

<<Alkuun | Seuraava >

gray ja invert

(Koska Gray ja Invert eivät saa parametreja ja ovat siis varsin helppoja käyttää, esittelen ne tässä yhtäaikaa)

Gray-efekti muuttaa värillisen objektin mustavalkoiseksi.
Invert-efekti puolestaan kääntää värit vastakkaiseksi, eli mustasta tulee valkoinen ja päinvastoin.

{ filter: Gray } (Ei parametreja!)

{ filter: Invert } (Ei parametreja!)

Suodatin: Käyttö: Sallitut arvot Oletus: Pakol-
linen:
Gray muuttaa värit harmaasävyiksi - - Kyllä
Invert muuttaa värit vastakkaisiksi - - Kyllä

gray ja invet esimerkki:

Ei
efektiä

Gray-
efekti

Invert-
efekti

Normaali kuva { filter: Gray } { filter: Invert }

<<Alkuun | Seuraava >

mask

Mask luo kuvan läpinäkyvistä pikseleistä vallinnan eli maskin.

{ filter: Mask (Color=?)}

Parametri: Käyttö: Sallitut arvot Oletus: Pakol-
linen:
Color maskin väri väri Black Ei

mask esimerkki:

Ei
efektiä

Mask-
efekti

Mask-
efekti

Normaali kuva Color = Silver Color = #FF0000

<<Alkuun | Seuraava >

shadow

Shadow luo elementille varjon.

{ filter: Shadow (Color=?, Direction=?)}

Parametri: Käyttö: Sallitut arvot Oletus: Pakol_
linen:
Color varjon väri RGB / nimi Black Ei ole
Direction varjon suunta (0-315°)
45° välein
225 Ei ole

shadow esimerkki:

Ei
efektiä

Shadow-
efekti

Shadow-
efekti

Normaali kuva Color=navy Color=teal, Direction=45

<<Alkuun | Seuraava >

wave

Wave luo elementistä aaltoilevan.

{ filter: Wawe (Add=?, Freg=?, LightStrength=?, Phase=?, Strength=?) }

Parametri: Käyttö: Sallitut arvot Oletus: Pakol-
linen:
Add lisätäänkö alkuperäinen kuva aaltokuvaan True / False - Kyllä
Freg aaltojen määrä numeroarvo    
LightStrength aaltoefektin valon voimakkuus prosentteina 0-100%    
Phase siniaallon aloituskohta (25=90°,100=360°) 0-100    
Strength aaltoefektin voimakkuus numero    

wave esimerkki:

Ei
efektiä

Wave-
efekti

Wave-
efekti

Normaali kuva Add=False, Freq=3, LightStrength=5, Phase=50, Strength=3 Add=False, Freq=2, LightStrength=30, Phase=25, Strength=6

<<Alkuun | Seuraava >

xray

XRay luo kuvasta mustavalkoisen 'röntgenkuvan'.

{ filter: XRay } (Ei Parametrejä!)

Suodatin: Käyttö: Sallitut arvot Oletus: Pakol-
linen:
Xray 'röntgenkuvan' - - Kyllä

xray esimerkki:

Ei efektiä

Ei efektiä

XRay-
efekti

XRay-
efekti

(pienet)Normaali kuvat { filter: XRay } { filter: XRay }

<<Alkuun | Seuraava >

yhdistelmät

Voit myös yhdistellä filttereitä ja luoda näin vielä jännittävämpiä tehosteita. Kun yhdelle elementille tai luokalle luodaan monta efektiä, erotetaan eri filtterit pilkulla toisistaan tyyliin:

{ filter: nimi (ominaisuus=arvo), nimi(ominaisuus=arvo)... }

Esimerkki1

Yllä oleva H1-elementti sisältää seuraavat kolme filtterimäärittelyä:

.esim1 { filter:
DropShadow(Color=black, OffX=3, OffY=3),
Wave (Add=False, Freq=3, LightStrength=6, Phase=50, Strength=2),
Glow (Color=Gold, Strength=2) }

<<Alkuun

© Petteri Perälä 2001.
E-mail: [ petepe@mbnet.fi ].