Créer une image ronde en CSS3

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

2 commentaires Donner une note à l'article (5)

Article lu   fois.

L'auteur

Site personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

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

 
Sélectionnez

<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

 
Sélectionnez

<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

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.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

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.