Základy CSS přechodů
CSS přechody (gradients) představují plynulé přechody mezi dvěma nebo více barvami, které se vykreslují přímo v prohlížeči jako obrázek na pozadí. Na rozdíl od klasických obrázků na pozadí se CSS přechody přizpůsobují jakékoli velikosti prvku bez ztráty kvality.
Nástroj Generátor přechodů umožňuje vizuálně konfigurovat tři základní typy přechodů, které specifikace CSS podporuje: lineární, radiální a kónické. Každý z těchto typů mění způsob, jakým se barvy vzájemně prolínají a jakým směrem se po ploše šíří.
Lineární přechody: Směr a barevné body
Lineární přechod (v CSS definovaný jako linear-gradient) prolíná barvy podél rovné přímky. Směr této přímky určuje úhel, který lze v rozhraní nastavit pomocí posuvníku.
Při nastavování úhlu platí následující pravidla:
- Úhel 0° směřuje přímo nahoru.
- Úhel 90° směřuje doprava.
- Zvyšováním hodnoty se směr otáčí po směru hodinových ručiček.
Podél této přímky jsou rozmístěny jednotlivé barevné body. Výchozí nastavení nástroje začíná se dvěma barevnými body: #6366f1 na pozici 0% a #ec4899 na pozici 100%. Barvy se plynule mísí od prvního bodu k druhému podél zvolené osy.
Radiální přechody: Tvary a distribuce barev
Radiální přechod (radial-gradient) se šíří ze středového bodu směrem ven. Na rozdíl od lineárního přechodu nevyužívá radiální přechod úhel pro určení směru. Místo toho se definuje jeho geometrický tvar.
V nástroji lze zvolit dva tvary:
- Elipsa: Barvy se šíří v poměru stran kontejneru, což vytváří oválný přechod.
- Kruh: Barvy se šíří rovnoměrně do všech směrů se stejným poloměrem, bez ohledu na poměr stran prvku.
Distribuce barev probíhá od středu (pozice 0%) k vnějšímu okraji (pozice 100%). Přidáním dalších barevných bodů mezi tyto hodnoty lze ovlivnit, jak rychle nebo v jakých odstupech k mísení barev dochází.
Kónické přechody: Rotace kolem středu
Kónický přechod (conic-gradient) vytváří efekt, při kterém se barvy obtáčejí kolem středového bodu, podobně jako na barevném kole nebo při pohledu na 3D kužel shora.
U kónického přechodu určuje úhel počáteční bod, od kterého rotace barev začíná. Hodnota 0° začíná nahoře a barvy se rozprostírají po směru hodinových ručiček v rozsahu 360°. Barevné body jsou zde mapovány na procentuální vyjádření obvodu kruhu, kde 0% představuje začátek rotace a 100% její konec v místě setkání s počátečním bodem.
Role barevných bodů v návrhu přechodu
Barevné body (color stops) určují konkrétní barvy ukotvené k určité pozici na přechodu. Pozice se vyjadřuje v procentech od 0% (začátek) do 100% (konec).
Při práci s barevnými body v tomto nástroji platí tato pravidla:
- Minimální počet pro funkční přechod jsou dva body.
- Maximální počet barevných bodů, které lze přidat, je osm.
- Jakmile dosáhnete limitu osmi bodů, tlačítko Přidat bod se deaktivuje.
- Nově přidané barevné body se automaticky vloží s výchozí pozicí 50%.
Změnou pozice jednotlivých bodů lze docílit buď velmi pozvolného přechodu mezi barvami (pokud jsou body daleko od sebe), nebo ostrých přechodových hran (pokud jsou dva různé barevné body umístěny těsně vedle sebe na téměř shodné procentuální pozici).
Použití nástroje Generátor přechodů
Nástroj poskytuje vizuální rozhraní pro rychlé sestavení CSS kódu. Postup při vytváření přechodu se skládá z několika kroků:
- Volba typu: V sekci Typ přechodu zvolte možnost Lineární, Radiální nebo Kónický.
- Nastavení geometrie: Podle zvoleného typu upravte Úhel (pro lineární a kónický přechod) nebo Tvar (Elipsa či Kruh pro radiální přechod).
- Správa barevných bodů: V sekci Barevné body můžete upravovat stávající body, měnit jejich barvu (Barva bodu) a posuvníkem měnit parametr Pozice. Pro přidání nové barvy klikněte na tlačítko Přidat bod, pro odstranění nepotřebné barvy použijte tlačítko Odebrat bod.
- Kopírování kódu: V reálném čase se zobrazuje vizuální náhled výsledného přechodu. Jakmile jste s výsledkem spokojeni, v sekci CSS klikněte na tlačítko Kopírovat CSS. Text tlačítka se po kliknutí změní na „Zkopírováno“ pro potvrzení, že kód byl uložen do schránky.
Ochrana soukromí a zpracování dat
Všechny výpočty, generování kódu a vykreslování vizuálního náhledu probíhají lokálně přímo ve vašem webovém prohlížeči. Nic z toho, co v nástroji nastavíte, se neodesílá na servery BroBroGo. Zpracování dat probíhá výhradně na straně klienta.
Často kladené otázky
Jaký je rozdíl mezi lineárním, radiálním a kónickým přechodem? Lineární přechod (linear) prolíná barvy podél přímky, kterou nasměrujete pomocí úhlu. Radiální přechod (radial) je šíří ze středu ven v kruhu nebo elipse. Kónický přechod (conic) je obtáčí kolem středu jako barevné kolo.
Co jsou to barevné body (stops)? Každý barevný bod (stop) je barva ukotvená k určité pozici na přechodu – 0 % na začátku, 100 % na konci. Posunutím bodu změníte místo, kde daná barva vrcholí, nebo přidejte další body pro bohatší prolnutí. Použít jich můžete až osm.
Jak mohu ovlivnit směr přechodu? U lineárního nebo kónického přechodu určuje směr posuvník úhlu – 0° směřuje nahoru, 90° doprava. Radiální přechod úhel nemá; místo toho zvolte tvar kruhu nebo elipsy, čímž změníte způsob jeho šíření.
Kolik barevných bodů mohu do přechodu přidat? Generátor umožňuje definovat až 8 barevných bodů. Při dosažení tohoto počtu se možnost přidání dalšího bodu zablokuje. Nově vytvořený bod se vždy umístí na středovou hodnotu 50%.