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ý".

    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 */

Určitě si řeknete, že by na to byl potřeba nějaký generátor ať víte jaký bude výsledek. A generátor na to opravdu je a to http://www.colorzilla.com/gradient-editor/

<< zpět