01 z 04
Vytváranie priečnych prehliadačov lineárnych prechodov pomocou CSS3
Lineárne prechody
Najbežnejší typ gradientu, ktorý uvidíte, je lineárny gradient dvoch farieb. To znamená, že sa gradient bude pohybovať v priamke postupne meniacou sa od prvej farby na druhú pozdĺž tejto čiary. Obrázok na tejto stránke zobrazuje jednoduchý prechod od 999 (tmavošedá) až po #fff (biela).
Lineárne prechody sú najjednoduchšie definované a majú najväčšiu podporu v prehliadačoch. Lineárne gradienty CSS3 sú podporované v systémoch Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+ a Safari 4+. Aplikácia Internet Explorer môže pridať gradienty pomocou filtra a podporiť ich späť na IE 5.5. Toto nie je CSS3, ale je to možnosť pre kompatibilitu medzi rôznymi prehliadačmi.
Keď definujete sklon, musíte definovať niekoľko rôznych vecí:
- Aký typ gradientu je lineárny alebo radiálny
- Kde by mal gradient začať
- Tam, kde by sa gradient mal zastaviť
- Aké farby sú v gradiente a kde by mali začať a zastavovať
Ak chcete definovať lineárne gradienty pomocou CSS3, napíšete:
lineárny gradient ( uhol alebo bok alebo roh , stop farieb, stop farieb )
- Najprv definujete typ gradientu s názvom linear- gradient.
- Potom definujete začiatočné a zastavovacie body prechodu v jednom z dvoch spôsobov: uhol línie v stupňoch od 0 do 359, pričom 0 stupňov smeruje hore. Alebo pomocou funkcie "bočná alebo rohová", napríklad ľavá, pravá, spodná a horná. Tieto informácie budú vysvetlené podrobnejšie na nasledujúcej strane. Ak ich necháte, gradient bude prúdiť zhora do spodnej časti elementu.
- Potom definujete farebné zastávky. Definujete farebné zastávky s farebným kódom a voliteľným percentom. Percento udáva prehliadaču, kde na riadku začína alebo končí táto farba. Predvolené je umiestniť farby rovnomerne pozdĺž čiary. Ďalšie informácie o zastavení farieb nájdete na strane 3.
Ak chcete definovať vyššie uvedený gradient pomocou CSS3, napíšeme:
lineárny gradient (vľavo, # 999999 0%, #ffffff 100%);
A nastaviť to ako pozadie DIV píšete:
div {
obrázok na pozadí: lineárny gradient (vľavo, # 999999 0%, #ffffff 100%;
}
Rozšírenia prehliadača pre lineárne prechody CSS3
Aby ste získali sklon k práci s viacerými prehliadačmi, musíte pre väčšinu prehliadačov používať rozšírenia prehliadača a filter pre Internet Explorer 9 a nižšie (vlastne 2 filtre). Všetky z nich majú rovnaké prvky na definovanie vášho prechodu (s výnimkou toho, že v IE môžete definovať len 2-farebné prechody).
Filtre spoločnosti Microsoft a rozšírenie - Internet Explorer je najnáročnejšou podporou, pretože na podporu rôznych verzií prehliadača potrebujete tri rôzne riadky. Ak chcete získať vyššie uvedený šedý až biely gradient, napíšete:
/ * IE 5,5-7 * /
filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
/ * IE 8-9 * /
-ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";
/ * IE 10 * /
-ms-lineárny gradient (vľavo, # 999999 0%, #ffffff 100%);
Mozilla Extension -The -moz- extension funguje ako vlastnosť CSS3, len s príponou -moz-. Ak chcete získať vyššie uvedený prechod pre Firefox, napíšte:
-moz-lineárny gradient (vľavo, # 999999 0%, #ffffff 100%);
Opera Extension -The -o- rozšírenie pridá gradienty do Opera 11.1+. Ak chcete získať vyššie uvedený gradient, napíšte:
-o-lineárny gradient (vľavo, # 999999 0%, #ffffff 100%);
Webkit Extension -The -webkit-extension funguje veľa ako vlastnosť CSS3. Ak chcete definovať vyššie uvedený prechod pre Safari 5.1 alebo Chrome 10+, napíšte:
-webkit-linear-gradient (vľavo, # 999999 0%, #ffffff 100%);
K dispozícii je aj staršia verzia rozšírenia Webkit, ktorá funguje v prehliadači Chrome 2+ a Safari 4+. V tomto definujete typ gradientu ako hodnotu skôr než v názve vlastníka. Ak chcete získať šedý až biely gradient s týmto rozšírením, napíšte:
-webkit-gradient (lineárny, ľavý horný, pravý vrchný, farebný stop (0%, # 999999), farebný stop (100%, # ffffff));
CSS kód CSS3 s lineárnym gradientom
Ak chcete získať úplnú podporu pre viacerých prehliadačov, aby ste získali gradient šedej na bielu, mali by ste najskôr zahrnúť núdzovú farebnú farbu pre prehliadače, ktoré nepodporujú gradienty, a poslednou položkou by mal byť štýl CSS3 pre prehliadače, ktoré sú plne kompatibilné. Takže píšete:
pozadie: # 999999;
pozadie: -moz-linear-gradient (vľavo, # 999999 0%, #ffffff 100%);
pozadie: -webkit-gradient (lineárny, ľavý horný, pravý vrchol, farebný stop (0%, # 999999), farebný stop (100%, # ffffff));
pozadie: -webkit-linear-gradient (vľavo, # 999999 0%, #ffffff 100%);
pozadie: -o-lineárny gradient (vľavo, # 999999 0%, #ffffff 100%);
pozadie: -ms-lineárny gradient (vľavo, # 999999 0%, #ffffff 100%);
filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
pozadie: lineárny gradient (vľavo, # 999999 0%, #ffffff 100%);
Nasledujúce stránky v tomto návode vysvetlia podrobnejšie časti sklonu a posledná stránka vás nasmeruje na nástroj, ktorý je vynikajúcim spôsobom na automatické vytvorenie gradientov CSS3.
Pozrite si tento lineárny gradient v akcii pomocou CSS.
02 z 04
Vytvorenie diagonálnych prechodov - uhol sklonu
Začiatočné a dorazové body určujú uhol sklonu. Väčšina lineárnych gradientov je zhora nadol alebo zľava doprava. Je však možné vytvoriť gradient, ktorý sa pohybuje na diagonálnej línii. Obraz na tejto stránke zobrazuje jednoduchý gradient, ktorý sa pohybuje v uhle 45 ° v celom obraze sprava doľava.
Úhly na definovanie línie prechodov
Uhol je čiara na imaginárnom kruhu v strede prvku. 0deg bodov nahor, 90deg bodov vpravo, 180deg bodov dole a 270deg bodov vľavo. Môžete definovať ľubovoľný uhol od 0 do 359 stupňov.
Mali by ste si všimnúť, že na námestí sa uhol 45 stupňov posúva z ľavého horného rohu do pravého dolného rohu, avšak v obdĺžniku sú začiatočné a koncové body mierne mimo tvar, ako vidíte na obrázku.
Častejším spôsobom, ako definovať diagonálny prechod, je vymedziť roh, ako je pravá vpravo a prechod sa presunie z tohto rohu do opačného rohu. Počiatočnú pozíciu môžete definovať nasledujúcimi kľúčovými slovami:
- top
- správny
- dno
- ľavý
- centrum
Môžu byť kombinované tak, aby boli konkrétnejšie, napríklad:
- hore vpravo
- hore v ľavo
- top center
- vpravo dole
- dole vľavo
- dole stred
- doprava
- v strede vľavo
Tu je CSS pre gradient podobný tomu, ktorý je na obrázku, z červeného na bielu sa pohybuje z pravého horného rohu do ľavého dolného rohu:
pozadie: ## 901A1C;
obrázok na pozadí: -moz-lineárny gradient (vpravo hore, # 901A1C 0%, # FFFFFF 100%);
pozadie-obrázok: -webkit-gradient (lineárny, pravý horný, ľavý spodný, farebný stop (0, # 901A1C), farebný stop (1, #FFFFFF));
pozadie: -webkit-lineárny gradient (hore hore, # 901A1C 0%, #ffffff 100%);
pozadie: -o-lineárny gradient (vpravo hore, # 901A1C 0%, #ffffff 100%);
pozadie: -ms-lineárny gradient (vpravo hore, # 901A1C 0%, #ffffff 100%);
pozadie: lineárny gradient (vpravo hore, # 901A1C 0%, #ffffff 100%);
Možno ste si všimli, že v tomto príklade neexistujú žiadne filtre IE. Je to preto, lebo IE umožňuje iba dva typy filtrov: hore dole (predvolené) a zľava doprava (s prepínačom GradientType = 1).
Pozrite sa na tento diagonálny lineárny gradient v akcii pomocou CSS.
03 z 04
Farba sa zastaví
Pomocou lineárnych prechodov CSS3 môžete do gradientu pridať viacero farieb, aby ste vytvorili ešte efektívnejšie efekty. Ak chcete pridať tieto farby, pridajte ďalšie farby do konca svojho vlastníctva, oddelené čiarkami. Mali by ste zaradiť, kde by na riadku mali začínať alebo končiť aj farby.
Filtre programu Internet Explorer podporujú iba dve farebné zarážky, takže pri vytváraní tohto gradientu by ste mali obsahovať len prvú a druhú farbu, ktorú chcete zobraziť.
Tu je CSS pre vyššie uvedený 3-farebný gradient:
pozadie: #ffffff;
pozadie: -moz-lineárny gradient (vľavo, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
pozadie: -webkit-gradient (lineárny, ľavý horný, pravý vrchný, farebný stop (0%, # ffffff), farebný stop (51%, # 901A1C), farebný stop (100%, ffffff));
pozadie: -webkit-linear-gradient (ľavý, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
pozadie: -o-lineárny gradient (ľavý, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
pozadie: -ms-lineárny gradient (ľavý, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
pozadie: lineárny gradient (ľavý, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Pozrite sa na tento lineárny gradient s troma farebnými zastávkami v akcii pomocou CSS.
04 z 04
Zjednodušiť stavbu prechodu
Existujú dve stránky, ktoré vám odporúčam pomôcť pri vytváraní sklonov, každý z nich má výhody a nevýhody pre nich, nenašiel som gradient staviteľ, ktorý robí všetko zatiaľ.
Konečný generátor gradientov CSS
Tento generátor gradientov je veľmi populárny, pretože sa podobne ako gradient stavitelia v programoch, ako je Photoshop. Tiež sa mi páči, pretože vám dáva všetky rozšírenia CSS, nielen Webkit a Mozilla. Problém s týmto generátorom spočíva v tom, že podporuje iba horizontálne a vertikálne gradienty. Ak chcete robiť diagonálne prechody, musíte prejsť na druhý generátor, ktorý odporúčam.
Generátor gradientu CSS3
Tento generátor mi dal trochu dlhšie na pochopenie ako ten prvý, ale podporuje zmenu smeru na uhlopriečku.
Ak poznáte iný generátor gradientov CSS, ktorý sa vám páči lepšie ako tieto, oznámte nám to .