Drei Möglichkeiten zum Implementieren eines Textfarbverlaufs in CSS

Bei der Entwicklung von Web-Frontends entwerfen UI-Designer häufig Designs mit Farbverlaufstext. Früher konnten wir nur PNG-Bilder verwenden, um Text zu ersetzen. Heute können wir reines CSS verwenden, um Farbverlaufstext zu erzielen. Hier sind 3 Implementierungsmethoden zu Ihrer Information!

Grundstil:

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

Die erste Methode verwendet background-cli und text-fill-color:

.gradient-text-one{  
    Hintergrundbild: -webkit-linear-gradient(unten,rot,#fd8403,gelb); 
    -webkit-Hintergrundclip:Text; 
    -webkit-text-fill-color:transparent; 
}

veranschaulichen:

Hintergrund: -webkit-linear-gradient(…) bietet einen Verlaufshintergrund für Textelemente.

webkit-text-fill-color: transparent Füllen Sie den Text mit einer transparenten Farbe.

webkit-background-clip: Text. Schneiden Sie den Hintergrund mit dem Text aus und füllen Sie den Text mit dem Verlaufshintergrund als Farbe.

Die zweite Methode verwendet ein Maskenbild:

.gradient-text-zwei{
   Farbe: rot;
}
.gradient-text-two[Dateninhalt]::nach{
    Inhalt:attr(Dateninhalt);
    Anzeige: Block;
    Position: absolut;
    Farbe: gelb;
    links: 0;
    oben: 0;
    z-Index: 2;
    -webkit-mask-image:-webkit-gradient(linear, 0 0, 0 unten, von (gelb), bis (rgba (0, 0, 255, 0)));
}

veranschaulichen:

Wie das Hintergrundbild kann das Maskenbild ein Bildpfad oder eine Verlaufsfarbe sein.

Die dritte Methode verwendet linearGradient und fill:

.gradient-text-drei{
    füllen: url(#SVGID_1_);
    Schriftgröße: 40px;
    Schriftstärke: fett;
}

<svg viewBoxs="0 0 500 300" Klasse="svgBox">
    <Definitionen>
        <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%">Blumenjahre</text>
</svg>

veranschaulichen:

In SVG gibt es zwei Haupttypen von Farbverläufen:

Linearer Farbverlauf

radialerGradient

Farbverläufe in SVG können nicht nur zum Füllen grafischer Elemente, sondern auch zum Füllen von Textelementen verwendet werden.

DOM-Beispiel:

<!DOCTYPE html>
<html>
<Kopf>
    <meta charset="utf-8">
    <meta name="viewport" content="Breite=Gerätebreite, benutzerdefiniert skalierbar=nein, Anfangsmaßstab=1,0, Maximalmaßstab=1,0, Minimalmaßstab=1,0">
    <title>CSS3-Farbverlaufsschriftart</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">
        *{Rand:0;Padding:0;}
        Körper, html {Breite: 100%; Höhe: 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{  
            Hintergrundbild: -webkit-linear-gradient(unten,rot,#fd8403,gelb); 
            -webkit-Hintergrundclip:Text; 
            -webkit-text-fill-color:transparent; 
        }
        .gradient-text-zwei{
            Farbe: rot;
        }
        .gradient-text-two[Dateninhalt]::nach{
            Inhalt:attr(Dateninhalt);
            Anzeige: Block;
            Position: absolut;
            Farbe: gelb;
            links: 0;
            oben: 0;
            z-Index: 2;
            -webkit-mask-image:-webkit-gradient(linear, 0 0, 0 unten, von (gelb), bis (rgba (0, 0, 255, 0)));
        }
        .gradient-text-drei{
            füllen: url(#SVGID_1_);
            Schriftgröße: 40px;
            Schriftstärke: fett;
        }
    </Stil>
</Kopf>
<Text>
    <Abschnitt Klasse="Wrapper">
        <div Klasse="Panel Panel-Info">
            <div Klasse="Panelüberschrift">
                <h3 class="panel-title">Methode 1. Hintergrundclip + Textfüllfarbe</h3>
            </div>
            <div Klasse="Panel-Body">
                <h3 class="gradient-text gradient-text-one">In der Stimmung für Liebe</h3>
            </div>
        </div>
        <div Klasse="Panel Panel-Warnung">
            <div Klasse="Panelüberschrift">
                <h3 class="panel-title">Methode 2. Maskenbild</h3>
            </div>
            <div Klasse="Panel-Body">
                <h3 class="gradient-text gradient-text-two" data-content="Das Jahr der jungen Mädchen">Das Jahr der jungen Mädchen</h3>
            </div>
        </div>
        <div Klasse="Panel Panel-Gefahr">
            
            <div Klasse="Panelüberschrift">
                <h3 class="panel-title">Methode 3. svg linearGradient</h3>
            </div>
 
            <div Klasse="Panel-Body">
                <svg viewBoxs="0 0 500 300" Klasse="svgBox">
                    <Definitionen>
                        <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%">Blumenjahre</text>
                </svg>
            </div>
 
        </div>
    </Abschnitt>
</body>
</html>

Wirkung:

Zusammenfassen

Oben habe ich Ihnen drei Methoden zur Implementierung von Textfarbverläufen in CSS vorgestellt. Ich hoffe, sie sind hilfreich für Sie. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!

<<: Tipps zum Erstellen von HTML-E-Mails, die in herkömmlichen Postfächern normal angezeigt werden können

>>: So legen Sie den Standardwert eines MySQL-Felds fest

Detaillierte Erklärung zur Verwendung von Echarts-Maps in Angular

Drei Möglichkeiten zum Implementieren eines Textfarbverlaufs in CSS

Detaillierte Erklärung zur Verwendung von Echarts-Maps in Angular

Detaillierte Erklärung gängiger Docker Compose-Befehle

So wählen und verwenden Sie PNG, JPG und GIF als Web-Bildformate

Auf den Alibaba Cloud Server Tomcat kann nicht zugegriffen werden

Lösen Sie das Problem der Verwendung von weniger in Vue

Gängige Methoden und Probleme der Docker-Bereinigung

Verwendungsanweisungen für den Befehl „Docker Create“

Einführung in die Verwendung gängiger Dockerfile-Befehle

Regeln für die Verwendung gemeinsamer MySQL-Indizes

Beispiel für eine HTTPS-Konfigurationsmethode für den Nginx-Server

Artikel empfehlen

Erste Schritte mit SELinux

Detaillierte Erläuterung zum Ausführen von JMeter unter einem Linux-System und zur Optimierung des lokalen Speichers

So ändern Sie den Punkt im WeChat-Applet Swiper-Dot in einen Slider

Detailliertes Tutorial zum Herunterladen und Installieren von mysql8.0.21

So erhöhen Sie die Ladegeschwindigkeit von HTML-Seiten

Idea konfiguriert Tomcat zum Starten eines Webprojekts - Grafik-Tutorial

Detaillierte Erklärung von sechs mit JavaScript implementierten Karusselleffekten für Webseitenbilder

So erkennen Sie mit Apache Tika, ob eine Datei beschädigt ist

Detaillierte Erläuterung der vorkompilierten CSS-Sprachen und ihrer Unterschiede

Lösung für die Systemstörung (Booten nicht möglich), die durch das Upgrade von glibc in Centos7 verursacht wurde

Detaillierte Erläuterung des Ausführungsprozesses von MySQL-Abfrageanweisungen

Lösen Sie das Problem, dass Docker das MySQL-Image zu langsam zieht

Tutorial zur Installation und Konfiguration von MySql5.7 in Alibaba Cloud ECS centos6.8

CSS fügt Scroll zu Div hinzu und verbirgt die Bildlaufleiste

Implementieren der Formularübermittlung ohne Aktualisierung der Seite basierend auf HTML