Créer une image ronde en CSS3

debray jerome

Avec le CSS3, on peut faire des choses qui nécessitaient autrefois l'utilisation d'un logiciel de design (type Photoshop ou Gimp). Par exemple, comment rendre une image ronde ? Il existe deux méthodes : tout d'abord une technique qui ne fonctionne que sous Chrome et Safari, et ensuite une technique qui fonctionne sur tous les navigateurs modernes (Firefox, Opera, Safari, Chrome et IE9).

Compatibilité : Chrome, Safari, Firefox, Internet Explorer 9, Opera

Commentez

- Titre : Créer une image ronde en CSS3

- Auteur : debray jerome

- Parution : 13 décembre 2010

- Licence : Copyright ® 2010 debray jerome. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Technique pour Chrome et Safari

- II. Technique pour tous les navigateurs

- III. D'autres exemples

- IV. Conclusion

- V. Remerciements

I - Technique pour Chrome et Safari

Le principe est relativement simple, il suffit d'utiliser la propriété border-radius CSS3 (et ses équivalents pour les navigateurs : -moz-border-radius, -webkit-border-radius). Cette propriété est appliquée sur un élément qui contient une image. On lui applique également la propriété overflow avec pour valeur hidden.

Démo

<style type="text/css">
.roundedImage{
overflow:hidden;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
width:90px;
height:90px;
}
</style>
<div class="roundedImage">
<img src="/images/slideshow/1.jpg" alt="1"/>
</div>

II - Technique pour tous les navigateurs

Vous noterez tout de même que sous Firefox, Opera et Internet Explorer 9, la première technique ne fonctionne pas. Il y a donc une astuce, il suffit de ne pas utiliser de balises image et d'utiliser à la place la propriété background et cela fonctionnera sous tous les navigateurs (y compris Safari et Chrome).

Démo

<style type="text/css">
.roundedImage{
overflow:hidden;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
width:90px;
height:90px;
}
</style>
<div class="roundedImage" style="background:url(/images/slideshow/1.jpg) no-repeat 0px 0px;">
&nbsp;
</div>

III - D'autres exemples

Démo

IV - Conclusion

La technique la plus compatible reste encore de mettre l'image au niveau du div dans la propriété css background mais du point de vue référencement c'est un manque à gagner.

V - Remerciements

Merci à ClaudeLELOUP et à Caro-Line pour leurs relectures attentives.