Eigenschaften der CSS-Verlaufsschrift: linear-gradient und font-stretch

Eigenschaften von CSS-Verlaufsschriftarten: linearer Verlauf und Schriftstretch, spezifische Codebeispiele sind erforderlich

Im modernen Webdesign sind Verlaufsschriftarten zu einem beliebten Design geworden, um Benutzer anzulocken und den visuellen Effekt der Seite zu verbessern Trend. CSS bietet einige Eigenschaften zum Erzielen von Farbverlaufseffekten für Schriftarten, darunter „Linear-Gradient“ und „Font-Stretch“. Dieser Artikel konzentriert sich auf die Verwendung dieser beiden Eigenschaften und stellt spezifische Codebeispiele bereit, um den Lesern zu helfen, sie besser zu beherrschen.

1. Attribut „Linearer Farbverlauf“

Das Attribut „Linearer Farbverlauf“ wird verwendet, um einen Hintergrund mit linearem Farbverlauf zu erstellen. Es kann für Texthintergrundfarbe, Rahmenfarbe usw. verwendet werden. Bei Verlaufsschriftarten können wir den Effekt erzielen, indem wir sie als Hintergrundfarbe des Textes verwenden.

Die Syntax für die Verwendung des linear-gradient-Attributs zum Erstellen einer Verlaufsschrift lautet wie folgt:

background: linear-gradient(direction, color-stop1, color-stop2, ...);

wobei Richtung die Verlaufsrichtung angibt, die einer der folgenden Werte sein kann:

• to top: Verlauf von unten nach oben
• nach unten: von oben nach unten Farbverlauf
• nach links: Farbverlauf von rechts nach links
• nach rechts: Farbverlauf von links nach rechts

Farbstopp gibt die Farbe und Position des Farbverlaufs an, Sie können Prozentsätze oder verwenden Pixelwerte. Zum Beispiel:

h1 {
  background: linear-gradient(to right, #ff0000 0%, #00ff00 50%, #0000ff 100%);
}

Der obige Code bewirkt, dass im h1-Tag eine Verlaufsschriftart von Rot über Grün nach Blau erstellt wird.

2. Font-Stretch-Attribut

Das Font-Stretch-Attribut wird verwendet, um den Dehnungsgrad der Schriftart zu steuern. Dadurch kann die Schrift dicker oder schlanker gemacht werden. Bei der Gestaltung von Verlaufsschriftarten kann das Attribut „font-stretch“ gut in Verbindung mit dem Attribut „linear-gradient“ verwendet werden, um Verlaufsschriftarten attraktiver zu gestalten.

Die Syntax für die Verwendung des Font-Stretch-Attributs lautet wie folgt:

font-stretch: normal|ultra-condensed|extra-condensed|condensed|semi-condensed|semi-expanded|expanded|extra-expanded|ultra-expanded;

Die Bedeutung jedes Werts ist wie folgt:

• normal: normale Schriftbreite
• ultra-kondensiert: sehr kompakte Schriftart
• extra-kondensiert: sehr kompakt Die Schriftart
• Condensed: eine kompakte Schriftart
• Semi-Condensed: eine kompaktere Schriftart
• Semi-Expanded: eine erweiterte Schriftart
• Expanded: eine erweiterte Schriftart
• Extra-Expanded: eine sehr erweiterte Schriftart
• ultra-expandiert: Sehr erweiterte Schriftart

Zum Beispiel können wir den obigen Farbverlaufsschriftcode mit dem Attribut „font-stretch“ kombinieren, um einen einzigartigeren Schrifteffekt zu erzielen:

h1 {
  background: linear-gradient(to right, #ff0000 0%, #00ff00 50%, #0000ff 100%);
  font-stretch: expanded;
}

Der obige Code sorgt dafür, dass die Schriftart im h1-Titel gestreckt wird verschieben Sie es horizontal, um seine Breite zu vergrößern.

Zusammenfassung

Verlaufsschriftarten können Webseiten einzigartige visuelle Effekte verleihen und die Aufmerksamkeit der Benutzer auf sich ziehen. Mit den CSS-Eigenschaften „Linear-Gradient“ und „Font-Stretch“ können wir diesen Effekt leicht erzielen. Beim Entwerfen von Verlaufsschriftarten können Sie die Verlaufsrichtung und den Dehnungsgrad der Schriftart entsprechend Ihren Anforderungen anpassen, um die Schriftart attraktiver zu gestalten. Wir hoffen, dass die Codebeispiele und Erklärungen in diesem Artikel den Lesern helfen, diese beiden Eigenschaften besser zu verstehen und anzuwenden.

Das obige ist der detaillierte Inhalt vonEigenschaften der CSS-Verlaufsschrift: linear-gradient und font-stretch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!