tbr 13 Posté(e) le 17 septembre 2009 Partager Posté(e) le 17 septembre 2009 Allez hop, soyons fous ! J'ai l'intention de (vous) montrer comment créer un header dynamique en css3, en espérant que j'y parviendrai. But de la manoeuvre : un header qui reste proportionné à la taille de l'écran et dont les éléments se positionnent relativement et en transparence. Dans beaucoup de site web, le header constitue la partie supérieure de la mise en page, d'où le nom. Ce header est illustré d'une ou plusieurs images en composite (effets, etc.) mais le plus gros défaut est que ces images sont statiques, autrement dit, elles ne "suivent" pas les redimensionnements dynamiques des sites les plus aboutis. De plus, les éléments des images restent "collées", si l'on peut dire, en ce sens... et vous allez comprendre ce que je veux dire par coller... que chaque élément important de l'image ne peut être changé de place. La partie du travail de création d'une ou de plusieurs images se fera avec votre logiciel préféré, l'essentiel est au final de sauvegarder chaque élément en pgn 24bits transparents. La partie dynamisation de la ou des images sera faite en css3 principalement... et en css2 pour les parties moins expérimentales La partie positionnement des éléments d'images sera effectuée non seulement grâce au , au css mais en plus grâce au positionnement relatif.Ainsi donc, on pourra respecter n'importe quelle résolution puisque l'image se proportionnera tandis que ses composants se placeront les uns en fonction des autres, les effets de transparence aidant. Les éléments de l'image finale sont composés d'un fond et de 3 images, le tout en png24transp. Chacune des trois images, le fond aussi si l'on veut, peut être placé selon sa propre convenance... ou pas. Et maintenant, je commence... Lien à poster
tbr 13 Posté(e) le 17 septembre 2009 Auteur Partager Posté(e) le 17 septembre 2009 La dynamisation se fait en css3. Il suffit pour cela d'ajouter au code css existant les fonctions et attributs nécessaires. ... mais je me rend compte que sans image, mes propos sont difficiles à appréhender. (j'hésite un peu car elles sont grosses) Lien à poster
TeKa 8 Posté(e) le 18 septembre 2009 Partager Posté(e) le 18 septembre 2009 Sacrément sympathique. J'ai lâché le développement web et le CSS en en version 2, mais je vois que les promesses du langage sont toujours très hautes. J'ai juste la trame qui ne prenait pas 100% de la fenêtre, mais je suis en 1366px de large. Lien à poster
tbr 13 Posté(e) le 18 septembre 2009 Auteur Partager Posté(e) le 18 septembre 2009 C'est bien là qu'est le souci puisque avec firefox, la trame ne suit pas la largeur de la fenêtre alors que ça devrait en toute logique le faire. Après tout, ça fonctionne très bien dans Safari et Opera et dans beaucoup d'autres navigateurs (cf lien browershot de mon post précédent). Je vais re-travailler pour régler ce "problème". Le truc ultra simple aurait été d'aplatir tous les composants png en un seul élément mais où se serait placé le défi ? Là, j'ai un fond, un élémet gauche et un élément droit qui s'entrecroisent; ça fait des trucs assez fun. Lien à poster
Messages recommandés