Generátor CSS přechodů

Průvodce CSS přechody

CSS přechody umožňují zobrazit plynulé přechody mezi dvěma nebo více barvami bez použití obrázků. Jsou ideální pro pozadí, tlačítka a vizuální efekty.

Typy přechodů

• Lineární: Barvy přecházejí podél přímky (určené úhlem)
• Radiální: Barvy přecházejí od středu směrem ven

Tipy

• Použijte 2–3 barvy pro nejvizuálně přitažlivější přechody
• 135° je oblíbený diagonální úhel
• Spárujte komplementární barvy pro živé efekty

Jak používat generátor CSS přechodů

1. Zvolte typ přechodu: lineární pro plynulý přechod podél přímé osy nebo radiální pro kruhový přechod vyzařující ze středového bodu. Lineární přechody jsou nejčastější volbou pro pozadí, tlačítka a oddělovače.
2. Vyberte dvě nebo více barev pomocí výběru barev. Můžete přidat mezilehlé barevné body pro vytvoření vícebarevných přechodů — užitečné pro živé sekce, prvky uživatelského rozhraní a pozadí příběhů ve stylu Instagramu.
3. Upravte úhel (pro lineární přechody) od 0° do 360° nebo nastavte pozici a tvar pro radiální přechody. Použijte živý náhled pro okamžité zobrazení změn při doladění každého parametru.
4. Zkopírujte vygenerovaný CSS kód jedním kliknutím. Výstupem je hodnota vlastnosti background nebo background-image připravená k použití, kterou můžete vložit přímo do svého stylesheetu.

Principy CSS přechodů

CSS přechody umožňují vytvářet plynulé přechody mezi dvěma nebo více barvami bez použití obrazových souborů. Specifikace CSS Image Values definuje dva typy přechodů: linear-gradient(), který přechází podél přímky definované úhlem nebo směrovým klíčovým slovem, a radial-gradient(), který přechází ven ze středového bodu. Oba typy jsou vykreslovány nativně prohlížečem, což znamená, že se dokonale škálují při jakémkoli rozlišení, nepřidávají žádné bajty k velikosti stránky a mohou být animovány nebo upravovány pomocí CSS přechodů a JavaScriptu.

Lineární přechody jsou specifikovány směrem (například to right, to bottom right nebo úhlem jako 45deg) následovaným dvěma nebo více barevnými body. Každý barevný bod se skládá z barevné hodnoty a volitelné pozice (0% až 100%). Například linear-gradient(135deg, #667eea 0%, #764ba2 100%) vytvoří diagonální přechod z fialové do indigové. Radiální přechody používají podobnou syntaxi, ale specifikují tvar (kruh nebo elipsa), velikost a pozici místo úhlu. Oba typy podporují průhledné barvy pomocí rgba() nebo hex s alfa kanálem, což umožňuje vrstvené vizuální efekty.

Moderní CSS také podporuje conic-gradient(), který krouží barvami kolem středu, a opakující se funkce přechodů pro vzory. Podpora lineárních a radiálních přechodů v prohlížečích je univerzální ve všech moderních prohlížečích, včetně mobilního Safari a Chrome. Při použití přechodů v produkci vždy zahrňte záložní plnou barvu pozadí pro starší prohlížeče a testujte kontrastní poměry pro zajištění čitelnosti textu. Přechody jsou obzvlášť účinné pro výzvy k akci (CTA tlačítka), pozadí karet, sekce a překryvy vizualizace dat.