Proč bez JavaScriptu?
Když chcete vytvořit efekt kurzoru sledujícího spotlight, první myšlenka je obvykle: “Budu potřebovat JavaScript.” Ale to není vždy pravda. CSS a SVG vám umožňují vytvořit překvapivě efektivní řešení, které je jednodušší na údržbu a lépe se chová na starších zařízeních.
Moderní CSS vlastnosti nám dávají schopnost vytvářet dynamické efekty, které byly dřív možné jen přes scripting. Radiální gradienty, SVG masky a CSS vlastní vlastnosti (CSS proměnné) se staly našimi novými zbraněmi. Výsledek? Menší soubory, rychlejší načítání a méně chyb.
Radiální Gradienty v CSS
Základem celého řešení jsou radiální gradienty. Na rozdíl od lineárních gradientů, které jdou z jednoho bodu do druhého, radiální gradienty vyzařují z centrálního bodu směrem ven. To je přesně to, co potřebujeme pro spotlight efekt.
Syntaxe je jednoduchá:
radial-gradient(circle at X% Y%, barva-vnitř 0%, barva-vně 100%)
. Procenta určují pozici středu gradientu. Když změníte tato procenta dynamicky, vytvoříte efekt, že se světlo pohybuje po stránce.
Nejzajímavější na tomto přístupu je, že můžete změnit procenta bez jednoho řádku JavaScriptu — stačí použít CSS proměnné a CSS funkce
calc()
.
SVG Masky pro Pokročilé Efekty
Pokud chcete jít dál než jen měkké podsvícení pozadí, SVG masky jsou vaše odpověď. Pomocí SVG můžete definovat přesně tvar vašeho “světla” — nemusí to být kruh, může to být hvězda, srdce, cokoli chcete.
SVG maska funguje takto: vytvoříte SVG element s maskou definovanou pomocí
<mask>
elementu. Bílé části masky jsou viditelné, černé neviditelné. Šedé části jsou částečně průhledné. To vám dává úžasnou kontrolu nad tím, co se odhaluje pod vaším “spotlight”.
Nejlepší část? Masku můžete upravovat bez JavaScriptu — stačí změnit atributy SVG elementu přes CSS.
Praktická Implementace
Abyste pochopili, jak to funguje v praxi, pojďme projít jednoduchý příklad. Potřebujete tři vrstvy: pozadí (kde se objevuje spotlight), vrstvu s radiálním gradientem (vaše “světlo”) a obsah, který chcete osvětlit.
Vytvořte strukturu: Jednoduchý HTML s kontejnerem a vnořeným elementem pro gradient
Přidejte CSS gradient: Definujte radiální gradient na vnitřním elementu
Nastavte pozici: Použijte CSS proměnné pro dynamickou pozici (měníte je bez JavaScriptu na dotykových zařízeních)
Pro pohyblivý efekt na desktopu byste normálně používali JavaScript. Ale zde je trik — na desktopu můžete použít CSS
:hover
stav nebo
@supports
dotaz. Na mobilních zařízeních se spotlight zafixuje na střed obrazovky.
Výkon a Kompatibilita
Jednou z velkých výhod CSS přístupu je výkon. Radiální gradienty jsou nativní CSS vlastnost — prohlížeč je renderuje efektivně na GPU. Žádné opakované výpočty JavaScriptu, žádné animační smyčky.
Kompatibilita je také výborná. Radiální gradienty podporují všechny moderní prohlížeče (Chrome, Firefox, Safari, Edge) od verze 2010+. SVG masky jsou také dobře podporovány, s výjimkou Internet Exploreru — ale kdo ještě IE používá?
Pro starší prohlížeče si můžete vytvořit jednoduchý fallback — třeba jen statické pozadí bez efektu. To je přesně to, co je tímto přístupem krásné — graceful degradation bez bolestí hlavy.
Poznámka k Kompatibilitě
Tato příručka je zaměřena na moderní webové prohlížeče a CSS3 vlastnosti. Některé efekty nemusí pracovat identicky ve všech prohlížečích, zvláště ve starších verzích. Vždy testujte svou implementaci na cílových zařízeních. Pro nejlepší výsledky používejte poslední verze hlavních prohlížečů (Chrome, Firefox, Safari, Edge).
Závěr: Síla Moderního CSS
Dynamické osvětlení bez JavaScriptu není futuristická fantazie — je to realita, kterou můžete používat dnes. CSS radiální gradienty a SVG masky vám dávají mocné nástroje pro vytváření ohromujících vizuálních efektů bez složitosti skriptů.
Nejlepší na tom? Váš kód bude čistší, rychlejší a údržbářský. Méně řádků, méně chyb, lepší výkon. To je přesně to, na čem všichni pracujeme v moderním webdesignu.
Zkuste si to sami. Vezměte si jednoduchý radiální gradient, experimentujte s pozicemi a barvami. Podívejte se, jak snadno se můžete dostat k efektům, které dříve vyžadovaly komplikované JavaScript knihovny. Věřte nám — jakmile začnete, nebudete chtít přestat.
