Optimisez votre site: Arrondis en CSS

A la demande de certains clients, qui ont apprécié le design de notre site, nous vous expliquons ici comment effectuer des arrondis en CSS.

Avantages des arrondis en CSS

Cette technique a des avantages incontestables:

  • Vous ne perdez plus votre temps à faire des images avec des arrondis pour arrondir les angles de votre site.
  • Votre site est plus agréable à visiter, les internautes préférant des angles arrondis.
  • Vous pouvez obtenir des effets d’ombre intéressants
  • Un même CSS peut être employé à plusieurs endroits sur vos pages.
  • Vous pouvez obtenir de jolis dégradés dans votre page sans image de fond.
  • Vous accélérez considérablement la vitesse d’affichage de vos pages car vous n’utilisez pas d’images pour faire vos cadres arrondis.
  • Google étant particulièrement attentif à la vitesse d’affichage de vos pages, vous ne pourrez qu’améliorer votre positionnement car votre site sera plus rapide à l’affichage.

Exemple d’arrondis en CSS

L’utilisation des arrondis en CSS es visible sur notre page d’acceuil : http://www.espace2001.com

Si vous affichez le code source de cette page vous trouverez le code CSS utilisé pour nos cadres exemple :

div.arr220v{ padding-bottom:1px;padding-right:1px;padding-left:1px;margin-left:12px;width:218px;border: 1px solid #696;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;-webkit-box-shadow: #666 0px 2px 3px;-moz-box-shadow: #666 0px 2px 3px;box-shadow: #666 0px 2px 3px;background: #3FD62E;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#3FD62E), to(#0B7506));
background: -moz-linear-gradient(#3FD62E, #0B7506);
background: linear-gradient(#3FD62E, #0B7506);}

Ce code CSS correspond au cadre vert dans notre barre de menu de gauche. Dans le code html vous placez la balise <div class=”arr220v”> en haut de l’endroit où vous voulez placez le cadre et </div> à la fin du cadre et c’est tout.

Génération automatique de votre code d’arrondi en CSS

Pas la peine de comprendre exactement comment cela fonctionne, certains sites vous permettent de générer automatiquement le code CSS désiré pour vos cadres arrondis.

Nous avons retenu celui-ci qui nous pourrait le plus simple et le plus adapté à notre propos : http://css3pie.com/

Vous visualisez instantanément le résultat et pouvez modifier l’apparence de vos cadres arrondis à loisir. Le site vous fournit bien sur le code CSS à insérer sur vos pages.