[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 :

#titre_header {text-shadow:3px 3px 5px #777}

#slogan_header {text-shadow:2px 2px 3px #AAA}

Ces codes sont à insérer dans le menu « Apparence » => « Modifier le thème » => « Ajouter du CSS ».