css3 gradient

Door een normale background in te stellen voor IE:

background: #33c; // een default color als er geen gradients zijn
background-image: -webkit-linear-gradient(bottom, #33c, #c33);
background-image: -moz-linear-gradient(bottom, #33c, #c33);
background-image: -ms-linear-gradient(bottom, #33c, #c33);
background-image: -o-linear-gradient(bottom, #33c, #c33);
background-image: -webkit-gradient(linear, bottom left, top left, from(#33c), to(#c33));

Zie ook: http://css3please.com

En tevens is dit 1 van die CSS3 features die is afgepakt van de goede IE filters, dus als je een filter gebruikt, Gradient Filter om precies te zijn, werkt het ook in IE.

ik snap weinig van die gradient filter en ik kan ook niets uittesten omdat ik op macOsX werk. kan je misschien voor mij het IE gedeelte maken als je tijd/beschikking tot IE hebt?

Zo moeilijk is dat filter toch niet?

Ze geven je eerst de CSS code:

filter:progid:DXImageTransform.Microsoft.Gradient(sProperties)

Vervolgens zeggen ze, voor sProperties kun je het volgende invullen. En dan krijg je een tabel met de properties te zien.

Vervolgens geven ze je zelfs een voorbeeld:

filter: progid:DXImageTransform.Microsoft.gradient(
                 enabled='true',
                 startColorstr=#550000FF, 
                 endColorstr=#55FFFF00
              );

Lijkt me dat je hieruit wel kan opmaken hoe het werkt? En als je even googled op [google]ie net renderer[/google] kom je vanzelf op een tool uit die je laat zien hoe het in IE eruit ziet. En als dat niet lukt heb je altijd browsershots van Adobe nog.

Het is dus deze code:

background: #382f30; /* Old browsers */
background: -moz-linear-gradient(top,  #382f30 0%, #9c9194 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#382f30), color-stop(100%,#9c9194)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #382f30 0%,#9c9194 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #382f30 0%,#9c9194 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #382f30 0%,#9c9194 100%); /* IE10+ */
background: linear-gradient(top,  #382f30 0%,#9c9194 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#382f30', endColorstr='#9c9194',GradientType=0 ); /* IE6-9 */

ik krijg nu maar op de helft van de pagina een gradient. hoort dit? ik neem aan van niet toch.. hoe kan ik dit oplossen?

Probeer deze eens:

/* IE10 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#382f30', endColorstr='#9c9194',GradientType=0 ); /* IE6-9 */

/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #382F30 0%, #9C9194 100%);

/* Opera */
background-image: -o-linear-gradient(top, #382F30 0%, #9C9194 100%);

/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #382F30), color-stop(1, #9C9194));

/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #382F30 0%, #9C9194 100%);

/* Proposed W3C Markup */
background-image: linear-gradient(top, #382F30 0%, #9C9194 100%);

Ik heb deze in mijn favorite staan voor zulke gevallen:
http://www.colorzilla.com/gradient-editor/

Kan je zelf je kleur bepalen enzovoorts getest met alle browsers en het klopt altijd behalve < IE 8

@youri sorry ik had het niet goed uitgelegd.. alleen IE showde deze niet goed maar dat heb ik zelf opgelost ik heb dat stukje ipv in de body class te zetten in een html class gezet en hij deed het perfect!

[size=xsmall]Toevoeging op 28/03/2012 13:44:37:[/size]

@jan willem een hele leuke website zo op het eerste gezicht! ik heb hem gelijk gebookmarked!