Schneller Tipp: So fügen Sie dem Text Gradienteneffekte und -muster hinzu

Dieser schnelle Tipp zeigt die einfache Zugabe von Gradienteneffekten und -mustern in Webseitentext. Dies wird erreicht, indem der Text transparent gestaltet, eine Hintergrunddekoration mit background-image angewendet wird und diese Dekoration genau mit background-clip.

transparenter Text und background-clip

Der Effekt beginnt mit dem Einstellen der Textfarbe auf transparent. Für eine

Überschrift wäre dies: <h1></h1>

<code class="language-css">h1 {
  color: transparent;
}</code>

Dies allein macht den Text unsichtbar. Der entscheidende nächste Schritt ist

, der den Hintergrund zu den Textzeichen einschränkt und verhindert, dass er das gesamte Feld des gesamten Elements füllt: background-clip: text

<code class="language-css">h1 {
  color: transparent;
  background-clip: text;
}</code>

Jetzt werden Hintergrundeffekte genau in den Text abgeschnitten.

Hintergrundgradienten anwenden

Wenden wir einen Gradienten auf unsere Überschrift an:

<code class="language-css">h1 {
  color: transparent;
  background-clip: text;
  background-image: linear-gradient(to right, #218bff, #c084fc, #db2777);
}</code>

Dies schafft einen Gradienten von links nach rechts auf der Überschrift. Zahlreiche Variationen sind möglich, verändern die Farben, die Richtung und erzeugen gemusterte Gradienten.

für ein gestreiftes Muster:

<code class="language-css">h1 {
  color: transparent;
  background-clip: text;
  background-image: repeating-linear-gradient(-57deg, #218bff, #218bff 3px, #c084fc 3px, #c084fc 6px);
}</code>

komplexere Muster und Styling mit

sind ebenfalls erreichbar. text-stroke

Verwenden von Hintergrundbildern

Über Gradienten hinaus kann

Bilder direkt auf den Text anwenden. Verwenden eines sich wiederholenden Musterbildes (wie das unten): background-image

Das CSS wäre:

<code class="language-css">h1 {
  color: transparent;
  background-clip: text;
  background-image: url(pattern.jpg);
  background-size: contain;
}</code>

sorgt für eine ordnungsgemäße Bildskalierung im Text. Weitere Verbesserungen können mit background-size: contain. filter: drop-shadow() erreicht werden

vs. background-image Shorthand background

Während der beiden funktionieren und die Verwendung der

-erkiege erforderlich ist, muss sie background vor platzieren, um zu vermeiden, dass background-clip auf seine Standardeinstellung zurückgesetzt wird. background-clip

Browser -Unterstützung und -Angängigkeit

, während weit verbreitete Anbieter -Präfixe (

) für ältere Browser erforderlich sein. Für die Zugänglichkeit sollten Sie -webkit-background-clip Fallback -Stile für Browser, denen @supports Unterstützung fehlt, zur Verfügung stellen: background-clip

<code class="language-css">@supports (background-clip: text) or (-webkit-background-clip: text) {
  h1 {
    /* styles here */
  }
}</code>

Denken Sie daran, dass eine übermäßige Verwendung dieser Effekte die Lesbarkeit behindern kann. Verwenden Sie sie sparsam und nachdenklich.

Schlussfolgerung

Diese Techniken bieten subtile und dennoch effektive Textverbesserungen. Verwenden Sie sie mit Bedacht, um visuelles Interesse hinzuzufügen, ohne die Lesbarkeit zu beeinträchtigen.

Das obige ist der detaillierte Inhalt vonSchneller Tipp: So fügen Sie dem Text Gradienteneffekte und -muster hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!