Smitka development

Filtry v CSS

Kaskádové styly umožňují měnit vzhled prvku pomocí atributu filter. Lze to bohužel pouze v IE. Filtry umožňují použití 14 efektů:

AlphaNastaví průhlednost
filter:alpha(opacity=50)Alpha(Opacity=průhlednost, FinishOpacity=konečná průhlednost, Style=styl přechodu/0-bez přechodu;1-lineární;2-radiální;3-obdelníkový/, StartX=X, StartY=Y, FinishX=X, FinishY=Y /souřadnice filtru)
BlurNastaví rozmazání
filter:blur(add=1,direction=135,strenght=10)blur(add=1/0-rozmazání obrázku, direction=úhel rozmazu, strength=síla rozmazu)
ChromaNastaví průhlednou barvu
filter:chroma(color=#040204)chroma(color=barva)
DropShadowVytvoří stín objektu
filter<img class=ropShadow(Color=blue,OffX=2,OffY=1)" style="filter:D
ropShadow(Color=blue,OffX=2,OffY=1)">DropShadow(Color=barva stínu, OffX=X, OffY=Y/posunutí stínu, Positive=stín i pro průhledné prvky)
FlipHHorizontálně převrátí objekt
filter:fliphfliph
FlipVVertikálně převrátí objekt
filter:flipvflipv
GlowOzáří objekt
filter:glow(color=green)Glow(Color=barva ozáření, Strength=síla)
GrayZčernobílí objekt
filter:graygray
InvertVytvoří negativ
filter:invertinvert
MaskVytvoří z objektu průsvitnou masku
filter:Mask(Color=red)Mask(Color=barva)
ShadowVytvoří stín objektu (hezčí než DropShadow)
filter:Shadow(Color=blue, Direction=135)Shadow(Color=barva, Direction=úhel)
WaveZvlní objekt
filter:Wave(strength=6, freq=4, lightstrength=25)Wave(Add=0/1-zvlnění obrázku, Freq=počet vln, LightStrength=zesvětlení na konci vlny, Phase=pohyb vlny od počátku, Strength=intenzita vlnění)
XrayVykreslí vnější obrysy
filter:xrayxray
LightTento filtr vytváří efekt osvícení zdrojem světla, od ostatních filtrů se velmi liší, proto bude probrán samostatně. Zde je malá ukázka jeho možností


Filtry je možné aplikovat na následující prvky: BODY, BUTTON, DIV, IMG, INPUT, MARQUEE, SPAN, TABLE, TD, TEXTAREA, TFOOD, TH, THEAD, TR.
Tagy DIV a SPAN musí mít nastavený atribut height nebo width nebo pozici na absolute!
<span style="filter:glow(color=blue,strength=2)"> - Filtr nebude aplikován!
<span style="height:30;filter:glow(color=blue,strength=2)"> - Filtr bude aplikován!
linkuj.czjagg.czpošli na vybrali.sme.skdeliciousTopČlánky.cz
Nahoru HOME PC•Elektro Programování Blog Autor Lynt Speciální backlink: Šulislav
© 2006 Smitka development