31 décembre 2009

Une image de fond pour le titre ou la date des articles

On peut personnaliser le titre ou la date des articles de différentes façons.
Avec un fond :

 

titre_article001

 

Ou avec une image en début de ligne :

 

titre_article005

 

Dans les deux cas, le sélecteur concerné est "blogbody h3" pour le titre des articles et "blogbody h2" pour la date.

* *
*

1- S'il s'agit d'un fond représentant une bande de couleur avec un dégradé, il suffit de créer une image de quelques pixels de large (ou même d'un seul pixel !) :

titleH

Puis d'ajouter dans le sélecteur :

.blogbody h3 {
          background: url(URL de l'image) center left repeat-x;
}

La valeur repeat-x va permettre la répétition de cette petite image sur toute la ligne, donnant l'illusion d'une seule image :

 

titleH3

 

Ensuite, pour que le texte soit bien centré verticalement, on ajoutera la propriété line-height à laquelle on donnera pour valeur la hauteur de l'image (ici 30px) :

.blogbody h3 {
          background: url(URL de l'image) center left repeat-x;
          line-height: 30px;
}

Enfin, on ajoutera si nécessaire une marge intérieure à gauche (padding-left) :

.blogbody h3 {
          background: url(URL de l'image) center left repeat-x;
          line-height: 30px;
          padding-left: 10px;
}

* *
*

2- S'il s'agit d'une image à placer en début de ligne, il faudra veiller à ce quelle ne soit pas répétée (no-repeat) et qu'elle soit placée au bon endroit (tout-à-fait à gauche, left) :

.blogbody h2 {
          background: url(URL de l'image) center left no-repeat;
}

Pour le reste on procédera de la même façon qu'avec un fond représentant une bande de couleur sans oublier la marge gauche.

titre_article006

Posté par Michal53 à 08:49 - - Permalien [#]
Tags : , , , , , , , ,