CSS3 vous permet d'être créatif et d'expérimenter votre conception pour créer des pages Web magnifiques et uniques. Un domaine du design avec lequel CSS vous permet de travailler est la typographie.

Vous pouvez utiliser le famille de polices et ombre de texte propriétés pour créer des effets simples mais remarquables. Vous connaissez peut-être déjà les applications de base de l'ombre de texte en CSS. Cependant, vous pouvez créer un large éventail de styles avec ces propriétés.

Dans cet article, vous apprendrez un moyen efficace de créer différents effets d'ombre de texte en utilisant HTML et CSS.

Premiers pas avec HTML et CSS

Vous pouvez copier et coller ces exemples de code pour obtenir l'effet d'ombre de texte que vous préférez. Commencez par créer un

index.html

 ombre #01 


href=" https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap"
rel="feuille de style"
/>
 ombre #02 


href=" https://fonts.googleapis.com/css2?family=Monoton&display=swap"
rel="feuille de style"
/>
 ombre #03 


href=" https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap"
rel="feuille de style"
/>
 ombre #04 


href=" https://fonts.googleapis.com/css2?family=Rampart+One&display=swap"
rel="feuille de style"
/>
 ombre #05 


href=" https://fonts.googleapis.com/css2?family=Faster+One&display=swap"
rel="feuille de style"
/>
 ombre #06 


href=" https://fonts.googleapis.com/css2?family=Eater&display=swap"
rel="feuille de style"
/>
 ombre #07 


href=" https://fonts.googleapis.com/css2?family=Codystar&display=swap"
rel="feuille de style"
/>

style.css

corps {
transformation de texte: majuscule ;
hauteur de ligne: 1 ;
text-align: centre ;
taille de la police: 5rem ;
affichage: grille ;
écart: 4rem ;
}

Maintenant, passons en revue 11 exemples d'ombres de texte à essayer.

En rapport: Comment changer le texte de votre site Web avec la propriété CSS font-family

Mystique

Mystic est un style vitreux donnant un effet de transition cool sans utiliser le transformer biens. C'est un effet super simple, mais esthétique, pour un site Web audacieux et axé sur la croissance.

Sortir

HTML

 Ombre #01 
Mystique

CSS

corps {
couleur de fond: #5e5555 ;
}
.mystique {
font-family: 'Bowlby One', cursif ;
couleur: rgba (255, 255, 255, 0,596) ;
text-shadow: 20px 0px 10px rgb (0, 0, 0);
}

monotone

Il s'agit d'un effet de texte ludique utilisant la police « Monoton ». Vous pouvez jouer avec le texte et la couleur de l'ombre pour correspondre aux couleurs primaires de votre site Web.

Sortir

HTML

 Ombre #02 
monotone

CSS

.monoton {
font-family: 'Monoton', cursif ;
taille de la police: 15rem ;
couleur: rvb (255, 0, 0);
opacité: 0,5 ;
text-shadow: 0px -78px rgb (255, 196, 0);
}

Élastique

C'est un style sympa utilisant la police "Bungee Shade". Combiné avec un fond sombre, il produit un effet brut avec un sentiment de suspicion.

Sortir

HTML

 ombre #03 
Élastique

CSS

corps {
couleur de fond: #222 ;
}
.bungee {
font-family: 'Bungee Shade', cursif ;
couleur: rvb (160, 12, 12) ;
opacité: 0,9 ;
text-shadow: -18px 18px 0 rgb (66, 45, 45) ;
}

Radioactif

Vous pouvez utiliser cet effet pour les signes d'alerte ou de danger. Il utilise la police « Rampart One ».

Sortir

HTML

 ombre #04 
Radioactif

CSS

corps {
couleur d'arrière-plan: #27292d ;
}
.radioactif {
font-family: 'Rampart One', cursif ;
couleur: rvb (97, 214, 43) ;
opacité: 0,6 ;
text-shadow: -18px -18px 20px rgb (87, 255, 9);
}

Sprint

Cet effet de texte en cours d'exécution utilise la police « Faster One », le ombre de texte propriété, et un ::aprèspseudo-élément avec le même contenu que le texte. Cela crée un effet de « doublement ».

Sortir

HTML

 ombre #05 
Sprint

CSS

corps {
couleur d'arrière-plan: #27292d ;
}
.sprint {
font-family: 'Faster One', cursif ;
taille de la police: 10rem ;
couleur: rgba (255, 0, 242, 0,322) ;
text-shadow: -20px -108px 0px rgba (255, 255, 255, 0,445) ;
interlettrage: 1rem ;
position: relative ;
}
.sprint:: après {
contenu: 'sprint' ;
position: absolue ;
haut: 215px ;
à droite: 300 pixels ;
}

Épineux

Cet effet de texte épineux horrible utilise la police « Eater ». Vous pouvez essayer de décaler le ombre de texte vers le bas à droite à la place.

Sortir

HTML

 ombre #06 
Épineux

CSS

.piquant {
font-family: 'Eater', cursif ;
texte-ombre: -18px -18px 2px #777 ;
}

Codystar

L'ombre de texte peut agir comme un contour flou mais visible du texte. Cet effet lumineux fait des merveilles avec la police « Codystar ».

Sortir

HTML

 ombre #06 
Codystar

CSS

.codystar {
font-family: 'Codystar', cursif ;
font-weight: gras ;
couleur: rvb (55, 58, 255) ;
text-shadow: 1px 1px 10px rgb (16, 72, 255), 1px 1px 10px rgb (0, 195, 255);
}

Royaume

Vous pouvez obtenir une typographie faisant autorité avec cet effet d'ombre. Il utilise le ::avant pseudo-élément et le transformer propriété d'incliner l'ombre.

Sortir

HTML

 ombre #08 
Royaume

CSS

corps {
couleur de fond: #5e5555 ;
}
.Royaume {
Couleur blanche;
famille de polices: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif ;
taille de la police: 10rem ;
hauteur de ligne: 1 ;
text-align: centre ;
}
.kingdom--shadow:: avant {
couleur: #000 ;
contenu: attr(données-texte);
marge supérieure: 0.7rem ;
position: absolue ;
transformation: perspective (205 px) rotation X (38 degrés) échelle (0,84 );
indice z: -1 ;
}

Codeur

Ce brillant et positif ombre de texte effet transmet une personnalité de site Web consciente et motivée. Vous pouvez l'ajouter à votre site Web pour produire un look smokey simple.

Sortir

HTML

 ombre #09 


Manger 

Dormir 

Code 

Répéter

CSS

corps {
couleur de fond: #5e5555 ;
}
div {
famille de polices: Verdana, Genève, Tahoma, sans-serif ;
remplissage: 40 px ;
marge: 0px automatique ;
font-weight: gras ;
hauteur de ligne: 5,8 rem ;
alignement du texte: gauche ;
couleur: rvb (94, 94, 94) ;
} 
.coder-life {
ombre de texte: 5px 5px #ffff00 ;
filtre: ombre portée(-10px 10px 20px #fff000);
}

Élégant

Si vous aimez le minimalisme, cet effet d'ombre de texte vous convient parfaitement. Comme il utilise une grande taille de police, nous avons réduit le l'espacement des lettres et appliqué le ombre de texte propriété pour créer cet effet.

Sortir

HTML

 ombre #10 


s
h
r
une
ré
ré
h
une

CSS

.élégant {
famille de polices: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif ;
taille de la police: 10rem ;
interlettrage: -1rem ;
Couleur blanche;
ombre de texte: -18px 8px 18px #b4bbbb ;
}

Espiègle

Le contour fin et gras rend ce texte attrayant et vivant. Vous pouvez jouer avec le ombre de texte propriété sans rayon de flou à différentes positions. Les ombres de texte s'appliquent à tous les caractères, y compris les entités HTML telles que ♥. Vous pouvez utiliser un Tableau de référence des entités de caractères à explorer davantage.

Sortir

HTML

 ombre #11 
Le codage est

CSS

.espiègle {
font-family: 'Baloo Tamma', cursif ;
couleur: #fff ;
interlettrage: 0.2rem ;
ombre de texte: -2px -2px 0px #888,
4px 4px 0px #888,
7px 7px 0px #888;
}

Continuez à expérimenter avec les effets d'ombre avancés

Les ombres de texte sont un moyen simple et efficace d'améliorer la conception de votre site Web et de rendre votre site Web attrayant. Vous pouvez également expérimenter différents effets d'ombre. Vous pouvez en savoir plus sur les effets d'ombre portée pour continuer votre parcours CSS.

Naïf Mourya (15 articles publiés)

Naincy se spécialise dans la création de sites Web hautement réactifs et d'une stratégie de contenu efficace ainsi que dans des copies Web. Elle est une rédactrice technique indépendante qui garde un œil attentif sur les technologies tendances.

Plus de Naincy Mourya