Maison >interface Web >tutoriel CSS >Trois façons d'implémenter le dégradé de couleurs du texte CSS (avec code)
Ce que cet article vous apporte concerne les trois méthodes d'implémentation du dégradé de couleurs de texte CSS (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
Dans le processus de développement du front-end Web, les concepteurs d'interface utilisateur conçoivent souvent des dessins de conception avec du texte dégradé. Dans le passé, nous ne pouvions utiliser que des images png pour remplacer le texte. Aujourd'hui, nous pouvons utiliser du CSS pur pour l'implémenter. texte dégradé. Voici 3 méthodes de mise en œuvre pour votre référence !
Style de base :
.gradient-text{text-align: left;text-indent:30px;line-height: 50px;font-size:40px;font-weight:bolder; position: relative; }
La première méthode, utilisez background-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;
}
Instructions :
background: -webkit-linear-gradient(...) fournit un arrière-plan dégradé pour les éléments de texte.
webkit-text-fill-color: transparent Remplit le texte avec une couleur transparente.
webkit-background-clip : le texte coupe l'arrière-plan avec du texte et remplit le texte avec l'arrière-plan dégradé comme couleur.
La deuxième méthode consiste à utiliser 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)));
}
Explication :
mask-image est la même que background-image. Non seulement la valeur peut être. le chemin de l'image, il peut également s'agir d'un dégradé de couleur.
La troisième méthode, utilisez LinearGradient, fill :
.gradient-text-three{
fill:url(#SVGID_1_);
font-size:40px;
font-weight:bolder;
}
<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>
Explication :
En SVG, il existe deux principaux types de dégradés :
Dégradé linéaire (linearGradient)
Dégradé radial (radialGradient)
Le dégradé en SVG peut être utilisé non seulement pour remplir des éléments graphiques, mais également pour remplir des éléments de texte
exemple dom :
<!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">
<p class="panel panel-info">
<p class="panel-heading">
<h3 class="panel-title">方法1. background-clip + text-fill-color</h3>
</p>
<p class="panel-body">
<h3 class="gradient-text gradient-text-one">花样年华</h3>
</p>
</p>
<p class="panel panel-warning">
<p class="panel-heading">
<h3 class="panel-title">方法2. mask-image</h3>
</p>
<p class="panel-body">
<h3 class="gradient-text gradient-text-two" data-content="豆蔻年华">豆蔻年华</h3>
</p>
</p>
<p class="panel panel-danger">
<p class="panel-heading">
<h3 class="panel-title">方法3. svg linearGradient</h3>
</p>
<p 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>
</p>
</p>
</section>
</body>
</html>
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!