Doby, kdy bylo možné vytvořit gradient na webu pouze pomocí obrázků, jsou dávno pryč. Nyní je snadné vytvářet přechody uvnitř stylů CSS.

Chcete-li nastavit přechod, použijte vlastnost background-image nebo zkrácenou verzi background-image . A můžeme vytvořit lineární i radiální gradient zadáním hodnot obou lineární gradientNebo radiální gradient a určení počáteční a koncové barvy. Zde je příklad syntaxe:

pozadí: linear-gradient(#58b6b9, #edf1cf);

Směr je možné změnit uvedením na začátku, před první barvou.

pozadí: linear-gradient(doprava, #94525c, #14aad7);

Pokud tento parametr nahradíte vpravo nahoře, získáte diagonální gradient. Stejný efekt lze vytvořit zadáním parametru ve stupních, například 45deg.

Můžete použít více než 2 barvy a barvy lze napsat i jménem.

pozadí: linear-gradient(doprava, #94525c, #14aad7, azurová);

Každá ze čtyř barev zabere stejné množství dostupného prostoru, což nám poskytne hladký a vyvážený gradient.

Pokud chceme, aby jedna barva zabírala více místa než jiná, můžeme přidat procentuální hodnotu přímo za barvu. Procvičte si použití generátoru přechodů CSS výše.

pozadí: lineární gradient (doprava, #a3795f 50 %, #012754);

Radiální gradient

Využijme vše, co jsme se dosud naučili, k vytvoření radiálního gradientu. Je to vlastně docela jednoduché, stačí na začátku zadat hodnotu radiálního gradientu.

pozadí: radial-gradient(#edf1cf, #43acb4);

Tento radiální gradient má tvar svého mateřského bloku, takže místo kružnice jsme skončili s elipsou. Chcete-li vytvořit přechod ve tvaru kruhu bez ohledu na proporce rodiče, musíte zadat klíčové slovo kruh.

pozadí: radial-gradient(circle, #5d1a78, #414b50);

Navíc můžeme určit, kde bude střed radiálního gradientu. Ujistěte se, že je v levém horním rohu:

pozadí: radial-gradient(kruh vlevo nahoře, #e1d767, #d3f6da);

Praktické využití gradientu CSS

Zkusme použít přechod originálnějším způsobem.

Přechod v horní části obrázku

Níže vidíte příklad vrstvy přechodu nad obrazem. Zde jsme použili průsvitné barvy rgba.

Vlastnost pozadí může nabývat více hodnot najednou. V tomto případě bude první horní vrstva a poslední spodní.

CSS div

Dostaneme tento efekt:

Přechod v textu

Přechodový text je skvělý efekt, i když není zcela podporován ve své čisté podobě. Místo toho používáme vlastnost background-clip, což je druh hacku, ale hack, který funguje skvěle.

ČTĚTE VÍCE
Jak cítit svůj styl?

Vezměme prvek, v tomto případě h1, a aplikujeme na něj gradient. Přiřaďme hodnotu vlastnosti background-clip (souhrnně „Stránka (Stránky)“), a naše postupy pro shromažďování, využívání, uchovávání, ochranu a zpřístupnění takových informací. Tyto zásady platí pro informace, které shromažďujeme na těchto stránkách nebo v e-mailu, textových a jiných elektronických zprávách mezi vámi a těmito stránkami. Rovněž popisují vaše možnosti týkající se využívání vašich osobních údajů, přístupu k nim a jejich opravě., tím se odstraní pozadí z celého bloku kromě textu. A samozřejmě byste měli vlastnit barva transparentní, jinak gradient neuvidíme.

CSS div
  • Studio Profesionální vývoj vlastních webových stránek Přečtěte si více
  • Ikony Skvělý způsob, jak vizuálně vyjádřit hlavní myšlenku Další informace
  • Služby Užitečné nástroje pro webové vývojáře Přečtěte si více
  • Blog Sdílíme naše zkušenosti a znalosti v oblasti IT Přečtěte si více
  • Sdílejte kontakty VKontakteFacebook support@active-vision.ru

© 2019 – 2024 Active-Vision. Zásady ochrany osobních údajů. Veškeré informace na stránce jsou pouze orientační a nejsou veřejnou nabídkou ve smyslu článku 437 občanského zákoníku Ruské federace