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

    Aucun commentaire pour le moment

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :