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

Parametr Popis
Enabled Určuje možnost použití filtru. Může nabývat hodnot true (zapnutý) nebo false (vypnutý).

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

Parametr Popis
iX1 Udává x-souřadnici světelného zdroje. Může nabývat číselných hodnot.
iY1 Udává y-souřadnici světelného zdroje. Může nabývat číselných hodnot.
iZ1 Udává z-souřadnici světelného zdroje. Může nabývat číselných hodnot.
iX2 Udává x-souřadnici cíle světelného ohniska. Může nabývat číselných hodnot.
iY2 Udává y-souřadnici cíle světelného ohniska. Může nabývat číselných hodnot.
iRed Udává hodnotu červené barvy světelného zdroje. Může nabývat hodnot 0 (nejméně) až 255 (nejvíce).
iGreen Udává hodnotu zelené barvy světelného zdroje. Může nabývat hodnot 0 (nejméně) až 255 (nejvíce).
iBlue Udává hodnotu modré barvy světelného zdroje. Může nabývat hodnot 0 (nejméně) až 255 (nejvíce).
iStrength Udává intenzitu světelného zdroje. Může nabývat hodnot 0 (nejslabší) až 100 (nejsilnější)
iSpread Udává úhel rozptylu světla ze zdroje. Může nabývat hodnot 0 (žádný rozptyl) až 90 (kruhový rozptyl) stupňů.

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

Parametr Popis
iLightNumber Udává číslo světelného zdroje. Může nabývat číselných hodnot, pozor nejnižší číslo je 0.
iRed Udává hodnotu červené barvy světelného zdroje. Může nabývat hodnot 0 (nejméně) až 255 (nejvíce).
iGreen Udává hodnotu zelené barvy světelného zdroje. Může nabývat hodnot 0 (nejméně) až 255 (nejvíce).
iBlue Udává hodnotu modré barvy světelného zdroje. Může nabývat hodnot 0 (nejméně) až 255 (nejvíce).
fAbsolute Udává zda hodnoty nahradí stávající (true) nebo se přidají ke stávajícím (false). Může nabývat hodnot true nebo false.

Metoda ChangeStrength

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

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

Parametr Popis
iLightNumber Udává číslo světelného zdroje. Může nabývat číselných hodnot, pozor nejnižší číslo je 0.
iStrength Udává intenzitu světelného zdroje. Může nabývat hodnot 0 (nejslabší) až 100 (nejsilnější).
fAbsolute Udává zda hodnoty nahradí stávající (true) nebo se přidají ke stávajícím (false). Může nabývat hodnot true nebo false.

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

Parametr Popis
iLightNumber Udává číslo světelného zdroje. Může nabývat číselných hodnot, pozor nejnižší číslo je 0.
iX1 Udává x-souřadnici světelného zdroje. Může nabývat číselných hodnot.
iY1 Udává y-souřadnici světelného zdroje. Může nabývat číselných hodnot.
iZ1 Udává z-souřadnici světelného zdroje. Může nabývat číselných hodnot.
fAbsolute Udává zda hodnoty nahradí stávající (true) nebo se přidají ke stávajícím (false). Může nabývat hodnot true nebo false.

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.

Žádný příspěvek v diskuzi

Odpovědět