Statické filtry v CSS – přehled 1.
V prvním přehledu si představíme filtry pro nastavení průhlednosti prvku (Alpha), zobrazení grafiky v pohybu (Blur), vytvoříme iluzi stínu (DropShadow) a nakonec elegantně nastavíme vybranou barvu jako průhlednou (Chroma).
Filtr Alpha
Tento filtr nastaví úroveň průhlednosti prvku. Průhlednost lze nastavit buď jednotně pro celý objekt nebo stupňovitě v lineárních nebo radiálních tvarech.
Syntaxe: { filter: alpha(enabled=boolean, finishopacity=integer, finishx=integer, finishy=integer, opacity=integer, startx=integer, starty=integer, style=integer); }
Parametr | Popis |
Enabled | Určuje možnost použití filtru. Může nabývat hodnot true (zapnutý) nebo false (vypnutý). |
FinishOpacity | Nastaví konečnou úroveň průhlednosti. Může nabývat hodnot 0 (průhledný) až 100 (neprůhledný). |
FinishX | Nastaví konečnou úroveň souřadnice x průhlednosti. Může nabývat hodnot 0 (průhledný) až 100 (neprůhledný). |
FinishY | Nastaví konečnou úroveň souřadnice y průhlednosti. Může nabývat hodnot 0 (průhledný) až 100 (neprůhledný). |
Opacity | Nastaví úroveň průhlednosti (počáteční). Může nabývat hodnot 0 (průhledný) až 100 (neprůhledný). |
StartX | Nastaví počáteční úroveň souřadnice x průhlednosti. Může nabývat hodnot 0 (průhledný) až 100 (neprůhledný). |
StartY | Nastaví počáteční úroveň souřadnice y průhlednosti. Může nabývat hodnot 0 (průhledný) až 100 (neprůhledný). |
Style | Nastaví styl průhlednosti. Může nabývat hodnot 0 (jednotný), 1 (lineární), 2 (radiální) a 3 (pravoúhlý). |
Filtr Alpha má různé možnosti užití, a to hlavně díky parametru Style. Tento parametr proto vyžaduje ještě doplňující vysvětlení. Jak jsme se již dozvěděli, může nabývat čtyř hodnot:
- 0 ~ Můžeme určit jen parametry opacity a enabled. Parametr opacity v tomto případě určuje jednotně průhlednost celého prvku.
- 1 ~ Můžeme určit všechny parametry filtru. Průhlednost se projevuje v lineárních tendencích.
- 2 ~ Můžeme určit pouze parametry opacity, finishopacity a enabled. Průhlednost se projevuje v radiálních tendencích, parametr opacity určuje průhlednost ve středu prvku zatímco parametr finishopacity na okraji prvku.
- 3 ~ Můžeme určit také pouze parametry opacity, finishopacity a enabled. Průhlednost se projevuje v obdélníkových (pravoúhlých) tendencích, parametr opacity určuje průhlednost ve středu prvku a parametr finishopacity na okraji prvku.
Pro snazší pochopení funkčnosti filtru je dobré využít možností testovací stránky připravené Microsoftem.
Filtr Blur
Tento filtr vytvoří iluzi prvku v pohybu. Prvek tedy bude ve vybraném směru a délce rozostřen.
Syntaxe: { filter: blur(add=boolean, direction=integer, enabled=boolean, strength=integer); }
Parametr | Popis |
Add | Nastaví, zda má být původní prvek zobrazen, nebo ne. Může nabývat hodnot true (zobrazit, je přednastavená) nebo false (nezobrazit). |
Direction | Nastaví směr pohybu měřený ve stupních od vertikální polohy. Může nabývat hodnot 0, 45, 90, 135, 180, 225, 270 (přednastavený), 315. |
Enabled | Určuje možnost použití filtru. Může nabývat hodnot true (zapnutý) nebo false (vypnutý). |
Strength | Nastaví délku, o kterou pohyb proběhne. Délka je v pixelech. Může nabývat číselných hodnot až do velikosti prvku. |
Pro snazší pochopení funkčnosti filtru je dobré využít možností testovací stránky. Nelekejte se názvu filtru na stránce, MotionBlur je jen jeho nový, Microsoftem zavedený název, použitelný s novou syntaxi.
Tento text využívá filtru Blur!!!
Zdrojový kód je <div style='text-align: center; height: 20px; color:blue; filter: blur(add=true, direction=135, strength=5);'>Tento text využívá filtru Blur!!!<div>
. Nezapomeňte, že u elementu DIV musí být definován atribut width nebo height!
Filtr DropShadow
Filtr Dropshadow vytvoří kopii prvku s určeným posunutím. Vzniká tak iluze stínu.
Syntaxe: { filter: (color=#RRGGBB, enabled=boolean, offx=integer, offy=integer, positive=boolean); }
Parametr | Popis |
Color | Určí barvu stínu. Barva je specifikována ve standardním formátu #RRGGBB, kde RR je hodnota červené barvy vyjádřená v hexadecimálním tvaru, GG hodnota zelené barvy a BB hodnota modré barvy. |
Enabled | Určuje možnost použití filtru. Může nabývat hodnot true (zapnutý) nebo false (vypnutý). |
OffX | Nastaví vzdálenost stínu od souřadnice x. Udává vzdálenost v pixelech, může nabývat číselných hodnot. |
OffY | Nastaví vzdálenost stínu od souřadnice y. Udává vzdálenost v pixelech, může nabývat číselných hodnot. |
Positive | Určuje zda bude stín vytvořen z transparentních nebo netransparentních oblastí prvku. Může nabývat hodnot true (z neprůhledných oblastí) nebo false (z průhledných oblastí). |
Pro snazší pochopení funkčnosti filtru je dobré využít možností testovací stránky.
Filtr DropShadow je nejlepším filtrem k vytváření stínu (podobného efektu mohou dosáhnout i některé další filtry):
Zdrojový kód je <div style='text-align: center; height: 225px; filter: dropshadow(color=#b0b0b0, offx=5, offy=5, positive=true);'><img src='dropshadow.jpg' width='300' height='215' border='0' alt='Fotografie s využitím filtru DropShadow'></div>
.
Filtr Chroma
Filtr Chroma nastaví určitou barvu prvku jako transparentní (průhlednou).
Syntaxe: { filter: (color=#RRGGBB, enabled=boolean); }
Parametr | Popis |
Color | Nastaví barvu, která bude zobrazena transparentně. Barva je specifikována ve standardním formátu #RRGGBB, kde RR je hodnota červené barvy vyjádřená v hexadecimálním tvaru, GG hodnota zelené barvy a BB hodnota modré barvy. |
Enabled | Určuje možnost použití filtru. Může nabývat hodnot true (zapnutý) nebo false (vypnutý). |
Tento filtr raději nepoužívejte ve vizuálních prvcích s barevností od 8 do 24 bitů, zvláště pak v obrázcích typu JPEG. Pokud si chcete použití filtru Chroma otestovat, zkuste si jeho testovací stránku. Malý příklad můžete vidět také přímo zde:
Ukázkový text pro filtr Chroma
Zdrojový kód je <div id='ch' style='background: #0000cc; color: #ffff99; height: 20px;'>Ukázkový text pro filtr Chroma</div><br><input type='button' value='#0000cc' onclick='ch.style.filter="chroma(color=#0000cc)"'><input type='button' value='#ffff99' onclick="ch.style.filter='chroma(color=#ffff99)"'>
.
Starší komentáře ke článku
Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.
Mohlo by vás také zajímat
-
Proč je důležité tvořit obsah na váš web?
29. srpna 2024 -
Netcat a Ncat
8. prosince 2022
Nejnovější
-
Jak se chránit před podvody na internetu – část 2
14. října 2024 -
Doména .io v ohrožení: Co přinese předání Čagoských ostrovů?
10. října 2024 -
Jak se chránit před podvody na internetu – část 1
8. října 2024