Le PNG au secours de la texture web
Par ephase le mercredi, juillet 23 2008, 11:53 :: Création :: Lien permanent
Soit un site découpé en trois parties : l'entête, le contenu et le pied de page. Ce site utilise une texture représentant une page de cahier à spirale arrachée qui se repète pour le contenu. Comment faire en sorte que la texture jointe parfaitement entre le contenu et le pied de page? Durée de l'épreuve : 10 minutes. attention, retournez les copie, c'est parti ! (mon kiki)
La jointure entre l'entête et le contenu n'est pas le sujet ici pour une raison toute simple : le bas de l'image d'entête jointe parfaitement avec haut de la texture du contenu .Mais il en est tout autre pour celle contenu <-> pied de page. Voici pour commencer les images de fond en question :
Effectivement, si on les jointes tel quel, elles forment un bloc parfait. Mais le contenu n'est pas un bloc de taille fixe en hauteur, il s'adapte au propos. Il se peut donc que l'on obtienne ceci :
Nous remarquons que nos textures jointes parfaitement du côté droit, mais du fait de la nature irrégulière du côté gauche, il en est tout autrement...
La solution
Elle est relativement simple, il suffit d'utiliser comme image de fond des PNG transparents. Nous laisserons alors un "vide" de 20 pixel de haut sur notre image du pied de page. Du coté gauche, nous collerons alors un élément graphique qui masquera la jointure comme l'exemple ci-dessous (Le damier symbolisant les parties transparentes de notre images) :
Il suffira alors de remplir notre CSS comme ceci :
#content {
margin 30px 30px 50px 30px;
background:transparent url(../imgs/fnd_content.png) repeat-y 0pt 0pt;
}
#footer {
position:relative;
top:-20px; /*on le décale de 30 pixels de haut*/
height:200px;
background:transparent url(../imgs/fnd_footer.png) no-repeat 0pt 0pt;
}
La marge du bas de notre bloc contenu (#content) est volontairement plus élevée de 20 pixel pour combler le décalage de notre pied de page (#footer)
Et voilà le résultat :
Alors? bonne note ou pas?
Commentaires
Le png au secourS de la texture Web non ?
Article intéressant par ailleurs merci bien mon brave
Pas bête ! Je tenterai dans un design...
Très intéressant!
Le petit pb c'est que ca ne marche pas tel quel pour IE6 (encore + de 20% de mes visites)
Bonjour à tous...
@Eggy : Merci pour la faute, je vais corriger
@Geoorges : Je vais essayer, mais le soucis des PNG transparents peux se régler par un patch/hack css (mais je pense que le positionnement ne sera pas bon quand même...)
Excellente idée !
En allant plus loin sur l'utilisation de la transparence, tu pourrais peut-être te passer du badge qui masque la transition... si tu fais un pied de page dont les 20 pixels du haut se fondent en dégradé (pas de marge transparente en haut de ton fichier PNG dans ce cas, évidemment), et que tu décales de 20px vers le haut (comme ce que tu fais), ça devrait se fondre avec le bord existant sans trop se voir... enfin je ne peux pas trop vérifier ce que je dis pour l'instant, mais je crois que ça peut fonctionner. Ceci dit, le badge est une bonne idée parce qu'il participe au côté rigolo du design
Geoorges > il existe tout un tas de bidouilles pour faire fonctionner la transparence PNG sous IE, il suffit de savoir si tu es prêt à investir du temps pour mettre en place ces solutions, ou si tu préfères informer tes 20 % de visiteurs IE des problèmes d'affichage sous leur navigateurs (comme ce qu'a fait Stéphane Deschamps sur son site nota-bene.org).
@Pierre : oui ça peux être une solution, mais elle ne fonctionnera pas ici à cause du côté inégal du bord gauche de la texture, on verrai en transparence certains bord (je ne sais pas si je me fait bien comprendre...).
Hm... je viens de faire un test sous Photoshop. J'ai pris les deux images que tu fournis (le fond pour le contenu et pour le pied de page), je fais un masque pour le pied de page avec un dégradé allant d'opaque à transparent sur les 20 pixels du haut du pied de page, et en baladant le résultat sur le fond de la partie "contenu", je ne vois pas de truc choquant (pas de coupure franche comme sur ta capture).
Je ne sais pas si je me fais bien comprendre par contre, désolé !
Il y a aussi une astuce possible avec javascript (mince j'ai dit le mot qu'il ne faut pas?).
Si par exemple l'id de ton div de contenu s'appelle "contenu"
var hauteur = document.getElementById('contenu').offsetHeight;
Te permet de récupérer le nombre de pixel de hauteur de ton contenu.
Il faut alors faire un petit calcul pour savoir combien il manque de pixels pour connaître le multiple de la hauteur de ton pattern qui est juste supérieur ou égale à la hauteur de "contenu", mettre ça en variable "tahauteurfinale".
tahauteurfinale = blabla formule de math avec la variable hauteur et celle de ton pattern;
Et puis redéfinir dynamiquement la valeur "height" du div "contenu" en javascript avec
document.getElementById('contenu').style.height=tahauteurfinale+"px";
Comme ça tu as toujours ton div de contenu qui fait la taille d'un multiple de ton pattern de texture et donc joint parfaitement en bas.
Mettre ça en fonction et le passer dans le body onload, où dans un AddEvent.
L'inconvénient c'est si ton pattern de texture a une hauteur trop importante, dans ce cas le rajout d'espace potentiel peut rajouter un espace vide conséquent au contenu. Mais s'il n'est pas trop gros (100 pixels max à mon avis) ça va.
@Pierre oui je comprends bien, au passage, sympa ton blog
@Tof : oui c'est aussi une bonne méthode (je n'y avais pas pensé...) mais si le motif a été réduit ici, il fait 900px de haut en réalité (pour éviter une trop grande répétition...)