circle() - Fonction CSS
Résumé des caractéristiques de la fonction circle()
Description de la fonction circle()
.
La fonction circle()
définit un cercle, qui pourra être utilisé de plusieurs façons,
suivant la propriété qui fait appel à cette fonction.
circle()
permet de préciser le rayon du cercle, ainsi que son centre par rapport à l'élément.
Ce cercle pourra être utilisé pour découper un élément (pour faire des images rondes par exemple) ou pour ajuster ou aligner un texte sur une portion de cercle.
La fonction
circle()
utilisée avec la propriété
clip-path
découpe l'élément suivant
un cercle.
La fonction
circle()
utilisée avec la propriété
clip-path
découpe l'élément suivant un cercle.
Des parties de l'élément sont masquées.
La fonction
circle()
utilisée avec la propriété
shape-outside
forme l'habillage suivant un cercle.
L'élément vert est flottant.
La fonction
circle()
utilisée avec la propriété
shape-outside
forme l'habillage suivant un cercle.
La fonction circle() peut être utilisée avec :
clip-path
: Définit la partie visible de l'élément, délimitée par une forme géométrique (rectangle, polygone...)shape-outside
: Définit le contournement du texte pour un élément flottant.
Syntaxe de la fonction circle()
.
length (r)
est une valeur numérique positive ou null, suivie d'une unité de dimension.length (x)
etlength (y)
sont des valeurs numériques, suivies d'une unité de dimension.
- clip-path: circle(50px); r
r
est le rayon du cercle. C'est une valeur numérique suivie d'une unité de dimension relative ou absolue (voir les unités CSS de dimension). Les pourcentages sont calculés par rapport à la plus grande des dimensions de l'élément (largeur ou hauteur).r
accepte également les valeurs prédéfinies suivantes :farthest-side
: le rayon est égal à la distance depuis le centre du cercle jusqu'au bord le plus éloigné,
closest-side
: le rayon est égal à la distance depuis le centre du cercle jusqu'au bord le plus proche.
Effet de la valeurclosest-side
Effet de la valeurfarthest-side
Si aucune valeur n'est précisée, la fonction
circle()
prend pour valeur par défautclosest-side
. - clip-path: circle(50px at 20% 30%); r x y
x
ety
sont introduits pas le motat
. Ils indiquent les coordonnées du centre du cercle, mesurées par rapport au bord gauche et au bord supérieur de l'élément.x
ety
sont des valeurs numériques suivies d'une unité de dimension relative ou absolue (voir les unités CSS de dimension). S'il s'agit de pourcentages, ces derniers sont calculés par rapport à la largeur de l'élément pourx
et par rapport à la hauteur de l'élément poury
.Les valeurs négatives sont autorisées et positionnent le centre du cercle en dehors de l'élément.
x
ety
acceptent aussi les valeurs prédéfinies suivantes :
left
,center
ouright
pourx
ettop
,center
oubottom
poury
.Pour ces deux paramètres, la valeur par défaut est
center
.
Exemple d'animation avec la fonction circle()
.
Voici un petit amusement qui imite le déplacement d'un spot de lumière dévoilant partiellement le logo CSS3.
Il y a en fait deux images superposées ; celle de dessous est fortement assombrie, tandis que celle de dessus est découpée
avec la propriété clip-path
et la fonction circle()
dont les paramètres sont animés.
Simulateur.
L'image ci-dessous mesure 400 pixels en largeur et 300 pixels en hauteur. Jouez avec les paramètres de la fonction circle()
pour bien en comprendre le
fonctionnement. La même image (mais atténuée) a été placée derrière l'image principale, ce qui explique que les parties cachées continuent d'être visibles.
Ce n'est donc pas le fait de la propriété clip-path
, ni de la fonction circle()
, qui font disparaître complètement les parties découpées.
Prise en charge par les navigateurs (compatibilité).
circle()
.
circle()
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que circle()
.
Les spécifications CSS éditées par le W3C sont organisées en modules. circle()
fait partie du Module CSS - Formes de base (CSS Shapes Module). Les définitions suivantes sont également décrites dans ce même module.