Home-theater-designers
Pokud jste na internetu déle než několik minut, je pravděpodobné, že jste narazili na přechod CSS. Vlastnost pozadí CSS 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 CSS přechod?
Přechod CSS je v podstatě kombinací 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 softwarovém designu 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želový přechod.
Syntaxe přechodů CSS
Background-image: gradient-type (direction, color1, color2);
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í gradient, radiální gradient nebo kónický gradient. Za typem přechodu následují otevírací a zavírací závorky, které obsahují 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 nejpopulárnějším přechodem CSS. Vytváří 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
Background-image: linear-gradient(#00A4CCFF, #F95700FF);
Výše uvedený kód vytvoří následující přechod CSS:
Z výše uvedeného příkladu je vynechána jedna hlavní složka syntaxe přechodu. Tato složka je přechodovým směrem přechodu a byla vynechána, protože výchozí zarovnání lineárního přechodu je svislé (shora dolů); to je požadovaný výstup v tomto příkladu.
Výše uvedený kód vytváří stejný výsledek jako následující řádek kódu. Jediným rozdílem mezi nimi je směrová část kódu.
Použití příkladu dolního lineárního přechodu
Background-image: linear-gradient(to bottom, #00A4CCFF, #F95700FF);
Jak můžete vidět z výstupu, výše uvedený kód vytvoří přechod, který začíná modrou nahoře a pak pomalu přechází do oranžové ve spodní části. Pokud chcete změnit pořadí barev, můžete jednoduše nahradit na dno 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 horizontálního zarovnání přechodu dosáhnout pomocí dvou sad směrových klíčových slov: opustit a doprava , který bude produkovat následující výstupy, resp.
proč jsou ceny přání tak nízké
Diagonální lineární přechod
Je možné dosáhnout diagonálního lineárního gradientového přechodu v libovolném směru lineárního gradientu. Aby to bylo možné, existují pouze čtyři konkrétní seznamy klíčových slov.
- Vpravo dole
- Dole vlevo
- Vpravo nahoře
- Vlevo nahoře
Použití příkladu diagonálního lineárního přechodu
Background-image: linear-gradient(to bottom right, #00A4CCFF, #F95700FF);
Výše uvedený příklad produkuje následující výstup:
Jak vidíte z výše uvedeného výstupu, lineární přechod přechází v diagonálním směru a pohybuje 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é uspořádání barevných lineárních gradientů závisí na jeho směru. U těch, které přecházejí v horizontální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.
Vícebarevný příklad lineárního přechodu
Background-image: linear-gradient(to right, #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ýkonu lze dosáhnout ve svislém směru; konkrétní barevné uspořádání lineárního přechodu však bude záviset na klíčovém slově vertikálního směru (nahoru nebo dolů).
Co je to radiální přechod?
Radiální přechod vytváří spirálovitý přechod dvou 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ě, radiální přechod vytváří kruhový přechod, který teče od středu k vnějším okrajům.
Použití příkladu radiálního přechodu
Background-image: radial-gradient( circle, #00A4CCFF, #F95700FF);
Řádek kódu výše vytvoří následující výstup:
Změna centra radiálního přechodu
Ve výchozím nastavení začíná radiální přechod ve středu přechodu; je však možné změnit místo původu zavedením několika klíčových slov.
jak vytvořit vlastní karty v stolním simulátoru
Změna příkladu počáteční polohy radiálního přechodu
Background-image: radial-gradient(circle at top right, #00A4CCFF, #F95700FF);
Řádek kódu výše vytvoří následující výstup:
Jak vidíte z výstupu nad, přechod nyní začíná z pravého horního rohu místo 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čátku radiálního přechodu:
- Vlevo nahoře
- Vpravo dole
- Vlevo dole
Vícebarevné radiální přechody
Stejně jako lineární přechod, může i radiální přechod použít dvě barvy ve více barvách, hlavní rozdíl je v tom, že tam, kde se lineární přechod přidá k přechodu v přímé linii, radiální přechod přidá nové barvy na vnější hranu.
Vícebarevný příklad radiálního přechodu
Background-image: radial-gradient(circle, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
Řádek kódu výše vytvoří následující výstup:
Přizpůsobení přechodů
Doposud jste viděli, jak změnit směr a středový bod přechodu, ale neviděli jste, jak upravit přechod. Přizpůsobení přechodu může znít jako spousta práce, ale jakmile porozumíte základům vytváření přechodu na pozadí CSS, dalším zřejmým krokem je naučit se, jak udělat přechody CSS jedinečnějšími.
jak zkontrolovat, jakou máte základní desku
Ve výchozím nastavení barvy v přechodu zabírají rovnoměrně rozdělené množství prostoru, přičemž každá barva plynule přechází do barvy za ní. Pokud tedy dvě barvy zkombinujete a vytvoříte přechod, každá barva zabere polovinu dostupného prostoru při přechodu z jedné na druhou. Pokud jsou kombinovány tři barvy, každá barva zabere třetinu dostupného prostoru.
S přizpůsobeným přechodem definujete množství prostoru, které barva zabere v přechodu výslovným přiřazením pozice zastavení barev .
Přizpůsobení lineárního přechodu Příklad 1
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF 30%);
Řádek kódu výše vytvoří následující výstup:
Výše uvedený výstup ukazuje, že druhá barva v lineárním přechodu se zastaví na 30% bodu první barvy v přechodu, místo jeho obvyklé polohy, a protože druhá barva je také konečnou barvou v přechodu, přirozeně sahá až do konce .
Pokud byste na konci první barvy umístili 30% do výše uvedeného kódu, věci by měly být jasnější.
Přizpůsobení lineárního přechodu Příklad 2
Background-image: linear-gradient( to right, #00A4CCFF 30%, #F95700FF );
Výše uvedený kód vytvoří následující výstup.
Výše uvedený výstup 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 vám měl 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 nebylo nikdy snazší
Tento výukový článek vám poskytne nástroje k identifikaci a vytváření lineárních a radiálních přechodů. Pokud jste se dostali do tohoto bodu, naučili jste se, jak změnit směr a střed přechodu. Navíc nyní máte schopnosti přizpůsobit přechody CSS a vytvářet jedinečné přechody na pozadí.
Pokud se však nechcete pouště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.
Podíl Podíl tweet E-mailem 27 Stylové příklady přechodu na pozadí CSSPlné barvy jsou tak v loňském roce. Přechody jsou in! Jak je ale vytvoříte v CSS?
Číst dále Související témata- Programování
- Vývoj webu
- Webový design
- CSS
Kadeisha Kean je vývojář softwaru a technický/technologický spisovatel v plném zásobníku. Má výraznou schopnost zjednodušit některé z nejsložitějších technologických konceptů; produkující materiál, kterému každý technologický nováček snadno porozumí. Je nadšená psaním, vývojem zajímavého softwaru a cestováním po světě (prostřednictvím dokumentů).
Více od Kadeisha KeanPřihlaste se k odběru našeho zpravodaje
Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné elektronické knihy a exkluzivní nabídky!
Kliknutím sem se přihlásíte k odběru