Stylujte prvky webových stránek pomocí gradientu pozadí CSS

Pokud jste na internetu déle než několik minut, je pravděpodobné, že jste narazili na přechod CSS. Vlastnost CSS pozadí lze použít k vytvoření řady různých stylů a jedním z nejzajímavějších typů je to, co dokáže s hodnotou přechodu.

Vědět, jak navrhovat a vytvářet různé přechody CSS, je výhodou pro každého návrháře nebo vývojáře softwaru. Z tohoto článku se dozvíte vše, co potřebujete vědět, abyste mohli do svých projektů začleňovat přechody CSS.

Co je to přechod CSS?

Přechod CSS je v podstatě kombinace dvou nebo více barev, které plynule přecházejí z jedné do druhé. Přechodný stav přechodu CSS závisí na typu použitého přechodu. V návrhu softwaru se běžně používají dva hlavní typy přechodů: lineární a radiální.

Existuje však třetí typ přechodu, který je méně populární a je znám jako kuželovitý přechod.

Syntaxe přechodů CSS

Obrázek na pozadí: typ přechodu (směr, barva1, barva2);

Přechod CSS by měl být přiřazen vlastnosti CSS obrázek na pozadí. Typ přechodu může být jeden z několika; lineární přechod, radiální přechod nebo kuželovitý přechod. Za typem přechodu následuje otevírací a zavírací závorka, která obsahuje přechodový směr přechodu a také barvy, které mají být do přechodu zahrnuty.

Příbuzný: Jak nastavit obrázek na pozadí v CSS

Výše uvedený příklad ukazuje dvě barvy, ale přechod může obsahovat několik různých barev. Jediným požadavkem je, aby každá barva v seznamu byla oddělena čárkou.

Co je lineární přechod?

Lineární přechod je nejoblíbenější přechod CSS. Vytvoří horizontální, vertikální nebo diagonální přechodový přechod pomocí dvou nebo více barev.

Příklad lineárního přechodu CSS

Obrázek na pozadí: lineární gradient (# 00A4CCFF, # F95700FF);

Výše uvedený kód vytvoří následující přechod CSS:

Ve výše uvedeném příkladu je vynechána jedna hlavní součást syntaxe přechodu. Tato komponenta je přechodovým směrem přechodu a byla vynechána, protože výchozí zarovnání lineárního přechodu je vertikální (shora dolů); to je požadovaný výstup v tomto příkladu.

Výše uvedený kód produkuje stejný výsledek jako následující řádek kódu. Jediný rozdíl mezi nimi je směrová část kódu.

Použití příkladu dolního lineárního přechodu

Obrázek na pozadí: lineární přechod (dolů, # 00A4CCFF, # F95700FF);

Jak vidíte z výstupu, výše uvedený kód vytváří přechod, který začíná modrou nahoře a potom pomalu přechází na oranžovou dole. Pokud byste chtěli změnit pořadí barev, můžete jednoduše vyměnit dolů s nahoru a to obrátí směr přechodu a vytvoří následující výstup:

Podobně jako u svislého zarovnání lze vodorovného zarovnání přechodu dosáhnout pomocí dvou sad klíčových slov ve směru: opustit a doprava, který vyprodukuje následující výstupy, resp.

Diagonální lineární přechod

Je možné dosáhnout přechodu diagonálního lineárního přechodu v libovolném směru lineárního přechodu. Existují jen čtyři konkrétní seznamy klíčových slov, které potřebujete znát, aby to bylo možné.

• Vpravo dole
• Vlevo dole
• Vpravo nahoře
• Vlevo nahoře

Příklad diagonálního lineárního přechodu

Obrázek na pozadí: lineární přechod (vpravo dole, # 00A4CCFF, # F95700FF);

Výše uvedený příklad vytváří následující výstup:

Jak vidíte z výstupu výše, lineární přechod provádí přechod v úhlopříčném směru pohybujícím se z levé horní části do pravé dolní části přechodu.

Vícebarevný lineární přechod

Lineární přechod může mít dvě nebo více barev, ale jak vypadá více barev v přechodu? Vícebarevné lineární gradientní barevné uspořádání závisí na jeho směru. U těch, které přecházejí ve vodorovném směru, se každá nová barva objeví vlevo nebo vpravo od lineárního přechodu, v závislosti na přesném směru lineárního přechodu.

Příklad vícebarevného lineárního přechodu

Obrázek na pozadí: lineární přechod (vpravo, # 00A4CCFF, # F95700FF, # e2e223, # 2727e2, # 19ad19);

Řádek kódu výše vytvoří následující výstup:

Jak vidíte, každá nová barva je přidána napravo od přechodu a vytváří to, co se nakonec promění v duhu. Stejného výstupu lze dosáhnout ve svislém směru; konkrétní barevné uspořádání na lineárním přechodu však bude záviset na klíčovém slovu svislého směru (nahoru nebo dolů).

Co je to radiální přechod?

Radiální přechod vytváří spirálovitý přechod dvou, více barev, které ve výchozím nastavení začínají od středu. Tam, kde lineární přechod vytváří přímý přechod, který teče svisle nebo vodorovně, vytváří radiální přechod kruhový přechod, který proudí od středu k vnějším okrajům.

Použití příkladu radiálního přechodu

Obrázek na pozadí: radiální gradient (kruh, # 00A4CCFF, # F95700FF);

Řádek kódu výše vytvoří následující výstup:

Změna středu radiálního přechodu

Ve výchozím nastavení začíná radiální přechod uprostřed přechodu; je však možné změnit výchozí bod zavedením několika klíčových slov.

Příklad změny výchozí polohy radiálního přechodu

Obrázek na pozadí: radiální přechod (kruh vpravo nahoře, # 00A4CCFF, # F95700FF);

Řádek kódu výše vytvoří následující výstup:

Jak vidíte z výstupu nad přechodem, přechod nyní začíná od pravého horního rohu místo od středu. Tato změna je možná z důvodu zahrnutí klíčového slova vpravo nahoře v kódu výše. Následující seznam klíčových slov lze také použít ke změně počátečního bodu radiálního přechodu:

• Vlevo nahoře
• Vpravo dole
• Vlevo dole

Vícebarevné radiální přechody

Stejně jako u lineárního přechodu lze u radiálního přechodu také použít dvě více barev, hlavní rozdíl je v tom kde lineární přechod přidává k přechodu v přímce, radiální přechod přidává nové barvy na vnější straně okraj.

Příklad vícebarevného radiálního přechodu

Obrázek na pozadí: radiální přechod (kruh, # 00A4CCFF, # F95700FF, # e2e223, # 2727e2, # 19ad19);

Řádek kódu výše vytvoří následující výstup:

Přizpůsobení přechodů

Zatím jste viděli, jak změnit směr a střed přechodu, ale neviděli jste, jak přizpůsobit přechod. Přizpůsobení přechodu může znít jako hodně práce, ale jakmile pochopíte základy vytváření přechod na pozadí CSS dalším zřejmým krokem je naučit se, jak vylepšit přechody CSS unikátní.

Ve výchozím nastavení barvy v přechodu zabírají rovnoměrně rozložené množství prostoru, přičemž každá barva plynule přechází do jedné po ní. Pokud jsou tedy dvě barvy kombinovány a vytvářejí přechod, každá barva bude při přechodu z jedné do druhé zabírat polovinu dostupného prostoru. Pokud jsou kombinovány tři barvy, každá barva zabírá jednu třetinu prostoru, který je k dispozici.

S přizpůsobeným přechodem můžete explicitním přiřazením definovat velikost prostoru, který bude barva v přechodu zabírat pozice zastavení barvy.

Přizpůsobení příkladu lineárního přechodu 1

Obrázek na pozadí: lineární gradient (vpravo, # 00A4CCFF, # F95700FF 30%);

Řádek kódu výše vytvoří následující výstup:

Výstup výše ukazuje druhou barvu v lineárním přechodu, která se zastaví na 30% bodu první barvy v přechodu, místo své obvyklé polohy a protože druhá barva je také konečnou barvou v přechodu, přirozeně se rozšíří na konec.

Pokud byste měli umístit 30% do výše uvedeného kódu na konci první barvy, věci by měly být jasnější.

Přizpůsobení příkladu lineárního přechodu 2

Obrázek na pozadí: lineární gradient (vpravo, # 00A4CCFF 30%, # F95700FF);

Výše uvedený kód vytvoří následující výstup.

Výstup výše jasně ukazuje, že první barva v přechodu se zastaví na 30% bodu druhé barvy v přechodu. Tento příklad spolu s výše uvedeným by měl pomoci usnadnit pochopení přizpůsobení zastavení barev.

Přizpůsobení radiálního přechodu se provádí stejným způsobem jako lineární přechod. Jediná věc, kterou musíte udělat, abyste dosáhli stejných výsledků výše v radiálním přechodu, je změnit typ a směr přechodu.

Vytváření přechodů CSS nikdy nebylo jednodušší

Tento výukový článek vám poskytuje nástroje k identifikaci a vytváření lineárních a radiálních přechodů. Pokud jste se dostali až do tohoto bodu, naučili jste se, jak změnit směr a střed přechodu. Navíc nyní máte dovednosti přizpůsobit přechody CSS a vytvářet jedinečné přechody na pozadí.

Pokud však nechcete jít přímo do vytváření nových a jedinečných přechodů, můžete začít vytvořením několika skvěle vypadajících již existujících přechodů.

27 Stylové příklady přechodu na pozadí CSS

Plné barvy jsou tak v loňském roce. Přechody jsou v! Jak je ale vytvořit v CSS?

Přečtěte si další

O autorovi

Rozbalte a přečtěte si celý příběh