Lorsqu’on est graphiste web on peut être amené à utiliser des formes à bordures arrondies dans les créations. Mais voilà au moment de passer à l’intégration de la maquette pour créer le site internet, l’intégrateur Web doit utiliser la propriété appelée border-radius : faire des cercles n’a jamais été aussi facile qu’avec CSS3.

Voici la propriété CSS avec la valeur qui rend éléments ressemblant à un cercle :

Par exemple, si vous voulez faire un élément qui ressemble à un cercle sa hauteur et la largeur doivent être égaux. Si la hauteur et la largeur de l’élément ne sont pas égaux, vous obtiendrez un ovale.

Pour le support multi-navigateurs le modèle doit être complété par des préfixes différents suivant le fournisseur de border-radius propriété CSS et PIE. Ajoutant ainsi le support pour les anciennes versions de navigateurs tels que Safari, Chrome, Firefox et autres. PIE ajoute le support pour IE7 et IE8, et avant qu’il ne commence son travail le PIE doit être ajouté à un site Web tel que décrit dans l’article suivant: CSS3: Progressive Internet Explorer (PIE).

Voici styles finales avec support multi-navigateurs:

Voyons comment ils fonctionnent avec des éléments div:

SOURCE : Article sur BASICuse

Catégories : La minute coding

Claude BUENO

Je suis passionné par les technologies de l'information et de la communication. Ma mission : accompagner les clients dans leur transformation digitale. Je blogue depuis 2008 sur les sujets numériques. Je suis fan de Star Wars, Vikings et Game of Thrones. J'habite à Tours.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Articles similaires

La minute coding

Comment créer votre premier projet Angular ?

Dans cet article, je vous propose de découvrir les bases du framework web Angular en vous montrant comment créer votre premier projet. Après une petite introduction à Angular et les quatre piliers de sa conception, Lire la suite…

La minute coding

Comment créer votre première application mobile avec Cordova ?

Depuis quelque temps je m’intéresse au développement pour mobiles et plus précisément pour Android. A travers ce billet, je vais vous présenter comment créer votre première application mobile avec Cordova sans connaître le langage natif Lire la suite…

La minute coding

Comment gérer son code avec Git et GitHub ?

Collègue développeur, je viens te parler d’un moyen efficace de suivre l’évolution de ton code sans rien perdre des modifications que tu as pu faire tout au long de la vie de ton projet. Le Lire la suite…