Maison > Article > interface Web > Créer un affichage de texte au néon en utilisant HTML et CSS
Créer un affichage de texte au néon en utilisant HTML et CSS
- WBOYavant
- 2023-09-03 09:25:06986parcourir
De nos jours, créer du texte néon sur des pages Web est devenu une tendance pour les rendre plus attractives. Nous pouvons créer du texte néon sur les pages Web pour créer un effet accrocheur qui attire l'attention des utilisateurs sur les informations importantes contenues dans la page Web.
Nous pouvons les mettre en valeur en utilisant du texte néon avec des logos, des titres, des publicités et plus encore. Dans ce didacticiel, nous personnaliserons la valeur de la propriété CSS text-shadow pour créer du texte néon.
Grammaire
Les utilisateurs peuvent créer du texte néon en utilisant HTML et CSS en suivant la syntaxe suivante.
text-shadow: 0 0 1.5rem white;
Nous avons utilisé la propriété CSS « text-shadow » dans la syntaxe ci-dessus pour ajouter un effet de lueur. Il prend le décalage horizontal comme première valeur, le décalage vertical comme deuxième valeur, le rayon de flou comme troisième valeur et la couleur comme quatrième valeur.
Nous devons toujours définir le décalage vertical et horizontal sur 0. Pour générer l'effet néon, nous devons utiliser plusieurs valeurs avec des couleurs et un rayon de flou différents pour la propriété CSS text-shadow.
Exemple 1 (texte Basic Neon)
Dans l'exemple ci-dessous, nous avons créé un effet néon de base pour le texte en utilisant la propriété CSS « text-shadow ». Nous utilisons plusieurs valeurs avec différents rayons de bordure et couleurs pour générer l'effet néon.
Dans la sortie, les utilisateurs peuvent observer du texte avec un effet néon.
<html>
<head>
<style>
.neon {
font-size: 5rem;
color: white;
font-family: 'Arial', sans-serif;
text-shadow: 0 0 1.5rem white, 0 0 3.5rem white, 0 0 5rem white, 0 0 7rem #ff00de, 0 0 8rem #ff00de, 0 0 10rem #ff00de, 0 0 12rem #ff00de, 0 0 15rem #ff00de;
}
</style>
</head>
<body>
<h2> Creating the <i> basic Neon text </i> using the CSS. </h2>
<div class = "neon"> Neon Text </div>
</html><html>
<head>
<style>
.neon {
font-size: 5rem;
color: white;
font-family: 'Arial', sans-serif;
text-shadow: 0 0 1.5rem white, 0 0 3.5rem white, 0 0 5rem white, 0 0 7rem #ff00de, 0 0 8rem #ff00de, 0 0 10rem #ff00de, 0 0 12rem #ff00de, 0 0 15rem #ff00de;
}
</style>
</head>
<body>
<h2> Creating the <i> basic Neon text </i> using the CSS. </h2>
<div class = "neon"> Neon Text </div>
</html>
Exemple 2 (Texte néon arc-en-ciel)
Dans l'exemple ci-dessous, nous avons créé un effet néon arc-en-ciel dans le texte. Ici, nous avons ajouté du texte à l'intérieur d'un élément div.
Nous utilisons la propriété CSS « background-image » en CSS pour ajouter un dégradé linéaire comme arrière-plan. Nous avons appliqué un dégradé linéaire de 4 couleurs différentes à 45 degrés. De plus, nous découpons l'image d'arrière-plan sous la forme d'un texte à l'aide de la propriété CSS « -webkit-background-clip ».
De plus, nous utilisons la propriété CSS « -webkit-text-fill-color » pour remplir le texte avec une couleur transparente. Il sera donc rempli de la même couleur que le fond. De plus, nous avons utilisé la propriété CSS animée avec les images clés « Rainbow-keyframe ». Dans les images clés, nous modifions la quantité de rotation des teintes pour faire pivoter les teintes en arrière-plan.
Dans le résultat, les utilisateurs peuvent observer l'effet arc-en-ciel dans le texte.
<html>
<head>
<style>
.rainbow-neon {
font-size: 5rem;
background-image: linear-gradient(45deg, #f3626b, #6181ff, #a25bf2, #ffc100);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: rainbow-keyframe 3s linear infinite;
}
@keyframes rainbow-keyframe {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
</style>
</head>
<body>
<h2> Creating the <i> rainbow Neon text </i> using the CSS </h2>
<div class="rainbow-neon"> It's raining actually. </div>
</body>
</html>
Exemple 3 (texte néon clignotant)
Dans l'exemple ci-dessous, nous avons créé un texte néon clignotant. Ici, nous utilisons la propriété CSS « text-shadow » pour ajouter un effet néon au texte. De plus, nous utilisons l'attribut "animation" pour ajouter une animation clignotante. Dans l'image clé "blink", nous modifions la valeur de la propriété "text-shadow".
Dans la sortie, nous pouvons voir le texte clignotant avec effet lumineux.
<html>
<head>
<style>
.flicker {
font-size: 4rem;
color: blue;
text-shadow: 0 0 1.5rem white, 0 0 3.5rem white, 0 0 5rem white, 0 0 7rem #ff00de, 0 0 8rem #ff00de, 0 0 10rem #ff00de, 0 0 12rem #ff00de, 0 0 15rem #ff00de;
color: #fff;
animation: flicker 0.5s linear infinite;
}
@keyframes flicker {
0%, 5%, 10%, 15%, 20%, 25%, 30%, 35%, 40%, 45%, 50%, 55%, 60%, 65%, 70%, 75%, 80%, 85%, 90%, 95%, 100%
{ text-shadow: 0 0 1.5rem white, 0 0 3.5rem white, 0 0 5rem white, 0 0 7rem #ff00de, 0 0 8rem #ff00de, 0 0 10rem #ff00de, 0 0 12rem #ff00de, 0 0 15rem #ff00de;
}
1%, 6%, 11%, 16%, 21%, 26%, 31%, 36%, 41%, 46%, 51%, 56%, 61%, 66%, 71%, 76%, 81%, 86%, 91%, 96%
{
text-shadow: none;
}
}
</style>
</head>
<body>
<h2> Creating the <i> flickering Neon text </i> using the CSS. </h2>
<div class = "flicker"> This text is flickering. </div>
</body>
</html>
Exemple 4 (texte néon dégradé)
Dans l'exemple ci-dessous, nous ajoutons un dégradé au texte. Nous appliquons le dégradé au texte en utilisant la propriété "background-image".
Dans la sortie, les utilisateurs peuvent observer la couleur du texte avec un dégradé. De plus, les utilisateurs peuvent modifier la couleur du dégradé en transmettant différentes valeurs de couleur à l'argument de la fonction Linear-gradient().
<html>
<head>
<style>
.gradient {
font-size: 3rem;
background-image: linear-gradient(45deg, #00dbde, #fc00ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<h2> Creating the <i> Gradient Neon text </i> using the CSS. </h2>
<div class = "gradient"> Check gradient in Neon text </div>
</body>
</html>
L'utilisateur a appris à créer du texte néon en utilisant uniquement HTML et CSS. Nous avons appris à créer du texte néon avancé à partir de texte néon de base avec des animations telles que des effets arc-en-ciel et des effets clignotants.
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!