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! |
>>: So legen Sie den Standardwert eines MySQL-Felds fest
Artikel empfehlen
mysql teilt eine Datenzeile basierend auf Kommas in mehrere Zeilen auf
Inhaltsverzeichnis Trennwirkung Erläuterung der B...
Erstellen Sie eine Scala-Umgebung unter Linux und schreiben Sie ein einfaches Scala-Programm
Es ist sehr einfach, eine Scala-Umgebung in Linux...
MySQL 8.0.19 Win10 - Schnellinstallations-Tutorial
Dieses Tutorial enthält das Installationstutorial...
JavaScript zum Erzielen eines einfachen Drag-Effekts
In diesem Artikel wird der spezifische JavaScript...
JavaScript-Entwurfsmuster, Befehlsmuster
Das Befehlsmuster ist ein Verhaltensentwurfsmuste...
Methode zur Realisierung der Internetverbindung durch VMware Virtual Machine Bridging
Nachdem Sie VMware installiert und eine neue virt...
Einführung in die Containerfunktion of() in der Linux-Kernel-Programmierung
Vorwort Bei der Linux-Kernel-Programmierung werde...
So handhaben Sie Bilder in Vue-Formularen
Frage: Ich habe in Vue ein Formular zum Hochladen...
So stellen Sie Go-Webanwendungen mit Docker bereit
Inhaltsverzeichnis Warum brauchen wir Docker? Bei...
Erlernen Sie schnell die Verwendung von Docker zum Erstellen einer Entwicklungsumgebung
Da die Plattform weiter wächst, ist die Forschung...
Centos7-Konfiguration, Fastdfs und Analyse des Implementierungsprozesses des verteilten Dateispeichersystems Nginx
1. Installieren Sie libfastcommon-1.0.43. Das Ins...
Detaillierte Erläuterung der am häufigsten verwendeten Image-Befehle und Container-Befehle von Docker
Dieser Artikel listet die am häufigsten verwendet...
MySQL-Datenbankgrundlagen: Eine Zusammenfassung der grundlegenden Befehle
Inhaltsverzeichnis 1. Hilfeinformationen nutzen 2...
Analyse der MySql CURRENT_TIMESTAMP-Funktion anhand eines Beispiels
Beim Erstellen eines Zeitfelds STANDARD CURRENT_T...
Notieren Sie eine Falle bei der Aktualisierung der MySQL-Update-Anweisung
Hintergrund Kürzlich habe ich während eines Onlin...