Partagez | 
 

 [CSS] Les angles arrondis

Voir le sujet précédent Voir le sujet suivant Aller en bas 
avatar

Amaranthe

Doyenne

Bons Points (BP) : 147
MessageSujet: [CSS] Les angles arrondis   Mer 2 Jan - 23:31

Les angles arrondis



Aujourd'hui, nous allons jouer avec la quadrature du cercle, puisque nous allons voir un peu plus en détail comment jouer avec la fonction border-radius, celle qui permet d'arrondir les angles d'un bloc, en CSS. Rappelons-nous tout d'abord que tout bloc a à la base la forme d'un rectangle, exceptionnellement d'un carré. Pour arrondir les angles de ce carré, il faut employer la fonction border-radius, qui se présente comme ceci (pour un radius de 25px) :
Code:
border-radius:25px;
-moz-border-radius:25px;
-webkit-border-radius:25px;
-ms-border-radius:25px;
Sachant que l'emploi de chacune de ces deux sous-fonctions correspondra à quelque chose de différent :
-> -moz-border-radius ne s'applique qu'aux versions antérieures à la 4.0 de Mozilla Firefox
-> -webkit-border-radius ne s'applique qu'aux navigateurs en webkit, soit Chrome et Safari, dans leurs versions antérieures aux versions 5.0.
-> -ms-border-radius ne s'applique qu'aux versions d'internet explorer (antérieures à Internet Explorer 9.0).
Notons enfin que l'emploi des deux sous-fonctions n'est qu'optionnel : les dernières versions d'Opera, de Chrome, de Safari, d'Internet Explorer et de Mozilla Firefox ont directement intégré la fonction border-radius. Donc, si vous n'utilisez pas de versions anciennes (antérieures à IE 9, Safari 5.0, Chrome 5.0, Firefox 4.0 et Opera 10.5), vous pouvez simplement vous contenter du border-radius seul, ça ira très bien. Wink C'est ce que je ferai dans la suite du tutoriel, par souci de clarté.

Enfin, notez que le calcul du radius est effectué comme ceci par le navigateur : un bloc a une hauteur et une largeur définie soit par le code lui-même (fonctions width et height), soit par le contenu dudit bloc ; à chaque angle revient un quart de la surface du bloc. Comme ceci :


Voyons maintenant les possibilités qu'offre le border-radius. N'oubliez pas vos maths ou votre calculette, ça va vous servir. Wink

Arrondir régulièrement les angles d'un bloc



Dans son emploi le plus simple, border-radius permet d'arrondir un angle régulièrement, c'est-à-dire de la même manière horizontalement et verticalement. Ainsi, un angle en border-radius:25px commencera à s'arrondir à 25px de son extrémité théorique à la fois en haut et en bas.


Sur cette image, qui est un zoom sur le radius d'un angle, j'ai choisi un arrondi bien visible de 150px. Vous voyez que pour cet angle supérieur gauche d'un bloc quelconque, l'arrondi commence aux bords supérieur droit et inférieur gauche de l'image, soit à 150px de l'endroit où aurait dû être formé l'angle droit (coin supérieur gauche de notre image, donc). Appliqué à un div de 450*350px, ce border-radius donne des effets de ce genre :

Spoiler:
 

Et voici le code employé pour arriver à ce résultat :

Code:
<div style="width:450px; height:350px; border-radius:150px; background-color:#009966;"></div>

Vous pouvez d'ailleurs même obtenir un cercle :

Cercle:
 

Code:
<div style="width:200px; height:200px; border-radius:100px; background-color:#009966;"></div>

Jusqu'ici, les choses sont encore très faciles : une fonction, une valeur, tout est parfait. Mais... on peut faire mieux encore !

Arrondir irrégulièrement les angles



Mettons maintenant que vous voulez arrondir "irrégulièrement" un angle, c'est-à-dire l'arrondir davantage d'un côté (verticalement ou horizontalement) que de l'autre. La propriété border-radius permet de faire des choses du genre, il suffit de lui donner deux valeurs et de les séparer par une barre oblique (/). La première des deux valeurs représente l'arrondi horizontal, tandis que la seconde représente l'arrondi vertical. Comme ceci, pour un bloc de 450*150px.

Spoiler:
 

Code:
<div style="width:450px; height:150px; border-radius:150px/50px; background-color:#009966;"></div>

Vous remarquerez donc que la fonction width correspond à la première des deux variables du border-radius, tandis que la fonction height correspond à la seconde variable.

Arrondir chaque angle différemment



Eh oui, ça aussi, c'est possible ! Pour arrondir différemment chaque angle, il vous suffit d'imposer au border radius non pas une valeur, mais quatre. Ces valeurs sont organisées de cette manière : angles supérieur gauche, supérieur droit, inférieur droit, inférieur gauche.

Vous pouvez choisir d'arrondir régulièrement chaque angle d'un bloc :

Spoiler:
 

Code:
<div style="width:450px; height:150px; border-radius:150px 50px 30px 10px; background-color:#009966;"></div>

Mais vous pouvez également le faire irrégulièrement :

Spoiler:
 

Code:
<div style="width:450px; height:150px; border-radius:150px 50px 30px 10px/20px 30px 40px 50px; background-color:#009966;"></div>

Dans ce dernier cas, les variables correspondent d'une part (avant la barre oblique) aux arrondis horizontaux des angles, d'autre part (après la barre oblique) aux arrondis verticaux :


Et là, vous commencez vraiment à avoir des formes marrantes... comme quoi, on peut faire pas mal de trucs bizarres avec un peu de code ! Very Happy



Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].
___________________



Amaranthe - Templier de l'Orthographe parti en Croisade
(Inspectrice, correctrice et professeur)

 

[CSS] Les angles arrondis

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Faire des renforts de murs
» origine de nos chiffres , dits, chiffres arabes
» Arrondir les angles : comment ça marche
» rectangle à coins arrondis

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage-
Sauter vers:  
Espace Admin du site

©2008-2016 - School Of Progress - Toute reproduction totale ou partielle est interdite.
Design réalisé par Mewyn - Forum hébergé par forumactif.com

Les logos des SoPiens

Nos correspondants