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 :
Ou avec une image en début de ligne :
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 !) :
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 :
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.
Commentaires :
- 2009 meurt, vive 2010Merci Michel pour toutes ces belles leçons de déco. que tu offres à nos blogs.
Ton savoir nous a bien rendu service, cette année et grâce à toi, je me sens bien sur mes pages ET sur celles des copinettes que tu as coaché, tu as bien contribué aussi à mon triturage de méninge (T.bon pour la santé du cerveau).
Te compter parmi mon clan d'amis est un de mes grands plaisirs 2009, l'effet papillon a élargit le cercle et c'est parfait...
Je formule le vœux que l'année à venir soit merveilleuse pour nous tous en échange et partage. Passe le cap en pleine forme et dans la joie. BISOUS du dernier jour. Chantal
Merci