web-dev-qa-db-fra.com

Gradient linéaire croisé CSS3

Quelles seront Opera et IE alternatives du code suivant?

background-image: -webkit-gradient(linear, right top, left bottom, from(#0C93C0), to(#FFF));
background-image: -moz-linear-gradient(right, #0C93C0, #FFF);

Note, j'ai testé les règles suivantes. Tous les navigateurs les prennent en charge. Mais ce sont des gradients verticaux. Quelqu'un peut-il m'aider à les modifier en horizontaux?

background-image: -webkit-linear-gradient(top, #0C93C0, #FFF); 
background-image:    -moz-linear-gradient(top, #0C93C0, #FFF); 
background-image:     -ms-linear-gradient(top, #0C93C0, #FFF); 
background-image:      -o-linear-gradient(top, #0C93C0, #FFF); 
background-image:         linear-gradient(top, #0C93C0, #FFF);
css3cross-browserlinear-gradientscss
33
Tural Ali
background-image:     -ms-linear-gradient(right, #0c93C0, #FFF); 
background-image:      -o-linear-gradient(right, #0c93C0, #FFF);

Toutes les propriétés CSS expérimentales obtiennent un préfixe:

  • -webkit- pour les navigateurs Webkit (chrome, Safari)
  • -moz- pour FireFox
  • -o- pour Opera
  • -ms- pour Internet Explorer
  • pas de préfixe pour une implémentation conforme à la spécification.

Utilisation top right au lieu de right, si vous voulez un angle différent. Utilisez left ou right si vous voulez un dégradé horizontal.

Voir également:

Internet Explorer

Pour <IE10, vous devrez utiliser:

/*IE7-*/ filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0);
/*IE8+*/ -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#0c93c0', endColorStr='#FFFFFF', GradientType=0)";

filter fonctionne pour IE6, IE7 (et IE8), tandis qu'IE8 recommande le -ms-filter (la valeur doit être indiquée) au lieu de filter. Une documentation plus détaillée pour Microsoft.Gradient peut être trouvé à: http://msdn.Microsoft.com/en-us/library/ms532997 (v = vs.85) .aspx

-ms-filter syntaxe

Puisque vous êtes fan d'IE, je vais vous expliquer le -ms-filter syntaxe:

-ms-filter: progid:DXImageTransform.Microsoft.Gradient(
     startColorStr='#0c93c0', /*Start color*/
     endColorStr='#FFFFFF',   /*End color*/
     GradientType=0           /*0=Vertical, 1=Horizontal gradient*/
);

Au lieu d'utiliser une couleur RVB HEX, vous pouvez également utiliser un format de couleur ARGB. A signifie alpha, FF signifie opaque, tandis que 00 signifie transparent. La partie GradientType est facultative, l'expression entière est insensible à la casse.

43
Rob W

Voici un exemple, qui fonctionne avec Opera, Internet Explorer et de nombreux autres navigateurs Web. Si un navigateur ne prend pas en charge les dégradés, il affichera une couleur d'arrière-plan normale.

background: #f2f5f6;
background: -moz-linear-gradient(top, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f5f6), color-stop(37%,#e3eaed), color-stop(100%,#c8d7dc));
background: -webkit-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%);
background: -o-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%);
background: -ms-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0 );
background: linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%);

Je l'ai volé sur ce site Web. Microsoft a construit son propre générateur ici .

11
Robin

Avez-vous essayé ltimate CSS Gradient Generator de Colorzilla ?

3
user123444555621

La réponse de Rob W est complète, en même temps verbeuse. Par conséquent, je voudrais opter pour un résumé prenant en charge les navigateurs actuels fin 2014, tout en garantissant certains rétrocompatibilité en même temps, en laissant de côté la capacité invalide d'IE6/7 de restituer un dégradé linéaire et les premiers Webkit (Chrome1-9, Saf4-5 manière spéciale (-webkit-gradient( linear, left top, left bottom, color-stop( 0, #0C93C0 ), color-stop( 100%, #FFF ) );)

Syntaxe des normes a changé du début de la position du gradient à to direction, par ex. background-image: linear-gradient( to bottom, #0C93C0, #FFF );

CSS largement pris en charge et facile à lire:

background-color: #8BCCE1;                                             /* fallback color (eg. the gradient center color), if gradients not supported; you could also work with an gradient image, but mind the extra HTTP-Request for older browsers */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorStr=#0C93C0, EndColorStr=#FFFFFF )"; /* IE8-9, ColorZilla Ultimate CSS Gradient Generator uses SVG bg image for IE9 */

background-image: -webkit-linear-gradient(       top, #0C93C0, #FFF ); /* Chrome10-25, Saf5.1-Saf6, iOS -6.1, Android -4.3 */
background-image:    -moz-linear-gradient(       top, #0C93C0, #FFF ); /* Fx3.6-15 */
background-image:      -o-linear-gradient(       top, #0C93C0, #FFF ); /* Op11.10-12.02 */
background-image:         linear-gradient( to bottom, #0C93C0, #FFF ); /* W3C, Fx16+, Chrome26+, IE10+, Op12.10+, Saf6.1+ */

Un fait secondaire intéressant est que la plupart des articles de blog et des outils de gradient de navigateur sur le Web, comme f.e. " ltimate CSS Gradient Generator " de ColorZilla inclut la valeur -ms-linear-gradient préfixée par le fournisseur MS.
Il est pris en charge à partir d'Internet Explorer 10 Consumer Preview sur. Mais lorsque vous incluez la valeur standard linear-gradient, Internet Explorer 10 Release Preview le rend de manière appropriée.
Donc, en incluant -ms-linear-gradient et la manière standard, avec -ms, vous ne vous adressez en fait qu'à IE10 Consumer Preview, ce qui revient à nobody dans votre audience.

2
Volker E.

j'ai la solution pour presque tout!

/* Safari 4+, Chrome 1-9 */                         background-image:   -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000000), to(#FFFFFF));
/* Safari 5.1+, Mobile Safari, Chrome 10+ */    background-image:   -webkit-linear-gradient(top, #000000, #FFFFFF);
/* Firefox 3.6+ */                                      background-image:   -moz-linear-gradient(top, #000000, #FFFFFF);
/* IE 7-*/                                                  filter:                 progid:DXImageTransform.Microsoft.Gradient(startColorStr='#000000', endColorStr='#FFFFFF', GradientType=0);
/* IE 8+*/                                                  -ms-filter:             "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#000000', endColorStr='#FFFFFF', GradientType=0)";
/* IE 10+ */                                                background-image:   -ms-linear-gradient(top, #000000, #FFFFFF);
/* Opera 11.10+ */                                      background-image:   -o-linear-gradient(top, #000000, #FFFFFF);
/* fallback image                                       background-image:   url(images/fallback-gradient.png);*/
/* fallback/image non-cover color */                background-color:   #000000;

J'espère que cela pourrait aider certaines personnes :).

2
Ger989