Štýl prvkov webových stránok s prechodom na pozadí CSS

Štýl prvkov webových stránok s prechodom na pozadí CSS

Ak ste na internete viac ako niekoľko minút, je pravdepodobné, že ste narazili na gradient CSS. Vlastnosť CSS na pozadí je možné použiť na vytvorenie radu rôznych štýlov a jedným z najzaujímavejších typov je to, čo dokáže s hodnotou gradientu.





Vedieť navrhovať a vytvárať rôzne prechody CSS je výhodou pre každého softvérového návrhára alebo vývojára. Z tohto článku sa naučíte všetko, čo potrebujete vedieť, aby ste do svojich projektov mohli začať zahrňovať prechody CSS.



Čo je to CSS gradient?

Gradient CSS je v podstate kombináciou dvoch alebo viacerých farieb, ktoré plynule prechádzajú z jednej do druhej. Prechodný stav gradientu CSS závisí od typu použitého gradientu. V softvérovom dizajne sa bežne používajú dva hlavné typy gradientov: lineárne a radiálne.





Existuje však tretí typ gradientu, ktorý je menej populárny a je známy ako kužeľovitý gradient.

Syntax prechodov CSS

Background-image: gradient-type (direction, color1, color2);

Gradient CSS by mal byť priradený k vlastnosti CSS obrázok na pozadí. Typ gradientu môže byť jeden z niekoľkých; lineárny gradient, radiálny gradient alebo kužeľovitý gradient. Za typom prechodu nasledujú otváracie a zatváracie zátvorky, ktoré obsahujú smer prechodu prechodu a tiež farby, ktoré majú byť do prechodu zahrnuté.



Súvisiace: Ako nastaviť obrázok na pozadí v CSS

Vyššie uvedený príklad ukazuje dve farby, ale prechod môže obsahovať niekoľko rôznych farieb. Jedinou požiadavkou je, aby každá farba v zozname bola oddelená čiarkou.



Čo je to lineárny gradient?

Lineárny gradient je najobľúbenejším gradientom CSS. Vytvára horizontálny, vertikálny alebo diagonálny prechodový prechod pomocou dvoch alebo viacerých farieb.

Príklad lineárneho gradientu CSS

Background-image: linear-gradient(#00A4CCFF, #F95700FF);

Vyššie uvedený kód vytvorí nasledujúci gradient CSS:



V uvedenom príklade je vynechaná jedna hlavná zložka syntaxe gradientu. Táto zložka je prechodovým smerom gradientu a bola vynechaná, pretože predvolené zarovnanie lineárneho gradientu je zvislé (zhora nadol); to je požadovaný výstup v tomto prípade.

Vyššie uvedený kód prináša rovnaký výsledok ako nasledujúci riadok kódu. Jediným rozdielom medzi nimi je smerová časť kódu.

Použitie príkladu dolného lineárneho gradientu

Background-image: linear-gradient(to bottom, #00A4CCFF, #F95700FF);

Ako vidíte z výstupu, vyššie uvedený kód vytvára gradient, ktorý začína modrou hore a potom pomaly prechádza na oranžovú v spodnej časti. Ak chcete zmeniť poradie farieb, môžete jednoducho vymeniť dnu s nahor a tým sa zmení smer gradientu a vytvorí sa nasledujúci výstup:

Podobne ako pri vertikálnom zarovnaní, horizontálne zarovnanie gradientu je možné dosiahnuť pomocou dvoch skupín smerových kľúčových slov: doľava a doprava , ktorá bude produkovať nasledujúce výstupy, resp.

Tlačidlo domovskej stránky iphone 6 nefunguje

Diagonálny lineárny gradient

Je možné dosiahnuť prechod diagonálnym lineárnym gradientom v ľubovoľnom smere lineárneho gradientu. Aby ste to umožnili, existujú iba štyri konkrétne zoznamy kľúčových slov, ktoré potrebujete vedieť.

  • Vpravo dole
  • Dole vľavo
  • Vpravo hore
  • Vľavo hore

Použitie príkladu diagonálneho lineárneho gradientu

Background-image: linear-gradient(to bottom right, #00A4CCFF, #F95700FF);

Vyššie uvedený príklad produkuje nasledujúci výstup:

Ako vidíte z vyššie uvedeného výstupu, lineárny gradient sa pohybuje v diagonálnom smere a pohybuje sa z ľavej hornej časti do pravej spodnej časti prechodu.

Viacfarebný lineárny gradient

Lineárny gradient môže mať dve alebo viac farieb, ale ako vyzerajú v prechode viac farieb? Viacfarebné usporiadanie lineárnych gradientových farieb závisí od jeho smeru. V tých, ktoré prechádzajú v horizontálnom smere, sa bude každá nová farba zobrazovať vľavo alebo vpravo od lineárneho gradientu, v závislosti od presného smeru lineárneho gradientu.

Viacfarebný príklad lineárneho gradientu

Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);

Riadok kódu vyššie poskytne nasledujúci výstup:

Ako vidíte, každá nová farba je pridaná napravo od gradientu, čo vytvára to, čo sa nakoniec zmení na dúhu. Rovnaký výkon je možné dosiahnuť aj vo vertikálnom smere; špecifické usporiadanie farieb na lineárnom gradiente však bude závisieť od kľúčového slova vertikálneho smeru (hore alebo dole).

Čo je to radiálny gradient?

Radiálny prechod vytvára špirálovitý gradient dvoch viac farieb, ktoré v predvolenom nastavení začínajú od stredu. Tam, kde lineárny gradient vytvára priamy gradient, ktorý tečie vertikálne alebo horizontálne, radiálny gradient vytvára kruhový gradient, ktorý tečie od stredu k vonkajším okrajom.

Použitie príkladu radiálneho gradientu

Background-image: radial-gradient( circle, #00A4CCFF, #F95700FF);

Riadok kódu vyššie poskytne nasledujúci výstup:

Zmena centra radiálneho gradientu

Štandardne začína radiálny gradient v strede gradientu; Je však možné zmeniť miesto pôvodu zavedením niekoľkých kľúčových slov.

hry pre viacerých hráčov pre Android a iOS

Zmena príkladu počiatočnej polohy radiálneho gradientu

Background-image: radial-gradient(circle at top right, #00A4CCFF, #F95700FF);

Riadok kódu vyššie poskytne nasledujúci výstup:

Ako vidíte z výstupu nad, prechod teraz začína v pravom hornom rohu namiesto v strede. Táto zmena je možná z dôvodu zahrnutia kľúčového slova hore vpravo v kóde vyššie. Nasledujúci zoznam kľúčových slov je možné použiť aj na zmenu bodu pôvodu radiálneho gradientu:

  • Hore v ľavo
  • Vpravo dole
  • Vľavo dole

Viacfarebné radiálne prechody

Rovnako ako lineárny gradient, aj radiálny gradient môže používať dve ďalšie farby. Hlavným rozdielom je, že tam, kde sa lineárny gradient pridá k gradientu v priamke, radiálny gradient pridá nové farby na vonkajší okraj.

Viacfarebný príklad radiálneho gradientu


Background-image: radial-gradient(circle, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);

Riadok kódu vyššie poskytne nasledujúci výstup:

Prispôsobenie prechodov

Doteraz ste videli, ako zmeniť smer a stredový bod prechodu, ale nevideli ste, ako si prechod prispôsobiť. Prispôsobenie prechodu môže znieť ako veľa práce, ale keď pochopíte základy vytvárania prechodu na pozadí CSS, ďalším zrejmým krokom je naučiť sa, ako urobiť prechody CSS jedinečnejšími.

ako upgradovať prenosný počítač na hranie hier

Farby v prechode štandardne zaberajú rovnomerne rozložené množstvo priestoru, pričom každá farba plynule prechádza do farby za ňou. Ak sú teda dve farby skombinované a vytvoria prechod, každá farba zaberie polovicu dostupného priestoru pri prechode z jednej na druhú. Ak sa spoja tri farby, každá farba zaberie jednu tretinu priestoru, ktorý je k dispozícii.

S prispôsobeným prechodom definujete množstvo priestoru, ktoré farba v prechode zaberie, explicitným priradením poloha zastavenia farby .

Prispôsobenie lineárneho gradientu Príklad 1

Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF 30%);

Riadok kódu vyššie poskytne nasledujúci výstup:

Vyššie uvedený výstup ukazuje, že druhá farba v lineárnom gradiente sa zastaví na 30% bode prvej farby v gradiente, namiesto jej obvyklej polohy, a pretože druhá farba je tiež konečnou farbou v gradiente, prirodzene sa rozširuje na koniec. .

Ak by ste na konci prvej farby vložili 30% do kódu vyššie, veci by mali byť jasnejšie.

Prispôsobenie lineárneho gradientu Príklad 2

Background-image: linear-gradient( to right, #00A4CCFF 30%, #F95700FF );

Vyššie uvedený kód vytvorí nasledujúci výstup.

Výstup uvedený vyššie jasne ukazuje, že prvá farba v gradiente sa zastaví v 30% bode druhej farby v gradiente. Tento príklad spolu s vyššie uvedeným by vám mal pomôcť uľahčiť pochopenie prispôsobenia zastavenia farieb.

Prispôsobenie radiálneho gradientu sa vykonáva rovnakým spôsobom ako lineárny gradient. Jediná vec, ktorú musíte urobiť, aby ste dosiahli rovnaké výsledky vyššie v radiálnom gradiente, je zmeniť typ a smer gradientu.

Vytváranie prechodov CSS nebolo nikdy jednoduchšie

Tento tutoriál vám ponúka nástroje na identifikáciu a vytváranie lineárnych a radiálnych prechodov. Ak ste sa dostali do tohto bodu, naučili ste sa, ako zmeniť smer a stred gradientu. Navyše teraz máte schopnosti prispôsobovať prechody CSS a vytvárať jedinečné prechody na pozadí.

Ak sa však nechcete pustiť priamo do vytvárania nových a jedinečných prechodov, môžete začať tým, že vytvoríte niekoľko skvelo vyzerajúcich už existujúcich.

zdieľam zdieľam Tweet E -mail 27 Štýlové príklady gradientu pozadia CSS

Plné farby sú tak minulý rok. Prechody sú in! Ako ich však vytvoríte v CSS?

Čítajte ďalej Súvisiace témy
  • Programovanie
  • Vývoj webových aplikácií
  • Vzhľad stránky
  • CSS
O autorovi Kadeisha Kean(21 publikovaných článkov)

Kadeisha Kean je softvérový vývojár a technický/technologický spisovateľ. Má výraznú schopnosť zjednodušiť niektoré z najzložitejších technologických konceptov; produkovať materiál, ktorému každý technologický nováčik ľahko porozumie. Je nadšená písaním, vývojom zaujímavého softvéru a cestovaním po svete (prostredníctvom dokumentov).

Viac od Kadeisha Keana

prihlásiť sa ku odberu noviniek

Pripojte sa k nášmu bulletinu a získajte technické tipy, recenzie, bezplatné elektronické knihy a exkluzívne ponuky!

Kliknutím sem sa prihlásite na odber