web-dev-qa-db-fra.com

Traverser le dégradé de texte du navigateur en CSS pur sans utiliser d'image d'arrière-plan

J'ai beaucoup essayé pour le dégradé de texte. J'ai trouvé le code pour safari et chrome mais il n'est pas compatible avec d'autres navigateurs. Je veux le faire fonctionner sans utiliser l'image d'arrière-plan. Si vous avez une solution appropriée, veuillez la fournir.

csslinear-gradients
23
Hiten S

J'ai trouvé que la meilleure façon de le faire est d'utiliser des dégradés SVG, c'est facile à faire et ne nécessite aucune image, voici un code qui crée un dégradé de texte simple en utilisant SVG.

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" style="stop-color:#FF6600;stop-opacity:1" />
          <stop offset="100%" style="stop-coloR:#FFF000;stop-opacity:1" />
        </linearGradient>
      </defs>
      <text fill="url(#grad1)" font-size="60" font-family="Verdana" x="50" y="100">
    SVG Text Gradient</text>
    </svg>

Vous pouvez modifier les valeurs x et y pour créer un dégradé horizontal/vertical ou diagonal, vous pouvez également lui appliquer des styles à l'aide d'une feuille de style CSS, il suffit d'une ligne de code supplémentaire entre les balises defs.

  <link href="style.css" type="text/css" rel="stylesheet" 
          xmlns="http://www.w3.org/1999/xhtml"/>

Cette méthode fonctionne dans les dernières versions de Chrome, IE, Firefox et Safari. Vous pouvez également appliquer des dégradés radiaux, des flous et des filtres, pour plus d'informations, rendez-vous sur Écoles W .

34
Harry12345
    <style type="text/css">
                h1 {
                        font-family: "Myriad Pro", sans-serif;
                        font-size: 40px;
                        font-weight: normal;
                }
                
                /* --- start of magic ;-) --- */
                .white-gradient {
                        position: relative;
                }
                .white-gradient:after {
                        content: '';
                        display: block;
                        position: absolute;
                        top: 0;
                        left: 0;
                        height: 100%;
                        width: 100%;
                        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
                        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0)));
                        background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
                        background:    -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
                        background:     -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
                        background:      -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
                        background:         linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
                }
                /* --- end of magic ;-) --- */
        </style>
        
        <h1 class="white-gradient">Pure CSS text gradient without any graphics</h1>
26
Jirka

Vous pouvez le faire avec les plugins jQuery.

Le plugin Cufon peut l'avoir aussi, vous devriez le vérifier. Cela pourrait également être fait avec le plugin Raphael ou SVG et VML, mais une solution cross-browser CSS pure est difficile à trouver.

Uniquement pour Chrome et Safari:

-webkit-mask-image: -webkit-gradient(linear, left top, left bottom,
    from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to(rgba(0,0,0,1)));

Pour le reste des navigateurs, vous devez utiliser du JavaScript.

6
Jozsef Kerekes