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

    1
    Muti
    Samedi 21 Septembre à 19:26

    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é :)

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :