Je voudrais obtenir un gradient en CSS (peut-être via compas ) qui fonctionne dans chaque navigateur majeur , y compris IE7 +. Y a-t-il un moyen facile de le faire (sans écrire beaucoup de code, et sans fichier image personnalisé)?
J'ai regardé mixage de gradient , mais cela ne fonctionne pas avec Internet Explorer.
Des idées? (Il n'a pas besoin d'être compas - je suis heureux d'installer autre chose.)
EDIT: Ce que j'essaie d'obtenir est un cadre (comme Compass?) qui génère du code comme ce que Blowsie a affiché qui a été testé sur des navigateurs. Fondamentalement comme le mixin gradient compass i mentionné, mais avec le soutien IE. (Je me méfie un peu de mon propre mixage de SCSS et de coller dans des blocs comme le code de Blowsie, car je ne l'ai pas testé et ne pas avoir les ressources nécessaires pour le faire.)
3 Réponses :
tandis que les gradients sont de complexité limité, ils sont suffisamment complexes pour exiger ce que vous envisageriez "beaucoup de code".
considérer:
Donc, non, sans plug-in qui fait tout cela pour vous, il nécessiterait un peu de code, ou une image.
En fait, je ne pense pas que vous devez avoir du code HTML pour cela. Voir, par exemple, webdesignerwall.com/tatudials/cross-browser-csss-gradient pour un moyen de le faire. (C'est juste trop Verbose pour mon goût, alors je cherche un moyen de le faire par programme avec un cadre CSS.)
Le point que j'essaie de faire est qu'il n'y a pas de réponse simple. Vous en voulez un, mais il n'y en a pas. Cela ne fait pas ma réponse digne d'une voix basse.
Assez juste, mais "il n'y a pas de manière pure CSS de faire cela" n'est tout simplement pas correct (CSS 3 a une prise en charge de gradient) - et recommandant de générer HTML (ou d'utiliser JS) au lieu d'écrire des CSS supplémentaires pour ces navigateurs qui ne supportent pas C'est des conseils discutables, à mon avis.
Le code que j'utilise pour tous les gradients du navigateur ..
background: #0A284B;
background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887));
background: -moz-linear-gradient(top, #0A284B, #135887);
background: -o-linear-gradient(#0A284B, #135887);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
zoom:1;
Je viens de remarquer que la bêta actuelle de Compass (0,11.beta.6) a pris en charge la génération de gradients IE dans le Compass / CSS3 / Images Module (qui remplace le module de gradient précédent), vous pouvez donc générer vos dégradés avec un total de deux commandes courtes:
.whatever {
*zoom: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFAAAAAA', endColorstr='#FFEEEEEE')";
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFAAAAAA', endColorstr='#FFEEEEEE');
background: #cccccc;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #aaaaaa), color-stop(100%, #eeeeee));
background: -moz-linear-gradient(top, #aaaaaa, #eeeeee);
background: -o-linear-gradient(top, #aaaaaa, #eeeeee);
background: linear-gradient(top, #aaaaaa, #eeeeee);
}
Mise à jour: Les gens intelligents disent vous ne devriez pas Il s'agit de faire des gradients sur IE6-IE8, car ils peuvent causer des problèmes de performance et de mise en page. Donc, ces jours-ci, j'aurais peut-être omettre la ligne gradient de filtre .
-Elors ce que vous faites pour IE Gradient, images?
Juste un arrière-plan coloré (la ligne «debout» ci-dessus).
@Jitendravyas Ajouter $ Expérimental-support-for-svg: true