diff options
| author | julieng <julien.gattelier@gmail.com> | 2021-09-17 20:59:20 +0200 |
|---|---|---|
| committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-10-12 07:57:33 +0200 |
| commit | 258ba7b4be62d8640477a3bd3146d08b00cb70ec (patch) | |
| tree | a8476eee4c369ff47bdfe08353774414f2281ba3 /files/fr/web/css/css_backgrounds_and_borders | |
| parent | 149319bb8c7b1394a443f0877c3460cd362aa815 (diff) | |
| download | translated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.tar.gz translated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.tar.bz2 translated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.zip | |
convert content to md
Diffstat (limited to 'files/fr/web/css/css_backgrounds_and_borders')
6 files changed, 727 insertions, 746 deletions
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 c598a24870..44864170d2 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 @@ -7,147 +7,150 @@ tags: translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator --- -<p>Cet outil peut être utilisé afin de générer des valeurs pour la propriété {{cssxref("border-image")}}.</p> - -<pre class="brush: 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></pre> - -<pre class="brush: css hidden">/* GRID OF TWELVE +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 { @@ -259,7 +262,7 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator /* Input Slider */ -.ui-input-slider > input { +.ui-input-slider > input { margin: 0; padding: 0; width: 50px; @@ -403,7 +406,7 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator top: 0; } -.ui-dropdown-list > div { +.ui-dropdown-list > div { width: 100%; height: 1.6em; margin: 0.3em 0; @@ -415,7 +418,7 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator box-sizing: border-box; } -.ui-dropdown-list > div:hover { +.ui-dropdown-list > div:hover { background: #3490D2; color:#FFF; border-radius: 2px; @@ -445,11 +448,11 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator user-select: none; } -.ui-checkbox > input { +.ui-checkbox > input { display: none; } -.ui-checkbox > label { +.ui-checkbox > label { font-size: 12px; padding: 0.333em 1.666em 0.5em; height: 1em; @@ -477,11 +480,11 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator background-position: center right 10px; } -.ui-checkbox > label:hover { +.ui-checkbox > label:hover { cursor: pointer; } -.ui-checkbox > input:checked + label { +.ui-checkbox > input:checked + label { background-image: url("https://mdn.mozillademos.org/files/5681/checked.png"); background-color: #379B4A; } @@ -533,7 +536,7 @@ body[data-move='Y'] { cursor: move; } -[data-draggable='true']:hover > * { +[data-draggable='true']:hover > * { cursor: default; } @@ -754,7 +757,7 @@ body[data-move='Y'] { color: #555; } -#subject [data-active] > * { +#subject [data-active] > * { opacity: 1; } @@ -931,7 +934,7 @@ body[data-move='Y'] { color: #777; } -#controls .category > .group { +#controls .category > .group { border: 1px solid #CCC; border-radius: 2px; } @@ -1068,7 +1071,7 @@ body[data-move='Y'] { width: 200px; } -#aditional-properties .ui-input-slider > input { +#aditional-properties .ui-input-slider > input { width: 80px !important; } @@ -1207,10 +1210,10 @@ body[data-move='Y'] { word-break: break-all; float: left; } +``` -</pre> - -<pre class="brush: js hidden">'use strict'; +```js hidden +'use strict'; /** * UI-SlidersManager @@ -1290,12 +1293,12 @@ var InputSliderManager = (function InputSliderManager() { 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.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; + this.sensivity = sensivity > 0 ? sensivity : 5; value = isNaN(value) ? this.min : value; var input = new InputComponent(this); @@ -1332,8 +1335,8 @@ var InputSliderManager = (function InputSliderManager() { value = parseFloat(value.toFixed(slider.precision)); - if (value > slider.max) value = slider.max; - if (value < slider.min) value = slider.min; + if (value > slider.max) value = slider.max; + if (value < slider.min) value = slider.min; slider.value = value; slider.node.setAttribute('data-value', value); @@ -1404,7 +1407,7 @@ var InputSliderManager = (function InputSliderManager() { value = value | 0; - slider.sensivity = value > 0 ? value : 5; + slider.sensivity = value > 0 ? value : 5; }; var getNode = function getNode(topic) { @@ -1433,7 +1436,7 @@ var InputSliderManager = (function InputSliderManager() { var notify = function notify() { if (subscribers[this.topic] === undefined) return; - for (var i = 0; i < subscribers[this.topic].length; i++) + for (var i = 0; i < subscribers[this.topic].length; i++) subscribers[this.topic][i](this.value); }; @@ -1452,7 +1455,7 @@ var InputSliderManager = (function InputSliderManager() { var init = function init() { var elem = document.querySelectorAll('.ui-input-slider'); var size = elem.length; - for (var i = 0; i < size; i++) + for (var i = 0; i < size; i++) new InputSlider(elem[i]); }; @@ -1568,7 +1571,7 @@ var DropDownManager = (function DropdownManager() { DropDown.prototype.updateValue = function updateValue(e) { - if (Date.now() - this.time < 500) + if (Date.now() - this.time < 500) return; if (e.target.className !== "ui-dropdown-list") { @@ -1609,7 +1612,7 @@ var DropDownManager = (function DropdownManager() { var setValue = function setValue(topic, index) { if (dropdowns[topic] === undefined || - index >= dropdowns[topic].dropmenu.children.length) + index >= dropdowns[topic].dropmenu.children.length) return; dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]); @@ -1640,7 +1643,7 @@ var DropDownManager = (function DropdownManager() { elem = document.querySelectorAll('.ui-dropdown'); size = elem.length; - for (var i = 0; i < size; i++) + for (var i = 0; i < size; i++) new DropDown(elem[i]); }; @@ -1731,14 +1734,14 @@ var ButtonManager = (function CheckBoxManager() { var notify = function notify() { if (subscribers[this.topic] === undefined) return; - for (var i = 0; i < subscribers[this.topic].length; i++) + 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++) + for (var i = 0; i < size; i++) new CheckBox(elem[i]); }; @@ -2026,7 +2029,7 @@ var BorderImage = (function BorderImage() { var value_array; for (var i in topics) { - for (var j=0; j<4; j++) { + for (var j=0; j<4; j++) { topic = topics[i] + '-' + positions[j]; unit_array = topics[i] + '_units'; value_array = topics[i] + '_values'; @@ -2067,7 +2070,7 @@ var BorderImage = (function BorderImage() { subject.style.width = w + 'px'; subject.style.height = h + 'px'; - for (var i = 0; i < positions.length; i++) + for (var i = 0; i < positions.length; i++) guidelines['slice-' + positions[i]].updateGuidelinePos(); }; @@ -2474,7 +2477,7 @@ var BorderImage = (function BorderImage() { }); }; - for (var i = 0; i < positions.length; i++) { + for (var i = 0; i < positions.length; i++) { var topic = 'slice-' + positions[i]; var property = createProperty(topic, i, 0); listenForChanges(topic, i); @@ -2508,7 +2511,7 @@ var BorderImage = (function BorderImage() { }); }; - for (var i = 0; i < positions.length; i++) { + for (var i = 0; i < positions.length; i++) { var topic = 'width-' + positions[i]; var property = createProperty(topic, i, 1); InputSliderManager.setMax(topic, 1000); @@ -2536,7 +2539,7 @@ var BorderImage = (function BorderImage() { }); }; - for (var i = 0; i < positions.length; i++) { + for (var i = 0; i < positions.length; i++) { var topic = 'outset-' + positions[i]; var property = createProperty(topic, i, 2); InputSliderManager.setMax(topic, 1000); @@ -2566,7 +2569,7 @@ var BorderImage = (function BorderImage() { var elem = document.querySelectorAll('.guideline'); var size = elem.length; - for (var i = 0; i < size; i++) + for (var i = 0; i < size; i++) new GuideLine(elem[i]); PreviewControl.init(); @@ -2611,7 +2614,6 @@ var BorderImage = (function BorderImage() { }; })(); +``` -</pre> - -<p>{{EmbedLiveSample('Border_Image_Generator', '100%', '1270px')}}</p> +{{EmbedLiveSample('Border_Image_Generator', '100%', '1270px')}} diff --git a/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.md b/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.md index 0cb8e25181..b284c2f329 100644 --- a/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.md +++ b/files/fr/web/css/css_backgrounds_and_borders/border-radius_generator/index.md @@ -7,100 +7,102 @@ tags: translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator --- -<p>Cet outil peut être utilisé afin de générer du code pour la propriété {{cssxref("border-radius")}}.</p> - -<h2>border-radius-generator</h2> - -<pre class="brush: html hidden"><div id="container"> - <div class="group section"> - <div id="preview" class="col span_12"> - <div id="subject"> - <div id="top-left" class="radius-container" - data-X="left" data-Y="top"> - </div> - <div id="top-right" class="radius-container" - data-X="right" data-Y="top"> - </div> - <div id="bottom-right" class="radius-container" - data-X="right" data-Y="bottom"> - </div> - <div id="bottom-left" class="radius-container" - data-X="left" data-Y="bottom"> - </div> - - <div id="radius-ui-sliders"> - <div id="tlr" class="ui-input-slider" data-topic="top-left" - data-unit=" px" data-sensivity="2"></div> - - <div id="tlw" class="ui-input-slider" data-topic="top-left-w" - data-unit=" px" data-sensivity="2"></div> - - <div id="tlh" class="ui-input-slider" data-topic="top-left-h" - data-unit=" px" data-sensivity="2"></div> - - <div id="trr" class="ui-input-slider" data-topic="top-right" - data-unit=" px" data-sensivity="2"></div> - - <div id="trw" class="ui-input-slider" data-topic="top-right-w" - data-unit=" px" data-sensivity="2"></div> - - <div id="trh" class="ui-input-slider" data-topic="top-right-h" - data-unit=" px" data-sensivity="2"></div> - - <div id="brr" class="ui-input-slider" data-topic="bottom-right" - data-unit=" px" data-sensivity="2"></div> - - <div id="brw" class="ui-input-slider" data-topic="bottom-right-w" - data-unit=" px" data-sensivity="2"></div> - - <div id="brh" class="ui-input-slider" data-topic="bottom-right-h" - data-unit=" px" data-sensivity="2"></div> - - <div id="blr" class="ui-input-slider" data-topic="bottom-left" - data-unit=" px" data-sensivity="2"></div> - - <div id="blw" class="ui-input-slider" data-topic="bottom-left-w" - data-unit=" px" data-sensivity="2"></div> - - <div id="blh" class="ui-input-slider" data-topic="bottom-left-h" - data-unit=" px" data-sensivity="2"></div> - </div> - </div> - </div> - </div> - <div id="controls" class="group section"> - - <div class="group section"> - <div id="dimensions"> - <div class="ui-input-slider" data-topic="width" data-info="width" - data-unit=" px" data-min="150" data-max="700" data-sensivity="1"></div> - - <div class="ui-input-slider" data-topic="height" data-info="height" - data-unit=" px" data-min="75" data-max="350" data-sensivity="1"></div> - </div> - - <div id="output"></div> - </div> - - <div class="group section"> - <div id="radius-lock"> - <div class="info"> Coins arrondis </div> - <div class="ui-checkbox" data-topic='top-left'></div> - <div class="ui-checkbox" data-topic='top-right'></div> - <div class="ui-checkbox" data-topic='bottom-right'></div> - <div class="ui-checkbox" data-topic='bottom-left'></div> - </div> - - <div id="unit-selection"> - <div class="info"> Unités pour la bordure </div> - </div> - </div> - - </div> -</div> -</pre> - -<pre class="brush: css hidden">/* GRID OF TEN +Cet outil peut être utilisé afin de générer du code pour la propriété {{cssxref("border-radius")}}. + +## border-radius-generator + +```html hidden +<div id="container"> + <div class="group section"> + <div id="preview" class="col span_12"> + <div id="subject"> + <div id="top-left" class="radius-container" + data-X="left" data-Y="top"> + </div> + <div id="top-right" class="radius-container" + data-X="right" data-Y="top"> + </div> + <div id="bottom-right" class="radius-container" + data-X="right" data-Y="bottom"> + </div> + <div id="bottom-left" class="radius-container" + data-X="left" data-Y="bottom"> + </div> + + <div id="radius-ui-sliders"> + <div id="tlr" class="ui-input-slider" data-topic="top-left" + data-unit=" px" data-sensivity="2"></div> + + <div id="tlw" class="ui-input-slider" data-topic="top-left-w" + data-unit=" px" data-sensivity="2"></div> + + <div id="tlh" class="ui-input-slider" data-topic="top-left-h" + data-unit=" px" data-sensivity="2"></div> + + <div id="trr" class="ui-input-slider" data-topic="top-right" + data-unit=" px" data-sensivity="2"></div> + + <div id="trw" class="ui-input-slider" data-topic="top-right-w" + data-unit=" px" data-sensivity="2"></div> + + <div id="trh" class="ui-input-slider" data-topic="top-right-h" + data-unit=" px" data-sensivity="2"></div> + + <div id="brr" class="ui-input-slider" data-topic="bottom-right" + data-unit=" px" data-sensivity="2"></div> + + <div id="brw" class="ui-input-slider" data-topic="bottom-right-w" + data-unit=" px" data-sensivity="2"></div> + + <div id="brh" class="ui-input-slider" data-topic="bottom-right-h" + data-unit=" px" data-sensivity="2"></div> + + <div id="blr" class="ui-input-slider" data-topic="bottom-left" + data-unit=" px" data-sensivity="2"></div> + + <div id="blw" class="ui-input-slider" data-topic="bottom-left-w" + data-unit=" px" data-sensivity="2"></div> + + <div id="blh" class="ui-input-slider" data-topic="bottom-left-h" + data-unit=" px" data-sensivity="2"></div> + </div> + </div> + </div> + </div> + <div id="controls" class="group section"> + + <div class="group section"> + <div id="dimensions"> + <div class="ui-input-slider" data-topic="width" data-info="width" + data-unit=" px" data-min="150" data-max="700" data-sensivity="1"></div> + + <div class="ui-input-slider" data-topic="height" data-info="height" + data-unit=" px" data-min="75" data-max="350" data-sensivity="1"></div> + </div> + + <div id="output"></div> + </div> + + <div class="group section"> + <div id="radius-lock"> + <div class="info"> Coins arrondis </div> + <div class="ui-checkbox" data-topic='top-left'></div> + <div class="ui-checkbox" data-topic='top-right'></div> + <div class="ui-checkbox" data-topic='bottom-right'></div> + <div class="ui-checkbox" data-topic='bottom-left'></div> + </div> + + <div id="unit-selection"> + <div class="info"> Unités pour la bordure </div> + </div> + </div> + + </div> +</div> +``` + +```css hidden +/* GRID OF TEN * ========================================================================== */ .span_12 { @@ -214,7 +216,7 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator /* Input Slider */ -.ui-input-slider > input { +.ui-input-slider > input { margin: 0; padding: 0; width: 50px; @@ -283,11 +285,11 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator user-select: none; } -.ui-checkbox > input { +.ui-checkbox > input { display: none; } -.ui-checkbox > label { +.ui-checkbox > label { font-size: 12px; padding: 0.333em 1.666em 0.5em; height: 1em; @@ -315,11 +317,11 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator background-position: center right 10px; } -.ui-checkbox > label:hover { +.ui-checkbox > label:hover { cursor: pointer; } -.ui-checkbox > input:checked + label { +.ui-checkbox > input:checked + label { background-image: url("https://mdn.mozillademos.org/files/5681/checked.png"); background-color: #379B4A; } @@ -741,7 +743,7 @@ body { position: absolute; } -#radius-lock .ui-checkbox > label { +#radius-lock .ui-checkbox > label { height: 20px; width: 34px; padding: 0; @@ -809,11 +811,10 @@ body { float: right; } +``` - -</pre> - -<pre class="brush: js hidden"><code class="language-js">'use strict'; +```js hidden +'use strict'; /** @@ -892,12 +893,12 @@ var InputSliderManager = (function InputSliderManager() { var sensivity = node.getAttribute('data-sensivity') | 0; this.min = min; - this.max = max > 0 ? max : 100; + this.max = max > 0 ? max : 100; this.step = step === 0 ? 1 : step; this.topic = topic; this.node = node; this.unit = unit; - this.sensivity = sensivity > 0 ? sensivity : 5; + this.sensivity = sensivity > 0 ? sensivity : 5; var input = new InputComponent(this); var slider_left = new SliderComponent(this, -1); @@ -928,13 +929,13 @@ var InputSliderManager = (function InputSliderManager() { if (slider === undefined) return; - if (value > slider.max) value = slider.max; - if (value < slider.min) value = slider.min; + if (value > slider.max) value = slider.max; + if (value < slider.min) value = slider.min; slider.value = value; slider.node.setAttribute('data-value', value); - if (send_notify !== undefined && send_notify === false) { + if (send_notify !== undefined && send_notify === false) { slider.input.value = value + slider.unit; return; } @@ -993,7 +994,7 @@ var InputSliderManager = (function InputSliderManager() { var init = function init() { var elem = document.querySelectorAll('.ui-input-slider'); var size = elem.length; - for (var i = 0; i < size; i++) + for (var i = 0; i < size; i++) new InputSlider(elem[i]); } @@ -1083,14 +1084,14 @@ var ButtonManager = (function CheckBoxManager() { } var notify = function notify() { - for (var i = 0; i < subscribers[this.topic].length; i++) + 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++) + for (var i = 0; i < size; i++) new CheckBox(elem[i]); } @@ -1269,10 +1270,10 @@ var BorderRadius = (function BorderRadius() { this.setUnitR(e.target.value | 0); }.bind(this)); - if (x === 'left' && y == 'top') handle.className = 'handle handle-top-left' - if (x === 'right' && y == 'top') handle.className = 'handle handle-top-right'; - if (x === 'right' && y == 'bottom') handle.className = 'handle handle-bottom-right'; - if (x === 'left' && y == 'bottom') handle.className = 'handle handle-bottom-left'; + if (x === 'left' && y == 'top') handle.className = 'handle handle-top-left' + if (x === 'right' && y == 'top') handle.className = 'handle handle-top-right'; + if (x === 'right' && y == 'bottom') handle.className = 'handle handle-bottom-right'; + if (x === 'left' && y == 'bottom') handle.className = 'handle handle-bottom-left'; handle.addEventListener("mousedown", function(e) { active = true; @@ -1419,7 +1420,7 @@ var BorderRadius = (function BorderRadius() { var valueX = Math.round(this.width / 2); var valueY = Math.round(this.height / 2); - if (valueX === valueY && this.unitX === this.unitY) + if (valueX === valueY && this.unitX === this.unitY) return valueX + unitX; return valueX + unitX + ' ' + valueY + unitY; @@ -1456,8 +1457,8 @@ var BorderRadius = (function BorderRadius() { if (this.rounded === true) { this.size += this.resizeX * deltaX + this.resizeY * deltaY; - if (this.size < 0) this.size = 0; - if (this.size > this.maxR) this.size = this.maxR; + if (this.size < 0) this.size = 0; + if (this.size > this.maxR) this.size = this.maxR; this.updateRadius(); this.updateBorderRadius(); return; @@ -1465,15 +1466,15 @@ var BorderRadius = (function BorderRadius() { if (deltaX) { this.width += this.resizeX * deltaX; - if (this.width < 0) this.width = 0; - if (this.width > this.maxW) this.width = this.maxW; + if (this.width < 0) this.width = 0; + if (this.width > this.maxW) this.width = this.maxW; this.updateWidth(); } if (deltaY) { this.height += this.resizeY * deltaY; - if (this.height < 0) this.height = 0; - if (this.height > this.maxH) this.height = this.maxH; + if (this.height < 0) this.height = 0; + if (this.height > this.maxH) this.height = this.maxH; this.updateHeight(); } @@ -1498,7 +1499,7 @@ var BorderRadius = (function BorderRadius() { var left = (pwidth - value) / 2; subject.style.width = value + "px"; - for (var i = 0; i < 4; i++) + for (var i = 0; i < 4; i++) radius_containers[i].updateUnits(0); } @@ -1508,7 +1509,7 @@ var BorderRadius = (function BorderRadius() { subject.style.height = value + "px"; subject.style.top = top - border_width + "px"; - for (var i = 0; i < 4; i++) + for (var i = 0; i < 4; i++) radius_containers[i].updateUnits(1); } @@ -1554,7 +1555,7 @@ var BorderRadius = (function BorderRadius() { var elem = document.querySelectorAll('.radius-container'); var size = elem.length; - for (var i = 0; i < size; i++) + for (var i = 0; i < size; i++) radius_containers[i] = new RadiusContainer(elem[i]); InputSliderManager.subscribe("width", updateUIWidth); @@ -1586,8 +1587,6 @@ var BorderRadius = (function BorderRadius() { } })(); +``` - -</code></pre> - -<p>{{EmbedLiveSample('border-radius-generator', '100%', '800px', '')}}</p> +{{EmbedLiveSample('border-radius-generator', '100%', '800px', '')}} 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 bc0470ae50..5fb89998da 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 @@ -7,208 +7,210 @@ tags: translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator original_slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator --- -<p>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.</p> - -<pre class="brush: 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"> +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"> + <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=[&quot;&quot;] 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=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform"> - </div> - </div> - </div> - </div> - </div> -</div> -</pre> - -<pre class="brush: css hidden">/* GRID OF TWELVE + <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 { @@ -365,7 +367,7 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator cursor: pointer; } -.ui-slider-input > input { +.ui-slider-input > input { margin: 0 10px; padding: 0; width: 50px; @@ -395,11 +397,11 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator user-select: none; } -.ui-checkbox > input { +.ui-checkbox > input { display: none; } -.ui-checkbox > label { +.ui-checkbox > label { font-size: 12px; padding: 0.333em 1.666em 0.5em; height: 1em; @@ -427,11 +429,11 @@ original_slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator background-position: center right 10px; } -.ui-checkbox > label:hover { +.ui-checkbox > label:hover { cursor: pointer; } -.ui-checkbox > input:checked + label { +.ui-checkbox > input:checked + label { background-image: url("https://mdn.mozillademos.org/files/5681/checked.png"); background-color: #379B4A; } @@ -721,7 +723,7 @@ body { /* Checkbox */ -#layer_menu .ui-checkbox > label { +#layer_menu .ui-checkbox > label { height: 15px; line-height: 17px; font-weight: normal; @@ -729,7 +731,7 @@ body { margin: 0 5px 0 0; } -#layer_menu .ui-checkbox > input:checked + label { +#layer_menu .ui-checkbox > input:checked + label { display: none; } @@ -816,11 +818,11 @@ body { overflow: hidden; } -.wrap-left > * { +.wrap-left > * { float: left; } -.wrap-right > * { +.wrap-right > * { float: right; } @@ -869,7 +871,7 @@ body { text-align: right; } -#controls .category > .group { +#controls .category > .group { border: 1px solid #CCC; border-radius: 3px; } @@ -1018,7 +1020,7 @@ body { z-index: 1; } -#colorpicker .preview > * { +#colorpicker .preview > * { width: 50%; height: 100%; } @@ -1034,7 +1036,7 @@ body { float: right; } -#colorpicker [data-topic="a"] > span { +#colorpicker [data-topic="a"] > span { width: 50px; } @@ -1043,11 +1045,11 @@ body { margin: 10px 0 0 0; } -#colorpicker [data-topic="hexa"] > span { +#colorpicker [data-topic="hexa"] > span { display: none; } -#colorpicker [data-topic="hexa"] > input { +#colorpicker [data-topic="hexa"] > input { width: 85px; padding: 2px 0; -moz-box-sizing: border-box; @@ -1165,10 +1167,10 @@ body { width: 65%; float: left; } +``` -</pre> +```js hidden -<pre class="brush: js hidden"><code class="language-js"> 'use strict'; @@ -1190,9 +1192,9 @@ var SliderManager = (function SliderManager() { var topic = node.getAttribute('data-topic'); this.min = min; - this.max = max > 0 ? max : 100; + this.max = max > 0 ? max : 100; this.step = step === 0 ? 1 : step; - this.value = value <= max && value >= min ? value : (min + max) / 2 | 0; + this.value = value <= max && value >= min ? value : (min + max) / 2 | 0; this.snap = snap === "true" ? true : false; this.topic = topic; this.node = node; @@ -1255,7 +1257,7 @@ var SliderManager = (function SliderManager() { if (slider === null || slider === undefined) return; - if (slider.value + slider.step <= slider.max) { + if (slider.value + slider.step <= slider.max) { slider.value += slider.step; setValue(slider.topic, slider.value) notify.call(slider); @@ -1267,7 +1269,7 @@ var SliderManager = (function SliderManager() { if (slider === null || slider === undefined) return; - if (slider.value - slider.step >= slider.min) { + if (slider.value - slider.step >= slider.min) { slider.value -= slider.step; setValue(topic, slider.value) notify.call(slider); @@ -1282,13 +1284,13 @@ var SliderManager = (function SliderManager() { 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; + 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) + if (precision > this.step / 2) value = value + this.step; if (this.snap) @@ -1303,7 +1305,7 @@ var SliderManager = (function SliderManager() { var setValue = function setValue(topic, value) { var slider = sliders[topic]; - if (value > slider.max || value < slider.min) + if (value > slider.max || value < slider.min) return; var delta = slider.max - slider.min; @@ -1352,17 +1354,17 @@ var SliderManager = (function SliderManager() { elem = document.querySelectorAll('.ui-slider-btn-set'); size = elem.length; - for (var i = 0; i < size; i++) + 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++) + 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++) + for (var i = 0; i < size; i++) new Slider(elem[i]); } @@ -1451,14 +1453,14 @@ var ButtonManager = (function CheckBoxManager() { var notify = function notify() { if (subscribers[this.topic] === undefined) return; - for (var i = 0; i < subscribers[this.topic].length; i++) + 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++) + for (var i = 0; i < size; i++) new CheckBox(elem[i]); } @@ -1548,12 +1550,12 @@ var BoxShadow = (function BoxShadow() { 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; } + 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() { @@ -1575,7 +1577,7 @@ var BoxShadow = (function BoxShadow() { } this.hue = 60 * hue | 0; - if (this.hue < 0) this.hue += 360; + if (this.hue < 0) this.hue += 360; this.saturation = (saturation * 100) | 0; this.value = (cmax * 100) | 0; } @@ -1602,9 +1604,9 @@ var BoxShadow = (function BoxShadow() { 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; + 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(); } @@ -1707,13 +1709,13 @@ var BoxShadow = (function BoxShadow() { // width and height should be the same var size = gradient_area.clientWidth; - if (x > size) + if (x > size) x = size; - if (y > size) + if (y > size) y = size; - if (x < 0) x = 0; - if (y < 0) y = 0; + if (x < 0) x = 0; + if (y < 0) y = 0; var value = 100 - (y * 100 / size) | 0; var saturation = x * 100 / size | 0; @@ -1729,8 +1731,8 @@ var BoxShadow = (function BoxShadow() { var x = e.pageX - hue_area.offsetLeft; var width = hue_area.clientWidth; - if (x < 0) x = 0; - if (x > width) x = width; + if (x < 0) x = 0; + if (x > width) x = width; var hue = ((360 * x) / width) | 0; if (hue === 360) hue = 359; @@ -1749,8 +1751,8 @@ var BoxShadow = (function BoxShadow() { var x = e.pageX - alpha_area.offsetLeft; var width = alpha_area.clientWidth; - if (x < 0) x = 0; - if (x > width) x = width; + if (x < 0) x = 0; + if (x > width) x = width; color.a = (x / width).toFixed(2); @@ -1874,8 +1876,8 @@ var BoxShadow = (function BoxShadow() { var node = document.querySelector("#colorpicker " + selector); var value = parseInt(node.value); - if (typeof value === 'number' && isNaN(value) === false && - value >= 0 && value < 360) + if (typeof value === 'number' && isNaN(value) === false && + value >= 0 && value < 360) color[topic] = value; color.updateRGB(); @@ -1887,8 +1889,8 @@ var BoxShadow = (function BoxShadow() { var node = document.querySelector("#colorpicker " + selector); var value = parseInt(node.value); - if (typeof value === 'number' && isNaN(value) === false && - value >= 0 && value <= 255) + if (typeof value === 'number' && isNaN(value) === false && + value >= 0 && value <= 255) color[topic] = value; color.updateHSV(); @@ -1900,8 +1902,8 @@ var BoxShadow = (function BoxShadow() { var node = document.querySelector("#colorpicker " + selector); var value = parseFloat(node.value); - if (typeof value === 'number' && isNaN(value) === false && - value >= 0 && value <= 1) + if (typeof value === 'number' && isNaN(value) === false && + value >= 0 && value <= 1) color.a = value.toFixed(2); updateUI(); @@ -1969,7 +1971,7 @@ var BoxShadow = (function BoxShadow() { var elem = document.querySelectorAll('#colorpicker .input'); var size = elem.length; - for (var i = 0; i < size; i++) + for (var i = 0; i < size; i++) setInputComponent(elem[i]); setMouseTracking(gradient_area, updateColor); @@ -2507,7 +2509,7 @@ var BoxShadow = (function BoxShadow() { var uid = this.getUID(); var layer = this.createLayer(uid); - if (this.layer === null && this.stack.children.length >= 1) + if (this.layer === null && this.stack.children.length >= 1) this.layer = this.stack.children[0]; this.stack.insertBefore(layer, this.layer); @@ -2538,11 +2540,11 @@ var BoxShadow = (function BoxShadow() { // SOLVE IE BUG Stack.prototype.moveLayer = function moveLayer(direction) { - if (this.count <= 1 || this.layer === null) + if (this.count <= 1 || this.layer === null) return; - if (direction === -1 && this.layerID === (this.count - 1) ) + if (direction === -1 && this.layerID === (this.count - 1) ) return; - if (direction === 1 && this.layerID === 0 ) + if (direction === 1 && this.layerID === 0 ) return; if (direction === -1) { @@ -2582,11 +2584,11 @@ var BoxShadow = (function BoxShadow() { Tool.deleteShadow(index); - if (index > this.layerID) + if (index > this.layerID) return; if (index == this.layerID) { - if (this.count >= 1) { + if (this.count >= 1) { this.layerID = 0; this.setActiveLayer(this.stack.children[0], true); } @@ -2596,7 +2598,7 @@ var BoxShadow = (function BoxShadow() { } } - if (index < this.layerID) { + if (index < this.layerID) { this.layerID--; Tool.setActiveShadow(this.layerID, true); } @@ -2669,7 +2671,7 @@ var BoxShadow = (function BoxShadow() { elem = document.querySelectorAll('#layer_menu [data-type="subject"]'); size = elem.length; - for (var i = 0; i < size; i++) { + for (var i = 0; i < size; i++) { var S = new Stack(elem[i]); stacks[elem[i].id] = S; container.appendChild(S.container); @@ -2683,16 +2685,16 @@ var BoxShadow = (function BoxShadow() { layerMenu.addEventListener("click", mouseEvents); ButtonManager.subscribe("before", function(value) { - if (value === false && active.stack === stacks['before']) + if (value === false && active.stack === stacks['before']) setActiveStack(stacks['element']) - if (value === true && active.stack !== stacks['before']) + if (value === true && active.stack !== stacks['before']) setActiveStack(stacks['before']) }); ButtonManager.subscribe("after", function(value) { - if (value === false && active.stack === stacks['after']) + if (value === false && active.stack === stacks['after']) setActiveStack(stacks['element']) - if (value === true && active.stack !== stacks['after']) + if (value === true && active.stack !== stacks['after']) setActiveStack(stacks['after']) }); } @@ -2823,7 +2825,7 @@ var BoxShadow = (function BoxShadow() { var elem = document.querySelectorAll('#output .output'); var size = elem.length; - for (var i = 0; i < size; i++) + for (var i = 0; i < size; i++) OutputClass(elem[i]); active = classes['element']; @@ -2865,14 +2867,10 @@ var BoxShadow = (function BoxShadow() { } })(); +``` +{{EmbedLiveSample('box-shadow_generator', '100%', '1100px', '')}} -</code></pre> +## Voir aussi -<div>{{EmbedLiveSample('box-shadow_generator', '100%', '1100px', '')}}</div> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="https://cssgenerator.org/box-shadow-css-generator.html">Le générateur d'ombres CSS</a></li> -</ul> +- [Le générateur d'ombres CSS](https://cssgenerator.org/box-shadow-css-generator.html) diff --git a/files/fr/web/css/css_backgrounds_and_borders/index.md b/files/fr/web/css/css_backgrounds_and_borders/index.md index bac2b33946..cfcdb58e26 100644 --- a/files/fr/web/css/css_backgrounds_and_borders/index.md +++ b/files/fr/web/css/css_backgrounds_and_borders/index.md @@ -8,108 +8,81 @@ tags: - Reference translation_of: Web/CSS/CSS_Backgrounds_and_Borders --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><em><strong>CSS Backgrounds and Borders</strong></em> est un module CSS qui permet de mettre en forme les bordures et arrière-plans des éléments. Les arrière-plans peuvent être dessinés avec une couleur ou une image, rognés, redimensionnés voire modifiés. Les bordures peuvent être décorées avec des lignes, des images, former des angles droits ou des angles courbes. Il est également possible de décorer les boîtes des éléments avec des ombres.</p> +**_CSS Backgrounds and Borders_** est un module CSS qui permet de mettre en forme les bordures et arrière-plans des éléments. Les arrière-plans peuvent être dessinés avec une couleur ou une image, rognés, redimensionnés voire modifiés. Les bordures peuvent être décorées avec des lignes, des images, former des angles droits ou des angles courbes. Il est également possible de décorer les boîtes des éléments avec des ombres. -<h2 id="Référence">Référence</h2> +## Référence -<h3 id="Propriétés_CSS">Propriétés CSS</h3> +### Propriétés CSS -<ul> - <li>{{cssxref("background")}}</li> - <li>{{cssxref("background-attachment")}}</li> - <li>{{cssxref("background-clip")}}</li> - <li>{{cssxref("background-color")}}</li> - <li>{{cssxref("background-image")}}</li> - <li>{{cssxref("background-origin")}}</li> - <li>{{cssxref("background-position")}}</li> - <li>{{cssxref("background-position-x")}}</li> - <li>{{cssxref("background-position-y")}}</li> - <li>{{cssxref("background-repeat")}}</li> - <li>{{cssxref("background-size")}}</li> - <li>{{cssxref("border")}}</li> - <li>{{cssxref("border-bottom")}}</li> - <li>{{cssxref("border-bottom-color")}}</li> - <li>{{cssxref("border-bottom-left-radius")}}</li> - <li>{{cssxref("border-bottom-right-radius")}}</li> - <li>{{cssxref("border-bottom-style")}}</li> - <li>{{cssxref("border-bottom-width")}}</li> - <li>{{cssxref("border-collapse")}}</li> - <li>{{cssxref("border-color")}}</li> - <li>{{cssxref("border-image")}}</li> - <li>{{cssxref("border-image-outset")}}</li> - <li>{{cssxref("border-image-repeat")}}</li> - <li>{{cssxref("border-image-slice")}}</li> - <li>{{cssxref("border-image-source")}}</li> - <li>{{cssxref("border-image-width")}}</li> - <li>{{cssxref("border-left")}}</li> - <li>{{cssxref("border-left-color")}}</li> - <li>{{cssxref("border-left-style")}}</li> - <li>{{cssxref("border-left-width")}}</li> - <li>{{cssxref("border-radius")}}</li> - <li>{{cssxref("border-right")}}</li> - <li>{{cssxref("border-right-color")}}</li> - <li>{{cssxref("border-right-style")}}</li> - <li>{{cssxref("border-right-width")}}</li> - <li>{{cssxref("border-style")}}</li> - <li>{{cssxref("border-top")}}</li> - <li>{{cssxref("border-top-color")}}</li> - <li>{{cssxref("border-top-left-radius")}}</li> - <li>{{cssxref("border-top-right-radius")}}</li> - <li>{{cssxref("border-top-style")}}</li> - <li>{{cssxref("border-top-width")}}</li> - <li>{{cssxref("border-width")}}</li> - <li>{{cssxref("box-shadow")}}</li> -</ul> +- {{cssxref("background")}} +- {{cssxref("background-attachment")}} +- {{cssxref("background-clip")}} +- {{cssxref("background-color")}} +- {{cssxref("background-image")}} +- {{cssxref("background-origin")}} +- {{cssxref("background-position")}} +- {{cssxref("background-position-x")}} +- {{cssxref("background-position-y")}} +- {{cssxref("background-repeat")}} +- {{cssxref("background-size")}} +- {{cssxref("border")}} +- {{cssxref("border-bottom")}} +- {{cssxref("border-bottom-color")}} +- {{cssxref("border-bottom-left-radius")}} +- {{cssxref("border-bottom-right-radius")}} +- {{cssxref("border-bottom-style")}} +- {{cssxref("border-bottom-width")}} +- {{cssxref("border-collapse")}} +- {{cssxref("border-color")}} +- {{cssxref("border-image")}} +- {{cssxref("border-image-outset")}} +- {{cssxref("border-image-repeat")}} +- {{cssxref("border-image-slice")}} +- {{cssxref("border-image-source")}} +- {{cssxref("border-image-width")}} +- {{cssxref("border-left")}} +- {{cssxref("border-left-color")}} +- {{cssxref("border-left-style")}} +- {{cssxref("border-left-width")}} +- {{cssxref("border-radius")}} +- {{cssxref("border-right")}} +- {{cssxref("border-right-color")}} +- {{cssxref("border-right-style")}} +- {{cssxref("border-right-width")}} +- {{cssxref("border-style")}} +- {{cssxref("border-top")}} +- {{cssxref("border-top-color")}} +- {{cssxref("border-top-left-radius")}} +- {{cssxref("border-top-right-radius")}} +- {{cssxref("border-top-style")}} +- {{cssxref("border-top-width")}} +- {{cssxref("border-width")}} +- {{cssxref("box-shadow")}} -<h2 id="Guides">Guides</h2> +## Guides -<dl> - <dt><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">Manipuler plusieurs arrière-plans</a></dt> - <dd>Dans cet article, on voit comment paramétrer un ou plusieurs arrière-plans pour un élément.</dd> - <dt><a href="/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images">Mettre à l'échelle les images utilisées pour un arrière-plan</a></dt> - <dd>Dans cet article, on voit comment modifier la taille et paramétrer la répétition d'une image d'arrière-plan.</dd> - <dt><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs sur des éléments HTML grâce à CSS</a></dt> - <dd>Dans cet article, on voit comment utiliser CSS pour ajouter de la couleur sur des éléments HTML, y compris sur les bordures.</dd> -</dl> +- [Manipuler plusieurs arrière-plans](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds) + - : Dans cet article, on voit comment paramétrer un ou plusieurs arrière-plans pour un élément. +- [Mettre à l'échelle les images utilisées pour un arrière-plan](/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images) + - : Dans cet article, on voit comment modifier la taille et paramétrer la répétition d'une image d'arrière-plan. +- [Appliquer des couleurs sur des éléments HTML grâce à CSS](/fr/docs/Web/HTML/Applying_color) + - : Dans cet article, on voit comment utiliser CSS pour ajouter de la couleur sur des éléments HTML, y compris sur les bordures. -<h2 id="Outils">Outils</h2> +## Outils -<dl> - <dt><a href="/fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-image">Générateur pour <code>border-image</code></a></dt> - <dd>Un outil interactif pour créer visuellement des images de bordure (cf. la propriété {{cssxref("border-image")}}).</dd> - <dt><a href="/fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-radius">Générateur pour <code>border-radius</code></a></dt> - <dd>Un outil interactif pour créer visuellement des angles arrondies (cf. la propriété {{cssxref("border-radius")}}).</dd> - <dt><a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Générateur_box-shadow">Générateur pour <code>box-shadow</code></a></dt> - <dd>Un outil interactif pour créer visuellement des ombres derrière les éléments (cf. la propriété {{cssxref("box-shadow")}}).</dd> -</dl> +- [Générateur pour `border-image`](/fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-image) + - : Un outil interactif pour créer visuellement des images de bordure (cf. la propriété {{cssxref("border-image")}}). +- [Générateur pour `border-radius`](/fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-radius) + - : Un outil interactif pour créer visuellement des angles arrondies (cf. la propriété {{cssxref("border-radius")}}). +- [Générateur pour `box-shadow`](/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Générateur_box-shadow) + - : Un outil interactif pour créer visuellement des ombres derrière les éléments (cf. la propriété {{cssxref("box-shadow")}}). -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Backgrounds')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'box.html')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#border')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | État | Commentaires | +| -------------------------------------------- | ---------------------------------------- | ------------ | +| {{SpecName('CSS3 Backgrounds')}} | {{Spec2('CSS3 Backgrounds')}} | | +| {{SpecName('CSS2.1', 'box.html')}} | {{Spec2('CSS2.1')}} | | +| {{SpecName('CSS1', '#border')}} | {{Spec2('CSS1')}} | | diff --git a/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.md b/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.md index 6a92d4d7e5..6688539186 100644 --- a/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.md +++ b/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.md @@ -9,19 +9,20 @@ tags: translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>La propriété CSS {{cssxref("background-size")}} permet d'ajuster la taille des images utilisées en arrière-plan et de remplacer le comportement par défaut qui consiste à créer un carrelage de l'image à sa pleine grandeur. Il est ainsi possible d'agrandir ou de rapetisser l'image.</p> +La propriété CSS {{cssxref("background-size")}} permet d'ajuster la taille des images utilisées en arrière-plan et de remplacer le comportement par défaut qui consiste à créer un carrelage de l'image à sa pleine grandeur. Il est ainsi possible d'agrandir ou de rapetisser l'image. -<h2 id="Carreler_une_image_de_grande_taille">Carreler une image de grande taille</h2> +## Carreler une image de grande taille -<p>Prenons une image de grande taille (par exemple l'ancien logo de Firefox en 2485x2340px). On souhaite la carreler en quatre copies de 300x300 px, comme dans l'image suivante.</p> +Prenons une image de grande taille (par exemple l'ancien logo de Firefox en 2485x2340px). On souhaite la carreler en quatre copies de 300x300 px, comme dans l'image suivante. -<p><img alt="" src="logo-quantum.9c5e96634f92.png"></p> + -<p>On peut utiliser la feuille de style CSS suivante pour obtenir l'effet voulu :</p> +On peut utiliser la feuille de style CSS suivante pour obtenir l'effet voulu : -<pre class="brush: css">.square { +```css +.square { width: 300px; height: 300px; background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); @@ -30,28 +31,30 @@ original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images font-size: 16px; background-size: 150px; } -</pre> +``` -<p>On notera que, dans l'exemple précédent, une seule valeur avait été précisée pour {{cssxref("background-size")}} : 150 px. Dans ce cas, cette valeur est utilisée pour la largeur et la hauteur est alors fixée à <code>auto</code>.</p> +On notera que, dans l'exemple précédent, une seule valeur avait été précisée pour {{cssxref("background-size")}} : 150 px. Dans ce cas, cette valeur est utilisée pour la largeur et la hauteur est alors fixée à `auto`. -<h2 id="Étirer_une_image">Étirer une image</h2> +## Étirer une image -<p>Il est aussi possible de spécifier, respectivement, la largeur et la hauteur de l'image, comme dans l'exemple suivant, où la taille de l'image est imposée à 300x150 px.</p> +Il est aussi possible de spécifier, respectivement, la largeur et la hauteur de l'image, comme dans l'exemple suivant, où la taille de l'image est imposée à 300x150 px. -<pre class="brush:css">background-size: 300px 150px; -</pre> +```css +background-size: 300px 150px; +``` -<p>L'image suivante montre le résultat obtenu.</p> +L'image suivante montre le résultat obtenu. -<p><img alt="Logo de Firefox étité" src="s.codepen.io_richienb_debug_lonxgp_pnkvygvggyxa.png"></p> + -<h2 id="Agrandir_une_image">Agrandir une image</h2> +## Agrandir une image -<p>On peut agrandir une image en arrière-plan. À l'image suivante, une favicône de 32x32 px est agrandie à 300x300 px.</p> +On peut agrandir une image en arrière-plan. À l'image suivante, une favicône de 32x32 px est agrandie à 300x300 px. -<p><img alt="Logo MDN à l'échelle" src="favicon57.de33179910ae.1.1.png"></p> + -<pre class="brush: css">.square2 { +```css +.square2 { width: 300px; height: 300px; background-image: url(favicon.png); @@ -60,57 +63,62 @@ original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images text-shadow: white 0px 0px 2px; font-size: 16px; } -</pre> +``` -<p>On remarque que la feuille de style utilisée est identique à la précédente, sauf en ce qui concerne le nom de l'image.</p> +On remarque que la feuille de style utilisée est identique à la précédente, sauf en ce qui concerne le nom de l'image. -<h2 id="Valeurs_spéciales_contain_et_cover">Valeurs spéciales : <code>contain</code> et <code>cover</code></h2> +## Valeurs spéciales : `contain` et `cover` -<p>En plus de {{cssxref("<length>")}}, la propriété CSS {{cssxref("background-size")}} permet d'employer deux autres valeurs : <code>contain</code> et <code>cover</code>. </p> +En plus de {{cssxref("<length>")}}, la propriété CSS {{cssxref("background-size")}} permet d'employer deux autres valeurs : `contain` et `cover`. -<h3 id="contain"><code>contain</code></h3> +### `contain` -<p>La valeur <code>contain</code> spécifie les dimensions de l'image d'arrière-plan de manière à ce que sa largeur et sa hauteur soient aussi grandes que possible, tout en conservant l'image à l'intérieur de son élément conteneur. Ainsi, l'image ne peut déborder de son élément conteneur.</p> +La valeur `contain` spécifie les dimensions de l'image d'arrière-plan de manière à ce que sa largeur et sa hauteur soient aussi grandes que possible, tout en conservant l'image à l'intérieur de son élément conteneur. Ainsi, l'image ne peut déborder de son élément conteneur. -<p>Essayez de redimensionner la fenêtre de votre navigateur afin de voir la valeur <code>contain</code> en action (Votre navigateur doit supporter la mise à l'échelle d'images d'arrière-plan).</p> +Essayez de redimensionner la fenêtre de votre navigateur afin de voir la valeur `contain` en action (Votre navigateur doit supporter la mise à l'échelle d'images d'arrière-plan). -<p>{{EmbedLiveSample("contain", "100%", "220")}}</p> +{{EmbedLiveSample("contain", "100%", "220")}} -<pre class="brush:html"><div class="bgSizeContain"> - <p>Redimensionnez la fenêtre de votre navigateur.</p> -</div></pre> +```html +<div class="bgSizeContain"> + <p>Redimensionnez la fenêtre de votre navigateur.</p> +</div> +``` -<pre class="brush:css">.bgSizeContain { +```css +.bgSizeContain { height: 200px; background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: contain; border: 2px solid darkgray; color: #000; text-shadow: 1px 1px 0 #fff; -}</pre> +} +``` -<h3 id="cover"><code>cover</code></h3> +### `cover` -<p>La valeur <code>cover</code> assure que l'image d'arrière-plan soit aussi petite que possible, tout en maintenant ses dimensions plus grandes ou égales à la taille de l'élément conteneur. L'échelle entre la largeur et la hauteur est maintenue.</p> +La valeur `cover` assure que l'image d'arrière-plan soit aussi petite que possible, tout en maintenant ses dimensions plus grandes ou égales à la taille de l'élément conteneur. L'échelle entre la largeur et la hauteur est maintenue. -<p>{{EmbedLiveSample("cover", "100%", "220")}}</p> +{{EmbedLiveSample("cover", "100%", "220")}} -<p>Cet exemple utilise le document HTML et la feuille de style suivants :</p> +Cet exemple utilise le document HTML et la feuille de style suivants : -<pre class="brush:html"><div class="bgSizeCover"> - <p>Redimensionnez la fenêtre de votre navigateur.</p> -</div></pre> +```html +<div class="bgSizeCover"> + <p>Redimensionnez la fenêtre de votre navigateur.</p> +</div> +``` -<pre class="brush:css">.bgSizeCover { +```css +.bgSizeCover { height: 200px; background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: cover; border: 2px solid darkgray; color: #000; text-shadow: 1px 1px 0 #fff; -</pre> +``` -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{cssxref("background-size")}}</li> - <li>{{cssxref("background")}}</li> -</ul> +- {{cssxref("background-size")}} +- {{cssxref("background")}} 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 04ac4ad67d..af2dc6baba 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 @@ -8,49 +8,50 @@ tags: translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Utiliser_plusieurs_arrière-plans --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>Avec <a href="/fr/docs/Web/CSS/CSS3">CSS3</a>, 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.</p> +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. -<p>Pour cela, il suffit simplement d'utiliser une liste de valeur avec {{cssxref("background")}} :</p> +Pour cela, il suffit simplement d'utiliser une liste de valeur avec {{cssxref("background")}} : -<pre class="brush: css">.maClasse { +```css +.maClasse { background: background1, background 2, ..., backgroundN; } -</pre> +``` -<p>Cela fonctionne aussi bien avec la propriété raccourcie {{cssxref("background")}} qu'avec les propriétés détaillées, exception faite de {{cssxref("background-color")}}. On peut donc utiliser une liste de valeurs, chacune pour un arrière-plan différent, pour les propriétés suivantes : {{cssxref("background")}}, {{cssxref("background-attachment")}}, {{cssxref("background-clip")}},<code> </code>{{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}.</p> +Cela fonctionne aussi bien avec la propriété raccourcie {{cssxref("background")}} qu'avec les propriétés détaillées, exception faite de {{cssxref("background-color")}}. On peut donc utiliser une liste de valeurs, chacune pour un arrière-plan différent, pour les propriétés suivantes : {{cssxref("background")}}, {{cssxref("background-attachment")}}, {{cssxref("background-clip")}},` `{{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Dans cet exemple, on cumule trois arrière-plans : le logo de Firefox, un dégradé linéaire (cf. {{cssxref("linear-gradient")}}) et une image de bulles.</p> +Dans cet exemple, on cumule trois arrière-plans : le logo de Firefox, un dégradé linéaire (cf. {{cssxref("linear-gradient")}}) et une image de bulles. -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css">.exemple_multi_ar { +```css +.exemple_multi_ar { width: 100%; height: 400px; background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)); background-repeat: no-repeat, no-repeat, no-repeat; background-position: bottom right, left, right; -}</pre> +} +``` -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><div class="exemple_multi_ar"></div></pre> +```html +<div class="exemple_multi_ar"></div> +``` -<h3 id="Résultat">Résultat</h3> +### Résultat -<p>{{EmbedLiveSample('Exemple','100%','400')}}</p> +{{EmbedLiveSample('Exemple','100%','400')}} -<p>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.).</p> +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.). -<div class="note"> -<p><strong>Note :</strong> Si l'image n'apparaît pas sous CodePen, cliquez sur le bouton <em>Tidy</em> de la section CSS.</p> -</div> +> **Note :** Si l'image n'apparaît pas sous CodePen, cliquez sur le bouton _Tidy_ de la section CSS. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS">Utiliser les dégradés CSS</a></li> -</ul> +- [Utiliser les dégradés CSS](/fr/docs/Web/CSS/Utilisation_de_dégradés_CSS) |