diff options
| author | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-11-05 15:44:38 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-11-05 15:44:38 +0100 |
| commit | 79843297a1d97045c504575ab9a6a29b3af8ffae (patch) | |
| tree | ac5d42490285f37fb933ca83034505ecdd784dc9 /files/fr/web | |
| parent | 086e7141b8da9a5c008353582b8f72d7b5cda5b4 (diff) | |
| download | translated-content-79843297a1d97045c504575ab9a6a29b3af8ffae.tar.gz translated-content-79843297a1d97045c504575ab9a6a29b3af8ffae.tar.bz2 translated-content-79843297a1d97045c504575ab9a6a29b3af8ffae.zip | |
Fixes #2842 - Fixing EmbedLiveSample errors for fr docs (#2851)
* Fixes #2842 for CSS pages
* Fixes #2842 for Web API pages
* Fixes #2842 for other sections
* Fix EmbedLiveSample for moved CSS page
* Fixes #2842 for conflicting / orphaned docs
Diffstat (limited to 'files/fr/web')
164 files changed, 486 insertions, 9804 deletions
diff --git a/files/fr/web/api/batterymanager/charging/index.md b/files/fr/web/api/batterymanager/charging/index.md index e1521666a4..88d4c3b253 100644 --- a/files/fr/web/api/batterymanager/charging/index.md +++ b/files/fr/web/api/batterymanager/charging/index.md @@ -32,7 +32,7 @@ navigator.getBattery().then(function(battery) { }); ``` -{{ EmbedLiveSample('Example', '100%', 30) }} +{{ EmbedLiveSample('Exemple', '100%', 30) }} ## Spécifications diff --git a/files/fr/web/api/batterymanager/chargingtime/index.md b/files/fr/web/api/batterymanager/chargingtime/index.md index d469bded62..e87591bbcd 100644 --- a/files/fr/web/api/batterymanager/chargingtime/index.md +++ b/files/fr/web/api/batterymanager/chargingtime/index.md @@ -36,7 +36,7 @@ navigator.getBattery().then(function(battery) { }); ``` -{{ EmbedLiveSample('Example', '100%', 30) }} +{{ EmbedLiveSample('Exemple', '100%', 30) }} ## Spécifications diff --git a/files/fr/web/api/batterymanager/dischargingtime/index.md b/files/fr/web/api/batterymanager/dischargingtime/index.md index 4cfac1fdde..2b42f214d4 100644 --- a/files/fr/web/api/batterymanager/dischargingtime/index.md +++ b/files/fr/web/api/batterymanager/dischargingtime/index.md @@ -34,7 +34,7 @@ navigator.getBattery().then(function(battery) { }); ``` -{{ EmbedLiveSample('Example', '100%', 30) }} +{{ EmbedLiveSample('Exemple', '100%', 30) }} ## Spécifications diff --git a/files/fr/web/api/batterymanager/level/index.md b/files/fr/web/api/batterymanager/level/index.md index dbaa9d3eca..1da93e8bfd 100644 --- a/files/fr/web/api/batterymanager/level/index.md +++ b/files/fr/web/api/batterymanager/level/index.md @@ -34,7 +34,7 @@ navigator.getBattery().then(function(battery) { }); ``` -{{ EmbedLiveSample('Example', '100%', 30, '', 'Web/API/BatteryManager/level') }} +{{ EmbedLiveSample('Exemple', '100%', 30, '', 'Web/API/BatteryManager/level') }} ## Spécifications diff --git a/files/fr/web/api/canvas_api/index.md b/files/fr/web/api/canvas_api/index.md index 3b26e6ff1f..0cef55c848 100644 --- a/files/fr/web/api/canvas_api/index.md +++ b/files/fr/web/api/canvas_api/index.md @@ -1,10 +1,6 @@ --- title: API canvas slug: Web/API/Canvas_API -tags: - - API - - Canvas - - Reference translation_of: Web/API/Canvas_API --- {{IncludeSubnav("/fr/docs/Jeux")}} {{CanvasSidebar}} @@ -76,7 +72,7 @@ textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Références diff --git a/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.md b/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.md index 7581b9eb2e..be0df6f74b 100644 --- a/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.md +++ b/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.md @@ -227,7 +227,7 @@ canvas.addEventListener("mouseout",function(e){ ball.draw(); ``` -{{EmbedLiveSample("deuxième_démo", "610", "310")}} +{{EmbedLiveSample("Deuxième_démo", "610", "310")}} ## Effet de traînée @@ -297,7 +297,7 @@ canvas.addEventListener("mouseout",function(e){ ball.draw(); ``` -{{EmbedLiveSample("troisième_démo", "610", "310")}} +{{EmbedLiveSample("Troisième_démo", "610", "310")}} ## Ajout d'un contrôle de souris @@ -376,7 +376,7 @@ ball.draw(); Déplacez la balle en utilisant votre souris et relâchez-la avec un click. -{{EmbedLiveSample("Ajout_d'un_contrôle_de_souris", "610", "310")}} +{{EmbedLiveSample("Ajout_d\'un_contrôle_de_souris", "610", "310")}} ## Casse-briques diff --git a/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md b/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md index 9449c304d0..8165c90b46 100644 --- a/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md +++ b/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md @@ -1,12 +1,6 @@ --- title: Ajout de styles et de couleurs slug: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors -tags: - - Canvas - - Couleurs - - Formes géométriques - - Graphismes - - Tutorial translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors original_slug: Web/API/Canvas_API/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs --- @@ -65,7 +59,7 @@ draw(); Le résultat ressemble à ceci: -{{EmbedLiveSample("A_fillStyle_example", 160, 160, "canvas_fillstyle.png")}} +{{EmbedLiveSample("Un_exemple_fillStyle", 160, 160, "canvas_fillstyle.png")}} ### Un exemple `strokeStyle` @@ -96,7 +90,7 @@ draw(); Le résultat ressemble à ceci : -{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "canvas_strokestyle.png")}} +{{EmbedLiveSample("Un_exemple_strokeStyle", "180", "180", "canvas_strokestyle.png")}} ## Transparence @@ -156,7 +150,7 @@ function draw() { draw(); ``` -{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "canvas_globalalpha.png")}} +{{EmbedLiveSample("Un_exemple_globalAlpha", "180", "180", "canvas_globalalpha.png")}} ### Un exemple en utilisant `rgba()` @@ -194,7 +188,7 @@ function draw() { draw(); ``` -{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "canvas_rgba.png")}} +{{EmbedLiveSample("Un_exemple_en_utilisant_rgba", "180", "180", "canvas_rgba.png")}} ## Le style des lignes @@ -246,7 +240,7 @@ function draw() { draw(); ``` -{{EmbedLiveSample("A_lineWidth_example", "180", "180", "canvas_linewidth.png")}} +{{EmbedLiveSample("Un_exemple_lineWidth", "180", "180", "canvas_linewidth.png")}} Pour l'obtention de lignes nettes, il faut comprendre comment les lignes sont tracées. Ci-dessous, la grille représente la grille de coordonnées. Les carrés sont des pixels réels de l'écran. Dans la première grille, un rectangle (2,1) à (5,5) est rempli. La zone entière couverte par les lignes (rouge clair) tombe sur les limites des pixels, de sorte que le rectangle rempli résultant aura des bords nets. @@ -314,7 +308,7 @@ function draw() { draw(); ``` -{{EmbedLiveSample("A_lineCap_example", "180", "180", "canvas_linecap.png")}} +{{EmbedLiveSample("Un_exemple_de_lineCap", "180", "180", "canvas_linecap.png")}} ### Un exemple de `lineJoin` @@ -357,7 +351,7 @@ function draw() { draw(); ``` -{{EmbedLiveSample("A_lineJoin_example", "180", "180", "canvas_linejoin.png")}} +{{EmbedLiveSample("Un_exemple_de_lineJoin", "180", "180", "canvas_linejoin.png")}} ### Une démonstration de la propriété `miterLimit` @@ -432,7 +426,7 @@ document.getElementById('miterLimit').value = document.getElementById('canvas'). draw(); ``` -{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "canvas_miterlimit.png")}} +{{EmbedLiveSample("Une_démonstration_de_la_propriété_miterLimit", "400", "180", "canvas_miterlimit.png")}} ### Utilisation de lignes pointillées @@ -467,7 +461,7 @@ function march() { march(); ``` -{{EmbedLiveSample("Using_line_dashes", "120", "120", "marching-ants.png")}} +{{EmbedLiveSample("Utilisation_de_lignes_pointillées", "120", "120", "marching-ants.png")}} ## Dégradés @@ -540,7 +534,7 @@ Le premier est un dégradé d'arrière-plan. Comme vous pouvez le voir, nous avo Dans le second gradient, nous n'avons pas assigné la couleur de départ (à la position 0.0) puisqu'il n'était pas strictement nécessaire car il prendra automatiquement la valeur de la prochaine couleur. Par conséquent, l'attribution de la couleur noire à la position 0,5 fait automatiquement passer le dégradé, du début à l'arrêt, en noir. -{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "canvas_lineargradient.png")}} +{{EmbedLiveSample("Un_exemple_de_createLinearGradient", "180", "180", "canvas_lineargradient.png")}} ### Un exemple de `createRadialGradient` @@ -595,7 +589,7 @@ Dans ce cas, nous avons légèrement décalé le point de départ du point final Le dernier arrêt de couleur dans chacun des quatre dégradés utilise une couleur entièrement transparente. Si vous voulez une transition agréable de cette étape à la couleur précédente, les deux couleurs doivent être égales. Ce n'est pas très évident dans le code, car il utilise deux méthodes CSS différentes en démonstration, mais dans le premier dégradé `# 019F62 = rgba (1,159,98,1)`. -{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "canvas_radialgradient.png")}} +{{EmbedLiveSample("Un_exemple_de_createRadialGradient", "180", "180", "canvas_radialgradient.png")}} ## Modèles @@ -657,7 +651,7 @@ draw(); Le résultat ressemble à ceci : -{{EmbedLiveSample("A_createPattern_example", "180", "180", "canvas_createpattern.png")}} +{{EmbedLiveSample("Un_exemple_de_createPattern", "180", "180", "canvas_createpattern.png")}} ## Ombres @@ -707,7 +701,7 @@ function draw() { draw(); ``` -{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "shadowed-string.png")}} +{{EmbedLiveSample("Un_exemple_de_texte_ombré", "180", "100", "shadowed-string.png")}} Nous allons regarder la propriété de la `font` _(police de caratères)_ et la méthode `fillText` dans le chapitre suivant sur le [dessin de texte](/fr/docs/Dessin_de_texte_avec_canvas). @@ -740,6 +734,6 @@ function draw() { draw(); ``` -{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "fill-rule.png")}} +{{EmbedLiveSample("Règles_de_remplissage_Canvas", "110", "110", "fill-rule.png")}} {{PreviousNext("Tutoriel_canvas/Formes_géométriques", "Dessin_de_texte_avec_canvas")}} diff --git a/files/fr/web/api/canvas_api/tutorial/compositing/index.md b/files/fr/web/api/canvas_api/tutorial/compositing/index.md index 3e0bf39741..2ad36d77c9 100644 --- a/files/fr/web/api/canvas_api/tutorial/compositing/index.md +++ b/files/fr/web/api/canvas_api/tutorial/compositing/index.md @@ -1,16 +1,12 @@ --- title: Composition et découpe slug: Web/API/Canvas_API/Tutorial/Compositing -tags: - - Canvas - - Composition - - dessin translation_of: Web/API/Canvas_API/Tutorial/Compositing original_slug: Web/API/Canvas_API/Tutoriel_canvas/Composition --- {{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}} -Dans tous nos [exemples précédents](/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations), les formes étaient toutes dessinées les unes au dessus des autres. C'est plus que suffisant pour la plupart des situations, mais cela limite l'ordre dans lequel les formes composées sont construites. Nous pouvons cependant changer ce comportement en définissant la propriété `globalCompositeOperation`. En complément, la propriété `clip` nous permet de cacher les parties des formes que nous ne désirons pas. +Dans tous nos [exemples précédents](/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations), les formes étaient toutes dessinées les unes au dessus des autres. C'est plus que suffisant pour la plupart des situations, mais cela limite l'ordre dans lequel les formes composées sont construites. Nous pouvons cependant changer ce comportement en définissant la propriété `globalCompositeOperation`. En complément, la propriété `clip` nous permet de cacher les parties des formes que nous ne désirons pas. ## `globalCompositeOperation` @@ -19,9 +15,9 @@ Nous pouvons non seulement dessiner de nouvelles formes derrière des formes exi - {{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation = type")}} - : Cela configure le type d'opération de composition à appliquer lorsqu'on dessine de nouvelles formes, où le type correspond à une string qui fait référence à une des douze opérations de composition possibles. -Reportez-vous aux [exemples de compositon](/fr/docs/Tutoriel_canvas/Composition/Example) pour le code des exemples suivants. +Reportez-vous aux [exemples de compositon](/fr/docs/Tutoriel_canvas/Composition/Example) pour le code des exemples suivants. -{{EmbedLiveSample("Exemple_de_composition", 750, 6750, "" ,"/Tutoriel_canvas/Composition/Example")}} +{{EmbedLiveSample("globalCompositeOperation", 750, 6750, "" ,"/Tutoriel_canvas/Composition/Example")}} ## Détourage @@ -29,18 +25,18 @@ Un détourage (_clipping path_ en anglais) est comme une forme de canvas standar  -Si nous comparons le détourage à la propriété `globalCompositeOperation` vue précédemment, nous voyons deux modes de composition qui ont plus ou moins les mémes effets qu'avec `source-in` et `source-atop`. La différence la plus significative entre les deux est que le détourage n'est jamais dessiné sur le canvas à proprement parler et il n'est jamais affecté par l'ajout de nouvelles formes. Ça le rend idéal pour dessiner plusieurs formes dans une zone restreinte. +Si nous comparons le détourage à la propriété `globalCompositeOperation` vue précédemment, nous voyons deux modes de composition qui ont plus ou moins les mémes effets qu'avec `source-in` et `source-atop`. La différence la plus significative entre les deux est que le détourage n'est jamais dessiné sur le canvas à proprement parler et il n'est jamais affecté par l'ajout de nouvelles formes. Ça le rend idéal pour dessiner plusieurs formes dans une zone restreinte. -Dans le chapitre "[dessiner des formes avec le canevas](/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)", nous n'avions mentionné que les méthodes `stroke()` et `fill()`, mais il y en a une troisième: `clip()` — elle permet de faire des détourages. +Dans le chapitre "[dessiner des formes avec le canevas](/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)", nous n'avions mentionné que les méthodes `stroke()` et `fill()`, mais il y en a une troisième: `clip()` — elle permet de faire des détourages. - {{domxref("CanvasRenderingContext2D.clip", "clip()")}} - : Transforme le chemin en cours de création en détourage effectif. -Il faut utiliser `clip()` plutot que `closePath()` pour fermer un chemin et enfaire un détourage. +Il faut utiliser `clip()` plutot que `closePath()` pour fermer un chemin et enfaire un détourage. -Par défault, l'élément {{HTMLElement("canvas")}} possède un détourage aux mêmes dimensions que le canvas lui-même. Donc, par défaut aucune découpe n'est apparente. +Par défault, l'élément {{HTMLElement("canvas")}} possède un détourage aux mêmes dimensions que le canvas lui-même. Donc, par défaut aucune découpe n'est apparente. -### Un exemple de `clip` +### Un exemple de `clip` Dans cet exemple, nous allons utiliser un détourage circulaire pour restreindre le dessin d'un essemble d'étoiles aléatoires à une zone particulière (et circulaire...). @@ -101,10 +97,10 @@ function drawStar(ctx, r) { draw(); ``` -Dans les premières lignes de code, nous dessinons un rectangle noir ayant la même taille que le canvas comme toile de fond puis nous déplaçons l'origine au centre de l'image. Ensuite, nous créons le détourage circulaire en dessinant un arc (complet) et en faisant appelle à  `clip()`. Les détourages font aussi partie de l'état de sauvegarde des canvas. Si on voulait garder le détourage d'origine, on pourrait par exemple sauvegarder l'état du canvas au préalable. +Dans les premières lignes de code, nous dessinons un rectangle noir ayant la même taille que le canvas comme toile de fond puis nous déplaçons l'origine au centre de l'image. Ensuite, nous créons le détourage circulaire en dessinant un arc (complet) et en faisant appelle à `clip()`. Les détourages font aussi partie de l'état de sauvegarde des canvas. Si on voulait garder le détourage d'origine, on pourrait par exemple sauvegarder l'état du canvas au préalable. -Tout ce qui sera dessiné après la création du détourage n'apparaîtra qu'à l'intérieur de ce chemin. Vous pouvez voir ça clairement avec le dégradé linéaire qui est dessiné après. Ensuite, un ensemble de 50 étoiles aléatoires est dessiné, en utilisant la fonction `drawStar()`. Nous pouvons voir, une fois de plus, que les éléments (ici les étoiles) n'apparaissent qu'à l'intérieur du détourage. +Tout ce qui sera dessiné après la création du détourage n'apparaîtra qu'à l'intérieur de ce chemin. Vous pouvez voir ça clairement avec le dégradé linéaire qui est dessiné après. Ensuite, un ensemble de 50 étoiles aléatoires est dessiné, en utilisant la fonction `drawStar()`. Nous pouvons voir, une fois de plus, que les éléments (ici les étoiles) n'apparaissent qu'à l'intérieur du détourage. -{{EmbedLiveSample("A_clip_example", "180", "180", "canvas_clip.png")}} +{{EmbedLiveSample("Un_exemple_de_clip", "180", "180", "canvas_clip.png")}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}} diff --git a/files/fr/web/api/canvas_api/tutorial/drawing_text/index.md b/files/fr/web/api/canvas_api/tutorial/drawing_text/index.md index 8cb24960db..61065903eb 100644 --- a/files/fr/web/api/canvas_api/tutorial/drawing_text/index.md +++ b/files/fr/web/api/canvas_api/tutorial/drawing_text/index.md @@ -1,11 +1,6 @@ --- title: Dessin de texte avec canvas slug: Web/API/Canvas_API/Tutorial/Drawing_text -tags: - - Canvas - - Graphismes - - HTML - - Tutoriels translation_of: Web/API/Canvas_API/Tutorial/Drawing_text original_slug: Web/API/Canvas_API/Tutoriel_canvas/Dessin_de_texte_avec_canvas --- @@ -42,7 +37,7 @@ function draw() { draw(); ``` -{{EmbedLiveSample("A_fillText_example", 310, 110)}} +{{EmbedLiveSample("Un_exemple_fillText", 310, 110)}} ### Un exemple de strokeText @@ -64,7 +59,7 @@ function draw() { draw(); ``` -{{EmbedLiveSample("A_strokeText_example", 310, 110)}} +{{EmbedLiveSample("Un_exemple_de_strokeText", 310, 110)}} ## Style de texte @@ -104,7 +99,7 @@ ctx.textBaseline = 'hanging'; ctx.strokeText('Hello world', 0, 100); ``` -#### Playable code +#### Code jouable ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> @@ -144,7 +139,7 @@ textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); ``` -{{ EmbedLiveSample('Playable_code', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Mesures de texte avancées diff --git a/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md b/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md index 45651bb30a..1339a2cb47 100644 --- a/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md +++ b/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md @@ -95,7 +95,7 @@ Dans cet exemple, nous utilisons la méthode [getImageData() ](/fr/docs/Web/API/ } canvas.addEventListener('mousemove', pick); -{{ EmbedLiveSample('A_color_picker', 610, 240) }} +{{ EmbedLiveSample('Une_pipette_à _couleur', 610, 240) }} ## Peinture des données pixel dans un contexte @@ -166,7 +166,7 @@ function dessiner(img) { } ``` -{{ EmbedLiveSample('Grayscaling_and_inverting_colors', 330, 270) }} +{{ EmbedLiveSample('Niveaux_de_gris_et_inversion_de_couleurs', 330, 270) }} ## Zoom et anticrénelage @@ -233,7 +233,7 @@ function draw(img) { } ``` -{{ EmbedLiveSample('exemple_de_zoom', 620, 490) }} +{{ EmbedLiveSample('Exemple_de_zoom', 620, 490) }} ## Sauvegarde des images diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/index.md b/files/fr/web/api/canvas_api/tutorial/using_images/index.md index 358204912c..b562f3c8f0 100644 --- a/files/fr/web/api/canvas_api/tutorial/using_images/index.md +++ b/files/fr/web/api/canvas_api/tutorial/using_images/index.md @@ -1,12 +1,6 @@ --- title: Utilisation d'images slug: Web/API/Canvas_API/Tutorial/Using_images -tags: - - Advanced - - Canvas - - Graphics - - HTML - - Tutorial translation_of: Web/API/Canvas_API/Tutorial/Using_images original_slug: Web/API/Canvas_API/Tutoriel_canvas/Utilisation_d'images --- @@ -150,7 +144,7 @@ function draw() { Le graphique résultant ressemble à ceci : -{{EmbedLiveSample("example_a_simple_line_graph", 220, 160, "canvas_backdrop.png")}} +{{EmbedLiveSample("Exemple_un_graphique_linéaire_simple", 220, 160, "canvas_backdrop.png")}} ## Mise à l'échelle @@ -190,7 +184,7 @@ function draw() { Le canevas résultant ressemble à ceci : -{{EmbedLiveSample("example_tiling_an_image", 160, 160, "canvas_scale_image.png")}} +{{EmbedLiveSample("Exemple_mosaïque_à _partir_d\'une_image", 160, 160, "canvas_scale_image.png")}} ## Découpage @@ -237,7 +231,7 @@ function draw() { Nous avons pris une approche différente pour charger les images cette fois. Au lieu de les charger en créant de nouveaux objets [`HTMLImageElement`](/fr/docs/Web/API/HTMLImageElement), nous les avons incluses comme balises [`<img>`](/fr/docs/Web/HTML/Element/Img) directement dans notre source HTML et avons récupéré les images depuis ceux-ci. Les images sont masquées via la propriété CSS [`display`](/fr/docs/Web/CSS/display) qui vaut `none`. -{{EmbedLiveSample("example_framing_an_image", 160, 160, "canvas_drawimage2.jpg")}} +{{EmbedLiveSample("Exemple_encadrer_une_image", 160, 160, "canvas_drawimage2.jpg")}} Chaque [`<img>`](/fr/docs/Web/HTML/Element/Img) se voit attribuer un attribut `id`, ce qui facilite leur sélection en utilisant [`document.getElementById()`](/fr/docs/Web/API/Document/getElementById). Nous utilisons `drawImage()` pour découper le rhinocéros de la première image et le mettre à l'échelle sur le canevas, puis dessiner le cadre par-dessus en utilisant un deuxième appel `drawImage()`. @@ -323,7 +317,7 @@ function draw() { } ``` -{{EmbedLiveSample("art_gallery_example", 725, 400)}} +{{EmbedLiveSample("Exemple_d\'une_galerie_d'art", 725, 400)}} ## Contrôler la mise à l'échelle de l'image diff --git a/files/fr/web/api/canvasgradient/addcolorstop/index.md b/files/fr/web/api/canvasgradient/addcolorstop/index.md index 7af56a60ec..b4a77e50dc 100644 --- a/files/fr/web/api/canvasgradient/addcolorstop/index.md +++ b/files/fr/web/api/canvasgradient/addcolorstop/index.md @@ -93,7 +93,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/arc/index.md b/files/fr/web/api/canvasrenderingcontext2d/arc/index.md index 0656bd50da..608ac3d142 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/arc/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/arc/index.md @@ -1,11 +1,6 @@ --- title: CanvasRenderingContext2D.arc() slug: Web/API/CanvasRenderingContext2D/arc -tags: - - Canvas - - CanvasRenderingContext2D - - Method - - Reference translation_of: Web/API/CanvasRenderingContext2D/arc --- {{APIRef}} @@ -96,7 +91,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('Playable_code', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ### Exemple avec différentes formes @@ -132,7 +127,7 @@ for (var i = 0; i < 4; i++) { } ``` -{{ EmbedLiveSample('Different_shapes_demonstrated', 160, 210, "canvas_arc.png") }} +{{ EmbedLiveSample('Exemple_avec_différentes_formes', 160, 210, "canvas_arc.png") }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md b/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md index b663d63dd6..931290cd90 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md @@ -1,10 +1,6 @@ --- title: CanvasRenderingContext2D.beginPath() slug: Web/API/CanvasRenderingContext2D/beginPath -tags: - - API - - Canvas - - CanvasRenderingContext2D translation_of: Web/API/CanvasRenderingContext2D/beginPath --- {{APIRef}} @@ -100,7 +96,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 460) }} +{{ EmbedLiveSample('Code_jouable', 700, 460) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md b/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md index eb9c087775..6a49fdd769 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md @@ -79,7 +79,7 @@ ctx.fill(); Dans cet exemple, les points de contrôle sont rouges et les points de départ et d'arrivée sont bleus. -{{EmbedLiveSample('how_beziercurveto_works', 315, 165)}} +{{EmbedLiveSample('Fonctionnement_de_bezierCurveTo', 315, 165)}} ### Une courbe cubique de Bézier simple @@ -107,7 +107,7 @@ contexte2D.stroke(); #### Résultat -{{EmbedLiveSample('a_simple_bezier_curve', 700, 180)}} +{{EmbedLiveSample('Une_courbe_cubique_de_Bézier_simple', 700, 180)}} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md b/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md index f11c76ec20..6806016159 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.clearRect() slug: Web/API/CanvasRenderingContext2D/clearRect -tags: - - API - - Canvas - - CanvasRendering2D - - Méthode - - Reference translation_of: Web/API/CanvasRenderingContext2D/clearRect --- {{APIRef}} @@ -110,7 +104,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 400) }} +{{ EmbedLiveSample('Code_jouable', 700, 400) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md b/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md index 73798baafa..9d08469a66 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md @@ -1,8 +1,6 @@ --- title: CanvasRenderingContext2D.closePath() slug: Web/API/CanvasRenderingContext2D/closePath -tags: - - Méthode translation_of: Web/API/CanvasRenderingContext2D/closePath --- {{APIRef}} @@ -84,7 +82,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 400) }} +{{ EmbedLiveSample('Code_jouable', 700, 400) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md b/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md index 3fe6679a76..7257471422 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md @@ -1,13 +1,6 @@ --- title: CanvasRenderingContext2D.createLinearGradient() slug: Web/API/CanvasRenderingContext2D/createLinearGradient -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Gradients - - Méthode - - Reference translation_of: Web/API/CanvasRenderingContext2D/createLinearGradient --- {{APIRef}} @@ -109,7 +102,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/direction/index.md b/files/fr/web/api/canvasrenderingcontext2d/direction/index.md index b56729678a..72818f6705 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/direction/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/direction/index.md @@ -1,13 +1,6 @@ --- title: CanvasRenderingContext2D.direction slug: Web/API/CanvasRenderingContext2D/direction -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Experimental - - Propriété - - Reference translation_of: Web/API/CanvasRenderingContext2D/direction --- {{APIRef}} {{SeeCompatTable}} @@ -96,7 +89,7 @@ textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); ``` -{{EmbedLiveSample('code_jouable', 700, 360)}} +{{EmbedLiveSample('Code_jouable', 700, 360)}} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md b/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md index e7bb8508f3..8f4751d083 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.drawImage() slug: Web/API/CanvasRenderingContext2D/drawImage -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode - - Référence(2) translation_of: Web/API/CanvasRenderingContext2D/drawImage --- {{APIRef}} @@ -119,7 +113,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md b/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md index 197d6aad25..445be59e65 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.ellipse() slug: Web/API/CanvasRenderingContext2D/ellipse -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Experimental - - Méthode translation_of: Web/API/CanvasRenderingContext2D/ellipse --- {{APIRef}} {{SeeCompatTable}} @@ -101,7 +95,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/fill/index.md b/files/fr/web/api/canvasrenderingcontext2d/fill/index.md index d7197dc21c..6d79084923 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/fill/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/fill/index.md @@ -1,15 +1,11 @@ --- title: CanvasRenderingContext2D.fill() slug: Web/API/CanvasRenderingContext2D/fill -tags: - - API - - Canvas - - CanvasRenderingContext2D translation_of: Web/API/CanvasRenderingContext2D/fill --- {{APIRef}} -La méthode **`CanvasRenderingContext2D`\*\***`.fill()`\*\* de l'API Canvas 2D remplit le chemin courant ou donné avec la couleur de fond en cours, en utilisant la règle de remplissage extérieur/intérieur non nul ou la règle de remplissage pair/impair. +La méthode **`CanvasRenderingContext2D.fill()`** de l'API Canvas 2D remplit le chemin courant ou donné avec la couleur de fond en cours, en utilisant la règle de remplissage extérieur/intérieur non nul ou la règle de remplissage pair/impair. ## Syntaxe @@ -91,7 +87,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ### Utiliser l'option `fillRule` @@ -174,7 +170,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{EmbedLiveSample('code_jouable_2', 700, 360)}} +{{EmbedLiveSample('Code_jouable_2', 700, 360)}} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md b/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md index d8fc1404f8..39a285d53f 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md @@ -1,11 +1,6 @@ --- title: CanvasRenderingContext2D.fillRect() slug: Web/API/CanvasRenderingContext2D/fillRect -tags: - - API - - Canvas - - CanvasRendering2D - - Méthode translation_of: Web/API/CanvasRenderingContext2D/fillRect --- {{APIRef}} @@ -92,7 +87,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md b/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md index 539ce49e67..6ef47681ac 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.fillStyle slug: Web/API/CanvasRenderingContext2D/fillStyle -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Propriété - - Reference translation_of: Web/API/CanvasRenderingContext2D/fillStyle --- {{APIRef}} @@ -93,7 +87,7 @@ textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ### Un exemple `fillStyle` avec les boucles `for` @@ -116,7 +110,7 @@ for (var i = 0; i < 6; i++){ Le résultat devrait ressembler à ça: -{{EmbedLiveSample("A_fillStyle_example_with_for_loops", 160, 160, "canvas_fillstyle.png")}} +{{EmbedLiveSample("Un_exemple_fillStyle_avec_les_boucles_for", 160, 160, "canvas_fillstyle.png")}} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md b/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md index 73d1a75588..300d43b927 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.fillText() slug: Web/API/CanvasRenderingContext2D/fillText -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode - - Reference translation_of: Web/API/CanvasRenderingContext2D/fillText --- {{APIRef}} @@ -96,7 +90,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/font/index.md b/files/fr/web/api/canvasrenderingcontext2d/font/index.md index 37ebc8f81b..da5771f46a 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/font/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/font/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.font slug: Web/API/CanvasRenderingContext2D/font -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Propriété - - Reference translation_of: Web/API/CanvasRenderingContext2D/font --- {{APIRef}} @@ -85,7 +79,7 @@ textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ### Chargement de polices avec l'API CSS Font Loading diff --git a/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md b/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md index 3ffbf48e4e..3ad6330fcf 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.globalAlpha slug: Web/API/CanvasRenderingContext2D/globalAlpha -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Propriété - - Reference translation_of: Web/API/CanvasRenderingContext2D/globalAlpha --- {{APIRef}}La propriété **CanvasRenderingContext2D.globalAlpha** de l'API Canvas 2D spécifie la valeur alpha qui sera appliquée aux formes et aux images avant qu'elles ne soient dessinées sur le canevas. La valeur est comprise entre 0,0 (entièrement transparente) et 1,0 (entièrement opaque). @@ -95,7 +89,7 @@ zoneTexte.addEventListener('input', dessinerCanevas); window.addEventListener('load', dessinerCanevas); ``` -{{ EmbedLiveSample('code_jouable', 700, 380) }} +{{ EmbedLiveSample('Code_jouable', 700, 380) }} ### Un exemple de `globalAlpha` @@ -130,7 +124,7 @@ for (i = 0; i < 7; i++){ <canvas id="canevas" width="150" height="150"></canvas> ``` -{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "canvas_globalalpha.png")}} +{{EmbedLiveSample("Un_exemple_de_globalAlpha", "180", "180", "canvas_globalalpha.png")}} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md b/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md index c82c88770b..232cc556c8 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md @@ -15,11 +15,7 @@ Voir aussi [Composition et découpe](/fr/docs/Tutoriel_canvas/Composition) dan `type` est de type {{jsxref("String")}} et permet de choisir quelle opération de composition ou de mode fondu utiliser. -### Types - -{{EmbedLiveSample("Compositing_example", 750, 6900, "" ,"Web/API/Canvas_API/Tutorial/Compositing/Example")}} - -## Examples +## Exemples ### Changer l'opération de composition @@ -48,7 +44,7 @@ ctx.fillRect(50, 50, 100, 100); #### Résultat -{{ EmbedLiveSample('Changing_the_composite_operation', 700, 180) }} +{{ EmbedLiveSample('Exemples', 700, 180) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md b/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md index 27fa24574b..3ab0e43267 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md @@ -1,14 +1,6 @@ --- title: CanvasRenderingContext2D.imageSmoothingEnabled slug: Web/API/CanvasRenderingContext2D/imageSmoothingEnabled -tags: - - API - - Canevas - - Canvas - - CanvasRenderingContext2D - - Experimental - - Propriété - - Reference translation_of: Web/API/CanvasRenderingContext2D/imageSmoothingEnabled --- {{APIRef}} {{SeeCompatTable}} @@ -26,7 +18,7 @@ Cette propriété est utile pour les jeux à thème pixel-art, lors d'une mise - `valeur` - : Un {{jsxref("Boolean")}} indiquant de lisser les images ou non. -## exemples +## Exemples ### Désactiver le lissage d'image @@ -68,7 +60,7 @@ img.onload = function() { #### Résultat -{{ EmbedLiveSample('désactiver_le_lissage_d_image', 700, 240) }} +{{ EmbedLiveSample('Exemples', 700, 240) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md b/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md index 033a50cd4c..e3666e004c 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.lineCap slug: Web/API/CanvasRenderingContext2D/lineCap -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Propriété - - Reference translation_of: Web/API/CanvasRenderingContext2D/lineCap --- {{APIRef}} @@ -101,7 +95,7 @@ zoneTexte.addEventListener('input', dessinerCanevas); window.addEventListener('load', dessinerCanevas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ### Un exemple de `lineCap` @@ -138,7 +132,7 @@ for (var i = 0; i < lineCap.length; i++) { <canvas id="canevas" width="150" height="150"></canvas> ``` -{{EmbedLiveSample("A_lineCap_example", "180", "180", "canvas_linecap.png")}} +{{EmbedLiveSample("Un_exemple_de_lineCap", "180", "180", "canvas_linecap.png")}} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md b/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md index c438190f71..f6d0829ac0 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md @@ -1,13 +1,6 @@ --- title: CanvasRenderingContext2D.lineJoin slug: Web/API/CanvasRenderingContext2D/lineJoin -tags: - - API - - Canvas - - Propriété - - arrondit - - coin - - stroke translation_of: Web/API/CanvasRenderingContext2D/lineJoin --- {{APIRef}} @@ -65,7 +58,7 @@ ctx.stroke(); #### Résultat -{{ EmbedLiveSample('Changing_the_joins_in_a_path', 700, 180) }} +{{ EmbedLiveSample('Modifier_les_jointures_d\'un_tracé', 700, 180) }} ### Comparaison des jointures de lignes @@ -92,7 +85,7 @@ for (let i = 0; i < lineJoin.length; i++) { } ``` -{{EmbedLiveSample("Comparison_of_line_joins", "180", "180", "canvas_linejoin.png")}} +{{EmbedLiveSample("Comparaison_des_jointures_de_lignes", "180", "180", "canvas_linejoin.png")}} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md b/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md index 776fe0223d..a262401891 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.lineTo() slug: Web/API/CanvasRenderingContext2D/lineTo -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode - - Reference translation_of: Web/API/CanvasRenderingContext2D/lineTo --- {{APIRef}} @@ -91,7 +85,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md b/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md index e2bd2fb269..9321ee8b6d 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md @@ -1,10 +1,6 @@ --- title: CanvasRenderingContext2D.moveTo() slug: Web/API/CanvasRenderingContext2D/moveTo -tags: - - API - - Canvas - - CanvasRenderingContext2D translation_of: Web/API/CanvasRenderingContext2D/moveTo --- {{APIRef}} @@ -89,7 +85,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md b/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md index 7b95e52523..d94c8c919b 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md @@ -1,19 +1,6 @@ --- title: CanvasRenderingContext2D.quadraticCurveTo() slug: Web/API/CanvasRenderingContext2D/quadraticCurveTo -tags: - - API - - Bézier - - Canevas - - Canvas - - CanvasRenderingContext2D - - Courbe - - Courbe de Bézier - - Courbe quadratique - - Courbe quadratique de Bézier - - Méthode - - Quadratique - - Reference translation_of: Web/API/CanvasRenderingContext2D/quadraticCurveTo --- {{APIRef}} @@ -77,7 +64,7 @@ contexte2D.fill(); Dans cet exemple, le point de contrôle est rouge et les points de départ et d'arrivée sont en bleu. -{{EmbedLiveSample('How_quadraticCurveTo_works', 315, 165)}} +{{EmbedLiveSample('Comment_quadraticCurveTo_fonctionne', 315, 165)}} ### Une courbe quadratique simple @@ -105,7 +92,7 @@ contexte2D.stroke(); #### Résultat -{{EmbedLiveSample('A_simple_quadratic_curve', 700, 180)}} +{{EmbedLiveSample('Une_courbe_quadratique_simple', 700, 180)}} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/rect/index.md b/files/fr/web/api/canvasrenderingcontext2d/rect/index.md index 982b8594f8..af68823cc5 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/rect/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/rect/index.md @@ -1,11 +1,6 @@ --- title: CanvasRenderingContext2D.rect() slug: Web/API/CanvasRenderingContext2D/rect -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode translation_of: Web/API/CanvasRenderingContext2D/rect --- {{APIRef}} @@ -89,7 +84,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md b/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md index 3aec5226fa..4caa6d9e16 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.rotate() slug: Web/API/CanvasRenderingContext2D/rotate -tags: - - API - - Cancas - - CanvasRenderingContext2D - - Méthode - - Reference translation_of: Web/API/CanvasRenderingContext2D/rotate --- {{APIRef}} @@ -93,7 +87,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/scale/index.md b/files/fr/web/api/canvasrenderingcontext2d/scale/index.md index f8ca5735cb..7e7d1fff82 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/scale/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/scale/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.scale() slug: Web/API/CanvasRenderingContext2D/scale -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode - - Référence(2) translation_of: Web/API/CanvasRenderingContext2D/scale --- {{APIRef}} @@ -93,7 +87,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ### Utilisation de `scale` pour un retournement horizontal ou vertical @@ -140,7 +134,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable_2', 700, 360) }} +{{ EmbedLiveSample('Code_jouable_2', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md b/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md index 520e2c8bb5..85d5078d2c 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md @@ -1,17 +1,6 @@ --- title: CanvasRenderingContext2D.setLineDash() slug: Web/API/CanvasRenderingContext2D/setLineDash -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Lignes - - Modèle - - Méthodes - - Pointillés - - Reference - - patterns - - setLineDash translation_of: Web/API/CanvasRenderingContext2D/setLineDash --- {{APIRef}} @@ -114,7 +103,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 10, 410) }} +{{ EmbedLiveSample('Code_jouable', 10, 410) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md b/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md index a1dcc5a0f9..94c34409d5 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.setTransform() slug: Web/API/CanvasRenderingContext2D/setTransform -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode - - Reference translation_of: Web/API/CanvasRenderingContext2D/setTransform --- {{APIRef}} @@ -99,7 +93,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md b/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md index 8d06004dc7..86f5f960aa 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md @@ -79,7 +79,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md b/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md index 0c696da8c0..f2b1f67edc 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.strokeRect() slug: Web/API/CanvasRenderingContext2D/strokeRect -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode - - Référence(2) translation_of: Web/API/CanvasRenderingContext2D/strokeRect --- {{APIRef}} @@ -91,7 +85,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md b/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md index 1bde6b2ed5..aab6253a44 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md @@ -87,7 +87,7 @@ textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ### Un exemple `strokeStyle` @@ -113,7 +113,7 @@ for (var i = 0; i < 6; i++) { Le résultat devrait ressembler à ça: -{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "canvas_strokestyle.png")}} +{{EmbedLiveSample("Un_exemple_strokeStyle", "180", "180", "canvas_strokestyle.png")}} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md b/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md index 3778eedf4f..2f7db41cd4 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.strokeText() slug: Web/API/CanvasRenderingContext2D/strokeText -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode - - Reference translation_of: Web/API/CanvasRenderingContext2D/strokeText --- {{APIRef}} @@ -96,7 +90,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md b/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md index a6da0bb4f9..a591fee3fd 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.textAlign slug: Web/API/CanvasRenderingContext2D/textAlign -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Propriété - - Reference translation_of: Web/API/CanvasRenderingContext2D/textAlign --- {{APIRef}} @@ -59,7 +53,7 @@ ctx.strokeText('Hello world', 0, 100); Modifier le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : -#### Playable code +#### Code jouable ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> @@ -99,7 +93,7 @@ textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md b/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md index 24253e2225..8b2b9c8b80 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.textBaseline slug: Web/API/CanvasRenderingContext2D/textBaseline -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Propriété - - Reference translation_of: Web/API/CanvasRenderingContext2D/textBaseline --- {{APIRef}} @@ -101,7 +95,7 @@ textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/transform/index.md b/files/fr/web/api/canvasrenderingcontext2d/transform/index.md index 204a89deb2..e3ac8f2edd 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/transform/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/transform/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.transform() slug: Web/API/CanvasRenderingContext2D/transform -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode - - Reference translation_of: Web/API/CanvasRenderingContext2D/transform --- {{APIRef}} @@ -102,7 +96,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/canvasrenderingcontext2d/translate/index.md b/files/fr/web/api/canvasrenderingcontext2d/translate/index.md index 561d1897b1..2c38c52591 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/translate/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/translate/index.md @@ -1,12 +1,6 @@ --- title: CanvasRenderingContext2D.translate() slug: Web/API/CanvasRenderingContext2D/translate -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Méthode - - Reference translation_of: Web/API/CanvasRenderingContext2D/translate --- {{APIRef}} @@ -93,7 +87,7 @@ textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Spécifications diff --git a/files/fr/web/api/document/caretrangefrompoint/index.md b/files/fr/web/api/document/caretrangefrompoint/index.md index a0e0d2282c..a9fd2392a8 100644 --- a/files/fr/web/api/document/caretrangefrompoint/index.md +++ b/files/fr/web/api/document/caretrangefrompoint/index.md @@ -1,12 +1,6 @@ --- title: Document.caretRangeFromPoint() slug: Web/API/Document/caretRangeFromPoint -tags: - - API - - DOM - - Document - - Insertion - - Méthode translation_of: Web/API/Document/caretRangeFromPoint --- {{APIRef("DOM")}}{{Non-standard_header}} @@ -80,7 +74,7 @@ for (i=0 ; i < paragraphs.length; i++) { } ``` -{{ EmbedLiveSample('Example', '', '', '', 'Web/API/Document/caretRangeFromPoint') }} +{{ EmbedLiveSample('Exemple', '', '', '', 'Web/API/Document/caretRangeFromPoint') }} ## Compatibilité des navigateurs diff --git a/files/fr/web/api/document/createdocumentfragment/index.md b/files/fr/web/api/document/createdocumentfragment/index.md index d4bf794671..e9e2ec325d 100644 --- a/files/fr/web/api/document/createdocumentfragment/index.md +++ b/files/fr/web/api/document/createdocumentfragment/index.md @@ -1,13 +1,6 @@ --- title: document.createDocumentFragment slug: Web/API/Document/createDocumentFragment -tags: - - API - - DOM - - Document - - HTML - - Méthode - - Reference translation_of: Web/API/Document/createDocumentFragment --- {{ApiRef("DOM")}} @@ -56,7 +49,7 @@ element.appendChild(fragment); ### Résultat -{{EmbedLiveSample("Example", 600, 140)}} +{{EmbedLiveSample("Exemple", 600, 140)}} ## Spécification diff --git a/files/fr/web/api/document/createelement/index.md b/files/fr/web/api/document/createelement/index.md index e68fb79530..98fcfd0f37 100644 --- a/files/fr/web/api/document/createelement/index.md +++ b/files/fr/web/api/document/createelement/index.md @@ -1,13 +1,6 @@ --- title: document.createElement slug: Web/API/Document/createElement -tags: - - API - - Création - - DOM - - Document - - Elements - - Méthodes translation_of: Web/API/Document/createElement --- {{APIRef("DOM")}} @@ -68,7 +61,7 @@ function addElement () { } ``` -{{EmbedLiveSample("Basic_example", 500, 50)}} +{{EmbedLiveSample("Exemple_de_base", 500, 50)}} ### Exemple de composant web diff --git a/files/fr/web/api/document/domcontentloaded_event/index.md b/files/fr/web/api/document/domcontentloaded_event/index.md index 5fa9889813..92c383e65d 100644 --- a/files/fr/web/api/document/domcontentloaded_event/index.md +++ b/files/fr/web/api/document/domcontentloaded_event/index.md @@ -145,7 +145,7 @@ document.addEventListener('DOMContentLoaded', (event) => { #### Résultat -{{ EmbedLiveSample('Live_example', '100%', '160px') }} +{{ EmbedLiveSample('Démonstration', '100%', '160px') }} ## Spécifications diff --git a/files/fr/web/api/document/dragstart_event/index.md b/files/fr/web/api/document/dragstart_event/index.md index 2e0cc56f99..152aeaeb86 100644 --- a/files/fr/web/api/document/dragstart_event/index.md +++ b/files/fr/web/api/document/dragstart_event/index.md @@ -43,7 +43,7 @@ L'événement **dragstart** est déclenché lorsque l'utilisateur glisse un élà | `altKey` {{readonlyInline}} | boolean | `true` if the alt key was down when the event was fired. `false` otherwise. | | `metaKey` {{readonlyInline}} | boolean | `true` if the meta key was down when the event was fired. `false` otherwise. | -## Exemple：dropzone +## Exemple : dropzone ### HTML Content @@ -134,7 +134,7 @@ L'événement **dragstart** est déclenché lorsque l'utilisateur glisse un élà  }, false); ``` -{{ EmbedLiveSample('Example：dropzone') }} +{{ EmbedLiveSample('Exemple_dropzone') }} ## Spécifications diff --git a/files/fr/web/api/document/elementsfrompoint/index.md b/files/fr/web/api/document/elementsfrompoint/index.md index e275e5780d..275ad2f1e8 100644 --- a/files/fr/web/api/document/elementsfrompoint/index.md +++ b/files/fr/web/api/document/elementsfrompoint/index.md @@ -66,7 +66,7 @@ if (document.elementsFromPoint) { ### Résultat -{{EmbedLiveSample('Example', '420', '120')}} +{{EmbedLiveSample('Exemples', '420', '120')}} ## Spécifications diff --git a/files/fr/web/api/document/getelementbyid/index.md b/files/fr/web/api/document/getelementbyid/index.md index cc1a21f505..c73932122d 100644 --- a/files/fr/web/api/document/getelementbyid/index.md +++ b/files/fr/web/api/document/getelementbyid/index.md @@ -1,13 +1,6 @@ --- title: document.getElementById slug: Web/API/Document/getElementById -tags: - - API - - DOM - - Document - - Elements - - Identifiant - - Méthodes translation_of: Web/API/Document/getElementById --- {{ ApiRef("DOM") }} @@ -59,7 +52,7 @@ function changeColor(newColor) { ### Résultat -{{ EmbedLiveSample('Example1', 250, 100) }} +{{ EmbedLiveSample('Exemple', 250, 100) }} ## Notes d'utilisation @@ -67,7 +60,7 @@ L'écriture de la lettre capitale de « Id » dans le nom de cette méthode _d Contrairement à d'autres méthodes de recherche d'éléments, comme {{domxref("Document.querySelector()")}} et {{domxref("Document.querySelectorAll()")}}, `getElementById` est uniquement disponible comme méthode de l'objet global `document` et _n'est pas_ disponible sur tous les objets du DOM. Parce que les valeurs d'ID doivent être uniques dans l'ensemble du document, il n'y pas besoin d'avoir une version "locale" de la fonction. -## Exemple +## Autre exemple ```html <!doctype html> diff --git a/files/fr/web/api/document/keypress_event/index.md b/files/fr/web/api/document/keypress_event/index.md index f079811072..9d2fdf06f7 100644 --- a/files/fr/web/api/document/keypress_event/index.md +++ b/files/fr/web/api/document/keypress_event/index.md @@ -1,12 +1,6 @@ --- title: keypress slug: Web/API/Document/keypress_event -tags: - - DOM - - Déprécié - - Evènement - - KeyboardEvent - - Reference translation_of: Web/API/Document/keypress_event --- {{APIRef}} {{deprecated_header}} @@ -70,7 +64,7 @@ function logKey(e) { } ``` -{{EmbedLiveSample("addEventListener_keypress_example")}} +{{EmbedLiveSample("Exemples")}} ### Équivalent `onkeypress` diff --git a/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.md b/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.md index 78199ae55a..680aae3ece 100644 --- a/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.md +++ b/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.md @@ -2,11 +2,6 @@ title: Explorer un tableau HTML avec des interfaces DOM et JavaScript slug: >- Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces -tags: - - DOM - - Guide - - HTML - - JavaScript translation_of: >- Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces original_slug: Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript @@ -17,7 +12,7 @@ Cet article propose une vue d'ensemble de certaines méthodes DOM Level 1 fondam > **Note :**Les méthodes décrites ici font partie de la spécification Document Object Model level 1 (Core). DOM level 1 comprend des méthodes destinées à l'accès et à la manipulation des documents (DOM 1 core) ainsi que des méthodes spécifiques aux documents HTML (DOM 1 HTML). -## Exemple: Création d'un tableau HTML dynamiquement (`Sample1.html`) +## Création d'un tableau HTML dynamiquement ### Contenu HTML @@ -64,7 +59,7 @@ function generate_table() { } ``` -{{ EmbedLiveSample('Overview_of_Sample1.html') }} +{{ EmbedLiveSample('Création_d\'un_tableau_HTML_dynamiquement') }} Remarquez l'ordre dans lequel les éléments et le nœud texte sont créés : @@ -113,7 +108,7 @@ Voici l'arborescence objet DOM créée par le code, pour l'élément TABLE et se Vous pouvez construire ce tableau ainsi que ses éléments enfants internes en utilisant juste quelques méthodes DOM. Conservez à l'esprit le modèle en arbre des structures que vous comptez créer, cela rendra plus facile l'écriture du code nécessaire. Dans l'arbre \<table> de la figure 1, l'élément \<table> a un enfant, l'élément \<tbody>, qui lui-même a deux enfants \<tr>, qui à leur tour ont chacun un enfant \<td>. Enfin, chacun de ces éléments \<td> a un enfant, un nœud texte. -## Exemple : Définition de la couleur d'arrière-plan d'un paragraphe +## Définition de la couleur d'arrière-plan d'un paragraphe `getElementsByTagName` est à la fois une méthode de l'interface Document et de l'interface Element. Lorsqu'il est appelé, il renvoie un tableau avec tous les descendants de l'élément correspondant au nom de l'étiquette. Le premier élément de la liste se trouve à la position \[0] dans le tableau. @@ -144,13 +139,13 @@ function set_background() { } ``` -{{ EmbedLiveSample('Setting_background_of_a_paragraph') }} +{{ EmbedLiveSample('Définition_de_la_couleur_d\'arrière-plan_d\'un_paragraphe') }} Dans cet exemple, on assigne à la variable `myP` l'objet DOM du second élément `p` du corps (body). 1. On récupère d'abord une liste de tous les éléments body avec - ```html + ```js myBody = document.getElementsByTagName("body")[0] ``` @@ -158,13 +153,13 @@ Dans cet exemple, on assigne à la variable `myP` l'objet DOM du second élémen 2. Ensuite, on récupère tous les éléments p qui sont des enfants de body en utilisant - ```html + ```js myBodyElements = myBody.getElementsByTagName("p"); ``` 3. Pour finir on prend le deuxième élément de la liste des éléments p avec - ```html + ```js myP = myBodyElements[1]; ``` diff --git a/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.md b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.md index 0348ed4df2..99b70402e6 100644 --- a/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.md +++ b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.md @@ -1,11 +1,6 @@ --- title: Utilisation du DOM Level 1 Core du W3C slug: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core -tags: - - Arbre - - DOM - - Noeud - - Texte translation_of: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core original_slug: Web/API/Document_object_model/Utilisation_du_DOM_Level_1_Core_du_W3C --- @@ -76,7 +71,7 @@ Supposons que l'auteur désire prendre le document présenté plus haut et chang } ``` -{{ EmbedLiveSample('A_simple_example', 800, 300) }} +{{ EmbedLiveSample('Un_exemple_simple', 800, 300) }} Vous pouvez voir ce script dans [un exemple complet](http://www.mozilla.org/docs/dom/technote/intro/example.html). diff --git a/files/fr/web/api/domtokenlist/add/index.md b/files/fr/web/api/domtokenlist/add/index.md index 9052727e6e..7320b0432f 100644 --- a/files/fr/web/api/domtokenlist/add/index.md +++ b/files/fr/web/api/domtokenlist/add/index.md @@ -1,13 +1,6 @@ --- title: DOMTokenList.add() slug: Web/API/DOMTokenList/add -tags: - - API - - Ajout - - Chaînes de caractères - - DOM - - Listes - - Méthodes translation_of: Web/API/DOMTokenList/add --- {{APIRef("DOM")}} @@ -48,7 +41,7 @@ span.textContent = classes; La sortie ressemble à ceci : -{{ EmbedLiveSample('Examples', '100%', 60) }} +{{ EmbedLiveSample('Exemples', '100%', 60) }} Vous pouvez ajouter plusieurs _token_ : diff --git a/files/fr/web/api/domtokenlist/contains/index.md b/files/fr/web/api/domtokenlist/contains/index.md index ca3978e077..4d4b942e74 100644 --- a/files/fr/web/api/domtokenlist/contains/index.md +++ b/files/fr/web/api/domtokenlist/contains/index.md @@ -1,13 +1,6 @@ --- title: DOMTokenList.contains() slug: Web/API/DOMTokenList/contains -tags: - - API - - Chaînes de caractères - - DOM - - Listes - - Méthodes - - Recherche contenu translation_of: Web/API/DOMTokenList/contains --- {{APIRef("DOM")}} @@ -52,7 +45,7 @@ if(result) { La sortie ressemble à ceci : -{{ EmbedLiveSample('Examples', '100%', 60) }} +{{ EmbedLiveSample('Exemples', '100%', 60) }} ## Spécifications diff --git a/files/fr/web/api/domtokenlist/entries/index.md b/files/fr/web/api/domtokenlist/entries/index.md index 113f23c1b0..784e530c17 100644 --- a/files/fr/web/api/domtokenlist/entries/index.md +++ b/files/fr/web/api/domtokenlist/entries/index.md @@ -1,13 +1,6 @@ --- title: DOMTokenList.entries() slug: Web/API/DOMTokenList/entries -tags: - - API - - Chaînes de caractères - - DOM - - Itérateurs - - Listes - - Méthodes translation_of: Web/API/DOMTokenList/entries --- {{APIRef("DOM")}} @@ -46,7 +39,7 @@ for(var value of iterator) { La sortie ressemble à ceci : -{{ EmbedLiveSample('Examples', '100%', 60) }} +{{ EmbedLiveSample('Exemples', '100%', 60) }} ## Spécifications diff --git a/files/fr/web/api/domtokenlist/foreach/index.md b/files/fr/web/api/domtokenlist/foreach/index.md index 917b80e9c2..b63d1bae03 100644 --- a/files/fr/web/api/domtokenlist/foreach/index.md +++ b/files/fr/web/api/domtokenlist/foreach/index.md @@ -1,14 +1,6 @@ --- title: DOMTokenList.forEach() slug: Web/API/DOMTokenList/forEach -tags: - - API - - Boucle - - Chaînes de caractères - - DOM - - Itérateurs - - Méthodes - - Pour chaque translation_of: Web/API/DOMTokenList/forEach --- {{APIRef("DOM")}} @@ -67,7 +59,7 @@ classes.forEach( ### Résultat -{{ EmbedLiveSample('Example', '100%', 60) }} +{{ EmbedLiveSample('Exemple', '100%', 60) }} ## Spécifications diff --git a/files/fr/web/api/domtokenlist/index.md b/files/fr/web/api/domtokenlist/index.md index 8cbf548fc2..365fb85739 100644 --- a/files/fr/web/api/domtokenlist/index.md +++ b/files/fr/web/api/domtokenlist/index.md @@ -1,13 +1,6 @@ --- title: DOMTokenList slug: Web/API/DOMTokenList -tags: - - API - - Chaînes de caractères - - DOM - - Interface - - Listes - - Marques translation_of: Web/API/DOMTokenList --- {{APIRef("DOM")}} @@ -67,7 +60,7 @@ para.textContent = 'paragraph classList is "' + classes + '"'; La sortie ressemble à ceci : -{{ EmbedLiveSample('Examples', '100%', 60) }} +{{ EmbedLiveSample('Exemples', '100%', 60) }} ## Découpage des espaces et suppression des doublons @@ -86,7 +79,7 @@ span.textContent = 'span classList is "' + classes + '"'; La sortie ressemble à ceci : -{{ EmbedLiveSample('Trimming_of_whitespace_and_removal_of_duplicates', '100%', 60) }} +{{ EmbedLiveSample('Découpage_des_espaces_et_suppression_des_doublons', '100%', 60) }} ## Spécifications diff --git a/files/fr/web/api/domtokenlist/item/index.md b/files/fr/web/api/domtokenlist/item/index.md index c1d22f88c5..eb7bbdf3e8 100644 --- a/files/fr/web/api/domtokenlist/item/index.md +++ b/files/fr/web/api/domtokenlist/item/index.md @@ -1,12 +1,6 @@ --- title: DOMTokenList.item() slug: Web/API/DOMTokenList/item -tags: - - API - - Chaînes de caractères - - DOM - - Listes - - Méthodes translation_of: Web/API/DOMTokenList/item --- {{APIRef("DOM")}} @@ -47,7 +41,7 @@ span.textContent = item; La sortie ressemble à ceci : -{{ EmbedLiveSample('Examples', '100%', 60) }} +{{ EmbedLiveSample('Exemples', '100%', 60) }} ## Spécifications diff --git a/files/fr/web/api/domtokenlist/keys/index.md b/files/fr/web/api/domtokenlist/keys/index.md index f5408bd2c6..3c4d955edc 100644 --- a/files/fr/web/api/domtokenlist/keys/index.md +++ b/files/fr/web/api/domtokenlist/keys/index.md @@ -1,15 +1,6 @@ --- title: DOMTokenList.keys() slug: Web/API/DOMTokenList/keys -tags: - - API - - Boucle - - Clés - - DOM - - Itérateur - - Listes - - Méthodes - - for of translation_of: Web/API/DOMTokenList/keys --- {{APIRef("DOM")}} @@ -52,7 +43,7 @@ for(var value of iterator) { La sortie ressemble à ceci : -{{ EmbedLiveSample('Examples', '100%', 60) }} +{{ EmbedLiveSample('Exemples', '100%', 60) }} ## Spécifications diff --git a/files/fr/web/api/domtokenlist/length/index.md b/files/fr/web/api/domtokenlist/length/index.md index 877b240632..e9d508cf22 100644 --- a/files/fr/web/api/domtokenlist/length/index.md +++ b/files/fr/web/api/domtokenlist/length/index.md @@ -1,12 +1,6 @@ --- title: DOMTokenList.length slug: Web/API/DOMTokenList/length -tags: - - API - - DOM - - Listes - - Longueur - - Propriétés translation_of: Web/API/DOMTokenList/length --- {{APIRef("DOM")}} @@ -43,7 +37,7 @@ span.textContent = 'classList length = ' + length; La sortie ressemble à ceci : -{{ EmbedLiveSample('Examples', '100%', 60) }} +{{ EmbedLiveSample('Exemples', '100%', 60) }} ## Spécifications diff --git a/files/fr/web/api/domtokenlist/remove/index.md b/files/fr/web/api/domtokenlist/remove/index.md index 98f8ccbe34..4a48ffbc3f 100644 --- a/files/fr/web/api/domtokenlist/remove/index.md +++ b/files/fr/web/api/domtokenlist/remove/index.md @@ -1,12 +1,6 @@ --- title: DOMTokenList.remove() slug: Web/API/DOMTokenList/remove -tags: - - API - - DOM - - Listes - - Méthodes - - Suppression translation_of: Web/API/DOMTokenList/remove --- {{APIRef("DOM")}} @@ -47,7 +41,7 @@ span.textContent = classes; La sortie ressemble à ceci : -{{ EmbedLiveSample('Examples', '100%', 60) }} +{{ EmbedLiveSample('Exemples', '100%', 60) }} Pour supprimer plusieurs classes à la fois, vous pouvez utiliser un tableau (_array_) avec la [syntaxe de décomposition](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateur_de_d%C3%A9composition). L'ordre des classes n'a pas d'importance : diff --git a/files/fr/web/api/domtokenlist/replace/index.md b/files/fr/web/api/domtokenlist/replace/index.md index a352208494..d8f97450a8 100644 --- a/files/fr/web/api/domtokenlist/replace/index.md +++ b/files/fr/web/api/domtokenlist/replace/index.md @@ -1,12 +1,6 @@ --- title: DOMTokenList.replace() slug: Web/API/DOMTokenList/replace -tags: - - API - - DOM - - Listes - - Méthodes - - Remplacement translation_of: Web/API/DOMTokenList/replace --- {{APIRef("DOM")}} @@ -53,7 +47,7 @@ try { La sortie ressemble à ceci : -{{ EmbedLiveSample('Examples', '100%', 60) }} +{{ EmbedLiveSample('Exemples', '100%', 60) }} ## Spécifications diff --git a/files/fr/web/api/domtokenlist/value/index.md b/files/fr/web/api/domtokenlist/value/index.md index 675415f3fc..6ff0072761 100644 --- a/files/fr/web/api/domtokenlist/value/index.md +++ b/files/fr/web/api/domtokenlist/value/index.md @@ -1,11 +1,6 @@ --- title: DOMTokenList.value slug: Web/API/DOMTokenList/value -tags: - - API - - DOM - - Méthodes - - Valeur translation_of: Web/API/DOMTokenList/value --- {{APIRef("DOM")}} @@ -40,7 +35,7 @@ span.textContent = classes.value; La sortie ressemble à ceci : -{{ EmbedLiveSample('Examples', '100%', 60) }} +{{ EmbedLiveSample('Exemples', '100%', 60) }} ## Spécifications diff --git a/files/fr/web/api/domtokenlist/values/index.md b/files/fr/web/api/domtokenlist/values/index.md index 43db920fe6..491b265cba 100644 --- a/files/fr/web/api/domtokenlist/values/index.md +++ b/files/fr/web/api/domtokenlist/values/index.md @@ -1,13 +1,6 @@ --- title: DOMTokenList.values() slug: Web/API/DOMTokenList/values -tags: - - API - - DOM - - Itérateurs - - Listes - - Méthodes - - Valeurs translation_of: Web/API/DOMTokenList/values --- {{APIRef("DOM")}} @@ -50,7 +43,7 @@ for(var value of iterator) { La sortie ressemble à ceci : -{{ EmbedLiveSample('Examples', '100%', 60) }} +{{ EmbedLiveSample('Exemples', '100%', 60) }} ## Spécifications diff --git a/files/fr/web/api/element/compositionstart_event/index.md b/files/fr/web/api/element/compositionstart_event/index.md index b1370d4893..55971fdc43 100644 --- a/files/fr/web/api/element/compositionstart_event/index.md +++ b/files/fr/web/api/element/compositionstart_event/index.md @@ -1,12 +1,6 @@ --- title: compositionstart slug: Web/API/Element/compositionstart_event -tags: - - Element - - Event - - Input method - - Reference - - compositionstart translation_of: Web/API/Element/compositionstart_event original_slug: Web/Events/compositionstart --- @@ -120,7 +114,7 @@ inputElement.addEventListener('compositionend', handleEvent); #### Résultat -{{ EmbedLiveSample('Live_example', '100%', '180px') }} +{{ EmbedLiveSample('Exemple_concret', '100%', '180px') }} ## Spécifications diff --git a/files/fr/web/api/element/getboundingclientrect/index.md b/files/fr/web/api/element/getboundingclientrect/index.md index 5e64f11e08..aa37626b39 100644 --- a/files/fr/web/api/element/getboundingclientrect/index.md +++ b/files/fr/web/api/element/getboundingclientrect/index.md @@ -1,28 +1,6 @@ --- title: Element.getBoundingClientRect() slug: Web/API/Element/getBoundingClientRect -tags: - - API - - Boundary - - Bounding - - Bounds - - CSSOM View - - Client - - Containing - - DOM - - Element - - Enclosing - - Method - - Méthode - - Minimum - - Rectangle - - Reference - - Smallest - - clientHeight - - getBoundingClientRect - - getClientRects - - offsetHeight - - scrollHeight translation_of: Web/API/Element/getBoundingClientRect --- {{APIRef("DOM")}} @@ -92,7 +70,7 @@ for (let key in rect) { } ``` -{{EmbedLiveSample('Example', '100%', 640)}} +{{EmbedLiveSample('Exemple', '100%', 640)}} Remarquez comme les `width`/`height` sont égales à `width`/`height` + `padding`. diff --git a/files/fr/web/api/element/queryselector/index.md b/files/fr/web/api/element/queryselector/index.md index bee72ee47a..876070c34a 100644 --- a/files/fr/web/api/element/queryselector/index.md +++ b/files/fr/web/api/element/queryselector/index.md @@ -1,21 +1,6 @@ --- title: Element.querySelector() slug: Web/API/Element/querySelector -tags: - - API - - CSS - - CSS Selectors - - DOM - - Element - - Elements - - Finding Elements - - Locating Elements - - Method - - Reference - - Searching Elements - - Selecting Elements - - Selectors - - querySelector translation_of: Web/API/Element/querySelector --- {{APIRef("DOM")}} @@ -82,7 +67,7 @@ document.getElementById("output").innerHTML = (baseElement.querySelector("div sp Le résultat ressemble à ceci : -{{EmbedLiveSample('the_entire_hierarchy_counts', '', 200)}} +{{EmbedLiveSample('Exemple', '', 200)}} ### Plus d'exemples diff --git a/files/fr/web/api/element/scrollheight/index.md b/files/fr/web/api/element/scrollheight/index.md index dd8d5f4d78..02e1c29792 100644 --- a/files/fr/web/api/element/scrollheight/index.md +++ b/files/fr/web/api/element/scrollheight/index.md @@ -17,8 +17,6 @@ L'attribut en lecture seule **`element.scrollHeight`** est une mesure de la haut ## Exemple -## Exemple - Avec l'évènement {{domxref("GlobalEventHandlers/onscroll", "onscroll")}}, cette équivalence peut s'avérer utile afin de déterminer si un utilisateur a lu du texte ou non (voir aussi les propriétés {{domxref("element.scrollTop")}} et {{domxref("element.clientHeight")}}). La case à cocher de la démo est désactivée et ne peut être cochée tant que l'ensemble du contenu n'a pas défilé. diff --git a/files/fr/web/api/element/scrolltop/index.md b/files/fr/web/api/element/scrolltop/index.md index dc72baf8f8..aabf8af9f8 100644 --- a/files/fr/web/api/element/scrolltop/index.md +++ b/files/fr/web/api/element/scrolltop/index.md @@ -1,11 +1,6 @@ --- title: Element.scrollTop slug: Web/API/Element/scrollTop -tags: - - API - - CSSOM View - - Property - - Reference translation_of: Web/API/Element/scrollTop --- {{APIRef("DOM")}} @@ -76,7 +71,7 @@ button.onclick = function () { ### Résultat -{{EmbedLiveSample("Example")}} +{{EmbedLiveSample("Exemple")}} ## Spécifications diff --git a/files/fr/web/api/element/setattribute/index.md b/files/fr/web/api/element/setattribute/index.md index ffd46a3092..f86cbf065c 100644 --- a/files/fr/web/api/element/setattribute/index.md +++ b/files/fr/web/api/element/setattribute/index.md @@ -1,12 +1,6 @@ --- title: Element.setAttribute() slug: Web/API/Element/setAttribute -tags: - - API - - Attributs - - DOM - - Element - - Méthode translation_of: Web/API/Element/setAttribute --- {{APIRef("DOM")}} @@ -63,7 +57,7 @@ Ceci démontre 2 choses : - le premier appel de `setAttribute()` ci-dessus montre la modification de la valeur de l'attribut `name` en "helloButton". Vous pouvez le voir en utilisant l'inspecteur de page de votre navigateur ([Chrome](https://developers.google.com/web/tools/chrome-devtools/inspect-styles), [Edge](https://docs.microsoft.com/en-us/microsoft-edge/f12-devtools-guide/dom-explorer), [Firefox](/en-US/docs/Tools/Page_Inspector), [Safari](https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html)). - Pour définir la valeur d'un attribut booléen, tel que `disabled`, vous pouvez spécifier n'importe quelle valeur. Une chaîne vide ou le nom de l'attribut sont des valeurs recommandées. Tout ce qui compte est que si l'attribut est présent, quelle que soit sa valeur réelle, sa valeur est considérée comme `true` (_vraie_). L'absence de l'attribut signifie que sa valeur est `false` (_fausse_). En définissant la valeur de l'attribut `disabled` sur la chaîne vide (""), nous définissons `disabled` sur `true`, ce qui entraîne la désactivation du bouton. -{{ EmbedLiveSample('Example', '300', '50') }} +{{ EmbedLiveSample('Exemple', '300', '50') }} {{DOMAttributeMethods}} diff --git a/files/fr/web/api/event/eventphase/index.md b/files/fr/web/api/event/eventphase/index.md index f6721c8a8d..0fa5698321 100644 --- a/files/fr/web/api/event/eventphase/index.md +++ b/files/fr/web/api/event/eventphase/index.md @@ -189,7 +189,7 @@ function Clear() { } ``` -{{ EmbedLiveSample('Example', '', '700', '', 'Web/API/Event/eventPhase') }} +{{ EmbedLiveSample('Exemple', '', '700', '', 'Web/API/Event/eventPhase') }} ## Spécifications diff --git a/files/fr/web/api/event/preventdefault/index.md b/files/fr/web/api/event/preventdefault/index.md index 7e8b7057f4..ae1be51ad2 100644 --- a/files/fr/web/api/event/preventdefault/index.md +++ b/files/fr/web/api/event/preventdefault/index.md @@ -1,12 +1,6 @@ --- title: Event.preventDefault() slug: Web/API/Event/preventDefault -tags: - - API - - DOM - - Event - - Method - - Reference translation_of: Web/API/Event/preventDefault browser-compat: api.Event.preventDefault --- @@ -52,7 +46,7 @@ document.querySelector("#id-checkbox").addEventListener("click", function(event) #### Résultat -{{EmbedLiveSample("blocking_default_click_handling")}} +{{EmbedLiveSample("Bloquer_la_gestion_du_clic_par_défaut")}} ### Empêcher les pressions du clavier sur un champ texte @@ -90,7 +84,7 @@ function bloqueSaisie(evt) { #### Résultat -{{EmbedLiveSample('stopping_keystrokes_from_reaching_an_edit_field', 600, 200)}} +{{EmbedLiveSample('Empêcher_les_pressions_du_clavier_sur_un_champ_texte', 600, 200)}} ## Notes diff --git a/files/fr/web/api/event/timestamp/index.md b/files/fr/web/api/event/timestamp/index.md index f053b897e7..fde4ad5b7d 100644 --- a/files/fr/web/api/event/timestamp/index.md +++ b/files/fr/web/api/event/timestamp/index.md @@ -1,12 +1,6 @@ --- title: Event.timeStamp slug: Web/API/Event/timeStamp -tags: - - API - - DOM - - Evènement - - Propriétés - - temps translation_of: Web/API/Event/timeStamp --- {{ApiRef("DOM")}} @@ -49,7 +43,7 @@ document.body.addEventListener("keypress", getTime); ### Résultat -{{EmbedLiveSample("Example", "100%", 100)}} +{{EmbedLiveSample("Exemple", "100%", 100)}} ## Précision du temps réduite diff --git a/files/fr/web/api/event/type/index.md b/files/fr/web/api/event/type/index.md index 854f67f717..4774093a5b 100644 --- a/files/fr/web/api/event/type/index.md +++ b/files/fr/web/api/event/type/index.md @@ -70,7 +70,7 @@ Pour une liste des types d'événements disponibles, aller voir la page [Référ ### Résultat -{{EmbedLiveSample('Example')}} +{{EmbedLiveSample('Exemples')}} ## Spécifications diff --git a/files/fr/web/api/eventtarget/addeventlistener/index.md b/files/fr/web/api/eventtarget/addeventlistener/index.md index 4139ecb2de..686f4a9e63 100644 --- a/files/fr/web/api/eventtarget/addeventlistener/index.md +++ b/files/fr/web/api/eventtarget/addeventlistener/index.md @@ -1,31 +1,6 @@ --- title: EventTarget.addEventListener() slug: Web/API/EventTarget/addEventListener -tags: - - API - - Cible - - DOM - - Evènement - - Gestionnaires d'évènements - - JavaScript - - Méthode - - Méthodes - - Reference - - Réception d'Évènements - - attachEvent - - Écouteurs - - Écouteurs d'Évènements - - AccessOuterData - - Detecting Events - - Event Handlers - - Event Listener - - EventTarget - - Method - - PassingData - - Receiving Events - - addEventListener - - events - - mselementresize translation_of: Web/API/EventTarget/addEventListener --- {{APIRef("DOM Events")}} @@ -179,7 +154,7 @@ Dans ce code, `modifyText()` est un écouteur pour les évènements `click` enre #### Résultat -{{EmbedLiveSample('Add_a_simple_listener')}} +{{EmbedLiveSample('Ajouter_un_écouteur_simple')}} ### Écouteur d'évènement avec une fonction anonyme @@ -212,7 +187,7 @@ Notez que l'écouteur est une fonction anonyme encapsulant le code qui peut às #### Résultat -{{EmbedLiveSample('Event_listener_with_anonymous_function')}} +{{EmbedLiveSample('Écouteur_d\'évènement_avec_une_fonction_anonyme')}} ### Écouteur d'évènement avec une fonction fléchée @@ -245,7 +220,7 @@ el.addEventListener("click", () => { #### Résultat -{{EmbedLiveSample('Event_listener_with_an_arrow_function')}} +{{EmbedLiveSample('Écouteur_d\'évènement_avec_une_fonction_fléchée')}} Notez que si les fonctions anonymes et fléchées sont similaires, elles ont des liaisons `this` différentes. Alors que les fonctions anonymes (et toutes les fonctions JavaScript traditionnelles) créent leurs propres liaisons `this`, les fonctions fléchées héritent la liaison `this` de la fonction contenante. [Voir la page sur l'opérateur `this` pour plus d'informations.](fr/docs/Web/JavaScript/Reference/Operators/this#avec_les_fonctions_fléchées) @@ -363,7 +338,7 @@ function nonePassiveHandler(event) { Cliquez les conteneurs _extérieur_, _milieu_, _intérieurs_ respectivement pour voir comment les options fonctionnent. Vous pouvez ouvrir la console pour observer les différents messages émis. -{{EmbedLiveSample('Example_of_options_usage', '', '320')}} +{{EmbedLiveSample('Exemple_d\'utilisation_des_options', '', '320')}} Avant d'utiliser une valeur particulière dans l'objet `options`, c'est une bonne idée que de s'assurer que le navigateur de l'utilisateur la prend en charge, du fait qu'elles sont un ajout que tous les navigateurs n'ont pas pris en charge historiquement. Voir {{anch("Safely_detecting_option_support", "Détection sûre du support des options")}} pour les détails. @@ -404,7 +379,7 @@ Dans l'exemple ci-dessus, nous modifions le code de l'exemple {{anch('Add_a_simp #### Résultat -{{EmbedLiveSample('Add_a_abortable_listener')}} +{{EmbedLiveSample('Ajout_d\'un_écouteur_annulable')}} ## Autres notes diff --git a/files/fr/web/api/filereader/readasdataurl/index.md b/files/fr/web/api/filereader/readasdataurl/index.md index 01642d791a..bc00d1b624 100644 --- a/files/fr/web/api/filereader/readasdataurl/index.md +++ b/files/fr/web/api/filereader/readasdataurl/index.md @@ -1,12 +1,6 @@ --- title: FileReader.readAsDataURL() slug: Web/API/FileReader/readAsDataURL -tags: - - API - - API File - - Fichiers - - Méthode - - Reference translation_of: Web/API/FileReader/readAsDataURL --- {{APIRef("API File")}} @@ -51,7 +45,7 @@ function previewFile() { ### Résultat en direct -{{EmbedLiveSample("Example", "100%", 240)}} +{{EmbedLiveSample("Exemple", "100%", 240)}} diff --git a/files/fr/web/api/globaleventhandlers/onselect/index.md b/files/fr/web/api/globaleventhandlers/onselect/index.md index f2b8e48654..4f34d3f008 100644 --- a/files/fr/web/api/globaleventhandlers/onselect/index.md +++ b/files/fr/web/api/globaleventhandlers/onselect/index.md @@ -1,12 +1,6 @@ --- title: GlobalEventHandlers.onselect slug: Web/API/GlobalEventHandlers/onselect -tags: - - API - - Gestionnaire d'événement - - HTML DOM - - Propriété - - Reference translation_of: Web/API/GlobalEventHandlers/onselect --- {{ ApiRef("HTML DOM") }} @@ -49,7 +43,7 @@ textarea.onselect = enregistrerSelection; ### Résultat -{{EmbedLiveSample("Examples")}} +{{EmbedLiveSample("Exemples")}} ## Spécification diff --git a/files/fr/web/api/htmlbuttonelement/labels/index.md b/files/fr/web/api/htmlbuttonelement/labels/index.md index 02edee6291..4740520501 100644 --- a/files/fr/web/api/htmlbuttonelement/labels/index.md +++ b/files/fr/web/api/htmlbuttonelement/labels/index.md @@ -1,10 +1,6 @@ --- title: HTMLButtonElement.labels slug: Web/API/HTMLButtonElement/labels -tags: - - API - - DOM - - Propriété translation_of: Web/API/HTMLButtonElement/labels --- {{APIRef("DOM")}} @@ -40,7 +36,7 @@ window.addEventListener("DOMContentLoaded", function() { }); ``` -{{EmbedLiveSample("Example", "100%", 30)}} +{{EmbedLiveSample("Exemple", "100%", 30)}} ## Spécifications diff --git a/files/fr/web/api/htmlelement/beforeinput_event/index.md b/files/fr/web/api/htmlelement/beforeinput_event/index.md index de24c8836e..b37e99d8f3 100644 --- a/files/fr/web/api/htmlelement/beforeinput_event/index.md +++ b/files/fr/web/api/htmlelement/beforeinput_event/index.md @@ -68,7 +68,7 @@ function updateValue(e) { ### Résultat -{{EmbedLiveSample("Examples")}} +{{EmbedLiveSample("Exemples")}} ## Spécifications diff --git a/files/fr/web/api/htmlelement/change_event/index.md b/files/fr/web/api/htmlelement/change_event/index.md index 9f239a8004..ca287d947d 100644 --- a/files/fr/web/api/htmlelement/change_event/index.md +++ b/files/fr/web/api/htmlelement/change_event/index.md @@ -1,14 +1,6 @@ --- title: change slug: Web/API/HTMLElement/change_event -tags: - - Change - - DOM - - Event - - HTML - - Reference - - Web - - Élément HTML translation_of: Web/API/HTMLElement/change_event --- {{APIRef}} @@ -97,7 +89,7 @@ selectElement.addEventListener('change', (event) => { #### Résultat -{{ EmbedLiveSample('Lélément_<select>', '100%', '75px') }} +{{ EmbedLiveSample('Lélément_select', '100%', '75px') }} ### L'élément d'entrée de texte diff --git a/files/fr/web/api/htmlelement/hidden/index.md b/files/fr/web/api/htmlelement/hidden/index.md index 8cbd7090df..6c2121924c 100644 --- a/files/fr/web/api/htmlelement/hidden/index.md +++ b/files/fr/web/api/htmlelement/hidden/index.md @@ -104,7 +104,7 @@ h1 { ### Résultat -{{ EmbedLiveSample('Example', 560, 200) }} +{{ EmbedLiveSample('Exemple', 560, 200) }} ## Spécifications diff --git a/files/fr/web/api/htmlelement/iscontenteditable/index.md b/files/fr/web/api/htmlelement/iscontenteditable/index.md index 717a7f65e0..f558a3446b 100644 --- a/files/fr/web/api/htmlelement/iscontenteditable/index.md +++ b/files/fr/web/api/htmlelement/iscontenteditable/index.md @@ -1,13 +1,6 @@ --- title: HTMLElement.isContentEditable slug: Web/API/HTMLElement/isContentEditable -tags: - - HTML DOM - - Propriété - - Reference - - lecture seule - - Édition - - Élément HTML translation_of: Web/API/HTMLElement/isContentEditable --- {{ APIRef("HTML DOM") }} @@ -39,7 +32,7 @@ document.getElementById("infoText2").innerHTML += document.getElementById("myTex ### Résultat -{{ EmbedLiveSample('Example') }} +{{ EmbedLiveSample('Exemple') }} ## Spécifications diff --git a/files/fr/web/api/htmltablerowelement/insertcell/index.md b/files/fr/web/api/htmltablerowelement/insertcell/index.md index 38ce65bf91..4d9f632f14 100644 --- a/files/fr/web/api/htmltablerowelement/insertcell/index.md +++ b/files/fr/web/api/htmltablerowelement/insertcell/index.md @@ -64,7 +64,7 @@ addRow('my-table'); ### Résultat -{{EmbedLiveSample("Example")}} +{{EmbedLiveSample("Exemple")}} ## Spécifications diff --git a/files/fr/web/api/intersection_observer_api/index.md b/files/fr/web/api/intersection_observer_api/index.md index 1b1d75b7d3..40fdb41249 100644 --- a/files/fr/web/api/intersection_observer_api/index.md +++ b/files/fr/web/api/intersection_observer_api/index.md @@ -1,11 +1,6 @@ --- title: Intersection Observer API slug: Web/API/Intersection_Observer_API -tags: - - API - - IntersectionObserver - - Reference - - Web translation_of: Web/API/Intersection_Observer_API --- {{SeeCompatTable}}{{DefaultAPISidebar("Intersection Observer API")}} @@ -276,7 +271,7 @@ function intersectionCallback(entries) { } ``` -{{EmbedLiveSample("exemple_de_seuil", 500, 500)}} +{{EmbedLiveSample("Exemple_de_seuil", 500, 500)}} ## Interfaces diff --git a/files/fr/web/api/keyboardevent/code/index.md b/files/fr/web/api/keyboardevent/code/index.md index a0a0e9c050..471e63789c 100644 --- a/files/fr/web/api/keyboardevent/code/index.md +++ b/files/fr/web/api/keyboardevent/code/index.md @@ -1,13 +1,6 @@ --- title: KeyboardEvent.code slug: Web/API/KeyboardEvent/code -tags: - - API - - Code - - DOM Events - - KeyboardEvent - - Propriété - - Reference translation_of: Web/API/KeyboardEvent/code --- {{APIRef("DOM Events")}} @@ -200,7 +193,7 @@ window.addEventListener("keydown", function(event) { Pour essayer le code ci-dessus, cliquez sur le bouton ci-dessous: -{{EmbedLiveSample("Handle_keyboard_events_in_a_game", 420, 460)}} +{{EmbedLiveSample("Gérer_les_événements_de_clavier_dans_un_jeu", 420, 460)}} Ce code peut être amélioré de plusieurs manières. La plupart des jeux réels surveillent les événements {{event("keydown")}}, démarrent le mouvement lorsque cela se produit et stoppent le mouvement lorsque l'événement {{event("keyup")}} se produit, au lieu de compter sur des répétitions de touches. Cela permettrait des mouvements plus fluides et plus rapides, mais permettrait également au joueur de bouger et de diriger en même temps. Des transitions ou des animations peuvent également être utilisées pour rendre le mouvement du navire plus fluide. Pour permettre cela, il ne faudrait pas utiliser de `switch`, ni de `else if`.ff diff --git a/files/fr/web/api/location/index.md b/files/fr/web/api/location/index.md index 3766646973..d66720d6a7 100644 --- a/files/fr/web/api/location/index.md +++ b/files/fr/web/api/location/index.md @@ -1,13 +1,6 @@ --- title: Location slug: Web/API/Location -tags: - - API - - HTML DOM - - Interface - - JavaScript - - Location - - Reference translation_of: Web/API/Location --- {{APIRef("HTML DOM")}} @@ -63,7 +56,7 @@ body {display:table-cell; text-align:center; vertical-align:middle; font-family: ### Result -{{EmbedLiveSample('Anatomy_Of_Location')}} +{{EmbedLiveSample('Anatomie_d\'une_Location')}} ## Propriétés diff --git a/files/fr/web/api/mouseevent/index.md b/files/fr/web/api/mouseevent/index.md index 6f9eada357..aa691d61f8 100644 --- a/files/fr/web/api/mouseevent/index.md +++ b/files/fr/web/api/mouseevent/index.md @@ -1,14 +1,6 @@ --- title: MouseEvent slug: Web/API/MouseEvent -tags: - - API - - DOM - - Interface - - Reference - - Référence(2) - - Souris - - évènements translation_of: Web/API/MouseEvent --- {{APIRef("DOM Events")}} @@ -148,7 +140,7 @@ document.getElementById("button").addEventListener('click', simulateClick); Cliquez sur le bouton pour voir comment l'exemple fonctionne : -{{ EmbedLiveSample('Example', '', '', '') }} +{{ EmbedLiveSample('Exemple', '', '', '') }} ## Spécifications diff --git a/files/fr/web/api/node/isequalnode/index.md b/files/fr/web/api/node/isequalnode/index.md index e86aa2118c..3afb00dfe7 100644 --- a/files/fr/web/api/node/isequalnode/index.md +++ b/files/fr/web/api/node/isequalnode/index.md @@ -1,12 +1,6 @@ --- title: Node.isEqualNode() slug: Web/API/Node/isEqualNode -tags: - - API - - Comparaison - - DOM - - Méthodes - - Noeuds translation_of: Web/API/Node/isEqualNode --- {{APIRef("DOM")}} @@ -59,7 +53,7 @@ output.innerHTML += "div 0 equals div 2: " + divList[0].isEqualNode(divList[2]) ### Résultats -{{ EmbedLiveSample('Example', 480) }} +{{ EmbedLiveSample('Exemple', 480) }} ## Spécifications diff --git a/files/fr/web/api/node/issamenode/index.md b/files/fr/web/api/node/issamenode/index.md index 682d50b9e7..5b57ac5cbb 100644 --- a/files/fr/web/api/node/issamenode/index.md +++ b/files/fr/web/api/node/issamenode/index.md @@ -1,11 +1,6 @@ --- title: Node.isSameNode() slug: Web/API/Node/isSameNode -tags: - - API - - DOM - - Méthodes - - Noeuds translation_of: Web/API/Node/isSameNode --- {{APIRef("DOM")}} @@ -58,7 +53,7 @@ output.innerHTML += "div 0 same as div 2: " + divList[0].isSameNode(divList[2]) ### Résultats -{{ EmbedLiveSample('Example', 480) }} +{{ EmbedLiveSample('Exemple', 480) }} ## Spécifications diff --git a/files/fr/web/api/notifications_api/using_the_notifications_api/index.md b/files/fr/web/api/notifications_api/using_the_notifications_api/index.md index 6a8a3ac80e..654b256979 100644 --- a/files/fr/web/api/notifications_api/using_the_notifications_api/index.md +++ b/files/fr/web/api/notifications_api/using_the_notifications_api/index.md @@ -242,7 +242,7 @@ window.addEventListener('load', function () { Voir le résultat de cet exemple : -{{EmbedLiveSample('tag_example', '100%', 30)}} +{{EmbedLiveSample('Exemple_d\'utilisation_des_balises', '100%', 30)}} ## Spécifications diff --git a/files/fr/web/api/storagemanager/estimate/index.md b/files/fr/web/api/storagemanager/estimate/index.md index 7c551573bf..4ed46854c1 100644 --- a/files/fr/web/api/storagemanager/estimate/index.md +++ b/files/fr/web/api/storagemanager/estimate/index.md @@ -45,7 +45,7 @@ navigator.storage.estimate().then(function(estimate) { ### Résultat -{{ EmbedLiveSample('Example', 600, 40) }} +{{ EmbedLiveSample('Exemple', 600, 40) }} ## Spécifications diff --git a/files/fr/web/api/webgl_api/by_example/color_masking/index.md b/files/fr/web/api/webgl_api/by_example/color_masking/index.md index 61afaba6f3..8345a669f9 100644 --- a/files/fr/web/api/webgl_api/by_example/color_masking/index.md +++ b/files/fr/web/api/webgl_api/by_example/color_masking/index.md @@ -1,13 +1,6 @@ --- title: Masque de couleur slug: Web/API/WebGL_API/By_example/Color_masking -tags: - - Apprendre - - Débutant - - Exemple - - Graphisme - - Tutoriel - - WebGL translation_of: Web/API/WebGL_API/By_example/Color_masking original_slug: Web/API/WebGL_API/By_example/Masque_de_couleur --- @@ -17,7 +10,7 @@ original_slug: Web/API/WebGL_API/By_example/Masque_de_couleur Dans cet article, on modifie des couleurs aléatoires grâce à un masque de couleur. Cela permet de limiter la plage de couleurs affichées à certains tons. -{{EmbedLiveSample("color-masking-source",660,425)}} +{{EmbedLiveSample("Appliquer_un_masque_sur_des_couleurs_aléatoires",660,425)}} ### Appliquer un masque sur des couleurs aléatoires diff --git a/files/fr/web/api/window/find/index.md b/files/fr/web/api/window/find/index.md index 3c0ea82ff3..ee36dd5c17 100644 --- a/files/fr/web/api/window/find/index.md +++ b/files/fr/web/api/window/find/index.md @@ -62,7 +62,7 @@ findString = function findText(text) { ### Résultat -{{EmbedLiveSample("Example")}} +{{EmbedLiveSample("Exemple")}} ## Notes diff --git a/files/fr/web/css/-moz-outline-radius-bottomright/index.md b/files/fr/web/css/-moz-outline-radius-bottomright/index.md index 335df93637..a30ccf61fe 100644 --- a/files/fr/web/css/-moz-outline-radius-bottomright/index.md +++ b/files/fr/web/css/-moz-outline-radius-bottomright/index.md @@ -1,11 +1,6 @@ --- title: '-moz-outline-radius-bottomright' slug: Web/CSS/-moz-outline-radius-bottomright -tags: - - CSS - - Non-standard - - Propriété - - Reference translation_of: Web/CSS/-moz-outline-radius-bottomright --- {{Non-standard_header}}{{CSSRef}} @@ -33,7 +28,7 @@ p { ### Résultat -{{EmbedLiveSample("Example")}} +{{EmbedLiveSample("Exemples")}} > **Note :** Cette propriété étant spécifique à Firefox, l'exemple ci-avant ne fonctionnera pas dans un autre navigateur. diff --git a/files/fr/web/css/-webkit-text-fill-color/index.md b/files/fr/web/css/-webkit-text-fill-color/index.md index 23e220dde2..826b7e9229 100644 --- a/files/fr/web/css/-webkit-text-fill-color/index.md +++ b/files/fr/web/css/-webkit-text-fill-color/index.md @@ -1,11 +1,6 @@ --- title: '-webkit-text-fill-color' slug: Web/CSS/-webkit-text-fill-color -tags: - - CSS - - Non-standard - - Propriété - - Reference translation_of: Web/CSS/-webkit-text-fill-color --- {{CSSRef}}{{Non-standard_header}} @@ -56,7 +51,7 @@ p { ### Résultat -{{EmbedLiveSample("Example", "380px", "60px")}} +{{EmbedLiveSample("Exemples", "380px", "60px")}} ## Spécifications diff --git a/files/fr/web/css/-webkit-text-security/index.md b/files/fr/web/css/-webkit-text-security/index.md index 4aa198a0e7..f60f0ea5c6 100644 --- a/files/fr/web/css/-webkit-text-security/index.md +++ b/files/fr/web/css/-webkit-text-security/index.md @@ -1,11 +1,6 @@ --- title: '-webkit-text-security' slug: Web/CSS/-webkit-text-security -tags: - - CSS - - Non-standard - - Propriété - - Reference translation_of: Web/CSS/-webkit-text-security --- {{CSSRef}} {{Non-standard_header}} @@ -42,7 +37,7 @@ input { ### Résultat -{{EmbedLiveSample("Example")}} +{{EmbedLiveSample("Exemples")}} ## Spécifications diff --git a/files/fr/web/css/@media/forced-colors/index.md b/files/fr/web/css/@media/forced-colors/index.md index cc33f5cca5..7dfb25ece9 100644 --- a/files/fr/web/css/@media/forced-colors/index.md +++ b/files/fr/web/css/@media/forced-colors/index.md @@ -1,10 +1,6 @@ --- title: forced-colors slug: Web/CSS/@media/forced-colors -tags: - - CSS - - Caractéristique média - - Reference translation_of: Web/CSS/@media/forced-colors --- {{CSSRef}}{{SeeCompatTable}}{{draft}} @@ -30,21 +26,25 @@ Dans cet exemple, les couleurs utilisées par défaut sont exotiques voire illis ### HTML - <div class="colors">quelques couleurs étranges</div> +```html +<div class="colors">quelques couleurs étranges</div> +``` ### CSS - .colors { - background-color: red; - color: grey; - } - - @media (forced-colors: active) { - .colors { - background-color: white; - color: black; - } - } +```css +.colors { + background-color: red; + color: grey; +} + +@media (forced-colors: active) { + .colors { + background-color: white; + color: black; + } +} +``` ### Résultat diff --git a/files/fr/web/css/@media/prefers-contrast/index.md b/files/fr/web/css/@media/prefers-contrast/index.md index 16467d0867..33d90f2617 100644 --- a/files/fr/web/css/@media/prefers-contrast/index.md +++ b/files/fr/web/css/@media/prefers-contrast/index.md @@ -1,10 +1,6 @@ --- title: prefers-contrast slug: Web/CSS/@media/prefers-contrast -tags: - - CSS - - Caractéristique média - - Reference translation_of: Web/CSS/@media/prefers-contrast --- {{CSSRef}}{{SeeCompatTable}}{{draft}} @@ -30,19 +26,23 @@ Par défaut, cet exemple présente un contraste trop faible pour la lisibilité. ### HTML - <div class="contrast">Une boîte avec un contraste faible.</div> +```html +<div class="contrast">Une boîte avec un contraste faible.</div> +``` ### CSS - .contrast { -  color: grey; - } - - @media (prefers-contrast: high) { - .contrast { -  color: black; - } - } +```css +.contrast { + color: grey; +} + +@media (prefers-contrast: high) { + .contrast { + color: black; + } +} +``` ### Résultat diff --git a/files/fr/web/css/@media/prefers-reduced-motion/index.md b/files/fr/web/css/@media/prefers-reduced-motion/index.md index 602abf4761..6bd87e7c10 100644 --- a/files/fr/web/css/@media/prefers-reduced-motion/index.md +++ b/files/fr/web/css/@media/prefers-reduced-motion/index.md @@ -1,13 +1,6 @@ --- title: prefers-reduced-motion slug: Web/CSS/@media/prefers-reduced-motion -tags: - - '@media' - - Accessibility - - CSS - - Media Queries - - Reference - - media feature translation_of: Web/CSS/@media/prefers-reduced-motion --- {{CSSRef}} @@ -104,7 +97,7 @@ Cet exemple possède une animation désagréable qui sera exécutée à moins d' ### Résultat -{{EmbedLiveSample("example")}} +{{EmbedLiveSample("Exemple")}} ## Spécifications diff --git a/files/fr/web/css/_colon_-moz-list-number/index.md b/files/fr/web/css/_colon_-moz-list-number/index.md index 96b4f9ca7f..0ad319b1f0 100644 --- a/files/fr/web/css/_colon_-moz-list-number/index.md +++ b/files/fr/web/css/_colon_-moz-list-number/index.md @@ -1,11 +1,6 @@ --- title: '::-moz-list-number' slug: Web/CSS/:-moz-list-number -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference translation_of: Web/CSS/:-moz-list-number original_slug: Web/CSS/::-moz-list-number --- @@ -40,7 +35,7 @@ li::-moz-list-number { ### Résultat -{{EmbedLiveSample("Exemple")}} +{{EmbedLiveSample("Exemples")}} ## Spécifications diff --git a/files/fr/web/css/_colon_-moz-only-whitespace/index.md b/files/fr/web/css/_colon_-moz-only-whitespace/index.md index 55acde836f..5c0f9b29bc 100644 --- a/files/fr/web/css/_colon_-moz-only-whitespace/index.md +++ b/files/fr/web/css/_colon_-moz-only-whitespace/index.md @@ -1,12 +1,6 @@ --- title: ':-moz-only-whitespace' slug: Web/CSS/:-moz-only-whitespace -tags: - - CSS - - Non-standard - - Pseudo-classe - - Reference - - Sélecteur translation_of: Web/CSS/:-moz-only-whitespace --- {{CSSRef}}{{SeeCompatTable}} @@ -57,7 +51,7 @@ div { ### Résultat -{{EmbedLiveSample("Exemple", "100%", "50")}} +{{EmbedLiveSample("Exemples", "100%", "50")}} ## Spécifications diff --git a/files/fr/web/css/_colon_checked/index.md b/files/fr/web/css/_colon_checked/index.md index 14955f7d3e..166fc81dac 100644 --- a/files/fr/web/css/_colon_checked/index.md +++ b/files/fr/web/css/_colon_checked/index.md @@ -1,10 +1,6 @@ --- title: ':checked' slug: Web/CSS/:checked -tags: - - CSS - - Pseudo-classe - - Reference translation_of: Web/CSS/:checked --- {{CSSRef}} @@ -85,7 +81,7 @@ option:checked { #### Résultat -{{EmbedLiveSample("exemple_simple")}} +{{EmbedLiveSample("Exemple_simple")}} ## Spécifications diff --git a/files/fr/web/css/_colon_lang/index.md b/files/fr/web/css/_colon_lang/index.md index ca2ccc2a82..f9be7bd492 100644 --- a/files/fr/web/css/_colon_lang/index.md +++ b/files/fr/web/css/_colon_lang/index.md @@ -1,10 +1,6 @@ --- title: ':lang' slug: Web/CSS/:lang -tags: - - CSS - - Pseudo-classe - - Reference translation_of: Web/CSS/:lang --- {{CSSRef}} @@ -84,7 +80,7 @@ Dans cet exemple, la pseudo-classe `:lang` est utilisée pour faire correspondre ### Résultat -{{EmbedLiveSample('Exemple', '350')}} +{{EmbedLiveSample('Exemples', '350')}} ## Spécifications diff --git a/files/fr/web/css/_colon_local-link/index.md b/files/fr/web/css/_colon_local-link/index.md index 1f845e8a46..585db97844 100644 --- a/files/fr/web/css/_colon_local-link/index.md +++ b/files/fr/web/css/_colon_local-link/index.md @@ -36,7 +36,7 @@ a:local-link { ### Résultat -{{EmbedLiveSample("Examples")}} +{{EmbedLiveSample("Exemples")}} ## Spécifications diff --git a/files/fr/web/css/_colon_nth-child/index.md b/files/fr/web/css/_colon_nth-child/index.md index 46df691595..21e1859f52 100644 --- a/files/fr/web/css/_colon_nth-child/index.md +++ b/files/fr/web/css/_colon_nth-child/index.md @@ -1,10 +1,6 @@ --- title: ':nth-child' slug: Web/CSS/:nth-child -tags: - - CSS - - Pseudo-classe - - Reference translation_of: Web/CSS/:nth-child --- {{CSSRef}} @@ -162,7 +158,7 @@ span, div em { #### Résultat -{{EmbedLiveSample('Exemple_demonstratif','100%', '550')}} +{{EmbedLiveSample('Exemple_démonstratif','100%', '550')}} ## Spécifications diff --git a/files/fr/web/css/_colon_nth-col/index.md b/files/fr/web/css/_colon_nth-col/index.md index e872c7f848..fdef2a2689 100644 --- a/files/fr/web/css/_colon_nth-col/index.md +++ b/files/fr/web/css/_colon_nth-col/index.md @@ -64,7 +64,7 @@ td { #### Résultat -{{EmbedLiveSample('basic_example', 250, 200)}} +{{EmbedLiveSample('Exemples', 250, 200)}} ## Spécifications diff --git a/files/fr/web/css/_colon_nth-last-col/index.md b/files/fr/web/css/_colon_nth-last-col/index.md index 212050450f..d9b9e3a6e2 100644 --- a/files/fr/web/css/_colon_nth-last-col/index.md +++ b/files/fr/web/css/_colon_nth-last-col/index.md @@ -64,7 +64,7 @@ td { #### Résultat -{{EmbedLiveSample('basic_example', 250, 200)}} +{{EmbedLiveSample('Exemple_basique', 250, 200)}} ## Spécifications diff --git a/files/fr/web/css/_colon_target-within/index.md b/files/fr/web/css/_colon_target-within/index.md index 83508162f1..c083b22e9a 100644 --- a/files/fr/web/css/_colon_target-within/index.md +++ b/files/fr/web/css/_colon_target-within/index.md @@ -64,7 +64,7 @@ p:target i { #### Résultat -{{EmbedLiveSample('examples', 500, 300)}} +{{EmbedLiveSample('Exemples', 500, 300)}} ## Spécifications diff --git a/files/fr/web/css/_doublecolon_-webkit-meter-optimum-value/index.md b/files/fr/web/css/_doublecolon_-webkit-meter-optimum-value/index.md index ace0f0dc57..48496488a7 100644 --- a/files/fr/web/css/_doublecolon_-webkit-meter-optimum-value/index.md +++ b/files/fr/web/css/_doublecolon_-webkit-meter-optimum-value/index.md @@ -1,11 +1,6 @@ --- title: '::-webkit-meter-optimum-value' slug: Web/CSS/::-webkit-meter-optimum-value -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference translation_of: Web/CSS/::-webkit-meter-optimum-value --- {{CSSRef}}{{Non-standard_header}} @@ -36,7 +31,7 @@ meter::-webkit-meter-optimum-value { ### Résultat -{{EmbedLiveSample('Examples', '100%', 50)}} +{{EmbedLiveSample('Exemples', '100%', 50)}} ## Spécifications diff --git a/files/fr/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.md b/files/fr/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.md index b7b414c9a9..b7c1be3389 100644 --- a/files/fr/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.md +++ b/files/fr/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.md @@ -1,11 +1,6 @@ --- title: '::-webkit-meter-suboptimum-value' slug: Web/CSS/::-webkit-meter-suboptimum-value -tags: - - CSS - - Non-standard - - Pseudo-element - - Reference translation_of: Web/CSS/::-webkit-meter-suboptimum-value --- {{CSSRef}}{{Non-standard_header}} @@ -32,7 +27,7 @@ meter::-webkit-meter-suboptimum-value { ### Résultat -{{EmbedLiveSample('Examples', '100%', 50)}} +{{EmbedLiveSample('Exemples', '100%', 50)}} > **Note :** Cette fonctionnalité ne sera visible que depuis un navigateur WebKit/Blink. diff --git a/files/fr/web/css/accent-color/index.md b/files/fr/web/css/accent-color/index.md index b2b898ad63..3b1da90c80 100644 --- a/files/fr/web/css/accent-color/index.md +++ b/files/fr/web/css/accent-color/index.md @@ -70,7 +70,7 @@ input.custom { #### Résultat -{{EmbedLiveSample('Setting_a_custom_accent_color', 500, 200)}} +{{EmbedLiveSample('Exemples', 500, 200)}} ## Spécifications diff --git a/files/fr/web/css/align-self/index.md b/files/fr/web/css/align-self/index.md index b19cf1ca40..f06d597f72 100644 --- a/files/fr/web/css/align-self/index.md +++ b/files/fr/web/css/align-self/index.md @@ -1,10 +1,6 @@ --- title: align-self slug: Web/CSS/align-self -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/align-self --- {{CSSRef}} @@ -90,6 +86,8 @@ align-self: unset; {{csssyntax}} +## Exemples + ### CSS ```css diff --git a/files/fr/web/css/all/index.md b/files/fr/web/css/all/index.md index cc10151b9d..eb9cec8e9d 100644 --- a/files/fr/web/css/all/index.md +++ b/files/fr/web/css/all/index.md @@ -1,10 +1,6 @@ --- title: all slug: Web/CSS/all -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/all --- {{CSSRef}} @@ -89,7 +85,7 @@ body { font-size: small; background-color: #F0F0F0; color:blue; } blockquote { background-color: skyblue; color: red; } ``` -{{EmbedLiveSample("ex0", "200", "125")}} +{{EmbedLiveSample("Pas_de_propriété_all", "200", "125")}} L'élément {{HTMLElement("blockquote")}} utilise la mise en forme par défaut du navigateur avec un arrière-plan spécifique et une couleur pour le texte. L'élément se comporte comme un élément de bloc : le texte qui suit est placé en dessous. @@ -105,7 +101,7 @@ blockquote { background-color: skyblue; color: red; } blockquote { all: unset; } ``` -{{EmbedLiveSample("ex1", "200", "125")}} +{{EmbedLiveSample("all:unset", "200", "125")}} L'élément {{HTMLElement("blockquote")}} n'utilise pas la mise en forme par défaut du naivgateur, c'est un élément en ligne (_inline_) (sa valeur initiale), la valeur de {{cssxref("background-color")}} est `transparent` (la valeur initiale), mais {{cssxref("font-size")}} vaut toujours `small` (valeur héritée) et {{cssxref("color")}} vaut (valeur héritée). @@ -121,7 +117,7 @@ blockquote { background-color: skyblue; color: red; } blockquote { all: initial; } ``` -{{EmbedLiveSample("ex2", "200", "125")}} +{{EmbedLiveSample("all:initial", "200", "125")}} L'élément {{HTMLElement("blockquote")}} n'utilise pas la mise en forme par défaut du navigateur, c'est un élément en ligne (sa valeur initiale). La propriété {{cssxref("background-color")}} vaut `transparent` (sa valeur initiale), {{cssxref("font-size")}} vaut `normal` (valeur initiale) et {{cssxref("color")}} vaut `black` (sa valeur initiale). @@ -137,7 +133,7 @@ blockquote { background-color: skyblue; color: red; } blockquote { all: inherit; } ``` -{{EmbedLiveSample("ex3", "200", "125")}} +{{EmbedLiveSample("all:inherit", "200", "125")}} L'élément {{HTMLElement("blockquote")}} n'utilise pas la mise en forme par défaut du navigateur, c'est un élément de bloc (valeur héritée depuis l'élément englobant {{HTMLElement("div")}}), {{cssxref("background-color")}} vaut `#F0F0F0` (valeur héritée), {{cssxref("font-size")}} vaut `small` (valeur héritée) et {{cssxref("color")}} vaut `blue` (valeur héritée). diff --git a/files/fr/web/css/animation/index.md b/files/fr/web/css/animation/index.md index 18e3912edd..2c15a43411 100644 --- a/files/fr/web/css/animation/index.md +++ b/files/fr/web/css/animation/index.md @@ -1,11 +1,6 @@ --- title: animation slug: Web/CSS/animation -tags: - - Animations - - CSS - - Propriété - - Reference translation_of: Web/CSS/animation --- {{CSSRef}} @@ -216,7 +211,7 @@ window.addEventListener('load', function () { }) ``` -{{EmbedLiveSample("animation_example", "100%", 260, "", "", "example-outcome-frame")}} +{{EmbedLiveSample("Exemple_danimation", "100%", 260, "", "", "example-outcome-frame")}} [Une liste des propriétés qui peuvent être animées](/fr/docs/Web/CSS/Liste_propriétés_CSS_animées) est disponible. On notera que cette liste est également valable pour [les transitions CSS](/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS). diff --git a/files/fr/web/css/attr()/index.md b/files/fr/web/css/attr()/index.md index 89a7c5fdd1..b5bc479199 100644 --- a/files/fr/web/css/attr()/index.md +++ b/files/fr/web/css/attr()/index.md @@ -1,10 +1,6 @@ --- title: attr() slug: Web/CSS/attr() -tags: - - CSS - - Fonction - - Reference translation_of: Web/CSS/attr() --- {{CSSRef}} @@ -349,7 +345,7 @@ body, #### Résultat -{{EmbedLiveSample("Valeur_<color>", "100%", "50")}} +{{EmbedLiveSample("Valeur_color", "100%", "50")}} ## Spécifications diff --git a/files/fr/web/css/border-image/index.md b/files/fr/web/css/border-image/index.md index 83424b2d0f..b9a0348850 100644 --- a/files/fr/web/css/border-image/index.md +++ b/files/fr/web/css/border-image/index.md @@ -1,11 +1,6 @@ --- title: border-image slug: Web/CSS/border-image -tags: - - CSS - - Propriété - - Propriété raccourcie - - Reference translation_of: Web/CSS/border-image --- {{CSSRef}} @@ -81,7 +76,7 @@ On découpe l'image et on la répète pour remplir la zone entre les bordures. #### Résultat -{{EmbedLiveSample('Utiliser_une_image_matricielle_répétée')}} +{{EmbedLiveSample('Utiliser_une_image_matricielle_étirée')}} ### Utiliser un dégradé diff --git a/files/fr/web/css/content/index.md b/files/fr/web/css/content/index.md index 67c293ba5a..6c2aedbb70 100644 --- a/files/fr/web/css/content/index.md +++ b/files/fr/web/css/content/index.md @@ -1,10 +1,6 @@ --- title: content slug: Web/CSS/content -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/content --- {{CSSRef}} @@ -161,7 +157,7 @@ a::before{ {{EmbedLiveSample('Utiliser_les_classes', 300, 200)}} -### Utiliser les attributs d’image et d’élément +### Utiliser les attributs d'image et d'élément Dans cet exemple, on insère une image avant chaque lien et on ajoute son identifiant après. @@ -201,7 +197,7 @@ li { #### Résultat -{{EmbedLiveSample("Utiliser_les_attributs_d’images_et_d’élément", '100%', 160)}} +{{EmbedLiveSample("Utiliser_les_attributs_dimage_et_délément", '100%', 160)}} ### Remplacer un élément diff --git a/files/fr/web/css/css_animations/using_css_animations/index.md b/files/fr/web/css/css_animations/using_css_animations/index.md index d2a8d98d17..df3fe53857 100644 --- a/files/fr/web/css/css_animations/using_css_animations/index.md +++ b/files/fr/web/css/css_animations/using_css_animations/index.md @@ -1,11 +1,6 @@ --- title: Utiliser les animations CSS slug: Web/CSS/CSS_Animations/Using_CSS_animations -tags: - - Avancé - - CSS - - Guide - - Reference translation_of: Web/CSS/CSS_Animations/Using_CSS_animations original_slug: Web/CSS/Animations_CSS/Utiliser_les_animations_CSS --- @@ -95,7 +90,7 @@ her in a languid, sleepy voice.</p> > **Note :** Pour observer l'animation, il peut être nécessaire de rafraîchir la page ou d'utiliser la vue CodePen/JSFiddle. -{{EmbedLiveSample("Définir_les_étapes_composant_une_animation_(@keyframes)","100%","250")}} +{{EmbedLiveSample("Utiliser_une_animation_pour_que_le_texte_traverse_la_fenêtre_du_navigateur","100%","250")}} ### Ajouter une autre étape diff --git a/files/fr/web/css/css_backgrounds_and_borders/border-image_generator/index.md b/files/fr/web/css/css_backgrounds_and_borders/border-image_generator/index.md index 44864170d2..38634a7643 100644 --- a/files/fr/web/css/css_backgrounds_and_borders/border-image_generator/index.md +++ b/files/fr/web/css/css_backgrounds_and_borders/border-image_generator/index.md @@ -1,2619 +1,9 @@ --- title: Générateur de border-image slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator -tags: - - CSS - - Outil translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator --- Cet outil peut être utilisé afin de générer des valeurs pour la propriété {{cssxref("border-image")}}. -```html hidden - <div id="container"> - - <div id="gallery"> - <div id="image-gallery"> - <img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png" data-stateID="border1"/> - <img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png" data-stateID="border2"/> - <img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png" data-stateID="border3"/> - <img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png" data-stateID="border4"/> - <img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png" data-stateID="border5"/> - <img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg" data-stateID="border6"/> - </div> - </div> - - <div id="load-actions" class="group section"> - <div id="toggle-gallery" data-action="hide"> </div> - <div id="load-image" class="button"> Upload image </div> - <input id="remote-url" type="text" placeholder="Charger une image depuis une URL"/> - <div id="load-remote" class="button"> </div> - </div> - - <div id="general-controls" class="group section"> - <div class="name"> Options </div> - <div class="separator"></div> - <div class="property"> - <div class="name">Échelle</div> - <div class="ui-input-slider" data-topic="scale" - data-unit="%" data-max="300" data-sensivity="10"> - </div> - </div> - <div class="separator"></div> - <div class="property"> - <div class="name">Déplaçable</div> - <div class="ui-checkbox" data-topic='drag-subject'></div> - </div> - <div class="property right"> - <div class="name">Hauteur de la section</div> - <div class="ui-input-slider" data-topic="preview-area-height" - data-min="400" data-max="1000"> - </div> - </div> - </div> - - <div id="preview_section" class="group section"> - <div id="subject"> - <div class="guideline" data-axis="Y" data-topic="slice-top"></div> - <div class="guideline" data-axis="X" data-topic="slice-right"></div> - <div class="guideline" data-axis="Y" data-topic="slice-bottom"></div> - <div class="guideline" data-axis="X" data-topic="slice-left"></div> - </div> - <div id="preview"> </div> - </div> - - <!-- controls --> - <div id="controls" class="group section"> - - <!-- border-image-slice --> - <div id="border-slice-control" class="category"> - <div class="title"> border-image-slice </div> - <div class="property"> - <div class="name">fill</div> - <div class="ui-checkbox" data-topic='slice-fill'></div> - </div> - </div> - - <!-- border-image-width --> - <div id="border-width-control" class="category"> - <div class="title"> border-image-width </div> - </div> - - <!-- border-image-outset --> - <div id="border-outset-control" class="category"> - <div class="title"> border-image-outset </div> - </div> - - <!-- other-settings --> - <div id="aditional-properties" class="category"> - <div class="title"> Autres propriétés </div> - <div class="property"> - <div class="name"> repeat-x </div> - <div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2"> - <div data-value="0">repeat</div> - <div data-value="0">stretch</div> - <div data-value="0">round</div> - </div> - </div> - <div class="property"> - <div class="name"> repeat-y </div> - <div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2"> - <div data-value="1">repeat</div> - <div data-value="1">stretch</div> - <div data-value="1">round</div> - </div> - </div> - <div class="property"> - <div class="ui-input-slider" data-topic="font-size" data-info="em size" - data-unit="px" data-value="12" data-sensivity="3"> - </div> - </div> - - <div class="property"> - <div class="ui-input-slider" data-topic="preview-width" data-info="width" - data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"></div> - </div> - <div class="property"> - <div class="ui-input-slider" data-topic="preview-height" data-info="height" - data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"> - </div> - </div> - </div> - - - <div id="output" class="category"> - <div class="title"> Code CSS </div> - <div class="css-property"> - <span class="name"> border-image-slice: </span> - <span id="out-border-slice" class="value"> </span> - </div> - <div class="css-property"> - <span class="name"> border-image-width: </span> - <span id="out-border-width" class="value"> </span> - </div> - <div class="css-property"> - <span class="name"> border-image-outset: </span> - <span id="out-border-outset" class="value"> </span> - </div> - <div class="css-property"> - <span class="name"> border-image-repeat: </span> - <span id="out-border-repeat" class="value"> </span> - </div> - <div class="css-property"> - <span class="name"> border-image-source: </span> - <span id="out-border-source" class="value"> </span> - </div> - </div> - - </div> - </div> -``` - -```css hidden -/* GRID OF TWELVE - * ========================================================================== */ - -.span_12 { - width: 100%; -} - -.span_11 { - width: 91.46%; -} - -.span_10 { - width: 83%; -} - -.span_9 { - width: 74.54%; -} - -.span_8 { - width: 66.08%; -} - -.span_7 { - width: 57.62%; -} - -.span_6 { - width: 49.16%; -} - -.span_5 { - width: 40.7%; -} - -.span_4 { - width: 32.24%; -} - -.span_3 { - width: 23.78%; -} - -.span_2 { - width: 15.32%; -} - -.span_1 { - width: 6.86%; -} - - -/* SECTIONS - * ========================================================================== */ - -.section { - clear: both; - padding: 0px; - margin: 0px; -} - -/* GROUPING - * ========================================================================== */ - - -.group:before, .group:after { - content: ""; - display: table; -} - -.group:after { - clear:both; -} - -.group { - zoom: 1; /* For IE 6/7 (trigger hasLayout) */ -} - -/* GRID COLUMN SETUP - * ========================================================================== */ - -.col { - display: block; - float:left; - margin: 1% 0 1% 1.6%; -} - -.col:first-child { - margin-left: 0; -} /* all browsers except IE6 and lower */ - - - -/* - * UI Component - */ - -.ui-input-slider { - height: 20px; - font-family: "Segoe UI", Arial, Helvetica, sans-serif; - -moz-user-select: none; - user-select: none; -} - -.ui-input-slider * { - float: left; - height: 100%; - line-height: 100%; -} - -/* Input Slider */ - -.ui-input-slider > input { - margin: 0; - padding: 0; - width: 50px; - text-align: center; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -.ui-input-slider-info { - width: 90px; - padding: 0px 10px 0px 0px; - text-align: right; - text-transform: lowercase; -} - -.ui-input-slider-left, .ui-input-slider-right { - width: 16px; - cursor: pointer; - background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat; -} - -.ui-input-slider-right { - background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; -} - -.ui-input-slider-name { - width: 90px; - padding: 0 10px 0 0; - text-align: right; - text-transform: lowercase; -} - -.ui-input-slider-btn-set { - width: 25px; - background-color: #2C9FC9; - border-radius: 5px; - color: #FFF; - font-weight: bold; - line-height: 14px; - text-align: center; -} - -.ui-input-slider-btn-set:hover { - background-color: #379B4A; - cursor: pointer; -} - -/*************************************************************************************/ -/*************************************************************************************/ - -/* - * UI DropDown - */ - -/* Dropdown */ - -.ui-dropdown { - height: 2em; - width: 120px; - font-family: "Segoe UI", Arial, Helvetica, sans-serif; - font-size: 12px; - - background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png"); - background-position: right center; - background-repeat: no-repeat; - background-color: #359740; - - position: relative; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.ui-dropdown:hover { - cursor: pointer; - background-color: #208B20; -} - -/* Dropdown Select Button */ - -.ui-dropdown-select { - height: inherit; - padding: 0 0.75em; - color: #FFF; - line-height: 2em; -} - -/* Dropdown List */ - -.ui-dropdown-list { - width: 100%; - height: 150px; - max-height: 150px; - margin: 0; - padding: 0 0.3em; - - border: 3px solid #3490D2; - border-color: #208B20; - background: #666; - background-color: #EEF1F5; - color: #000; - - position: absolute; - top: 2em; - left: 0; - z-index: 100; - - overflow: hidden; - transition: all 0.3s; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -.ui-dropdown-list:hover { - overflow: auto; -} - -.ui-dropdown-list[data-hidden='true'] { - height: 0 !important; - opacity: 0; - visibility: hidden; -} - -.ui-dropdown[data-position='left'] .ui-dropdown-list { - left: -100%; - top: 0; -} - -.ui-dropdown[data-position='right'] .ui-dropdown-list { - left: 100%; - top: 0; -} - -.ui-dropdown-list > div { - width: 100%; - height: 1.6em; - margin: 0.3em 0; - padding: 0.3em; - line-height: 1em; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -.ui-dropdown-list > div:hover { - background: #3490D2; - color:#FFF; - border-radius: 2px; - cursor: pointer; -} - - -/*************************************************************************************/ -/*************************************************************************************/ - -/* - * UI Button - */ - -/* Checkbox */ - -.ui-checkbox { - text-align: center; - font-size: 16px; - font-family: "Segoe UI", Arial, Helvetica, sans-serif; - line-height: 1.5em; - color: #FFF; - - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.ui-checkbox > input { - display: none; -} - -.ui-checkbox > label { - font-size: 12px; - padding: 0.333em 1.666em 0.5em; - height: 1em; - line-height: 1em; - - background-color: #888; - background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png"); - background-position: center center; - background-repeat: no-repeat; - - color: #FFF; - border-radius: 2px; - font-weight: bold; - float: left; -} - -.ui-checkbox .text { - padding-left: 34px; - background-position: center left 10px; -} - -.ui-checkbox .left { - padding-right: 34px; - padding-left: 1.666em; - background-position: center right 10px; -} - -.ui-checkbox > label:hover { - cursor: pointer; -} - -.ui-checkbox > input:checked + label { - background-image: url("https://mdn.mozillademos.org/files/5681/checked.png"); - background-color: #379B4A; -} - -/*************************************************************************************/ -/*************************************************************************************/ - -/* - * BORDER IMAGE GENERATOR TOOL - */ - -body { - width: 100%; - margin: 0 auto; - padding: 0 0 20px 0; - - font-family: "Segoe UI", Arial, Helvetica, sans-serif; - - /*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/ - border: 1px solid #EEE; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; -} - -body[data-move='X'] { - cursor: w-resize !important; -} - -body[data-move='Y'] { - cursor: s-resize !important; -} - -#container { - width: 100%; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -[data-draggable='true']:hover { - cursor: move; -} - -[data-draggable='true']:hover > * { - cursor: default; -} - - - -/******************************************************************************/ -/******************************************************************************/ - -/* - * Border Image Picker - */ - -#gallery { - box-shadow: 0 0 3px 0 #BABABA; -} - -#image-gallery { - width: 600px; - height: 100px; - margin: 0 auto; - transition: margin 0.4s; -} - -#image-gallery .image { - height: 80px; - float: left; - margin: 10px; - opacity: 0.5; - background-color: #FFF; - box-shadow: 0px 0px 3px 1px #BABABA; -} - -#image-gallery .image[selected="true"] { - box-shadow: 0px 0px 3px 1px #3BBA52; - opacity: 1; -} - -#image-gallery .image:hover { - cursor: pointer; - box-shadow: 0px 0px 3px 1px #30ACE5; - opacity: 1; -} - -#image-gallery[data-collapsed='true'] { - margin-top: -100px; -} - -/* Load Menu */ - -#load-actions { - margin: 10px 0; -} - -#toggle-gallery { - width: 30px; - height: 25px; - margin: 10px; - color: #FFF; - - background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png'); - background-repeat: no-repeat; - background-position: top 4px center; - background-color: #888888 !important; - - border-radius: 2px; - float: left; -} - -#toggle-gallery:hover { - cursor: pointer; -} - -#toggle-gallery[data-action='show'] { - background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png'); - background-color: #888888 !important; -} - -#toggle-gallery[data-action='hide'] { - background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png'); -} - -.button { - width: 100px; - height: 25px; - margin: 10px; - color: #FFF; - text-align: center; - font-size: 12px; - line-height: 25px; - background-color: #379B4A; - border-radius: 2px; - float: left; -} - -.button:hover { - cursor: pointer; - background-color: #3380C4; -} - -#load-image { - float: left; -} - -#load-remote { - width: 30px; - background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png'); - background-repeat: no-repeat; - background-position: center center; -} - -#remote-url { - width: 200px; - height: 23px; - margin: 10px; - padding: 0 5px; - border: 1px solid #379B4A; - border-radius: 2px; - float: left; - - transition: width 0.5s; -} - -#remote-url:focus { - box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */ - border-color: rgba(55, 155, 74, 0.5); - width: 450px; -} - -/* - * Visible Area - */ - -#preview_section { - position: relative; - min-height: 400px; -} - -/* Image Control */ - -#subject { - width: 300px; - height: 300px; - background-repeat: no-repeat; - background-size: 100%; - background-color: #FFF; - border: 1px solid #CCC; - - position: absolute; - z-index: 10; - top: 15%; - left: 10%; - - box-shadow: 0 0 3px 0 #BABABA; - transition-property: width, height; - transition-duration: 0.1s; -} - -#subject .guideline { - background-color: rgba(255, 255, 255, 0.7); - border: 1px solid rgba(0, 0, 0, 0.3); - position: absolute; -} - -#subject .guideline:hover { - background-color: #F00; -} - -#subject .guideline[data-active] { - background-color: #F00; - z-index: 10; -} - -#subject .guideline[data-axis='X'] { - width: 1px; - height: 100%; - top: -1px; -} - -#subject .guideline[data-axis='Y'] { - width: 100%; - height: 1px; - left: -1px; -} - -#subject .guideline[data-axis='X']:hover { - cursor: w-resize; -} - -#subject .guideline[data-axis='Y']:hover { - cursor: s-resize; -} - - -#subject .relative { - position: relative; - font-size: 12px; -} - -#subject .tooltip, #subject .tooltip2 { - width: 40px; - height: 20px; - line-height: 20px; - font-size: 12px; - text-align: center; - - position: absolute; - opacity: 0.5; - transition: opacity 0.25s; -} - -#subject .tooltip { - background: #EEE; - border-radius: 2px; - border: 1px solid #CCC; -} - -#subject .tooltip2{ - color: #555; -} - -#subject [data-active] > * { - opacity: 1; -} - -#subject .tooltip[data-info='top'] { - top: -10px; - right: -50px; -} - -#subject .tooltip[data-info='right'] { - bottom: -30px; - right: -20px; -} - -#subject .tooltip[data-info='bottom'] { - top: -10px; - left: -50px; -} - -#subject .tooltip[data-info='left'] { - top: -30px; - right: -20px; -} - -#subject .tooltip2[data-info='top'] { - top: -10px; - left: -50px; -} - -#subject .tooltip2[data-info='right'] { - top: -30px; - right: -20px; -} - -#subject .tooltip2[data-info='bottom'] { - top: -10px; - right: -50px; -} - -#subject .tooltip2[data-info='left'] { - bottom: -30px; - right: -20px; -} - -/* Preview */ - -#preview { - width: 30%; - height: 50%; - background-color: #FFF; - text-align: center; - overflow: hidden; - position: absolute; - z-index: 10; - - left: 60%; - top: 15%; - - border-radius: 2px; - border-image-width: 20px; - border-image-repeat: round; - box-shadow: 0 0 3px 0 #BABABA; -} - -#preview .resize-handle { - width: 10px; - height: 10px; - background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat; - position: absolute; - bottom: 0; - right: 0; -} - -#preview .resize-handle:hover { - cursor: nw-resize; -} - - -/* - * General controls MENU - */ - -#general-controls { - padding: 10px 30px; - background-color: #FFF; - opacity: 0.95; - color: #888; - /*border-radius: 2px;*/ - box-shadow: 0 0 3px 0 #BABABA; -} - -#general-controls .property { - width: 130px; - float: left; -} - -#general-controls .name { - height: 20px; - margin: 0 10px 0 0; - line-height: 100%; - text-align: right; - float: left; -} - -#general-controls .right { - width: 200px; - float: right; -} - -#general-controls .ui-checkbox label { - height: 10px; -} - -#general-controls .separator { - height: 40px; - width: 1px; - margin: -10px 15px; - background-color: #EEE; - float: left; -} - -/* - * Controls - */ - -#controls { - color: #444; - margin: 10px 0 0 0; -} - -#controls .category { - height: 190px; - min-width: 260px; - margin: 10px; - padding: 10px; - border: 1px solid #CCC; - border-radius: 3px; - float: left; - - box-shadow: 0 0 3px 0 #BABABA; - transition: all 0.25s; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -@media (min-width: 880px) { - #controls .category { - width: 30%; - margin-left: 1.66%; - margin-right: 1.66%; - } -} - -@media (max-width: 879px) { - #controls .category { - width: 37%; - margin-left: 6.5%; - margin-right: 6.5%; - } -} - -#controls .category .title { - width: 100%; - height: 30px; - margin: 0 0 10px 0; - line-height: 25px; - - text-align: center; - color: #AAA; -} - -#controls .category:hover .title { - color: #777; -} - -#controls .category > .group { - border: 1px solid #CCC; - border-radius: 2px; -} - - -/* property */ - -#controls .property { - width: 250px; - height: 20px; - margin: 5px auto; -} - -#controls .property .ui-input-slider { - margin: 0; - float: left; -} - -#controls .property .ui-input-slider-info { - width: 60px; -} - -#controls .property .ui-input-slider-left { - transition: opacity 0.15s; - opacity: 0; -} - -#controls .property .ui-input-slider-right { - transition: opacity 0.15s; - opacity: 0; -} - -#controls .property .name { - width: 60px; - height: 20px; - padding: 0px 10px 0px 0px; - text-align: right; - line-height: 100%; - float: left; -} - -#controls .property .config { - width: 20px; - height: 20px; - float: left; - background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat; - opacity: 0.5; -} - -#controls .property .config:hover { - cursor: pointer; - opacity: 1; -} - -#controls .ui-input-slider:hover .ui-input-slider-right { - opacity: 1; -} - -#controls .ui-input-slider:hover .ui-input-slider-left { - opacity: 1; -} - -#controls .property .ui-dropdown { - margin: 0 10px; - float: left; -} - - -#controls .property .ui-checkbox { - margin: 0 0 0 16px; - float: left; -} - -#controls .property .ui-checkbox label { - height: 0.85em; - width: 10px; -} - -/* dropdowns */ -#controls .ui-dropdown { - width: 50px; - height: 1.7em; - border-radius: 2px; -} - -#controls .ui-dropdown-select { - line-height: 1.6em; -} - -#controls .ui-dropdown-list { - top: 20px; -} - -#controls .ui-dropdown-list { - border-width: 1px; - text-align: center; -} - -#controls .ui-dropdown-list:hover { - overflow: hidden; -} - -#controls .border-repeat { - margin: 0 0 0 16px !important; - width: 80px; -} - -#controls .border-repeat .ui-dropdown-list { - height: 6.2em; - border-width: 1px; - text-align: center; -} - -/* border-image-slice */ - - -#border-slice-control .ui-dropdown-list { - height: 4.3em; -} - -/* border-image-width */ - -#border-width-control .ui-dropdown-list { - height: 6.2em; -} - -/* border-image-outset */ - -#border-outset-control .ui-dropdown-list { - height: 4.3em; -} - -#aditional-properties .property { - width: 200px; -} - -#aditional-properties .ui-input-slider > input { - width: 80px !important; -} - -/* unit settings panel */ - -#unit-settings { - padding: 10px; - position: absolute; - - background: #FFF; - - font-size: 12px; - border-radius: 3px; - border: 1px solid #CCC; - text-align: center; - color: #555; - - position: absolute; - z-index: 1000; - - box-shadow: 0 0 3px 0 #BABABA; - transition: all 0.25s; -} - -#unit-settings .title { - width: 100%; - margin: -5px auto 0; - - color: #666; - font-size: 14px; - font-weight: bold; - line-height: 25px; - border-bottom: 1px solid #E5E5E5; -} - -#unit-settings .ui-input-slider { - margin: 10px 0 0 0; -} - -#unit-settings .ui-input-slider-info { - width: 50px; - line-height: 1.5em; -} - -#unit-settings input { - font-size: 12px; - width: 40px !important; -} - -#unit-settings .close { - width: 16px; - height: 16px; - background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center; - background-size: 75%; - - position: absolute; - top: 4px; - right: 4px; - opacity: 0.5; -} - -#unit-settings .close:hover { - cursor: pointer; - opacity: 1; -} - -#unit-settings[data-active='true'] { - opacity: 1; -} - -#unit-settings[data-active='false'] { - opacity: 0; - top: -100px !important; -} - -/* - * CSS Output Code - */ - -#output { - padding: 10px; - border: 2px dashed #888 !important; - box-shadow: none !important; - border-radius: 3px; - overflow: hidden; - - -moz-user-select: text; - -webkit-user-select: text; - -ms-user-select: text; - user-select: text; -} - - -@media (min-width: 880px) { - #output { - width: 63.33% !important; - } -} - -@media (max-width: 879px) { - #output { - width: 87% !important; - } -} - - -#output .title { - width: 100%; - height: 30px; - margin: 0 0 10px 0; - line-height: 25px; - - text-align: center; - color: #AAA; -} - -#output .css-property { - width: 100%; - margin: 0; - color: #555; - font-size: 14px; - line-height: 18px; - float: left; -} - -#output .css-property .name { - width: 30%; - font-weight: bold; - text-align: right; - float: left; -} - -#output .css-property .value { - width: 65%; - padding: 0 2.5%; - word-break: break-all; - float: left; -} -``` - -```js hidden -'use strict'; - -/** - * UI-SlidersManager - */ - -var InputSliderManager = (function InputSliderManager() { - - var subscribers = {}; - var sliders = []; - - var InputComponent = function InputComponent(obj) { - var input = document.createElement('input'); - input.setAttribute('type', 'text'); - input.style.width = 50 + obj.precision * 10 + 'px'; - - input.addEventListener('click', function(e) { - this.select(); - }); - - input.addEventListener('change', function(e) { - var value = parseFloat(e.target.value); - - if (isNaN(value) === true) - setValue(obj.topic, obj.value); - else - setValue(obj.topic, value); - }); - - return input; - }; - - var SliderComponent = function SliderComponent(obj, sign) { - var slider = document.createElement('div'); - var startX = null; - var start_value = 0; - - slider.addEventListener("click", function(e) { - document.removeEventListener("mousemove", sliderMotion); - setValue(obj.topic, obj.value + obj.step * sign); - }); - - slider.addEventListener("mousedown", function(e) { - startX = e.clientX; - start_value = obj.value; - document.body.style.cursor = "e-resize"; - - document.addEventListener("mouseup", slideEnd); - document.addEventListener("mousemove", sliderMotion); - }); - - var slideEnd = function slideEnd(e) { - document.removeEventListener("mousemove", sliderMotion); - document.body.style.cursor = "auto"; - slider.style.cursor = "pointer"; - }; - - var sliderMotion = function sliderMotion(e) { - slider.style.cursor = "e-resize"; - var delta = (e.clientX - startX) / obj.sensivity | 0; - var value = delta * obj.step + start_value; - setValue(obj.topic, value); - }; - - return slider; - }; - - var InputSlider = function(node) { - var min = parseFloat(node.getAttribute('data-min')); - var max = parseFloat(node.getAttribute('data-max')); - var step = parseFloat(node.getAttribute('data-step')); - var value = parseFloat(node.getAttribute('data-value')); - var topic = node.getAttribute('data-topic'); - var unit = node.getAttribute('data-unit'); - var name = node.getAttribute('data-info'); - var sensivity = node.getAttribute('data-sensivity') | 0; - var precision = node.getAttribute('data-precision') | 0; - - this.min = isNaN(min) ? 0 : min; - this.max = isNaN(max) ? 100 : max; - this.precision = precision >= 0 ? precision : 0; - this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision); - this.topic = topic; - this.node = node; - this.unit = unit === null ? '' : unit; - this.sensivity = sensivity > 0 ? sensivity : 5; - value = isNaN(value) ? this.min : value; - - var input = new InputComponent(this); - var slider_left = new SliderComponent(this, -1); - var slider_right = new SliderComponent(this, 1); - - slider_left.className = 'ui-input-slider-left'; - slider_right.className = 'ui-input-slider-right'; - - if (name) { - var info = document.createElement('span'); - info.className = 'ui-input-slider-info'; - info.textContent = name; - node.appendChild(info); - } - - node.appendChild(slider_left); - node.appendChild(input); - node.appendChild(slider_right); - - this.input = input; - sliders[topic] = this; - setValue(topic, value); - }; - - InputSlider.prototype.setInputValue = function setInputValue() { - this.input.value = this.value.toFixed(this.precision) + this.unit; - }; - - var setValue = function setValue(topic, value, send_notify) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - value = parseFloat(value.toFixed(slider.precision)); - - if (value > slider.max) value = slider.max; - if (value < slider.min) value = slider.min; - - slider.value = value; - slider.node.setAttribute('data-value', value); - - slider.setInputValue(); - - if (send_notify === false) - return; - - notify.call(slider); - }; - - var setMax = function setMax(topic, value) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - slider.max = value; - setValue(topic, slider.value); - }; - - var setMin = function setMin(topic, value) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - slider.min = value; - setValue(topic, slider.value); - }; - - var setUnit = function setUnit(topic, unit) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - slider.unit = unit; - setValue(topic, slider.value); - }; - - var setStep = function setStep(topic, value) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - slider.step = parseFloat(value); - setValue(topic, slider.value); - }; - - var setPrecision = function setPrecision(topic, value) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - value = value | 0; - slider.precision = value; - - var step = parseFloat(slider.step.toFixed(value)); - if (step === 0) - slider.step = 1 / Math.pow(10, value); - - setValue(topic, slider.value); - }; - - var setSensivity = function setSensivity(topic, value) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - value = value | 0; - - slider.sensivity = value > 0 ? value : 5; - }; - - var getNode = function getNode(topic) { - return sliders[topic].node; - }; - - var getPrecision = function getPrecision(topic) { - return sliders[topic].precision; - }; - - var getStep = function getStep(topic) { - return sliders[topic].step; - }; - - var subscribe = function subscribe(topic, callback) { - if (subscribers[topic] === undefined) - subscribers[topic] = []; - subscribers[topic].push(callback); - }; - - var unsubscribe = function unsubscribe(topic, callback) { - subscribers[topic].indexOf(callback); - subscribers[topic].splice(index, 1); - }; - - var notify = function notify() { - if (subscribers[this.topic] === undefined) - return; - for (var i = 0; i < subscribers[this.topic].length; i++) - subscribers[this.topic][i](this.value); - }; - - var createSlider = function createSlider(topic, label) { - var slider = document.createElement('div'); - slider.className = 'ui-input-slider'; - slider.setAttribute('data-topic', topic); - - if (label !== undefined) - slider.setAttribute('data-info', label); - - new InputSlider(slider); - return slider; - }; - - var init = function init() { - var elem = document.querySelectorAll('.ui-input-slider'); - var size = elem.length; - for (var i = 0; i < size; i++) - new InputSlider(elem[i]); - }; - - return { - init : init, - setMax : setMax, - setMin : setMin, - setUnit : setUnit, - setStep : setStep, - getNode : getNode, - getStep : getStep, - setValue : setValue, - subscribe : subscribe, - unsubscribe : unsubscribe, - setPrecision : setPrecision, - setSensivity : setSensivity, - getPrecision : getPrecision, - createSlider : createSlider, - }; - -})(); - - -/** - * UI-DropDown Select - */ - -var DropDownManager = (function DropdownManager() { - - var subscribers = {}; - var dropdowns = []; - var active = null; - - var visbility = ["hidden", "visible"]; - - - var DropDown = function DropDown(node) { - var topic = node.getAttribute('data-topic'); - var label = node.getAttribute('data-label'); - var selected = node.getAttribute('data-selected') | 0; - - var select = document.createElement('div'); - var list = document.createElement('div'); - var uval = 0; - var option = null; - var option_value = null; - - list.className = 'ui-dropdown-list'; - select.className = 'ui-dropdown-select'; - - while (node.firstElementChild !== null) { - option = node.firstElementChild; - option_value = option.getAttribute('data-value'); - - if (option_value === null) - option.setAttribute('data-value', uval); - - list.appendChild(node.firstElementChild); - uval++; - } - - node.appendChild(select); - node.appendChild(list); - - select.onclick = this.toggle.bind(this); - list.onclick = this.updateValue.bind(this); - document.addEventListener('click', clickOut); - - this.state = 0; - this.time = 0; - this.dropmenu = list; - this.select = select; - this.toggle(false); - this.value = {}; - this.topic = topic; - - if (label) - select.textContent = label; - else - this.setNodeValue(list.children[selected]); - - dropdowns[topic] = this; - - }; - - DropDown.prototype.toggle = function toggle(state) { - if (typeof(state) === 'boolean') - this.state = state === false ? 0 : 1; - else - this.state = 1 ^ this.state; - - if (active !== this) { - if (active) - active.toggle(false); - active = this; - } - - if (this.state === 0) - this.dropmenu.setAttribute('data-hidden', 'true'); - else - this.dropmenu.removeAttribute('data-hidden'); - - }; - - var clickOut = function clickOut(e) { - if (active.state === 0 || - e.target === active.dropmenu || - e.target === active.select) - return; - - active.toggle(false); - }; - - DropDown.prototype.updateValue = function updateValue(e) { - - if (Date.now() - this.time < 500) - return; - - if (e.target.className !== "ui-dropdown-list") { - this.setNodeValue(e.target); - this.toggle(false); - } - - this.time = Date.now(); - }; - - DropDown.prototype.setNodeValue = function setNodeValue(node) { - this.value['name'] = node.textContent; - this.value['value'] = node.getAttribute('data-value'); - - this.select.textContent = node.textContent; - this.select.setAttribute('data-value', this.value['value']); - - notify.call(this); - }; - - var createDropDown = function createDropDown(topic, options) { - - var dropdown = document.createElement('div'); - dropdown.setAttribute('data-topic', topic); - dropdown.className = 'ui-dropdown'; - - for (var i in options) { - var x = document.createElement('div'); - x.setAttribute('data-value', i); - x.textContent = options[i]; - dropdown.appendChild(x); - } - - new DropDown(dropdown); - - return dropdown; - }; - - var setValue = function setValue(topic, index) { - if (dropdowns[topic] === undefined || - index >= dropdowns[topic].dropmenu.children.length) - return; - - dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]); - }; - - var subscribe = function subscribe(topic, callback) { - if (subscribers[topic] === undefined) - subscribers[topic] = []; - subscribers[topic].push(callback); - }; - - var unsubscribe = function unsubscribe(topic, callback) { - var index = subscribers[topic].indexOf(callback); - subscribers[topic].splice(index, 1); - }; - - var notify = function notify() { - if (subscribers[this.topic] === undefined) - return; - - for (var i in subscribers[this.topic]) { - subscribers[this.topic][i](this.value); - } - }; - - var init = function init() { - var elem, size; - - elem = document.querySelectorAll('.ui-dropdown'); - size = elem.length; - for (var i = 0; i < size; i++) - new DropDown(elem[i]); - - }; - - return { - init : init, - setValue : setValue, - subscribe : subscribe, - unsubscribe : unsubscribe, - createDropDown : createDropDown - }; - -})(); - - -/** - * UI-ButtonManager - */ - -var ButtonManager = (function CheckBoxManager() { - - var subscribers = []; - var buttons = []; - - var CheckBox = function CheckBox(node) { - var topic = node.getAttribute('data-topic'); - var state = node.getAttribute('data-state'); - var name = node.getAttribute('data-label'); - var align = node.getAttribute('data-text-on'); - - state = (state === "true"); - - var checkbox = document.createElement("input"); - var label = document.createElement("label"); - - var id = 'checkbox-' + topic; - checkbox.id = id; - checkbox.setAttribute('type', 'checkbox'); - checkbox.checked = state; - - label.setAttribute('for', id); - if (name) { - label.className = 'text'; - if (align) - label.className += ' ' + align; - label.textContent = name; - } - - node.appendChild(checkbox); - node.appendChild(label); - - this.node = node; - this.topic = topic; - this.checkbox = checkbox; - - checkbox.addEventListener('change', function(e) { - notify.call(this); - }.bind(this)); - - buttons[topic] = this; - }; - - var getNode = function getNode(topic) { - return buttons[topic].node; - }; - - var setValue = function setValue(topic, value) { - var obj = buttons[topic]; - if (obj === undefined) - return; - - obj.checkbox.checked = value; - notify.call(obj); - }; - - var subscribe = function subscribe(topic, callback) { - if (subscribers[topic] === undefined) - subscribers[topic] = []; - - subscribers[topic].push(callback); - }; - - var unsubscribe = function unsubscribe(topic, callback) { - subscribers[topic].indexOf(callback); - subscribers[topic].splice(index, 1); - }; - - var notify = function notify() { - if (subscribers[this.topic] === undefined) - return; - for (var i = 0; i < subscribers[this.topic].length; i++) - subscribers[this.topic][i](this.checkbox.checked); - }; - - var init = function init() { - var elem = document.querySelectorAll('.ui-checkbox'); - var size = elem.length; - for (var i = 0; i < size; i++) - new CheckBox(elem[i]); - }; - - return { - init : init, - setValue : setValue, - subscribe : subscribe, - unsubscribe : unsubscribe - }; - -})(); - -window.addEventListener("load", function() { - BorderImage.init(); -}); - -var BorderImage = (function BorderImage() { - - var getElemById = document.getElementById.bind(document); - - var subject; - var preview; - var guidelines = []; - var positions = ['top', 'right', 'bottom', 'left']; - - var makeDraggable = function makeDraggable(elem) { - - var offsetTop; - var offsetLeft; - - elem.setAttribute('data-draggable', 'true'); - - var dragStart = function dragStart(e) { - if (e.target.getAttribute('data-draggable') !== 'true' || - e.target !== elem || e.button !== 0) - return; - - offsetLeft = e.clientX - elem.offsetLeft; - offsetTop = e.clientY - elem.offsetTop; - - document.addEventListener('mousemove', mouseDrag); - document.addEventListener('mouseup', dragEnd); - }; - - var dragEnd = function dragEnd(e) { - if (e.button !== 0) - return; - - document.removeEventListener('mousemove', mouseDrag); - document.removeEventListener('mouseup', dragEnd); - }; - - var mouseDrag = function mouseDrag(e) { - - elem.style.left = e.clientX - offsetLeft + 'px'; - elem.style.top = e.clientY - offsetTop + 'px'; - }; - - elem.addEventListener('mousedown', dragStart, false); - }; - - var PreviewControl = function PreviewControl() { - - var dragging = false; - var valueX = null; - var valueY = null; - - var dragStart = function dragStart(e) { - if (e.button !== 0) - return; - - valueX = e.clientX - preview.clientWidth; - valueY = e.clientY - preview.clientHeight; - dragging = true; - - document.addEventListener('mousemove', mouseDrag); - }; - - var dragEnd = function dragEnd(e) { - if (e.button !== 0 || dragging === false) - return; - - document.removeEventListener('mousemove', mouseDrag); - dragging = false; - }; - - var mouseDrag = function mouseDrag(e) { - InputSliderManager.setValue('preview-width', e.clientX - valueX); - InputSliderManager.setValue('preview-height', e.clientY - valueY); - }; - - var init = function init() { - - makeDraggable(preview); - makeDraggable(subject); - - var handle = document.createElement('div'); - handle.className = 'resize-handle'; - - handle.addEventListener('mousedown', dragStart); - document.addEventListener('mouseup', dragEnd); - - preview.appendChild(handle); - - }; - - return { - init: init - }; - - }(); - - var ImageReader = (function ImageReader() { - - var fReader = new FileReader(); - var browse = document.createElement('input'); - - var loadImage = function loadImage(e) { - if (browse.files.length === 0) - return; - - var file = browse.files[0]; - - if (file.type.slice(0, 5) !== 'image') - return; - - fReader.readAsDataURL(file); - - return false; - }; - - fReader.onload = function(e) { - ImageControl.loadRemoteImage(e.target.result); - }; - - var load = function load() { - browse.click(); - }; - - browse.setAttribute('type', 'file'); - browse.style.display = 'none'; - browse.onchange = loadImage; - - return { - load: load - }; - - })(); - - var ImageControl = (function ImageControl() { - - var scale = 0.5; - var imgSource = new Image(); - var imgState = null; - var selected = null; - - - var topics = ['slice', 'width', 'outset']; - var properties = {}; - properties['border1'] = { - fill : false, - - slice_values : [27, 27, 27, 27], - width_values : [20, 20, 20, 20], - outset_values : [0, 0, 0, 0], - - slice_units : [0, 0, 0, 0], - width_units : [0, 0, 0, 0], - outset_units : [0, 0, 0, 0], - - repeat : [1, 1], - size : [300, 200], - preview_area : 400 - }; - - properties['border2'] = { - fill : false, - - slice_values : [33, 33, 33, 33], - width_values : [1.5, 1.5, 1.5, 1.5], - outset_values : [0, 0, 0, 0], - - slice_units : [1, 1, 1, 1], - width_units : [2, 2, 2, 2], - outset_units : [0, 0, 0, 0], - - repeat : [2, 2], - size : [300, 200], - preview_area : 400 - }; - - properties['border3'] = { - fill : true, - - slice_values : [15, 15, 15, 15], - width_values : [10, 10, 10, 10], - outset_values : [0, 0, 0, 0], - - slice_units : [0, 0, 0, 0], - width_units : [0, 0, 0, 0], - outset_units : [0, 0, 0, 0], - - repeat : [2, 2], - size : [300, 200], - preview_area : 400 - }; - - properties['border4'] = { - fill : false, - - slice_values : [13, 13, 13, 13], - width_values : [13, 13, 13, 13], - outset_values : [13, 13, 13, 13], - - slice_units : [0, 0, 0, 0], - width_units : [0, 0, 0, 0], - outset_units : [0, 0, 0, 0], - - repeat : [0, 0], - size : [300, 200], - preview_area : 400 - }; - - properties['border5'] = { - fill : false, - - slice_values : [0, 12, 0, 12], - width_values : [0, 12, 0, 12], - outset_values : [0, 0, 0, 0], - - slice_units : [0, 0, 0, 0], - width_units : [0, 0, 0, 0], - outset_units : [0, 0, 0, 0], - - repeat : [0, 0], - size : [300, 200], - preview_area : 400, - }; - - properties['border6'] = { - fill : false, - - slice_values : [42, 42, 42, 42], - width_values : [42, 42, 42, 42], - outset_values : [0, 0, 0, 0], - - slice_units : [0, 0, 0, 0], - width_units : [0, 0, 0, 0], - outset_units : [0, 0, 0, 0], - - repeat : [2, 2], - size : [350, 350], - preview_area : 500, - }; - - - var loadLocalImage = function loadLocalImage(source) { - var location = "images/" + source; - imgSource.src = location; - }; - - var loadRemoteImage = function loadRemoteImage(source) { - imgSource.src = source; - if (selected) - selected.removeAttribute('selected'); - Tool.setOutputCSS('source', 'url("' + source + '")'); - }; - - var pickImage = function pickImage(e) { - if (e.target.className === 'image') { - selected = e.target; - selected.setAttribute('selected', 'true'); - loadRemoteImage(e.target.src); - imgState = e.target.getAttribute('data-stateID'); - } - }; - - var loadImageState = function loadImageState(stateID) { - if (properties[stateID] === undefined) - return; - - var prop = properties[stateID]; - var topic; - var unit_array; - var value_array; - - for (var i in topics) { - for (var j=0; j<4; j++) { - topic = topics[i] + '-' + positions[j]; - unit_array = topics[i] + '_units'; - value_array = topics[i] + '_values'; - InputSliderManager.setValue(topic, prop[value_array][j]); - DropDownManager.setValue(topic, prop[unit_array][j]); - } - } - - ButtonManager.setValue('slice-fill', prop['fill']); - DropDownManager.setValue('image-repeat-X', prop['repeat'][0]); - DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]); - InputSliderManager.setValue('preview-width', prop['size'][0]); - InputSliderManager.setValue('preview-height', prop['size'][1]); - InputSliderManager.setValue('preview-area-height', prop['preview_area']); - }; - - var update = function update() { - scale = Math.min(300, (30000 / this.width) | 0); - setScale(scale); - InputSliderManager.setValue('scale', scale, false); - - subject.style.backgroundImage = 'url("' + this.src + '")'; - preview.style.borderImageSource = 'url("' + this.src + '")'; - - guidelines['slice-top'].setMax(this.height); - guidelines['slice-right'].setMax(this.width); - guidelines['slice-bottom'].setMax(this.height); - guidelines['slice-left'].setMax(this.width); - - if (imgState) - loadImageState(imgState); - }; - - var setScale = function setScale(value) { - scale = value; - var w = imgSource.width * scale / 100 | 0; - var h = imgSource.height * scale / 100 | 0; - subject.style.width = w + 'px'; - subject.style.height = h + 'px'; - - for (var i = 0; i < positions.length; i++) - guidelines['slice-' + positions[i]].updateGuidelinePos(); - }; - - var getScale = function getScale() { - return scale/100; - }; - - var toggleGallery = function toggleGallery() { - var gallery = getElemById('image-gallery'); - var button = getElemById('toggle-gallery'); - var state = 1; - button.addEventListener('click', function() { - state = 1 ^ state; - if (state === 0) { - gallery.setAttribute('data-collapsed', 'true'); - button.setAttribute('data-action', 'show'); - } - else { - gallery.removeAttribute('data-collapsed'); - button.setAttribute('data-action', 'hide'); - } - }); - }; - - var init = function init() { - var gallery = getElemById('image-gallery'); - var browse = getElemById('load-image'); - var remote = getElemById('remote-url'); - var load_remote = getElemById('load-remote'); - - remote.addEventListener('change', function(){ - loadRemoteImage(this.value); - }); - - load_remote.addEventListener('click', function(){ - loadRemoteImage(remote.value); - }); - - browse.addEventListener('click', ImageReader.load); - gallery.addEventListener('click', pickImage); - imgSource.addEventListener('load', update); - - InputSliderManager.subscribe('scale', setScale); - InputSliderManager.setValue('scale', scale); - imgState = 'border1'; - loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png'); - toggleGallery(); - }; - - return { - init: init, - getScale : getScale, - loadRemoteImage: loadRemoteImage - }; - - })(); - - var GuideLine = function GuideLine(node) { - var topic = node.getAttribute('data-topic'); - var axis = node.getAttribute('data-axis'); - - this.node = node; - this.topic = topic; - this.axis = axis; - this.info = topic.split('-')[1]; - - this.position = 0; - this.value = 0; - this.unit = 0; - this.max = 0; - this.pos = positions.indexOf(this.info); - - guidelines[topic] = this; - - var relative_container = document.createElement('div'); - var tooltip = document.createElement('div'); - var tooltip2 = document.createElement('div'); - - tooltip.className = 'tooltip'; - tooltip.setAttribute('data-info', this.info); - - tooltip2.className = 'tooltip2'; - tooltip2.textContent = this.info; - tooltip2.setAttribute('data-info', this.info); - - this.tooltip = tooltip; - - relative_container.appendChild(tooltip); - relative_container.appendChild(tooltip2); - node.appendChild(relative_container); - - var startX = 0; - var startY = 0; - var start = 0; - - var startDrag = function startDrag(e) { - startX = e.clientX; - startY = e.clientY; - start = guidelines[topic].position; - document.body.setAttribute('data-move', axis); - relative_container.setAttribute('data-active', ''); - node.setAttribute('data-active', ''); - - document.addEventListener('mousemove', updateGuideline); - document.addEventListener('mouseup', endDrag); - }; - - var endDrag = function endDrag() { - document.body.removeAttribute('data-move'); - relative_container.removeAttribute('data-active'); - node.removeAttribute('data-active'); - - document.removeEventListener('mousemove', updateGuideline); - }; - - var updateGuideline = function updateGuideline(e) { - var value; - if (topic === 'slice-top') - value = e.clientY - startY + start; - - if (topic === 'slice-right') - value = startX - e.clientX + start; - - if (topic === 'slice-bottom') - value = startY - e.clientY + start; - - if (topic === 'slice-left') - value = e.clientX - startX + start; - - if (this.unit === 0) - InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0); - else { - InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0); - } - - }.bind(this); - - node.addEventListener("mousedown", startDrag); - - InputSliderManager.subscribe(topic, this.setPosition.bind(this)); - InputSliderManager.setValue(topic, this.position); - }; - - - GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() { - if (this.unit === 0) - this.position = this.value * ImageControl.getScale() | 0; - else - this.position = this.value * this.max * ImageControl.getScale() / 100 | 0; - - this.node.style[this.info] = this.position + 'px'; - }; - - GuideLine.prototype.setPosition = function setPosition(value) { - this.value = value; - this.tooltip.textContent = value; - this.updateGuidelinePos(); - Tool.setBorderSlice(this.pos, value); - }; - - GuideLine.prototype.setMax = function setMax(max) { - this.max = max; - this.updateLimit(); - }; - - GuideLine.prototype.updateLimit = function updateLimit() { - if (this.unit === 1) - InputSliderManager.setMax(this.topic, 100); - else - InputSliderManager.setMax(this.topic, this.max); - }; - - GuideLine.prototype.setUnit = function setUnit(type) { - if (type === '%') this.unit = 1; - if (type === '') this.unit = 0; - this.updateLimit(); - }; - - /* - * Unit panel - */ - var UnitPanel = (function UnitPanel () { - - var panel; - var title; - var precision; - var step; - var unit_topic = null; // settings are made for this topic - var step_option = [1, 0.1, 0.01]; - - var updatePrecision = function updatePrecision(value) { - InputSliderManager.setPrecision('unit-step', value); - InputSliderManager.setStep('unit-step', step_option[value]); - InputSliderManager.setMin('unit-step', step_option[value]); - - if (unit_topic) - InputSliderManager.setPrecision(unit_topic, value); - }; - - var updateUnitSettings = function updateUnitSettings(value) { - if (unit_topic) - InputSliderManager.setStep(unit_topic, value); - }; - - var show = function show(e) { - var topic = e.target.getAttribute('data-topic'); - var precision = InputSliderManager.getPrecision(topic); - var step = InputSliderManager.getStep(topic); - - unit_topic = topic; - title.textContent = topic; - - panel.setAttribute('data-active', 'true'); - panel.style.top = e.target.offsetTop - 40 + 'px'; - panel.style.left = e.target.offsetLeft + 30 + 'px'; - - InputSliderManager.setValue('unit-precision', precision); - InputSliderManager.setValue('unit-step', step); - }; - - var init = function init() { - panel = document.createElement('div'); - title = document.createElement('div'); - var close = document.createElement('div'); - - step = InputSliderManager.createSlider('unit-step', 'step'); - precision = InputSliderManager.createSlider('unit-precision', 'precision'); - - InputSliderManager.setStep('unit-precision', 1); - InputSliderManager.setMax('unit-precision', 2); - InputSliderManager.setValue('unit-precision', 2); - InputSliderManager.setSensivity('unit-precision', 20); - - InputSliderManager.setValue('unit-step', 1); - InputSliderManager.setStep('unit-step', 0.01); - InputSliderManager.setPrecision('unit-step', 2); - - InputSliderManager.subscribe('unit-precision', updatePrecision); - InputSliderManager.subscribe('unit-step', updateUnitSettings); - - close.addEventListener('click', function () { - panel.setAttribute('data-active', 'false'); - }); - - title.textContent = 'Properties'; - title.className = 'title'; - close.className = 'close'; - panel.id = 'unit-settings'; - panel.setAttribute('data-active', 'false'); - panel.appendChild(title); - panel.appendChild(precision); - panel.appendChild(step); - panel.appendChild(close); - document.body.appendChild(panel); - }; - - return { - init : init, - show : show - }; - - })(); - - /** - * Tool Manager - */ - var Tool = (function Tool() { - var preview_area; - var dropdown_unit_options = [ - { '' : '--', '%' : '%'}, - { 'px' : 'px', '%' : '%', 'em' : 'em'}, - { 'px' : 'px', 'em' : 'em'}, - ]; - - var border_slice = []; - var border_width = []; - var border_outset = []; - - var border_slice_values = []; - var border_width_values = []; - var border_outset_values = []; - - var border_slice_units = ['', '', '', '']; - var border_width_units = ['px', 'px', 'px', 'px']; - var border_outset_units = ['px', 'px', 'px', 'px']; - - var border_fill = false; - var border_repeat = ['round', 'round']; - var CSS_code = { - 'source' : null, - 'slice' : null, - 'width' : null, - 'outset' : null, - 'repeat' : null - }; - - var setBorderSlice = function setBorderSlice(positionID, value) { - border_slice[positionID] = value + border_slice_units[positionID]; - updateBorderSlice(); - }; - - var updateBorderSlice = function updateBorderSlice() { - var value = border_slice.join(' '); - if (border_fill === true) - value += ' fill'; - - preview.style.borderImageSlice = value; - setOutputCSS('slice', value); - }; - - var setBorderFill = function setBorderFill(value) { - border_fill = value; - var bimgslice = border_slice.join(' ');; - if (value === true) - bimgslice += ' fill'; - - preview.style.borderImageSlice = bimgslice; - }; - - var updateBorderWidth = function updateBorderWidth() { - var value = border_width.join(' '); - preview.style.borderImageWidth = value; - setOutputCSS('width', value); - }; - - var updateBorderOutset = function updateBorderOutset() { - var value = border_outset.join(' '); - preview.style.borderImageOutset = border_outset.join(' '); - setOutputCSS('outset', value); - }; - - var setBorderRepeat = function setBorderRepeat(obj) { - border_repeat[obj.value] = obj.name; - var value = border_repeat.join(' '); - preview.style.borderImageRepeat = value; - setOutputCSS('repeat', value); - }; - - var setOutputCSS = function setOutputCSS(topic, value) { - CSS_code[topic].textContent = value + ';'; - }; - - var setPreviewFontSize = function setPreviewFontSize(value) { - preview.style.fontSize = value + 'px'; - }; - - var setPreviewWidth = function setPreviewWidth(value) { - preview.style.width = value + 'px'; - }; - - var setPreviewHeight = function setPreviewHeight(value) { - preview.style.height = value + 'px'; - }; - - var setPreviewAreaHeight = function setPreviewAreaHeight(value) { - preview_area.style.height = value + 'px'; - }; - - var updateDragOption = function updateDragOption(value) { - if (value === true) - subject.setAttribute('data-draggable', 'true'); - else - subject.removeAttribute('data-draggable'); - }; - - var createProperty = function createProperty(topic, labelID, optionsID) { - - var slider = InputSliderManager.createSlider(topic, positions[labelID]); - var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]); - - InputSliderManager.setSensivity(topic, 3); - InputSliderManager.setPrecision(topic, 1); - - var property = document.createElement('div'); - var config = document.createElement('div'); - - property.className = 'property'; - config.className = 'config'; - config.setAttribute('data-topic', topic); - config.addEventListener('click', UnitPanel.show); - - property.appendChild(slider); - property.appendChild(dropdown); - property.appendChild(config); - - return property; - }; - - var initBorderSliceControls = function initBorderSliceControls() { - var container = getElemById('border-slice-control'); - - var listenForChanges = function listenForChanges(topic, id) { - InputSliderManager.subscribe(topic, function(value) { - border_slice_values[id] = value; - border_slice[id] = value + border_slice_units[id]; - updateBorderSlice(); - }); - - DropDownManager.subscribe(topic, function(obj) { - guidelines[topic].setUnit(obj.value); - border_slice_units[id] = obj.value; - border_slice[id] = border_slice_values[id] + obj.value; - updateBorderSlice(); - }); - }; - - for (var i = 0; i < positions.length; i++) { - var topic = 'slice-' + positions[i]; - var property = createProperty(topic, i, 0); - listenForChanges(topic, i); - - container.appendChild(property); - } - - container.appendChild(container.children[1]); - - }; - - var initBorderWidthControls = function initBorderWidthControls() { - var container = getElemById('border-width-control'); - - var listenForChanges = function listenForChanges(topic, id) { - InputSliderManager.subscribe(topic, function(value) { - border_width_values[id] = value; - border_width[id] = value + border_width_units[id]; - updateBorderWidth(); - }); - - DropDownManager.subscribe(topic, function(obj) { - if (obj.value === '%') - InputSliderManager.setMax(topic, 100); - else - InputSliderManager.setMax(topic, 1000); - - border_width_units[id] = obj.value; - border_width[id] = border_width_values[id] + obj.value; - updateBorderWidth(); - }); - }; - - for (var i = 0; i < positions.length; i++) { - var topic = 'width-' + positions[i]; - var property = createProperty(topic, i, 1); - InputSliderManager.setMax(topic, 1000); - listenForChanges(topic, i); - - container.appendChild(property); - } - }; - - var initBorderOutsetControls = function initBorderOutsetControls() { - - var container = getElemById('border-outset-control'); - - var listenForChanges = function listenForChanges(topic, id) { - InputSliderManager.subscribe(topic, function(value) { - border_outset_values[id] = value; - border_outset[id] = value + border_outset_units[id]; - updateBorderOutset(); - }); - - DropDownManager.subscribe(topic, function(obj) { - border_outset_units[id] = obj.value; - border_outset[id] = border_outset_values[id] + obj.value; - updateBorderOutset(); - }); - }; - - for (var i = 0; i < positions.length; i++) { - var topic = 'outset-' + positions[i]; - var property = createProperty(topic, i, 2); - InputSliderManager.setMax(topic, 1000); - listenForChanges(topic, i); - - container.appendChild(property); - } - }; - - var init = function init() { - - var gallery = - subject = getElemById('subject'); - preview = getElemById("preview"); - preview_area = getElemById("preview_section"); - - - CSS_code['source'] = getElemById("out-border-source"); - CSS_code['slice'] = getElemById("out-border-slice"); - CSS_code['width'] = getElemById("out-border-width"); - CSS_code['outset'] = getElemById("out-border-outset"); - CSS_code['repeat'] = getElemById("out-border-repeat"); - - initBorderSliceControls(); - initBorderWidthControls(); - initBorderOutsetControls(); - - var elem = document.querySelectorAll('.guideline'); - var size = elem.length; - for (var i = 0; i < size; i++) - new GuideLine(elem[i]); - - PreviewControl.init(); - - ButtonManager.subscribe('slice-fill',setBorderFill); - ButtonManager.subscribe('drag-subject', updateDragOption); - ButtonManager.setValue('drag-subject', false); - - DropDownManager.subscribe('image-repeat-X', setBorderRepeat); - DropDownManager.subscribe('image-repeat-Y', setBorderRepeat); - - InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight); - InputSliderManager.subscribe('preview-width', setPreviewWidth); - InputSliderManager.subscribe('preview-height', setPreviewHeight); - InputSliderManager.subscribe('font-size', setPreviewFontSize); - InputSliderManager.setValue('preview-width', 300); - InputSliderManager.setValue('preview-height', 200); - }; - - return { - init: init, - setOutputCSS: setOutputCSS, - setBorderSlice: setBorderSlice - }; - - })(); - - /** - * Init Tool - */ - var init = function init() { - InputSliderManager.init(); - DropDownManager.init(); - ButtonManager.init(); - UnitPanel.init(); - Tool.init(); - ImageControl.init(); - }; - - return { - init : init - }; - -})(); -``` - -{{EmbedLiveSample('Border_Image_Generator', '100%', '1270px')}} +{{EmbedGHLiveSample("css-examples/tools/border-image-generator/", '100%', 1200)}} diff --git a/files/fr/web/css/css_backgrounds_and_borders/box-shadow_generator/index.md b/files/fr/web/css/css_backgrounds_and_borders/box-shadow_generator/index.md index 5fb89998da..511e904324 100644 --- a/files/fr/web/css/css_backgrounds_and_borders/box-shadow_generator/index.md +++ b/files/fr/web/css/css_backgrounds_and_borders/box-shadow_generator/index.md @@ -1,2875 +1,12 @@ --- title: Générateur de box-shadow slug: Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator -tags: - - CSS - - Outil translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator original_slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator --- Cet outil visuel permet de construire des effets d'ombre et de générer du code pour la propriété {{cssxref("box-shadow")}} qui pourra être ajouté à votre feuille de style. -```html hidden -<div id="container"> - <div class="group section"> - <div id="layer_manager"> - <div class="group section"> - <div class="button" data-type="add"> </div> - <div class="button" data-type="move-up"> </div> - <div class="button" data-type="move-down"> </div> - </div> - <div id="stack_container"></div> - </div> - - <div id="preview_zone"> - <div id="layer_menu" class="col span_12"> - <div class="button" id="element" data-type="subject" data-title="element"> element </div> - <div class="button" id="before" data-type="subject" data-title=":before"> - :before - <span class="delete" data-type="disable"></span> - </div> - <div class="button" id="after" data-type="subject" data-title=":after"> - :after - <span class="delete" data-type="disable"></span> - </div> - <div class="ui-checkbox" data-topic='before' data-label=":before"></div> - <div class="ui-checkbox" data-topic='after' data-label=":after"></div> - </div> - - <div id="preview"> - <div id="obj-element"> - <div class="content"> </div> - <div id="obj-before"> </div> - <div id="obj-after"> </div> - </div> - </div> - </div> - </div> - - <div id="controls" class="group section"> - <div class="wrap-left"> - <div class="colorpicker category"> - <div class="title"> </div> - <div id="colorpicker" class="group"> - <div id="gradient" class="gradient"> - <div id="gradient_picker"> </div> - </div> - <div id="hue" data-topic="hue" class="hue"> - <div id="hue_selector"> </div> - </div> - <div class="info"> - <div class="input" data-topic="hue" data-title='H:' data-action="HSV"></div> - <div class="input" data-topic="saturation" data-title='S:' data-action="HSV"></div> - <div class="input" data-topic="value" data-title='V:' data-action="HSV"></div> - </div> - <div class="alpha"> - <div id="alpha" data-topic="alpha"> - <div id="alpha_selector"> </div> - </div> - </div> - <div class="info"> - <div class="input" data-topic="r" data-title='R:' data-action="RGB"></div> - <div class="input" data-topic="g" data-title='G:' data-action="RGB"></div> - <div class="input" data-topic="b" data-title='B:' data-action="RGB"></div> - </div> - <div class="preview block"> - <div id="output_color"> </div> - </div> - <div class="block info"> - <div class="input" data-topic="a" data-title='alpha:' data-action="alpha"></div> - <div class="input" data-topic="hexa" data-title='' data-action="hexa"></div> - </div> - </div> - </div> - </div> - - <div class="wrap-right"> - - <div id="shadow_properties" class="category"> - <div class="title"> Propriétés d'ombre </div> - <div class="group"> - <div class="group property"> - <div class="ui-slider-name"> inset </div> - <div class="ui-checkbox" data-topic='inset'></div> - </div> - <div class="slidergroup"> - <div class="ui-slider-name"> Position x </div> - <div class="ui-slider-btn-set" data-topic="posX" data-type="sub"></div> - <div class="ui-slider" data-topic="posX" - data-min="-500" data-max="500" data-step="1"> </div> - <div class="ui-slider-btn-set" data-topic="posX" data-type="add"></div> - <div class="ui-slider-input" data-topic="posX" data-unit="px"></div> - </div> - <div class="slidergroup"> - <div class="ui-slider-name"> Position y </div> - <div class="ui-slider-btn-set" data-topic="posY" data-type="sub"></div> - <div class="ui-slider" data-topic="posY" - data-min="-500" data-max="500" data-step="1"> </div> - <div class="ui-slider-btn-set" data-topic="posY" data-type="add"></div> - <div class="ui-slider-input" data-topic="posY" data-unit="px"></div> - </div> - <div class="slidergroup"> - <div class="ui-slider-name"> Blur </div> - <div class="ui-slider-btn-set" data-topic="blur" data-type="sub"></div> - <div class="ui-slider" data-topic="blur" - data-min="0" data-max="200" data-step="1"> </div> - <div class="ui-slider-btn-set" data-topic="blur" data-type="add"></div> - <div class="ui-slider-input" data-topic="blur" data-unit="px"></div> - </div> - <div class="slidergroup"> - <div class="ui-slider-name"> Spread </div> - <div class="ui-slider-btn-set" data-topic="spread" data-type="sub"></div> - <div class="ui-slider" data-topic="spread" - data-min="-100" data-max="100" data-step="1" data-value="50"> - </div> - <div class="ui-slider-btn-set" data-topic="spread" data-type="add"></div> - <div class="ui-slider-input" data-topic="spread" data-unit="px"></div> - </div> - </div> - </div> - - <div id="element_properties" class="category"> - <div class="title"> Propriétés d'ombre </div> - <div class="group"> - <div class="group property"> - <div class="ui-slider-name"> border </div> - <div class="ui-checkbox" data-topic='border-state' data-state="true"></div> - </div> - <div id="z-index" class="slidergroup"> - <div class="ui-slider-name"> z-index </div> - <div class="ui-slider-btn-set" data-topic="z-index" data-type="sub"></div> - <div class="ui-slider" data-topic="z-index" - data-min="-10" data-max="10" data-step="1"></div> - <div class="ui-slider-btn-set" data-topic="z-index" data-type="add"></div> - <div class="ui-slider-input" data-topic="z-index"></div> - </div> - <div class="slidergroup"> - <div class="ui-slider-name"> top </div> - <div class="ui-slider-btn-set" data-topic="top" data-type="sub"></div> - <div class="ui-slider" data-topic="top" - data-min="-500" data-max="500" data-step="1"> </div> - <div class="ui-slider-btn-set" data-topic="top" data-type="add"></div> - <div class="ui-slider-input" data-topic="top" data-unit="px"></div> - </div> - <div class="slidergroup"> - <div class="ui-slider-name"> left </div> - <div class="ui-slider-btn-set" data-topic="left" data-type="sub"></div> - <div class="ui-slider" data-topic="left" - data-min="-300" data-max="700" data-step="1"> </div> - <div class="ui-slider-btn-set" data-topic="left" data-type="add"></div> - <div class="ui-slider-input" data-topic="left" data-unit="px"></div> - </div> - <div id="transform_rotate" class="slidergroup"> - <div class="ui-slider-name"> Rotate </div> - <div class="ui-slider-btn-set" data-topic="rotate" data-type="sub"></div> - <div class="ui-slider" data-topic="rotate" - data-min="-360" data-max="360" data-step="1" data-value="0"> - </div> - <div class="ui-slider-btn-set" data-topic="rotate" data-type="add"></div> - <div class="ui-slider-input" data-topic="rotate" data-unit="deg"></div> - </div> - <div class="slidergroup"> - <div class="ui-slider-name"> Width </div> - <div class="ui-slider-btn-set" data-topic="width" data-type="sub"></div> - <div class="ui-slider" data-topic="width" - data-min="0" data-max="1000" data-step="1" data-value="200"> - </div> - <div class="ui-slider-btn-set" data-topic="width" data-type="add"></div> - <div class="ui-slider-input" data-topic="width" data-unit="px"></div> - </div> - <div class="slidergroup"> - <div class="ui-slider-name"> Height </div> - <div class="ui-slider-btn-set" data-topic="height" data-type="sub"></div> - <div class="ui-slider" data-topic="height" - data-min="0" data-max="400" data-step="1" data-value="200"> - </div> - <div class="ui-slider-btn-set" data-topic="height" data-type="add"></div> - <div class="ui-slider-input" data-topic="height" data-unit="px"></div> - </div> - </div> - </div> - - <div id="output" class="category"> - <div id="menu" class="menu"></div> - <div class="title"> Code CSS </div> - <div class="group" style="border-top-left-radius: 0;"> - <div class="output" data-topic="element" data-name="element" - data-prop="width height background-color position=[relative] box-shadow"> - </div> - <div class="output" data-topic="before" data-name="element:before" - data-prop="content=[""] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"> - </div> - <div class="output" data-topic="after" data-name="element:after" - data-prop="content=[""] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"> - </div> - </div> - </div> - </div> - </div> -</div> -``` - -```css hidden -/* GRID OF TWELVE - * ========================================================================== */ - -.span_12 { - width: 100%; -} - -.span_11 { - width: 91.46%; -} - -.span_10 { - width: 83%; -} - -.span_9 { - width: 74.54%; -} - -.span_8 { - width: 66.08%; -} - -.span_7 { - width: 57.62%; -} - -.span_6 { - width: 49.16%; -} - -.span_5 { - width: 40.7%; -} - -.span_4 { - width: 32.24%; -} - -.span_3 { - width: 23.78%; -} - -.span_2 { - width: 15.32%; -} - -.span_1 { - width: 6.86%; -} - - -/* SECTIONS - * ========================================================================== */ - -.section { - clear: both; - padding: 0px; - margin: 0px; -} - -/* GROUPING - * ========================================================================== */ - - -.group:before, .group:after { - content: ""; - display: table; -} - -.group:after { - clear:both; -} - -.group { - zoom: 1; /* For IE 6/7 (trigger hasLayout) */ -} - -/* GRID COLUMN SETUP - * ========================================================================== */ - -.col { - display: block; - float:left; - margin: 1% 0 1% 1.6%; -} - -.col:first-child { - margin-left: 0; -} /* all browsers except IE6 and lower */ - -/* - * UI Slider - */ - -.slidergroup { - height: 20px; - margin: 10px 0; - font-family: "Segoe UI", Arial, Helvetica, sans-serif; - -moz-user-select: none; - user-select: none; -} - -.slidergroup * { - float: left; - height: 100%; - line-height: 100%; -} - -/* Slider */ - -.ui-slider { - height: 10px; - width: 200px; - margin: 4px 10px; - display: block; - border: 1px solid #999; - border-radius: 3px; - background: #EEE; -} - -.ui-slider:hover { - cursor: pointer; -} - -.ui-slider-name { - width: 90px; - padding: 0 10px 0 0; - text-align: right; - text-transform: lowercase; -} - -.ui-slider-pointer { - width: 13px; - height: 13px; - background-color: #EEE; - border: 1px solid #2C9FC9; - border-radius: 3px; - position: relative; - top: -3px; - left: 0%; -} - -.ui-slider-btn-set { - width: 25px; - background-color: #2C9FC9; - border-radius: 3px; - color: #FFF; - font-weight: bold; - text-align: center; -} - -.ui-slider-btn-set:hover { - background-color: #379B4A; - cursor: pointer; -} - -.ui-slider-input > input { - margin: 0 10px; - padding: 0; - width: 50px; - text-align: center; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -/* - * UI Button - */ - -/* Checkbox */ - -.ui-checkbox { - text-align: center; - font-size: 16px; - font-family: "Segoe UI", Arial, Helvetica, sans-serif; - line-height: 1.5em; - color: #FFF; - - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.ui-checkbox > input { - display: none; -} - -.ui-checkbox > label { - font-size: 12px; - padding: 0.333em 1.666em 0.5em; - height: 1em; - line-height: 1em; - - background-color: #888; - background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png"); - background-position: center center; - background-repeat: no-repeat; - - color: #FFF; - border-radius: 3px; - font-weight: bold; - float: left; -} - -.ui-checkbox .text { - padding-left: 34px; - background-position: center left 10px; -} - -.ui-checkbox .left { - padding-right: 34px; - padding-left: 1.666em; - background-position: center right 10px; -} - -.ui-checkbox > label:hover { - cursor: pointer; -} - -.ui-checkbox > input:checked + label { - background-image: url("https://mdn.mozillademos.org/files/5681/checked.png"); - background-color: #379B4A; -} - -/* - * BOX SHADOW GENERATOR TOOL - */ - -body { - max-width: 1000px; - height: 800px; - margin: 20px auto 0; - - font-family: "Segoe UI", Arial, Helvetica, sans-serif; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; -} - -#container { - width: 100%; - padding: 2px; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - - -/* container with shadows stacks */ -#stack_container { - height: 400px; - overflow: hidden; - position: relative; - border: 1px solid #CCC; - border-radius: 3px; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -#stack_container .container { - height: 100%; - width: 100%; - position: absolute; - left: 100%; - transition-property: left; - transition-duration: 0.5s; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - - -#stack_container .title { - text-align: center; - font-weight: bold; - line-height: 2em; - border-bottom: 1px solid #43A6E1; - color: #666; -} - - -/* - * Stack of Layers for shadow - */ - -#layer_manager { - width: 17%; - background-color: #FEFEFE; - margin: 0 1% 0 0; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - float: left; -} - - -#layer_manager .button { - width: 30%; - height: 25px; - margin:0 0 10px; - color: #333; - background-color: #EEE; - text-align: center; - font-size: 0.75em; - line-height: 1.5em; - border: 1px solid #CCC; - border-radius: 3px; - - display: block; - background-position: center center; - background-repeat: no-repeat; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - float: left; -} - -#layer_manager .button:hover { - background-color: #3380C4; - border: 1px solid #3380C4; - cursor: pointer; -} - -#layer_manager [data-type='add'] { - background-image: url("https://mdn.mozillademos.org/files/5685/add-black.png"); -} - -#layer_manager [data-type='add']:hover { - background-image: url("https://mdn.mozillademos.org/files/5687/add-white.png"); -} - -#layer_manager [data-type='move-up'] { - background-image: url("https://mdn.mozillademos.org/files/5697/up-black.png"); - margin-left: 5%; - margin-right: 5%; -} - -#layer_manager [data-type='move-up']:hover { - background-image: url("https://mdn.mozillademos.org/files/5709/up-white.png"); -} - -#layer_manager [data-type='move-down'] { - background-image: url("https://mdn.mozillademos.org/files/5693/down-black.png"); -} - -#layer_manager [data-type='move-down']:hover { - background-image: url("https://mdn.mozillademos.org/files/5695/down-white.png"); -} - -/* shadows classes */ - -#layer_manager .node { - width: 100%; - margin: 5px 0; - padding: 5px; - text-align: center; - background-color: #EEE; - border: 1px solid #DDD; - font-size: 0.75em; - line-height: 1.5em; - color: #333; - border-radius: 3px; - - position: relative; - display: block; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -#layer_manager .node:hover { - color: #FFF; - background-color: #3380C4; - cursor: pointer; -} - -/* active element styling */ - -#layer_manager [data-active='layer'] { - color: #FFF; - border: none; - background-color: #379B4A; -} - -#layer_manager [data-active='subject'] { - color: #FFF; - background-color: #467FC9; -} - -/* delete button */ - -#layer_manager .delete { - width: 1.5em; - height: 100%; - float: right; - border-radius: 3px; - background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png"); - background-position: center center; - background-repeat: no-repeat; - position: absolute; - top: 0; - right: 10px; - display: none; -} - -#layer_manager .delete:hover { - background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png"); -} - -#layer_manager .node:hover .delete { - display: block; -} - - -#layer_manager .stack { - padding: 0 5px; - max-height: 90%; - overflow: auto; - overflow-x: hidden; -} - - -/* - * Layer Menu - */ - -#layer_menu { - margin: 0 0 10px 0; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -#layer_menu .button { - width: 100px; - margin: 0 5px 0 0; - padding: 2.5px; - color: #333; - background-color: #EEE; - border: 1px solid #CCC; - border-radius: 3px; - text-align: center; - font-size: 0.75em; - line-height: 1.5em; - - position: relative; - display: block; - float: left; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -#layer_menu .button:hover { - color: #FFF; - background-color: #3380C4; - border: 1px solid #3380C4; - cursor: pointer; -} - -#layer_menu .delete { - width: 1.5em; - height: 100%; - float: right; - border-radius: 3px; - background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png"); - background-position: center center; - background-repeat: no-repeat; - position: absolute; - top: 0; - right: 5px; - display: none; -} - -#layer_menu .delete:hover { - background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png"); -} - -#layer_menu .button:hover .delete { - display: block; -} - - -/* - * active element styling - */ - -#layer_menu [data-active='subject'] { - color: #FFF; - background-color: #379B4A; - border: 1px solid #379B4A; -} - - -/* Checkbox */ - -#layer_menu .ui-checkbox > label { - height: 15px; - line-height: 17px; - font-weight: normal; - width: 46px; - margin: 0 5px 0 0; -} - -#layer_menu .ui-checkbox > input:checked + label { - display: none; -} - - -/******************************************************************************/ -/******************************************************************************/ -/* - * Preview Area - */ - -#preview_zone { - width: 82%; - float: left; - -} - - -#preview { - width: 100%; - height: 400px; - border: 1px solid #CCC; - border-radius: 3px; - text-align: center; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - cursor: move; - float: left; -} - -#preview .content { - width: 100%; - height: 100%; - display: block; -} - -#obj-element { - width: 300px; - height: 100px; - border: 1px solid #CCC; - background: #FFF; - position: relative; -} - - -#obj-before { - height: 100%; - width: 100%; - background: #999; - border: 1px solid #CCC; - text-align: left; - display : block; - position: absolute; - z-index: -1; -} - -#obj-after { - height: 100%; - width: 100%; - background: #DDD; - border: 1px solid #CCC; - text-align: right; - display : block; - position: absolute; - z-index: -1; -} - - -/******************************************************************************/ -/******************************************************************************/ - -/** - * Controls - */ - -.wrap-left { - float: left; - overflow: hidden; -} - -.wrap-right { - float: right; - overflow: hidden; -} - -.wrap-left > * { - float: left; -} - -.wrap-right > * { - float: right; -} - -@media (min-width: 960px) { - - .wrap-left { - width: 45%; - } - - .wrap-right { - width: 55%; - } -} - - -@media (max-width: 959px) { - - .wrap-left { - width: 30%; - } - - .wrap-right { - width: 70%; - } -} - - -#controls { - color: #444; - margin: 10px 0 0 0; -} - - -#controls .category { - width: 500px; - margin: 0 auto 20px; - padding: 0; - -} - -#controls .category .title { - width: 100%; - height: 1.5em; - line-height: 1.5em; - color: #AAA; - text-align: right; -} - -#controls .category > .group { - border: 1px solid #CCC; - border-radius: 3px; -} - - -/** - * Color Picker - */ - -@media (min-width: 960px) { - #controls .colorpicker { - width: 420px; - } -} - -@media (max-width: 959px) { - #controls .colorpicker { - width: 210px; - } -} - -#colorpicker { - width: 100%; - margin: 0 auto; -} - -#colorpicker .gradient { - width: 200px; - height: 200px; - margin: 5px; - background: url("https://mdn.mozillademos.org/files/5707/picker_mask_200.png"); - background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), - -moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); - background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), - -webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); - background-color: #F00; - float: left; -} - -#colorpicker .hue { - width: 200px; - height: 30px; - margin: 5px; - background: url("https://mdn.mozillademos.org/files/5701/hue.png"); - background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, - #00F 66.66%, #F0F 83.33%, #F00 100%); - background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, - #00F 66.66%, #F0F 83.33%, #F00 100%); - float: left; -} - -#colorpicker .alpha { - width: 200px; - height: 30px; - margin: 5px; - border: 1px solid #CCC; - float: left; - background: url("https://mdn.mozillademos.org/files/5705/alpha.png"); - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -#colorpicker #alpha { - width: 100%; - height: 100%; - background: url("https://mdn.mozillademos.org/files/5703/alpha_mask.png"); - background: -moz-linear-gradient(left, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 1) 100%); -} - -#colorpicker #gradient_picker { - width: 0.5em; - height: 0.5em; - border-radius: 0.4em; - border: 2px solid #CCC; - position: relative; - top: 20%; - left: 20%; -} - -#colorpicker #hue_selector, -#colorpicker #alpha_selector { - width: 3px; - height: 100%; - border: 1px solid #777; - background-color: #FFF; - position: relative; - top: -1px; - left: 0%; -} - -/* input HSV and RGB */ -#colorpicker .info { - width: 200px; - margin: 5px; - float: left; -} - -#colorpicker .info * { - float: left; -} - -#colorpicker .info input { - margin: 0; - text-align: center; - width: 30px; - -moz-user-select: text; - -webkit-user-select: text; - -ms-user-select: text; -} - -#colorpicker .info span { - height: 20px; - width: 30px; - text-align: center; - line-height: 20px; - display: block; -} - -/* Preview color */ -#colorpicker .block { - width: 95px; - height: 54px; - float: left; - position: relative; -} - -#colorpicker .preview { - margin: 5px; - border: 1px solid #CCC; - background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png"); - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -#colorpicker .preview:before { - height: 100%; - width: 50%; - left: 50%; - content: ""; - background: #FFF; - position: absolute; - z-index: 1; -} - -#colorpicker .preview > * { - width: 50%; - height: 100%; -} - -#colorpicker #output_color { - width: 100%; - height: 100%; - position: absolute; - z-index: 2; -} - -#colorpicker .block .input { - float: right; -} - -#colorpicker [data-topic="a"] > span { - width: 50px; -} - -#colorpicker [data-topic="hexa"] { - float: right; - margin: 10px 0 0 0; -} - -#colorpicker [data-topic="hexa"] > span { - display: none; -} - -#colorpicker [data-topic="hexa"] > input { - width: 85px; - padding: 2px 0; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - - -/* - * UI Components - */ - -/* Property */ - -.property { - height: 20px; - margin: 10px 0; -} - -.property * { - float: left; - height: 100%; - line-height: 100%; -} - -/* Slider */ - -#controls .ui-slider-name { - margin: 0 10px 0 0; -} - -/* - * Output code styling - */ - -#output { - position: relative; -} - -#output .menu { - max-width: 70%; - height: 20px; - position: absolute; - top: 2px; -} - -#output .button { - width: 90px; - height: 22px; - margin: 0 5px 0 0; - text-align: center; - line-height: 20px; - font-size: 14px; - color: #FFF; - background-color: #999; - border-top-left-radius: 3px; - border-top-right-radius: 3px; - bottom: -5px; - float:left; -} - -#output .button:hover { - color: #FFF; - background-color: #666; - cursor: pointer; -} - -#output .menu [data-active="true"] { - color: #777; - background-color: #FFF; - border: 1px solid #CCC; - border-bottom: none; -} - -#output .menu [data-topic="before"] { - left: 100px; -} - -#output .menu [data-topic="after"] { - left: 200px; -} - -#output .output { - width: 480px; - margin: 10px; - padding: 10px; - overflow: hidden; - color: #555; - font-size: 14px; - border: 1px dashed #CCC; - border-radius: 3px; - display: none; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - - -moz-user-select: text; - -webkit-user-select: text; - -ms-user-select: text; -} - -#output .css-property { - width: 100%; - float: left; - white-space: pre; -} - -#output .name { - width: 35%; - float: left; -} - -#output .value { - width: 65%; - float: left; -} -``` - -```js hidden - - -'use strict'; - -/** - * UI-SlidersManager - */ - -var SliderManager = (function SliderManager() { - - var subscribers = {}; - var sliders = []; - - var Slider = function(node) { - var min = node.getAttribute('data-min') | 0; - var max = node.getAttribute('data-max') | 0; - var step = node.getAttribute('data-step') | 0; - var value = node.getAttribute('data-value') | 0; - var snap = node.getAttribute('data-snap'); - var topic = node.getAttribute('data-topic'); - - this.min = min; - this.max = max > 0 ? max : 100; - this.step = step === 0 ? 1 : step; - this.value = value <= max && value >= min ? value : (min + max) / 2 | 0; - this.snap = snap === "true" ? true : false; - this.topic = topic; - this.node = node; - - var pointer = document.createElement('div'); - pointer.className = 'ui-slider-pointer'; - node.appendChild(pointer); - this.pointer = pointer; - - setMouseTracking(node, updateSlider.bind(this)); - - sliders[topic] = this; - setValue(topic, this.value); - } - - var setButtonComponent = function setButtonComponent(node) { - var type = node.getAttribute('data-type'); - var topic = node.getAttribute('data-topic'); - if (type === "sub") { - node.textContent = '-'; - node.addEventListener("click", function() { - decrement(topic); - }); - } - if (type === "add") { - node.textContent = '+'; - node.addEventListener("click", function() { - increment(topic); - }); - } - } - - var setInputComponent = function setInputComponent(node) { - var topic = node.getAttribute('data-topic'); - var unit_type = node.getAttribute('data-unit'); - - var input = document.createElement('input'); - var unit = document.createElement('span'); - unit.textContent = unit_type; - - input.setAttribute('type', 'text'); - node.appendChild(input); - node.appendChild(unit); - - input.addEventListener('click', function(e) { - this.select(); - }); - - input.addEventListener('change', function(e) { - setValue(topic, e.target.value | 0); - }); - - subscribe(topic, function(value) { - node.children[0].value = value; - }); - } - - var increment = function increment(topic) { - var slider = sliders[topic]; - if (slider === null || slider === undefined) - return; - - if (slider.value + slider.step <= slider.max) { - slider.value += slider.step; - setValue(slider.topic, slider.value) - notify.call(slider); - } - }; - - var decrement = function decrement(topic) { - var slider = sliders[topic]; - if (slider === null || slider === undefined) - return; - - if (slider.value - slider.step >= slider.min) { - slider.value -= slider.step; - setValue(topic, slider.value) - notify.call(slider); - } - } - - // this = Slider object - var updateSlider = function updateSlider(e) { - var node = this.node; - var pos = e.pageX - node.offsetLeft; - var width = node.clientWidth; - var delta = this.max - this.min; - var offset = this.pointer.clientWidth + 4; // border width * 2 - - if (pos < 0) pos = 0; - if (pos > width) pos = width; - - var value = pos * delta / width | 0; - var precision = value % this.step; - value = value - precision + this.min; - if (precision > this.step / 2) - value = value + this.step; - - if (this.snap) - pos = (value - this.min) * width / delta; - - this.pointer.style.left = pos - offset/2 + "px"; - this.value = value; - node.setAttribute('data-value', value); - notify.call(this); - } - - var setValue = function setValue(topic, value) { - var slider = sliders[topic]; - - if (value > slider.max || value < slider.min) - return; - - var delta = slider.max - slider.min; - var width = slider.node.clientWidth; - var offset = slider.pointer.clientWidth; - var pos = (value - slider.min) * width / delta; - slider.value = value; - slider.pointer.style.left = pos - offset / 2 + "px"; - slider.node.setAttribute('data-value', value); - notify.call(slider); - } - - var setMouseTracking = function setMouseTracking(elem, callback) { - elem.addEventListener("mousedown", function(e) { - callback(e); - document.addEventListener("mousemove", callback); - }); - - document.addEventListener("mouseup", function(e) { - document.removeEventListener("mousemove", callback); - }); - } - - var subscribe = function subscribe(topic, callback) { - if (subscribers[topic] === undefined) - subscribers[topic] = []; - subscribers[topic].push(callback); - } - - var unsubscribe = function unsubscribe(topic, callback) { - subscribers[topic].indexOf(callback); - subscribers[topic].splice(index, 1); - } - - var notify = function notify() { - if (subscribers[this.topic] === undefined) - return; - - for (var i in subscribers[this.topic]) { - subscribers[this.topic][i](this.value); - } - } - - var init = function init() { - var elem, size; - - elem = document.querySelectorAll('.ui-slider-btn-set'); - size = elem.length; - for (var i = 0; i < size; i++) - setButtonComponent(elem[i]); - - elem = document.querySelectorAll('.ui-slider-input'); - size = elem.length; - for (var i = 0; i < size; i++) - setInputComponent(elem[i]); - - elem = document.querySelectorAll('.ui-slider'); - size = elem.length; - for (var i = 0; i < size; i++) - new Slider(elem[i]); - } - - return { - init : init, - setValue : setValue, - subscribe : subscribe, - unsubscribe : unsubscribe - } - -})(); - -/** - * UI-ButtonManager - */ - -var ButtonManager = (function CheckBoxManager() { - - var subscribers = []; - var buttons = []; - - var CheckBox = function CheckBox(node) { - var topic = node.getAttribute('data-topic'); - var state = node.getAttribute('data-state'); - var name = node.getAttribute('data-label'); - var align = node.getAttribute('data-text-on'); - - state = (state === "true"); - - var checkbox = document.createElement("input"); - var label = document.createElement("label"); - - var id = 'checkbox-' + topic; - checkbox.id = id; - checkbox.setAttribute('type', 'checkbox'); - checkbox.checked = state; - - label.setAttribute('for', id); - if (name) { - label.className = 'text'; - if (align) - label.className += ' ' + align; - label.textContent = name; - } - - node.appendChild(checkbox); - node.appendChild(label); - - this.node = node; - this.topic = topic; - this.checkbox = checkbox; - - checkbox.addEventListener('change', function(e) { - notify.call(this); - }.bind(this)); - - buttons[topic] = this; - } - - var getNode = function getNode(topic) { - return buttons[topic].node; - } - - var setValue = function setValue(topic, value) { - try { - buttons[topic].checkbox.checked = value; - notify.call(buttons[topic]); - } - catch(error) { - console.log(error, topic, value); - } - } - - var subscribe = function subscribe(topic, callback) { - if (subscribers[topic] === undefined) - subscribers[topic] = []; - - subscribers[topic].push(callback); - } - - var unsubscribe = function unsubscribe(topic, callback) { - subscribers[topic].indexOf(callback); - subscribers[topic].splice(index, 1); - } - - var notify = function notify() { - if (subscribers[this.topic] === undefined) - return; - for (var i = 0; i < subscribers[this.topic].length; i++) - subscribers[this.topic][i](this.checkbox.checked); - } - - var init = function init() { - var elem = document.querySelectorAll('.ui-checkbox'); - var size = elem.length; - for (var i = 0; i < size; i++) - new CheckBox(elem[i]); - } - - return { - init : init, - setValue : setValue, - subscribe : subscribe, - unsubscribe : unsubscribe - } - -})(); - - -window.addEventListener("load", function(){ - BoxShadow.init(); -}); - -var BoxShadow = (function BoxShadow() { - - function getElemById(id) { - return document.getElementById(id); - } - - /** - * RGBA Color class - */ - - function Color() { - this.r = 0; - this.g = 0; - this.b = 0; - this.a = 1; - this.hue = 0; - this.saturation = 0; - this.value = 0; - } - - Color.prototype.copy = function copy(obj) { - if(obj instanceof Color !== true) { - console.log("Typeof instance not Color"); - return; - } - - this.r = obj.r; - this.g = obj.g; - this.b = obj.b; - this.a = obj.a; - this.hue = obj.hue; - this.saturation = obj.saturation; - this.value = obj.value; - } - - Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) { - if (red != undefined) - this.r = red | 0; - if (green != undefined) - this.g = green | 0; - if (blue != undefined) - this.b = blue | 0; - if (alpha != undefined) - this.a = alpha | 0; - } - - /** - * HSV/HSB (hue, saturation, value / brightness) - * @param hue 0-360 - * @param saturation 0-100 - * @param value 0-100 - */ - Color.prototype.setHSV = function setHSV(hue, saturation, value) { - this.hue = hue; - this.saturation = saturation; - this.value = value; - this.updateRGB(); - } - - Color.prototype.updateRGB = function updateRGB() { - var sat = this.saturation / 100; - var value = this.value / 100; - var C = sat * value; - var H = this.hue / 60; - var X = C * (1 - Math.abs(H % 2 - 1)); - var m = value - C; - var precision = 255; - - C = (C + m) * precision; - X = (X + m) * precision; - m = m * precision; - - if (H >= 0 && H < 1) { this.setRGBA(C, X, m); return; } - if (H >= 1 && H < 2) { this.setRGBA(X, C, m); return; } - if (H >= 2 && H < 3) { this.setRGBA(m, C, X); return; } - if (H >= 3 && H < 4) { this.setRGBA(m, X, C); return; } - if (H >= 4 && H < 5) { this.setRGBA(X, m, C); return; } - if (H >= 5 && H < 6) { this.setRGBA(C, m, X); return; } - } - - Color.prototype.updateHSV = function updateHSV() { - var red = this.r / 255; - var green = this.g / 255; - var blue = this.b / 255; - - var cmax = Math.max(red, green, blue); - var cmin = Math.min(red, green, blue); - var delta = cmax - cmin; - var hue = 0; - var saturation = 0; - - if (delta) { - if (cmax === red ) { hue = ((green - blue) / delta); } - if (cmax === green ) { hue = 2 + (blue - red) / delta; } - if (cmax === blue ) { hue = 4 + (red - green) / delta; } - if (cmax) saturation = delta / cmax; - } - - this.hue = 60 * hue | 0; - if (this.hue < 0) this.hue += 360; - this.saturation = (saturation * 100) | 0; - this.value = (cmax * 100) | 0; - } - - Color.prototype.setHexa = function setHexa(value) { - var valid = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value) - if (valid !== true) - return; - - if (value[0] === '#') - value = value.slice(1, value.length); - - if (value.length === 3) - value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,"$1$1$2$2$3$3"); - - this.r = parseInt(value.substr(0, 2), 16); - this.g = parseInt(value.substr(2, 2), 16); - this.b = parseInt(value.substr(4, 2), 16); - - this.alpha = 1; - } - - Color.prototype.getHexa = function getHexa() { - var r = this.r.toString(16); - var g = this.g.toString(16); - var b = this.b.toString(16); - if (this.r < 16) r = '0' + r; - if (this.g < 16) g = '0' + g; - if (this.b < 16) b = '0' + b; - var value = '#' + r + g + b; - return value.toUpperCase(); - } - - Color.prototype.getRGBA = function getRGBA() { - - var rgb = "(" + this.r + ", " + this.g + ", " + this.b; - var a = ''; - var v = ''; - if (this.a !== 1) { - a = 'a'; - v = ', ' + this.a; - } - - var value = "rgb" + a + rgb + v + ")"; - return value; - } - - Color.prototype.getColor = function getColor() { - if (this.a | 0 === 1) - return this.getHexa(); - return this.getRGBA(); - } - - /** - * Shadow Object - */ - function Shadow() { - this.inset = false; - this.posX = 5; - this.posY = -5; - this.blur = 5; - this.spread = 0; - this.color = new Color(); - - var hue = (Math.random() * 360) | 0; - var saturation = (Math.random() * 75) | 0; - var value = (Math.random() * 50 + 50) | 0; - this.color.setHSV(hue, saturation, value, 1); - } - - Shadow.prototype.computeCSS = function computeCSS() { - var value = ""; - if (this.inset === true) - value += "inset "; - value += this.posX + "px "; - value += this.posY + "px "; - value += this.blur + "px "; - value += this.spread + "px "; - value += this.color.getColor(); - - return value; - } - - Shadow.prototype.toggleInset = function toggleInset(value) { - if (value !== undefined || typeof value === "boolean") - this.inset = value; - else - this.inset = this.inset === true ? false : true; - } - - Shadow.prototype.copy = function copy(obj) { - if(obj instanceof Shadow !== true) { - console.log("Typeof instance not Shadow"); - return; - } - - this.inset = obj.inset; - this.posX = obj.posX; - this.posY = obj.posY; - this.blur = obj.blur; - this.spread = obj.spread; - this.color.copy(obj.color); - } - - /** - * Color Picker - */ - var ColoPicker = (function ColoPicker() { - - var colorpicker; - var hue_area; - var gradient_area; - var alpha_area; - var gradient_picker; - var hue_selector; - var alpha_selector; - var pick_object; - var info_rgb; - var info_hsv; - var info_hexa; - var output_color; - var color = new Color(); - var subscribers = []; - - var updateColor = function updateColor(e) { - var x = e.pageX - gradient_area.offsetLeft; - var y = e.pageY - gradient_area.offsetTop; - - // width and height should be the same - var size = gradient_area.clientWidth; - - if (x > size) - x = size; - if (y > size) - y = size; - - if (x < 0) x = 0; - if (y < 0) y = 0; - - var value = 100 - (y * 100 / size) | 0; - var saturation = x * 100 / size | 0; - - color.setHSV(color.hue, saturation, value); - // should update just - // color pointer location - updateUI(); - notify("color", color); - } - - var updateHue = function updateHue(e) { - var x = e.pageX - hue_area.offsetLeft; - var width = hue_area.clientWidth; - - if (x < 0) x = 0; - if (x > width) x = width; - - var hue = ((360 * x) / width) | 0; - if (hue === 360) hue = 359; - - color.setHSV(hue, color.saturation, color.value); - - // should update just - // hue pointer location - // picker area background - // alpha area background - updateUI(); - notify("color", color); - } - - var updateAlpha = function updateAlpha(e) { - var x = e.pageX - alpha_area.offsetLeft; - var width = alpha_area.clientWidth; - - if (x < 0) x = 0; - if (x > width) x = width; - - color.a = (x / width).toFixed(2); - - // should update just - // alpha pointer location - updateUI(); - notify("color", color); - } - - var setHueGfx = function setHueGfx(hue) { - var sat = color.saturation; - var val = color.value; - var alpha = color.a; - - color.setHSV(hue, 100, 100); - gradient_area.style.backgroundColor = color.getHexa(); - - color.a = 0; - var start = color.getRGBA(); - color.a = 1; - var end = color.getRGBA(); - color.a = alpha; - - var gradient = '-moz-linear-gradient(left, ' + start + '0%, ' + end + ' 100%)'; - alpha_area.style.background = gradient; - } - - var updateUI = function updateUI() { - var x, y; // coordinates - var size; // size of the area - var offset; // pointer graphic selector offset - - // Set color pointer location - size = gradient_area.clientWidth; - offset = gradient_picker.clientWidth / 2 + 2; - - x = (color.saturation * size / 100) | 0; - y = size - (color.value * size / 100) | 0; - - gradient_picker.style.left = x - offset + "px"; - gradient_picker.style.top = y - offset + "px"; - - // Set hue pointer location - size = hue_area.clientWidth; - offset = hue_selector.clientWidth/2; - x = (color.hue * size / 360 ) | 0; - hue_selector.style.left = x - offset + "px"; - - // Set alpha pointer location - size = alpha_area.clientWidth; - offset = alpha_selector.clientWidth/2; - x = (color.a * size) | 0; - alpha_selector.style.left = x - offset + "px"; - - // Set picker area background - var nc = new Color(); - nc.copy(color); - if (nc.hue === 360) nc.hue = 0; - nc.setHSV(nc.hue, 100, 100); - gradient_area.style.backgroundColor = nc.getHexa(); - - // Set alpha area background - nc.copy(color); - nc.a = 0; - var start = nc.getRGBA(); - nc.a = 1; - var end = nc.getRGBA(); - var gradient = '-moz-linear-gradient(left, ' + start + '0%, ' + end + ' 100%)'; - alpha_area.style.background = gradient; - - // Update color info - notify("color", color); - notify("hue", color.hue); - notify("saturation", color.saturation); - notify("value", color.value); - notify("r", color.r); - notify("g", color.g); - notify("b", color.b); - notify("a", color.a); - notify("hexa", color.getHexa()); - output_color.style.backgroundColor = color.getRGBA(); - } - - var setInputComponent = function setInputComponent(node) { - var topic = node.getAttribute('data-topic'); - var title = node.getAttribute('data-title'); - var action = node.getAttribute('data-action'); - title = title === null ? '' : title; - - var input = document.createElement('input'); - var info = document.createElement('span'); - info.textContent = title; - - input.setAttribute('type', 'text'); - input.setAttribute('data-action', 'set-' + action + '-' + topic); - node.appendChild(info); - node.appendChild(input); - - input.addEventListener('click', function(e) { - this.select(); - }); - - input.addEventListener('change', function(e) { - if (action === 'HSV') - inputChangeHSV(topic); - if (action === 'RGB') - inputChangeRGB(topic); - if (action === 'alpha') - inputChangeAlpha(topic); - if (action === 'hexa') - inputChangeHexa(topic); - }); - - subscribe(topic, function(value) { - node.children[1].value = value; - }); - } - - var inputChangeHSV = function actionHSV(topic) { - var selector = "[data-action='set-HSV-" + topic + "']"; - var node = document.querySelector("#colorpicker " + selector); - var value = parseInt(node.value); - - if (typeof value === 'number' && isNaN(value) === false && - value >= 0 && value < 360) - color[topic] = value; - - color.updateRGB(); - updateUI(); - } - - var inputChangeRGB = function inputChangeRGB(topic) { - var selector = "[data-action='set-RGB-" + topic + "']"; - var node = document.querySelector("#colorpicker " + selector); - var value = parseInt(node.value); - - if (typeof value === 'number' && isNaN(value) === false && - value >= 0 && value <= 255) - color[topic] = value; - - color.updateHSV(); - updateUI(); - } - - var inputChangeAlpha = function inputChangeAlpha(topic) { - var selector = "[data-action='set-alpha-" + topic + "']"; - var node = document.querySelector("#colorpicker " + selector); - var value = parseFloat(node.value); - - if (typeof value === 'number' && isNaN(value) === false && - value >= 0 && value <= 1) - color.a = value.toFixed(2); - - updateUI(); - } - - var inputChangeHexa = function inputChangeHexa(topic) { - var selector = "[data-action='set-hexa-" + topic + "']"; - var node = document.querySelector("#colorpicker " + selector); - var value = node.value; - color.setHexa(value); - color.updateHSV(); - updateUI(); - } - - var setMouseTracking = function setMouseTracking(elem, callback) { - - elem.addEventListener("mousedown", function(e) { - callback(e); - document.addEventListener("mousemove", callback); - }); - - document.addEventListener("mouseup", function(e) { - document.removeEventListener("mousemove", callback); - }); - } - - /* - * Observer - */ - var setColor = function setColor(obj) { - if(obj instanceof Color !== true) { - console.log("Typeof instance not Color"); - return; - } - color.copy(obj); - updateUI(); - } - - var subscribe = function subscribe(topic, callback) { - if (subscribers[topic] === undefined) - subscribers[topic] = []; - - subscribers[topic].push(callback); - } - - var unsubscribe = function unsubscribe(callback) { - subscribers.indexOf(callback); - subscribers.splice(index, 1); - } - - var notify = function notify(topic, value) { - for (var i in subscribers[topic]) - subscribers[topic][i](value); - } - - var init = function init() { - colorpicker = getElemById("colorpicker"); - hue_area = getElemById("hue"); - gradient_area = getElemById("gradient"); - alpha_area = getElemById("alpha"); - gradient_picker = getElemById("gradient_picker"); - hue_selector = getElemById("hue_selector"); - alpha_selector = getElemById("alpha_selector"); - output_color = getElemById("output_color"); - - var elem = document.querySelectorAll('#colorpicker .input'); - var size = elem.length; - for (var i = 0; i < size; i++) - setInputComponent(elem[i]); - - setMouseTracking(gradient_area, updateColor); - setMouseTracking(hue_area, updateHue); - setMouseTracking(alpha_area, updateAlpha); - - } - - return { - init : init, - setColor : setColor, - subscribe : subscribe, - unsubscribe : unsubscribe - } - - })(); - - /** - * Shadow dragging - */ - var PreviewMouseTracking = (function Drag() { - var active = false; - var lastX = 0; - var lastY = 0; - var subscribers = []; - - var init = function init(id) { - var elem = getElemById(id); - elem.addEventListener('mousedown', dragStart, false); - document.addEventListener('mouseup', dragEnd, false); - } - - var dragStart = function dragStart(e) { - if (e.button !== 0) - return; - - active = true; - lastX = e.clientX; - lastY = e.clientY; - document.addEventListener('mousemove', mouseDrag, false); - } - - var dragEnd = function dragEnd(e) { - if (e.button !== 0) - return; - - if (active === true) { - active = false; - document.removeEventListener('mousemove', mouseDrag, false); - } - } - - var mouseDrag = function mouseDrag(e) { - notify(e.clientX - lastX, e.clientY - lastY); - lastX = e.clientX; - lastY = e.clientY; - } - - var subscribe = function subscribe(callback) { - subscribers.push(callback); - } - - var unsubscribe = function unsubscribe(callback) { - var index = subscribers.indexOf(callback); - subscribers.splice(index, 1); - } - - var notify = function notify(deltaX, deltaY) { - for (var i in subscribers) - subscribers[i](deltaX, deltaY); - } - - return { - init : init, - subscribe : subscribe, - unsubscribe : unsubscribe - } - - })(); - - /* - * Element Class - */ - var CssClass = function CssClass(id) { - this.left = 0; - this.top = 0; - this.rotate = 0; - this.width = 300; - this.height = 100; - this.display = true; - this.border = true; - this.zIndex = -1; - this.bgcolor = new Color(); - this.id = id; - this.node = getElemById('obj-' + id); - this.object = getElemById(id); - this.shadowID = null; - this.shadows = [] - this.render = []; - this.init(); - } - - CssClass.prototype.init = function init() { - this.left = ((this.node.parentNode.clientWidth - this.node.clientWidth) / 2) | 0; - this.top = ((this.node.parentNode.clientHeight - this.node.clientHeight) / 2) | 0; - - this.setTop(this.top); - this.setLeft(this.left); - this.setHeight(this.height); - this.setWidth(this.width); - this.bgcolor.setHSV(0, 0, 100); - this.updateBgColor(this.bgcolor); - } - - CssClass.prototype.updatePos = function updatePos(deltaX, deltaY) { - this.left += deltaX; - this.top += deltaY; - this.node.style.top = this.top + "px"; - this.node.style.left = this.left + "px"; - SliderManager.setValue("left", this.left); - SliderManager.setValue("top", this.top); - } - - CssClass.prototype.setLeft = function setLeft(value) { - this.left = value; - this.node.style.left = this.left + "px"; - OutputManager.updateProperty(this.id, 'left', this.left + 'px'); - } - - CssClass.prototype.setTop = function setTop(value) { - this.top = value; - this.node.style.top = this.top + 'px'; - OutputManager.updateProperty(this.id, 'top', this.top + 'px'); - } - - CssClass.prototype.setWidth = function setWidth(value) { - this.width = value; - this.node.style.width = this.width + 'px'; - OutputManager.updateProperty(this.id, 'width', this.width + 'px'); - } - - CssClass.prototype.setHeight = function setHeight(value) { - this.height = value; - this.node.style.height = this.height + 'px'; - OutputManager.updateProperty(this.id, 'height', this.height + 'px'); - } - - // Browser support - CssClass.prototype.setRotate = function setRotate(value) { - var cssvalue = 'rotate(' + value +'deg)'; - - this.node.style.transform = cssvalue; - this.node.style.webkitTransform = cssvalue; - this.node.style.msTransform = cssvalue; - - if (value !== 0) { - if (this.rotate === 0) { - OutputManager.toggleProperty(this.id, 'transform', true); - OutputManager.toggleProperty(this.id, '-webkit-transform', true); - OutputManager.toggleProperty(this.id, '-ms-transform', true); - } - } - else { - OutputManager.toggleProperty(this.id, 'transform', false); - OutputManager.toggleProperty(this.id, '-webkit-transform', false); - OutputManager.toggleProperty(this.id, '-ms-transform', false); - } - - OutputManager.updateProperty(this.id, 'transform', cssvalue); - OutputManager.updateProperty(this.id, '-webkit-transform', cssvalue); - OutputManager.updateProperty(this.id, '-ms-transform', cssvalue); - this.rotate = value; - } - - CssClass.prototype.setzIndex = function setzIndex(value) { - this.node.style.zIndex = value; - OutputManager.updateProperty(this.id, 'z-index', value); - this.zIndex = value; - } - - CssClass.prototype.toggleDisplay = function toggleDisplay(value) { - if (typeof value !== "boolean" || this.display === value) - return; - - this.display = value; - var display = this.display === true ? "block" : "none"; - this.node.style.display = display; - this.object.style.display = display; - } - - CssClass.prototype.toggleBorder = function toggleBorder(value) { - if (typeof value !== "boolean" || this.border === value) - return; - - this.border = value; - var border = this.border === true ? "1px solid #CCC" : "none"; - this.node.style.border = border; - } - - CssClass.prototype.updateBgColor = function updateBgColor(color) { - this.bgcolor.copy(color); - this.node.style.backgroundColor = color.getColor(); - OutputManager.updateProperty(this.id, 'background-color', color.getColor()); - } - - CssClass.prototype.updateShadows = function updateShadows() { - if (this.render.length === 0) - OutputManager.toggleProperty(this.id, 'box-shadow', false); - if (this.render.length === 1) - OutputManager.toggleProperty(this.id, 'box-shadow', true); - - this.node.style.boxShadow = this.render.join(", "); - OutputManager.updateProperty(this.id, 'box-shadow', this.render.join(", \n")); - - } - - - /** - * Tool Manager - */ - var Tool = (function Tool() { - - var preview; - var classes = []; - var active = null; - var animate = false; - - /* - * Toll actions - */ - var addCssClass = function addCssClass(id) { - classes[id] = new CssClass(id); - } - - var setActiveClass = function setActiveClass(id) { - active = classes[id]; - active.shadowID = null; - ColoPicker.setColor(classes[id].bgcolor); - SliderManager.setValue("top", active.top); - SliderManager.setValue("left", active.left); - SliderManager.setValue("rotate", active.rotate); - SliderManager.setValue("z-index", active.zIndex); - SliderManager.setValue("width", active.width); - SliderManager.setValue("height", active.height); - ButtonManager.setValue("border-state", active.border); - active.updateShadows(); - } - - var disableClass = function disableClass(topic) { - classes[topic].toggleDisplay(false); - ButtonManager.setValue(topic, false); - } - - var addShadow = function addShadow(position) { - if (animate === true) - return -1; - - active.shadows.splice(position, 0, new Shadow()); - active.render.splice(position, 0, null); - } - - var swapShadow = function swapShadow(id1, id2) { - var x = active.shadows[id1]; - active.shadows[id1] = active.shadows[id2]; - active.shadows[id2] = x; - updateShadowCSS(id1); - updateShadowCSS(id2); - } - - var deleteShadow = function deleteShadow(position) { - active.shadows.splice(position, 1); - active.render.splice(position, 1); - active.updateShadows(); - } - - var setActiveShadow = function setActiveShadow(id, glow) { - active.shadowID = id; - ColoPicker.setColor(active.shadows[id].color); - ButtonManager.setValue("inset", active.shadows[id].inset); - SliderManager.setValue("blur", active.shadows[id].blur); - SliderManager.setValue("spread", active.shadows[id].spread); - SliderManager.setValue("posX", active.shadows[id].posX); - SliderManager.setValue("posY", active.shadows[id].posY); - if (glow === true) - addGlowEffect(id); - } - - var addGlowEffect = function addGlowEffect(id) { - if (animate === true) - return; - - animate = true; - var store = new Shadow(); - var shadow = active.shadows[id]; - - store.copy(shadow); - shadow.color.setRGBA(40, 125, 200, 1); - shadow.blur = 10; - shadow.spread = 10; - - active.node.style.transition = "box-shadow 0.2s"; - updateShadowCSS(id); - - setTimeout(function() { - shadow.copy(store); - updateShadowCSS(id); - setTimeout(function() { - active.node.style.removeProperty("transition"); - animate = false; - }, 100); - }, 200); - } - - var updateActivePos = function updateActivePos(deltaX, deltaY) { - if (active.shadowID === null) - active.updatePos(deltaX, deltaY); - else - updateShadowPos(deltaX, deltaY); - } - - /* - * Shadow properties - */ - var updateShadowCSS = function updateShadowCSS(id) { - active.render[id] = active.shadows[id].computeCSS(); - active.updateShadows(); - } - - var toggleShadowInset = function toggleShadowInset(value) { - if (active.shadowID === null) - return; - active.shadows[active.shadowID].toggleInset(value); - updateShadowCSS(active.shadowID); - } - - var updateShadowPos = function updateShadowPos(deltaX, deltaY) { - var shadow = active.shadows[active.shadowID]; - shadow.posX += deltaX; - shadow.posY += deltaY; - SliderManager.setValue("posX", shadow.posX); - SliderManager.setValue("posY", shadow.posY); - updateShadowCSS(active.shadowID); - } - - var setShadowPosX = function setShadowPosX(value) { - if (active.shadowID === null) - return; - active.shadows[active.shadowID].posX = value; - updateShadowCSS(active.shadowID); - } - - var setShadowPosY = function setShadowPosY(value) { - if (active.shadowID === null) - return; - active.shadows[active.shadowID].posY = value; - updateShadowCSS(active.shadowID); - } - - var setShadowBlur = function setShadowBlur(value) { - if (active.shadowID === null) - return; - active.shadows[active.shadowID].blur = value; - updateShadowCSS(active.shadowID); - } - - var setShadowSpread = function setShadowSpread(value) { - if (active.shadowID === null) - return; - active.shadows[active.shadowID].spread = value; - updateShadowCSS(active.shadowID); - } - - var updateShadowColor = function updateShadowColor(color) { - active.shadows[active.shadowID].color.copy(color); - updateShadowCSS(active.shadowID); - } - - /* - * Element Properties - */ - var updateColor = function updateColor(color) { - if (active.shadowID === null) - active.updateBgColor(color); - else - updateShadowColor(color); - } - - var init = function init() { - preview = getElemById("preview"); - - ColoPicker.subscribe("color", updateColor); - PreviewMouseTracking.subscribe(updateActivePos); - - // Affects shadows - ButtonManager.subscribe("inset", toggleShadowInset); - SliderManager.subscribe("posX", setShadowPosX); - SliderManager.subscribe("posY", setShadowPosY); - SliderManager.subscribe("blur", setShadowBlur); - SliderManager.subscribe("spread", setShadowSpread); - - // Affects element - SliderManager.subscribe("top", function(value){ - active.setTop(value); - }); - SliderManager.subscribe("left", function(value){ - active.setLeft(value); - }); - SliderManager.subscribe("rotate", function(value) { - if (active == classes["element"]) - return; - active.setRotate(value); - }); - - SliderManager.subscribe("z-index", function(value) { - if (active == classes["element"]) - return; - active.setzIndex(value); - }); - - SliderManager.subscribe("width", function(value) { - active.setWidth(value) - }); - - SliderManager.subscribe("height", function(value) { - active.setHeight(value) - }); - - // Actions - classes['before'].top = -30; - classes['before'].left = -30; - classes['after'].top = 30; - classes['after'].left = 30; - classes['before'].toggleDisplay(false); - classes['after'].toggleDisplay(false); - ButtonManager.setValue('before', false); - ButtonManager.setValue('after', false); - - ButtonManager.subscribe("before", classes['before'].toggleDisplay.bind(classes['before'])); - ButtonManager.subscribe("after", classes['after'].toggleDisplay.bind(classes['after'])); - - ButtonManager.subscribe("border-state", function(value) { - active.toggleBorder(value); - }); - - } - - return { - init : init, - addShadow : addShadow, - swapShadow : swapShadow, - addCssClass : addCssClass, - disableClass : disableClass, - deleteShadow : deleteShadow, - setActiveClass : setActiveClass, - setActiveShadow : setActiveShadow - } - - })(); - - /** - * Layer Manager - */ - var LayerManager = (function LayerManager() { - var stacks = []; - var active = { - node : null, - stack : null - } - var elements = {}; - - var mouseEvents = function mouseEvents(e) { - var node = e.target; - var type = node.getAttribute('data-type'); - - if (type === 'subject') - setActiveStack(stacks[node.id]); - - if (type === 'disable') { - Tool.disableClass(node.parentNode.id); - setActiveStack(stacks['element']); - } - - if (type === 'add') - active.stack.addLayer(); - - if (type === 'layer') - active.stack.setActiveLayer(node); - - if (type === 'delete') - active.stack.deleteLayer(node.parentNode); - - if (type === 'move-up') - active.stack.moveLayer(1); - - if (type === 'move-down') - active.stack.moveLayer(-1); - } - - var setActiveStack = function setActiveStack(stackObj) { - active.stack.hide(); - active.stack = stackObj; - active.stack.show(); - } - - /* - * Stack object - */ - var Stack = function Stack(subject) { - var S = document.createElement('div'); - var title = document.createElement('div'); - var stack = document.createElement('div'); - - S.className = 'container'; - stack.className = 'stack'; - title.className = 'title'; - title.textContent = subject.getAttribute('data-title'); - S.appendChild(title); - S.appendChild(stack); - - this.id = subject.id; - this.container = S; - this.stack = stack; - this.subject = subject; - this.order = []; - this.uid = 0; - this.count = 0; - this.layer = null; - this.layerID = 0; - } - - Stack.prototype.addLayer = function addLayer() { - if (Tool.addShadow(this.layerID) == -1) - return; - - var uid = this.getUID(); - var layer = this.createLayer(uid); - - if (this.layer === null && this.stack.children.length >= 1) - this.layer = this.stack.children[0]; - - this.stack.insertBefore(layer, this.layer); - this.order.splice(this.layerID, 0, uid); - this.count++; - this.setActiveLayer(layer); - } - - Stack.prototype.createLayer = function createLayer(uid) { - var layer = document.createElement('div'); - var del = document.createElement('span'); - - layer.className = 'node'; - layer.setAttribute('data-shid', uid); - layer.setAttribute('data-type', 'layer'); - layer.textContent = 'Ombre ' + uid; - - del.className = 'delete'; - del.setAttribute('data-type', 'delete'); - - layer.appendChild(del); - return layer; - } - - Stack.prototype.getUID = function getUID() { - return this.uid++; - } - - // SOLVE IE BUG - Stack.prototype.moveLayer = function moveLayer(direction) { - if (this.count <= 1 || this.layer === null) - return; - if (direction === -1 && this.layerID === (this.count - 1) ) - return; - if (direction === 1 && this.layerID === 0 ) - return; - - if (direction === -1) { - var before = null; - Tool.swapShadow(this.layerID, this.layerID + 1); - this.swapOrder(this.layerID, this.layerID + 1); - this.layerID += 1; - - if (this.layerID + 1 !== this.count) - before = this.stack.children[this.layerID + 1]; - - this.stack.insertBefore(this.layer, before); - Tool.setActiveShadow(this.layerID, false); - } - - if (direction === 1) { - Tool.swapShadow(this.layerID, this.layerID - 1); - this.swapOrder(this.layerID, this.layerID - 1); - this.layerID -= 1; - this.stack.insertBefore(this.layer, this.stack.children[this.layerID]); - Tool.setActiveShadow(this.layerID, false); - } - } - - Stack.prototype.swapOrder = function swapOrder(pos1, pos2) { - var x = this.order[pos1]; - this.order[pos1] = this.order[pos2]; - this.order[pos2] = x; - } - - Stack.prototype.deleteLayer = function deleteLayer(node) { - var shadowID = node.getAttribute('data-shid') | 0; - var index = this.order.indexOf(shadowID); - this.stack.removeChild(this.stack.children[index]); - this.order.splice(index, 1); - this.count--; - - Tool.deleteShadow(index); - - if (index > this.layerID) - return; - - if (index == this.layerID) { - if (this.count >= 1) { - this.layerID = 0; - this.setActiveLayer(this.stack.children[0], true); - } - else { - this.layer = null; - this.show(); - } - } - - if (index < this.layerID) { - this.layerID--; - Tool.setActiveShadow(this.layerID, true); - } - - } - - Stack.prototype.setActiveLayer = function setActiveLayer(node) { - elements.shadow_properties.style.display = 'block'; - elements.element_properties.style.display = 'none'; - - if (this.layer) - this.layer.removeAttribute('data-active'); - - this.layer = node; - this.layer.setAttribute('data-active', 'layer'); - - var shadowID = node.getAttribute('data-shid') | 0; - this.layerID = this.order.indexOf(shadowID); - Tool.setActiveShadow(this.layerID, true); - } - - Stack.prototype.unsetActiveLayer = function unsetActiveLayer() { - if (this.layer) - this.layer.removeAttribute('data-active'); - - this.layer = null; - this.layerID = 0; - } - - Stack.prototype.hide = function hide() { - this.unsetActiveLayer(); - this.subject.removeAttribute('data-active'); - var style = this.container.style; - style.left = '100%'; - style.zIndex = '0'; - } - - Stack.prototype.show = function show() { - elements.shadow_properties.style.display = 'none'; - elements.element_properties.style.display = 'block'; - - if (this.id === 'element') { - elements.zIndex.style.display = 'none'; - elements.transform_rotate.style.display = 'none'; - } - else { - elements.zIndex.style.display = 'block'; - elements.transform_rotate.style.display = 'block'; - } - - this.subject.setAttribute('data-active', 'subject'); - var style = this.container.style; - style.left = '0'; - style.zIndex = '10'; - Tool.setActiveClass(this.id); - } - - function init() { - - var elem, size; - var layerManager = getElemById("layer_manager"); - var layerMenu = getElemById("layer_menu"); - var container = getElemById("stack_container"); - - elements.shadow_properties = getElemById('shadow_properties'); - elements.element_properties = getElemById('element_properties'); - elements.transform_rotate = getElemById('transform_rotate'); - elements.zIndex = getElemById('z-index'); - - elem = document.querySelectorAll('#layer_menu [data-type="subject"]'); - size = elem.length; - - for (var i = 0; i < size; i++) { - var S = new Stack(elem[i]); - stacks[elem[i].id] = S; - container.appendChild(S.container); - Tool.addCssClass(elem[i].id); - } - - active.stack = stacks['element']; - stacks['element'].show(); - - layerManager.addEventListener("click", mouseEvents); - layerMenu.addEventListener("click", mouseEvents); - - ButtonManager.subscribe("before", function(value) { - if (value === false && active.stack === stacks['before']) - setActiveStack(stacks['element']) - if (value === true && active.stack !== stacks['before']) - setActiveStack(stacks['before']) - }); - - ButtonManager.subscribe("after", function(value) { - if (value === false && active.stack === stacks['after']) - setActiveStack(stacks['element']) - if (value === true && active.stack !== stacks['after']) - setActiveStack(stacks['after']) - }); - } - - return { - init : init - } - })(); - - /* - * OutputManager - */ - var OutputManager = (function OutputManager() { - var classes = []; - var buttons = []; - var active = null; - var menu = null; - var button_offset = 0; - - var crateOutputNode = function(topic, property) { - - var prop = document.createElement('div'); - var name = document.createElement('span'); - var value = document.createElement('span'); - - var pmatch = property.match(/(^([a-z0-9\-]*)=\[([a-z0-9\-\"]*)\])|^([a-z0-9\-]*)/i); - - name.textContent = '\t' + pmatch[4]; - - if (pmatch[3] !== undefined) { - name.textContent = '\t' + pmatch[2]; - value.textContent = pmatch[3] + ';'; - } - - name.textContent += ': '; - prop.className = 'css-property'; - name.className = 'name'; - value.className = 'value'; - prop.appendChild(name); - prop.appendChild(value); - - classes[topic].node.appendChild(prop); - classes[topic].line[property] = prop; - classes[topic].prop[property] = value; - } - - var OutputClass = function OutputClass(node) { - var topic = node.getAttribute('data-topic'); - var prop = node.getAttribute('data-prop'); - var name = node.getAttribute('data-name'); - var properties = prop.split(' '); - - classes[topic] = {}; - classes[topic].node = node; - classes[topic].prop = []; - classes[topic].line = []; - classes[topic].button = new Button(topic); - - var open_decl = document.createElement('div'); - var end_decl = document.createElement('div'); - - open_decl.textContent = name + ' {'; - end_decl.textContent = '}'; - node.appendChild(open_decl); - - for (var i in properties) - crateOutputNode(topic, properties[i]); - - node.appendChild(end_decl); - } - - var Button = function Button(topic) { - var button = document.createElement('div'); - - button.className = 'button'; - button.textContent = topic; - button.style.left = button_offset + 'px'; - button_offset += 100; - - button.addEventListener("click", function() { - toggleDisplay(topic); - }) - - menu.appendChild(button); - return button; - } - - var toggleDisplay = function toggleDisplay(topic) { - active.button.removeAttribute('data-active'); - active.node.style.display = 'none'; - active = classes[topic]; - active.node.style.display = 'block'; - active.button.setAttribute('data-active', 'true'); - } - - var toggleButton = function toggleButton(topic, value) { - var display = (value === true) ? 'block' : 'none'; - classes[topic].button.style.display = display; - - if (value === true) - toggleDisplay(topic); - else - toggleDisplay('element'); - } - - var updateProperty = function updateProperty(topic, property, data) { - try { - classes[topic].prop[property].textContent = data + ';'; - } - catch(error) { - // console.log("ERROR undefined : ", topic, property, data); - } - } - - var toggleProperty = function toggleProperty(topic, property, value) { - var display = (value === true) ? 'block' : 'none'; - try { - classes[topic].line[property].style.display = display; - } - catch(error) { - // console.log("ERROR undefined : ",classes, topic, property, value); - } - } - - var init = function init() { - - menu = getElemById('menu'); - - var elem = document.querySelectorAll('#output .output'); - var size = elem.length; - for (var i = 0; i < size; i++) - OutputClass(elem[i]); - - active = classes['element']; - toggleDisplay('element'); - - ButtonManager.subscribe("before", function(value) { - toggleButton('before', value); - }); - - ButtonManager.subscribe("after", function(value) { - toggleButton('after', value); - }); - } - - return { - init : init, - updateProperty : updateProperty, - toggleProperty : toggleProperty - } - - })(); - - - /** - * Init Tool - */ - var init = function init() { - ButtonManager.init(); - OutputManager.init(); - ColoPicker.init(); - SliderManager.init(); - LayerManager.init(); - PreviewMouseTracking.init("preview"); - Tool.init(); - } - - return { - init : init - } - -})(); -``` - -{{EmbedLiveSample('box-shadow_generator', '100%', '1100px', '')}} +{{EmbedGHLiveSample("css-examples/tools/box-shadow-generator/", '100%', 900)}} ## Voir aussi diff --git a/files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md b/files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md index af2dc6baba..418c5a9568 100644 --- a/files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md +++ b/files/fr/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.md @@ -1,22 +1,18 @@ --- title: Utiliser plusieurs arrière-plans slug: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds -tags: - - CSS - - Guide - - Reference translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Utiliser_plusieurs_arrière-plans --- {{CSSRef}} -Avec [CSS3](/fr/docs/Web/CSS/CSS3), on peut appliquer plusieurs arrière-plans à des éléments. Ceux-ci seront empilés les uns sur les autres (le premier de la liste étant le plus « haut » dans la pile et le dernier étant le plus « bas ». Seul le dernier arrière-plan peut décrire une couleur. +Avec [CSS](/fr/docs/Web/CSS), on peut appliquer plusieurs arrière-plans à des éléments. Ceux-ci seront empilés les uns sur les autres (le premier de la liste étant le plus « haut » dans la pile et le dernier étant le plus « bas ». Seul le dernier arrière-plan peut décrire une couleur. Pour cela, il suffit simplement d'utiliser une liste de valeur avec {{cssxref("background")}} : ```css .maClasse { - background: background1, background 2, ..., backgroundN; + background: background1, background2, ..., backgroundN; } ``` @@ -46,7 +42,7 @@ Dans cet exemple, on cumule trois arrière-plans : le logo de Firefox, un dégra ### Résultat -{{EmbedLiveSample('Exemple','100%','400')}} +{{EmbedLiveSample('Exemples','100%','400')}} Comme on peut le voir ici, le logo qui est le premier élément de la liste apparaît en dessus, il est suivi par le dégradé puis par les bulles. Chacune des propriétés ({{cssxref("background-repeat")}} et {{cssxref("background-position")}}) s'applique aux arrière-plans correspondant (la première valeur de la liste pour le premier arrière-plan, etc.). diff --git a/files/fr/web/css/css_colors/color_picker_tool/index.md b/files/fr/web/css/css_colors/color_picker_tool/index.md index 73a7886456..0ef84de19a 100644 --- a/files/fr/web/css/css_colors/color_picker_tool/index.md +++ b/files/fr/web/css/css_colors/color_picker_tool/index.md @@ -1,3253 +1,8 @@ --- title: Sélecteur de couleurs CSS slug: Web/CSS/CSS_Colors/Color_picker_tool -tags: - - CSS - - Outil translation_of: Web/CSS/CSS_Colors/Color_picker_tool original_slug: Web/CSS/Couleurs_CSS/Sélecteur_de_couleurs --- -```html hidden - <div id="container"> - <div id="palette" class="block"> - <div id="color-palette"></div> - <div id="color-info"> - <div class="title">Couleurs CSS </div> - </div> - </div> - <div id="picker" class="block"> - <div class="ui-color-picker" data-topic="picker" data-mode="HSL"></div> - <div id="picker-samples" sample-id="master"></div> - <div id="controls"> - <div id="delete"> - <div id="trash-can"></div> - </div> - <div id="void-sample" class="icon"></div> - </div> - </div> - - <div id="canvas" data-tutorial="drop"> - <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index" - data-max="20" data-sensivity="10"></div> - </div> - </div> - -/* - * COLOR PICKER TOOL - */ - -.ui-color-picker { - width: 420px; - margin: 0; - border: 1px solid #DDD; - background-color: #FFF; - display: table; - - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.ui-color-picker .picking-area { - width: 198px; - height: 198px; - margin: 5px; - border: 1px solid #DDD; - position: relative; - float: left; - display: table; -} - -.ui-color-picker .picking-area:hover { - cursor: default; -} - -/* HSV format - Hue-Saturation-Value(Brightness) */ -.ui-color-picker .picking-area { - background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center; - - background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), - -moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); - background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), - -webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); - background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), - -ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); - background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), - -o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%); - - background-color: #F00; -} - -/* HSL format - Hue-Saturation-Lightness */ -.ui-color-picker[data-mode='HSL'] .picking-area { - background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, - hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), - -moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); - background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, - hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), - -webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); - background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, - hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), - -ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); - background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, - hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), - -o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); - background-color: #F00; -} - -.ui-color-picker .picker { - width: 10px; - height: 10px; - border-radius: 50%; - border: 1px solid #FFF; - position: absolute; - top: 45%; - left: 45%; -} - -.ui-color-picker .picker:before { - width: 8px; - height: 8px; - content: ""; - position: absolute; - border: 1px solid #999; - border-radius: 50%; -} - -.ui-color-picker .hue, -.ui-color-picker .alpha { - width: 198px; - height: 28px; - margin: 5px; - border: 1px solid #FFF; - float: left; -} - -.ui-color-picker .hue { - background: url("https://mdn.mozillademos.org/files/5701/hue.png") center; - background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, - #00F 66.66%, #F0F 83.33%, #F00 100%); - background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, - #00F 66.66%, #F0F 83.33%, #F00 100%); - background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, - #00F 66.66%, #F0F 83.33%, #F00 100%); - background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, - #00F 66.66%, #F0F 83.33%, #F00 100%); -} - -.ui-color-picker .alpha { - border: 1px solid #CCC; - background: url("https://mdn.mozillademos.org/files/5705/alpha.png"); -} - -.ui-color-picker .alpha-mask { - width: 100%; - height: 100%; - background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png"); -} - -.ui-color-picker .slider-picker { - width: 2px; - height: 100%; - border: 1px solid #777; - background-color: #FFF; - position: relative; - top: -1px; -} - -/* input HSV and RGB */ - -.ui-color-picker .info { - width: 200px; - margin: 5px; - float: left; -} - -.ui-color-picker .info * { - float: left; -} - -.ui-color-picker .input { - width: 64px; - margin: 5px 2px; - float: left; -} - -.ui-color-picker .input .name { - height: 20px; - width: 30px; - text-align: center; - font-size: 14px; - line-height: 18px; - float: left; -} - -.ui-color-picker .input input { - width: 30px; - height: 18px; - margin: 0; - padding: 0; - border: 1px solid #DDD; - text-align: center; - float: right; - - -moz-user-select: text; - -webkit-user-select: text; - -ms-user-select: text; -} - -.ui-color-picker .input[data-topic="lightness"] { - display: none; -} - -.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] { - display: none; -} - -.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] { - display: block; -} - -.ui-color-picker .input[data-topic="alpha"] { - margin-top: 10px; - width: 93px; -} - -.ui-color-picker .input[data-topic="alpha"] > .name { - width: 60px; -} - -.ui-color-picker .input[data-topic="alpha"] > input { - float: right; -} - -.ui-color-picker .input[data-topic="hexa"] { - width: auto; - float: right; - margin: 6px 8px 0 0; -} - -.ui-color-picker .input[data-topic="hexa"] > .name { - display: none; -} - -.ui-color-picker .input[data-topic="hexa"] > input { - width: 90px; - height: 24px; - padding: 2px 0; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -/* Preview color */ -.ui-color-picker .preview { - width: 95px; - height: 53px; - margin: 5px; - margin-top: 10px; - border: 1px solid #DDD; - background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png"); - float: left; - position: relative; -} - -.ui-color-picker .preview:before { - height: 100%; - width: 50%; - left: 50%; - top: 0; - content: ""; - background: #FFF; - position: absolute; - z-index: 1; -} - -.ui-color-picker .preview-color { - width: 100%; - height: 100%; - background-color: rgba(255, 0, 0, 0.5); - position: absolute; - z-index: 1; -} - -.ui-color-picker .switch_mode { - width: 10px; - height: 20px; - position: relative; - border-radius: 5px 0 0 5px; - border: 1px solid #DDD; - background-color: #EEE; - left: -12px; - top: -1px; - z-index: 1; - transition: all 0.5s; -} - -.ui-color-picker .switch_mode:hover { - background-color: #CCC; - cursor: pointer; -} - -/* - * UI Component - */ - -.ui-input-slider { - height: 20px; - font-family: "Segoe UI", Arial, Helvetica, sans-serif; - -moz-user-select: none; - user-select: none; -} - -.ui-input-slider * { - float: left; - height: 100%; - line-height: 100%; -} - -/* Input Slider */ - -.ui-input-slider > input { - margin: 0; - padding: 0; - width: 50px; - text-align: center; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -.ui-input-slider-info { - width: 90px; - padding: 0px 10px 0px 0px; - text-align: right; - text-transform: lowercase; -} - -.ui-input-slider-left, .ui-input-slider-right { - width: 16px; - cursor: pointer; - background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat; -} - -.ui-input-slider-right { - background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; -} - -.ui-input-slider-name { - width: 90px; - padding: 0 10px 0 0; - text-align: right; - text-transform: lowercase; -} - -.ui-input-slider-btn-set { - width: 25px; - background-color: #2C9FC9; - border-radius: 5px; - color: #FFF; - font-weight: bold; - line-height: 14px; - text-align: center; -} - -.ui-input-slider-btn-set:hover { - background-color: #379B4A; - cursor: pointer; -} - -/* - * COLOR PICKER TOOL - */ - -body { - max-width: 1000px; - margin: 0 auto; - - font-family: "Segoe UI", Arial, Helvetica, sans-serif; - - box-shadow: 0 0 5px 0 #999; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - - -moz-user-select: none; - -webkit-user-select: none; - -ms-user-select: none; - user-select: none; - -} - -/** - * Resize Handle - */ -.resize-handle { - width: 10px; - height: 10px; - background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat; - position: absolute; - bottom: 0; - right: 0; -} - -[data-resize='both']:hover { - cursor: nw-resize !important; -} - -[data-resize='width']:hover { - cursor: w-resize !important; -} - -[data-resize='height']:hover { - cursor: n-resize !important; -} - -[data-hidden='true'] { - display: none; -} - -[data-collapsed='true'] { - height: 0 !important; -} - -.block { - display: table; -} - - -/** - * Container - */ -#container { - width: 100%; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - - display: table; -} - -/** - * Picker Zone - */ - -#picker { - padding: 10px; - width: 980px; -} - -.ui-color-picker { - padding: 3px 5px; - float: left; - border-color: #FFF; -} - -.ui-color-picker .switch_mode { - display: none; -} - -.ui-color-picker .preview-color:hover { - cursor: move; -} - -/** - * Picker Container - */ - -#picker-samples { - width: 375px; - height: 114px; - max-height: 218px; - margin: 0 10px 0 30px; - overflow: hidden; - position: relative; - float: left; - - transition: all 0.2s; -} - -#picker-samples .sample { - width: 40px; - height: 40px; - margin: 5px; - border: 1px solid #DDD; - position: absolute; - float: left; - transition: all 0.2s; -} - -#picker-samples .sample:hover { - cursor: pointer; - border-color: #BBB; - transform: scale(1.15); - border-radius: 3px; -} - -#picker-samples .sample[data-active='true'] { - border-color: #999; -} - -#picker-samples .sample[data-active='true']:after { - content: ""; - position: absolute; - background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat; - width: 100%; - height: 12px; - top: -12px; - z-index: 2; -} - -#picker-samples #add-icon { - width: 100%; - height: 100%; - position: relative; - box-shadow: inset 0px 0px 2px 0px #DDD; -} - -#picker-samples #add-icon:hover { - cursor: pointer; - border-color: #DDD; - box-shadow: inset 0px 0px 5px 0px #CCC; -} - -#picker-samples #add-icon:before, -#picker-samples #add-icon:after { - content: ""; - position: absolute; - background-color: #EEE; - box-shadow: 0 0 1px 0 #EEE; -} - -#picker-samples #add-icon:before { - width: 70%; - height: 16%; - top: 42%; - left: 15%; -} - -#picker-samples #add-icon:after { - width: 16%; - height: 70%; - top: 15%; - left: 42%; -} - -#picker-samples #add-icon:hover:before, -#picker-samples #add-icon:hover:after { - background-color: #DDD; - box-shadow: 0 0 1px 0 #DDD; -} - -/** - * Controls - */ - -#controls { - width: 110px; - padding: 10px; - float: right; -} - -#controls #picker-switch { - text-align: center; - float: left; -} - -#controls .icon { - width: 48px; - height: 48px; - margin: 10px 0; - background-repeat: no-repeat; - background-position: center; - border: 1px solid #DDD; - display: table; - float: left; -} - -#controls .icon:hover { - cursor: pointer; -} - -#controls .picker-icon { - background-image: url('https://mdn.mozillademos.org/files/6081/picker.png'); -} - -#controls #void-sample { - margin-right: 10px; - background-image: url('https://mdn.mozillademos.org/files/6087/void.png'); - background-position: center left; -} - -#controls #void-sample[data-active='true'] { - border-color: #CCC; - background-position: center right; -} - -#controls .switch { - width: 106px; - padding: 1px; - border: 1px solid #CCC; - font-size: 14px; - text-align: center; - line-height: 24px; - overflow: hidden; - float: left; -} - -#controls .switch:hover { - cursor: pointer; -} - -#controls .switch > * { - width: 50%; - padding: 2px 0; - background-color: #EEE; - float: left; -} - -#controls .switch [data-active='true'] { - color: #FFF; - background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); - background-color: #777; -} - -/** - * Trash Can - */ - -#delete { - width: 100%; - height: 94px; - background-color: #DDD; - background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); - background-repeat: repeat; - - text-align: center; - color: #777; - - position: relative; - float: right; -} - -#delete #trash-can { - width: 80%; - height: 80%; - border: 2px dashed #FFF; - border-radius: 5px; - background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center; - - position: absolute; - top: 10%; - left: 10%; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - - transition: all 0.2s; -} - -#delete[drag-state='enter'] { - background-color: #999; -} - -/** - * Color Theme - */ - -#color-theme { - margin: 0 8px 0 0; - border: 1px solid #EEE; - display: inline-block; - float: right; -} - -#color-theme .box { - width: 80px; - height: 92px; - float: left; -} - -/** - * Color info box - */ -#color-info { - width: 360px; - float: left; -} - -#color-info .title { - width: 100%; - padding: 15px; - font-size: 18px; - text-align: center; - background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png'); - background-repeat:no-repeat; - background-position: center left 28%; -} - -#color-info .copy-container { - position: absolute; - top: -100%; -} - -#color-info .property { - min-width: 280px; - height: 30px; - margin: 10px 0; - text-align: center; - line-height: 30px; -} - -#color-info .property > * { - float: left; -} - -#color-info .property .type { - width: 60px; - height: 100%; - padding: 0 16px 0 0; - text-align: right; -} - -#color-info .property .value { - width: 200px; - height: 100%; - padding: 0 10px; - font-family: "Segoe UI", Arial, Helvetica, sans-serif; - font-size: 16px; - color: #777; - text-align: center; - background-color: #FFF; - border: none; -} - -#color-info .property .value:hover { - color: #37994A; -} - -#color-info .property .value:hover + .copy { - background-position: center right; -} - -#color-info .property .copy { - width: 24px; - height: 100%; - padding: 0 5px; - background-color: #FFF; - background-image: url('https://mdn.mozillademos.org/files/6073/copy.png'); - background-repeat: no-repeat; - background-position: center left; - border-left: 1px solid #EEE; - text-align: right; - float: left; -} - -#color-info .property .copy:hover { - background-position: center right; -} - - -/** - * Color Palette - */ - -#palette { - width: 1000px; - padding: 10px 0; - background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); - background-repeat: repeat; - background-color: #EEE; - color: #777; - - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; -} - -#color-palette { - width: 640px; - font-family: Arial, Helvetica, sans-serif; - color: #777; - float: left; -} - -#color-palette .container { - width: 100%; - height: 50px; - line-height: 50px; - overflow: hidden; - float: left; - transition: all 0.5s; -} - -#color-palette .container > * { - float: left; -} - -#color-palette .title { - width: 100px; - padding: 0 10px; - text-align: right; - line-height: inherit; -} - -#color-palette .palette { - width: 456px; - height: 38px; - margin: 3px; - padding: 3px; - display: table; - background-color: #FFF; -} - -#color-palette .palette .sample { - width: 30px; - height: 30px; - margin: 3px; - position: relative; - border: 1px solid #DDD; - float: left; - transition: all 0.2s; -} - -#color-palette .palette .sample:hover { - cursor: pointer; - border-color: #BBB; - transform: scale(1.15); - border-radius: 3px; -} - -#color-palette .controls { -} - -#color-palette .controls > * { - float: left; -} - -#color-palette .controls > *:hover { - cursor: pointer; -} - -#color-palette .controls .lock { - width: 24px; - height: 24px; - margin: 10px; - padding: 3px; - background-image: url('https://mdn.mozillademos.org/files/6077/lock.png'); - background-repeat: no-repeat; - background-position: bottom right; -} - -#color-palette .controls .lock:hover { - /*background-image: url('images/unlocked-hover.png');*/ - background-position: bottom left; -} - -#color-palette .controls .lock[locked-state='true'] { - /*background-image: url('images/locked.png');*/ - background-position: top left ; -} - -#color-palette .controls .lock[locked-state='true']:hover { - /*background-image: url('images/lock-hover.png');*/ - background-position: top right; -} - -/** - * Canvas - */ - -#canvas { - width: 100%; - height: 300px; - min-height: 250px; - border-top: 1px solid #DDD; - background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); - background-repeat: repeat; - position: relative; - float: left; -} - -#canvas[data-tutorial='drop'] { - text-align: center; - font-size: 30px; - color: #777; -} - -#canvas[data-tutorial='drop']:before { - content: "Déposez vos couleurs ici"; - width: 40%; - padding: 30px 9% 70px 11%; - - background-image: url('https://mdn.mozillademos.org/files/6075/drop.png'); - background-repeat: no-repeat; - background-position: left 35px top 60%; - - text-align: center; - - border: 3px dashed rgb(221, 221, 221); - border-radius: 15px; - - position: absolute; - top: 50px; - left: 20%; -} - -#canvas[data-tutorial='drop']:after { - content: "pour les comparer, les ajuster ou les modifier."; - width: 40%; - font-size: 24px; - position: absolute; - top: 130px; - left: 32%; - z-index: 2; -} - -#canvas [data-tutorial='dblclick'] { - background-color: #999 !important; -} - -#canvas [data-tutorial='dblclick']:before { - content: "double click pour activer"; - width: 80px; - color: #FFF; - position: absolute; - top: 10%; - left: 20%; - z-index: 2; -} - -#canvas .sample { - width: 100px; - height: 100px; - min-width: 20px; - min-height: 20px; - position: absolute; - border: 1px solid rgba(255, 255, 255, 0.3); -} - -#canvas .sample:hover { - cursor: move; -} - -#canvas .sample[data-active='true']:after { - content: ""; - position: absolute; - background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat; - width: 100%; - height: 12px; - top: -12px; - z-index: 2; -} - -#canvas .sample:hover > * { - cursor: pointer; - display: block !important; -} - -#canvas .sample .resize-handle { - display: none; -} - -#canvas .sample .pick { - width: 10px; - height: 10px; - margin: 5px; - background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat; - position: absolute; - top: 0; - left: 0; - display: none; -} - -#canvas .sample .delete { - width: 10px; - height: 10px; - margin: 5px; - background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat; - position: absolute; - top: 0; - right: 0; - display: none; -} - - -/** - * Canvas controls - */ - -#canvas .toggle-bg { - width: 16px; - height: 16px; - margin: 5px; - background: url("images/canvas-controls.png") center left no-repeat; - position: absolute; - top: 0; - right: 0; -} - -#canvas .toggle-bg:hover { - cursor: pointer; -} - -#canvas[data-bg='true'] { - background: none; -} - -#canvas[data-bg='true'] .toggle-bg { - background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat; -} - -#zindex { - height: 20px; - margin: 5px; - font-size: 16px; - position: absolute; - opacity: 0; - top: -10000px; - left: 0; - color: #777; - float: left; - transition: opacity 1s; -} - -#zindex input { - border: 1px solid #DDD; - font-size: 16px; - color: #777; -} - -#zindex .ui-input-slider-info { - width: 60px; -} - -#zindex[data-active='true'] { - top: 0; - opacity: 1; -} - - - -JavaScript Content - -'use strict'; - -var UIColorPicker = (function UIColorPicker() { - - function getElemById(id) { - return document.getElementById(id); - } - - var subscribers = []; - var pickers = []; - - /** - * RGBA Color class - * - * HSV/HSB and HSL (hue, saturation, value / brightness, lightness) - * @param hue 0-360 - * @param saturation 0-100 - * @param value 0-100 - * @param lightness 0-100 - */ - - function Color(color) { - - if(color instanceof Color === true) { - this.copy(color); - return; - } - - this.r = 0; - this.g = 0; - this.b = 0; - this.a = 1; - this.hue = 0; - this.saturation = 0; - this.value = 0; - this.lightness = 0; - this.format = 'HSV'; - } - - function RGBColor(r, g, b) { - var color = new Color(); - color.setRGBA(r, g, b, 1); - return color; - } - - function RGBAColor(r, g, b, a) { - var color = new Color(); - color.setRGBA(r, g, b, a); - return color; - } - - function HSVColor(h, s, v) { - var color = new Color(); - color.setHSV(h, s, v); - return color; - } - - function HSVAColor(h, s, v, a) { - var color = new Color(); - color.setHSV(h, s, v); - color.a = a; - return color; - } - - function HSLColor(h, s, l) { - var color = new Color(); - color.setHSL(h, s, l); - return color; - } - - function HSLAColor(h, s, l, a) { - var color = new Color(); - color.setHSL(h, s, l); - color.a = a; - return color; - } - - Color.prototype.copy = function copy(obj) { - if(obj instanceof Color !== true) { - console.log('Typeof parameter not Color'); - return; - } - - this.r = obj.r; - this.g = obj.g; - this.b = obj.b; - this.a = obj.a; - this.hue = obj.hue; - this.saturation = obj.saturation; - this.value = obj.value; - this.format = '' + obj.format; - this.lightness = obj.lightness; - }; - - Color.prototype.setFormat = function setFormat(format) { - if (format === 'HSV') - this.format = 'HSV'; - if (format === 'HSL') - this.format = 'HSL'; - }; - - /*========== Methods to set Color Properties ==========*/ - - Color.prototype.isValidRGBValue = function isValidRGBValue(value) { - return (typeof(value) === 'number' && isNaN(value) === false && - value >= 0 && value <= 255); - }; - - Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) { - if (this.isValidRGBValue(red) === false || - this.isValidRGBValue(green) === false || - this.isValidRGBValue(blue) === false) - return; - - this.r = red | 0; - this.g = green | 0; - this.b = blue | 0; - - if (this.isValidRGBValue(alpha) === true) - this.a = alpha | 0; - }; - - Color.prototype.setByName = function setByName(name, value) { - if (name === 'r' || name === 'g' || name === 'b') { - if(this.isValidRGBValue(value) === false) - return; - - this[name] = value; - this.updateHSX(); - } - }; - - Color.prototype.setHSV = function setHSV(hue, saturation, value) { - this.hue = hue; - this.saturation = saturation; - this.value = value; - this.HSVtoRGB(); - }; - - Color.prototype.setHSL = function setHSL(hue, saturation, lightness) { - this.hue = hue; - this.saturation = saturation; - this.lightness = lightness; - this.HSLtoRGB(); - }; - - Color.prototype.setHue = function setHue(value) { - if (typeof(value) !== 'number' || isNaN(value) === true || - value < 0 || value > 359) - return; - this.hue = value; - this.updateRGB(); - }; - - Color.prototype.setSaturation = function setSaturation(value) { - if (typeof(value) !== 'number' || isNaN(value) === true || - value < 0 || value > 100) - return; - this.saturation = value; - this.updateRGB(); - }; - - Color.prototype.setValue = function setValue(value) { - if (typeof(value) !== 'number' || isNaN(value) === true || - value < 0 || value > 100) - return; - this.value = value; - this.HSVtoRGB(); - }; - - Color.prototype.setLightness = function setLightness(value) { - if (typeof(value) !== 'number' || isNaN(value) === true || - value < 0 || value > 100) - return; - this.lightness = value; - this.HSLtoRGB(); - }; - - Color.prototype.setHexa = function setHexa(value) { - var valid = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value); - - if (valid !== true) - return; - - if (value[0] === '#') - value = value.slice(1, value.length); - - if (value.length === 3) - value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3'); - - this.r = parseInt(value.substr(0, 2), 16); - this.g = parseInt(value.substr(2, 2), 16); - this.b = parseInt(value.substr(4, 2), 16); - - this.alpha = 1; - this.RGBtoHSV(); - }; - - /*========== Conversion Methods ==========*/ - - Color.prototype.convertToHSL = function convertToHSL() { - if (this.format === 'HSL') - return; - - this.setFormat('HSL'); - this.RGBtoHSL(); - }; - - Color.prototype.convertToHSV = function convertToHSV() { - if (this.format === 'HSV') - return; - - this.setFormat('HSV'); - this.RGBtoHSV(); - }; - - /*========== Update Methods ==========*/ - - Color.prototype.updateRGB = function updateRGB() { - if (this.format === 'HSV') { - this.HSVtoRGB(); - return; - } - - if (this.format === 'HSL') { - this.HSLtoRGB(); - return; - } - }; - - Color.prototype.updateHSX = function updateHSX() { - if (this.format === 'HSV') { - this.RGBtoHSV(); - return; - } - - if (this.format === 'HSL') { - this.RGBtoHSL(); - return; - } - }; - - Color.prototype.HSVtoRGB = function HSVtoRGB() { - var sat = this.saturation / 100; - var value = this.value / 100; - var C = sat * value; - var H = this.hue / 60; - var X = C * (1 - Math.abs(H % 2 - 1)); - var m = value - C; - var precision = 255; - - C = (C + m) * precision | 0; - X = (X + m) * precision | 0; - m = m * precision | 0; - - if (H >= 0 && H < 1) { this.setRGBA(C, X, m); return; } - if (H >= 1 && H < 2) { this.setRGBA(X, C, m); return; } - if (H >= 2 && H < 3) { this.setRGBA(m, C, X); return; } - if (H >= 3 && H < 4) { this.setRGBA(m, X, C); return; } - if (H >= 4 && H < 5) { this.setRGBA(X, m, C); return; } - if (H >= 5 && H < 6) { this.setRGBA(C, m, X); return; } - }; - - Color.prototype.HSLtoRGB = function HSLtoRGB() { - var sat = this.saturation / 100; - var light = this.lightness / 100; - var C = sat * (1 - Math.abs(2 * light - 1)); - var H = this.hue / 60; - var X = C * (1 - Math.abs(H % 2 - 1)); - var m = light - C/2; - var precision = 255; - - C = (C + m) * precision | 0; - X = (X + m) * precision | 0; - m = m * precision | 0; - - if (H >= 0 && H < 1) { this.setRGBA(C, X, m); return; } - if (H >= 1 && H < 2) { this.setRGBA(X, C, m); return; } - if (H >= 2 && H < 3) { this.setRGBA(m, C, X); return; } - if (H >= 3 && H < 4) { this.setRGBA(m, X, C); return; } - if (H >= 4 && H < 5) { this.setRGBA(X, m, C); return; } - if (H >= 5 && H < 6) { this.setRGBA(C, m, X); return; } - }; - - Color.prototype.RGBtoHSV = function RGBtoHSV() { - var red = this.r / 255; - var green = this.g / 255; - var blue = this.b / 255; - - var cmax = Math.max(red, green, blue); - var cmin = Math.min(red, green, blue); - var delta = cmax - cmin; - var hue = 0; - var saturation = 0; - - if (delta) { - if (cmax === red ) { hue = ((green - blue) / delta); } - if (cmax === green ) { hue = 2 + (blue - red) / delta; } - if (cmax === blue ) { hue = 4 + (red - green) / delta; } - if (cmax) saturation = delta / cmax; - } - - this.hue = 60 * hue | 0; - if (this.hue < 0) this.hue += 360; - this.saturation = (saturation * 100) | 0; - this.value = (cmax * 100) | 0; - }; - - Color.prototype.RGBtoHSL = function RGBtoHSL() { - var red = this.r / 255; - var green = this.g / 255; - var blue = this.b / 255; - - var cmax = Math.max(red, green, blue); - var cmin = Math.min(red, green, blue); - var delta = cmax - cmin; - var hue = 0; - var saturation = 0; - var lightness = (cmax + cmin) / 2; - var X = (1 - Math.abs(2 * lightness - 1)); - - if (delta) { - if (cmax === red ) { hue = ((green - blue) / delta); } - if (cmax === green ) { hue = 2 + (blue - red) / delta; } - if (cmax === blue ) { hue = 4 + (red - green) / delta; } - if (cmax) saturation = delta / X; - } - - this.hue = 60 * hue | 0; - if (this.hue < 0) this.hue += 360; - this.saturation = (saturation * 100) | 0; - this.lightness = (lightness * 100) | 0; - }; - - /*========== Get Methods ==========*/ - - Color.prototype.getHexa = function getHexa() { - var r = this.r.toString(16); - var g = this.g.toString(16); - var b = this.b.toString(16); - if (this.r < 16) r = '0' + r; - if (this.g < 16) g = '0' + g; - if (this.b < 16) b = '0' + b; - var value = '#' + r + g + b; - return value.toUpperCase(); - }; - - Color.prototype.getRGBA = function getRGBA() { - - var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b; - var a = ''; - var v = ''; - var x = parseFloat(this.a); - if (x !== 1) { - a = 'a'; - v = ', ' + x; - } - - var value = 'rgb' + a + rgb + v + ')'; - return value; - }; - - Color.prototype.getHSLA = function getHSLA() { - if (this.format === 'HSV') { - var color = new Color(this); - color.setFormat('HSL'); - color.updateHSX(); - return color.getHSLA(); - } - - var a = ''; - var v = ''; - var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%'; - var x = parseFloat(this.a); - if (x !== 1) { - a = 'a'; - v = ', ' + x; - } - - var value = 'hsl' + a + hsl + v + ')'; - return value; - }; - - Color.prototype.getColor = function getColor() { - if (this.a | 0 === 1) - return this.getHexa(); - return this.getRGBA(); - }; - - /*=======================================================================*/ - /*=======================================================================*/ - - /*========== Capture Mouse Movement ==========*/ - - var setMouseTracking = function setMouseTracking(elem, callback) { - elem.addEventListener('mousedown', function(e) { - callback(e); - document.addEventListener('mousemove', callback); - }); - - document.addEventListener('mouseup', function(e) { - document.removeEventListener('mousemove', callback); - }); - }; - - /*====================*/ - // Color Picker Class - /*====================*/ - - function ColorPicker(node) { - this.color = new Color(); - this.node = node; - this.subscribers = []; - - var type = this.node.getAttribute('data-mode'); - var topic = this.node.getAttribute('data-topic'); - - this.topic = topic; - this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV'; - this.color.setFormat(this.picker_mode); - - this.createPickingArea(); - this.createHueArea(); - - this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this)); - this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this)); - this.newInputComponent('V', 'value', this.inputChangeValue.bind(this)); - this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this)); - - this.createAlphaArea(); - - this.newInputComponent('R', 'red', this.inputChangeRed.bind(this)); - this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this)); - this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this)); - - this.createPreviewBox(); - this.createChangeModeButton(); - - this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this)); - this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this)); - - this.setColor(this.color); - pickers[topic] = this; - } - - /*************************************************************************/ - // Function for generating the color-picker - /*************************************************************************/ - - ColorPicker.prototype.createPickingArea = function createPickingArea() { - var area = document.createElement('div'); - var picker = document.createElement('div'); - - area.className = 'picking-area'; - picker.className = 'picker'; - - this.picking_area = area; - this.color_picker = picker; - setMouseTracking(area, this.updateColor.bind(this)); - - area.appendChild(picker); - this.node.appendChild(area); - }; - - ColorPicker.prototype.createHueArea = function createHueArea() { - var area = document.createElement('div'); - var picker = document.createElement('div'); - - area.className = 'hue'; - picker.className ='slider-picker'; - - this.hue_area = area; - this.hue_picker = picker; - setMouseTracking(area, this.updateHueSlider.bind(this)); - - area.appendChild(picker); - this.node.appendChild(area); - }; - - ColorPicker.prototype.createAlphaArea = function createAlphaArea() { - var area = document.createElement('div'); - var mask = document.createElement('div'); - var picker = document.createElement('div'); - - area.className = 'alpha'; - mask.className = 'alpha-mask'; - picker.className = 'slider-picker'; - - this.alpha_area = area; - this.alpha_mask = mask; - this.alpha_picker = picker; - setMouseTracking(area, this.updateAlphaSlider.bind(this)); - - area.appendChild(mask); - mask.appendChild(picker); - this.node.appendChild(area); - }; - - ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) { - var preview_box = document.createElement('div'); - var preview_color = document.createElement('div'); - - preview_box.className = 'preview'; - preview_color.className = 'preview-color'; - - this.preview_color = preview_color; - - preview_box.appendChild(preview_color); - this.node.appendChild(preview_box); - }; - - ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) { - var wrapper = document.createElement('div'); - var input = document.createElement('input'); - var info = document.createElement('span'); - - wrapper.className = 'input'; - wrapper.setAttribute('data-topic', topic); - info.textContent = title; - info.className = 'name'; - input.setAttribute('type', 'text'); - - wrapper.appendChild(info); - wrapper.appendChild(input); - this.node.appendChild(wrapper); - - input.addEventListener('change', onChangeFunc); - input.addEventListener('click', function() { - this.select(); - }); - - this.subscribe(topic, function(value) { - input.value = value; - }); - }; - - ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() { - - var button = document.createElement('div'); - button.className = 'switch_mode'; - button.addEventListener('click', function() { - if (this.picker_mode === 'HSV') - this.setPickerMode('HSL'); - else - this.setPickerMode('HSV'); - - }.bind(this)); - - this.node.appendChild(button); - }; - - /*************************************************************************/ - // Updates properties of UI elements - /*************************************************************************/ - - ColorPicker.prototype.updateColor = function updateColor(e) { - var x = e.pageX - this.picking_area.offsetLeft; - var y = e.pageY - this.picking_area.offsetTop; - var picker_offset = 5; - - // width and height should be the same - var size = this.picking_area.clientWidth; - - if (x > size) x = size; - if (y > size) y = size; - if (x < 0) x = 0; - if (y < 0) y = 0; - - var value = 100 - (y * 100 / size) | 0; - var saturation = x * 100 / size | 0; - - if (this.picker_mode === 'HSV') - this.color.setHSV(this.color.hue, saturation, value); - if (this.picker_mode === 'HSL') - this.color.setHSL(this.color.hue, saturation, value); - - this.color_picker.style.left = x - picker_offset + 'px'; - this.color_picker.style.top = y - picker_offset + 'px'; - - this.updateAlphaGradient(); - this.updatePreviewColor(); - - this.notify('value', value); - this.notify('lightness', value); - this.notify('saturation', saturation); - - this.notify('red', this.color.r); - this.notify('green', this.color.g); - this.notify('blue', this.color.b); - this.notify('hexa', this.color.getHexa()); - - notify(this.topic, this.color); - }; - - ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) { - var x = e.pageX - this.hue_area.offsetLeft; - var width = this.hue_area.clientWidth; - - if (x < 0) x = 0; - if (x > width) x = width; - - // TODO 360 => 359 - var hue = ((359 * x) / width) | 0; - // if (hue === 360) hue = 359; - - this.updateSliderPosition(this.hue_picker, x); - this.setHue(hue); - }; - - ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) { - var x = e.pageX - this.alpha_area.offsetLeft; - var width = this.alpha_area.clientWidth; - - if (x < 0) x = 0; - if (x > width) x = width; - - this.color.a = (x / width).toFixed(2); - - this.updateSliderPosition(this.alpha_picker, x); - this.updatePreviewColor(); - - this.notify('alpha', this.color.a); - notify(this.topic, this.color); - }; - - ColorPicker.prototype.setHue = function setHue(value) { - this.color.setHue(value); - - this.updatePickerBackground(); - this.updateAlphaGradient(); - this.updatePreviewColor(); - - this.notify('red', this.color.r); - this.notify('green', this.color.g); - this.notify('blue', this.color.b); - this.notify('hexa', this.color.getHexa()); - this.notify('hue', this.color.hue); - - notify(this.topic, this.color); - }; - - // Updates when one of Saturation/Value/Lightness changes - ColorPicker.prototype.updateSLV = function updateSLV() { - this.updatePickerPosition(); - this.updateAlphaGradient(); - this.updatePreviewColor(); - - this.notify('red', this.color.r); - this.notify('green', this.color.g); - this.notify('blue', this.color.b); - this.notify('hexa', this.color.getHexa()); - - notify(this.topic, this.color); - }; - - /*************************************************************************/ - // Update positions of various UI elements - /*************************************************************************/ - - ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() { - var size = this.picking_area.clientWidth; - var value = 0; - var offset = 5; - - if (this.picker_mode === 'HSV') - value = this.color.value; - if (this.picker_mode === 'HSL') - value = this.color.lightness; - - var x = (this.color.saturation * size / 100) | 0; - var y = size - (value * size / 100) | 0; - - this.color_picker.style.left = x - offset + 'px'; - this.color_picker.style.top = y - offset + 'px'; - }; - - ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) { - elem.style.left = Math.max(pos - 3, -2) + 'px'; - }; - - ColorPicker.prototype.updateHuePicker = function updateHuePicker() { - var size = this.hue_area.clientWidth; - var offset = 1; - var pos = (this.color.hue * size / 360 ) | 0; - this.hue_picker.style.left = pos - offset + 'px'; - }; - - ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() { - var size = this.alpha_area.clientWidth; - var offset = 1; - var pos = (this.color.a * size) | 0; - this.alpha_picker.style.left = pos - offset + 'px'; - }; - - /*************************************************************************/ - // Update background colors - /*************************************************************************/ - - ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() { - var nc = new Color(this.color); - nc.setHSV(nc.hue, 100, 100); - this.picking_area.style.backgroundColor = nc.getHexa(); - }; - - ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() { - this.alpha_mask.style.backgroundColor = this.color.getHexa(); - }; - - ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() { - this.preview_color.style.backgroundColor = this.color.getColor(); - }; - - /*************************************************************************/ - // Update input elements - /*************************************************************************/ - - ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) { - var value = parseInt(e.target.value); - this.setHue(value); - this.updateHuePicker(); - }; - - ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) { - var value = parseInt(e.target.value); - this.color.setSaturation(value); - e.target.value = this.color.saturation; - this.updateSLV(); - }; - - ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) { - var value = parseInt(e.target.value); - this.color.setValue(value); - e.target.value = this.color.value; - this.updateSLV(); - }; - - ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) { - var value = parseInt(e.target.value); - this.color.setLightness(value); - e.target.value = this.color.lightness; - this.updateSLV(); - }; - - ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) { - var value = parseInt(e.target.value); - this.color.setByName('r', value); - e.target.value = this.color.r; - this.setColor(this.color); - }; - - ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) { - var value = parseInt(e.target.value); - this.color.setByName('g', value); - e.target.value = this.color.g; - this.setColor(this.color); - }; - - ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) { - var value = parseInt(e.target.value); - this.color.setByName('b', value); - e.target.value = this.color.b; - this.setColor(this.color); - }; - - ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) { - var value = parseFloat(e.target.value); - - if (typeof value === 'number' && isNaN(value) === false && - value >= 0 && value <= 1) - this.color.a = value.toFixed(2); - - e.target.value = this.color.a; - this.updateAlphaPicker(); - }; - - ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) { - var value = e.target.value; - this.color.setHexa(value); - this.setColor(this.color); - }; - - /*************************************************************************/ - // Internal Pub/Sub - /*************************************************************************/ - - ColorPicker.prototype.subscribe = function subscribe(topic, callback) { - this.subscribers[topic] = callback; - }; - - ColorPicker.prototype.notify = function notify(topic, value) { - if (this.subscribers[topic]) - this.subscribers[topic](value); - }; - - /*************************************************************************/ - // Set Picker Properties - /*************************************************************************/ - - ColorPicker.prototype.setColor = function setColor(color) { - if(color instanceof Color !== true) { - console.log('Typeof parameter not Color'); - return; - } - - if (color.format !== this.picker_mode) { - color.setFormat(this.picker_mode); - color.updateHSX(); - } - - this.color.copy(color); - this.updateHuePicker(); - this.updatePickerPosition(); - this.updatePickerBackground(); - this.updateAlphaPicker(); - this.updateAlphaGradient(); - this.updatePreviewColor(); - - this.notify('red', this.color.r); - this.notify('green', this.color.g); - this.notify('blue', this.color.b); - - this.notify('hue', this.color.hue); - this.notify('saturation', this.color.saturation); - this.notify('value', this.color.value); - this.notify('lightness', this.color.lightness); - - this.notify('alpha', this.color.a); - this.notify('hexa', this.color.getHexa()); - notify(this.topic, this.color); - }; - - ColorPicker.prototype.setPickerMode = function setPickerMode(mode) { - if (mode !== 'HSV' && mode !== 'HSL') - return; - - this.picker_mode = mode; - this.node.setAttribute('data-mode', this.picker_mode); - this.setColor(this.color); - }; - - /*************************************************************************/ - // UNUSED - /*************************************************************************/ - - var setPickerMode = function setPickerMode(topic, mode) { - if (pickers[topic]) - pickers[topic].setPickerMode(mode); - }; - - var setColor = function setColor(topic, color) { - if (pickers[topic]) - pickers[topic].setColor(color); - }; - - var getColor = function getColor(topic) { - if (pickers[topic]) - return new Color(pickers[topic].color); - }; - - var subscribe = function subscribe(topic, callback) { - if (subscribers[topic] === undefined) - subscribers[topic] = []; - - subscribers[topic].push(callback); - }; - - var unsubscribe = function unsubscribe(callback) { - subscribers.indexOf(callback); - subscribers.splice(index, 1); - }; - - var notify = function notify(topic, value) { - if (subscribers[topic] === undefined || subscribers[topic].length === 0) - return; - - var color = new Color(value); - for (var i in subscribers[topic]) - subscribers[topic][i](color); - }; - - var init = function init() { - var elem = document.querySelectorAll('.ui-color-picker'); - var size = elem.length; - for (var i = 0; i < size; i++) - new ColorPicker(elem[i]); - }; - - return { - init : init, - Color : Color, - RGBColor : RGBColor, - RGBAColor : RGBAColor, - HSVColor : HSVColor, - HSVAColor : HSVAColor, - HSLColor : HSLColor, - HSLAColor : HSLAColor, - setColor : setColor, - getColor : getColor, - subscribe : subscribe, - unsubscribe : unsubscribe, - setPickerMode : setPickerMode - }; - -})(); - - - -/** - * UI-SlidersManager - */ - -var InputSliderManager = (function InputSliderManager() { - - var subscribers = {}; - var sliders = []; - - var InputComponent = function InputComponent(obj) { - var input = document.createElement('input'); - input.setAttribute('type', 'text'); - input.style.width = 50 + obj.precision * 10 + 'px'; - - input.addEventListener('click', function(e) { - this.select(); - }); - - input.addEventListener('change', function(e) { - var value = parseFloat(e.target.value); - - if (isNaN(value) === true) - setValue(obj.topic, obj.value); - else - setValue(obj.topic, value); - }); - - return input; - }; - - var SliderComponent = function SliderComponent(obj, sign) { - var slider = document.createElement('div'); - var startX = null; - var start_value = 0; - - slider.addEventListener("click", function(e) { - document.removeEventListener("mousemove", sliderMotion); - setValue(obj.topic, obj.value + obj.step * sign); - }); - - slider.addEventListener("mousedown", function(e) { - startX = e.clientX; - start_value = obj.value; - document.body.style.cursor = "e-resize"; - - document.addEventListener("mouseup", slideEnd); - document.addEventListener("mousemove", sliderMotion); - }); - - var slideEnd = function slideEnd(e) { - document.removeEventListener("mousemove", sliderMotion); - document.body.style.cursor = "auto"; - slider.style.cursor = "pointer"; - }; - - var sliderMotion = function sliderMotion(e) { - slider.style.cursor = "e-resize"; - var delta = (e.clientX - startX) / obj.sensivity | 0; - var value = delta * obj.step + start_value; - setValue(obj.topic, value); - }; - - return slider; - }; - - var InputSlider = function(node) { - var min = parseFloat(node.getAttribute('data-min')); - var max = parseFloat(node.getAttribute('data-max')); - var step = parseFloat(node.getAttribute('data-step')); - var value = parseFloat(node.getAttribute('data-value')); - var topic = node.getAttribute('data-topic'); - var unit = node.getAttribute('data-unit'); - var name = node.getAttribute('data-info'); - var sensivity = node.getAttribute('data-sensivity') | 0; - var precision = node.getAttribute('data-precision') | 0; - - this.min = isNaN(min) ? 0 : min; - this.max = isNaN(max) ? 100 : max; - this.precision = precision >= 0 ? precision : 0; - this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision); - this.topic = topic; - this.node = node; - this.unit = unit === null ? '' : unit; - this.sensivity = sensivity > 0 ? sensivity : 5; - value = isNaN(value) ? this.min : value; - - var input = new InputComponent(this); - var slider_left = new SliderComponent(this, -1); - var slider_right = new SliderComponent(this, 1); - - slider_left.className = 'ui-input-slider-left'; - slider_right.className = 'ui-input-slider-right'; - - if (name) { - var info = document.createElement('span'); - info.className = 'ui-input-slider-info'; - info.textContent = name; - node.appendChild(info); - } - - node.appendChild(slider_left); - node.appendChild(input); - node.appendChild(slider_right); - - this.input = input; - sliders[topic] = this; - setValue(topic, value); - }; - - InputSlider.prototype.setInputValue = function setInputValue() { - this.input.value = this.value.toFixed(this.precision) + this.unit; - }; - - var setValue = function setValue(topic, value, send_notify) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - value = parseFloat(value.toFixed(slider.precision)); - - if (value > slider.max) value = slider.max; - if (value < slider.min) value = slider.min; - - slider.value = value; - slider.node.setAttribute('data-value', value); - - slider.setInputValue(); - - if (send_notify === false) - return; - - notify.call(slider); - }; - - var setMax = function setMax(topic, value) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - slider.max = value; - setValue(topic, slider.value); - }; - - var setMin = function setMin(topic, value) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - slider.min = value; - setValue(topic, slider.value); - }; - - var setUnit = function setUnit(topic, unit) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - slider.unit = unit; - setValue(topic, slider.value); - }; - - var setStep = function setStep(topic, value) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - slider.step = parseFloat(value); - setValue(topic, slider.value); - }; - - var setPrecision = function setPrecision(topic, value) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - value = value | 0; - slider.precision = value; - - var step = parseFloat(slider.step.toFixed(value)); - if (step === 0) - slider.step = 1 / Math.pow(10, value); - - setValue(topic, slider.value); - }; - - var setSensivity = function setSensivity(topic, value) { - var slider = sliders[topic]; - if (slider === undefined) - return; - - value = value | 0; - - slider.sensivity = value > 0 ? value : 5; - }; - - var getNode = function getNode(topic) { - return sliders[topic].node; - }; - - var getPrecision = function getPrecision(topic) { - return sliders[topic].precision; - }; - - var getStep = function getStep(topic) { - return sliders[topic].step; - }; - - var subscribe = function subscribe(topic, callback) { - if (subscribers[topic] === undefined) - subscribers[topic] = []; - subscribers[topic].push(callback); - }; - - var unsubscribe = function unsubscribe(topic, callback) { - subscribers[topic].indexOf(callback); - subscribers[topic].splice(index, 1); - }; - - var notify = function notify() { - if (subscribers[this.topic] === undefined) - return; - for (var i = 0; i < subscribers[this.topic].length; i++) - subscribers[this.topic][i](this.value); - }; - - var createSlider = function createSlider(topic, label) { - var slider = document.createElement('div'); - slider.className = 'ui-input-slider'; - slider.setAttribute('data-topic', topic); - - if (label !== undefined) - slider.setAttribute('data-info', label); - - new InputSlider(slider); - return slider; - }; - - var init = function init() { - var elem = document.querySelectorAll('.ui-input-slider'); - var size = elem.length; - for (var i = 0; i < size; i++) - new InputSlider(elem[i]); - }; - - return { - init : init, - setMax : setMax, - setMin : setMin, - setUnit : setUnit, - setStep : setStep, - getNode : getNode, - getStep : getStep, - setValue : setValue, - subscribe : subscribe, - unsubscribe : unsubscribe, - setPrecision : setPrecision, - setSensivity : setSensivity, - getPrecision : getPrecision, - createSlider : createSlider, - }; - -})(); - - -'use strict'; - -window.addEventListener("load", function() { - ColorPickerTool.init(); -}); - -var ColorPickerTool = (function ColorPickerTool() { - - /*========== Get DOM Element By ID ==========*/ - - function getElemById(id) { - return document.getElementById(id); - } - - function allowDropEvent(e) { - e.preventDefault(); - } - - /*========== Make an element resizable relative to it's parent ==========*/ - - var UIComponent = (function UIComponent() { - - function makeResizable(elem, axis) { - var valueX = 0; - var valueY = 0; - var action = 0; - - var resizeStart = function resizeStart(e) { - e.stopPropagation(); - e.preventDefault(); - if (e.button !== 0) - return; - - valueX = e.clientX - elem.clientWidth; - valueY = e.clientY - elem.clientHeight; - - document.body.setAttribute('data-resize', axis); - document.addEventListener('mousemove', mouseMove); - document.addEventListener('mouseup', resizeEnd); - }; - - var mouseMove = function mouseMove(e) { - if (action >= 0) - elem.style.width = e.clientX - valueX + 'px'; - if (action <= 0) - elem.style.height = e.clientY - valueY + 'px'; - }; - - var resizeEnd = function resizeEnd(e) { - if (e.button !== 0) - return; - - document.body.removeAttribute('data-resize', axis); - document.removeEventListener('mousemove', mouseMove); - document.removeEventListener('mouseup', resizeEnd); - }; - - var handle = document.createElement('div'); - handle.className = 'resize-handle'; - - if (axis === 'width') action = 1; - else if (axis === 'height') action = -1; - else axis = 'both'; - - handle.className = 'resize-handle'; - handle.setAttribute('data-resize', axis); - handle.addEventListener('mousedown', resizeStart); - elem.appendChild(handle); - }; - - /*========== Make an element draggable relative to it's parent ==========*/ - - var makeDraggable = function makeDraggable(elem, endFunction) { - - var offsetTop; - var offsetLeft; - - elem.setAttribute('data-draggable', 'true'); - - var dragStart = function dragStart(e) { - e.preventDefault(); - e.stopPropagation(); - - if (e.target.getAttribute('data-draggable') !== 'true' || - e.target !== elem || e.button !== 0) - return; - - offsetLeft = e.clientX - elem.offsetLeft; - offsetTop = e.clientY - elem.offsetTop; - - document.addEventListener('mousemove', mouseDrag); - document.addEventListener('mouseup', dragEnd); - }; - - var dragEnd = function dragEnd(e) { - if (e.button !== 0) - return; - - document.removeEventListener('mousemove', mouseDrag); - document.removeEventListener('mouseup', dragEnd); - }; - - var mouseDrag = function mouseDrag(e) { - elem.style.left = e.clientX - offsetLeft + 'px'; - elem.style.top = e.clientY - offsetTop + 'px'; - }; - - elem.addEventListener('mousedown', dragStart, false); - }; - - return { - makeResizable : makeResizable, - makeDraggable : makeDraggable - }; - - })(); - - /*========== Color Class ==========*/ - - var Color = UIColorPicker.Color; - var HSLColor = UIColorPicker.HSLColor; - - /** - * ColorPalette - */ - var ColorPalette = (function ColorPalette() { - - var samples = []; - var color_palette; - var complementary; - - var hideNode = function(node) { - node.setAttribute('data-hidden', 'true'); - }; - - var ColorSample = function ColorSample(id) { - var node = document.createElement('div'); - node.className = 'sample'; - - this.uid = samples.length; - this.node = node; - this.color = new Color(); - - node.setAttribute('sample-id', this.uid); - node.setAttribute('draggable', 'true'); - node.addEventListener('dragstart', this.dragStart.bind(this)); - node.addEventListener('click', this.pickColor.bind(this)); - - samples.push(this); - }; - - ColorSample.prototype.updateBgColor = function updateBgColor() { - this.node.style.backgroundColor = this.color.getColor(); - }; - - ColorSample.prototype.updateColor = function updateColor(color) { - this.color.copy(color); - this.updateBgColor(); - }; - - ColorSample.prototype.updateHue = function updateHue(color, degree, steps) { - this.color.copy(color); - var hue = (steps * degree + this.color.hue) % 360; - if (hue < 0) hue += 360; - this.color.setHue(hue); - this.updateBgColor(); - }; - - ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) { - var saturation = color.saturation + value * steps; - if (saturation <= 0) { - this.node.setAttribute('data-hidden', 'true'); - return; - } - - this.node.removeAttribute('data-hidden'); - this.color.copy(color); - this.color.setSaturation(saturation); - this.updateBgColor(); - }; - - ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) { - var lightness = color.lightness + value * steps; - if (lightness <= 0) { - this.node.setAttribute('data-hidden', 'true'); - return; - } - this.node.removeAttribute('data-hidden'); - this.color.copy(color); - this.color.setLightness(lightness); - this.updateBgColor(); - }; - - ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) { - var brightness = color.value + value * steps; - if (brightness <= 0) { - this.node.setAttribute('data-hidden', 'true'); - return; - } - this.node.removeAttribute('data-hidden'); - this.color.copy(color); - this.color.setValue(brightness); - this.updateBgColor(); - }; - - ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) { - var alpha = parseFloat(color.a) + value * steps; - if (alpha <= 0) { - this.node.setAttribute('data-hidden', 'true'); - return; - } - this.node.removeAttribute('data-hidden'); - this.color.copy(color); - this.color.a = parseFloat(alpha.toFixed(2)); - this.updateBgColor(); - }; - - ColorSample.prototype.pickColor = function pickColor() { - UIColorPicker.setColor('picker', this.color); - }; - - ColorSample.prototype.dragStart = function dragStart(e) { - e.dataTransfer.setData('sampleID', this.uid); - e.dataTransfer.setData('location', 'palette-samples'); - }; - - var Palette = function Palette(text, size) { - this.samples = []; - this.locked = false; - - var palette = document.createElement('div'); - var title = document.createElement('div'); - var controls = document.createElement('div'); - var container = document.createElement('div'); - var lock = document.createElement('div'); - - container.className = 'container'; - title.className = 'title'; - palette.className = 'palette'; - controls.className = 'controls'; - lock.className = 'lock'; - title.textContent = text; - - controls.appendChild(lock); - container.appendChild(title); - container.appendChild(controls); - container.appendChild(palette); - - lock.addEventListener('click', function () { - this.locked = !this.locked; - lock.setAttribute('locked-state', this.locked); - }.bind(this)); - - for(var i = 0; i < size; i++) { - var sample = new ColorSample(); - this.samples.push(sample); - palette.appendChild(sample.node); - } - - this.container = container; - this.title = title; - }; - - var createHuePalette = function createHuePalette() { - var palette = new Palette('Teinte', 12); - - UIColorPicker.subscribe('picker', function(color) { - if (palette.locked === true) - return; - - for(var i = 0; i < 12; i++) { - palette.samples[i].updateHue(color, 30, i); - } - }); - - color_palette.appendChild(palette.container); - }; - - var createSaturationPalette = function createSaturationPalette() { - var palette = new Palette('Saturation', 11); - - UIColorPicker.subscribe('picker', function(color) { - if (palette.locked === true) - return; - - for(var i = 0; i < 11; i++) { - palette.samples[i].updateSaturation(color, -10, i); - } - }); - - color_palette.appendChild(palette.container); - }; - - /* Brightness or Lightness - depends on the picker mode */ - var createVLPalette = function createSaturationPalette() { - var palette = new Palette('Lightness', 11); - - UIColorPicker.subscribe('picker', function(color) { - if (palette.locked === true) - return; - - if(color.format === 'HSL') { - palette.title.textContent = 'Luminosité'; - for(var i = 0; i < 11; i++) - palette.samples[i].updateLightness(color, -10, i); - } - else { - palette.title.textContent = 'Valeur'; - for(var i = 0; i < 11; i++) - palette.samples[i].updateBrightness(color, -10, i); - } - }); - - color_palette.appendChild(palette.container); - }; - - var isBlankPalette = function isBlankPalette(container, value) { - if (value === 0) { - container.setAttribute('data-collapsed', 'true'); - return true; - } - - container.removeAttribute('data-collapsed'); - return false; - }; - - var createAlphaPalette = function createAlphaPalette() { - var palette = new Palette('Alpha', 10); - - UIColorPicker.subscribe('picker', function(color) { - if (palette.locked === true) - return; - - for(var i = 0; i < 10; i++) { - palette.samples[i].updateAlpha(color, -0.1, i); - } - }); - - color_palette.appendChild(palette.container); - }; - - var getSampleColor = function getSampleColor(id) { - if (samples[id] !== undefined && samples[id]!== null) - return new Color(samples[id].color); - }; - - var init = function init() { - color_palette = getElemById('color-palette'); - - createHuePalette(); - createSaturationPalette(); - createVLPalette(); - createAlphaPalette(); - - }; - - return { - init : init, - getSampleColor : getSampleColor - }; - - })(); - - /** - * ColorInfo - */ - var ColorInfo = (function ColorInfo() { - - var info_box; - var select; - var RGBA; - var HEXA; - var HSLA; - - var updateInfo = function updateInfo(color) { - if (color.a | 0 === 1) { - RGBA.info.textContent = 'RGB'; - HSLA.info.textContent = 'HSL'; - } - else { - RGBA.info.textContent = 'RGBA'; - HSLA.info.textContent = 'HSLA'; - } - - RGBA.value.value = color.getRGBA(); - HSLA.value.value = color.getHSLA(); - HEXA.value.value = color.getHexa(); - }; - - var InfoProperty = function InfoProperty(info) { - - var node = document.createElement('div'); - var title = document.createElement('div'); - var value = document.createElement('input'); - var copy = document.createElement('div'); - - node.className = 'property'; - title.className = 'type'; - value.className = 'value'; - copy.className = 'copy'; - - title.textContent = info; - value.setAttribute('type', 'text'); - - copy.addEventListener('click', function() { - value.select(); - }); - - node.appendChild(title); - node.appendChild(value); - node.appendChild(copy); - - this.node = node; - this.value = value; - this.info = title; - - info_box.appendChild(node); - }; - - var init = function init() { - - info_box = getElemById('color-info'); - - RGBA = new InfoProperty('RGBA'); - HSLA = new InfoProperty('HSLA'); - HEXA = new InfoProperty('HEXA'); - - UIColorPicker.subscribe('picker', updateInfo); - - }; - - return { - init: init - }; - - })(); - - /** - * ColorPicker Samples - */ - var ColorPickerSamples = (function ColorPickerSamples() { - - var samples = []; - var nr_samples = 0; - var active = null; - var container = null; - var samples_per_line = 10; - var trash_can = null; - var base_color = new HSLColor(0, 50, 100); - var add_btn; - var add_btn_pos; - - var ColorSample = function ColorSample() { - var node = document.createElement('div'); - node.className = 'sample'; - - this.uid = samples.length; - this.index = nr_samples++; - this.node = node; - this.color = new Color(base_color); - - node.setAttribute('sample-id', this.uid); - node.setAttribute('draggable', 'true'); - - node.addEventListener('dragstart', this.dragStart.bind(this)); - node.addEventListener('dragover' , allowDropEvent); - node.addEventListener('drop' , this.dragDrop.bind(this)); - - this.updatePosition(this.index); - this.updateBgColor(); - samples.push(this); - }; - - ColorSample.prototype.updateBgColor = function updateBgColor() { - this.node.style.backgroundColor = this.color.getColor(); - }; - - ColorSample.prototype.updatePosition = function updatePosition(index) { - this.index = index; - this.posY = 5 + ((index / samples_per_line) | 0) * 52; - this.posX = 5 + ((index % samples_per_line) | 0) * 52; - this.node.style.top = this.posY + 'px'; - this.node.style.left = this.posX + 'px'; - }; - - ColorSample.prototype.updateColor = function updateColor(color) { - this.color.copy(color); - this.updateBgColor(); - }; - - ColorSample.prototype.activate = function activate() { - UIColorPicker.setColor('picker', this.color); - this.node.setAttribute('data-active', 'true'); - }; - - ColorSample.prototype.deactivate = function deactivate() { - this.node.removeAttribute('data-active'); - }; - - ColorSample.prototype.dragStart = function dragStart(e) { - e.dataTransfer.setData('sampleID', this.uid); - e.dataTransfer.setData('location', 'picker-samples'); - }; - - ColorSample.prototype.dragDrop = function dragDrop(e) { - e.stopPropagation(); - this.color = Tool.getSampleColorFrom(e); - this.updateBgColor(); - }; - - ColorSample.prototype.deleteSample = function deleteSample() { - container.removeChild(this.node); - samples[this.uid] = null; - nr_samples--; - }; - - var updateUI = function updateUI() { - updateContainerProp(); - - var index = 0; - var nr = samples.length; - for (var i=0; i < nr; i++) - if (samples[i] !== null) { - samples[i].updatePosition(index); - index++; - } - - AddSampleButton.updatePosition(index); - }; - - var deleteSample = function deleteSample(e) { - trash_can.parentElement.setAttribute('drag-state', 'none'); - - var location = e.dataTransfer.getData('location'); - if (location !== 'picker-samples') - return; - - var sampleID = e.dataTransfer.getData('sampleID'); - samples[sampleID].deleteSample(); - console.log(samples); - - updateUI(); - }; - - var createDropSample = function createDropSample() { - var sample = document.createElement('div'); - sample.id = 'drop-effect-sample'; - sample.className = 'sample'; - container.appendChild(sample); - }; - - var setActivateSample = function setActivateSample(e) { - if (e.target.className !== 'sample') - return; - - unsetActiveSample(active); - Tool.unsetVoidSample(); - CanvasSamples.unsetActiveSample(); - active = samples[e.target.getAttribute('sample-id')]; - active.activate(); - }; - - var unsetActiveSample = function unsetActiveSample() { - if (active) - active.deactivate(); - active = null; - }; - - var getSampleColor = function getSampleColor(id) { - if (samples[id] !== undefined && samples[id]!== null) - return new Color(samples[id].color); - }; - - var updateContainerProp = function updateContainerProp() { - samples_per_line = ((container.clientWidth - 5) / 52) | 0; - var height = 52 * (1 + (nr_samples / samples_per_line) | 0); - container.style.height = height + 10 + 'px'; - }; - - var AddSampleButton = (function AddSampleButton() { - var node; - var _index = 0; - var _posX; - var _posY; - - var updatePosition = function updatePosition(index) { - _index = index; - _posY = 5 + ((index / samples_per_line) | 0) * 52; - _posX = 5 + ((index % samples_per_line) | 0) * 52; - - node.style.top = _posY + 'px'; - node.style.left = _posX + 'px'; - }; - - var addButtonClick = function addButtonClick() { - var sample = new ColorSample(); - container.appendChild(sample.node); - updatePosition(_index + 1); - updateUI(); - }; - - var init = function init() { - node = document.createElement('div'); - var icon = document.createElement('div'); - - node.className = 'sample'; - icon.id = 'add-icon'; - node.appendChild(icon); - node.addEventListener('click', addButtonClick); - - updatePosition(0); - container.appendChild(node); - }; - - return { - init : init, - updatePosition : updatePosition - }; - })(); - - var init = function init() { - container = getElemById('picker-samples'); - trash_can = getElemById('trash-can'); - - AddSampleButton.init(); - - for (var i=0; i<16; i++) { - var sample = new ColorSample(); - container.appendChild(sample.node); - } - - AddSampleButton.updatePosition(samples.length); - updateUI(); - - active = samples[0]; - active.activate(); - - container.addEventListener('click', setActivateSample); - - trash_can.addEventListener('dragover', allowDropEvent); - trash_can.addEventListener('dragenter', function() { - this.parentElement.setAttribute('drag-state', 'enter'); - }); - trash_can.addEventListener('dragleave', function(e) { - this.parentElement.setAttribute('drag-state', 'none'); - }); - trash_can.addEventListener('drop', deleteSample); - - UIColorPicker.subscribe('picker', function(color) { - if (active) - active.updateColor(color); - }); - - }; - - return { - init : init, - getSampleColor : getSampleColor, - unsetActiveSample : unsetActiveSample - }; - - })(); - - /** - * Canvas Samples - */ - var CanvasSamples = (function CanvasSamples() { - - var active = null; - var canvas = null; - var samples = []; - var zindex = null; - var tutorial = true; - - var CanvasSample = function CanvasSample(color, posX, posY) { - - var node = document.createElement('div'); - var pick = document.createElement('div'); - var delete_btn = document.createElement('div'); - node.className = 'sample'; - pick.className = 'pick'; - delete_btn.className = 'delete'; - - this.uid = samples.length; - this.node = node; - this.color = color; - this.updateBgColor(); - this.zIndex = 1; - - node.style.top = posY - 50 + 'px'; - node.style.left = posX - 50 + 'px'; - node.setAttribute('sample-id', this.uid); - - node.appendChild(pick); - node.appendChild(delete_btn); - - var activate = function activate() { - setActiveSample(this); - }.bind(this); - - node.addEventListener('dblclick', activate); - pick.addEventListener('click', activate); - delete_btn.addEventListener('click', this.deleteSample.bind(this)); - - UIComponent.makeDraggable(node); - UIComponent.makeResizable(node); - - samples.push(this); - canvas.appendChild(node); - return this; - }; - - CanvasSample.prototype.updateBgColor = function updateBgColor() { - this.node.style.backgroundColor = this.color.getColor(); - }; - - CanvasSample.prototype.updateColor = function updateColor(color) { - this.color.copy(color); - this.updateBgColor(); - }; - - CanvasSample.prototype.updateZIndex = function updateZIndex(value) { - this.zIndex = value; - this.node.style.zIndex = value; - }; - - CanvasSample.prototype.activate = function activate() { - this.node.setAttribute('data-active', 'true'); - zindex.setAttribute('data-active', 'true'); - - UIColorPicker.setColor('picker', this.color); - InputSliderManager.setValue('z-index', this.zIndex); - }; - - CanvasSample.prototype.deactivate = function deactivate() { - this.node.removeAttribute('data-active'); - zindex.removeAttribute('data-active'); - }; - - CanvasSample.prototype.deleteSample = function deleteSample() { - if (active === this) - unsetActiveSample(); - canvas.removeChild(this.node); - samples[this.uid] = null; - }; - - CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) { - this.node.style.top = posY - this.startY + 'px'; - this.node.style.left = posX - this.startX + 'px'; - }; - - var canvasDropEvent = function canvasDropEvent(e) { - var color = Tool.getSampleColorFrom(e); - - if (color) { - var offsetX = e.pageX - canvas.offsetLeft; - var offsetY = e.pageY - canvas.offsetTop; - var sample = new CanvasSample(color, offsetX, offsetY); - if (tutorial) { - tutorial = false; - canvas.removeAttribute('data-tutorial'); - var info = new CanvasSample(new Color(), 100, 100); - info.node.setAttribute('data-tutorial', 'dblclick'); - } - } - - }; - - var setActiveSample = function setActiveSample(sample) { - ColorPickerSamples.unsetActiveSample(); - Tool.unsetVoidSample(); - unsetActiveSample(); - active = sample; - active.activate(); - }; - - var unsetActiveSample = function unsetActiveSample() { - if (active) - active.deactivate(); - active = null; - }; - - var createToggleBgButton = function createToggleBgButton() { - var button = document.createElement('div'); - var state = false; - button.className = 'toggle-bg'; - canvas.appendChild(button); - - button.addEventListener('click', function() { - console.log(state); - state = !state; - canvas.setAttribute('data-bg', state); - }); - }; - - var init = function init() { - canvas = getElemById('canvas'); - zindex = getElemById('zindex'); - - canvas.addEventListener('dragover', allowDropEvent); - canvas.addEventListener('drop', canvasDropEvent); - - createToggleBgButton(); - - UIColorPicker.subscribe('picker', function(color) { - if (active) active.updateColor(color); - }); - - InputSliderManager.subscribe('z-index', function (value) { - if (active) active.updateZIndex(value); - }); - - UIComponent.makeResizable(canvas, 'height'); - }; - - return { - init : init, - unsetActiveSample : unsetActiveSample - }; - - })(); - - var StateButton = function StateButton(node, state) { - this.state = false; - this.callback = null; - - node.addEventListener('click', function() { - this.state = !this.state; - if (typeof this.callback === "function") - this.callback(this.state); - }.bind(this)); - }; - - StateButton.prototype.set = function set() { - this.state = true; - if (typeof this.callback === "function") - this.callback(this.state); - }; - - StateButton.prototype.unset = function unset() { - this.state = false; - if (typeof this.callback === "function") - this.callback(this.state); - }; - - StateButton.prototype.subscribe = function subscribe(func) { - this.callback = func; - }; - - - /** - * Tool - */ - var Tool = (function Tool() { - - var samples = []; - var controls = null; - var void_sw; - - var createPickerModeSwitch = function createPickerModeSwitch() { - var parent = getElemById('controls'); - var icon = document.createElement('div'); - var button = document.createElement('div'); - var hsv = document.createElement('div'); - var hsl = document.createElement('div'); - var active = null; - - icon.className = 'icon picker-icon'; - button.className = 'switch'; - button.appendChild(hsv); - button.appendChild(hsl); - - hsv.textContent = 'HSV'; - hsl.textContent = 'HSL'; - - active = hsl; - active.setAttribute('data-active', 'true'); - - function switchPickingModeTo(elem) { - active.removeAttribute('data-active'); - active = elem; - active.setAttribute('data-active', 'true'); - UIColorPicker.setPickerMode('picker', active.textContent); - }; - - var picker_sw = new StateButton(icon); - picker_sw.subscribe(function() { - if (active === hsv) - switchPickingModeTo(hsl); - else - switchPickingModeTo(hsv); - }); - - hsv.addEventListener('click', function() { - switchPickingModeTo(hsv); - }); - hsl.addEventListener('click', function() { - switchPickingModeTo(hsl); - }); - - parent.appendChild(icon); - parent.appendChild(button); - }; - - var setPickerDragAndDrop = function setPickerDragAndDrop() { - var preview = document.querySelector('#picker .preview-color'); - var picking_area = document.querySelector('#picker .picking-area'); - - preview.setAttribute('draggable', 'true'); - preview.addEventListener('drop', drop); - preview.addEventListener('dragstart', dragStart); - preview.addEventListener('dragover', allowDropEvent); - - picking_area.addEventListener('drop', drop); - picking_area.addEventListener('dragover', allowDropEvent); - - function drop(e) { - var color = getSampleColorFrom(e); - UIColorPicker.setColor('picker', color); - }; - - function dragStart(e) { - e.dataTransfer.setData('sampleID', 'picker'); - e.dataTransfer.setData('location', 'picker'); - }; - }; - - var getSampleColorFrom = function getSampleColorFrom(e) { - var sampleID = e.dataTransfer.getData('sampleID'); - var location = e.dataTransfer.getData('location'); - - if (location === 'picker') - return UIColorPicker.getColor(sampleID); - if (location === 'picker-samples') - return ColorPickerSamples.getSampleColor(sampleID); - if (location === 'palette-samples') - return ColorPalette.getSampleColor(sampleID); - }; - - var setVoidSwitch = function setVoidSwitch() { - var void_sample = getElemById('void-sample'); - void_sw = new StateButton(void_sample); - void_sw.subscribe( function (state) { - void_sample.setAttribute('data-active', state); - if (state === true) { - ColorPickerSamples.unsetActiveSample(); - CanvasSamples.unsetActiveSample(); - } - }); - }; - - var unsetVoidSample = function unsetVoidSample() { - void_sw.unset(); - }; - - var init = function init() { - controls = getElemById('controls'); - - var color = new Color(); - color.setHSL(0, 51, 51); - UIColorPicker.setColor('picker', color); - - setPickerDragAndDrop(); - createPickerModeSwitch(); - setVoidSwitch(); - }; - - return { - init : init, - unsetVoidSample : unsetVoidSample, - getSampleColorFrom : getSampleColorFrom - }; - - })(); - - var init = function init() { - UIColorPicker.init(); - InputSliderManager.init(); - ColorInfo.init(); - ColorPalette.init(); - ColorPickerSamples.init(); - CanvasSamples.init(); - Tool.init(); - }; - - return { - init : init - }; - -})(); - - - - - -{{CSSRef}} - - - - -Cet outil vous permet de définir des couleurs web personnalisées. - - - - - -L'outil offre également une conversion facile entre les différents formats de couleurs CSS: couleurs hexadécimales, RVB (Rouge, Vert, Bleu) (aussi appelé RGB en anglais) et TSL (Teinte, Saturation Luminosité) (aussi appelé HSL en anglais). Le canal Alpha est également pris en charge pour les formats RGB (rgba) et HSL (hsla). - - - - - -Chaque couleur est prédéfinie dans les 3 formats standard CSS. - - - - - -En fonction de la couleur courante, une palette de couleurs est générée sur une échelle TSL ainsi que sur une échelle de transparence (en faisant varier l'alpha). - - - - - -Le sélecteur peut être réglé sur les formats HSL ou HSV (valeur de teinte et staturation). - - - - - -{{EmbedLiveSample('ColorPIcker_Tool', '100%', '900')}} - - - -Voir aussi - - - Appliquer des couleurs sur des éléments HTML avec CSS - La mise en forme du texte et les polices - Mettre en forme des bordures avec CSS - Modifier l'arrière-plan avec CSS - Les couleurs et le contraste -``` +{{EmbedGHLiveSample("css-examples/tools/color-picker/", '100%', 900)}}
\ No newline at end of file diff --git a/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md b/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md index ebb8984bf0..3975a675e2 100644 --- a/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md +++ b/files/fr/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md @@ -1,12 +1,6 @@ --- title: Les concepts de base des grilles CSS slug: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout -tags: - - CSS - - CSS Grids - - Grilles CSS - - Guide - - Intermédiaire translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout original_slug: Web/CSS/CSS_Grid_Layout/Les_concepts_de_base --- @@ -135,7 +129,7 @@ Nous avons créé une grille avec trois pistes de 200 pixels de large. Chaque é } ``` -{{ EmbedLiveSample('grid_first', '610', '140') }} +{{ EmbedLiveSample('Les_pistes', '610', '140') }} ### L'unité fr diff --git a/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.md b/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.md index 3a3d192874..2ae251e3d2 100644 --- a/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.md +++ b/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.md @@ -1,12 +1,6 @@ --- title: L'alignement des boîtes avec les grilles CSS slug: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout -tags: - - CSS - - CSS Grid - - Grille CSS - - Guides - - Intermédiaire translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout original_slug: Web/CSS/CSS_Grid_Layout/Alignement_des_boîtes_avec_les_grilles_CSS --- @@ -102,7 +96,7 @@ Dans l'exemple suivant, on a quatre zones sur la grille. On peut utiliser la pro </div> ``` -{{EmbedLiveSample('utiliser_align-items', '500', '450')}} +{{EmbedLiveSample('Utiliser_align-items', '500', '450')}} Lorsqu'on utilise `align-self: start`, la hauteur de chaque `<div>` sera déterminée par le contenu du `<div>`. En revanche, si on n'utilise pas {{cssxref("align-self")}}, chaque `<div>` sera étiré afin de remplir la zone de la grille. @@ -168,7 +162,7 @@ Dans le prochain exemple, on utilise la propriété `align-self` afin d'illustre </div> ``` -{{EmbedLiveSample('utiliser_align-self', '500', '450')}} +{{EmbedLiveSample('Utiliser_align-self', '500', '450')}} ### Gestion des objets avec un ratio intrinsèque @@ -250,9 +244,7 @@ Là encore, la valeur par défaut `stretch` pour les objets qui n'ont pas de rat </div> ``` -Justifier_les_objets_sur_laxe_en_ligne_inline_axis - -{{EmbedLiveSample('alignment_3', '500', '450')}} +{{EmbedLiveSample('Justifier_les_objets_sur_laxe_en_ligne_inline_axis', '500', '450')}} Comme pour {{cssxref("align-self")}} et {{cssxref("align-items")}}, on peut utiliser la propriété {{cssxref("justify-items")}} sur le conteneur de la grille afin de régler la valeur de {{cssxref("justify-self")}} pour l'ensemble des objets de la grille. @@ -389,7 +381,7 @@ La propriété `align-content` s'applique sur le conteneur de la grille car elle </div> ``` -{{EmbedLiveSample('alignement_par_defaut', '500', '520')}} +{{EmbedLiveSample('Alignement_par_défaut', '500', '520')}} ### Utiliser align-content: end @@ -450,7 +442,7 @@ Si on ajoute `align-content` avec la valeur `end` sur le conteneur, les pistes s </div> ``` -{{EmbedLiveSample('align-content_end', '500', '520')}} +{{EmbedLiveSample('Utiliser_align-content_end', '500', '520')}} ### Utiliser align-content: space-between @@ -511,7 +503,7 @@ Pour cette propriété, on peut également utiliser des valeurs qu'on manipule a </div> ``` -{{EmbedLiveSample('align-content_end_space-between', '500', '1570')}} +{{EmbedLiveSample('Utiliser_align-content_space-between', '500', '1570')}} On notera qu'en utilisant ces valeurs pour répartir l'espace, cela peut agrandir les objets de la grille. Si un objet s'étale sur plusieurs pistes, un espace sera ajouté entre chaque piste afin que l'objet qui doit être agrandi puisse absorber cet espace. Aussi, si vous choisissez d'utiliser ces valeurs, assurez-vous que le contenu des pistes puisse absorber cet espace supplémentaire ou que les propriétés d'alignement les renvoient au début de la piste plutôt que de les étirer. diff --git a/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.md b/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.md index 6291e0ad41..2bddcda1bb 100644 --- a/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.md +++ b/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.md @@ -1,12 +1,6 @@ --- title: Les grilles CSS et l'amélioration progressive slug: Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement -tags: - - CSS - - CSS Grids - - Grilles CSS - - Guide - - Intermédiaire translation_of: Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement original_slug: Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_et_l_amélioration_progressive --- @@ -182,7 +176,7 @@ Dans le prochain exemple, nous aurons un ensemble de cartes disposées avec du f </div> ``` -{{EmbedLiveSample('un_exemple_plus_complexe', '550', '400')}} +{{EmbedLiveSample('Un_exemple_plus_complexe', '550', '400')}} Dans la capture qui suit, on voit un problème classique qui est causé par les dispositions flottantes : si on ajoute du contenu à l'une des cartes, la disposition est chamboulée. @@ -291,7 +285,7 @@ On utilise donc `@supports` pour vérifier la prise en charge de `display: grid` </div> ``` -{{EmbedLiveSample('une_solution_avec_les_requetes_de_fonctionnalité', '550', '480')}} +{{EmbedLiveSample('Une_solution_avec_les_requêtes_de_fonctionnalité', '550', '480')}} ## Surcharger les autres valeurs pour `display` diff --git a/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.md b/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.md index 9cf0afc469..f22c645dc6 100644 --- a/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.md +++ b/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.md @@ -1,12 +1,6 @@ --- title: Les grilles CSS, les valeurs logiques et les modes d'écriture slug: Web/CSS/CSS_Grid_Layout/CSS_Grid_Logical_Values_and_Writing_Modes -tags: - - CSS - - CSS Grids - - Grilles CSS - - Guides - - Intermédiaire translation_of: Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes original_slug: >- Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture @@ -184,7 +178,7 @@ Si on ajoute `writing-mode: vertical-lr` au conteneur de la grille, on peut voir </div> ``` -{{EmbedLiveSample("definir_writing-mode", '500', '330')}} +{{EmbedLiveSample("Définir_writing-mode", '500', '330')}}  @@ -313,7 +307,7 @@ Dans l'exemple suivant, on a une grille avec la direction `ltr` et on positionne </div> ``` -{{EmbedLiveSample("placement_sur_les_lignes_pour_du_texte_de_gauche_à _droite", '500', '330')}} +{{EmbedLiveSample("Placement_sur_les_lignes_pour_du_texte_de_gauche_à _droite", '500', '330')}} ### Placement sur les lignes pour du texte de droite à gauche @@ -365,7 +359,7 @@ Si on ajoute alors la propriété {{cssxref("direction")}} avec la valeur `rtl` </div> ``` -{{EmbedLiveSample("placement_sur_les_lignes_pour_du_texte_de_droite_à _gauche", '500', '330')}} +{{EmbedLiveSample("Placement_sur_les_lignes_pour_du_texte_de_droite_à _gauche", '500', '330')}} On voit ici que si on change la direction du texte pour la page ou pour une partie de la page : la disposition change selon lees numéros de lignes. Si on ne veut pas que les lignes bougent, on pourra utiliser des lignes nommées pour éviter cet effet. diff --git a/files/fr/web/css/css_grid_layout/grid_template_areas/index.md b/files/fr/web/css/css_grid_layout/grid_template_areas/index.md index b340f23c01..aba4861212 100644 --- a/files/fr/web/css/css_grid_layout/grid_template_areas/index.md +++ b/files/fr/web/css/css_grid_layout/grid_template_areas/index.md @@ -1,11 +1,6 @@ --- title: Définir des zones sur une grille slug: Web/CSS/CSS_Grid_Layout/Grid_Template_Areas -tags: - - CSS - - CSS Grids - - Grilles CSS - - Guide translation_of: Web/CSS/CSS_Grid_Layout/Grid_Template_Areas original_slug: Web/CSS/CSS_Grid_Layout/Définir_des_zones_sur_une_grille --- @@ -232,7 +227,7 @@ La zone qu'on crée avec les noms doit être rectangulaires. Actuellement, il n' La valeur utilisée pour {{cssxref("grid-template-areas")}} doit obligatoirement décrire une grille complète, sinon elle est considérée invalide et la propriété est ignorée. Cela signifie qu'il faut le même nombre de cellules pour chaque ligne (si une cellule est vide, on l'indiquera avec un point). Si des zones ne sont pas rectangulaires, cela sera également considéré comme invalide. -## Redéfinir une grille à avec des _media queries_ +## Redéfinir une grille avec des _media queries_ Notre disposition fait désormais partie de notre feuille de style CSS. On peut donc l'adapter très facilement pour différentes résolutions. On peut redéfinir la position des objets sur la grille ou la grille elle-même, ou les deux simultanément. diff --git a/files/fr/web/css/css_grid_layout/layout_using_named_grid_lines/index.md b/files/fr/web/css/css_grid_layout/layout_using_named_grid_lines/index.md index 4b6a3c350d..73115758da 100644 --- a/files/fr/web/css/css_grid_layout/layout_using_named_grid_lines/index.md +++ b/files/fr/web/css/css_grid_layout/layout_using_named_grid_lines/index.md @@ -286,7 +286,7 @@ On peut également utiliser le mot-clé `span`. Avec la règle suivante, le deux </div> ``` -{{EmbedLiveSample("une_grille_à _12_colonnes_avec_repeat", '500', '330')}} +{{EmbedLiveSample("Une_grille_à _12_colonnes_avec_repeat", '500', '330')}} Si vous observez cette disposition grâce à l'outil de mise en évidence des grilles dans Firefox, vous verrez les différentes lignes et le placement des éléments sur ces lignes : @@ -426,7 +426,7 @@ Pour placer ces éléments, on utilise la grille de la façon suivante : } ``` -{{ EmbedLiveSample('cadre_d_une_grille_à _12_colonnes', '500', '330') }} +{{ EmbedLiveSample('Cadre_dune_grille_à _12_colonnes', '500', '330') }} Là encore, l'outil de mise en évidence de la grille permet de voir comment le placement fonctionne : diff --git a/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.md b/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.md index 2bfa068958..50b9b76b05 100644 --- a/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.md +++ b/files/fr/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.md @@ -1,12 +1,6 @@ --- title: Construire des dispositions courantes avec des grilles CSS slug: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout -tags: - - CSS - - CSS Grids - - Grilles CSS - - Guide - - Intermédiaire translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout original_slug: >- Web/CSS/CSS_Grid_Layout/Construire_des_dispositions_courantes_avec_des_grilles_CSS @@ -550,7 +544,7 @@ h2 { } ``` -{{EmbedLiveSample('empecher_les_espaces_avec_dense', '800', '900')}} +{{EmbedLiveSample('Empêcher_les_espaces_avec_dense', '800', '900')}} Cette technique de placement automatiquement peut s'avérer extrêmement utile si vous devez gérer du contenu produit par un CMS pour un ensemble d'objets qui se ressemblent et auxquels vous ajoutez une classe lors de la génération en HTML. diff --git a/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.md b/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.md index 5272f1bbdb..b02c8290f6 100644 --- a/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.md +++ b/files/fr/web/css/css_grid_layout/relationship_of_grid_layout/index.md @@ -510,7 +510,7 @@ Si on utilise `display:` `contents` sur un élément, la boîte qu'il aurait nor } ``` -{{EmbedLiveSample('utiliser_display_contents_avant', '400', '420')}} +{{EmbedLiveSample('Utiliser_display_contents_avant', '400', '420')}} ### Utiliser display contents après @@ -567,7 +567,7 @@ Si on ajoute `display:` `contents` aux règles qui ciblent `box1`, la boîte de } ``` -{{EmbedLiveSample('utiliser_display_contents_après', '400', '330')}} +{{EmbedLiveSample('Utiliser_display_contents_après', '400', '330')}} Cela permet que des éléments imbriqués agissent comme s'ils faisaient partie de la grille. C'est également une méthode de contournement pour certains problèmes qui seront résolus par les « sous-grilles » (_subgrids_) lorsqu'elles seront implémentées. Vous pouvez également utiliser `display:` `contents` de façon similaire avec les boîtes flexibles afin que les éléments imbriqués deviennent des éléments flexibles. diff --git a/files/fr/web/css/css_images/using_css_gradients/index.md b/files/fr/web/css/css_images/using_css_gradients/index.md index 87cb6a287b..48f6374f00 100644 --- a/files/fr/web/css/css_images/using_css_gradients/index.md +++ b/files/fr/web/css/css_images/using_css_gradients/index.md @@ -1,10 +1,6 @@ --- title: Utilisation de dégradés CSS slug: Web/CSS/CSS_Images/Using_CSS_gradients -tags: - - Avancé - - CSS - - Guide translation_of: Web/CSS/CSS_Images/Using_CSS_gradients original_slug: Web/CSS/Utilisation_de_dégradés_CSS --- @@ -188,7 +184,7 @@ div { #### Résultat -{{EmbedLiveSample("Arrêts_de_couleur",120,120)}} +{{EmbedLiveSample("Arrêts_de_couleurs",120,120)}} Notez que la première et la dernière couleur n'indiquent pas d'emplacement ; en conséquence les valeurs 0% et 100% sont assignées automatiquement. La couleur centrale indique un emplacement à 80%, ce qui la place proche du bas. diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.md b/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.md index 7344ca0196..964ea9c510 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.md +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.md @@ -1,14 +1,6 @@ --- title: Empilement et éléments flottants slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float -tags: - - Avancé - - CSS - - Contextes d’empilement - - Guide - - Ordre d’empilement - - float - - z-index translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float original_slug: Web/CSS/Comprendre_z-index/Empilement_et_float --- @@ -35,7 +27,7 @@ Ce comportement peut être expliqué en améliorant la liste précédente : > **Note :** Dans l'exemple qui suit, tous les blocs sont transparents, excepté celui qui n'est pas positionné, montrant ainsi l'ordre d'empilement. Si l'on réduit l'opacité du bloc non positionné (DIV #4), il se produit quelque chose d'étrange : l'arrière-plan et la bordure de cet élément se placent par dessus les blocs flottants et les blocs positionnés. Il s'agit d'une interprétation particulière des spécifications CSS : l'application de l'opacité crée un nouveau contexte d'empilement (voir l'article : [What No One Told You About Z-Index](https://philipwalton.com/articles/what-no-one-told-you-about-z-index/) de Philip Walton ou son excellente traduction de Vincent De Oliveira, [Ce que personne ne vous a dit sur z-index](https://iamvdo.me/blog/comprendre-z-index-et-les-contextes-dempilement) et, bien-sûr, la [spécification](https://www.w3.org/TR/CSS2/zindex.html)). -{{EmbedLiveSample("Code_source_de_l’exemple", 600, 250)}} +{{EmbedLiveSample("Code_source_de_lexemple", 600, 250)}} ## Code source de l'exemple diff --git a/files/fr/web/css/cursor/index.md b/files/fr/web/css/cursor/index.md index b480e8503f..faa7a59133 100644 --- a/files/fr/web/css/cursor/index.md +++ b/files/fr/web/css/cursor/index.md @@ -1,17 +1,6 @@ --- title: cursor slug: Web/CSS/cursor -tags: - - Arrow - - CSS - - CSS Property - - Cursor - - Custom Cursor - - Reference - - UI - - mouse - - pointer - - recipe:css-property translation_of: Web/CSS/cursor browser-compat: css.properties.cursor --- @@ -402,7 +391,7 @@ Pour plus d'informations, voir le tableau de compatibilité ci-après. ### Résultat -{{EmbedLiveSample("examples")}} +{{EmbedLiveSample("Exemples")}} ## Spécifications diff --git a/files/fr/web/css/display-box/index.md b/files/fr/web/css/display-box/index.md index 5846c64b47..59d50659ec 100644 --- a/files/fr/web/css/display-box/index.md +++ b/files/fr/web/css/display-box/index.md @@ -1,10 +1,6 @@ --- title: <display-box> slug: Web/CSS/display-box -tags: - - CSS - - Reference - - Type de donnée translation_of: Web/CSS/display-box --- {{CSSRef}} @@ -78,7 +74,7 @@ Dans cet exemple, l'élément {{htmlelement("div")}} externe a une bordure rouge #### Résultat -{{EmbedLiveSample("Display_contents", 300, 60)}} +{{EmbedLiveSample("display_contents", 300, 60)}} ## Accessibilité diff --git a/files/fr/web/css/easing-function/index.md b/files/fr/web/css/easing-function/index.md index 283017f125..f29b7fb730 100644 --- a/files/fr/web/css/easing-function/index.md +++ b/files/fr/web/css/easing-function/index.md @@ -253,7 +253,7 @@ selectElem.addEventListener("change", () => { #### Résultat -{{EmbedLiveSample('comparaison_des_fonctions_de_transition', '100%', 300)}} +{{EmbedLiveSample('Comparaison_des_fonctions_de_transition', '100%', 300)}} ### Exemples avec cubic-bezier() diff --git a/files/fr/web/css/env()/index.md b/files/fr/web/css/env()/index.md index 2cdb018289..059664aaf8 100644 --- a/files/fr/web/css/env()/index.md +++ b/files/fr/web/css/env()/index.md @@ -1,13 +1,6 @@ --- title: env() slug: Web/CSS/env() -tags: - - CSS - - CSS Function - - CSS Variables - - Fonction - - Reference - - env() translation_of: Web/CSS/env() --- {{CSSRef}} @@ -57,7 +50,7 @@ env(safe-area-inset-left, 1.4rem); {{csssyntax}} -## Examples +## Exemples Dans l'exemple qui suit, on utilise le deuxième paramètre de la notation fonctionnelle `env()` afin de fournir une valeur de recours lorsque la variable d'environnement n'est pas disponible. diff --git a/files/fr/web/css/flex-wrap/index.md b/files/fr/web/css/flex-wrap/index.md index 606e97356d..c5453671f5 100644 --- a/files/fr/web/css/flex-wrap/index.md +++ b/files/fr/web/css/flex-wrap/index.md @@ -1,10 +1,6 @@ --- title: flex-wrap slug: Web/CSS/flex-wrap -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/flex-wrap --- {{CSSRef}} @@ -36,7 +32,7 @@ La propriété `flex-wrap` peut être défini grâce à l'un des mots-clés suiv - `nowrap` - : Les éléments flexibles sont disposés sur une seule ligne. Cela peut entraîner un dépassement du conteneur. La ligne **cross-start** est équivalente à **start** ou à **before** selon la valeur de {{cssxref("flex-direction")}}. Cette valeur est la valeur par défaut. - `wrap` - - : Les éléments flexibles sont disposé sur plusieurs lignes. La ligne **cross-start** est équivalente à  **start** ou **before** en fonction de la valeur de `flex-direction` et la ligne **cross-end** est à l'opposée **cross-start**. + - : Les éléments flexibles sont disposé sur plusieurs lignes. La ligne **cross-start** est équivalente à **start** ou **before** en fonction de la valeur de `flex-direction` et la ligne **cross-end** est à l'opposée **cross-start**. - `wrap-reverse` - : Se comporte comme `wrap` mais **cross-start** et **cross-end** sont permutées. @@ -77,52 +73,53 @@ La propriété `flex-wrap` peut être défini grâce à l'un des mots-clés suiv .contenu, .contenu1, .contenu2 { - color: #fff; - font: 100 24px/100px sans-serif; - height: 150px; - text-align: center; + color: #fff; + font: 100 24px/100px sans-serif; + height: 150px; + width: 897px; + text-align: center; } .contenu div, .contenu1 div, .contenu2 div { - height: 50%; - width: 300px; + height: 50%; + width: 300px; } .rouge { - background: orangered; + background: orangered; } .vert { - background: yellowgreen; + background: yellowgreen; } .bleu { - background: steelblue; + background: steelblue; } /* Styles pour les boîtes flexibles*/ .contenu { - display: flex; - flex-wrap: wrap; + display: flex; + flex-wrap: wrap; } .contenu1 { - display: flex; - flex-wrap: nowrap; + display: flex; + flex-wrap: nowrap; } .contenu2 { - display: flex; - flex-wrap: wrap-reverse; + display: flex; + flex-wrap: wrap-reverse; } ``` ### Résultat -{{EmbedLiveSample('Examples', '700px', '700px', '', 'Web/CSS/flex-wrap')}} +{{EmbedLiveSample('Exemples', '700px', '700px')}} ## Spécifications -| Spécification | État | Commentaires | +| Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | -------------------------------- | ------------ | -| {{SpecName('CSS3 Flexbox', '#flex-wrap-property', 'flex-wrap')}} | {{Spec2('CSS3 Flexbox')}} |  | +| {{SpecName('CSS3 Flexbox', '#flex-wrap-property', 'flex-wrap')}} | {{Spec2('CSS3 Flexbox')}} | | {{cssinfo}} diff --git a/files/fr/web/css/flex/index.md b/files/fr/web/css/flex/index.md index a2d14125d5..a0e2170ebb 100644 --- a/files/fr/web/css/flex/index.md +++ b/files/fr/web/css/flex/index.md @@ -1,10 +1,6 @@ --- title: flex slug: Web/CSS/flex -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/flex --- {{CSSRef}} @@ -111,7 +107,7 @@ Pour la plupart des cas, on utilisera une des valeurs suivantes : `auto`, `initi } ``` -{{EmbedLiveSample("description", "100%","370")}} +{{EmbedLiveSample("Description", "100%","370")}} Par défaut, les éléments flexibles ne se rétrécissent pas en dessous de la taille minimale du contenu. Pour modifier ce comportement, il faudra paramétrer {{cssxref("min-width")}} ou {{cssxref("min-height")}}. diff --git a/files/fr/web/css/forced-color-adjust/index.md b/files/fr/web/css/forced-color-adjust/index.md index eb8aa42f4d..821fa8e2da 100644 --- a/files/fr/web/css/forced-color-adjust/index.md +++ b/files/fr/web/css/forced-color-adjust/index.md @@ -84,7 +84,7 @@ En utilisant la fonctionnalité média [`forced-colors`](/fr/docs/Web/CSS/@media #### Résultat -{{EmbedLiveSample("preserving_colors", 640, 260)}} +{{EmbedLiveSample("Exemples", 640, 260)}}  diff --git a/files/fr/web/css/gap/index.md b/files/fr/web/css/gap/index.md index e8142808f4..37dacfdc85 100644 --- a/files/fr/web/css/gap/index.md +++ b/files/fr/web/css/gap/index.md @@ -1,11 +1,6 @@ --- title: gap (grid-gap) slug: Web/CSS/gap -tags: - - CSS - - Propriété - - Propriété raccourcie - - Reference translation_of: Web/CSS/gap --- {{CSSRef}} @@ -177,7 +172,7 @@ Cette propriété est définie avec une valeur `<'row-gap'>`, éventuellement su #### Résultat -{{EmbedLiveSample("Multi-column_layout", "auto", "120px")}} +{{EmbedLiveSample("Multi-colonnes", "auto", "120px")}} ## Spécifications diff --git a/files/fr/web/css/gradient/index.md b/files/fr/web/css/gradient/index.md index 9889e81e8d..301d0cd05e 100644 --- a/files/fr/web/css/gradient/index.md +++ b/files/fr/web/css/gradient/index.md @@ -1,10 +1,6 @@ --- title: <gradient> slug: Web/CSS/gradient -tags: - - CSS - - Reference - - Type translation_of: Web/CSS/gradient --- {{CSSRef}} @@ -72,7 +68,7 @@ body { {{EmbedLiveSample('Les_dégradés_répétés', 600, 20)}} -#### Dégradé conique +### Dégradé conique Les couleurs de transitions s'appliquent progressivement autour d'un cercle. Un tel dégradé est généré avec la fonction {{cssref("conic-gradient","conic-gradient()")}}. @@ -93,7 +89,7 @@ div { } ``` -{{EmbedLiveSample('dégradé_conique', 240, 80)}} +{{EmbedLiveSample('Dégradé_conique', 240, 80)}} ## Spécifications diff --git a/files/fr/web/css/gradient/linear-gradient()/index.md b/files/fr/web/css/gradient/linear-gradient()/index.md new file mode 100644 index 0000000000..c32f3caf0b --- /dev/null +++ b/files/fr/web/css/gradient/linear-gradient()/index.md @@ -0,0 +1,194 @@ +--- +title: linear-gradient() +slug: Web/CSS/gradient/linear-gradient() +translation-of: Web/CSS/gradient/linear-gradient() +browser-compat: css.types.image.gradient.linear-gradient +--- +{{CSSRef}} + +La [fonction](/fr/docs/Web/CSS/CSS_Functions) [CSS](/fr/docs/Web/CSS) **`linear-gradient()`** crée une image qui est un dégradé entre deux ou plusieurs couleurs le long d'une ligne droite. Elle fournit une valeur de type [`<gradient>`](/fr/docs/Web/CSS/gradient) qui est un type spécial d'image ([`<image>`](/fr/docs/Web/CSS/image)). + +{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}} + +## Syntaxe + +```css +/* Un dégradé incliné de 45 degrés, + commençant en bleu et finissant en rouge. */ +linear-gradient(45deg, blue, red); + +/* Un dégradé commençant en bas à droite et + allant jusqu'au coin supérieur gauche, + commençant en bleu et finissant en rouge. */ +linear-gradient(to left top, blue, red); + +/* Un arrêt de couleur : un dégradé allant de bas + en haut, commençant en bleu, devenant vert à 40% + de sa longueur et finissant en rouge. */ +linear-gradient(0deg, blue, green 40%, red); + +/* Une indication de couleur : un dégradé allant de + gauche à droite, commençant en rouge atteignant la + couleur intermédiaire à 10% de la longueur du + dégradé et prenant les 90% restant pour passer + au bleu. */ +linear-gradient(.25turn, red, 10%, blue); + +/* Un dégradé avec plusieurs arrêts de couleur : + un dégradé incliné de 45 degrés commençant en bas à + gauche avec une moitié rouge et avec une moitié bleue + en haut à droite où une ligne dure marque le + changement entre rouge et bleu */ +linear-gradient(45deg, red 0 50%, blue 50% 100%); +``` + +### Values + +- `<side-or-corner>` + + - : La position du point de départ de la ligne selon laquelle évolue le dégradé. Si elle est indiquée, elle se compose du mot `to` et peut contenir jusqu'à deux mots-clés : le premier indiquant le côté horizontal (`left` ou `right` pour indiquer respectivement gauche ou droite), et le second indiquant le côté vertical (`top` ou `bottom` pour indiquer respectivement haut ou bas). L'ordre des deux mots-clés n'a pas d'importance. Si aucun n'est utilisé, la valeur par défaut sera `to bottom`. + + Les valeurs `to top`, `to bottom`, `to left`, et `to right` sont respectivement équivalentes aux angles `0deg`, `180deg`, `270deg`, et `90deg`. Les autres valeurs sont traduites en un angle. + +- [`<angle>`](/fr/docs/Web/CSS/angle) + - : L'angle de la ligne du dégradé. Une valeur de `0deg` sera équivalente à `to top` ; les valeurs plus élevées évoluant dans le sens horaire. +- `<linear-color-stop>` + - : Un arrêt de couleur indiqué par une valeur [`<color>`](/fr/docs/Web/CSS/color) suivie d'une ou deux positions d'arrêt (chacune étant indiquée comme un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)) ou une longueur ([`<length>`](/fr/docs/Web/CSS/length)) le long de l'axe du dégradé). +- `<color-hint>` + - : Une indication d'interpolation qui définit la progression du dégradé entre deux arrêts de couleur adjacents. La longueur définit à quel point entre les deux arrêts le dégradé doit atteindre la couleur intermédiaire. Si cette valeur est absente, la valeur intermédiaire sera atteinte à mi-parcours entre les deux arrêts. + +> **Note :** Le rendu des [arrêts de couleur pour les dégradés CSS](#dégradé_avec_plusieurs_arrêts_de_couleur) suit les mêmes règles que [celui des arrêts de couleur pour les dégradés SVG](/fr/docs/Web/SVG/Tutorial/Gradients). + +## Description + +Comme tout autre dégradé, un dégradé linéaire [ne possède pas de dimensions intrinsèques](/fr/docs/Web/CSS/image#description) ; c'est-à -dire qu'il n'a pas de taille naturelle ou préférée ni de ratio d'affichage préféré. Sa taille réelle correspondra à celle de l'élément auquel il s'applique. + +Pour créer un dégradé linéaire qui se répète jusqu'à remplir son conteneur, on utilisera plutôt la fonction [`repeating-linear-gradient()`](/fr/docs/Web/CSS/gradient/repeating-linear-gradient()). + +Étant donné que le type `<gradient>` est un sous-type du type `<image>`, on peut utiliser des dégradés à tout endroit où on peut utiliser une image. C'est également pour cette raison que `linear-gradient()` ne fonctionnera pas pour la propriété [`background-color`](/fr/docs/Web/CSS/background-color) et pour les autres propriétés qui utilisent le type de données [`<color>`](/fr/docs/Web/CSS/color). + +### Composition d'un dégradé linéaire + +Un dégradé linéaire est défini par un axe : la _ligne du dégradé_ et deux ou plusieurs _arrêts de couleur_. Chaque point sur l'axe aura une couleur distincte. Pour créer un dégradé doux, la fonction `linear-gradient()` dessine une suite de lignes colorées, perpendiculaires à l'axe du dégradé, dont la couleur de chacune correspond à la couleur du point d'intersection sur la ligne du dégradé. + + + +La ligne du dégradé est définie par le centre de la boîte contenant l'image et par un angle. Les couleurs du dégradé sont déterminées par deux ou plusieurs points : le point de départ, le point d'arrivée et, éventuellement entre, des points d'arrêts de couleur. + +Le _point de départ_ est situé sur la ligne du dégradé où la première couleur commence. Le _point d'arrivée_ est situé là où la dernière couleur finit. Chacun de ces deux points est défini par l'intersection de la ligne du dégradé avec une ligne perpendiculaire du coin de la boîte correspondant. Le point de fin peut être considéré comme le symétrique du point de départ. Ces définitions relativement complexes peuvent mener à des effets intéressants intitulés « coins magiques » : les coins les plus proches des points de départ et d'arrivée ont la même couleur (respectivement) que ces deux points. + +#### Personnaliser des dégradés + +En ajoutant plusieurs arrêts de couleur sur la ligne du dégradé, il est possible de créer une transition personnalisée entre plusieurs couleurs. La position d'un point d'arrêt de couleur peut être explicitement définie en utilisant une longueur ([`<length>`](/fr/docs/Web/CSS/length)) ou un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)). Si on n'indique pas l'emplacement d'un arrêt de couleur, celui-ci sera placé à la position intermédiaire entre celui qui précède et le suivant. Ainsi, les deux dégradés qui suivent sont équivalents : + +```css +linear-gradient(red, orange, yellow, green, blue); +linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%); +``` + +Par défaut, les couleurs évoluent de façon progressive entre deux arrêts de couleur successifs et la couleur intermédiaire est atteinte au milieu de ces deux points. Il est possible de déplacer ce point intermédiaire entre les deux arrêts de couleurs en ajoutant une indication de couleur entre les deux arrêts afin d'indiquer l'emplacement souhaité, exprimé en pourcentage. Dans l'exemple suivant, on commence par un rouge allant du début jusqu'à 10% de la ligne et finissant par un bleu à partir de 90% jusqu'à la fin. Entre 10% et 90%, les couleurs passent du rouge au bleu. Toutefois, le point intermédiaire est atteint à 30% entre les deux plutôt qu'à 50%. + +```css +linear-gradient(red 10%, 30%, blue 90%); +``` + +Si deux arrêts de couleur sont situés au même endroit, la transition sera une ligne dure entre la première et la dernière couleur déclarées à cet emplacement. + +Les arrêts de couleur doivent être listés dans l'ordre croissant. Les arrêts de couleur qui suivent avec une valeur inférieure écraseront les valeurs des arrêts de couleur précédents et créeront une transition dure. Dans l'exemple qui suit, on passe du rouge au jaune à 40% puis la transition se fait entre le jaune et le bleu pour 25% du dégradé. + +```css +linear-gradient(red 40%, yellow 30%, blue 65%); +``` + +Il est possible d'avoir des arrêts de couleur à plusieurs positions pour une même couleur. On peut déclarer une couleur comme deux arrêts de couleur adjacents en incluant les deux positions dans la déclaration CSS. Les trois dégradés qui suivent sont équivalents : + +```css +linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%); +linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%); +linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%); +``` + +Par défaut, s'il n'y a pas de couleur avec un arrêt situé à 0%, ce sera la première couleur déclarée qui sera utilisée à ce point. De même la dernière couleur déclarée continuera jusqu'à 100%. + +## Exemples + +### Un dégradé avec un angle de 45 degrés + +```css hidden +body { + width: 100vw; + height: 100vh; +} +``` + +```css +body { + background: linear-gradient(45deg, red, blue); +} +``` + +{{EmbedLiveSample("Un_dégradé_avec_un_angle_de_45_degrés", 120, 120)}} + +### Un dégradé commençant à 60% de la ligne du dégradé + +```css hidden +body { + width: 100vw; + height: 100vh; +} +``` + +```css +body { + background: linear-gradient(135deg, orange 60%, cyan); +} +``` + +{{EmbedLiveSample("Un_dégradé_commençant_à _60%_de_la_ligne_du_dégradé", 120, 120)}} + +### Un dégradé avec des arrêts de couleur à plusieurs positions + +Cet exemple illustre des arrêts de couleur avec plusieurs positions et avec des arrêts adjacents utilisant la même couleur, créant ainsi des bandes. + +```css hidden +body { + width: 100vw; + height: 100vh; +} +``` + +```css +body { + background: linear-gradient(to right, + red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%); +} +``` + +{{EmbedLiveSample("Un_dégradé_avec_des_arrêts_de_couleur_à _plusieurs_positions", 120, 120)}} + +### D'autres exemples de dégradés linéaires + +Voir la page [Utiliser les dégradés CSS](/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients) pour plus d'exemples. + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [Utiliser les dégradés CSS](/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- Les autres fonctions de dégradés : + - [`repeating-linear-gradient()`](/fr/docs/Web/CSS/gradient/repeating-linear-gradient()) + - [`radial-gradient()`](/fr/docs/Web/CSS/gradient/radial-gradient()) + - [`repeating-radial-gradient()`](/fr/docs/Web/CSS/gradient/repeating-radial-gradient()) + - [`conic-gradient()`](/fr/docs/Web/CSS/gradient/conic-gradient()) + - [`repeating-conic-gradient()`](/fr/docs/Web/CSS/gradient/repeating-conic-gradient()) +- [`<image>`](/fr/docs/Web/CSS/image) +- [`element()`](/fr/docs/Web/CSS/element()) +- [`image()`](/fr/docs/Web/CSS/image/image()) +- [`image-set()`](/fr/docs/Web/CSS/image/image-set()) +- [`cross-fade()`](/fr/docs/Web/CSS/cross-fade()) diff --git a/files/fr/web/css/hanging-punctuation/index.md b/files/fr/web/css/hanging-punctuation/index.md index 29e4113d9c..f16e25b598 100644 --- a/files/fr/web/css/hanging-punctuation/index.md +++ b/files/fr/web/css/hanging-punctuation/index.md @@ -1,11 +1,6 @@ --- title: hanging-punctuation slug: Web/CSS/hanging-punctuation -tags: - - CSS - - Experimental - - Propriété - - Reference translation_of: Web/CSS/hanging-punctuation --- {{CSSRef}}{{SeeCompatTable}} @@ -97,7 +92,7 @@ p { ### Résultat -{{EmbedLiveSample('Exemple')}} +{{EmbedLiveSample('Exemples')}} ## Spécifications diff --git a/files/fr/web/css/list-style-image/index.md b/files/fr/web/css/list-style-image/index.md index e0ef94d86c..f7c9dc9012 100644 --- a/files/fr/web/css/list-style-image/index.md +++ b/files/fr/web/css/list-style-image/index.md @@ -1,10 +1,6 @@ --- title: list-style-image slug: Web/CSS/list-style-image -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/list-style-image --- {{CSSRef}} @@ -62,7 +58,7 @@ ul { ### Résultat -{{EmbedLiveSample('Exemple')}} +{{EmbedLiveSample('Exemples')}} ## Spécifications diff --git a/files/fr/web/css/mask-type/index.md b/files/fr/web/css/mask-type/index.md index 0e7e4ecdc5..cb2525cdba 100644 --- a/files/fr/web/css/mask-type/index.md +++ b/files/fr/web/css/mask-type/index.md @@ -1,11 +1,6 @@ --- title: mask-type slug: Web/CSS/mask-type -tags: - - CSS - - Propriété - - Reference - - SVG translation_of: Web/CSS/mask-type --- {{CSSRef}} @@ -72,7 +67,7 @@ La propriété `mask-type` est définie avec un mot-clé parmi ceux définis ci- #### Résultat -{{EmbedLiveSample('setting_an_alpha_mask', '100%', '102')}} +{{EmbedLiveSample('Définir_un_masque_alpha', '100%', '102')}} ### Définir un masque de luminance @@ -106,7 +101,7 @@ La propriété `mask-type` est définie avec un mot-clé parmi ceux définis ci- #### Result -{{EmbedLiveSample('setting_a_luminance_mask', '100%', '102')}} +{{EmbedLiveSample('Définir_un_masque_de_luminance', '100%', '102')}} ## Spécifications diff --git a/files/fr/web/css/min()/index.md b/files/fr/web/css/min()/index.md index 5060118985..137a90ffc8 100644 --- a/files/fr/web/css/min()/index.md +++ b/files/fr/web/css/min()/index.md @@ -1,10 +1,6 @@ --- title: min() slug: Web/CSS/min() -tags: - - CSS - - Fonction - - Reference translation_of: Web/CSS/min() --- {{CSSRef}} @@ -37,28 +33,6 @@ Il est tout à fait possible de combiner des valeurs avec différentes unités d ## Exemples -### Garantir une taille maximale pour des images - -`min()` permet de simplifier la définition d'une taille **maximale**, par exemple la largeur d'une image. Dans cet exemple, la règle CSS permet d'obtenir un logo qui s'étire sur la moitié de la fenêtre pour les fenêtres les moins larges, sans dépasser 300 pixels et sans avoir à utiliser des requêtes média. - -#### CSS - -```css -.logo { - width: min(50vw, 300px); -} -``` - -#### HTML - -```html -<img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo"> -``` - -#### Résultat - -{{EmbedLiveSample('Garantir_une_taille_minimale_pour_des_images', '100%', '110')}} - ### Définir une taille maximale pour un champ de saisie et son libellé La fonction `min()` peut également être utilisée pour définir la taille maximale d'un contrôle dans un formulaire et permettre de réduire le champ et le libellé associé lorsque la largeur de l'écran diminue. diff --git a/files/fr/web/css/minmax()/index.md b/files/fr/web/css/minmax()/index.md index 56a234a0f1..6d9a7f6dfa 100644 --- a/files/fr/web/css/minmax()/index.md +++ b/files/fr/web/css/minmax()/index.md @@ -1,14 +1,6 @@ --- title: minmax() slug: Web/CSS/minmax() -tags: - - CSS - - CSS Function - - CSS Grid - - Function - - Layout - - Reference - - Web translation_of: Web/CSS/minmax() --- {{CSSRef}} @@ -120,7 +112,7 @@ Si _max_ est inférieur à _min_, alors _max_ sera ignoré et `minmax(min,max)` ### Résultat -{{EmbedLiveSample("Examples", "100%", 200)}} +{{EmbedLiveSample("Exemples", "100%", 200)}} ## Spécifications diff --git a/files/fr/web/css/mix-blend-mode/index.md b/files/fr/web/css/mix-blend-mode/index.md index f2971d234b..01d5aa2e52 100644 --- a/files/fr/web/css/mix-blend-mode/index.md +++ b/files/fr/web/css/mix-blend-mode/index.md @@ -1,10 +1,6 @@ --- title: mix-blend-mode slug: Web/CSS/mix-blend-mode -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/mix-blend-mode --- {{CSSRef}} @@ -559,7 +555,7 @@ html,body { .luminosity .item { mix-blend-mode: luminosity; } ``` -{{EmbedLiveSample("exemples", "100%", 1600, "", "", "example-outcome-frame")}} +{{EmbedLiveSample("Exemples", "100%", 1600, "", "", "example-outcome-frame")}} ### Exemple avec SVG diff --git a/files/fr/web/css/outline-style/index.md b/files/fr/web/css/outline-style/index.md index 022491b85b..0689091d9b 100644 --- a/files/fr/web/css/outline-style/index.md +++ b/files/fr/web/css/outline-style/index.md @@ -1,10 +1,6 @@ --- title: outline-style slug: Web/CSS/outline-style -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/outline-style --- {{CSSRef}} @@ -119,7 +115,7 @@ La valeur `auto` indique une bordure sur mesure selon l'interface du système d' #### Résulat -{{EmbedLiveSample('Example_0_-_auto')}} +{{EmbedLiveSample('Utilisation_de_la_valeur_auto')}} ## Spécifications diff --git a/files/fr/web/css/overflow/index.md b/files/fr/web/css/overflow/index.md index 4797a73518..65ac2e7b86 100644 --- a/files/fr/web/css/overflow/index.md +++ b/files/fr/web/css/overflow/index.md @@ -1,11 +1,6 @@ --- title: overflow slug: Web/CSS/overflow -tags: - - CSS - - Propriété - - Propriété raccourcie - - Reference translation_of: Web/CSS/overflow --- {{CSSRef}} @@ -146,7 +141,7 @@ p.auto { #### Résultat -{{EmbedLiveSample("définir_différentes_valeurs_d_overflow_pour_le_texte", "600", "250")}} +{{EmbedLiveSample("Exemples", "600", "250")}} ## Spécifications diff --git a/files/fr/web/css/repeat()/index.md b/files/fr/web/css/repeat()/index.md index 177611244b..9b0833a486 100644 --- a/files/fr/web/css/repeat()/index.md +++ b/files/fr/web/css/repeat()/index.md @@ -1,12 +1,6 @@ --- title: repeat() slug: Web/CSS/repeat() -tags: - - CSS - - Fonction - - Grille CSS - - Reference - - Web translation_of: Web/CSS/repeat() --- {{CSSRef}} @@ -122,7 +116,7 @@ repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end]) ### Résultat -{{EmbedLiveSample("Example", "100%", 200)}} +{{EmbedLiveSample("Exemples", "100%", 200)}} ## Spécifications diff --git a/files/fr/web/css/scale/index.md b/files/fr/web/css/scale/index.md index 01560c9176..2d6a6ebcc5 100644 --- a/files/fr/web/css/scale/index.md +++ b/files/fr/web/css/scale/index.md @@ -1,10 +1,6 @@ --- title: scale slug: Web/CSS/scale -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/scale --- {{CSSRef}}{{seecompattable}} @@ -91,7 +87,7 @@ div:hover .scale { ### Résultat -{{EmbedLiveSample('Examples')}} +{{EmbedLiveSample('Exemples')}} ## Spécifications diff --git a/files/fr/web/css/text-overflow/index.md b/files/fr/web/css/text-overflow/index.md index bc587851cb..4fd812b457 100644 --- a/files/fr/web/css/text-overflow/index.md +++ b/files/fr/web/css/text-overflow/index.md @@ -1,10 +1,6 @@ --- title: text-overflow slug: Web/CSS/text-overflow -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/text-overflow --- {{CSSRef}} @@ -77,8 +73,6 @@ Chacune des valeurs se compose : ## Exemples -## Examples - ### Syntaxe avec une valeur Cet exemple illustre différentes valeurs pour `text-overflow`, appliquée à un paragraphe, pour des textes écrits de gauche à droite et de droite à gauche. @@ -149,7 +143,7 @@ body { #### Résultat -{{EmbedLiveSample('one-value_syntax', 600, 320)}} +{{EmbedLiveSample('Syntaxe_avec_une_valeur', 600, 320)}} ### Syntaxe avec deux valeurs @@ -211,7 +205,7 @@ for (let para of paras) { #### Résultat -{{EmbedLiveSample('two-value_syntax', 600, 360)}} +{{EmbedLiveSample('Syntaxe_avec_deux_valeurs', 600, 360)}} ## Spécifications diff --git a/files/fr/web/css/text-shadow/index.md b/files/fr/web/css/text-shadow/index.md index 7df9a97ea6..33daa71ad3 100644 --- a/files/fr/web/css/text-shadow/index.md +++ b/files/fr/web/css/text-shadow/index.md @@ -1,10 +1,6 @@ --- title: text-shadow slug: Web/CSS/text-shadow -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/text-shadow --- {{CSSRef}} @@ -75,9 +71,9 @@ Cette propriété s'applique aux deux [pseudo-éléments](/fr/docs/Web/CSS/Pseud totam rem aperiam, eaque ipsa quae ab illo inventore.</p> ``` -{{EmbedLiveSample('ombre_simple', '660px', '90px')}} +{{EmbedLiveSample('Ombre_simple', '660px', '90px')}} -### Ombres multiples +### Ombres multiples ```css .white-text-with-blue-shadow { @@ -93,7 +89,7 @@ Cette propriété s'applique aux deux [pseudo-éléments](/fr/docs/Web/CSS/Pseud totam rem aperiam, eaque ipsaquae ab illo inventore.</p> ``` -{{EmbedLiveSample('ombres_multiples', '660px', '170px')}} +{{EmbedLiveSample('Ombres_multiples', '660px', '170px')}} ## Spécifications diff --git a/files/fr/web/css/transform-origin/index.md b/files/fr/web/css/transform-origin/index.md index 86a3c0a462..0f9747fc4e 100644 --- a/files/fr/web/css/transform-origin/index.md +++ b/files/fr/web/css/transform-origin/index.md @@ -1,13 +1,6 @@ --- title: transform-origin slug: Web/CSS/transform-origin -tags: - - CSS - - CSS Transoforms - - Propriété CSS - - Reference - - transform-origin - - 'valeur par défaut : center' translation_of: Web/CSS/transform-origin --- {{CSSRef}} @@ -301,7 +294,7 @@ transform-origin: 100% -30%; } ``` -{{EmbedLiveSample('a_demonstration_of_various_transform_values', '', 1350) }} +{{EmbedLiveSample('Exemples', '', 1350) }} ## Spécifications diff --git a/files/fr/web/css/transition-delay/index.md b/files/fr/web/css/transition-delay/index.md index 44205206ea..779c0c591b 100644 --- a/files/fr/web/css/transition-delay/index.md +++ b/files/fr/web/css/transition-delay/index.md @@ -1,11 +1,6 @@ --- title: transition-delay slug: Web/CSS/transition-delay -tags: - - CSS - - Propriété - - Reference - - Transitions translation_of: Web/CSS/transition-delay --- {{CSSRef}} @@ -116,7 +111,7 @@ changeButton.addEventListener("click", change); #### Résultat -{{EmbedLiveSample("exemple_illustrant_differentes_temporisations",275,200)}} +{{EmbedLiveSample("Exemple_illustrant_différentes_temporisations",275,200)}} ## Spécifications diff --git a/files/fr/web/css/transition-duration/index.md b/files/fr/web/css/transition-duration/index.md index 2e58524571..0dba9af1d9 100644 --- a/files/fr/web/css/transition-duration/index.md +++ b/files/fr/web/css/transition-duration/index.md @@ -1,11 +1,6 @@ --- title: transition-duration slug: Web/CSS/transition-duration -tags: - - CSS - - Propriété - - Reference - - Transitions translation_of: Web/CSS/transition-duration --- {{CSSRef}} @@ -110,7 +105,7 @@ changeButton.addEventListener("click", change); #### Résultat -{{EmbedLiveSample("exemple_illustrant_differentes_durees",275,200)}} +{{EmbedLiveSample("Exemples",275,200)}} ## Spécifications diff --git a/files/fr/web/css/using_css_custom_properties/index.md b/files/fr/web/css/using_css_custom_properties/index.md index 1de1a63118..8151f52856 100644 --- a/files/fr/web/css/using_css_custom_properties/index.md +++ b/files/fr/web/css/using_css_custom_properties/index.md @@ -1,11 +1,6 @@ --- title: Les variables CSS slug: Web/CSS/Using_CSS_custom_properties -tags: - - CSS - - Guide - - Intermédiaire - - Web translation_of: Web/CSS/Using_CSS_custom_properties --- {{CSSRef}} @@ -106,7 +101,7 @@ Appliquons-le à ce code HTML : ce qui donne ceci : -{{EmbedLiveSample("exemple_1",600,180)}} +{{EmbedLiveSample("Exemple_1",600,180)}} Remarquez la répétition dans le CSS. La couleur d'arrière-plan est définie à `brown` à plusieurs endroits. Certaines déclarations peuvent être faites plus haut dans la cascade et le problème se résoudra grâce à l'héritage. Mais pour des projets non-triviaux, cela n'est pas toujours possible. En déclarant une variable dans la pseudo-classe {{cssxref(":root")}}, un développeur CSS peut éviter certaines répétitions en utilisant cette variable. @@ -259,7 +254,7 @@ Comme on pourrait s'y attendre, le valeur applique la substitution aec `--text-c ### Résultat -{{EmbedLiveSample('Gestion_des_valeurs_invalides')}} +{{EmbedLiveSample('Gestion_des_variables_invalides')}} > **Note :** La couleur du paragraphe ne sera pas bleue car une substitution invalide est remplacée par la valeur héritée ou la valeur initiale, pas par les valeurs provenant d'éventuelles autres règles. > diff --git a/files/fr/web/css/word-break/index.md b/files/fr/web/css/word-break/index.md index d033cc3230..cb51291d36 100644 --- a/files/fr/web/css/word-break/index.md +++ b/files/fr/web/css/word-break/index.md @@ -1,10 +1,6 @@ --- title: word-break slug: Web/CSS/word-break -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/word-break --- {{CSSRef}} @@ -90,7 +86,7 @@ La propriété `word-break` est définie avec un mot-clé parmi ceux décrits ci ### Résultat -{{EmbedLiveSample('Exemple','100%',600)}} +{{EmbedLiveSample('Exemples','100%',600)}} ## Spécifications |