CSS3 Lineární přechody [Tipy CSS3]
Spád je skvělý doplněk barev v CSS3. Namísto přidání pouze jedné barvy můžeme nyní přidat více barevných kombinací v jednom bloku deklarací, aniž bychom se spoléhali na obrázky, což by mohlo snížit požadavek HTTP na našich webových stránkách, což umožní rychlejší načítání webových stránek..
Pokud jste hráli s gradienty v CSS3, jste pravděpodobně obeznámeni se dvěma metodami: radiální a lineární gradient. Dnešní příspěvek bude o tom druhém.
Vytváření přechodů
Vzhledem k tomu, že spec říká, že přechody v CSS3 je obraz, nemá žádnou speciální vlastnost jako je přidávání nových funkcí, takže je deklarován pomocí pozadí místo toho.
Podíváme-li se na úplnou syntaxi gradientu, vypadá to trochu přeplněný, což by mohlo u některých lidí vést k záměně.
div background-image: -webkit-lineární gradient (horní, # FF5A00 0%, # FFAE00 100%); pozadí-obraz: -moz-lineární gradient (horní, # FF5A00 0%, # FFAE00 100%); pozadí-obraz: -ms-lineární gradient (horní, # FF5A00 0%, # FFAE00 100%); pozadí-obraz: -o-lineární gradient (horní, # FF5A00 0%, # FFAE00 100%); background-image: lineární gradient (horní, # FF5A00 0%, # FFAE00 100%);
Pojďme kopat do každé části syntaxe jeden po druhém, aby se věci vyjasnily.
Nejprve se deklaruje lineární gradient lineární gradient () funkce. Funkce má tři primární hodnoty. První hodnota definuje počáteční pozici přechodu. Můžete použít například popisné klíčové slovo horní spuštění gradientu tekoucího z horní;
div background-image: lineární gradient (horní, # FF5A00, # FFAE00);
Výše uvedený úryvek je oficiální verzí W3C pro vytvoření přechodů. Je to vlastně jednodušší a zcela samo-vysvětlující a také vytvoří následující gradient.
Můžete také použít dno dělat opak, nebo jinak že jo a vlevo, odjet.
Můžeme také vytvořit diagonální gradient pomocí úhlu jako výchozí pozice přechodu. Zde je příklad:
div background-image: lineární gradient (45deg, # FF5A00, # FFAE00);
Výše uvedený úryvek vytvoří následující barevný gradient:
Druhá hodnota funkce řekne první barva informací poloha zastavení který je uveden v procentech. Pozice zastavení je ve skutečnosti volitelná; prohlížeč je dostatečně chytrý, aby určil správnou pozici, takže když neurčíme zastavení první barvy, prohlížeč bude trvat 0% jako výchozí.
A další hodnotou je druhá barva kombinace. Funguje to stejně jako předchozí hodnota, pouze pokud je to poslední aplikovaná barva a my neuvádíme poloha zastavení, hodnota 100% jako výchozí. Podívejme se nyní na níže uvedený příklad:
div background-image: lineární gradient (horní, # FF5A00 0%, # FFAE00 100%);
Výše uvedený úryvek vytvoří gradient jako to, co jsme viděli dříve (bez rozdílu), ale nyní určíme pozici zastavení barev;
Nyní změníme barevné zastavení, a tentokrát upřesníme 50% pro první barvu a 51% pro druhou barvu a podívejme se, jak to dopadá;
div background-image: lineární gradient (horní, # FF5A00 50%, # FFAE00 51%);
Průhlednost
Vytvoření průhlednost v gradientu. K vytvoření efektu musíme překládat barvu hex do rgba a snižte alfa kanál.
div pozadí-obraz: lineární gradient (top, rgba (255,90,0,0,2), rgb (255,174,0,0,2));
Výše uvedený úryvek sníží intenzitu barev o 20%, a gradient bude vypadat takto:
Více barev
Chcete-li přidat více barev, přidejte barvy vedle jiného s oddělovačem čárky a nechte prohlížeč určit každou pozici zastavení barev.
div background-image: lineární gradient (horní, červená, oranžová, žlutá, zelená, modrá, indigo, fialová);
Výše uvedený úryvek vytvoří následující duhu.
Kompatibilita prohlížeče
Bohužel, v době psaní tohoto článku, všechny současné prohlížeče dosud nepodporují standardní syntaxi. Stále potřebují předponu dodavatele (-webkit-, -moz-, -slečna- a -Ó-). Proto se celá syntaxe zobrazuje takto:
div background-image: -webkit-lineární gradient (horní, # FF5A00 0%, # FFAE00 100%); pozadí-obraz: -moz-lineární gradient (horní, # FF5A00 0%, # FFAE00 100%); pozadí-obraz: -ms-lineární gradient (horní, # FF5A00 0%, # FFAE00 100%); pozadí-obraz: -o-lineární gradient (horní, # FF5A00 0%, # FFAE00 100%); background-image: lineární gradient (horní, # FF5A00 0%, # FFAE00 100%);
Na druhou stranu, Internet Explorer, konkrétně verze 9 a nižší, je daleko od standardu. Gradient v IE9 a níže je deklarován filtr, takže pokud chceme přidat gradient na těchto prohlížečích, musíme něco takového napsat;
div filtr: progid: DXImageTransform.Microsoft.gradient (startColorstr = # FF5A00, endColorstr = # FFAE00);
filtr má svá omezení: za prvé neumožňuje přidání více než tří barev a vytvoření efektu průhlednosti je také trochu složitější - neumožňuje rgba, ale IE filtr použití #ARGB;
div filtr: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 33FF5A00, endColorstr = # 33FFAE00);
Zde je nástroj, který vám pomůže převést rgba na #ARGB.
- Demo
- Stáhněte si zdroj
Rychlejší zápis syntaxe
Jak vidíte výše, pro zachování kompatibility přechodu mezi prohlížeči je třeba přidat pět dalších řádků kódů, které jsou neefektivní.
Existuje mnoho způsobů, jak tento úkol zjednodušit; například pomocí Prefix-free, Prefixr, LESS nebo Sass, které vám pomohou kompilovat kódy, ale především doporučujeme použít tento nástroj ColorZilla Gradient. Tento nástroj jednoduše vygeneruje všechny potřebné kódy pro přechody do všech prohlížečů.
Závěrečná slova
Dnes jsme hodně diskutovali o vytváření přechodů, podívali jsme se do každé části syntaxe, vytvořili transparentní efekty a zachovali kompatibilitu prohlížeče. V tomto bodě tedy doufáme, že již máte k tomuto tématu lepší porozumění.
Stále ještě máme spoustu věcí, které bychom chtěli prozkoumat CSS3 Přechody v našich budoucích příspěvcích, tak zůstaňte naladěni na Hongkiat.com. Konečně, děkuji vám za čtení tohoto příspěvku, doufáme, že se vám to líbilo.
Další čtení
- Bullet Proof Cross Browser RGBA pozadí - Lea Verou
- CSS3 Obrázek - W3.org
- Kdy mohu použít přechody CSS3 - CanIUse.com
