From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../aper\303\247u_formes_css/index.html" | 125 +++++++++++++++++ .../cr\303\251er_formes_bo\303\256tes/index.html" | 75 +++++++++++ .../web/css/css_shapes/formes_simples/index.html | 149 +++++++++++++++++++++ .../index.html" | 64 +++++++++ files/fr/web/css/css_shapes/index.html | 80 +++++++++++ 5 files changed, 493 insertions(+) create mode 100644 "files/fr/web/css/css_shapes/aper\303\247u_formes_css/index.html" create mode 100644 "files/fr/web/css/css_shapes/cr\303\251er_formes_bo\303\256tes/index.html" create mode 100644 files/fr/web/css/css_shapes/formes_simples/index.html create mode 100644 "files/fr/web/css/css_shapes/g\303\251n\303\251rer_formes_images/index.html" create mode 100644 files/fr/web/css/css_shapes/index.html (limited to 'files/fr/web/css/css_shapes') diff --git "a/files/fr/web/css/css_shapes/aper\303\247u_formes_css/index.html" "b/files/fr/web/css/css_shapes/aper\303\247u_formes_css/index.html" new file mode 100644 index 0000000000..bf8d674cf3 --- /dev/null +++ "b/files/fr/web/css/css_shapes/aper\303\247u_formes_css/index.html" @@ -0,0 +1,125 @@ +--- +title: Aperçu des formes CSS +slug: Web/CSS/CSS_Shapes/Aperçu_formes_CSS +tags: + - Aperçu + - CSS + - CSS Shapes + - Formes CSS +translation_of: Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes +--- +
{{CSSRef}}
+ +

La spécification CSS Shapes Level 1 définit les formes géométriques en CSS. Pour ce module de niveau 1, ces formes s'appliquent aux éléments qui utilisent une disposition flottante. Dans cet article, nous verrons un aperçu de ce qu'il est possible de faire avec les formes en CSS.

+ +

Si on fait flotter un élément à gauche d'un texte, on verra le texte écrit autour de cet élément en suivant un contour rectangulaire. Si on applique une forme circulaire à cet élément, le texte suivra alors le contour du cercle.

+ +

Il existe différentes façons de créer des formes CSS et nous verrons, dans ces guides, leur fonctionnement et les cas d'utilisation.

+ +

Que définit la spécification ?

+ +

La spécification définit trois nouvelles propriétés :

+ + + +

Définir des formes simples

+ +

La propriété shape-outside permet de définir une forme. Cette propriété peut prendre différentes valeurs dont chacune définit une forme différente. Ces valeurs sont définies par le type de donnée {{cssxref("<basic-shape>")}}. Prenons un exemple simple pour commencer.

+ +

Dans l'exemple qui suit, on a une image qui flotte à gauche. Ensuite, on lui applique shape-outside avec la valeur circle(50%). Grâce à cette règle, le contenu épouse alors une forme circulaire plutôt que le rectangle qui était formé par la boîte de l'image.

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}}

+ +

À l'heure actuelle, la spécification indique qu'un élément doit flotter si on veut lui appliquer <basic-shape>. De cette façon, l'amélioration progressive est rapidement obtenue car si le navigateur ne prend pas en charge les formes CSS, l'utilisateur verra le contenu épouser une forme rectangulaire (comme auparavant). Si le navigateur prend en charge les formes, la disposition visuelle sera améliorée.

+ +

Formes simples (Basic Shapes)

+ +

La valeur circle(50%) est une exemple de forme simple. La spécification fournit quatre valeur de types <basic-shape> :

+ + + +

Avec la valeur inset(), le texte environnant continue d'épouser une forme rectangulaire mais on peut décaler ce rectangle afin de rapprocher le texte de l'objet flottant par exemple.

+ +

Nous avons vu le fonctionnement de circle() dans l'exemple précédent : cette notation fonctionnelle permet de créer une forme circulaire. ellipse() est assez proche et permet de créer une ellipse (qu'on peut voir comme un cercle aplati). Si aucune de ces formes ne vous convient, vous pouvez utiliser polygon() afin de créer un polygone correspondant à une forme complexe.

+ +

Dans le guide sur les formes simples, nous verrons comment créer et exploiter ces formes.

+ +

Boîtes de référence

+ +

Les formes sont créées sur une boîte donnée. Aussi, on peut créer une boîte par rapport à chacune des boîtes du modèle de boîte et utiliser les valeurs :

+ + + +

Dans l'exemple qui suit, vous pouvez modifier la valeur border-box afin d'utiliser une autre valeur et observer comment se déplace la forme par rapport à la boîte.

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/box.html", '100%', 810)}}

+ +

Pour en savoir plus, voir le guide sur les formes et les boîtes.

+ +

Générer une forme à partir d'une image

+ +

Une autre méthode qui peut s'avérer utile consiste à générer une forme à partir d'une image et de son canal alpha :  le texte épousera alors la forme non-transparente de l'image. On peut alors avoir un texte qui « s'écoule » dans une image ou autour. Cette méthode permet aussi d'avoir une forme plus complexe sans avoir à recourir à un polygone (il n'est pas nécessaire que  l'image  soit visible).

+ +

Attention, les images utilisées ainsi doivent être compatibles avec les règles CORS. Se n'est pass le cas, shape-outside se comportera comme si elle avait reçu la valeur none et il n'y aura alors aucune forme.

+ +

Dans l'exemple qui suit, on utilise une image avec une zone complètement transparente et on utilise une image comme valeur d'URL pour shape-outside. La forme ainsi créée utilise la zone opaque de l'image : la forme de la montgolfière.

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/image.html", '100%', 800)}}

+ +

shape-image-threshold

+ +

La propriété shape-image-threshold permet d'ajuster le seuil de transparence utilisé pour créer une forme à partir d'une image. Si la valeur de shape-image-threshold est 0.0 (la valeur initiale), ce seront les parties totalement transparentes de l'image qui créeront la forme. Si la valeur 1.0, toutes les zones de l'image (y compris celles totalement opaques) seront utilisées pour la forme. Les valeurs intermédiaires permettent d'utiliser des zones partiellement transparentes pour définir la forme.

+ +

Dans l'exemple suivant, on utilise une image qui est un dégradé et qui permet de définir la forme. Vous pouvez modifier la valeur du seuil afin de faire évoluer la forme.

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/threshold.html", '100%', 820)}}

+ +

Dans l'article Créer des formes à partir d'images, nous verrons plus en détails le fonctionnement de ces propriétés.

+ +

La propriété shape-margin

+ +

La propriété {{cssxref("shape-margin")}} ajoute une marge à shape-outside. Cela permet d'écarter le contenu de la forme.

+ +

Dans l'exemple qui suit, on a une forme simple sur laquelle on ajoute shape-margin. Vous pouvez modifier la valeur de cette propriété afin de rapprocher ou d'éloigner le texte de la forme.

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/shape-margin.html", '100%', 800)}}

+ +

Utiliser du contenu généré comme objet flottant

+ +

Dans les exemples qui précèdent, nous avons utilisé des images ou des éléments visibles afin de définir la forme. Autrement dit, la forme est visible sur la page. Il se peut également qu'on veuille que le texte suive une ligne invisible qui ne soit pas droite. On pourrait le faire avec une image ensuite rendue invisible mais on aurait alors des éléments redondants dans le document. Aussi, autant utiliser du contenu généré afin de strictement conserver la mise en forme dans la feuille CSS.

+ +

Dans l'exemple qui suit, on utilise du contenu généré afin d'inséer un élément avec une hauteur et une largeur de 150 pixels. On peut alors ensuite utiliser les formes simples, les boîtes de référence ou le canal alpha d'une image afin de créer une forme qu'épouserait le texte.

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/generated-content.html", '100%', 850)}}

+ +

Relations avec clip-path

+ +

Les valeurs utilisées pour les formes simples et pour les boîtes de référence sont les mêmes que celles utilisées pour la propriété {{cssxref("clip-path")}}. Ainsi, si on souhaite créer une forme à partir d'une image et rogner une partie de cette image, on pourra utiliser les mêmes valeurs.

+ +

Ci-après, on a une image carrée avec un arrière-plan bleu. On a défini la forme avec  shape-outside: ellipse(40% 50%); puis utilisé clip-path: ellipse(40% 50%); afin de rogner l'image pour suivre la forme.

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/clip-path.html", '100%', 800)}}

+ +

Outils de développement pour les formes CSS

+ +

Avec la prise en charge des formes CSS, Firefox sort également une nouvelle fonctionnalités dans les outils de développement : l'éditeur de chemin pour les formes (Shape Path Editor). Cet outil permet d'inspecter les formes présentes sur la page et de modifier leurs valeurs à la volée. Si votre polygone n'a pas l'aspect escompté, vous pouvez le modifier via l'éditeur puis recopier la nouvelle valeur dans votre fichier CSS.

+ +

L'éditeur de chemin pour les formes sera activé par défaut avec Firefox 60 pour les formes générées grâce à clip-path. Vous pouvez également l'utiliser afin d'éditer les formes générées grâce à shape-outside à condition d'avoir activé la préférence layout.css.shape-outside.enabled.

+ +

Les futures fonctionnalités

+ +

Dans sa version initiale, le module de spécification pour les formes contenait une propriété shape-inside afin de créer des formes à l'intérieur d'un élément. Cette propriété, ainsi que la possibilité de créer des formes sur des éléments non-flottants, a été repoussée à la spécification de niveau 2. La propriété shape-inside était initialement décrite dans la spécification de niveau 1 et vous pouvez donc trouver certains tutoriels qui détaillent ces deux propriétés.

diff --git "a/files/fr/web/css/css_shapes/cr\303\251er_formes_bo\303\256tes/index.html" "b/files/fr/web/css/css_shapes/cr\303\251er_formes_bo\303\256tes/index.html" new file mode 100644 index 0000000000..5ed5b06bfa --- /dev/null +++ "b/files/fr/web/css/css_shapes/cr\303\251er_formes_bo\303\256tes/index.html" @@ -0,0 +1,75 @@ +--- +title: Créer des formes à partir des boîtes +slug: Web/CSS/CSS_Shapes/Créer_formes_boîtes +tags: + - Boîtes + - CSS + - CSS Shapes + - Formes CSS + - Guide +translation_of: Web/CSS/CSS_Shapes/From_box_values +--- +
{{CSSRef}}
+ +

Une méthode permettant de créer des formes consiste à utiliser les valeurs provenant du modèle de boîte CSS. Dans cet article, nous verrons comment les utiliser.

+ +

Les valeurs de boîte qui sont autorisées pour les formes sont :

+ + + +

Les valeurs border-radius sont également prises en charge et on peut donc avoir une forme qui possède une bordure arrondie.

+ +

Le modèle de boîte CSS

+ +

Les valeurs énumérées ci-avant correspondent aux différentes boîtes du modèle de boîte CSS. En CSS, une boîte possède un contenu (content), du remplissage (padding), une bordure (border) ainsi qu'une marge (margin).

+ +

The Box Model consists of the margin, border, padding and content boxes.

+ +

En utilisant une de ces valeurs, il est possible de suivre le contour d'une de ces zones. Dans les exemples qui suivent, on utilise un élément qui possède du remplissage, une bordure et une marge afin d'observer l'impact de ces différentes valeurs pour la définition d'une forme et le comportement du contenu alentour.

+ +

margin-box

+ +

La valeur margin-box correspond à la forme de la boîte de marge et suit le bord extérieur de la marge en prenant en compte les coins arrondis de la forme si {{cssxref("border-radius")}} a été utilisé sur l'élément.

+ +

Dans l'exemple suivant, on a un élément circulaire mauve qui est un élément {{htmlelement("div")}} avec une hauteur, une largeur et une couleur d'arrière-plan. La propriété border-radius a été utilisée afin de créer le cercle avec border-radius: 50%. L'élément ayant une marge, on peut voir le contenu évoluer autour de cette forme circulaire en prenant la marge en compte.

+ +

{{EmbedGHLiveSample("css-examples/shapes/box/margin-box.html", '100%', 800)}}

+ +

border-box

+ +

La valeur border-box correspond à la forme définie par le bord extérieur de la bordure. La forme épouse la bordure et les éventuels arrondis qui lui sont appliqués. Un élément possède toujours une bordure même si {{cssxref("border")}} n'a pas explicitement été utilisé. Si c'est le cas, border-box sera équivalent à padding-box et la forme suivra le bord extérieur de la boîte de remplissage.

+ +

Avec l'exemple qui suit, on peut voir que le texte suit désormais les lignes créées par la bordure. Vous pouvez modifier la taille de cette bordure pour voir le déplacement du contenu autour.

+ +

{{EmbedGHLiveSample("css-examples/shapes/box/border-box.html", '100%', 800)}}

+ +

padding-box

+ +

La valeur padding-box correspond à la forme définie par le bord extérieur de la boîte de remplissage (padding). La forme suit les règles d'arrondies appliquées à la bordure. Si aucun remplissage n'est appliqué, padding-box sera équivalent à content-box.

+ +

{{EmbedGHLiveSample("css-examples/shapes/box/padding-box.html", '100%', 800)}}

+ +

content-box

+ +

La valeur content-box correspond à la forme définie par le bord extérieur de la boîte de contenu. Chaque coin possède un rayon de courbure qui est le maximum entre 0 et border-radius − border-width − padding. Cela signifie qu'il est impossible d'avoir une valeur négative pour cette boîte.

+ +

{{EmbedGHLiveSample("css-examples/shapes/box/content-box.html", '100%', 800)}}

+ +
+

Note : Pour en savoir plus sur le modèle de boîte CSS, voir cet article.

+
+ +

Quand utiliser les valeurs de boîte

+ +

Les valeurs correspondant aux boîtes permettent de créer des formes simplement. Toutefois, cela ne fonctionne que pour des formes simples, définies en partie avec la propriété border-radius. Les exemples ci-avant montrent un tel cas d'utilisation (on crée une forme circulaire grâce à cette propriété).

+ +

Malgré cela, il est possible de créer des effets intéressants en n'utilisant que cette technique. Pour ce dernier exemple, on a deux éléments qui flottent à droite et à gauche et on leur affecte une valeur border-radius de 100% dans la direction la plus proche du texte.

+ +

{{EmbedGHLiveSample("css-examples/shapes/box/bottom-margin-box.html", '100%', 800)}}

+ +

Pour obtenir des formes plus complexes, il faudra utiliser les valeurs de type <basic-shape> (les formes simples) ou définir une forme à partir d'une image, tel que nous le verrons dans les autres guides de cette section.

diff --git a/files/fr/web/css/css_shapes/formes_simples/index.html b/files/fr/web/css/css_shapes/formes_simples/index.html new file mode 100644 index 0000000000..e1c594bce0 --- /dev/null +++ b/files/fr/web/css/css_shapes/formes_simples/index.html @@ -0,0 +1,149 @@ +--- +title: Formes simples +slug: Web/CSS/CSS_Shapes/Formes_simples +tags: + - CSS + - CSS Shapes + - Guide +translation_of: Web/CSS/CSS_Shapes/Basic_Shapes +--- +
{{CSSRef}}
+ +

Les formes CSS peuvent être définies grâce au type {{cssxref("<basic-shape>")}}. Dans ce guide, nous verrons les différentes valeurs utilisables avec ce type et leur fonctionnement. Ces formes peuvent par exemple décrire des cercles simples voire des polygones complexes.

+ +

Avant d'étudier ces formes dans le détail, attardons nous sur deux notions qui permettent de construire les formes :

+ + + +

Le type <basic-shape>

+ +

Le type de donnée <basic-shape> fournit les valeurs que nous utiliserons ici pour toutes les formes simples. Ce type utilise une notation fonctionnelle : le type de forme souhaité est suivi de parenthèses au sein desquelles on ajoute différentes valeurs pour décrire la forme finale.

+ +

Les arguments de ces fonctions varient selon la forme qu'on veut créer et nous allons voir ces arguments dans les exemples ci-après.

+ +

La boîte de référence

+ +

La boîte de référence définit le système de coordonnées de chaque forme. Nous avons déjà abordé cette boîte dans le guide sur la création de formes à partir des boîtes où nous avons directement utilisé la boîte de référence afin de créer une forme.

+ +

L'inspecteur des formes CSS de Firefox affiche la boîte de référence lorsqu'on inspecte une forme. Dans la capture d'écran suivante, on a créé un cercle avec shape-outside: circle(50%), l'élément flottant possède 20 pixels de remplissage avec la bordure et la marge. On voit que l'inspecteur affiche ces boîtes de référence. Lorsqu'on utilise une forme basique, la boîte de référence utilisée par défaut est la boîte des marges. Dans la capture d'écran, on voit que la forme est définie relativement aux boîtes du modèle de boîtes.

+ +

+ +

La boîte de référence qu'on veut utiliser peut être ajoutée après la définition de la forme simple. Autrement dit, le comportement obtenu par défaut est équivalent à l'écriture de .

+ +
.shape {
+  shape-outside: circle(50%) margin-box;
+}
+
+ +

On peut changer ce paramètre si la forme utilise une autre boîte du modèle de boîte. Par exemple, si on souhaite utilise la boîte de bordure, on pourra écrire :

+ +
.shape {
+  shape-outside: circle(50%) border-box;
+}
+
+ +

On notera que la boîte margin-box pourra rogner la forme et que les formes créées relativement aux autres formes et qui dépassent la boîte de marge seront rognées pour être inscrites dans la boîte de marge. Nous verrons ce comportement dans les exemples suivants.

+ +

Pour une description des boîtes et de leurs relations avec les formes CSS, voir Comprendre les liens entre les boîtes de référence et les formes CSS.

+ +

inset()

+ +

Le type inset() définit un rectangle. Cela peut sembler peu utile car c'est déjà la forme d'une boîte normale. Toutefois, avec inset(), on peut inclure des décalages et déplacer la forme autour de la boîte de référence.

+ +

inset() prend comme arguments quatre valeurs pour les quatres côtés : haut, droit, bas, gauche puis une dernière pour border-radius. Le fragment de code CSS suivant permet de créér une forme rectangulaire décalée depuis la boîte de référence (20 pixels du haut et du bas, 10 pixels de la gauche et de la droite) et pour laquelle border-radius vaut 10 pixels.

+ +
.shape {
+  float: left;
+  shape-outside: inset(20px 10px 20px 10px round 10px);
+}
+
+ +

Utilisant les mêmes règles vues pour la version raccourcie de la marge (cf. {{cssxref("margin")}}), on peut indiquer plusieurs décalages de façon synthétique :

+ + + +

Ainsi, la règle écrite ci-avant peut-être formulée :

+ +
.shape {
+  float: left;
+  shape-outside: inset(20px 10px round 10px);
+}
+ +

Dans l'exemple qui suit, on a une forme inset() qu'on décale au-delà de l'élément flottant. Vous pouvez éditer l'exemple afin d'observer l'effet des différentes valeurs de décalages.

+ +

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset.html", '100%', 800)}}

+ +

Vous pouvez également ajouter une valeur pour la boîte de référence. Dans l'exemple suivant, vous pouvez modifier margin-box afin d'utiliser border-box, padding-box ou content-box pour observer la façon dont la boîte de référence modifie l'origine des coordonnées utilisées pour les décalages.

+ +

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset-box.html", '100%', 800)}}

+ +

circle()

+ +

La valeur circle() peut être utilisée pour shape-outside et prend jusqu'à deux argument. Le premier de ces arguments correspond à shape-radius.

+ +

La fonction circle() et la fonction ellipse(), pour shape-outside, peuvent utiliser cet argument <shape-radius>. Ce dernier peut être une longueur ou un pourcentage mais également l'un des mots-clés closest-side ou farthest-side.

+ +

Le mot-clé closest-side utilise la longueur depuis le centre de la forme jusqu'au côté le plus proche de la boîte de référence. Pour les cercles, c'est le côté le plus proche dans n'importe quelle dimension. Pour les ellipses, c'est le côté le plus proche selon l'axe du rayon de l'ellipse.

+ +

Le mot-clé farthest-side utilise la longueur depuis le centre de la forme jusqu'au côté le plus éloigné de la boîte de référence. Pour les cercles, c'est le côté le plus éloigné, quelle que soit la dimension. Pour les ellipses, c'est le côté le plus éloigné selon l'axe du rayon.

+ +

Le deuxième argument est une position dont la valeur par défaut est center. Toutefois, n'importe quelle position valide peut être utilisée afin d'indiquer le centre du cercle.

+ +

Pour résumer, le cercle accepte un rayon qui peut être une longueur, un pourcentage ou le mot-clé closest-side ou farthest-side, optionnellement suivi par le mot-clé at suivi par une position.

+ +

Dans l'exemple qui suit, on crée un cercle sur un objet de 100 pixels de large avec une marge de 20 pixels. On a donc une largeur totale de la boîte de référence de 140 pixels. On indique une valeur de 50% pour shape-radius, ce qui crée donc un cercle de 70 pixels de rayon avec une position fixée à 30%.

+ +

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/circle.html", '100%', 800)}}

+ +

Dans cet exemple, vous pouvez augmenter ou réduire le rayon pour adapter la taille du cercle ou déplacer le cercle via la position. Vous pouvez aussi modifier la boîte de référence.

+ +

Ajoutons un autre exemple, en utilisant les mots-clés top left pour indiquer la position, on peut créer une forme en quart de cercle pour le coin supérieur gauche de la page. L'exemple qui suit illustre comment créer un quart de cercle avec du texte qui est écrit autour.

+ +

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/circle-generated.html", '100%', 700)}}

+ +

Limitation à la boîte de marge

+ +

Lorsqu'on a décrit les boîtes de référence ci-avant, on a vu que la boîte de marge pourra rogner la forme. Pour observer cet effet, on peut déplacer le centre du cercle vers le contenu en utilisant la valeur 60% pour la position. Le centre du cercle est alors plus près du contenu et la forme du cercle pourrait dépasser la boîte de marge. La forme est donc rognée et on voit alors un aplat.

+ +
img {
+  float: left;
+  shape-outside: circle(50% at 60%);
+}
+
+ +

The circle shape is clipped by the margin box

+ +

ellipse()

+ +

Une ellipse peut être vue comme un cercle aplati. De ce point de vu ellipse() fonctionne de façon analogue à circle() mais il est nécessaire d'indiquer deux rayons : un rayon horizontal x et un rayon vertical y (dans cet ordre).

+ +

Ces rayons peuvent être suivis par une position qui permet, comme avec circle(), de déplacer le centre de l'ellipse. Dans l'exemple qui suit, on dessine une ellipse avec un rayon horizontal de 40%, un rayon vertical de 50% et une position à gauche. Cela signifie que le centre de l'ellipse sera situé sur le bord gauche et on aura donc une demi-ellipse autour de laquelle s'écoulera le texte. N'hésitez pas à modifier ces valeurs pour voir l'impact sur l'exemple.

+ +

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse.html", '100%', 800)}}

+ +

Les mots-clés closest-side et farthest-side permettent de créer rapidmeent une ellipse en fonction de la taille de la boîte de référence de l'élément flottant.

+ +

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse-keywords.html", '100%', 800)}}

+ +

polygon()

+ +

La forme simple qui permet de créer une grande variété de formes est polygon(). Cette forme prend comme arguments trois ou plusieurs paires de valeurs qui correspondent aux coordonnées dessinées dans la boîte de référence. Attention, les coordonnées doivent au moins former un triangle.

+ +

Dans l'exemple qui suit, on crée une forme avec polygon() pour que le texte s'écoule autour. N'hésitez pas à modifier les valeurs pour visualiser les impacts.

+ +

{{EmbedGHLiveSample("css-examples/shapes/basic-shape/polygon.html", '100%', 800)}}

+ +

L'inspecteur de formes Firefox s'avère très utile pour créer une forme de polygone. La capture d'écran qui suit illustre la forme dessinée dans l'outil.

+ +

The polygon basic shape, highlighted with the Shapes Inspector.

+ +

Une autre ressource qui peut s'avérer utile sur ces sujets est Clippy : cet outil permet de créer des formes pour clip-path. Or, les formes utilisées pour clip-path sont les mêmes que pour les formes simples.

diff --git "a/files/fr/web/css/css_shapes/g\303\251n\303\251rer_formes_images/index.html" "b/files/fr/web/css/css_shapes/g\303\251n\303\251rer_formes_images/index.html" new file mode 100644 index 0000000000..e85db873c1 --- /dev/null +++ "b/files/fr/web/css/css_shapes/g\303\251n\303\251rer_formes_images/index.html" @@ -0,0 +1,64 @@ +--- +title: Générer des formes avec des images +slug: Web/CSS/CSS_Shapes/Générer_formes_images +tags: + - CSS + - Formes CSS + - Guide +translation_of: Web/CSS/CSS_Shapes/Shapes_From_Images +--- +
{{CSSRef}}
+ +

Dans ce guide, nous allons voir comment créer une forme à partir d'une image, que ce soit un fichier avec un canal alpha ou un dégradé CSS. Grâce aux images, on peut suivre une forme complexe sans avoir à dessiner de polygone. On peut créer la forme à partir d'un éditeur graphique et utiliser le contour de cette image formé par la ligne des pixels moins opaques qu'un seuil donné.

+ +

Générer une forme simple avec une image

+ +

Pour utiliser une image afin de créer une forme, il est nécessaire que cette image dispose d'un canal alpha, c'est-à-dire une zone qui n'est pas complètement opaque. La propriété {{cssxref("shape-image-threshold")}} est utilisée afin de fournir un seuil d'opacité. Les pixels qui sont plus opaques que cette valeur seront alors utilisés pour calculer la zone de la forme.

+ +

Dans l'exemple suivant, on utilise un image avec une étoile rouge complètement opaque entourée d'une zone complètement transparente. On fournit le chemin de l'image à {{cssxref("shape-outside")}} et le contenu environnant épouse alors la forme de l'image.

+ +

{{EmbedGHLiveSample("css-examples/shapes/image/simple-example.html", '100%', 800)}}

+ +

On peut utiliser {{cssxref("shape-margin")}} afin d'écarter le texte de la forme avec une certaine marge.

+ +

{{EmbedGHLiveSample("css-examples/shapes/image/margin.html", '100%', 800)}}

+ +

Origines et compatibilité CORS

+ +

Attention, les images utilisées pour créer les formes doivent être compatibles pour le CORS. Une image hébergée sur le même domaine que le site devrait fonctionner. En revanche, si les images sont hébergées sur un domaine différent (celui d'un CDN par exemple), il faudra s'assurer que les bons en-têtes HTTP sont fournis afin de construire des images. À cause de ce prérequis, si vous testez un site en local avec vos fichiers, les formes CSS à partir d'images ne fonctionneront pas si vous ne mettez pas en place de serveur web local.

+ +

Ai-je à faire à un problème de CORS ?

+ +

Les outils de développement aident à déterminer si le problème vient du CORS. Dans Chrome, les problèmes CORS seront écrits dans la console. Dans Firefox, si vous inspectez la propriété en question, vous verrez une alerte indiquant que l'image ne peut pas être chargée. Dans ce cas, il est probable que l'image ne puisse être utilisée comme forme à cause du CORS.

+ +

Utiliser un seuil

+ +

La propriété {{cssxref("shape-image-threshold")}} permet de créer des formes à partir d'une image en utilisant des zones qui ne sont pas totalement transparentes. Si shape-image-threshold vaut 0.0 (qui correspond à la valeur initiale), ce ne sont que les zones totalement transparentes qui seront utilisées pour fabriquer la forme. Si la valeur 1.0 est utilisée, le seuil correspondra aux zones totalement opaques et toute l'image seront alors utilisée. Les valeurs intermédiaires permettent d'utiliser des zones partiellement transparentes afin de construire la forme.

+ +

Dans l'exemple qui suit, on utilise une image semblable à celle du premier exemple. Toutefois, pour cette image, l'arrière-plan de l'étoile n'est pas totalement transparent : il a une opacité de 20% (créée avec un éditeur graphique). Si on utilise shape-image-threshold avec la valeur 0.3, on aura donc la forme de l'étoile mais si on utilise une valeur inférieure à 0.2, on aura une forme rectangulaire.

+ +

{{EmbedGHLiveSample("css-examples/shapes/image/threshold.html", '100%', 800)}}

+ +

Utiliser des images avec du contenu généré

+ +

Dans l'exemple ci-avant, on utilise une image pour {{cssxref("shape-outside")}} et on utilise également cette image dans le document. La plupart des exemples et démos utilisent ce procéder car cela aide à illustrer la forme suivie par le texte environnant. Cependant, il faut comprendre que la propriété shape-outside ne repose pas sur l'image utilisée dans le document et qu'il n'est pas nécessaire d'afficher une image dans le document afin de construire une forme à partir d'une image.

+ +

Il est nécessaire d'avoir un contenu flottant pour créer une forme mais ce contenu peut tout à fait être généré grâce à la feuille de style. Dans l'exemple qui suit, on utilise un contenu généré qui est placé dans une disposition flottante, avec une image d'étoile pour créer la forme mais cette image n'est pas affichée sur la page.

+ +

{{EmbedGHLiveSample("css-examples/shapes/image/generated-content.html", '100%', 800)}}

+ +

Créer des formes avec un dégradé

+ +

En CSS, un dégradé est une image. On peut donc utiliser un dégradé afin de générer une forme.

+ +

Dans le prochain exemple, on utilise un contenu généré flottant dont l'image d'arrière-plan est un dégradé linéaire. On utilise la même valeur pour {{cssxref("shape-outside")}}. Le dégradé linéaire évolue du mauve vers le transparent. En modifiant la valeur de {{cssxref("shape-image-threshold")}}, on peut donc sélectionner le niveau de transparence nécessaire à la création de la forme. N'hésitez pas à modifier la valeur du seuil dans l'exemple suivant afin de voir le déplacement du contour en fonction du niveau de dégradé.

+ +

Vous pouvez également essayer de complètement retirer l'image d'arrière-plan afin d'utiliser uniquement le dégradé afin de créer la forme et ne pas l'afficher sur l'image.

+ +

{{EmbedGHLiveSample("css-examples/shapes/image/gradient.html", '100%', 800)}}

+ +

Dans l'exemple qui suit, on utilise un dégradé radial avec une ellipse et on utilise les zones transparentes du dégradé afin de créer la forme.

+ +

{{EmbedGHLiveSample("css-examples/shapes/image/radial-gradient.html", '100%', 800)}}

+ +

Vous pouvez éditer ces exemples interactifs afin de voir l'évolution de la forme en fonction des modifications.

diff --git a/files/fr/web/css/css_shapes/index.html b/files/fr/web/css/css_shapes/index.html new file mode 100644 index 0000000000..485385aa10 --- /dev/null +++ b/files/fr/web/css/css_shapes/index.html @@ -0,0 +1,80 @@ +--- +title: CSS Shapes +slug: Web/CSS/CSS_Shapes +tags: + - Aperçu + - CSS + - CSS Shapes + - Reference +translation_of: Web/CSS/CSS_Shapes +--- +
{{CSSRef}}
+ +

CSS Shapes est un module de spécification CSS qui décrit les formes géométriques. Selon le niveau 1 de cette spécification, les formes CSS peuvent être appliquées aux éléments flottants. Cette spécification définit différentes façon permettant de définir la forme d'un élément flottant afin que les lignes « coulent » autour de la forme plutôt qu'autour du rectangle formé par la boîte de l'élément.

+ +

Exemple simple

+ +

Dans l'exemple qui suit, on a une image qui flotte à gauche et la propriété shape-outside qui lui est appliquée vaut circle(50%). Ceci crée une forme circulaire autour de laquelle le contenu peut s'inscrire. Les boîtes des lignes pour le texte qui entourent l'image sont donc modifiées.

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}}

+ +

Référence

+ +

Propriétés

+ +
+ +
+ +

Types de donnée

+ +
+ +
+ +

Guides

+ + + +

Ressources externes

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Shapes")}}{{Spec2("CSS Shapes")}}Définition initiale.
-- cgit v1.2.3-54-g00ecf