Statické filtry v CSS – přehled 4.

V posledním přehledu si předvedeme možnosti nejsložitějšího filtru, který se využívá pro osvětlení prvku na stránce a jmenuje se Light. Princip funkce tohoto filtru je sám o sobě jednoduchý, má však velké množství parametrů a k opravdu efektivnímu využití jeho možností je zapotřebí spolupráce s některým klientským skriptovacím jazykem.

Filtr Light

Filtr Light vytvoří efekt prvku osvíceného přednastavenými světelnými zdroji.

Syntaxe: { filter: light(enabled=boolean); }

Pokud použijete jenom samotný filtr, nic efektního se nestane, vše pouze zčerná. Filtr Light je efektně použitelný pouze ve spojení se skripty. Právě pomocí skriptů se dají nastavit již zmíněné světelné zdroje, stěžejní část tohoto filtru. Maximálně je možné nadefinovat 10 světelných zdrojů. Nyní se tedy blíže podíváme, jak nastavit světelný zdroj a použijeme k tomu skriptovacího jazyka JavaScript. Ještě předtím, než si vše ukážeme na příkladě, přidám přehled nejdůležitějších metod pro práci s filtrem Light.

Metoda AddCone

Přidá světelný zdroj. Všechny parametry jsou povinné.

Syntaxe: prvek.filters[cislo_filtru].addCone(iX1,iY1,iZ1,iX2,iY2,iRed,iGreen,iBlue,iStrength,iSpread);

Metoda Clear

Odstraní všechny světelné zdroje. Nemá žádné parametry.

Syntaxe: prvek.filters[cislo_filtru].clear();

Metoda ChangeColor

Změní barvu světelného zdroje. Všechny parametry jsou povinné.

Syntaxe: prvek.filters[cislo_filtru].changeColor(iLightNumber,iRed,iGreen,iBlue,fAbsolute);

Metoda ChangeStrength

Upraví intenzitu světelného zdroje. Všechny parametry jsou povinné.

Syntaxe: prvek.filters[cislo_filtru].changeStrength(iLightNumber,iStrength,fAbsolute);

Metoda MoveLight

Posune světelný zdroj na dané místo. Všechny parametry jsou povinné.

Syntaxe: prvek.filters[cislo_filtru].moveLight(iLightNumber,iX1,iY1,iZ1,fAbsolute);

Podívejte se, jak může vypadat text, který je ovlivněn filtrem Light se třemi světelnými zdroji, jeden žluté a druhý a třetí modré barvy. Po kliknutí na text se barvy zdrojů změní pomocí metody ChangeColor.

Prvek ovlivněný filtrem Light
Klikejte na něj!

Zdrojový kód prvku je <div id="prvek" onclick="zmena()" style="background-color:#ffffff; height: 150px; width: 500px; text-align: center; font-size: 25px; font-color:#00ff00; filter: light();"<>br><br><br>Prvek ovlivněný filtrem Light<br>Klikejte na něj!</div>. Všimněte si též, že je ve shodě s pravidly CSS nadefinována také barva pozadí prvku (background-color: #ffffff;), pokud by nebyla, nebyl by efekt filtru viditelný.

Zdrojový kód ovládacího skriptu:

<script language=“JavaScript“><!–
var stav=0;
window.onload=start; // zajistí spuštění fce start
function start(){ // fce start definuje světelné zdroje
 prvek.filters[0].addCone(2,6,3,200,130,0,1,150,70,15);
 prvek.filters[0].addCone(498,6,3,300,130,0,1,150,70,15);
 prvek.filters[0].addCone(250,6,6,250,255,255,200,0,20,60);
 };
function zmena(){ // fce zmena definuje změny barev
if(stav==0){
 prvek.filters[0].changeColor(0,150,0,1,true);
 prvek.filters[0].changeColor(1,150,0,1,true);
 prvek.filters[0].changeColor(2,0,255,1,true);
 stav=1;}
else{
 prvek.filters[0].changeColor(0,0,1,150,true);
 prvek.filters[0].changeColor(1,0,1,150,true);
 prvek.filters[0].changeColor(2,255,200,0,true);
 stav=0;}
  }
–></script>

Jenom pro stručné vysvětlení, proměnná stav spolu s podmínkami zajišťuje změnu barvy, po každém kliknutí a ne pouze po prvním. Vysvětlování základů JavaScriptu ale nepatří do tématu tohoto článku, odkáži vás tedy na rubriku JavaScript. Metody k filtru Light AddCone a ChangeColor jsou spolu s jejich parametry vysvětleny výše.

Opět upozorňuji, že plnou podporu těchto filtrů obsahuje pouze Internet Explorer, ačkoli v novém návrhu CSS3 je na ně také pamatováno a některé další prohlížeče je již začínají podporovat.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.