Comment utiliser les Cascading Style Sheets pour embellir le bottom d’une sidebar. "Restez poli mon garçon !" Comme vous pouvez le voir, si vous passez régulièrement par ici, le thème de Blog On WordPress est un vaste chantier. Aujourd’hui, nous allons poursuivre du côté de la sidebar afin de réaliser ceci :
Avant : Après :
DOING IT WHITH STYLE :
En plus du code CSS, nous avons besoin d’une image dont la largeur coïncide avec celle de la sidebar, (ici 200 px) et dont la hauteur peut varier selon l’effet recherché (j’ai choisi 80 px).
Première étape
Création de l’image de fond dans Photoshop :
- Faire une capture d’écran de la page à transformer (utiliser la touche Imp écr ou un logiciel comme Gadwin PrintScreen) puis ouvrir un nouveau document dans Photoshop (ctrl + n) aux dimensions de la capture et y coller celle-ci (ctrl + v).
- Rogner l’image pour isoler la zone de travail et lui donner les dimensions souhaitées (200 x 80). L’image doit comporter une zone supérieure de la même couleur que la sidebar et une zone inférieure de la même couleur que le fond de la page.
- Sélectionner la partie supérieur de l’image et la copier (ctrl + c)
- Ajouter un nouveau calque (shift + ctrl + n) puis coller la sélection.
- Appliquer un effet d’ombre portée au nouveau calque (Layer > Layer Style > Drop Shadow).
- Nous allons maintenant ajouter les feuilles qui débordent. Trouver des images au format PNG (fond transparent, dimensions : 128 x 128). Pour ma part, j’ai choisi des icônes provenant du pack Aero Vista. Ouvrir les images dans photoshop et leur donner l’orientation désirée (ctrl + alt + t).
- Avec l’outil Déplacer (v), faire un glisser-déposer pour transférer les feuilles dans l’image principale en les intercalant entre les deux calques déjà présents.
- Pour terminer, ajouter à nouveau un effet d’ombre aux calques contenant les feuilles. L’image de fond est prête. Elle se nomme sidebarbottom.jpg et est rangée dans un dossier images situé au même endroit que la feuille de styles.
Deuxième étape
Passons aux CSS. L’idée est la suivante : ajouter une marge intérieure en bas de la sidebar (padding-bottom) d’une hauteur correspondant à celle de notre image et y positionner cette dernière en image de fond. Voici le code à insérer dans la feuille de style.
#sidebar {
padding-bottom: 80px;
background-image:url(images/sidebarbottom.jpg); background-repeat:no-repeat;
background-position:bottom;
}
Voila, c’est terminé ! J’espère que ce tutoriel vous a plu et qu’il vous sera utile. Si vous avez une question, une remarque, n’hésitez pas à poster un petit commentaire.
Design par