Toon posts:

Achtergrond gradient in Css voor Opera

Pagina: 1
Acties:

Onderwerpen


Acties:
  • 0 Henk 'm!

Verwijderd

Topicstarter
Hallo :)
Weet iemand hoe je een gradient in Css kan maken voor Opera
In FF, IE ,Safari en Chroom is er geen probleem
Vb Link De bedoeling is dat er in de Tabs een gradient komt de achtergrond van de site is met een image.jpeg gemaakt

de Css die ik gebruik is
#gradient{
background:-moz-linear-gradient(18% 100% 90deg,#F5F4EB, #FCF9F5, #248BC7 100%);
background: -webkit-gradient(linear, 0 0,0 100%, from(#248BC7), color-stop(40%, #FCF9F5), to(#F5F4EB));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#C0248BC7 ,
endColorstr=#00FFFFFF);
}
groetjes michelscot 8)

[ Voor 3% gewijzigd door Verwijderd op 13-03-2011 11:27 ]


Acties:
  • 0 Henk 'm!

  • Peter
  • Registratie: Januari 2005
  • Laatst online: 13-09 17:10
Een makkelijke oplossing is SVG, kijk hier eens.

Ietwat meer toekomstgericht: WebKit gaat van de "-webkit-gradient" syntax afstappen en heeft, sinds Chrome 10, ondersteuning voor de syntax uit CSS Image Values. Ook Opera 11.10 heeft hier ondersteuning voor. Om zowel nieuwe als oude browsers te ondersteunen, zou ik iets als dit gebruiken:

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
.selector {
    background-color: #F5F4EB;
    background-image: url(opera-gradient.svg);
    background-image: -webkit-gradient(linear, 0 0,0 100%, from(#248BC7), color-stop(40%, #FCF9F5), to(#F5F4EB));
    background-image: -webkit-linear-gradient(18% 100% 90deg,#F5F4EB, #FCF9F5, #248BC7 100%);
    background-image: -moz-linear-gradient(18% 100% 90deg,#F5F4EB, #FCF9F5, #248BC7 100%);
    background-image: -ms-linear-gradient(18% 100% 90deg,#F5F4EB, #FCF9F5, #248BC7 100%);
    background-image: -o-linear-gradient(18% 100% 90deg,#F5F4EB, #FCF9F5, #248BC7 100%);
    background-image: linear-gradient(18% 100% 90deg,#F5F4EB, #FCF9F5, #248BC7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#C0248BC7 ,
endColorstr=#00FFFFFF);
}


Ja, dit is erg verbose, maar wel gericht op zowel het verleden als de toekomst :)

[ Voor 4% gewijzigd door Peter op 13-03-2011 11:39 ]