Keskustelu: Nettisivujen teko: CSS: Gradient sivuille

Moro!

Miten saisin gradientit menemään siten, että gradient ei mene vain yhdestä väristä toiseen väriin, vaan menisi esimerkiksi näin:

x = pääväri, mikä on divin keskiosassa, mihin teksti tulee
y = gradientti fadeutuu taustakuvaan, transparent

Normaalisti gradient menisi näin:

xxxxxxyyyy

Miten saisin tehtyä näin:

yyyyxxxxxxyyyy

Käyttämäni koodi on nyt:

div {
    background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    background-image: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(255, 255, 255, 1)), to(rgba(255, 255, 255, 0)));
    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    background-image: -o-linear-gradient(left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    background-image: linear-gradient(left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255, 255, 255, 1)', endColorstr='rgba(255, 255, 255, 0)', GradientType=1);
    padding: 20px;
}

Mutta se menee tuon xxy-esimerkin mukaan (ensimmäinen).

Kiitos jo nyt :)

PS. Huomasin, että käytän tässä tekstissä aika paljon "gradient (+taivutukset)", oikeastihan tuo on liukuväri, jos jotain haittaa... ;)

Laita värin perään prosenttiluku, joka kertoo, missä kohti kyseistä väriä pitäisi olla, ja laita lisää värejä. Esimerkiksi tässä on vasemmalla liuku läpinäkyvästä mustaan, keskellä mustaa ja lopussa liuku takaisin läpinäkyvään:

div {
	background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 100%);
}

Gradientistasi puuttuu myös to-sana.

Ehkä tästä on apua: Ultimate CSS Gradient Generator.

Enää ei tarvitse laittaa ihan tuollaista litanjaa syntakseja, tuki on varsin hyvällä mallilla, joten riittää -webkit- ja normaali, vanhemmille IE-versioille voi toki harkita filterin käyttöä. Vanhan webkit-syntaksin lisääminen on varsin vapaaehtoista nykyisellään, että standardien mukaan kannattaa mennä :)