IE gradient

Status
Niet open voor verdere reacties.
F

Frenske123

Terugkerende gebruiker
Lid geworden
2 jul 2007
Berichten
1.267
Hoi,

IS het mogelijk voor IE7 8 en 9 een gradient te maken

Voorbeeld voor IE10 dat goed werkt:

Code: 
background-image: -ms-linear-gradient(left, #08428F 0%, #E4FF68 100%);

Van alles getest en geprobeerd, zonder goed resultaat onderstaande werkt aardig in IE7 maar gooit in 8 en 9 mijn site door elkaar, verder krijg ik onderstaande fouten in Css validator.

Code: 
background: linear-gradient(to right,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 );


Fouten
344 header poging een puntkomma te vinden voor de eigenschapnaam: voeg deze toe
344 header Eigenschap progid bestaat niet : DXImageTransform
344 header Parse Error DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 );
353 header Parse Error /* IE6-9 /* For Internet Explorer 8 */ /* IE 9- /* IE6-9 * ,GradientType=1 is van link naar rechts, 0 is van boven naar beneden*/ /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 );*/ }
356 .button poging een puntkomma te vinden voor de eigenschapnaam: voeg deze toe
356 .button Eigenschap progid bestaat niet : DXImageTransform
356 .button Parse Error DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fec848', endColorstr='#f87d1a');
357 .button Parse Error }

anders maar een afbeelding.
 
Laatst bewerkt:
Hoi, ik heb het zelf nog niet getest maar het volgende heb ik eens opgezocht en dat zou zo moeten werken (tekst is niet van mij):

Om een gradient toe te voegen in css voor Internet Explorer gebruik je de filter eigenschap.
Voorbeeld:

Code: 
#box {
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = '#a5b762', endColorstr = '#d6df23');
}

In Internet Explorer 7 kan het echter zijn dat dit niet werkt. Reden hiervoor kan zijn dat er geen hoogte voor het object gedefinieerd werd. Voeg dus een specifieke hoogte toe zet overflow op auto.

Voorbeeld:

Code: 
#box {
    overflow:auto;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a5b762', endColorstr='#d6df23');
}
 
Hoi damnsharp .

Bedankt voor de reactie, dit werkt goed !

groet, Frenske
 
Gebruik pie.htc voor handige css3 in oude IE.
Wat betreft gradient werkt linear-gradient goed in Pie. Net als radius, shadow, enz.

Ik gebruik Pie als class. Voorbeeldje met border-radius:
Code: 
.pie {
   behavior: url(http://www.domein.nl/scripts/pie/pie.htc);
}
.radius {
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}
Dan kun je dit overal gebruiken. Bijvoorbeeld:
Code: 
<div id="box" class="pie radius">
Wil je ook wat html5 in IE 7-8.
Zet dan in de <head> van je html:
Code: 
<!--[if lt IE 9]>
  <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

***Aanvulling:
Wil je ook nog de performance verbeteren en alle "grotere" files cachen, zet dan in je .htaccess:
Code: 
<IfModule mod_expires.c>
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf|htc)$">
ExpiresActive On
ExpiresDefault "access plus 1 year"
<IfModule mod_header.c>
Header set Cache-Control "public"
</IfModule>
</FilesMatch>
</IfModule>
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan