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!