CSS3 Linear Gradients [CSS3 Tipy]
stúpanie je skvelý doplnok farieb v systéme CSS3. Namiesto toho, aby sme pridali iba jednu farbu, teraz môžeme pridať viaceré kombinácie farieb do jedného bloku s deklaráciou bez spoliehania sa na obrázky, čo by mohlo znížiť požiadavku HTTP na našej webovej stránke,.
Ak ste si zahrali s gradientmi v CSS3, pravdepodobne ste oboznámení s dvoma spôsobmi: radiálnym a lineárnym gradientom. Dnešný príspevok bude o poslednom.
Vytváranie prechodov
Keďže špecifikácia hovorí, že gradienty v CSS3 sú obraz, nemá žiadny špeciálny vlastnosť, ako je to pridaná nová funkcia, takže je deklarovaný pomocou background-image nehnuteľnosť namiesto toho.
Ak sa pozrieme na úplnú syntax pre gradient, vyzerá to trochu preplnený, čo by mohlo viesť k nejasnostiam pre niektorých ľudí.
div pozadie-obrázok: -webkit-lineárny gradient (vrchol, # FF5A00 0%, # FFAE00 100%); pozadia-obrázok: -moz-lineárny gradient (vrchol, # FF5A00 0%, # FFAE00 100%); obrázok na pozadí: -ms-lineárny gradient (vrchol, # FF5A00 0%, # FFAE00 100%); obrázok na pozadí: -o-lineárny gradient (vrchol, # FF5A00 0%, # FFAE00 100%); obrázok na pozadí: lineárny gradient (vrchol, # FF5A00 0%, # FFAE00 100%);
Takže poďme do každej časti syntaxe jeden po druhom, aby sme objasnili veci.
Najprv sa lineárny gradient deklaruje pomocou lineárny gradient () Funkcie. Funkcia má tri primárne hodnoty. Prvá hodnota definuje počiatočnú polohu gradientu. Môžete použiť popisné kľúčové slovo, napríklad top spustiť gradient tečúci z top;
div pozadie-obrázok: lineárny gradient (vrchol, # FF5A00, # FFAE00);
Tento úryvok je oficiálna verzia od spoločnosti W3C, ktorá vytvára prechody. Je to vlastne jednoduchšie a úplne samo vysvetľujúce a vytvorí aj nasledujúci gradient.
Môžete tiež použiť dno robiť opak, inak správny a ľavý.
Taktiež môžeme vytvoriť diagonálny gradient uhol stupňa ako východisková pozícia gradientu. Tu je príklad:
div pozadie-obrázok: lineárny gradient (45deg, #FF5A00, #FFAE00);
Tento úryvok vytvorí nasledujúci farebný gradient:
Druhá hodnota funkcie povedie prvá farba informácie a jej zastavenia ktorá je uvedená v percentách. Poloha zastavenia je v skutočnosti voliteľná; prehliadač je dostatočne šikovný na to, aby určil správnu pozíciu, takže keď neurčíme prvú zastavenie farby, prehliadač bude trvať 0% ako predvolené.
A ďalšia hodnota je druhá farba kombinácie. Funguje to ako predchádzajúca hodnota, len ak je to posledná použitá farba a nešpecifikujeme zastavenia, hodnota 100% sa bude považovať za predvolené. Pozrime sa na nasledujúci príklad:
div pozadie-obrázok: lineárny gradient (top, # FF5A00 0%, # FFAE00 100%);
Hore uvedený úryvok vytvorí prechod, aký sme videli predtým (bez rozdielu), ale teraz určujeme pozíciu zastavenia farby.
Teraz to zmeniť stop farieb, a tentokrát budeme špecifikovať 50% pre prvú farbu a 51% pre druhú farbu a uvidíme, ako to dopadne;
div pozadie-obrázok: lineárny gradient (top, # FF5A00 50%, # FFAE00 51%);
priehľadnosť
vytváranie priehľadnosť v gradiente je tiež možné. Ak chcete vytvoriť efekt, musíme preložiť farbu hex do RGBA a spustite alfa kanál.
div pozadie-obrázok: lineárny gradient (vrchol, rgba (255,90,0,0,2), rgb (255,174,0,0,2));
Tento úryvok zníži intenzitu farieb o 20%, a gradient sa ukáže takto:
Viac farieb
Ak chcete, aby boli pridané ďalšie farby, pridajte farby vedľa ďalšej s oddeľovačom čiar a nechajte prehliadač určiť každú polohu zastavenia farieb.
div pozadie-obrázok: lineárny gradient (vrchol, červená, oranžová, žltá, zelená, modrá, indigo, fialová);
Tento úryvok vytvorí nasledujúcu dúhu.
Kompatibilita prehliadača
Bohužiaľ, v čase tohto písania, všetky súčasné prehliadače ešte nepodporujú štandardnú syntax. Stále potrebujú predponu predajcu (-WebKit-, -MOZ-, -pani- a -o-). Preto sa úplná syntax objavuje takto:
div pozadie-obrázok: -webkit-lineárny gradient (vrchol, # FF5A00 0%, # FFAE00 100%); pozadia-obrázok: -moz-lineárny gradient (vrchol, # FF5A00 0%, # FFAE00 100%); obrázok na pozadí: -ms-lineárny gradient (vrchol, # FF5A00 0%, # FFAE00 100%); obrázok na pozadí: -o-lineárny gradient (vrchol, # FF5A00 0%, # FFAE00 100%); obrázok na pozadí: lineárny gradient (vrchol, # FF5A00 0%, # FFAE00 100%);
Na druhej strane Internet Explorer, konkrétne verzia 9 a nižšia, je ďaleko od štandardnej verzie. Gradient v IE9 a nižšie sa deklaruje s filter, takže ak chceme na týchto prehliadačoch pridať gradient, musíme napísať niečo podobné;
div filter: progid: DXImageTransform.Microsoft.gradient (štartColorstr = # FF5A00, endColorstr = # FFAE00);
filter má svoje obmedzenia: po prvé nepovoľuje viac ako tri pridané farby a vytvorenie efektu transparentnosti je tiež trochu zložité - neumožňuje RGBA, ale IE filter použitie #ARGB;
div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 33FF5A00, endColorstr = # 33FFAE00);
Tu je nástroj, ktorý vám pomôže konvertovať RGBA na #ARGB.
- demonštrácie
- Stiahnuť zdroj
Písanie syntaxe rýchlejšie
Ako vidíte vyššie, aby sme zachovali kompatibilitu s gradientmi v prehliadačoch, musíme pridať ďalších päť riadkov kódov, ktoré sú neefektívne.
Existuje mnoho spôsobov, ako môžeme urobiť zjednodušenie úlohy; napríklad pomocou prefixu, Prefixr, LESS alebo Sass, ktoré pomáhajú pri kompilácii kódov, ale predovšetkým odporúčame použiť tento nástroj ColorZilla Gradient. Tento nástroj jednoducho vygeneruje všetky potrebné kódy na prechody, aby fungovali vo všetkých prehliadačoch.
Konečné slová
Dnes sme o vývoji gradientov veľa diskutovali, skúmali sme každú časť syntaxe, vytvárali transparentné efekty a zachovali kompatibilitu prehliadačov. Takže v tomto bode dúfame, že už máte lepšie pochopenie tejto témy.
Stále máme veľa vecí, na ktorých plánujeme preskúmať Gradienty CSS3 v našich budúcich príspevkoch, takže zostaňte naladení na Hongkiat.com. Na záver, ďakujem vám, že ste si prečítali tento príspevok, dúfame, že sa vám páčilo.
Ďalšie čítanie
- Bullet Proof krížový prehliadač RGBA pozadia - Lea Verou
- Obrázok CSS3 - W3.org
- Kedy môžem použiť gradienty CSS3 - CanIUse.com
