-
[CSS] Ajouter une ombre au titre et au slogan de l'en-tête
Dans l'en-tête de ce blog vous pouvez voir un ombrage sous le titre et le slogan (pour peu que vous ayez un navigateur assez récent).
Cela est très facile à réaliser avec du code CSS.
Voir cet article pour une première découverte du CSS : Mon premier code CSS - images au coins arrondis avec ombrage
La structure d'un blog nous révèle que le titre a un identifiant titre_header et le slogan un identifiant slogan_header.
Nous allons donc définir le style pour chacun de ces identifiants.
Il suffit de rajouter un dièse (#) devant l'identifiant et de mettre entre accolades le style voulu.Pour un ombrage de texte il faut utiliser le style text-shadow.
Ce style est expliqué en détail par exemple ici : CSS3 Shadows.
On précise une position horizontale et verticale de l'ombre, une distance du flou et une couleur.
Voici les codes utilisés pour ce blog :
Code CSS pour le titreTout sélectionner
#titre_header {text-shadow:3px 3px 5px #777}
Code CSS pour le sloganTout sélectionner
#slogan_header {text-shadow:2px 2px 3px #AAA}
Ces codes sont à insérer dans le menu « Apparence » => « Modifier le thème » => « Ajouter du CSS ».
« [CSS] Les sélecteurs CSS, comment formater une liste hiérarchique ?[CSS] Mettre en évidence le titre d'un article »
-
Commentaires
2AssaMercredi 21 Avril 2021 à 03:29
Bonjour,
Plus qu’un commentaire, j’aurais une question à vous poser.
J’aimerais faire apparaître le « chapô » dans l’envoi des newsletters et pas seulement le titre de l’article.
Est ce possible?
Merci
Cordialement
E Velasco
Bonjour,
J’aurais une question : j’aimerais faire apparaître le » chapô » et pas seulement le titre de l’article chez les destinataires de l’envoi de mes newsletters.
Est ce possible?
Merci
Suivre le flux RSS des commentaires
Ajouter un commentaire
Javascript, CSS, HTML et astuces diverses
-
Bienvenue dans ce blog dédié à la personnalisation de votre blog Eklablog.
Vous êtes perdus dans ce blog ?
Post-it Structure d'un blog Eklablog (en-tête, contenu, menus...) -
Créer mon blog
Article très clair, j'ajouterai juste 2 remarques : on peut ajouter une infinité d'ombres sur un même élément, pour faire des effets variés (perspective, multicolor...). Pour cela il faut juste séparer chaque série de text-shadow par des virgules. J'utilise un générateur de css pour cela (MakingCss). L'avantage étant qu'on peut générer des ombres complexes en quelques clics, avec tous les préfixes navigateurs utils pour un maximum de compatibilité :)