Comment ajouter l’ombre sur un texte en CSS
Vous pouvez utiliser la propriété CSS text-shadow pour appliquer l’effet d’ombrage (comme le style d’ombrage sur Photoshop) aux éléments de texte. Vous pouvez également appliquer plus d’une ombre en fournissant une liste de valeurs séparées par des virgules.
Exemple 1 :
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px blue;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet.</h1>
</body>
</html>
| Résultat |
|---|
Lorem ipsum dolor sit amet. |
Exemple 2 :
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px 8px blue;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet.</h1>
</body>
</html>
| Résultat |
|---|
Lorem ipsum dolor sit amet. |
Exemple 3 :
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet.</h1>
</body>
</html>
| Résultat |
|---|
Lorem ipsum dolor sit amet. |
Exemple 4 :
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 0 0 3px blue, 0 0 5px green;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet.</h1>
</body>
</html>
| Résultat |
|---|
Lorem ipsum dolor sit amet. |
- Comment remplacer le Checkbox par un icone fontawesome
- Comment empêcher le redimensionnement d’un textarea en CSS
- Comment créer deux div côte à côte de la même hauteur en CSS
- Comment supprimer l’espace entre les cellules d’une colonne d’un tableau en CSS
- Comment placer une bordure à l’intérieur d’un bloc div en CSS
- Comment changer une image au survol avec CSS
- Comment rendre une DIV modifiable en HTML
- Comment changer la couleur du texte au survol en CSS
- Comment ajouter l’ombre sur un texte en CSS
- Comment ajouter l’ombre aux éléments HTML en CSS
- Comment créer un curseur personnalisé avec CSS
- Comment afficher du texte sur une image avec HTML / CSS
- Comment créer un lien avec un bouton HTML
- Comment supprimer l’espace blanc sous une image avec CSS
- Comment changer la transparence du background sans affecter le texte
- Comment créer une ligne verticale en HTML
- Comment changer l’aspect du curseur en CSS
- Comment redimensionner automatiquement une image pour l’adapter à un bloc DIV avec CSS
- Comment changer la couleur de la balise HR avec CSS
- Comment aligner un bloc DIV horizontalement avec CSS
- Comment définir la hauteur d’une DIV à 100% avec CSS
- Comment aligner le texte verticalement au centre d’une DIV avec CSS
- Comment ajuster la taille d’une div à son contenu en CSS
- Comment créer une liste sans puces en HTML
- Comment superposer une div sur une autre div avec CSS
- Comment redimensionner une image en background avec CSS
- Comment désactiver un lien en utilisant uniquement CSS
- Comment aligner verticalement une image dans une DIV en CSS
- Comment écrire des commentaires en CSS
- Comment écrire des commentaires en HTML
- Changer le bouton parcourir d’un input de type file avec CSS
- Personnaliser la balise select avec CSS
- Personnaliser les boutons checkbox avec CSS
- Personnaliser les boutons radio avec CSS
QCMs qui pourraient vous intéresser :
- Questions techniques sur MYSQL
- QCM MySQL Corrigé – Optimisation de requêtes
- QCM Base de données avec correction
- QCM sur PHP
- QCM Symfony
- QCM AngularJS
- QCM React
- QCM HTML / CSS
- QCM Java – Programmation Orientée Objet
- QCM Python
- QCM Cloud Computing
- QCM Framework Spring
- QCM Javascript
- QCM jQuery
- QCM Oracle
- QCM sur GIT – Gestionnaire de version
- QCM Linux – Gestion de processus
- QCM Réseau
- QCM Architecture des ordinateurs
- QCM Securité informatique
- QCM En Informatique Générale
- QCM en C
- QCM en C#
- QCM sur l'algorithmique
- QCM Word
- QCM Excel
- QCM PowerPoint
- QCM Access
Article simple et précis! On peut faire bcp de choses sympas avec test-shadow, il existe également plusieurs outils sur le net permettant de générer le css (celui-ci par exemple) 🙂
Merci pour ce super outil facile 🙂