CSS: filtry

Filtry jsou (zatím) specialitou IE 4.0 a vyšších. Umožňují grafickou práci, jak s písmy, tak s obrázky. Můžete se vlnit, rozmazávat, světlit, převracet, průhlednit..

Základní deklarace

Nad využitím filtrů CSS je třeba trochu přemýšlet. Podporuje je jen MS Internet Explorer a navíc se načítají poměrně pomalu.

Základní syntaxe:
style="filter: vybraný filtr"
Druhy CSS filtrů viz. dále.

Alpha

Nastavuje průhlednost, nebo barevný přechod objektu

filter: alpha(parametry)
opacity - Průhlednost (0 - průhledná, 100 - neprůhledná)
finishOpacity - průhlednost (0-100)
style - tvaru barevného přechodu - 0 (jednotný), 1 (lineární), 2 (radiální) a 3 (obdélníky)
startX - souřadnice x - počátek přechodu
startY - souřadnice y - počátku přechodu
finishX - souřadnice x - konce přechodu
finishY - souřadnice y - konce přechodu

Ukázka:
Normálně

filter: alpha(opacity=10)

filter: alpha(style=2, opacity=40)
dokonce ikdyž se obrázek nezobrazí bude tu křížek v mlze
filter: alpha(style=3, opacity=70)

Blur

Nastavuje rozmazanost
filter: blur(parametry)
add - 0,1
direction - úhel pod kterým se má rozmazávat 45, 90, 135, 180
strength - síla rozmazání

Ukázka:
style="filter: blur(direction=135, add=1, strength=5); width: 70px; height: 70px"
rozmáznutý text

Chroma

Vybranou barvu vykreslí průhledně
filter: chroma(parametry)
color - barva, která má být průhledná

filter: chroma(color=black)

DropShadow

Stín objektu
filter: DropShadow(parametry)
offX - poloha stínu vzhledem k objektu v ose x
offY - poloha stínu vzhedem k objektu v ose y
color - barva stínu
positive - 1, 0

style="width: 110px; height: 20px;filter: DropShadow(color=gray, positive=1, offY=5, offX=10)
Text se stínem

Shadow

Vytváří stín
filter: Shadow(parametry)
color - barva
direction - úhel

style="width: 110px; height: 20px;filter: Shadow(color=gray, direction=120)"
Text se stínem

FlipH a FlipV

Obrátí objekt vertikálně (flipH) nebo horizontálně (flipV)
filter: Flipv| Fliph
style="filter: flipv; width: 120px"
vzhůru nohama
style="filter: fliph; width: 160px"
to by chtělo zrcátko

Gray

filter: gray

Wave

Zvlní objekt
filter: wave(parametry)
add - 1, 0
freq - počet vln
light - světetlost vlny 0-100
phase - posun počátku vlny 0-100
strength - síla efektu

style="filter: wave(add=0, freq=2, light=60, phase=10, strength=6); width: 240px; height: 50px; font-size: 14pt"
vlna a rovnou třeba dvě

Glow

Zvýraznění obrysů
filter: glow(parametry)
color - barva(RGB)
strenght - síla

style="filter: glow(color=blue, strength=4); width: 240px; height: 60px; font-size: 14pt"
Osvětlení modrou
style="filter: glow(color=red, strength=2); width: 240px; height: 40px; font-size: 14pt"
Osvětlení červenou

Mask

Mask
filter: mask(parametry)
color - barva

style="filter: mask(color=red); width: 120px; height: 14px; font-size: 11pt"
Obrys textu

Invert

Prohází barvy - negativ
filter: invert



černobíle
   XRay

filter: XRay

Další: Rolovací lišty a jejich barvení v CSS

Navigace