Créer une image ronde en CSS3

Avec le CSS3, on peut faire des choses qui nécessitait autrefois l'utilisation d'un logiciel de design (type Photoshop ou Gimp). Par exemple comment rendre une image ronde? Nous allons voir comment le faire tout d'abord avec une technique qui ne marche que sous chrome et safari et ensuite une technique qui fonctionne sur tous les navigateurs modernes (Firefox, Opera, Safari, Chrome et IE9).

Technique pour Chrome et Safari

 

1

Explications

le principe est relativement simple, il suffit d'utiliser la propriété border-radius CSS3 (et ses équivalents pour les navigateur : -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.

<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="http://static.debray-jerome.fr/49/images/slideshow/1.jpg" alt="1"/> </div>

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 balise image et d'utiliser à la place la propriété background et cela fonctionnera sous tous les navigateurs (y compris Safari et Chrome).

 
<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(http://static.debray-jerome.fr/49/images/slideshow/1.jpg) no-repeat 0px 0px;" >     &nbsp; </div>

A partir de cette exemple, on peut ainsi décliner cet exemple avec d'autres propriétés CSS

avec un box-shadow

 

2

Compatible tous navigateurs

 

avec une bordure

 

3

Compatible tous navigateurs

 

Téléchargement

le fichier css des démos

Conclusion

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

retourner en haut de la page