Voyons comment nous pouvons utiliser la propriété CSS Text-Shadow pour créer un texte vraiment 3D. Vous pourriez penser à Text-Shadow comme étant capable d'appliquer une couleur floue et à l'aspect dégradé derrière le texte, et vous auriez raison! Mais tout comme Box-Shadow, vous pouvez contr?ler à quel point l'ombre est floue, y compris le faire tout le long du tout à aucun flou. Cela, combiné avec des ombres à séparation des virgules et à les empiler, est la ruse CSS que nous ferons ici.

à la fin, nous aurons quelque chose qui ressemble à ceci:

Rafra?chissement rapide sur Text-Shadow

La syntaxe est comme ceci:

 .el {
 Text-Shadow: [X-Offset] [Y-Offset] [Blur] [Color];
}

• X-Offset: position sur l'axe x. Une valeur positive déplace l'ombre vers la droite, une valeur négative déplace l'ombre vers la gauche. (requis)
• Offset Y: position sur l'axe y. Une valeur positive déplace l'ombre vers le bas, une valeur négative déplace l'ombre vers le haut. (requis)
• Blur: Combien de flou de l'ombre devrait avoir. Plus la valeur est élevée, plus l'ombre est douce. La valeur par défaut est 0px (pas de flou). (facultatif)
• Couleur: la couleur de l'ombre. (requis)

La première ombre

Commen?ons à créer notre effet en ajoutant une seule ombre. L'ombre sera poussée 6px à droite et 6px vers le bas:

 :racine {
 --Text: # 5362f6; /* Bleu */
 --shadow: # e485f8; /* Rose */
}
?
.Playful {
 Couleur: var (- texte);
 Text-shadow: 6px 6px var (- ombre);
}

Créer une profondeur avec plus d'ombres

Tout ce que nous avons est une ombre plate à ce stade - il n'y a pas encore beaucoup de 3D. Nous pouvons créer la profondeur et connecter l'ombre au texte réel en ajoutant plus d'instances de shadow de texte au même élément. Tout ce qu'il faut, c'est les séparer des virgules. Commen?ons par en ajouter un de plus au milieu:

 .Playful {
 Couleur: var (- texte);
 Text-shadow: 6px 6px var (- ombre),
        3px 3px var (- ombre);
}

Cela va déjà quelque part, mais nous devrons ajouter quelques ombres supplémentaires pour qu'il soit beau. Plus nous ajouterons d'étapes, plus le résultat final sera détaillé. Dans cet exemple, nous allons commencer à partir de 6px 6px et nous construire progressivement par incréments de 0,25px jusqu'à ce que nous atteignions 0.

 .Playful {
 Couleur: var (- texte);
 Text-shadow:?
  6px 6px var (- ombre),?
  5.75px 5.75px var (- ombre),?
  5.5px 5,5px var (- ombre),?
  5.25px 5.25px var (- ombre),
  5px 5px var (- ombre),?
  4.75px 4.75px var (- ombre),?
 4.5px 4.5px var (- ombre),?
  4.25px 4.25px var (- ombre),
 4px 4px var (- ombre),
  3,75px 3,75px var (- ombre),
 3,5px 3,5px var (- ombre),
  3.25px 3,25px var (- ombre),
  3px 3px var (- ombre),
  2,75px 2,75px var (- ombre),
   2,5px 2,5px var (- ombre),
  2,25px 2,25px var (- ombre),
   2px 2px var (- ombre),
  1,75px 1,75px var (- ombre),
  1,5px 1,5px var (- ombre),
   1,25px 1,25px var (- ombre),
  1px 1px var (- ombre),
   0,75px 0,75px var (- ombre),
  0,5px 0,5px var (- ombre),
 0,25px 0,25px var (- ombre);
}

Simplifier le code avec SASS

Le résultat peut sembler bon, mais le code en ce moment est assez difficile à lire et à modifier. Si nous voulons agrandir l'ombre, nous devons faire beaucoup de copie et coller pour y parvenir. Par exemple, l'augmentation de la taille de l'ombre à 10px signifierait l'ajout de 16 ombres de plus manuellement.

Et c'est là que SCSS vient sur l'image. Nous pouvons utiliser des fonctions pour automatiser la génération de toutes les ombres.

 @Function TextShadow ($ Precision, $ size, $ couleur) {
 $ valeur: null;?
 $ offset: 0;
 $ la longueur: $ Taille * (1 / $ précision) - 1;
?
 @for $ i de 0 à $ la longueur {
  $ offset: $ offset $ précision;
  $ shadow: $ offset px $ offset px $ couleur;
  $ Value: append ($ Value, $ shadow, virgule);
 }
?
 @return $ valeur;
}
?
.Playful {
 Couleur: # 5362F6;
 Text-Shadow: TextShadow (0,25, 6, # E485F8);
}

La fonction TextShadow prend trois arguments différents: la précision, la taille et la couleur de l'ombre. Il crée ensuite une boucle où le décalage est augmenté de $ précisé

De cette fa?on, nous pouvons facilement augmenter la taille ou la précision de l'ombre. Par exemple, pour créer une ombre de 10px de grandeur et augmente avec 0,1 pix, nous n'aurions qu'à changer cela dans notre code:

 Text-Shadow: TextShadow (0,1, 10, # E485F8);

Couleurs alternées

Nous voulons pimenter un peu les choses en alternant les couleurs. Nous allons diviser le texte dans des lettres individuelles enveloppées dans des portées (cela peut être fait manuellement ou automatisé avec React ou JavaScript). La sortie ressemblera à ceci:

 <p aria-label="Wash Your Hands!">
 <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>

Ensuite, nous pouvons utiliser le sélecteur: nth-child () sur les portes pour changer la couleur de leur texte et de leur ombre.

 .Playful Span: Nth-Child (2n) {
 Couleur: # ED625C;
 Text-Shadow: TextShadow (0,25, 6, # F2A063);
}

Si nous l'avions fait à Vanilla CSS, alors voici ce que nous nous retrouvions:

 .Playful Span {
 Couleur: var (- texte);
 Text-shadow:?
  6px 6px var (- ombre),
  5.75px 5.75px var (- ombre),
  5.5px 5,5px var (- ombre),
  5.25px 5.25px var (- ombre),
  5px 5px var (- ombre),
  4.75px 4.75px var (- ombre),
  4.5px 4.5px var (- ombre),
  4.25px 4.25px var (- ombre),
  4px 4px var (- ombre),
  3,75px 3,75px var (- ombre),
  3,5px 3,5px var (- ombre),
  3.25px 3,25px var (- ombre),
  3px 3px var (- ombre),
  2,75px 2,75px var (- ombre),
  2,5px 2,5px var (- ombre),
  2,25px 2,25px var (- ombre),
  2px 2px var (- ombre),
  1,75px 1,75px var (- ombre),
  1,5px 1,5px var (- ombre),
  1,25px 1,25px var (- ombre),
  1px 1px var (- ombre),
  0,75px 0,75px var (- ombre),
  0,5px 0,5px var (- ombre),
  0,25px 0,25px var (- ombre);
}
?
.Playful Span: Nth-Child (2n) {
 --Text: # ed625c;
 --Shadow: # F2A063;
}

Nous pouvons répéter les mêmes plusieurs fois avec d'autres couleurs et index jusqu'à ce que nous atteignions un motif que nous aimons:

Points bonus: ajout d'animation

En utilisant les mêmes principes, nous pouvons donner vie au texte encore plus en ajoutant des animations. Tout d'abord, nous allons ajouter une animation répétée qui fait que chaque portée se déplace de haut en bas:

 .Playful Span {
 Couleur: # 5362F6;
 Text-Shadow: TextShadow (0,25, 6, # E485F8);
 Position: relative;
 Animation: disperser 1,75s infinie;
}

Nous pouvons l'optimiser un peu plus loin en utilisant la requête médiatique en mouvement préfabriqué. De cette fa?on, les gens qui ne veulent pas que l'animation ne l'obtiendra pas.

 .Playful Span {
  Couleur: # 5362F6;
  Text-Shadow: TextShadow (0,25, 6, # E485F8);
  Position: relative;
  Animation: disperser 1,75s infinie;
}

écran @Media et (préfère le mouvement réduit: réduire) {
  Animation: aucun;
}

Ensuite, dans chaque nième enfant (n), nous ajouterons un retard d'animation différent.

 .Playful Span: Nth-Child (2n) {
 Couleur: # ED625C;
 Text-Shadow: TextShadow (0,25, 6, # F2A063);
 Animation-retard: 0,3S;
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!