Kruhové a eliptické přechody CSS3 [Tipy CSS3]
Dnes budeme pokračovat v diskusi CSS3 Přechody. V předchozím příspěvku jsme vám ukázali, jak vytvořit Lineární gradienty. Tentokrát budeme pokrývat jejich příbuzného, Kruhové a eliptické přechody.
Syntaxe přechodu
Gradient v CSS3 je deklarován pomocí pozadí vlastnictví. To je pro lepší kompatibilitu, když musíme také přidat barva pozadí v jednom souboru pravidel tak, aby se vzájemně nekolidovaly. Pro vytvoření radiálního gradientu to jednoduše nazýváme radiální gradient () funkce. Ve funkci je třeba zahrnout čtyři hodnoty pro správné nastavení přechodu.
První hodnota definuje gradientu. Můžeme použít popisné klíčové slovo, jako je horní, dolní, středové a levé, nebo můžeme být také konkrétnější, 50% 50% pro nastavení gradientu ve středu nebo 0% 0% pro nastavení přechodu na začátek vlevo nahoře.
Druhá hodnota definuje tvar a velikost přechodu, Existují dva argumenty pro formování přechodů, nejprve elipsa která je výchozí a druhá je kruh.
A pro velikost gradientu, můžeme vybrat jeden z následujících šesti argumentů.
| Hodnoty | Popis |
|---|---|
nejbližší straně | Tvar gradientu se setkává se stranou krabice, která je nejblíže jejímu středu (pro kruhy) nebo splňuje jak vertikální, tak horizontální strany nejblíže středu (pro elipsy). |
nejbližší roh | Tvar gradientu je dimenzován tak, aby přesně odpovídal nejbližšímu rohu krabice od středu. |
nejvzdálenější | Podobně jako na nejbližší straně, s výjimkou tvaru, který je dimenzován tak, aby odpovídal straně krabice nejdále od jejího středu (nebo svislé a vodorovné strany). |
nejvzdálenějším rohu | Tvar gradientu je dimenzován tak, aby přesně odpovídal nejvzdálenějšímu rohu krabice od středu. |
obsahovat | Synonymum pro |
Pokrýt | Synonymum pro |
Zdroj tabulky: Mozilla Developer Network.
Konečně třetí a čtvrtý definují barevné kombinace. Zde je návod, jak zapisujeme syntaxi pro vytvoření Eliptický a tentokrát budeme používat Pokrýt pro velikost gradientu, takže se bude široce šířit a zakrývá nádobu;
tělo obrázek pozadí: radiální gradient (střed středu, kryt elipsy, # ffeda3, # ffc800);
Vytvořit Oběžník přechodu můžeme jednoduše udělat takto:
tělo obrázek pozadí: radiální gradient (střed středu, kruhový kryt, # ffeda3, # ffc800);
Jak název napovídá, tvar přechodu bude kruh.
Podpora prohlížeče
Všimněte si však, že všechny prohlížeče jsou stále v procesu poskytování plné podpory pro tuto funkci, takže stále potřebují předponu dodavatele. Tak, celá kompletní syntaxe, která bude fungovat ve všech moderních prohlížečích - IE10 +, Firefox 3.6+, Chrome 4.0+, Safari 4.0+ a Opera 11+ - bude vypadat něco takového;
tělo obrázek pozadí: radiální gradient (středové dno, kryt elipsy, # ffeda3, # ffc800); pozadí-obraz: -o-radiální gradient (středové dno, kryt elipsy, # ffeda3, # ffc800); pozadí-obraz: -ms-radiální gradient (středové dno, kryt elipsy, # ffeda3, # ffc800); pozadí-obraz: -moz-radiální gradient (středové dno, kryt elipsy, # ffeda3, # ffc800); pozadí-obraz: -webk-radiální-gradient (středové dno, kryt elipsy, # ffeda3, # ffc800);
Podívejte se na demo nebo si stáhněte zdroj, abyste si mohli hrát s přechody.
- Demo
- Stáhněte si zdroj
Závěrečná slova
Vytvoření radiálního gradientu CSS3 není tak těžké, jak si myslíte, a to zejména tehdy, když získáváte pomoc z těchto nástrojů pro generování kódu:
- Přechody Colorzilla
- Gradientoo
Radiální gradient je pouze jeden typ CSS3 gadients, budeme pokračovat v diskusi na toto téma v budoucích příspěvcích, takže zůstaňte naladěni na Hongkiat.com
