Le Journal du Blog - L’actualité des blogs

Il n’est pas toujours évident de réaliser des coins arrondis, de les placer correctement et quand bien même vous y arrivez vous vous rendez compte que vous pouvez tout changer ce que vous venez de faire car ce méchant personnage qu’est IE vous affiche le tout sous forme d’une grosse bouillie de pixels.

Je vous propose donc aujourd’hui de sauver le peu de cheveux qu’il vous reste en partageant quelques générateurs bien sympathiques qui s’occuperont pour vous de gérer tout ça.

Commençons par Spanky, l’outil de SitePoint un site qui aide principalement les développeurs web depuis 1997.

Spanky génère simplement en CSS des coins arrondis selon votre convenance.

Ses avantages sont les suivants :

• Il offre des images extensibles donc cela marche avec n’importe quelle dimension de cadre.
• Il ne se sert pas de JavaScript.
• Il permet de faire des angles de taille souhaitée sans alourdir le poids des images fournies.

Il vous suffit donc de préciser la couleur de fond, la couleur de vos angles, l’angle de ceux-ci et enfin les tags auxquels ces angles seront associés (H1,H2..).

Pour finir vous devrez adapter le bout de code HTML fourni à votre guise en gardant bien le nom du div, enregistrer les quatre images et faire un copier/coller du code CSS.

Pour visualiser un peu mieux le travail du CSS voici un petit schéma :

Passons maintenant à Spiffy Box proposé par le site du même nom. Le principe est enfantin encore une fois, il vous suffit de régler comme vous le voudrez les quelques paramètres comme la couleur de fond, de premier plan et de la bordure ainsi que l’angle souhaité. La différence réside ici dans le fait que ce qui est généré est non pas quatre angles mais une seule image, c’est pourquoi vous devrez préciser aussi sa taille (width et lenght).

Pour finir la démarche est la même, à savoir : enregistrer l’image, copier/coller le HTML et le CSS que vous pourrez toujours fignoler à votre convenance. : )

Finissons avec un dernier générateur et non un des moindres puisque celui-ci vous permettra de créer simplement des dégradés, direction roundedcornr.com.

Quelques nouveaux paramètres font leur apparition comme la couleur du haut et celle du bas du dégradé ainsi que l’angle de celui-ci que vous pouvez préciser en pixels ou en degré. Le reste est basique comme la couleur de fond ou l’angle des coins.

Même procédure que précédemment, copier/coller des différents codes et enregistrer les images fournies. : )

En espérant que cela vous soit utile lors de la création de menus ou autres, n’hésitez pas à partager vos réalisations une fois celles-ci implantées sur votre blog. ; )

Vous avez aimé cet article : abonnez-vous au flux RSS