Three ways to implement text color gradient in CSS
|
In the process of web front-end development, UI designers often design some designs with gradient text. In the past, we could only use png pictures to replace text. Today, we can use pure CSS to achieve gradient text. Here are 3 implementation methods for your reference! Basic style:
.gradient-text{text-align: left;text-indent:30px;line-height: 50px;font-size:40px;font-weight: bolder; position: relative; }The first method uses background-cli and text-fill-color:
.gradient-text-one{
background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}illustrate: background: -webkit-linear-gradient(…) provides a gradient background for text elements. webkit-text-fill-color: transparent Fill the text with a transparent color. webkit-background-clip: text Clip the background with the text, filling the text with the gradient background as color. The second method uses 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)));
}illustrate: Like background-image, mask-image can be a picture path or a gradient color. The third method uses linearGradient and fill:
.gradient-text-three{
fill:url(#SVGID_1_);
font-size:40px;
font-weight: bold;
}
<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%">Flower Years</text>
</svg>illustrate: In SVG, there are two main types of gradients: Linear Gradient radialGradient Gradients in SVG can be used not only to fill graphic elements, but also to fill text elements. DOM example:
<!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 gradient font</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: bold;
}
</style>
</head>
<body>
<section class="wrapper">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Method 1. background-clip + text-fill-color</h3>
</div>
<div class="panel-body">
<h3 class="gradient-text gradient-text-one">In the Mood for Love</h3>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Method 2. Mask-image</h3>
</div>
<div class="panel-body">
<h3 class="gradient-text gradient-text-two" data-content="The Year of Young Girls">The Year of Young Girls</h3>
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">Method 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%">Flower Years</text>
</svg>
</div>
</div>
</section>
</body>
</html> Effect:
Summarize The above are three methods of implementing text color gradient in CSS that I introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website! |
<<: Tips for making HTML emails that can be displayed normally in mainstream mailboxes
>>: How to set the default value of a MySQL field
Recommend
61 Things Every Web Developer Should Know
Normally, you'll need to read everyone's s...
A brief discussion on four solutions for Vue single page SEO
Table of contents 1.Nuxt server-side rendering ap...
How to run .sh files in Linux system
There are two ways to run .sh files in Linux syst...
Detailed explanation of Vue-router nested routing
Table of contents step 1. Configure routing rules...
Solve the problem after adding --subnet to Docker network Create
After adding –subnet to Docker network Create, us...
Detailed example of mysql similar to oracle rownum writing
Rownum is a unique way of writing in Oracle. In O...
Steps for packaging and configuring SVG components in Vue projects
I just joined a new company recently. After getti...
Implementation of one-click TLS encryption for docker remote api
Table of contents 1. Change the 2375 port of Dock...
Detailed explanation of various usages of proxy_pass in nginx
Table of contents Proxy forwarding rules The firs...
HTML table tag tutorial (20): row background color attribute BGCOLOR
The BGCOLOR attribute can be used to set the back...
MySQL database must know sql statements (enhanced version)
This is an enhanced version. The questions and SQ...
Problems and solutions encountered when using v-model to two-way bind the values of parent-child components in Vue
Table of contents Scenario Try to solve solve Sce...
How to use bind to set up DNS server
DNS (Domain Name Server) is a server that convert...
Thoroughly understand JavaScript prototype and prototype chain
Table of contents Preface Laying the foundation p...
Docker connects to the host Mysql operation
Today, the company project needs to configure doc...