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
Generally speaking, once a column in a data table...
React is an open-source JavaScript library used b...
Table of contents How to operate Operation proces...
MySQL consistency log What happens to uncommitted...
Prepare war package 1. Prepare the existing Sprin...
Table of contents Overview 1. Path module 2. Unti...
1. Install Python 3 1. Install dependency package...
Previously, the images we used were all pulled fr...
The background color of the table can be set thro...
There are many reasons for slow query speed, the ...
Currently encountering such a problem My situatio...
Ubuntu is a relatively popular Linux desktop syst...
1. Download mysql-8.0.17-winx64 from the official...
Today I looked at some things related to data bac...
Table of contents Basic syntax for multi-table jo...