Générateurs de coins arrondis en CSS


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.

sitepoint Générateurs de coins arrondis en CSS

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 :

sitepoint2 Générateurs de coins arrondis en CSS

spiffybox Générateurs de coins arrondis en CSS

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. : )

roundedcornr Générateurs de coins arrondis en CSS

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

2 Responses

08.20.08

En javascript, il y a aussi un plugin jQuery appelé: Cornerz
http://charlie-blog.com/wordpr.....ec-jquery/
Il va automatiquement manipuler le Css afin d’obtenir des bords arrondis.

08.20.08

Le mieux serait de creer ses propres images soit même… c’est pas compliquée

Ecrire un commentaire

* Nom et email sont requis (votre mail ne sera pas publié)

Thèmes Wordpress

  • istudio - Clean and Minimalist Business Theme
  • Logical WP Edition
  • Danoska - Wordpress Theme
  • Veninar Portfolio & Business CMS wordpress Theme
  • DENIZY 5 in 1 Business & Portfolio Wordpress Theme
  • Simple Mobile
  • Premium Magazine WordPress Theme
  • eQuator - Global Community Wordpress Theme
  • Black Box - Portfolio and Business WordPress Theme

Actualité

Community Links

Liens soumis par les lecteurs du Journal du Blog. Vous pouvez vous abonner au flux RSS ou soumettre un lien.

Archives