mercredi 22 décembre 2010

Blocs aux coins arrondis de taille variable sans CSS3

Bon parce que ce blog est aussi mon fourre tout, voici un billet qui n'a rien a voir avec mes précédents articles. Voici donc un petit tutoriel HTML/CSS, pour tous ceux qui ont le soucis de rendre leur site web soigné ET performant.
Et oui je suis un grand fan des possibilités qu'apporte le CSS3. En 2 lignes il est possible d'arrondir un bloc et de lui mettre une ombre portée ce qui évite un travail fastidieux dans Photoshop ou Gimp. Malheureusement outre le fait que le CSS3 n'est pas encore pleinement géré dans tous les navigateurs, qu'il faille rajouter des "-webkit" et "-moz" pour que chaque navigateur compatible l'interprète… Et bien le CSS3 consomme encore pas mal de ressources. Si vous comptez réaliser un bloc de taille variable et qui en prime soit animé, il y a des chances que votre animation manque de fluidité, surtout sur les tablettes et smartphones. Ainsi donc voici un tuto basique qui vous montrera une possibilité parmi tant d'autre de créer un bloc aux bords arrondis, de taille variable, et qui s'anime de manière parfaitement fluide.
Tout d'abords réalisez votre bloc arrondis dans votre logiciel de dessin préféré.


L'art dans la réalisation d'un bloc de taille variable réside dans les propriétés repeat-x et repeat-y du CSS. il y a des zones dans les bordures qui seront dupliquées selon ces 2 axes. Pour ma part j'ai créé un bloc avec un degradé jusqu'à un certain niveau, je ne pouvait donc pas placer ma zone de duplication ou bon me semblait.

Disposez donc les règles qui vont délimiter les différentes portions du bloc. Si vous souhaitez que la taille du bloc ne varie que sur un axe alors découpez votre bloc en 3 morceaux et non en 9 comme je l'ai fait. La partie centrale du bloc, celle qui sera dupliquée doit toujours être la plus "mince" possible, du coup 1 pixel. Une fois vos règles positionnées le découpage peu commencer, faites 1 fichier pour chaque morceau. Attention certain morceau doivent avoir la même hauteur ou largeur sous peine d'être décalés.


Une fois le découpage effectué, il faut passer aux chose sérieuses et mettre le main dans le code.

Codez moi donc un joli tableau, de 3 ou 9 case selon le nombre d'axe que vous souhaitez faire varier la taille. Dans chaque case, mettez la taille de votre image, ainsi que l'image en question en background. A la fin n'oubliez pas de mettre les style de margin et de padding à 0, sous peine d'avoir des écarts entre les cases.


Voila, normalement vous y êtes et pour faire varier la taille de ce bloc, il ne reste plus qu'a jouer sur la taille de la case centrale de votre tableau.
- C'est bien beau tous ça mais ou je met mon contenu dans ce bloc?
Ahah, en effet, l'astuce réside dans la création d'un bloc "div" en dessous de votre joli tableau, et ensuite de lui affecter un margin-top négatif pour le remonter et le superposer devant votre tableau. Mettez votre contenu dans ce bloc et n'oubliez pas de rajouter un style "position:relative;" pour que IE ne fasse pas sa crise.



Voilà, vous avez normalement un joli bloc de taille variable, personelement j'anime ensuite ce bloc via JQuery, et ça marche nikel. J'espère avoir été assez clair dans ce petit tuto qui est aussi mon premier :) Je vous met un zip avec les sources via ce lien. N'hésitez pas à posez vos question si vous en avez. Allez bon courage.

1 commentaire:

  1. C'est énorme cette coïncidence ==> J'ai justement essayer de faire ça aujourd'hui avec IE.
    Et j'ai bien galéré, put*** de IE de mer**.

    RépondreSupprimer