recherche

Maison >interface Web >tutoriel CSS >Comment implémenter un dégradé de texte en CSS3 ? Trois façons d'implémenter un dégradé de texte en CSS3 (code)

Comment implémenter un dégradé de texte en CSS3 ? Trois façons d'implémenter un dégradé de texte en CSS3 (code)

不言
不言original
2018-08-21 10:33:3146500parcourir

Le contenu de cet article explique comment implémenter un dégradé de texte en CSS3 ? Les trois méthodes (codes) pour réaliser un dégradé de texte en CSS3 ont une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère que cela vous sera utile.

Pendant le processus de développement, les concepteurs d'interface utilisateur conçoivent souvent des dessins de conception avec du texte dégradé et les donnent à nous, programmeurs, et la plupart d'entre nous, programmeurs, soupirent en silence. Cependant, la naissance de CSS3 a résolu de nombreux problèmes. le processus de développement front-end, tel que l'animation, le masquage, etc.

1. Ce que nous voulons réaliser aujourd'hui, c'est utiliser du CSS pur pour implémenter le texte dégradé :

Comment implémenter un dégradé de texte en CSS3 ? Trois façons dimplémenter un dégradé de texte en CSS3 (code)

Comment implémenter un dégradé de texte en CSS3 ? Trois façons dimplémenter un dégradé de texte en CSS3 (code)

Comment implémenter un dégradé de texte en CSS3 ? Trois façons dimplémenter un dégradé de texte en CSS3 (code)

2. Style de base : 

.gradient-text{
              text-align: left;
              text-indent:30px;
              line-height: 50px;
              font-size:40px;
              font-weight:bolder; 
              position: relative; 
              }
3. -cli, text-fill-color : 

.gradient-text-one{  
    background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow); 
    -webkit-background-clip:text; 
    -webkit-text-fill-color:transparent; 
}
4. Deuxième méthode, utilisez mask-image : 

.gradient-text-two{
   color:red;
}
.gradient-text-two[data-content]::after{
    content:attr(data-content);
    display: block;
    position:absolute;
    color:yellow;
    left:0;
    top:0;
    z-index:2;
    -webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0)));
}
5. 

.gradient-text-three{
    fill:url(#SVGID_1_);
    font-size:40px;
    font-weight:bolder;
}
6. Tous les codes de cette DÉMO : 
<svg viewBoxs="0 0 500 300" class="svgBox">
    <defs>
        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10" x2="0" y2="50">
            <stop  offset="0" style="stop-color:yellow"/>
            <stop  offset="0.5" style="stop-color:#fd8403"/>
            <stop  offset="1" style="stop-color:red"/>
        </linearGradient>
    </defs>
    <text text-anchor="middle" class="gradient-text-three" x="110px" y="30%">花信年华</text>
</svg>

Recommandations associées : 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>CSS3渐变字体</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style type="text/css">
        *{margin:0;padding:0;}
        body,html{width:100%;height:100%;}
        .wrapper{width:80%;margin:0 auto;margin-top:30px;}
        .gradient-text{
                text-align: left;
                text-indent:30px;
                line-height: 50px;
                font-size:40px;
                font-weight:bolder; 
                position: relative; 
                }
        .gradient-text-one{  
            background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow); 
            -webkit-background-clip:text; 
            -webkit-text-fill-color:transparent; 
        }
        .gradient-text-two{
            color:red;
        }
        .gradient-text-two[data-content]::after{
            content:attr(data-content);
            display: block;
            position:absolute;
            color:yellow;
            left:0;
            top:0;
            z-index:2;
            -webkit-mask-image:-webkit-gradient(linear, 0 0, 0 bottom, from(yellow), to(rgba(0, 0, 255, 0)));
        }
        .gradient-text-three{
            fill:url(#SVGID_1_);
            font-size:40px;
            font-weight:bolder;
        }
    </style>
</head>
<body>
    <section class="wrapper">
        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">方法1. background-clip + text-fill-color</h3>
            </div>
            <div class="panel-body">
                <h3 class="gradient-text gradient-text-one">花样年华</h3>
            </div>
        </div>
        <div class="panel panel-warning">
            <div class="panel-heading">
                <h3 class="panel-title">方法2. mask-image</h3>
            </div>
            <div class="panel-body">
                <h3 class="gradient-text gradient-text-two" data-content="豆蔻年华">豆蔻年华</h3>
            </div>
        </div>
        <div class="panel panel-danger">
            
            <div class="panel-heading">
                <h3 class="panel-title">方法3. svg linearGradient</h3>
            </div>
 
            <div class="panel-body">
                <svg viewBoxs="0 0 500 300" class="svgBox">
                    <defs>
                        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="10" x2="0" y2="50">
                            <stop  offset="0" style="stop-color:yellow"/>
                            <stop  offset="0.5" style="stop-color:#fd8403"/>
                            <stop  offset="1" style="stop-color:red"/>
                        </linearGradient>
                    </defs>
                    <text text-anchor="middle" class="gradient-text-three" x="110px" y="30%">花信年华</text>
                </svg>
            </div>
 
        </div>
    </section>
</body>
</html>

barre de progression css Dégradé du texte en fonction de la progression


Dégradé de couleur du texte implémenté par DIV+CSS+JS (réimprimé)_html/css_WEB-ITnose


Animation du dégradé de texte CSS3

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Introduction à trois méthodes pour implémenter une mise en page à deux colonnes avec CSS (code)Article suivant：Introduction à trois méthodes pour implémenter une mise en page à deux colonnes avec CSS (code)

Articles Liés

Voir plus