Créer une image ronde en CSS – Cours et formation gratuit

(1)

Créer une image ronde en CSS3

par debray jerome (Dji programmation web2 et design) (Blog)

Date de publication : Dernière mise à jour :

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)

Créer une image ronde en CSS3 par debray jerome (Dji programmation web2 et design) (Blog)

- 2 -

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'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts.

http://debray-jerome.developpez.com/articles/creer-une-image-ronde-en-css3/

I - Technique pour Chrome et Safari...3

II - Technique pour tous les navigateurs...3

III - D'autres exemples...3

IV - Conclusion... 3

V - Remerciements... 4

(3)

- 3 -

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

.roundedImage{

overflow:hidden;

-webkit-border-radius:50px;

-moz-border-radius:50px;

border-radius:50px;

width:90px;

height:90px;

}</style>

</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

.roundedImage{

overflow:hidden;

-webkit-border-radius:50px;

-moz-border-radius:50px;

border-radius:50px;

width:90px;

height:90px;

}</style>

</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.

(4)

- 4 -

V - Remerciements

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