css3 gradient
code ziet er nu zo uit
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* IE10 */
background-image: -ms-linear-gradient(bottom left, #382F30 0%, #9C9194 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(bottom left, #382F30 0%, #9C9194 100%);
/* Opera */
background-image: -o-linear-gradient(bottom left, #382F30 0%, #9C9194 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0, #382F30), color-stop(1, #9C9194));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(bottom left, #382F30 0%, #9C9194 100%);
/* Proposed W3C Markup */
background-image: linear-gradient(bottom left, #382F30 0%, #9C9194 100%);
background-image: -ms-linear-gradient(bottom left, #382F30 0%, #9C9194 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(bottom left, #382F30 0%, #9C9194 100%);
/* Opera */
background-image: -o-linear-gradient(bottom left, #382F30 0%, #9C9194 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0, #382F30), color-stop(1, #9C9194));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(bottom left, #382F30 0%, #9C9194 100%);
/* Proposed W3C Markup */
background-image: linear-gradient(bottom left, #382F30 0%, #9C9194 100%);
Code (php)
1
2
3
4
5
6
2
3
4
5
6
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));
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.
Ze geven je eerst de CSS code:
Code (php)
1
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:
Code (php)
1
2
3
4
5
2
3
4
5
filter: progid:DXImageTransform.Microsoft.gradient(
enabled='true',
startColorstr=#550000FF,
endColorstr=#55FFFF00
);
enabled='true',
startColorstr=#550000FF,
endColorstr=#55FFFF00
);
Lijkt me dat je hieruit wel kan opmaken hoe het werkt? En als je even googled op ie net renderer 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.
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
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 */
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 */
/* 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%);
http://www.colorzilla.com/gradient-editor/
Kan je zelf je kleur bepalen enzovoorts getest met alle browsers en het klopt altijd behalve < IE 8
Toevoeging op 28/03/2012 13:44:37:
@jan willem een hele leuke website zo op het eerste gezicht! ik heb hem gelijk gebookmarked!