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
Detaillierte Erläuterung der grundlegenden Verwaltung der KVM-Virtualisierung in CentOS7
1. Installieren Sie die KVM-Virtualisierung :::::...
Detaillierte Erklärung zur Ausführung von Skripten oder Anweisungen durch Zabbix auf Remote-Hosts
Szenarioanforderungen 1. Wir können die Skriptfun...
Fehlerbehebung bei MySQL-Datenverlust
Inhaltsverzeichnis Vorwort Untersuchung vor Ort G...
So ändern Sie das MySQL-Passwort unter Centos
1. MySQL-Anmeldeeinstellungen ändern: # vim /etc/...
js verwendet die Reduce-Methode, um Ihren Code eleganter zu gestalten
Vorwort In tatsächlichen Projekten kann die häufi...
HTML+CSS zum Erstellen einer Schaltfläche im Cyberpunk-Stil
Erster Blick auf die Wirkung: Vorwort: Auf diese ...
Das Erlebnis gestalten: Was auf dem Knopf liegt
<br />Vor Kurzem hat UCDChina eine Artikelse...
Lösen Sie das Problem, dass Navicat für MySQL beim Herstellen einer Verbindung zu MySQL einen 2005-Fehler meldet
Im vorherigen Artikel habe ich beschrieben, wie s...
Beispiele für die Verwendung einer Link-Aktualisierungsseite und einer JS-Aktualisierungsseite
1. So verwenden Sie den Link: Code kopieren Der Co...
Zusammenfassung zur Verwendung von MySQL-Isolationsspalten und Präfixindizes
Inhaltsverzeichnis Datenspalten isolieren Präfixi...
Befehle zum Deaktivieren und Aktivieren von MySQL-Fremdschlüsseleinschränkungen
Deaktivieren und Aktivieren von MySQL-Fremdschlüs...
Prinzipien der MySQL-Datentypoptimierung
MySQL unterstützt viele Datentypen und die Auswah...
SASS Style Programmierhandbuch für CSS
Da immer mehr Entwickler SASS verwenden, müssen w...
So verwenden Sie DQL-Befehle zum Abfragen von Daten in MySQL
In diesem Artikel zeigt Ihnen der Blogger die häu...
Das ganz links stehende Übereinstimmungsprinzip des MySQL-Datenbankindex
Inhaltsverzeichnis 1. Gemeinsame Indexbeschreibun...