Štýl prvkov webových stránok pomocou gradientu pozadia CSS

Ak ste na internete dlhšie ako pár minút, je pravdepodobné, že ste narazili na gradient CSS. Vlastnosť CSS background sa dá použiť na vytvorenie celého radu rôznych štýlov a jedným z najzaujímavejších typov je to, čo dokáže s hodnotou gradientu.

Vedieť, ako navrhovať a vytvárať rôzne prechody CSS, je výhodou pre každého softvérového dizajnéra alebo vývojára. V tomto článku sa dozviete všetko, čo potrebujete, aby ste do svojich projektov mohli začleňovať přechody CSS.

Čo je to prechod CSS?

Prechod CSS je v podstate kombinácia dvoch alebo viacerých farieb, ktoré plynulo 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 prechodov: 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

Obrázok na pozadí: typ prechodu (smer, farba1, farba2);

Gradient CSS by mal byť priradený k vlastnosti CSS obrázka na pozadí. Typ prechodu môže byť jeden z niekoľkých; lineárny gradient, radiálny gradient alebo kužeľovitý gradient. Za typom prechodu nasleduje otváracia a zatváracia zátvorka, ktorá obsahuje prechodový smer prechodu, ako aj 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ší gradient CSS. Vytvára horizontálny, vertikálny alebo diagonálny prechodový prechod pomocou dvoch alebo viacerých farieb.

Príklad lineárneho gradientu CSS

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

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

Z vyššie uvedeného príkladu je vynechaná jedna hlavná súčasť syntaxe gradientu. Táto zložka predstavuje prechodový smer prechodu a bola vynechaná, pretože predvolené zarovnanie lineárneho prechodu je zvislé (zhora nadol); to je požadovaný výstup v tomto príklade.

Vyššie uvedený kód produkuje rovnaký výsledok ako nasledujúci riadok kódu. Rozdiel medzi nimi je iba v smerovej časti kódu.

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

Obrázok na pozadí: lineárny gradient (dole, # 00A4CCFF, # F95700FF);

Ako vidíte z výstupu, vyššie uvedený kód vytvára prechod, ktorý začína modrou v hornej časti a potom pomaly prechádza do oranžovej v dolnej časti. Ak chcete zmeniť poradie farieb, môžete jednoducho vymeniť dolu s nahor a tým sa obráti smer gradientu a vznikne nasledujúci výstup:

Podobne ako pri zvislom zarovnaní, aj pri vodorovnom zarovnaní gradientu je možné použiť dve sady smerových kľúčových slov: doľava a doprava, ktorá vyprodukuje nasledujúce výstupy, resp.

Diagonálny lineárny gradient

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

• Vpravo dole
• Vľavo dole
• Vpravo hore
• Vľavo hore

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

Obrázok na pozadí: lineárny gradient (vpravo dole, # 00A4CCFF, # F95700FF);

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

Ako vidíte na výstupe vyššie, lineárny gradient prechádza prechodom v diagonálnom smere pohybujúcim sa z ľavej hornej časti do dolnej pravej časti gradientu.

Viacfarebný lineárny gradient

Lineárny prechod môže mať dve alebo viac farieb, ale ako vyzerá viac farieb v prechode? Viacfarebné lineárne gradientné farebné usporiadanie závisí od jeho smeru. U tých, ktoré prechádzajú v horizontálnom smere, sa každá nová farba objaví vľavo alebo vpravo od lineárneho gradientu, v závislosti od presného smeru lineárneho gradientu.

Príklad viacfarebného lineárneho gradientu

Obrázok na pozadí: lineárny gradient (vpravo, # 00A4CCFF, # F95700FF, # e2e223, # 2727e2, # 19ad19);

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

Ako vidíte, každá nová farba je pridaná napravo od gradientu a vytvára to, čo sa nakoniec premení na dúhu. Rovnaký výstup je možné dosiahnuť vo zvislom smere; konkrétne farebné usporiadanie na lineárnom gradiente však bude závisieť od kľúčového slova vertikálneho smeru (zhora alebo zdola).

Čo je to radiálny gradient?

Radiálny gradient vytvára špirálovitý gradient dvoch, viac farieb, ktoré predvolene začínajú od stredu. Keď 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 zo stredu k vonkajším okrajom.

Použitie príkladu radiálneho gradientu

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

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

Zmena stredu radiálneho prechodu

Predvolene sa radiálny gradient začína v strede gradientu; je však možné zmeniť východiskový bod zavedením niekoľkých kľúčových slov.

Príklad zmeny východiskovej polohy radiálneho gradientu

Obrázok na pozadí: radiálny gradient (kruh vpravo hore, # 00A4CCFF, # F95700FF);

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

Ako vidíte na výstupe, prechod sa teraz začína od pravého horného rohu namiesto od stredu. 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 možno použiť aj na zmenu východiskového bodu radiálneho gradientu:

• Hore v ľavo
• Vpravo dole
• Dole vľavo

Viacfarebné radiálne prechody

Rovnako ako lineárny gradient, aj radiálny gradient môže používať dve alebo viac farieb, hlavný rozdiel je v tom kde lineárny gradient pridáva k gradientu v priamke, radiálny gradient pridáva nové farby na vonkajšej strane hrana.

Príklad viacfarebného radiálneho gradientu

Obrázok na pozadí: radiálny gradient (kruh, # 00A4CCFF, # F95700FF, # e2e223, # 2727e2, # 19ad19);

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

Prispôsobenie prechodov

Doteraz ste videli, ako zmeniť smer a stred gradientu, ale nevideli ste, ako prispôsobiť gradient. Prispôsobenie gradientu môže znieť ako veľa práce, ale keď pochopíte základné informácie o vytváraní gradient na pozadí CSS ďalším zrejmým krokom je naučiť sa, ako vylepšiť svoje gradienty CSS jedinečný.

V predvolenom nastavení zaberajú farby v prechode rovnomerne rozložené množstvo priestoru, pričom každá farba plynule prechádza do tej po nej. Takže ak sú dve farby skombinované do jedného gradientu, každá farba bude pri prechode z jednej do druhej zaberať polovicu dostupného priestoru. Ak sú kombinované tri farby, každá farba zaberie jednu tretinu dostupného priestoru.

Pomocou prispôsobeného gradientu môžete explicitným priradením výrazu definovať veľkosť priestoru, ktorý bude farba v prechode zaberať poloha zastavenia farieb.

Prispôsobenie príkladu lineárneho gradientu 1

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

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

Výstup vyššie zobrazuje druhú farbu v lineárnom gradiente zastavujúcu sa na 30% bode prvej farby v gradiente, namiesto svojej obvyklej polohy a pretože druhá farba je tiež výslednou farbou v prechode, prirodzene sa rozširuje na koniec.

Ak by ste mali umiestniť 30% do vyššie uvedeného kódu na konci prvej farby, veci by mali byť jasnejšie.

Prispôsobenie príkladu lineárneho gradientu 2

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

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

Výstup vyššie zreteľne zobrazuje prvú farbu v gradiente zastavujúcu sa na 30% bode druhej farby v gradiente. Tento príklad spolu s príkladom vyššie by vám mal pomôcť ľahšie pochopiť prispôsobenie zastavenia farieb.

Prispôsobenie radiálneho gradientu sa robí 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 zmena typu a smeru gradientu.

Vytváranie prechodov CSS nebolo nikdy jednoduchšie

Tento článok s návodom poskytuje nástroje na identifikáciu a vytváranie lineárnych a radiálnych prechodov. Ak ste to dosiahli až do tohto bodu, naučili ste sa, ako zmeniť smer a stred gradientu. Okrem toho teraz máte zručnosti na prispôsobenie prechodov CSS a vytváranie jedinečných prechodov na pozadí.

Ak však nechcete ísť priamo do vytvárania nových a jedinečných prechodov, môžete začať vytvorením niekoľkých skvelo vyzerajúcich už existujúcich.

27 štýlových príkladov gradientu pozadia CSS

Jednofarebné farby sú také ako minulý rok. Prechody sú in! Ako ich však vytvoriť v CSS?

Prečítajte si Ďalej

O autorovi

Rozbaliť a prečítať si celý príbeh