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
Basics The matching order of location is "ma...
Table of contents 1. Get the value of browser coo...
SQL (Structured Query Language) statement, that i...
Front-end technology layer (The picture is a bit e...
Effect Preview Ideas Scroll the current list to t...
I recently upgraded MySQL to 5.7, and WordPress r...
This article shares the specific code of JavaScri...
1 Keep the rpm package downloaded when yum instal...
Preface In our daily development process, sorting...
1. Download the required packages wget -P /usr/lo...
MySql Download 1. Open the official website and f...
Previous words Line-height, font-size, and vertica...
Table of contents 1. Vue life cycle 2. Hook funct...
The project interacts with the server, accesses t...
Table of contents Preface 1.notnull 2. unique 3. ...