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); }

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); }

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); }

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); }

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.