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
Einführung in die Überwachung des MySQL MHA-Betriebsstatus
Inhaltsverzeichnis 1. Projektbeschreibung 1.1 Hin...
MySQL-Einschränkungen - Super detaillierte Erklärung
Inhaltsverzeichnis MySQL-Einschränkungsoperatione...
Analyse und Lösung von Datenverlusten während der Wertübertragung von Vue-Komponenten
Vorwort Im vorherigen Artikel wurden zwei Datenty...
Detaillierte Erklärung der MySQL information_schema-Datenbank
1. Übersicht Die Datenbank information_schema ist...
Bei der Installation von MySQL5.7.18winX64 unter Windows 10 konnte der Server nicht gestartet werden und es wurde keine Fehlermeldung angezeigt.
Systemumgebung: Win10 64-bit MySQL-Version: mysql...
Praktische Möglichkeit zum Erstellen einer verteilten Selenium-Grid-Umgebung mit Docker
Vor Kurzem musste ich die Zoom-Videokonferenz tes...
So ändern Sie die Ali-Quelle in Ubuntu 20.04
Beachten Sie, dass dieser Artikel Ihnen nicht ein...
Detaillierte Erläuterung der Angular-Routing-Unterrouten
Inhaltsverzeichnis 1. Subroutensyntax 2. Beispiel...
Webinterview: Benutzerdefinierte Vue-Komponenten und Aufrufmethoden
Import: Aufgrund der Projektanforderungen werden ...
So installieren Sie Docker auf Ubuntu20.04 LTS
Null: Alte Version deinstallieren Ältere Versione...
Detaillierte Erklärung inkompatibler Änderungen von Komponenten in vue3
Inhaltsverzeichnis Funktionale Komponenten So sch...
MySQL-Unterabfragen und gruppierte Abfragen
Inhaltsverzeichnis Überblick Unterabfragen Untera...
Vue definiert private Filter und grundlegende Nutzung
Die Methoden und Konzepte privater und globaler F...
Vue nutzt Amap zur Realisierung der Stadtpositionierung
In diesem Artikel wird der spezifische Code von V...
Beispiel für das Hinzufügen und Löschen von Bereichspartitionen in MySQL 5.5
einführen Die RANGE-Partitionierung basiert auf e...