Erstellen verspielter Effekte mit CSS -Textschatten

Schauen wir uns an, wie wir die CSS-Text-Shadow-Eigenschaft verwenden können, um einen wirklich 3D-aussehenden Text zu erstellen. Sie könnten sich Text-Shadow als in der Lage vorstellen, unscharf und gradientenaussehende Farbe hinter Text anzuwenden, und Sie hätten Recht! Aber genau wie Box-Shadow können Sie steuern, wie verschwommen der Schatten ist, einschließlich des Gebens bis zu keiner Unschärfe. In Kombination mit dem Komma-trennenden Schatten und dem Stapeln ist die CSS-Tricks, die wir hier machen werden.

Am Ende haben wir etwas, das so aussieht:

Schnelle Auffrischung auf Textschatten

Die Syntax ist so:

 .el {
 Text-Shadow: [x-offset] [y-offset] [Blur] [Farbe];
}

• X-Offset: Position auf der X-Achse. Ein positiver Wert bewegt den Schatten nach rechts, ein negativer Wert bewegt den Schatten nach links. (erforderlich)
• y-offset: Position auf der y-Achse. Ein positiver Wert bewegt den Schatten nach unten, ein negativer Wert bewegt den Schatten nach oben. (erforderlich)
• Blur: Wie viel Unschärfe sollte der Schatten haben. Je höher der Wert, desto weicher der Schatten. Der Standardwert ist 0PX (keine Unschärfe). (optional)
• Farbe: Die Farbe des Schattens. (erforderlich)

Der erste Schatten

Erstellen wir unseren Effekt, indem wir nur einen Schatten hinzufügen. Der Schatten wird 6px nach rechts und 6px nach unten gedrückt:

 :Wurzel {
 --Text: #5362F6; /* Blau */
 -Shadow: #e485f8; /* Rosa */
}


.Playful {
 Farbe: var (-Text);
 Text-Shadow: 6px 6px var (-Schatten);
}

Tiefe mit mehr Schatten erstellen

Alles, was wir haben, ist zu diesem Zeitpunkt ein flacher Schatten - es gibt noch nicht viel 3D. Wir können die Tiefe erstellen und den Schatten mit dem tatsächlichen Text anschließen, indem wir demselben Element weitere Text-Shadow-Instanzen hinzufügen. Alles was es braucht ist, dass sie sie trennt. Beginnen wir mit dem Hinzufügen eines in der Mitte:

 .Playful {
 Farbe: var (-Text);
 Text-Shadow: 6px 6px var (-Schatten),
        3px 3px var (-Schatten);
}

Dies kommt bereits an einen Ort, aber wir müssen ein paar weitere Schatten hinzufügen, damit es gut aussieht. Je mehr Schritte wir hinzufügen, desto detaillierter wird das Endergebnis sein. In diesem Beispiel beginnen wir von 6px 6px und bauen nach und nach in Schritten von 0,25 Pen, bis wir 0 erreicht haben.

 .Playful {
 Farbe: var (-Text);
 Textschatten: 
  6px 6px var (-Schatten), 
  5.75px 5.75px var (-Schatten), 
  5.5px 5,5px var (-Schatten), 
  5.25px 5.25px var (-Schatten),
  5px 5px var (-Schatten), 
  4.75px 4.75px var (-Schatten), 
 4,5px 4,5px var (-Schatten), 
  4.25px 4.25px var (-Schatten),
 4px 4px var (-Schatten),
  3.75px 3.75px var (-Schatten),
 3,5px 3,5px var (-Schatten),
  3.25px 3.25px var (-Schatten),
  3px 3px var (-Schatten),
  2,75px 2,75px var (-Schatten),
   2,5px 2,5px var (-Schatten),
  2,25px 2,25px var (-Schatten),
   2px 2px var (-Schatten),
  1,75px 1,75px var (-Schatten),
  1,5px 1,5px var (-Schatten),
   1,25px 1,25px var (-Schatten),
  1px 1px var (-Schatten),
   0,75px 0,75px var (-Schatten),
  0,5px 0,5px var (-Schatten),
 0,25px 0,25px var (-Schatten);
}

Vereinfachung des Codes mit SASS

Das Ergebnis mag gut aussehen, aber der Code ist momentan ziemlich schwer zu lesen und zu bearbeiten. Wenn wir den Schatten größer machen wollen, müssten wir viel kopieren und einfügen, um ihn zu erreichen. Wenn Sie beispielsweise die Schattengröße auf 10px erhöhen, würde dies dazu führen, dass 16 weitere Schatten manuell hinzugefügt werden.

Und hier kommt SCSS ins Bild. Wir können Funktionen verwenden, um die Erzeugung aller Schatten zu automatisieren.

 @Function textshadow ($ precision, $ size, $ color) {
 $ value: null; 
 $ offset: 0;
 $ Länge: $ Größe * (1 / $ Präzision) - 1;


 @Für $ i von 0 bis $ Länge {
  $ offset: $ offset $ precision;
  $ Shadow: $ offset px $ offset px $ color;
  $ value: append ($ value, $ shadow, comma);
 }


 @Return $ value;
}


.Playful {
 Farbe: #5362f6;
 Text-Shadow: textshadow (0,25, 6, #e485f8);
}

Der Funktionstexthadow nimmt drei verschiedene Argumente an: Präzision, Größe und Farbe des Schattens. Anschließend wird eine Schleife erstellt, in der der Offset durch $ Precision (in diesem Fall 0,25 PX) erhöht wird, bis es die Gesamtgröße (in diesem Fall 6px) des Schattens erreicht.

Auf diese Weise können wir die Größe oder Präzision des Schattens leicht erhöhen. Um beispielsweise einen Schatten zu erstellen, der 10px groß ist und mit 0,1px zunimmt, müssten wir dies nur in unserem Code ändern:

 Text-Shadow: textshadow (0.1, 10, #e485f8);

Wechselfarben

Wir wollen die Dinge ein wenig aufpeppen, indem wir abwechselnde Farben entscheiden. Wir werden den Text in einzelnen in Spannweiten eingewickelten Buchstaben aufteilen (dies kann manuell oder mit React oder JavaScript automatisiert werden). Die Ausgabe sieht so aus:

 <p aria-label="Waschen Sie Ihre Hände!">
 <span aria-hidden="true"> w </span> <span aria-hidden="true"> a </span> <span aria-hidden="true"> s </span> <span aria-hidden="true"> h </span> ...
</p>

Dann können wir den Selektor: n-Child () auf den Spannweiten verwenden, um die Farbe ihres Textes und des Schattens zu ändern.

 .playful Span: n-te-Kind (2n) {
 Farbe: #ed625c;
 Text-Shadow: textshadow (0,25, 6, #f2a063);
}

Wenn wir dies in Vanille -CSS getan hätten, dann würden wir Folgendes haben:

 .Playful Span {
 Farbe: var (-Text);
 Textschatten: 
  6px 6px var (-Schatten),
  5.75px 5.75px var (-Schatten),
  5.5px 5,5px var (-Schatten),
  5.25px 5.25px var (-Schatten),
  5px 5px var (-Schatten),
  4.75px 4.75px var (-Schatten),
  4,5px 4,5px var (-Schatten),
  4.25px 4.25px var (-Schatten),
  4px 4px var (-Schatten),
  3.75px 3.75px var (-Schatten),
  3,5px 3,5px var (-Schatten),
  3.25px 3.25px var (-Schatten),
  3px 3px var (-Schatten),
  2,75px 2,75px var (-Schatten),
  2,5px 2,5px var (-Schatten),
  2,25px 2,25px var (-Schatten),
  2px 2px var (-Schatten),
  1,75px 1,75px var (-Schatten),
  1,5px 1,5px var (-Schatten),
  1,25px 1,25px var (-Schatten),
  1px 1px var (-Schatten),
  0,75px 0,75px var (-Schatten),
  0,5px 0,5px var (-Schatten),
  0,25px 0,25px var (-Schatten);
}


.playful Span: n-te-Kind (2n) {
 --Text: #ed625c;
 -Shadow: #F2A063;
}

Wir können das gleiche ein paar Mal mit anderen Farben und Indizes wiederholen, bis wir ein Muster erreichen, das uns gefällt:

Bonuspunkte: Animation hinzufügen

Mit den gleichen Prinzipien können wir den Text noch mehr zum Leben erwecken, indem wir Animationen hinzufügen. Zunächst werden wir eine sich wiederholende Animation hinzufügen, mit der sich jede Spannweite auf und ab bewährt:

 .Playful Span {
 Farbe: #5362f6;
 Text-Shadow: textshadow (0,25, 6, #e485f8);
 Position: Relativ;
 Animation: Streuung 1.75s unendlich;
}

Wir können dies ein wenig weiter optimieren, indem wir die Medienabfrage für die motorisierten Beschäftigten verwenden. Auf diese Weise werden Leute, die die Animation nicht wollen, sie nicht verstehen.

 .Playful Span {
  Farbe: #5362f6;
  Text-Shadow: textshadow (0,25, 6, #e485f8);
  Position: Relativ;
  Animation: Streuung 1.75s unendlich;
}

@media Screen und (bevorzugt (bevorzugt man reduzierte Motion: Reduzieren Sie) {{
  Animation: Keine;
}

Dann fügen wir in jedem n-ten-kind (n) eine andere Animationsverzögerung hinzu.

 .playful Span: n-te-Kind (2n) {
 Farbe: #ed625c;
 Text-Shadow: textshadow (0,25, 6, #f2a063);
 Animation-Zelay: 0,3s;
}

Das obige ist der detaillierte Inhalt vonErstellen verspielter Effekte mit CSS -Textschatten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!