Labs - Essai du CSS pour décoration Noël

A l'occasion de Noël mise en application des nouvelles possibilités de style, dans les modules du menu vertical. Je vous recommande de lire complètement avant toutes choses le descriptif de la catégorie lien.

J'utilise l'espace des titres de modules pour insérer des images sur le thème de Noël, comme exemple, il en sera de même pour toute autre décoration.

Le principe est de mettre une image en fond de ce bloc #menu h2, de la positionnée et de placer le titre texte, avec les nouveaux IDs nous pouvons mettre des images diffférentes pour chaque module.

Dans ce bloc titre à chaque module du menu, je positionne une image de fond, selon sa taille et son importance, avec l'attribut "background-position", en laissant assez de place pour le texte du titre.

Pour la position du titre, il faut soit avec l'attribut "text-align" ou en affiner avec la hauteur du bloc "height" et la marge intérieure haute "padding-top". ATTENTION si vous augmentez la marge il faut diminuer la hauteur, car les 2 s'additionnent, pour déterminer la hauteur réelle du bloc.

Règle du module "Articles"

#menu_articles h2
{
background : transparent;
background-image: url(http://DizTest.blog4ever.com/blog/url_artimage-205392-2395498-2657.html);
background-repeat: no-repeat;
background-position : 80% 100%;
height : 40px;
margin-top : 10px;
padding-top : 70px;
text-align : left;
border : none;
}

Règle du module "Photos"

#menu_photos h2
{
background : transparent;
background-image: url(http://DizTest.blog4ever.com/blog/url_artimage-205392-2395518-5529.html);
background-repeat: no-repeat;
background-position : center top;
height : 20px;
margin-top : 20px;
padding-top : 140px;
text-align : center;
border : none;
}

Règle du module "Forum"

#menu_forum h2
{
background : transparent;
background-image: url(http://bricabrac.blog4ever.com/blog/url_artimage-490-1566958-31024.html);
background-repeat: no-repeat;
background-position : center top;
height : 30px;
margin-top : 20px;
padding-top : 70px;
text-align : center;
border : none;
}

Règle du module "Newsletter"

#menu_newsletter h2
{
background : transparent;
background-image: url(http://bricabrac.blog4ever.com/blog/url_artimage-490-806478-7799.html);
background-repeat: no-repeat;
background-position : 50% 50%;
height : 30px;
margin-top : 20px;
padding-top : 170px;
text-align : center;
border : none;
}

Règle du module "Sondage"

#menu_sondage h2
{
background : transparent;
background-image: url(http://bricabrac.blog4ever.com/blog/url_artimage-490-806768-4989.html);
background-repeat: no-repeat;
background-position : 5% 50%;
width : 144px;
height : 30px;
margin-top : 40px;
padding-top : 60px;
padding-right : 40px;
text-align : right;
border : none;
}

Règle du module "Statistiques"

#menu_stats h2
{
background : transparent;
background-image: url(http://bricabrac.blog4ever.com/blog/url_artimage-490-1566956-3309.html);
background-repeat: no-repeat;
background-position : top center;
height : 20px;
margin-top : 40px;
padding-top : 130px;
text-align : center;
border : none;
}

Il manque le module Partenaires, qui pourra être paramétré de la même façon.

Voir également les placements d'images sur cet article lien
Ou celui sur la déco d'Halloween lien