Utilisez HTML5 et CSS pour obtenir un effet d'ombre de texte

Il y a deux jours, une jolie fille qui apprenait le front-end HTML5 m'a demandé comment obtenir l'effet d'ombre de texte. Elle m'a parlé de text-shadow. Elle connaissait aussi text-shadow, mais elle n'a pas pu lui donner l'apparence qu'elle souhaitait. En fait, les nouvelles fonctionnalités de CSS3 sont très puissantes. D'accord, potins. Sans plus tarder, jetons d'abord un coup d'œil à cette ombre de texte.

text-shadow Paramètres de l'ombre du texte : Paramètre 1 : La première valeur de longueur est utilisée pour définir la valeur de décalage horizontal de l'ombre de l'objet. Peut être négatif Paramètre 2 : La deuxième valeur de longueur est utilisée pour définir la valeur de décalage vertical de l'ombre de l'objet. Peut être négatif Paramètre 3 : Si la troisième valeur de longueur est fournie, elle est utilisée pour définir la valeur de flou d'ombre de l'objet. Les valeurs négatives ne sont pas autorisées Paramètre 4 : Définir la couleur de l'ombre de l'objet

texte-ombre : 10px 10px 50px #000 ;

Comment obtenons-nous l’effet de l’image ci-dessus ?

Structure HTML Style CSS style de police couleur de la police ombre du texte Jetons ensuite un coup d'œil au code spécifique :

HTML :

 <div class=text>[Des milliers de tempéraments] Shang Xuetang</div>

CSS :

 .text{ police : gras 100px/1.5 'Microsoft Yahei' ; couleur : bleu dodger;/*text-shadow*/ text-shadow : 10px 10px 50px #000 ; 10px 50px #f00;*/}

Voyons maintenant comment faire l'effet de la petite beauté qui me demande sur le front-end.

C'est en fait très simple, passons directement au code~

HTML :

 <div class=text>[Des milliers de tempéraments] Shang Xuetang</div>

CSS :

 body { background : #000 ; couleur : #fff;}.text{ police : gras 100px/1.5 georgia, sans-serif;/*Différentes couleurs, tailles de flou de plusieurs valeurs différentes*/ text-shadow : 0 0 10px #fff , 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;}

Partagez votre réflexion. En fait, les styles CSS3 sont très intéressants. Parfois, un simple petit changement peut produire des effets très sympas ^.^.

Ce qui précède est l'introduction de l'éditeur à l'utilisation de HTML5 et CSS pour obtenir des effets d'ombre de texte. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !