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 :

CSS - Fonction inset()

Description de la fonction inset().

La fonction inset() définit un rectangle qui pourra être utilisé pour découper une image (avec la propriété clip-path) ou pour forcer un contenu à contourner sa forme (avec la propriété shape-outside).

La fonction inset() 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 inset().

  • clip-path: inset(10px 20px 10px 20px); a b c d

    a, b, c et d sont quatre valeurs positives ou nulles, suivies d'une unité de dimension absolue ou relative (voir les unités de dimensions en CSS). Ces quatre valeurs déterminent les dimensions du rectangle de découpe, conformément au schéma ci-dessous.

    Paramètres de la fonction inset()

    Fonction inset() avec un paramètre
    Si une seule valeur est indiquée, elle est utilisée pour les quatre cotés.
    Fonction inset() avec deux paramètres
    Si deux valeurs sont indiquées, la première est utilisée pour les cotés haut et bas, et la deuxième pour les cotés gauches et droite.
    Fonction inset() avec deux paramètres
    Si trois valeurs sont indiquées, elles correspondent respectivement au coté haut, aux cotés gauche et droit, au au coté bas.
    Fonction inset() avec quatre paramètres
    Enfin, si les quatre valeurs sont indiquées, elles s'appliquent chacune à un côté, en tournant dans le sens horaire et en com­men­çant par le côté du haut.
  • clip-path: inset(10px 20px 10px 20px round 10px 10px 15px 15px); a b c d r1 r2 r3 r4

    Le mot round introduit quatre valeurs optionnelles r1, r2, r3 et r4. Ce sont également des valeurs positives ou nulles, suivies d'une unité de dimension relative ou absolue. Elles indiquent le rayon de chacun des angles, ce qui permet de définir un rectangle aux coins arrondis.

    Paramètres de la fonction inset()

    Fonction inset() avec un paramètre
    Si une seule valeur est indiquée, elle s'applique aux quatre angles.
    Fonction inset() avec deux paramètres
    Si deux valeurs sont indiquées, elles s'appliquent aux paires d'angles opposés.
    Fonction inset() avec deux paramètres
    Si trois valeurs sont indiquées, elles s'appliquent conformément au schéma ci-dessus.
    Fonction inset() avec quatre paramètres
    Enfin, si les quatre valeurs sont indiquées, elles s'appliquent chacune à un angle, en tournant dans le sens horaire.

Simulateur.

L'image ci-dessous a été déclarée flottante (cliquez sur l'image pour consulter les styles qui lui sont appliqués). En tapant des valeurs dans le simulateur vous lui appliquez en plus les propriétés clip-path et shape-outside.

clip-path:
( a b c d  round r1 r2 r3 r4 )
 
 
shape-outside: inset
( a b c d   round r1 r2 r3 r4 )
Démo pour la fonction inset() Le W3C est composé d'entreprises et d'universités qui ont une activité en rapport avec Internet. C'est le cas par exemple d'éditeurs informatiques, en particulier les éditeurs des navigateurs (Mozilla Fondation, Microsoft, Apple, Opera, Google, etc.). On trouve également des centres de recherches (Inria, National Research Council Canada, etc.), des opérateurs de réseaux, ainsi que de nombreuses autres entreprises investies dans le Web.
Le W3C emploie environ une centaine de personnes comprenant des personnes responsables des groupes de travail, du personnel administratif, des administrateurs systèmes et des responsables de la communication. Ils sont garants du bon respect de la charte de fonctionnement du W3C.
Source : Wikipedia.
 

Voir aussi...

Formes géométriques - Propriétés.

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

Formes géométriques - Fonctions.

Images et filtres - Propriétés.

  • backdrop-filter : Applique un filtre graphique sur l'élément situé en arrière plan.
  • background-blend-mode : Définit le mélange des couleurs entre image(s) d'arrière-plan et couleur d'arrière-plan.
  • clip-path : Définit la partie visible de l'élément, délimitée par une forme géométrique (rectangle, polygone...)
  • filter : Filtre graphique.
  • image-rendering : Mode de mise à l'échelle des images.
  • mix-blend-mode : Définit le mode de mélange entre le contenu et ce qui est visible en arrière-plan de l'élément.

Images et filtres - Fonctions.

  • blur() : Applique un effet de flou à une image.
  • brightness() : Ajuste la luminosité d'une image.
  • contrast() : Ajuste le contraste d'une image.
  • drop-shadow() : Définit l'ombre d'un élément (dimensions, flou, couleur).
  • grayscale() : Convertit une image en nuances de gris (noir et blanc).
  • hue-rotate() : Change les couleurs d'une image (rotation des teintes).
  • image() : Désigne ou définit une image.
  • invert() : Inverse les couleurs d'une image.
  • opacity() : Détermine le degré de transparence d'un élément.
  • saturate() : Définit la saturation des couleurs d'une image.
  • sepia() : Applique un effet sépia à une image.