Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

circle() - Fonction CSS

circle()

Résumé des caractéristiques de la fonction circle()

Description rapide
Définit un cercle.
Statut
Standard
Module W3C
Module CSS - Formes de base
Références (W3C)
Statut du document:: CR (document proposé pour la recommandation)

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.
L'élément vert est flottant.
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) et length (y) sont des valeurs numériques, suivies d'une unité de dimension.
Schéma syntaxique de la fonction CSS circle()Syntaxe de circle() en CSS, tracé de formes géométriques. length (r) length (r) closest-side closest-side farthest-side farthest-side at at length (x) length (x) left left center center right right length (y) length (y) top top center center bottom bottomcircle()circle()
  • 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 :

    1. farthest-side : le rayon est égal à la distance depuis le centre du cercle jusqu'au bord le plus éloigné,
    2. closest-side : le rayon est égal à la distance depuis le centre du cercle jusqu'au bord le plus proche.
    Effet de closest-side
    Effet de la valeur closest-side
    Effet de farthest-side
    Effet de la valeur farthest-side

    Si aucune valeur n'est précisée, la fonction circle() prend pour valeur par défaut closest-side.

  • clip-path: circle(50px at 20% 30%); r x y

    x et y sont introduits pas le mot at. 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 et y 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 pour x et par rapport à la hauteur de l'élément pour y.

    Les valeurs négatives sont autorisées et positionnent le centre du cercle en dehors de l'élément.

    x et y acceptent aussi les valeurs prédéfinies suivantes :
    left, center ou right pour x
    et top, center ou bottom pour y.

    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.

Logo css
Logo css

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.

clip-path :
Logo css
Logo css

Prise en charge par les navigateurs (compatibilité).

Colonne 1
Capacité à restituer les formes de base (cercles, rectangles, chemins, etc).
Colonne 2
Prise en charge de la fonction circle().
1
Basic shapes
2
circle()
Estimation de la prise en charge en pourcentage du parc actuel.
97%
96%

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.

Propriétés.

Définit le seuil de transparence en vu de l'habillage d'une image.
Définit la marge pour l'habillage d'un élément flottant.
Définit le contournement du texte pour un élément flottant.

Fonctions.

Définit une ellipse.
Définit un rectangle, utilisable pour découper un élément.
Définit un contour d'après la syntaxe SVG d'un chemin.
Définit une forme.