Publié le 27 avril 2011 par eroan dans CSS, Développement | Aucun commentaire »

Les bandeaux de titres en relief inspirés par les marque-pages sont à la mode. Dans le cadre de la dernière refonte de Scooter System, j'ai eu l'occasion de travailler avec ce type d'éléments graphiques, et j'ai vraiment apprécié leurs qualités ergonomiques et esthétiques. C'est donc tout naturellement que dernièrement, dans le cadre de la refonte complète du site Techno Scoots, je me suis tourné vers eux. J'ai toutefois longuement réfléchi au meilleur moyen de les réaliser, l'objectif étant d'obtenir un code html et CSS le plus propre possible tout en limitant l'impact en termes de poids et de requêtes http.

Sur Scooter System, j'avais opté pour les sprites CSS qui répondent en partie à mes attentes, sauf au niveau du poids des éléments. Pour Techno Scoots, j'ai cherché à limiter les images et en suis arrivé à un constat : seuls les coins en triangles sont véritablement problématiques. Bien qu'il soit possible de les créer à partir de CSS3 (grâce aux sélecteurs :before, :after et à quelques rotate), j'ai préféré me tourner vers des images classiques, à savoir des png-24 transparents de 5x5 pixels. J'ai ensuite encodé ces petits fichiers en base64 afin de les intégrer directement dans le fichier CSS.

Le résultat répond à mes attentes en termes de poids (le fichier CSS est Gzipé par le serveur) et de requêtes http (aucun fichier externe n'est appelé). Après avoir appliqué un background-color (et en option un border-bottom) sur la zone centrale du bandeau, il me restait à trouver une solution pour intégrer proprement ces coins en dessous. Après plusieurs essais, j'ai finalement opté pour un positionnement absolu dans le div enfant. En utilisant les background multiples et en jouant sur les margin et padding, on arrive à un résultat identique sous tous les navigateurs récents, les plus anciens se contentant d'afficher un vide à la place des coins.

Voici le code CSS correspondant à mes travaux sur la colonne latérale (#aside) du site Techno Scoots, en 300 pixels de large :

#aside h2{
font-size:24px;
line-height:38px;
text-align:center;
width:310px;
height:38px;
margin:20px 0 0 -5px;
color:#fff;
text-shadow:1px 1px #8d0000;
background:#c90000;
}
#aside .child{
width:310px;
margin:0 0 0 -5px;
background:url(data:image/png;base64,codeenbase64) 0 0 no-repeat,url(data:image/png;base64,codeenbase64) 305px 0 no-repeat;
}

---