Exemple de partage d'effet d'ombre de texte en utilisant Html5 et CSS

Cet article présente principalement les informations pertinentes sur l'utilisation de Html5 et CSS pour obtenir des effets d'ombre de texte. Les amis dans le besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

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'arrivait pas à 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.

1. Ombre de texte

paramètres text-shadow text-shadow : Paramètre 1 : La première valeur de longueur est. utilisé pour définir l'objet La valeur de décalage horizontal de l'ombre. Peut être une valeur négative. 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 une valeur négative. 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. Le paramètre de valeur négative 4 n'est pas autorisé : Définissez la couleur de l'ombre de l'objet

text-shadow : 10px 10px 50px #000;

Exemple

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 :

<p class="text">【千锤百炼】尚学堂</p>

CSS :

.text{
    font: bold 100px/1.5 '微软雅黑';
    color: dodgerblue;
/*文本阴影*/
    text-shadow: 10px 10px 50px #000;
    /*text-shadow: 10px 10px 50px #000,-10px -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 Maintenant, passons directement au code~

HTML :

<p class="text">【千锤百炼】尚学堂</p>

CSS :

body {
    background: #000;
    color: #fff;
}
.text{
    font: bold 100px/1.5 georgia, sans-serif;
/*不同颜色的,多个不同值的模糊大小*/
    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;
}

Spread votre réflexion. En fait, le style CSS3 est très intéressant. Parfois, un simple petit changement peut obtenir un effet très cool^.^

Recommandations associées :

Utiliser. CSS3 pour obtenir une conception d'effets d'ombre de texte en constante évolution

Introduction détaillée aux effets d'ombre de calque et d'ombre de texte à l'aide de CSS3

Tutoriel CSS3 (4 ) : Bordure de la page Web et texte de la page Web shadow_css3_CSS_ Page Web

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!