Jak na barevné přechody bez použití obrázků?
Tento problém řeší CSS3 přechody
Pokud chceme mít v nějakém bloku barevný přechod, tak není potřeba vytvářet obří obrázky s přechodem a doufat, že obrázek bude dostatečně velký rozměrem a zároveň dostatečně malý datově. Řešení se skrývá v CSS3 přechodech, které se snadno editují (přepíšete pár kódů barev a nemusíte předělávat celý obrázek), neřešíte datovou náročnost a fungují všude. Respektive tam, kde prohlížeč nepodporuje CSS3 tak daný přechod, níže uvedený kód, nahradí jednolitou barvou.
Příklad CSS kódy, který se přidané blloku, který má mít v pozadí barevný přechod. Kód není pouhý přechod z barva "A" do barvy "B", ale je "víceúrovňový".1 2 3 4 5 6 7 8 | background: #000066;background: -moz-linear-gradient(left, #feffff 0%, #000058 20%, #000058 80%, #ffffff 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, right top, color-stop(0%,#feffff), color-stop(20%,#000058), color-stop(80%,#000058), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(left, #feffff 0%,#000058 20%,#000058 80%,#ffffff 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(left, #feffff 0%,#000058 20%,#000058 80%,#ffffff 100%); /* Opera 11.10+ */background: -ms-linear-gradient(left, #feffff 0%,#000058 20%,#000058 80%,#ffffff 100%); /* IE10+ */background: linear-gradient(to right, #feffff 0%,#000058 20%,#000058 80%,#ffffff 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */ |
Nejnovější články
Jak získat časové razítko daného data?
PHP - Ostatní
Jednoduchá rotace obrázků přes jQuery.
JavaScript - Úvod do JavaScriptu
Jak se pracuje s Cookies pomocí Javascriptu?
JavaScript - Příklady v JavaScriptu
Jaký je rozdíl mezi vlastnostmi readonly a disabled?
(x) HTML - Úvod do HTML
Generátor CSS trojúhelníků
CSS - Základy CSS