From 9bf6693b2edd5281c1577856895c55653a41dc01 Mon Sep 17 00:00:00 2001 From: MDN Date: Sat, 19 Mar 2022 00:13:08 +0000 Subject: [CRON] sync translated content --- files/fr/_redirects.txt | 113 ++++--- files/fr/_wikihistory.json | 116 +++---- .../web/css/transform-function/skewx/index.md | 130 ++++++++ files/fr/web/css/_colon_host()/index.md | 75 ----- files/fr/web/css/_colon_host_function/index.md | 76 +++++ files/fr/web/css/attr()/index.md | 366 -------------------- files/fr/web/css/attr/index.md | 367 +++++++++++++++++++++ files/fr/web/css/calc()/index.md | 150 --------- files/fr/web/css/calc/index.md | 151 +++++++++ files/fr/web/css/clamp()/index.md | 103 ------ files/fr/web/css/clamp/index.md | 104 ++++++ files/fr/web/css/counter()/index.md | 125 ------- files/fr/web/css/counter/index.md | 126 +++++++ files/fr/web/css/counters()/index.md | 170 ---------- files/fr/web/css/counters/index.md | 171 ++++++++++ files/fr/web/css/cross-fade()/index.md | 140 -------- files/fr/web/css/cross-fade/index.md | 141 ++++++++ files/fr/web/css/element()/index.md | 137 -------- files/fr/web/css/element/index.md | 138 ++++++++ files/fr/web/css/env()/index.md | 126 ------- files/fr/web/css/env/index.md | 127 +++++++ files/fr/web/css/filter-function/blur()/index.md | 53 --- files/fr/web/css/filter-function/blur/index.md | 54 +++ .../web/css/filter-function/brightness()/index.md | 54 --- .../fr/web/css/filter-function/brightness/index.md | 55 +++ .../fr/web/css/filter-function/contrast()/index.md | 53 --- files/fr/web/css/filter-function/contrast/index.md | 54 +++ .../web/css/filter-function/drop-shadow()/index.md | 69 ---- .../web/css/filter-function/drop-shadow/index.md | 70 ++++ .../web/css/filter-function/grayscale()/index.md | 53 --- .../fr/web/css/filter-function/grayscale/index.md | 54 +++ .../web/css/filter-function/hue-rotate()/index.md | 55 --- .../fr/web/css/filter-function/hue-rotate/index.md | 56 ++++ files/fr/web/css/filter-function/invert()/index.md | 52 --- files/fr/web/css/filter-function/invert/index.md | 53 +++ .../fr/web/css/filter-function/opacity()/index.md | 56 ---- files/fr/web/css/filter-function/opacity/index.md | 57 ++++ .../fr/web/css/filter-function/saturate()/index.md | 54 --- files/fr/web/css/filter-function/saturate/index.md | 55 +++ files/fr/web/css/filter-function/sepia()/index.md | 52 --- files/fr/web/css/filter-function/sepia/index.md | 53 +++ .../fr/web/css/gradient/linear-gradient()/index.md | 194 ----------- files/fr/web/css/gradient/linear-gradient/index.md | 194 +++++++++++ files/fr/web/css/max()/index.md | 107 ------ files/fr/web/css/max/index.md | 108 ++++++ files/fr/web/css/min()/index.md | 101 ------ files/fr/web/css/min/index.md | 102 ++++++ files/fr/web/css/minmax()/index.md | 131 -------- files/fr/web/css/minmax/index.md | 132 ++++++++ files/fr/web/css/path()/index.md | 51 --- files/fr/web/css/path/index.md | 52 +++ files/fr/web/css/repeat()/index.md | 129 -------- files/fr/web/css/repeat/index.md | 130 ++++++++ files/fr/web/css/symbols()/index.md | 61 ---- files/fr/web/css/symbols/index.md | 62 ++++ .../web/css/transform-function/matrix()/index.md | 135 -------- .../fr/web/css/transform-function/matrix/index.md | 136 ++++++++ .../web/css/transform-function/matrix3d()/index.md | 190 ----------- .../web/css/transform-function/matrix3d/index.md | 191 +++++++++++ .../css/transform-function/perspective()/index.md | 157 --------- .../css/transform-function/perspective/index.md | 158 +++++++++ .../web/css/transform-function/rotate()/index.md | 181 ---------- .../fr/web/css/transform-function/rotate/index.md | 182 ++++++++++ .../web/css/transform-function/rotate3d()/index.md | 169 ---------- .../web/css/transform-function/rotate3d/index.md | 170 ++++++++++ .../web/css/transform-function/rotatex()/index.md | 118 ------- .../fr/web/css/transform-function/rotatex/index.md | 119 +++++++ .../web/css/transform-function/rotatey()/index.md | 120 ------- .../fr/web/css/transform-function/rotatey/index.md | 121 +++++++ .../web/css/transform-function/rotatez()/index.md | 118 ------- .../fr/web/css/transform-function/rotatez/index.md | 119 +++++++ .../fr/web/css/transform-function/scale()/index.md | 207 ------------ files/fr/web/css/transform-function/scale/index.md | 208 ++++++++++++ .../web/css/transform-function/scale3d()/index.md | 151 --------- .../fr/web/css/transform-function/scale3d/index.md | 152 +++++++++ .../web/css/transform-function/scalex()/index.md | 165 --------- .../fr/web/css/transform-function/scalex/index.md | 166 ++++++++++ .../web/css/transform-function/scaley()/index.md | 134 -------- .../fr/web/css/transform-function/scaley/index.md | 135 ++++++++ .../web/css/transform-function/scalez()/index.md | 124 ------- .../fr/web/css/transform-function/scalez/index.md | 125 +++++++ .../fr/web/css/transform-function/skew()/index.md | 174 ---------- files/fr/web/css/transform-function/skew/index.md | 175 ++++++++++ .../fr/web/css/transform-function/skewx()/index.md | 131 -------- files/fr/web/css/transform-function/skewx/index.md | 132 ++++++++ .../fr/web/css/transform-function/skewy()/index.md | 129 -------- .../css/transform-function/translate()/index.md | 169 ---------- .../web/css/transform-function/translate/index.md | 170 ++++++++++ .../css/transform-function/translate3d()/index.md | 142 -------- .../css/transform-function/translate3d/index.md | 143 ++++++++ .../css/transform-function/translatex()/index.md | 156 --------- .../web/css/transform-function/translatex/index.md | 156 +++++++++ .../css/transform-function/translatey()/index.md | 139 -------- .../web/css/transform-function/translatey/index.md | 140 ++++++++ .../css/transform-function/translatez()/index.md | 115 ------- .../web/css/transform-function/translatez/index.md | 116 +++++++ files/fr/web/css/url()/index.md | 192 ----------- files/fr/web/css/url/index.md | 193 +++++++++++ files/fr/web/css/var()/index.md | 76 ----- files/fr/web/css/var/index.md | 77 +++++ 100 files changed, 6273 insertions(+), 6221 deletions(-) create mode 100644 files/fr/conflicting/web/css/transform-function/skewx/index.md delete mode 100644 files/fr/web/css/_colon_host()/index.md create mode 100644 files/fr/web/css/_colon_host_function/index.md delete mode 100644 files/fr/web/css/attr()/index.md create mode 100644 files/fr/web/css/attr/index.md delete mode 100644 files/fr/web/css/calc()/index.md create mode 100644 files/fr/web/css/calc/index.md delete mode 100644 files/fr/web/css/clamp()/index.md create mode 100644 files/fr/web/css/clamp/index.md delete mode 100644 files/fr/web/css/counter()/index.md create mode 100644 files/fr/web/css/counter/index.md delete mode 100644 files/fr/web/css/counters()/index.md create mode 100644 files/fr/web/css/counters/index.md delete mode 100644 files/fr/web/css/cross-fade()/index.md create mode 100644 files/fr/web/css/cross-fade/index.md delete mode 100644 files/fr/web/css/element()/index.md create mode 100644 files/fr/web/css/element/index.md delete mode 100644 files/fr/web/css/env()/index.md create mode 100644 files/fr/web/css/env/index.md delete mode 100644 files/fr/web/css/filter-function/blur()/index.md create mode 100644 files/fr/web/css/filter-function/blur/index.md delete mode 100644 files/fr/web/css/filter-function/brightness()/index.md create mode 100644 files/fr/web/css/filter-function/brightness/index.md delete mode 100644 files/fr/web/css/filter-function/contrast()/index.md create mode 100644 files/fr/web/css/filter-function/contrast/index.md delete mode 100644 files/fr/web/css/filter-function/drop-shadow()/index.md create mode 100644 files/fr/web/css/filter-function/drop-shadow/index.md delete mode 100644 files/fr/web/css/filter-function/grayscale()/index.md create mode 100644 files/fr/web/css/filter-function/grayscale/index.md delete mode 100644 files/fr/web/css/filter-function/hue-rotate()/index.md create mode 100644 files/fr/web/css/filter-function/hue-rotate/index.md delete mode 100644 files/fr/web/css/filter-function/invert()/index.md create mode 100644 files/fr/web/css/filter-function/invert/index.md delete mode 100644 files/fr/web/css/filter-function/opacity()/index.md create mode 100644 files/fr/web/css/filter-function/opacity/index.md delete mode 100644 files/fr/web/css/filter-function/saturate()/index.md create mode 100644 files/fr/web/css/filter-function/saturate/index.md delete mode 100644 files/fr/web/css/filter-function/sepia()/index.md create mode 100644 files/fr/web/css/filter-function/sepia/index.md delete mode 100644 files/fr/web/css/gradient/linear-gradient()/index.md create mode 100644 files/fr/web/css/gradient/linear-gradient/index.md delete mode 100644 files/fr/web/css/max()/index.md create mode 100644 files/fr/web/css/max/index.md delete mode 100644 files/fr/web/css/min()/index.md create mode 100644 files/fr/web/css/min/index.md delete mode 100644 files/fr/web/css/minmax()/index.md create mode 100644 files/fr/web/css/minmax/index.md delete mode 100644 files/fr/web/css/path()/index.md create mode 100644 files/fr/web/css/path/index.md delete mode 100644 files/fr/web/css/repeat()/index.md create mode 100644 files/fr/web/css/repeat/index.md delete mode 100644 files/fr/web/css/symbols()/index.md create mode 100644 files/fr/web/css/symbols/index.md delete mode 100644 files/fr/web/css/transform-function/matrix()/index.md create mode 100644 files/fr/web/css/transform-function/matrix/index.md delete mode 100644 files/fr/web/css/transform-function/matrix3d()/index.md create mode 100644 files/fr/web/css/transform-function/matrix3d/index.md delete mode 100644 files/fr/web/css/transform-function/perspective()/index.md create mode 100644 files/fr/web/css/transform-function/perspective/index.md delete mode 100644 files/fr/web/css/transform-function/rotate()/index.md create mode 100644 files/fr/web/css/transform-function/rotate/index.md delete mode 100644 files/fr/web/css/transform-function/rotate3d()/index.md create mode 100644 files/fr/web/css/transform-function/rotate3d/index.md delete mode 100644 files/fr/web/css/transform-function/rotatex()/index.md create mode 100644 files/fr/web/css/transform-function/rotatex/index.md delete mode 100644 files/fr/web/css/transform-function/rotatey()/index.md create mode 100644 files/fr/web/css/transform-function/rotatey/index.md delete mode 100644 files/fr/web/css/transform-function/rotatez()/index.md create mode 100644 files/fr/web/css/transform-function/rotatez/index.md delete mode 100644 files/fr/web/css/transform-function/scale()/index.md create mode 100644 files/fr/web/css/transform-function/scale/index.md delete mode 100644 files/fr/web/css/transform-function/scale3d()/index.md create mode 100644 files/fr/web/css/transform-function/scale3d/index.md delete mode 100644 files/fr/web/css/transform-function/scalex()/index.md create mode 100644 files/fr/web/css/transform-function/scalex/index.md delete mode 100644 files/fr/web/css/transform-function/scaley()/index.md create mode 100644 files/fr/web/css/transform-function/scaley/index.md delete mode 100644 files/fr/web/css/transform-function/scalez()/index.md create mode 100644 files/fr/web/css/transform-function/scalez/index.md delete mode 100644 files/fr/web/css/transform-function/skew()/index.md create mode 100644 files/fr/web/css/transform-function/skew/index.md delete mode 100644 files/fr/web/css/transform-function/skewx()/index.md create mode 100644 files/fr/web/css/transform-function/skewx/index.md delete mode 100644 files/fr/web/css/transform-function/skewy()/index.md delete mode 100644 files/fr/web/css/transform-function/translate()/index.md create mode 100644 files/fr/web/css/transform-function/translate/index.md delete mode 100644 files/fr/web/css/transform-function/translate3d()/index.md create mode 100644 files/fr/web/css/transform-function/translate3d/index.md delete mode 100644 files/fr/web/css/transform-function/translatex()/index.md create mode 100644 files/fr/web/css/transform-function/translatex/index.md delete mode 100644 files/fr/web/css/transform-function/translatey()/index.md create mode 100644 files/fr/web/css/transform-function/translatey/index.md delete mode 100644 files/fr/web/css/transform-function/translatez()/index.md create mode 100644 files/fr/web/css/transform-function/translatez/index.md delete mode 100644 files/fr/web/css/url()/index.md create mode 100644 files/fr/web/css/url/index.md delete mode 100644 files/fr/web/css/var()/index.md create mode 100644 files/fr/web/css/var/index.md (limited to 'files/fr') diff --git a/files/fr/_redirects.txt b/files/fr/_redirects.txt index 8b9a1db89b..054cf0081e 100644 --- a/files/fr/_redirects.txt +++ b/files/fr/_redirects.txt @@ -306,7 +306,7 @@ /fr/docs/CSS/-moz-grab /en-US/docs/Web/CSS/cursor#grab /fr/docs/CSS/-moz-grabbing /en-US/docs/Web/CSS/cursor#grab /fr/docs/CSS/-moz-image-region /fr/docs/Web/CSS/-moz-image-region -/fr/docs/CSS/-moz-linear-gradient /fr/docs/Web/CSS/gradient/linear-gradient() +/fr/docs/CSS/-moz-linear-gradient /fr/docs/Web/CSS/gradient/linear-gradient /fr/docs/CSS/-moz-margin-end /fr/docs/Web/CSS/margin-inline-end /fr/docs/CSS/-moz-margin-start /fr/docs/Web/CSS/margin-inline-start /fr/docs/CSS/-moz-opacity /fr/docs/Web/CSS/opacity @@ -477,7 +477,7 @@ /fr/docs/CSS/animation-play-state /fr/docs/Web/CSS/animation-play-state /fr/docs/CSS/animation-redirection-1 /fr/docs/Web/CSS/animation /fr/docs/CSS/animation-timing-function /fr/docs/Web/CSS/animation-timing-function -/fr/docs/CSS/attr /fr/docs/Web/CSS/attr() +/fr/docs/CSS/attr /fr/docs/Web/CSS/attr /fr/docs/CSS/auto /fr/docs/conflicting/Web/CSS/width /fr/docs/CSS/backface-visibility /fr/docs/Web/CSS/backface-visibility /fr/docs/CSS/backface-visibility-redirection-1 /fr/docs/Web/CSS/backface-visibility @@ -524,7 +524,7 @@ /fr/docs/CSS/bottom /fr/docs/Web/CSS/bottom /fr/docs/CSS/box-shadow /fr/docs/Web/CSS/box-shadow /fr/docs/CSS/box-sizing /fr/docs/Web/CSS/box-sizing -/fr/docs/CSS/calc /fr/docs/Web/CSS/calc() +/fr/docs/CSS/calc /fr/docs/Web/CSS/calc /fr/docs/CSS/caption-side /fr/docs/Web/CSS/caption-side /fr/docs/CSS/chaîne_de_caractères /fr/docs/Web/CSS/string /fr/docs/CSS/clear /fr/docs/Web/CSS/clear @@ -582,7 +582,7 @@ /fr/docs/CSS/length /fr/docs/Web/CSS/length /fr/docs/CSS/letter-spacing /fr/docs/Web/CSS/letter-spacing /fr/docs/CSS/line-height /fr/docs/Web/CSS/line-height -/fr/docs/CSS/linear-gradient /fr/docs/Web/CSS/gradient/linear-gradient() +/fr/docs/CSS/linear-gradient /fr/docs/Web/CSS/gradient/linear-gradient /fr/docs/CSS/list-style /fr/docs/Web/CSS/list-style /fr/docs/CSS/list-style-image /fr/docs/Web/CSS/list-style-image /fr/docs/CSS/list-style-position /fr/docs/Web/CSS/list-style-position @@ -3911,7 +3911,7 @@ /fr/docs/Web/CSS/-moz-copy /fr/docs/Web/CSS/cursor /fr/docs/Web/CSS/-moz-grab /en-US/docs/Web/CSS/cursor#grab /fr/docs/Web/CSS/-moz-grabbing /en-US/docs/Web/CSS/cursor#grab -/fr/docs/Web/CSS/-moz-linear-gradient /fr/docs/Web/CSS/gradient/linear-gradient() +/fr/docs/Web/CSS/-moz-linear-gradient /fr/docs/Web/CSS/gradient/linear-gradient /fr/docs/Web/CSS/-moz-margin-end /fr/docs/Web/CSS/margin-inline-end /fr/docs/Web/CSS/-moz-margin-start /fr/docs/Web/CSS/margin-inline-start /fr/docs/Web/CSS/-moz-opacity /fr/docs/Web/CSS/opacity @@ -3946,6 +3946,7 @@ /fr/docs/Web/CSS/:after_|_::after /fr/docs/Web/CSS/::after /fr/docs/Web/CSS/:any /fr/docs/conflicting/Web/CSS/:is /fr/docs/Web/CSS/:before /fr/docs/Web/CSS/::before +/fr/docs/Web/CSS/:host() /fr/docs/Web/CSS/:host_function /fr/docs/Web/CSS/:matches /fr/docs/Web/CSS/:is /fr/docs/Web/CSS/:visited_et_la_vie_privée /fr/docs/Web/CSS/Privacy_and_the_:visited_selector /fr/docs/Web/CSS/@media/scan /fr/docs/orphaned/Web/CSS/@media/scan @@ -4208,32 +4209,33 @@ /fr/docs/Web/CSS/Valeur_utilisée /fr/docs/Web/CSS/used_value /fr/docs/Web/CSS/Valeurs_et_unités_CSS /fr/docs/Web/CSS/CSS_Values_and_Units /fr/docs/Web/CSS/_image /fr/docs/orphaned/Web/CSS/image() -/fr/docs/Web/CSS/attr /fr/docs/Web/CSS/attr() +/fr/docs/Web/CSS/attr() /fr/docs/Web/CSS/attr /fr/docs/Web/CSS/auto /fr/docs/conflicting/Web/CSS/width -/fr/docs/Web/CSS/calc /fr/docs/Web/CSS/calc() -/fr/docs/Web/CSS/clamp /fr/docs/Web/CSS/clamp() +/fr/docs/Web/CSS/calc() /fr/docs/Web/CSS/calc +/fr/docs/Web/CSS/clamp() /fr/docs/Web/CSS/clamp /fr/docs/Web/CSS/color-adjust /fr/docs/conflicting/Web/CSS/print-color-adjust /fr/docs/Web/CSS/conic-gradient /fr/docs/orphaned/Web/CSS/conic-gradient() /fr/docs/Web/CSS/conic-gradient() /fr/docs/orphaned/Web/CSS/conic-gradient() -/fr/docs/Web/CSS/counter /fr/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters -/fr/docs/Web/CSS/counter_fonction /fr/docs/Web/CSS/counter() -/fr/docs/Web/CSS/counters /fr/docs/Web/CSS/counters() -/fr/docs/Web/CSS/cross-fade /fr/docs/Web/CSS/cross-fade() +/fr/docs/Web/CSS/counter() /fr/docs/Web/CSS/counter +/fr/docs/Web/CSS/counter_fonction /fr/docs/Web/CSS/counter +/fr/docs/Web/CSS/counters() /fr/docs/Web/CSS/counters +/fr/docs/Web/CSS/cross-fade() /fr/docs/Web/CSS/cross-fade /fr/docs/Web/CSS/cursor/Utilisation_d'URL_pour_la_propriété_cursor /fr/docs/conflicting/Web/CSS/cursor /fr/docs/Web/CSS/cursor/Utilisation_d_URL_pour_la_propriété_cursor /fr/docs/conflicting/Web/CSS/cursor -/fr/docs/Web/CSS/element /fr/docs/Web/CSS/element() -/fr/docs/Web/CSS/env /fr/docs/Web/CSS/env() -/fr/docs/Web/CSS/filter-function/blur /fr/docs/Web/CSS/filter-function/blur() -/fr/docs/Web/CSS/filter-function/brightness /fr/docs/Web/CSS/filter-function/brightness() -/fr/docs/Web/CSS/filter-function/contrast /fr/docs/Web/CSS/filter-function/contrast() -/fr/docs/Web/CSS/filter-function/drop-shadow /fr/docs/Web/CSS/filter-function/drop-shadow() -/fr/docs/Web/CSS/filter-function/grayscale /fr/docs/Web/CSS/filter-function/grayscale() -/fr/docs/Web/CSS/filter-function/hue-rotate /fr/docs/Web/CSS/filter-function/hue-rotate() -/fr/docs/Web/CSS/filter-function/invert /fr/docs/Web/CSS/filter-function/invert() -/fr/docs/Web/CSS/filter-function/opacity /fr/docs/Web/CSS/filter-function/opacity() -/fr/docs/Web/CSS/filter-function/saturate /fr/docs/Web/CSS/filter-function/saturate() -/fr/docs/Web/CSS/filter-function/sepia /fr/docs/Web/CSS/filter-function/sepia() +/fr/docs/Web/CSS/element() /fr/docs/Web/CSS/element +/fr/docs/Web/CSS/env() /fr/docs/Web/CSS/env +/fr/docs/Web/CSS/filter-function/blur() /fr/docs/Web/CSS/filter-function/blur +/fr/docs/Web/CSS/filter-function/brightness() /fr/docs/Web/CSS/filter-function/brightness +/fr/docs/Web/CSS/filter-function/contrast() /fr/docs/Web/CSS/filter-function/contrast +/fr/docs/Web/CSS/filter-function/drop-shadow() /fr/docs/Web/CSS/filter-function/drop-shadow +/fr/docs/Web/CSS/filter-function/grayscale() /fr/docs/Web/CSS/filter-function/grayscale +/fr/docs/Web/CSS/filter-function/hue-rotate() /fr/docs/Web/CSS/filter-function/hue-rotate +/fr/docs/Web/CSS/filter-function/invert() /fr/docs/Web/CSS/filter-function/invert +/fr/docs/Web/CSS/filter-function/opacity() /fr/docs/Web/CSS/filter-function/opacity +/fr/docs/Web/CSS/filter-function/saturate() /fr/docs/Web/CSS/filter-function/saturate +/fr/docs/Web/CSS/filter-function/sepia() /fr/docs/Web/CSS/filter-function/sepia /fr/docs/Web/CSS/filter-function/url /fr/docs/conflicting/Web/CSS/url() +/fr/docs/Web/CSS/gradient/linear-gradient() /fr/docs/Web/CSS/gradient/linear-gradient /fr/docs/Web/CSS/grid-column-gap /fr/docs/conflicting/Web/CSS/column-gap /fr/docs/Web/CSS/grid-gap /fr/docs/Web/CSS/gap /fr/docs/Web/CSS/grid-row-gap /fr/docs/Web/CSS/row-gap @@ -4242,13 +4244,13 @@ /fr/docs/Web/CSS/image-set /fr/docs/orphaned/Web/CSS/image-set() /fr/docs/Web/CSS/image-set() /fr/docs/orphaned/Web/CSS/image-set() /fr/docs/Web/CSS/imagefunction /fr/docs/orphaned/Web/CSS/image() -/fr/docs/Web/CSS/linear-gradient /fr/docs/Web/CSS/gradient/linear-gradient() -/fr/docs/Web/CSS/linear-gradient() /fr/docs/Web/CSS/gradient/linear-gradient() +/fr/docs/Web/CSS/linear-gradient /fr/docs/Web/CSS/gradient/linear-gradient +/fr/docs/Web/CSS/linear-gradient() /fr/docs/Web/CSS/gradient/linear-gradient /fr/docs/Web/CSS/longueur /fr/docs/Web/CSS/length /fr/docs/Web/CSS/marks /fr/docs/orphaned/Web/CSS/@page/marks -/fr/docs/Web/CSS/max /fr/docs/Web/CSS/max() -/fr/docs/Web/CSS/min /fr/docs/Web/CSS/min() -/fr/docs/Web/CSS/minmax /fr/docs/Web/CSS/minmax() +/fr/docs/Web/CSS/max() /fr/docs/Web/CSS/max +/fr/docs/Web/CSS/min() /fr/docs/Web/CSS/min +/fr/docs/Web/CSS/minmax() /fr/docs/Web/CSS/minmax /fr/docs/Web/CSS/motion /fr/docs/Web/CSS/offset /fr/docs/Web/CSS/motion-offset /fr/docs/Web/CSS/offset-distance /fr/docs/Web/CSS/motion-path /fr/docs/Web/CSS/offset-path @@ -4262,10 +4264,11 @@ /fr/docs/Web/CSS/overflow-anchor/Guide_ancrage_défilement /fr/docs/Web/CSS/overflow-anchor/Guide_to_scroll_anchoring /fr/docs/Web/CSS/paint /fr/docs/orphaned/Web/CSS/paint() /fr/docs/Web/CSS/paint() /fr/docs/orphaned/Web/CSS/paint() +/fr/docs/Web/CSS/path() /fr/docs/Web/CSS/path /fr/docs/Web/CSS/proprietes_css_animees /fr/docs/Web/CSS/CSS_animated_properties /fr/docs/Web/CSS/radial-gradient /fr/docs/orphaned/Web/CSS/radial-gradient() /fr/docs/Web/CSS/radial-gradient() /fr/docs/orphaned/Web/CSS/radial-gradient() -/fr/docs/Web/CSS/repeat /fr/docs/Web/CSS/repeat() +/fr/docs/Web/CSS/repeat() /fr/docs/Web/CSS/repeat /fr/docs/Web/CSS/repeating-conic-gradient /fr/docs/orphaned/Web/CSS/repeating-conic-gradient() /fr/docs/Web/CSS/repeating-conic-gradient() /fr/docs/orphaned/Web/CSS/repeating-conic-gradient() /fr/docs/Web/CSS/repeating-linear-gradient /fr/docs/orphaned/Web/CSS/repeating-linear-gradient() @@ -4275,34 +4278,36 @@ /fr/docs/Web/CSS/scrollbar-colr /fr/docs/Web/CSS/scrollbar-color /fr/docs/Web/CSS/scrollbar-track-color /fr/docs/Web/CSS/scrollbar-color /fr/docs/Web/CSS/shape-box /fr/docs/conflicting/Web/CSS/shape-outside -/fr/docs/Web/CSS/symbols /fr/docs/Web/CSS/symbols() +/fr/docs/Web/CSS/symbols() /fr/docs/Web/CSS/symbols /fr/docs/Web/CSS/timing-function /fr/docs/Web/CSS/easing-function -/fr/docs/Web/CSS/transform-function/matrix /fr/docs/Web/CSS/transform-function/matrix() -/fr/docs/Web/CSS/transform-function/matrix3d /fr/docs/Web/CSS/transform-function/matrix3d() -/fr/docs/Web/CSS/transform-function/perspective /fr/docs/Web/CSS/transform-function/perspective() -/fr/docs/Web/CSS/transform-function/rotate /fr/docs/Web/CSS/transform-function/rotate() -/fr/docs/Web/CSS/transform-function/rotate3d /fr/docs/Web/CSS/transform-function/rotate3d() -/fr/docs/Web/CSS/transform-function/rotateX /fr/docs/Web/CSS/transform-function/rotateX() -/fr/docs/Web/CSS/transform-function/rotateY /fr/docs/Web/CSS/transform-function/rotateY() -/fr/docs/Web/CSS/transform-function/rotateZ /fr/docs/Web/CSS/transform-function/rotateZ() -/fr/docs/Web/CSS/transform-function/scale /fr/docs/Web/CSS/transform-function/scale() -/fr/docs/Web/CSS/transform-function/scale3d /fr/docs/Web/CSS/transform-function/scale3d() -/fr/docs/Web/CSS/transform-function/scaleX /fr/docs/Web/CSS/transform-function/scaleX() -/fr/docs/Web/CSS/transform-function/scaleY /fr/docs/Web/CSS/transform-function/scaleY() -/fr/docs/Web/CSS/transform-function/scaleZ /fr/docs/Web/CSS/transform-function/scaleZ() -/fr/docs/Web/CSS/transform-function/skew /fr/docs/Web/CSS/transform-function/skew() -/fr/docs/Web/CSS/transform-function/skewX /fr/docs/Web/CSS/transform-function/skewX() -/fr/docs/Web/CSS/transform-function/skewY /fr/docs/Web/CSS/transform-function/skewY() -/fr/docs/Web/CSS/transform-function/translate /fr/docs/Web/CSS/transform-function/translate() -/fr/docs/Web/CSS/transform-function/translate3d /fr/docs/Web/CSS/transform-function/translate3d() -/fr/docs/Web/CSS/transform-function/translateX /fr/docs/orphaned/Web/CSS/transform-function/translateX -/fr/docs/Web/CSS/transform-function/translateY /fr/docs/Web/CSS/transform-function/translateY() -/fr/docs/Web/CSS/transform-function/translateZ /fr/docs/Web/CSS/transform-function/translateZ() +/fr/docs/Web/CSS/transform-function/matrix() /fr/docs/Web/CSS/transform-function/matrix +/fr/docs/Web/CSS/transform-function/matrix3d() /fr/docs/Web/CSS/transform-function/matrix3d +/fr/docs/Web/CSS/transform-function/perspective() /fr/docs/Web/CSS/transform-function/perspective +/fr/docs/Web/CSS/transform-function/rotate() /fr/docs/Web/CSS/transform-function/rotate +/fr/docs/Web/CSS/transform-function/rotate3d() /fr/docs/Web/CSS/transform-function/rotate3d +/fr/docs/Web/CSS/transform-function/rotateX() /fr/docs/Web/CSS/transform-function/rotateX +/fr/docs/Web/CSS/transform-function/rotateY() /fr/docs/Web/CSS/transform-function/rotateY +/fr/docs/Web/CSS/transform-function/rotateZ() /fr/docs/Web/CSS/transform-function/rotateZ +/fr/docs/Web/CSS/transform-function/scale() /fr/docs/Web/CSS/transform-function/scale +/fr/docs/Web/CSS/transform-function/scale3d() /fr/docs/Web/CSS/transform-function/scale3d +/fr/docs/Web/CSS/transform-function/scaleX() /fr/docs/Web/CSS/transform-function/scaleX +/fr/docs/Web/CSS/transform-function/scaleY() /fr/docs/Web/CSS/transform-function/scaleY +/fr/docs/Web/CSS/transform-function/scaleZ() /fr/docs/Web/CSS/transform-function/scaleZ +/fr/docs/Web/CSS/transform-function/skew() /fr/docs/Web/CSS/transform-function/skew +/fr/docs/Web/CSS/transform-function/skewX() /fr/docs/Web/CSS/transform-function/skewX +/fr/docs/Web/CSS/transform-function/skewY /fr/docs/conflicting/Web/CSS/transform-function/skewX +/fr/docs/Web/CSS/transform-function/skewY() /fr/docs/conflicting/Web/CSS/transform-function/skewX +/fr/docs/Web/CSS/transform-function/translate() /fr/docs/Web/CSS/transform-function/translate +/fr/docs/Web/CSS/transform-function/translate3d() /fr/docs/Web/CSS/transform-function/translate3d +/fr/docs/Web/CSS/transform-function/translateX() /fr/docs/Web/CSS/transform-function/translateX +/fr/docs/Web/CSS/transform-function/translateY() /fr/docs/Web/CSS/transform-function/translateY +/fr/docs/Web/CSS/transform-function/translateZ() /fr/docs/Web/CSS/transform-function/translateZ /fr/docs/Web/CSS/uri /fr/docs/conflicting/Web/CSS/url()_168028c4e5edd9e19c061adb4b604d4f -/fr/docs/Web/CSS/url /fr/docs/conflicting/Web/CSS/url()_168028c4e5edd9e19c061adb4b604d4f +/fr/docs/Web/CSS/url() /fr/docs/Web/CSS/url /fr/docs/Web/CSS/user-ident /fr/docs/Web/CSS/custom-ident /fr/docs/Web/CSS/valeur_reelle /fr/docs/Web/CSS/actual_value /fr/docs/Web/CSS/valeur_résolue /fr/docs/Web/CSS/resolved_value +/fr/docs/Web/CSS/var() /fr/docs/Web/CSS/var /fr/docs/Web/CSS/visible /fr/docs/Web/CSS/visibility /fr/docs/Web/CSS/word-wrap /fr/docs/Web/CSS/overflow-wrap /fr/docs/Web/CSS/Élément_remplacé /fr/docs/Web/CSS/Replaced_element @@ -5900,7 +5905,7 @@ /fr/docs/inset-inline-end /fr/docs/Web/CSS/inset-inline-end /fr/docs/inset-inline-start /fr/docs/Web/CSS/inset-inline-start /fr/docs/orphaned/Introduction_à_la_cryptographie_à_clef_publique/Signatures_numériques /fr/docs/Glossary/Signature/Security -/fr/docs/orphaned/Web/CSS/linear-gradient() /fr/docs/Web/CSS/gradient/linear-gradient() +/fr/docs/orphaned/Web/CSS/linear-gradient() /fr/docs/Web/CSS/gradient/linear-gradient /fr/docs/orphaned/Web/Guide/Events/Media_events /fr/docs/Web/Events#media /fr/docs/setAttribute /fr/docs/Web/API/Element/setAttribute /fr/docs/toSource /fr/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Object/toSource diff --git a/files/fr/_wikihistory.json b/files/fr/_wikihistory.json index fe0a8da655..636ac7b558 100644 --- a/files/fr/_wikihistory.json +++ b/files/fr/_wikihistory.json @@ -23337,18 +23337,18 @@ "SphinxKnight" ] }, - "Web/CSS/:host()": { - "modified": "2020-10-15T22:02:15.628Z", + "Web/CSS/:host-context()": { + "modified": "2020-10-15T22:02:13.459Z", "contributors": [ "SphinxKnight", - "tonybengue" + "lp177" ] }, - "Web/CSS/:host-context()": { - "modified": "2020-10-15T22:02:13.459Z", + "Web/CSS/:host_function": { + "modified": "2020-10-15T22:02:15.628Z", "contributors": [ "SphinxKnight", - "lp177" + "tonybengue" ] }, "Web/CSS/:hover": { @@ -25709,7 +25709,7 @@ "Kyodev" ] }, - "Web/CSS/attr()": { + "Web/CSS/attr": { "modified": "2020-11-04T08:51:39.350Z", "contributors": [ "chrisdavidmills", @@ -26620,7 +26620,7 @@ "edspeedy" ] }, - "Web/CSS/calc()": { + "Web/CSS/calc": { "modified": "2020-11-04T09:09:07.893Z", "contributors": [ "chrisdavidmills", @@ -26656,7 +26656,7 @@ "SphinxKnight" ] }, - "Web/CSS/clamp()": { + "Web/CSS/clamp": { "modified": "2020-11-05T09:58:32.959Z", "contributors": [ "chrisdavidmills", @@ -26867,7 +26867,7 @@ "FredB" ] }, - "Web/CSS/counter()": { + "Web/CSS/counter": { "modified": "2020-11-09T07:18:11.964Z", "contributors": [ "chrisdavidmills", @@ -26902,14 +26902,14 @@ "SphinxKnight" ] }, - "Web/CSS/counters()": { + "Web/CSS/counters": { "modified": "2020-11-09T07:19:24.761Z", "contributors": [ "chrisdavidmills", "SphinxKnight" ] }, - "Web/CSS/cross-fade()": { + "Web/CSS/cross-fade": { "modified": "2020-11-09T07:22:14.922Z", "contributors": [ "chrisdavidmills", @@ -27029,7 +27029,7 @@ "SphinxKnight" ] }, - "Web/CSS/element()": { + "Web/CSS/element": { "modified": "2020-11-10T11:06:03.387Z", "contributors": [ "chrisdavidmills", @@ -27046,7 +27046,7 @@ "FredB" ] }, - "Web/CSS/env()": { + "Web/CSS/env": { "modified": "2020-11-10T11:09:42.633Z", "contributors": [ "chrisdavidmills", @@ -27075,70 +27075,70 @@ "SphinxKnight" ] }, - "Web/CSS/filter-function/blur()": { + "Web/CSS/filter-function/blur": { "modified": "2020-11-05T09:45:36.368Z", "contributors": [ "chrisdavidmills", "SphinxKnight" ] }, - "Web/CSS/filter-function/brightness()": { + "Web/CSS/filter-function/brightness": { "modified": "2020-11-05T09:57:14.227Z", "contributors": [ "chrisdavidmills", "SphinxKnight" ] }, - "Web/CSS/filter-function/contrast()": { + "Web/CSS/filter-function/contrast": { "modified": "2020-11-09T07:20:47.447Z", "contributors": [ "chrisdavidmills", "SphinxKnight" ] }, - "Web/CSS/filter-function/drop-shadow()": { + "Web/CSS/filter-function/drop-shadow": { "modified": "2020-11-10T10:58:25.362Z", "contributors": [ "chrisdavidmills", "SphinxKnight" ] }, - "Web/CSS/filter-function/grayscale()": { + "Web/CSS/filter-function/grayscale": { "modified": "2020-11-10T11:18:37.733Z", "contributors": [ "chrisdavidmills", "SphinxKnight" ] }, - "Web/CSS/filter-function/hue-rotate()": { + "Web/CSS/filter-function/hue-rotate": { "modified": "2020-11-16T08:50:37.620Z", "contributors": [ "chrisdavidmills", "SphinxKnight" ] }, - "Web/CSS/filter-function/invert()": { + "Web/CSS/filter-function/invert": { "modified": "2020-11-16T08:55:25.015Z", "contributors": [ "chrisdavidmills", "SphinxKnight" ] }, - "Web/CSS/filter-function/opacity()": { + "Web/CSS/filter-function/opacity": { "modified": "2020-11-16T09:07:46.418Z", "contributors": [ "chrisdavidmills", "SphinxKnight" ] }, - "Web/CSS/filter-function/saturate()": { + "Web/CSS/filter-function/saturate": { "modified": "2020-11-30T10:11:43.128Z", "contributors": [ "chrisdavidmills", "SphinxKnight" ] }, - "Web/CSS/filter-function/sepia()": { + "Web/CSS/filter-function/sepia": { "modified": "2020-11-30T10:24:25.787Z", "contributors": [ "chrisdavidmills", @@ -28153,7 +28153,7 @@ "SphinxKnight" ] }, - "Web/CSS/max()": { + "Web/CSS/max": { "modified": "2020-11-16T09:02:34.879Z", "contributors": [ "chrisdavidmills", @@ -28198,7 +28198,7 @@ "Fredchat" ] }, - "Web/CSS/min()": { + "Web/CSS/min": { "modified": "2020-11-16T09:04:19.879Z", "contributors": [ "chrisdavidmills", @@ -28244,7 +28244,7 @@ "Fredchat" ] }, - "Web/CSS/minmax()": { + "Web/CSS/minmax": { "modified": "2020-11-16T09:06:07.004Z", "contributors": [ "chrisdavidmills", @@ -28760,7 +28760,7 @@ "FredB" ] }, - "Web/CSS/repeat()": { + "Web/CSS/repeat": { "modified": "2020-11-18T14:44:25.185Z", "contributors": [ "chrisdavidmills", @@ -29102,7 +29102,7 @@ "ThePrisoner" ] }, - "Web/CSS/symbols()": { + "Web/CSS/symbols": { "modified": "2020-11-30T10:29:26.349Z", "contributors": [ "chrisdavidmills", @@ -29412,7 +29412,7 @@ "mrstork" ] }, - "Web/CSS/transform-function/matrix()": { + "Web/CSS/transform-function/matrix": { "modified": "2020-11-16T08:59:24.432Z", "contributors": [ "chrisdavidmills", @@ -29420,7 +29420,7 @@ "stephane-tessier" ] }, - "Web/CSS/transform-function/matrix3d()": { + "Web/CSS/transform-function/matrix3d": { "modified": "2020-11-16T09:01:09.677Z", "contributors": [ "chrisdavidmills", @@ -29428,7 +29428,7 @@ "Sebastianz" ] }, - "Web/CSS/transform-function/perspective()": { + "Web/CSS/transform-function/perspective": { "modified": "2020-11-16T09:10:28.191Z", "contributors": [ "chrisdavidmills", @@ -29436,7 +29436,7 @@ "mrstork" ] }, - "Web/CSS/transform-function/rotate()": { + "Web/CSS/transform-function/rotate": { "modified": "2020-11-19T16:05:47.321Z", "contributors": [ "chrisdavidmills", @@ -29445,7 +29445,7 @@ "prayash" ] }, - "Web/CSS/transform-function/rotate3d()": { + "Web/CSS/transform-function/rotate3d": { "modified": "2020-11-19T16:07:17.057Z", "contributors": [ "chrisdavidmills", @@ -29455,7 +29455,7 @@ "prayash" ] }, - "Web/CSS/transform-function/rotateX()": { + "Web/CSS/transform-function/rotateX": { "modified": "2020-11-19T16:08:58.335Z", "contributors": [ "chrisdavidmills", @@ -29463,7 +29463,7 @@ "prayash" ] }, - "Web/CSS/transform-function/rotateY()": { + "Web/CSS/transform-function/rotateY": { "modified": "2020-11-19T16:09:55.866Z", "contributors": [ "chrisdavidmills", @@ -29471,7 +29471,7 @@ "prayash" ] }, - "Web/CSS/transform-function/rotateZ()": { + "Web/CSS/transform-function/rotateZ": { "modified": "2020-11-30T10:07:33.024Z", "contributors": [ "chrisdavidmills", @@ -29479,7 +29479,7 @@ "prayash" ] }, - "Web/CSS/transform-function/scale()": { + "Web/CSS/transform-function/scale": { "modified": "2020-11-30T10:15:36.688Z", "contributors": [ "chrisdavidmills", @@ -29489,7 +29489,7 @@ "Sebastianz" ] }, - "Web/CSS/transform-function/scale3d()": { + "Web/CSS/transform-function/scale3d": { "modified": "2020-11-30T10:19:17.844Z", "contributors": [ "chrisdavidmills", @@ -29498,7 +29498,7 @@ "Sebastianz" ] }, - "Web/CSS/transform-function/scaleX()": { + "Web/CSS/transform-function/scaleX": { "modified": "2020-11-30T10:20:33.117Z", "contributors": [ "chrisdavidmills", @@ -29506,7 +29506,7 @@ "Sebastianz" ] }, - "Web/CSS/transform-function/scaleY()": { + "Web/CSS/transform-function/scaleY": { "modified": "2020-11-30T10:21:46.233Z", "contributors": [ "chrisdavidmills", @@ -29514,7 +29514,7 @@ "Sebastianz" ] }, - "Web/CSS/transform-function/scaleZ()": { + "Web/CSS/transform-function/scaleZ": { "modified": "2020-11-30T10:23:37.630Z", "contributors": [ "chrisdavidmills", @@ -29522,7 +29522,7 @@ "Sebastianz" ] }, - "Web/CSS/transform-function/skew()": { + "Web/CSS/transform-function/skew": { "modified": "2020-11-30T10:25:40.996Z", "contributors": [ "chrisdavidmills", @@ -29530,7 +29530,7 @@ "prayash" ] }, - "Web/CSS/transform-function/skewX()": { + "Web/CSS/transform-function/skewX": { "modified": "2020-11-30T10:27:10.768Z", "contributors": [ "chrisdavidmills", @@ -29539,15 +29539,7 @@ "prayash" ] }, - "Web/CSS/transform-function/skewY()": { - "modified": "2020-11-30T10:28:12.012Z", - "contributors": [ - "chrisdavidmills", - "SphinxKnight", - "prayash" - ] - }, - "Web/CSS/transform-function/translate()": { + "Web/CSS/transform-function/translate": { "modified": "2020-11-30T10:30:22.993Z", "contributors": [ "chrisdavidmills", @@ -29555,7 +29547,7 @@ "mrstork" ] }, - "Web/CSS/transform-function/translate3d()": { + "Web/CSS/transform-function/translate3d": { "modified": "2020-11-30T12:56:47.640Z", "contributors": [ "chrisdavidmills", @@ -29564,7 +29556,7 @@ "mrstork" ] }, - "Web/CSS/transform-function/translateY()": { + "Web/CSS/transform-function/translateY": { "modified": "2020-11-30T13:01:02.374Z", "contributors": [ "chrisdavidmills", @@ -29572,7 +29564,7 @@ "mrstork" ] }, - "Web/CSS/transform-function/translateZ()": { + "Web/CSS/transform-function/translateZ": { "modified": "2020-11-30T13:02:52.702Z", "contributors": [ "chrisdavidmills", @@ -29692,7 +29684,7 @@ "SphinxKnight" ] }, - "Web/CSS/url()": { + "Web/CSS/url": { "modified": "2020-10-15T22:20:27.752Z", "contributors": [ "SphinxKnight" @@ -29725,7 +29717,7 @@ "louuis" ] }, - "Web/CSS/var()": { + "Web/CSS/var": { "modified": "2020-10-15T21:42:32.805Z", "contributors": [ "SphinxKnight" @@ -43377,6 +43369,14 @@ "SphinxKnight" ] }, + "conflicting/Web/CSS/transform-function/skewX": { + "modified": "2020-11-30T10:28:12.012Z", + "contributors": [ + "chrisdavidmills", + "SphinxKnight", + "prayash" + ] + }, "conflicting/Web/CSS/url()": { "modified": "2019-04-06T11:57:29.213Z", "contributors": [ diff --git a/files/fr/conflicting/web/css/transform-function/skewx/index.md b/files/fr/conflicting/web/css/transform-function/skewx/index.md new file mode 100644 index 0000000000..89cd5b762f --- /dev/null +++ b/files/fr/conflicting/web/css/transform-function/skewx/index.md @@ -0,0 +1,130 @@ +--- +title: skewY() +slug: conflicting/Web/CSS/transform-function/skewX +translation_of: Web/CSS/transform-function/skewY() +original_slug: Web/CSS/transform-function/skewY() +browser-compat: css.types.transform-function.skewY +--- +{{CSSRef}} + +La fonction **`skewY()`** permet d'opérer une distorsion verticale en étirant chaque point de l'élément d'un certain angle dans la direction verticale. Pour cela, on augmente l'ordonnée d'un élément d'une valeur proportionnelle à l'angle donné et à la distance de l'origine. Plus le point est éloigné de l'origine et loin de l'axe, plus le décalage obtenu sera important. + +{{EmbedInteractiveExample("pages/css/function-skewY.html")}} + +La valeur obtenue par cette fonction est de type [``](/fr/docs/Web/CSS/transform-function). + +## Syntaxe + +```css +skewY(a) +``` + +### Valeurs + +- `a` + - : Une valeur de type [``](/fr/docs/Web/CSS/angle) qui représente l'angle avec lequel appliquer la distorsion selon l'axe des ordonnées (axe vertical). + + + + + + + + + + + + + + + + + + + + + +
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
+ 10tan(ax)1 + + 100tan(ax)10001 + + 100tan(ax)10001 + + 1000tan(ax)10000100001 +
[1 tan(a) 0 1 0 0]
+ +## Exemples + +### HTML + +```html +
Normal
+
Distordu
+``` + +### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.skewed { + transform: skewY(40deg); + background-color: pink; +} +``` + +### Résultat + +{{EmbedLiveSample("Exemples","100%","250")}} + +## Specifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [`transform`](/fr/docs/Web/CSS/transform) +- [``](/fr/docs/Web/CSS/transform-function) diff --git a/files/fr/web/css/_colon_host()/index.md b/files/fr/web/css/_colon_host()/index.md deleted file mode 100644 index e0dfa1c855..0000000000 --- a/files/fr/web/css/_colon_host()/index.md +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: ':host()' -slug: Web/CSS/:host() -tags: - - CSS - - Pseudo-classe - - Reference -translation_of: Web/CSS/:host() ---- -{{CSSRef}} - -La fonction de [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:host()`** permet de sélectionner l'hôte du _shadow DOM_ contenant le CSS à utiliser, uniquement si le sélecteur passé en argument correspond à l'élément hôte. - -Le scénario principal pour utiliser cette fonction consiste à vouloir cibler une certaine classe d'éléments personnalisés : pour cela, on passera la classe comme argument de la fonction `:host()`. Cette fonction ne peut pas être utilisée avec un sélecteur de descendant, pour cela il faudra utiliser {{cssxref(":host-context()")}}. - -> **Note :** Cette fonction n'a aucun effet si elle est utilisée en dehors d'un _shadow DOM_. - -```css -/* On cible l'hôte du shadow DOM uniquement s'il - correspond au sélecteur passé en argument */ -:host(.special-custom-element) { - font-weight: bold; -} -``` - -## Syntaxe - -{{csssyntax}} - -## Exemples - -Les fragments de code suivants sont extraits du dépôt d'exemple [_host-selectors_](https://github.com/mdn/web-components-examples/tree/master/host-selectors) ([voir le résultat en direct](https://mdn.github.io/web-components-examples/host-selectors/)). - -Dans cet exemple, on dispose d'un élément personnalisé, ``, qui peut contenir du texte : - -```html -

Host selectors example

-``` - -Dans le constructeur de l'élément, on crée un élément `style` et un élément `span`. Ce dernier recevra le contenu textuel de l'élément personnalisé et l'élément `style` recevra quelques règles CSS : - -```js -let style = document.createElement('style'); -let span = document.createElement('span'); -span.textContent = this.textContent; - -const shadowRoot = this.attachShadow({mode: 'open'}); -shadowRoot.appendChild(style); -shadowRoot.appendChild(span); - -style.textContent = 'span:hover { text-decoration: underline; }' + - ':host-context(h1) { font-style: italic; }' + - ':host-context(h1):after { content: " - no links in headers!" }' + - ':host-context(article, aside) { color: gray; }' + - ':host(.footer) { color : red; }' + - ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }'; -``` - -La règle `:host(.footer) { color : red; }` s'applique à toutes les instances de l'élément `` (il s'agit ici de l'hôte) du document qui possèdent la classe `footer`. Ici, pour ces éléments donnés, on utilise une couleur spécifique. - -## Spécifications - -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------ | ---------------------------- | -------------------- | -| {{SpecName('CSS Scope', '#host-selector', ':host()')}} | {{Spec2('CSS Scope')}} | Définition initiale. | - -## Compatibilité des navigateurs - -{{Compat("css.selectors.hostfunction")}} - -## Voir aussi - -- [Les composants web](/fr/docs/Web/Web_Components) -- {{cssxref(":host")}} -- {{cssxref(":host-context()")}} diff --git a/files/fr/web/css/_colon_host_function/index.md b/files/fr/web/css/_colon_host_function/index.md new file mode 100644 index 0000000000..14589f8e50 --- /dev/null +++ b/files/fr/web/css/_colon_host_function/index.md @@ -0,0 +1,76 @@ +--- +title: ':host()' +slug: Web/CSS/:host_function +tags: + - CSS + - Pseudo-classe + - Reference +translation_of: Web/CSS/:host() +original_slug: Web/CSS/:host() +--- +{{CSSRef}} + +La fonction de [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:host()`** permet de sélectionner l'hôte du _shadow DOM_ contenant le CSS à utiliser, uniquement si le sélecteur passé en argument correspond à l'élément hôte. + +Le scénario principal pour utiliser cette fonction consiste à vouloir cibler une certaine classe d'éléments personnalisés : pour cela, on passera la classe comme argument de la fonction `:host()`. Cette fonction ne peut pas être utilisée avec un sélecteur de descendant, pour cela il faudra utiliser {{cssxref(":host-context()")}}. + +> **Note :** Cette fonction n'a aucun effet si elle est utilisée en dehors d'un _shadow DOM_. + +```css +/* On cible l'hôte du shadow DOM uniquement s'il + correspond au sélecteur passé en argument */ +:host(.special-custom-element) { + font-weight: bold; +} +``` + +## Syntaxe + +{{csssyntax}} + +## Exemples + +Les fragments de code suivants sont extraits du dépôt d'exemple [_host-selectors_](https://github.com/mdn/web-components-examples/tree/master/host-selectors) ([voir le résultat en direct](https://mdn.github.io/web-components-examples/host-selectors/)). + +Dans cet exemple, on dispose d'un élément personnalisé, ``, qui peut contenir du texte : + +```html +

Host selectors example

+``` + +Dans le constructeur de l'élément, on crée un élément `style` et un élément `span`. Ce dernier recevra le contenu textuel de l'élément personnalisé et l'élément `style` recevra quelques règles CSS : + +```js +let style = document.createElement('style'); +let span = document.createElement('span'); +span.textContent = this.textContent; + +const shadowRoot = this.attachShadow({mode: 'open'}); +shadowRoot.appendChild(style); +shadowRoot.appendChild(span); + +style.textContent = 'span:hover { text-decoration: underline; }' + + ':host-context(h1) { font-style: italic; }' + + ':host-context(h1):after { content: " - no links in headers!" }' + + ':host-context(article, aside) { color: gray; }' + + ':host(.footer) { color : red; }' + + ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }'; +``` + +La règle `:host(.footer) { color : red; }` s'applique à toutes les instances de l'élément `` (il s'agit ici de l'hôte) du document qui possèdent la classe `footer`. Ici, pour ces éléments donnés, on utilise une couleur spécifique. + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------ | ---------------------------- | -------------------- | +| {{SpecName('CSS Scope', '#host-selector', ':host()')}} | {{Spec2('CSS Scope')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("css.selectors.hostfunction")}} + +## Voir aussi + +- [Les composants web](/fr/docs/Web/Web_Components) +- {{cssxref(":host")}} +- {{cssxref(":host-context()")}} diff --git a/files/fr/web/css/attr()/index.md b/files/fr/web/css/attr()/index.md deleted file mode 100644 index b5bc479199..0000000000 --- a/files/fr/web/css/attr()/index.md +++ /dev/null @@ -1,366 +0,0 @@ ---- -title: attr() -slug: Web/CSS/attr() -translation_of: Web/CSS/attr() ---- -{{CSSRef}} - -La fonction **`attr()`** est utilisée afin de récupérer la valeur d'un attribut d'un élément pour l'utiliser dans la feuille de style. Cette fonction peut également être utilisée sur [les pseudo-éléments](/fr/docs/Web/CSS/Pseudo-elements) auquel cas c'est la valeur correspondant à l'élément source qui est renvoyée. - -```css -/* Utilisation simple */ -attr(data-count); -attr(title); - -/* Avec un type */ -attr(src url); -attr(data-count number); -attr(data-width px); - -/* Avec une valeur par défaut */ -attr(data-count number, 0); -attr(src url, ""); -attr(data-width px, inherit); -attr(data-something, "default"); -``` - -> **Note :** La fonction `attr()` peut être utilisée sur n'importe quelle propriété CSS. Toutefois, en dehors de {{cssxref("content")}}, la prise en charge des navigateurs est expérimentale. Voir le tableau de compatibilité en fin d'article. - -## Syntaxe - -### Valeurs - -- `attribute-name` - - : Le nom de l'attribut de l'élément HTML ciblé par la déclaration CSS. -- `` {{experimental_inline}} - - - : Un mot-clé indiquant le type de valeur pour l'attribut ou l'unité dans laquelle elle est exprimée. Si la valeur `` est invalide pour l'attribut ciblé, l'expression `attr()` sera également considérée comme invalide. Si cette valeur est absente, elle vaudra `string` par défaut. La liste des valeurs valides est : - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Mot-cléType associéCommentairesValeur par défaut
string{{cssxref("<string>")}} - La valeur de l'attribut est traitée comme une chaîne de caractères. Elle - n'est pas réanalysée et les caractères sont utilisés tels quels (les - échappements CSS ne sont pas transformés). - Une chaîne vide.
color {{experimental_inline}}{{cssxref("<color>")}} - La valeur de l'attribut est analysée comme un code sur 3 ou 6 chiffres - ou comme un mot-clé. Elle doit être une valeur - {{cssxref("<string>")}} valide. Les blancs en début et - en fin de chaîne sont supprimés. - currentColor
url {{experimental_inline}}{{cssxref("<uri>")}} - La valeur de l'attribut est analysée comme une chaîne, utilisée dans une - fonction url().
Une URL relative sera résolue par - rapport au document original et non par rapport à la feuille de style. - Les blancs en début et en fin de chaîne sont supprimés. - 		- L'URL about:invalid qui pointe vers un document inexistant. -
integer {{experimental_inline}}{{cssxref("<integer>")}} - La valeur de l'attribut est analysée comme un entier - ({{cssxref("<integer>")}}). Si elle n'est pas valide (si - ce n'est pass un entier ou s'il sort de l'intervalle autorisé par la - propriété), ce sera la valeur par défaut qui sera utilisée.
Les - blancs en début et en fin de chaîne sont supprimés. - 		- 0, ou, si 0 n'est pas valide, la valeur - minimale de la propriété. -
number {{experimental_inline}}{{cssxref("<number>")}} - La valeur de l'attribut est analysée comme un nombre - ({{cssxref("<number>")}}). Si elle n'est pas valide (si - ce n'est pas un nombre ou que celui-ci sort de l'intervalle autorisé par - la propriété), ce sera la valeur par défaut qui sera utilisée.
Les - blancs en début et en fin de chaîne sont supprimés. - 		- 0, ou, si 0 n'est pas valide, la valeur - minimale de la propriété. -
length {{experimental_inline}}{{cssxref("<length>")}} -

- La valeur de l'attribut est analysée comme une longueur - ({{cssxref("<length>")}}) et inclut l'unité (par - exemple 12.5em). Si la valeur n'est pas valide (si ce - n'est pas une longueur ou que celle-ci sort de l'intervalle autorisé - par la propriété), ce sera la valeur par défaut qui sera utilisée.
Si - l'unité fournie est une unité relative, attr() calculera - la valeur absolue correspondante. Les blancs en début et en fin de - chaîne sont supprimés. -

- 		- 0, ou, si 0 n'est pas valide, la valeur - minimale de la propriété. -
- em, ex, px, rem, - vw, vh, vmin, vmax, - mm, cm, in, pt, or - pc {{experimental_inline}} - {{cssxref("<length>")}} - La valeur de l'attribut est analysée comme un nombre - ({{cssxref("<number>")}}) (il n'y a pas d'unité) et - interprétée comme une longueur - ({{cssxref("<length>")}}) grâce à l'unité passée comme - argument. Si la valeur n'est pas valide (ce n'est pas un nombre ou - celui-ci sort de l'intervalle autorisé par la propriété), ce sera la - valeur par défaut qui sera utilisée.
Si l'unité indiquée est une - unité de longueur relative, attr() calculera la valeur - absolue correspondante.
Les blancs en début et en fin de chaîne - sont supprimés. - 		- 0, ou, si 0 n'est pas valide, la valeur - minimale de la propriété. -
angle {{experimental_inline}}{{cssxref("<angle>")}} - La valeur de l'attribut est analysée comme un angle - ({{cssxref("<angle>")}}) et inclut l'unité (par exemple - 30.5deg). Si la valeur n'est pas valide (si ce n'est pas un - angle ou si la valeur sort de l'intervalle autorisé par la propriété - CSS), ce sera la valeur par défaut qui sera utilisée.
Les blancs en - début et en fin de chaîne sont supprimés. - 		- 0deg, ou, si 0deg n'est pas valide, la valeur - minimale de la propriété. -
- deg, grad, - rad {{experimental_inline}} - {{cssxref("<angle>")}} -

- La valeur de l'attribut est analysée comme un nombre - ({{cssxref("<number>")}}) (il n'y a pas d'unité) et - est interprétée comme un angle ({{cssxref("<angle>")}}) - avec l'unité indiquée en paramètre. Si la vlaeur n'est pas vliade (ce - n'est pas un nombre ou celui-ci sort de l'intervalle autorisé par la - propriété), ce sera la valeur par défaut qui sera utilisée.
Les - blancs en début et en fin de chaîne sont supprimés. -

- 		- 0deg, ou, si 0deg n'est pas valide, la valeur - minimale de la propriété. -
time {{experimental_inline}}{{cssxref("<time>")}} - La valeur de l'attribut est analysée comme une durée - ({{cssxref("<time>")}}) et inclut l'unité (par exemple - 30.5ms). Si elle n'est pas valide (la valeur n'est pas une - durée ou n'est pas comprise dans l'intervalle autorisée), ce sera la - valeur par défaut qui sera utilisée.
Les blancs en début et en fin - de chaîne sont supprimés. - 		- 0s, ou, si 0s n'est pas valide, la valeur - minimale de la propriété. -
s, ms {{experimental_inline}}{{cssxref("<time>")}} - La valeur de l'attribut est analysée comme un nombre - ({{cssxref("<number>")}}) sans unité (par exemple - 12.5) et est interprétée comme une durée - ({{cssxref("<time>")}}) grâce à l'unité passée en - paramètre. Si la valeur n'est pas valide (ce n'est pas un nombre ou - celui-ci n'est pas compris dans l'intervalle autorisé), ce sera la - valeur par défaut qui sera utilisée.
Les blancs en début et en fin - de chaîne sont supprimés. - 		- 0s, ou, si 0s n'est pas valide, la valeur - minimale de la propriété. -
frequency {{experimental_inline}}{{cssxref("<frequency>")}} - La valeur de l'attribut est analysée comme une fréquence - ({{cssxref("<frequency>")}}) et inclut l'unité (par - exemple 30.5kHz). Si elle n'est pas valide (ce n'est pas - une fréquence ou celle-ci n'est pas comprise dans l'intervalle - autorisé), ce sera la valeur par défaut qui sera utilisée. Les blancs en - début et en fin de chaîne sont supprimés. - - 0Hz, ou, si 0Hz n'est pas valide, la valeur - minimale de la propriété. -
- Hz, kHz {{experimental_inline}} - {{cssxref("<frequency>")}} - La valeur de l'attribut est analysée comme un nombre - ({{cssxref("<number>")}}) sans unité (par exemple - 12.5) et est interprétée comme une fréquence grâce à - l'unité indiquée. Si la valeur n'est pas valide (ce n'est pas un nombre - ou celui-ci n'est pas compris dans l'intervalle autorisé), ce sera la - valeur par défaut qui sera utilisée.
Les blancs en début et en fin - de chaîne sont supprimés. - 		- 0Hz, ou, si 0Hz n'est pas valide, la valeur - minimale de la propriété. -
% {{experimental_inline}}{{cssxref("<percentage>")}} - La valeur de l'attribut est analysée comme un nombre - ({{cssxref("<number>")}}) sans unité (par exemple - 12.5) et est interprétée comme un pourcentage - ({{cssxref("<percentage>")}}). Si elle n'est pas valide - (ce n'est pas un nombre ou celui-ci n'est pas compris dans l'intervalle - autorisé par la propriété), ce sera la valeur par défaut qui sera - utilisée.
Si la valeur fournie est utilisée comme une longueur, - attr() calcule la longueur absolue correspondante.
Les - blancs en début et en fin de chaîne sont supprimés. - 		- 0%, ou, si 0% n'est pas valide, la valeur - minimale de la propriété. -
- -- `` {{experimental_inline}} - - : La valeur qui sera utilisée si l'attribut est absent ou contient une valeur invalide. La valeur indiquée avec ce paramètre doit être valide et ne doit pas contenir une autre expression `attr()`. Si `attr()` n'est pas le seul composant de la valeur d'une propriété, la valeur `` doit correspondre au type défini par ``. Si ce paramètre n'est pas utilisé, le moteur de rendu utilisera la valeur par défaut définie par ``. - -### Syntaxe formelle - -{{csssyntax}} - -## Exemples - -### Utiliser la propriété `content` - -#### HTML - -```html -

world

-``` - -#### CSS - -```css -[data-toto]::before { - content: attr(data-toto) " "; -} -``` - -#### Résultat - -{{EmbedLiveSample("Utiliser_la_propriété_content", "100%", "50")}} - -### Valeur `` - -{{SeeCompatTable}} - -#### HTML - -```html -
-``` - -#### CSS - -```css -html, -body, -.background { - height: 100vh; -} -``` - -```css -.background { - background-color: red; -} - -.background[data-background] { - background-color: attr(data-background color, red); -} -``` - -#### Résultat - -{{EmbedLiveSample("Valeur_color", "100%", "50")}} - -## Spécifications - -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName("CSS4 Values", "#attr-notation", "attr()")}} | {{Spec2("CSS4 Values")}} | Aucune modification. | -| {{SpecName('CSS3 Values', '#attr-notation', 'attr()')}} | {{Spec2('CSS3 Values')}} | Ajout de deux paramètres optionnels. La fonction peut être utilisée sur toutes les propriétés et renvoyer des valeurs qui ne sont pas des chaînes de caractères. Ces modifications sont expérimentales et pourront être abandonnées pour la recommandation si la prise en charge des navigateurs est trop faible. | -| {{SpecName('CSS2.1', 'generate.html#x18', 'attr()')}} | {{Spec2('CSS2.1')}} | Utilisation limitée à {{cssxref("content")}}, la fonction renvoie toujours une chaîne de caractères ({{cssxref("<string>")}}). | - -## Compatibilité des navigateurs - -{{Compat("css.types.attr")}} - -## Voir aussi - -- [Sélecteur d'attribut](/fr/docs/Web/CSS/Attribute_selectors) -- [Attributs HTML `data-*`](/fr/docs/Web/HTML/Global_attributes/data-*) -- [Attributs SVG `data-*`](/fr/docs/Web/SVG/Attribute/data-*) diff --git a/files/fr/web/css/attr/index.md b/files/fr/web/css/attr/index.md new file mode 100644 index 0000000000..428fd07c35 --- /dev/null +++ b/files/fr/web/css/attr/index.md @@ -0,0 +1,367 @@ +--- +title: attr() +slug: Web/CSS/attr +translation_of: Web/CSS/attr() +original_slug: Web/CSS/attr() +--- +{{CSSRef}} + +La fonction **`attr()`** est utilisée afin de récupérer la valeur d'un attribut d'un élément pour l'utiliser dans la feuille de style. Cette fonction peut également être utilisée sur [les pseudo-éléments](/fr/docs/Web/CSS/Pseudo-elements) auquel cas c'est la valeur correspondant à l'élément source qui est renvoyée. + +```css +/* Utilisation simple */ +attr(data-count); +attr(title); + +/* Avec un type */ +attr(src url); +attr(data-count number); +attr(data-width px); + +/* Avec une valeur par défaut */ +attr(data-count number, 0); +attr(src url, ""); +attr(data-width px, inherit); +attr(data-something, "default"); +``` + +> **Note :** La fonction `attr()` peut être utilisée sur n'importe quelle propriété CSS. Toutefois, en dehors de {{cssxref("content")}}, la prise en charge des navigateurs est expérimentale. Voir le tableau de compatibilité en fin d'article. + +## Syntaxe + +### Valeurs + +- `attribute-name` + - : Le nom de l'attribut de l'élément HTML ciblé par la déclaration CSS. +- `` {{experimental_inline}} + + - : Un mot-clé indiquant le type de valeur pour l'attribut ou l'unité dans laquelle elle est exprimée. Si la valeur `` est invalide pour l'attribut ciblé, l'expression `attr()` sera également considérée comme invalide. Si cette valeur est absente, elle vaudra `string` par défaut. La liste des valeurs valides est : + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Mot-cléType associéCommentairesValeur par défaut
string{{cssxref("<string>")}} + La valeur de l'attribut est traitée comme une chaîne de caractères. Elle + n'est pas réanalysée et les caractères sont utilisés tels quels (les + échappements CSS ne sont pas transformés). + Une chaîne vide.
color {{experimental_inline}}{{cssxref("<color>")}} + La valeur de l'attribut est analysée comme un code sur 3 ou 6 chiffres + ou comme un mot-clé. Elle doit être une valeur + {{cssxref("<string>")}} valide. Les blancs en début et + en fin de chaîne sont supprimés. + currentColor
url {{experimental_inline}}{{cssxref("<uri>")}} + La valeur de l'attribut est analysée comme une chaîne, utilisée dans une + fonction url().
Une URL relative sera résolue par + rapport au document original et non par rapport à la feuille de style. + Les blancs en début et en fin de chaîne sont supprimés. + 		+ L'URL about:invalid qui pointe vers un document inexistant. +
integer {{experimental_inline}}{{cssxref("<integer>")}} + La valeur de l'attribut est analysée comme un entier + ({{cssxref("<integer>")}}). Si elle n'est pas valide (si + ce n'est pass un entier ou s'il sort de l'intervalle autorisé par la + propriété), ce sera la valeur par défaut qui sera utilisée.
Les + blancs en début et en fin de chaîne sont supprimés. + 		+ 0, ou, si 0 n'est pas valide, la valeur + minimale de la propriété. +
number {{experimental_inline}}{{cssxref("<number>")}} + La valeur de l'attribut est analysée comme un nombre + ({{cssxref("<number>")}}). Si elle n'est pas valide (si + ce n'est pas un nombre ou que celui-ci sort de l'intervalle autorisé par + la propriété), ce sera la valeur par défaut qui sera utilisée.
Les + blancs en début et en fin de chaîne sont supprimés. + 		+ 0, ou, si 0 n'est pas valide, la valeur + minimale de la propriété. +
length {{experimental_inline}}{{cssxref("<length>")}} +

+ La valeur de l'attribut est analysée comme une longueur + ({{cssxref("<length>")}}) et inclut l'unité (par + exemple 12.5em). Si la valeur n'est pas valide (si ce + n'est pas une longueur ou que celle-ci sort de l'intervalle autorisé + par la propriété), ce sera la valeur par défaut qui sera utilisée.
Si + l'unité fournie est une unité relative, attr() calculera + la valeur absolue correspondante. Les blancs en début et en fin de + chaîne sont supprimés. +

+ 		+ 0, ou, si 0 n'est pas valide, la valeur + minimale de la propriété. +
+ em, ex, px, rem, + vw, vh, vmin, vmax, + mm, cm, in, pt, or + pc {{experimental_inline}} + {{cssxref("<length>")}} + La valeur de l'attribut est analysée comme un nombre + ({{cssxref("<number>")}}) (il n'y a pas d'unité) et + interprétée comme une longueur + ({{cssxref("<length>")}}) grâce à l'unité passée comme + argument. Si la valeur n'est pas valide (ce n'est pas un nombre ou + celui-ci sort de l'intervalle autorisé par la propriété), ce sera la + valeur par défaut qui sera utilisée.
Si l'unité indiquée est une + unité de longueur relative, attr() calculera la valeur + absolue correspondante.
Les blancs en début et en fin de chaîne + sont supprimés. + 		+ 0, ou, si 0 n'est pas valide, la valeur + minimale de la propriété. +
angle {{experimental_inline}}{{cssxref("<angle>")}} + La valeur de l'attribut est analysée comme un angle + ({{cssxref("<angle>")}}) et inclut l'unité (par exemple + 30.5deg). Si la valeur n'est pas valide (si ce n'est pas un + angle ou si la valeur sort de l'intervalle autorisé par la propriété + CSS), ce sera la valeur par défaut qui sera utilisée.
Les blancs en + début et en fin de chaîne sont supprimés. + 		+ 0deg, ou, si 0deg n'est pas valide, la valeur + minimale de la propriété. +
+ deg, grad, + rad {{experimental_inline}} + {{cssxref("<angle>")}} +

+ La valeur de l'attribut est analysée comme un nombre + ({{cssxref("<number>")}}) (il n'y a pas d'unité) et + est interprétée comme un angle ({{cssxref("<angle>")}}) + avec l'unité indiquée en paramètre. Si la vlaeur n'est pas vliade (ce + n'est pas un nombre ou celui-ci sort de l'intervalle autorisé par la + propriété), ce sera la valeur par défaut qui sera utilisée.
Les + blancs en début et en fin de chaîne sont supprimés. +

+ 		+ 0deg, ou, si 0deg n'est pas valide, la valeur + minimale de la propriété. +
time {{experimental_inline}}{{cssxref("<time>")}} + La valeur de l'attribut est analysée comme une durée + ({{cssxref("<time>")}}) et inclut l'unité (par exemple + 30.5ms). Si elle n'est pas valide (la valeur n'est pas une + durée ou n'est pas comprise dans l'intervalle autorisée), ce sera la + valeur par défaut qui sera utilisée.
Les blancs en début et en fin + de chaîne sont supprimés. + 		+ 0s, ou, si 0s n'est pas valide, la valeur + minimale de la propriété. +
s, ms {{experimental_inline}}{{cssxref("<time>")}} + La valeur de l'attribut est analysée comme un nombre + ({{cssxref("<number>")}}) sans unité (par exemple + 12.5) et est interprétée comme une durée + ({{cssxref("<time>")}}) grâce à l'unité passée en + paramètre. Si la valeur n'est pas valide (ce n'est pas un nombre ou + celui-ci n'est pas compris dans l'intervalle autorisé), ce sera la + valeur par défaut qui sera utilisée.
Les blancs en début et en fin + de chaîne sont supprimés. + 		+ 0s, ou, si 0s n'est pas valide, la valeur + minimale de la propriété. +
frequency {{experimental_inline}}{{cssxref("<frequency>")}} + La valeur de l'attribut est analysée comme une fréquence + ({{cssxref("<frequency>")}}) et inclut l'unité (par + exemple 30.5kHz). Si elle n'est pas valide (ce n'est pas + une fréquence ou celle-ci n'est pas comprise dans l'intervalle + autorisé), ce sera la valeur par défaut qui sera utilisée. Les blancs en + début et en fin de chaîne sont supprimés. + + 0Hz, ou, si 0Hz n'est pas valide, la valeur + minimale de la propriété. +
+ Hz, kHz {{experimental_inline}} + {{cssxref("<frequency>")}} + La valeur de l'attribut est analysée comme un nombre + ({{cssxref("<number>")}}) sans unité (par exemple + 12.5) et est interprétée comme une fréquence grâce à + l'unité indiquée. Si la valeur n'est pas valide (ce n'est pas un nombre + ou celui-ci n'est pas compris dans l'intervalle autorisé), ce sera la + valeur par défaut qui sera utilisée.
Les blancs en début et en fin + de chaîne sont supprimés. + 		+ 0Hz, ou, si 0Hz n'est pas valide, la valeur + minimale de la propriété. +
% {{experimental_inline}}{{cssxref("<percentage>")}} + La valeur de l'attribut est analysée comme un nombre + ({{cssxref("<number>")}}) sans unité (par exemple + 12.5) et est interprétée comme un pourcentage + ({{cssxref("<percentage>")}}). Si elle n'est pas valide + (ce n'est pas un nombre ou celui-ci n'est pas compris dans l'intervalle + autorisé par la propriété), ce sera la valeur par défaut qui sera + utilisée.
Si la valeur fournie est utilisée comme une longueur, + attr() calcule la longueur absolue correspondante.
Les + blancs en début et en fin de chaîne sont supprimés. + 		+ 0%, ou, si 0% n'est pas valide, la valeur + minimale de la propriété. +
+ +- `` {{experimental_inline}} + - : La valeur qui sera utilisée si l'attribut est absent ou contient une valeur invalide. La valeur indiquée avec ce paramètre doit être valide et ne doit pas contenir une autre expression `attr()`. Si `attr()` n'est pas le seul composant de la valeur d'une propriété, la valeur `` doit correspondre au type défini par ``. Si ce paramètre n'est pas utilisé, le moteur de rendu utilisera la valeur par défaut définie par ``. + +### Syntaxe formelle + +{{csssyntax}} + +## Exemples + +### Utiliser la propriété `content` + +#### HTML + +```html +

world

+``` + +#### CSS + +```css +[data-toto]::before { + content: attr(data-toto) " "; +} +``` + +#### Résultat + +{{EmbedLiveSample("Utiliser_la_propriété_content", "100%", "50")}} + +### Valeur `` + +{{SeeCompatTable}} + +#### HTML + +```html +
+``` + +#### CSS + +```css +html, +body, +.background { + height: 100vh; +} +``` + +```css +.background { + background-color: red; +} + +.background[data-background] { + background-color: attr(data-background color, red); +} +``` + +#### Résultat + +{{EmbedLiveSample("Valeur_color", "100%", "50")}} + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName("CSS4 Values", "#attr-notation", "attr()")}} | {{Spec2("CSS4 Values")}} | Aucune modification. | +| {{SpecName('CSS3 Values', '#attr-notation', 'attr()')}} | {{Spec2('CSS3 Values')}} | Ajout de deux paramètres optionnels. La fonction peut être utilisée sur toutes les propriétés et renvoyer des valeurs qui ne sont pas des chaînes de caractères. Ces modifications sont expérimentales et pourront être abandonnées pour la recommandation si la prise en charge des navigateurs est trop faible. | +| {{SpecName('CSS2.1', 'generate.html#x18', 'attr()')}} | {{Spec2('CSS2.1')}} | Utilisation limitée à {{cssxref("content")}}, la fonction renvoie toujours une chaîne de caractères ({{cssxref("<string>")}}). | + +## Compatibilité des navigateurs + +{{Compat("css.types.attr")}} + +## Voir aussi + +- [Sélecteur d'attribut](/fr/docs/Web/CSS/Attribute_selectors) +- [Attributs HTML `data-*`](/fr/docs/Web/HTML/Global_attributes/data-*) +- [Attributs SVG `data-*`](/fr/docs/Web/SVG/Attribute/data-*) diff --git a/files/fr/web/css/calc()/index.md b/files/fr/web/css/calc()/index.md deleted file mode 100644 index 514e951b1a..0000000000 --- a/files/fr/web/css/calc()/index.md +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: calc -slug: Web/CSS/calc() -tags: - - CSS - - Fonction - - Reference - - Web -translation_of: Web/CSS/calc() ---- -{{CSSRef}} - -La fonction **`calc()`** peut être utilisée à n'importe quel endroit où une {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<number>")}}, {{cssxref("<percentage>")}} ou {{cssxref("<integer>")}} est nécessaire. Grâce à `calc()`, il est possible de réaliser des calculs pour déterminer la valeur d'une propriété CSS. - -```css -/* property: calc(expression) */ -width: calc(100% - 80px); -``` - -Il est aussi possible d'utiliser `calc()` dans une autre fonction `calc()` et ainsi d'imbriquer les fonctions les unes dans les autres. - -## Syntaxe - -Une fonction qui prend comme seul argument une expression mathématique et dont le résultat est utilisé comme valeur de retour. L'expression peut être n'importe quelle expression combinant les différents opérateurs suivants, en respectant l'ordre de priorité des opérateurs : - -- `+` - - : Addition -- `-` - - : Soustraction -- `*` - - : Multiplication. Au moins un des arguments doit être un {{cssxref("<number>")}}. -- `/` - - : Division. Il n'est pas possible de diviser par une longueur. Ceci peut être utilisé, par exemple, pour que votre longueur soit une fraction d'une longueur existante. L'opérande droit doit être une valeur de type {{cssxref("<number>")}}. - -L'opérande dans l'expression peut utiliser n'importe quelle syntaxe de longueur. Vous pouvez utiliser des unités différentes pour chacune des valeurs si vous le souhaitez. Vous pouvez aussi utiliser les parenthèses pour définir l'ordre des opérations. - -### Notes - -- Une division par zéro aboutit à une erreur qui est générée par le parseur HTML. -- Les opérateurs `+` et `-` **doivent toujours être entouré d'espaces**. Par exemple l'opérande de `calc(50% -8px)` sera interprété comme une valeur en pourcentage suivie d'une longueur négative, l'expression est invalide. L'opérande de `calc(50% - 8px)` est une valeur en pourcentage suivie d'un signe moins et d'une longueur. Et ainsi, `calc(8px + -50%)` est interprété comme une longueur suivi d'un signe plus et d'un pourcentage négatif. -- Les opérateurs `*` et `/` ne nécessitent pas d'espaces, mais les ajouter pour conserver la cohérence est recommandé. -- Les expressions mathématiques manipulant des pourcentages pour les hauteurs et largeurs de colonnes d'un tableau, de groupes de colonne, de lignes d'un tableau ou de groupes de lignes contribuant à un tableau organisé de façon automatique ou en disposition fixe pourront être traitées comme si c'était `auto` qui avait été utilisé. -- Il est possible d'imbriquer des fonctions `calc()`, auquel cas, les appels « internes » sont considérés comme des parenthèses. - -### Syntaxe formelle - -{{csssyntax}} - -## Exemples - -### Positionner un objet sur l’écran avec une marge - -`calc()` rend le positionnement des objets facile en définissant une marge. Dans cet exemple, le CSS crée une bannière qui s'étend sur toute la fenêtre, avec un espace de 40 pixels entre chaque bout de la bannière et les bords de la fenêtre : - -```css -.banniere { - position: absolute; - left: 40px; - width: calc(100% - 80px); - border: solid black 1px; - box-shadow: 1px 2px; - background-color: yellow; - padding: 6px; - text-align: center; - box-sizing: border-box; -} -``` - -```html -
C'est une bannière !
-``` - -{{EmbedLiveSample("Positionner_un_objet_sur_l’écran_avec_une_marge", '100%', '60')}} - -### Dimensionner automatiquement les champs d’un formulaire pour s’ajuster au conteneur - -Un autre cas d'utilisation de `calc()` est d'aider à s'assurer que les champs d'un formulaire s'adaptent à l'espace disponible, sans s'étendre au-delà de la bordure du conteneur, tout en conservant une marge appropriée. - -Regardons un peu le CSS : - -```css -input { - padding: 2px; - display: block; - width: calc(100% - 1em); -} - -#boiteformulaire { - width: calc(100%/6); - border: 1px solid black; - padding: 4px; -} -``` - -Dans ce cas, le formulaire est lui-même défini pour utiliser un sixième de la taille disponible de la fenêtre. Ensuite, pour s'assurer que les champs gardent une taille appropriée, nous utilisons `calc()` pour définir qu'ils doivent être de la largeur de leur conteneur moins 1em. Enfin, le HTML suivant utilise le CSS défini : - -```html -
-
- - -
-
-``` - -{{EmbedLiveSample("Dimensionner_automatiquement_les_champs_d’un_formulaire_pour_s’ajuster_au_conteneur", '100%', '80')}} - -### Imbriquer plusieurs `calc()` grâce aux variables CSS - -Prenons la feuille de style suivante : - -```css -.toto { - --largeurA: 100px; - --largeurB: calc(var(--largeurA) / 2); - --largeurC: calc(var(--largeurB) / 2); - width: var(--largeurC); -} -``` - -Une fois que toutes les variables sont développées, `largeurC` aura la valeur `calc( calc( 100px / 2) / 2)` et sera ensuite affectée à la propriété {{cssxref("width")}} des éléments de la classe `toto`. Tous les `calc()` imbriqués, quel que soit leur nombre, seront convertis en parenthèses, la valeur sera donc calculée comme `calc( ( 100px / 2) / 2)` (soit 25px). En résumé, utiliser des `calc()` imbriqués revient à utiliser des parenthèses. - -## Accessibilité - -Lorsque vous utilisez `calc()` pour définir la taille d'un texte, assurez-vous d'inclure [une unité de longueur relative](/fr/docs/Web/CSS/length#Unités_de_longueur_relatives). Par exemple : - -```css -h1 { - font-size: calc(1.5rem + 3vw); -} -``` - -De cette façon, la taille du texte s'adaptera si le lecteur zoome/dézoome. - -- [Comprendre les règles WCAG 1.4](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) -- [_Understanding Success Criterion 1.4.4 - W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html) - -## Spécifications - -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------ | -------------------------------- | -------------------- | -| {{SpecName('CSS3 Values', '#calc-notation', 'calc()')}} | {{Spec2('CSS3 Values')}} | Définition initiale. | - -## Compatibilité des navigateurs - -{{Compat("css.types.calc")}} - -## Voir aussi - -- [Firefox 4 : CSS3 `calc()` sur Mozilla Hacks](https://hacks.mozilla.org/2010/06/css3-calc/ "Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog") diff --git a/files/fr/web/css/calc/index.md b/files/fr/web/css/calc/index.md new file mode 100644 index 0000000000..261fbe5774 --- /dev/null +++ b/files/fr/web/css/calc/index.md @@ -0,0 +1,151 @@ +--- +title: calc +slug: Web/CSS/calc +tags: + - CSS + - Fonction + - Reference + - Web +translation_of: Web/CSS/calc() +original_slug: Web/CSS/calc() +--- +{{CSSRef}} + +La fonction **`calc()`** peut être utilisée à n'importe quel endroit où une {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<number>")}}, {{cssxref("<percentage>")}} ou {{cssxref("<integer>")}} est nécessaire. Grâce à `calc()`, il est possible de réaliser des calculs pour déterminer la valeur d'une propriété CSS. + +```css +/* property: calc(expression) */ +width: calc(100% - 80px); +``` + +Il est aussi possible d'utiliser `calc()` dans une autre fonction `calc()` et ainsi d'imbriquer les fonctions les unes dans les autres. + +## Syntaxe + +Une fonction qui prend comme seul argument une expression mathématique et dont le résultat est utilisé comme valeur de retour. L'expression peut être n'importe quelle expression combinant les différents opérateurs suivants, en respectant l'ordre de priorité des opérateurs : + +- `+` + - : Addition +- `-` + - : Soustraction +- `*` + - : Multiplication. Au moins un des arguments doit être un {{cssxref("<number>")}}. +- `/` + - : Division. Il n'est pas possible de diviser par une longueur. Ceci peut être utilisé, par exemple, pour que votre longueur soit une fraction d'une longueur existante. L'opérande droit doit être une valeur de type {{cssxref("<number>")}}. + +L'opérande dans l'expression peut utiliser n'importe quelle syntaxe de longueur. Vous pouvez utiliser des unités différentes pour chacune des valeurs si vous le souhaitez. Vous pouvez aussi utiliser les parenthèses pour définir l'ordre des opérations. + +### Notes + +- Une division par zéro aboutit à une erreur qui est générée par le parseur HTML. +- Les opérateurs `+` et `-` **doivent toujours être entouré d'espaces**. Par exemple l'opérande de `calc(50% -8px)` sera interprété comme une valeur en pourcentage suivie d'une longueur négative, l'expression est invalide. L'opérande de `calc(50% - 8px)` est une valeur en pourcentage suivie d'un signe moins et d'une longueur. Et ainsi, `calc(8px + -50%)` est interprété comme une longueur suivi d'un signe plus et d'un pourcentage négatif. +- Les opérateurs `*` et `/` ne nécessitent pas d'espaces, mais les ajouter pour conserver la cohérence est recommandé. +- Les expressions mathématiques manipulant des pourcentages pour les hauteurs et largeurs de colonnes d'un tableau, de groupes de colonne, de lignes d'un tableau ou de groupes de lignes contribuant à un tableau organisé de façon automatique ou en disposition fixe pourront être traitées comme si c'était `auto` qui avait été utilisé. +- Il est possible d'imbriquer des fonctions `calc()`, auquel cas, les appels « internes » sont considérés comme des parenthèses. + +### Syntaxe formelle + +{{csssyntax}} + +## Exemples + +### Positionner un objet sur l’écran avec une marge + +`calc()` rend le positionnement des objets facile en définissant une marge. Dans cet exemple, le CSS crée une bannière qui s'étend sur toute la fenêtre, avec un espace de 40 pixels entre chaque bout de la bannière et les bords de la fenêtre : + +```css +.banniere { + position: absolute; + left: 40px; + width: calc(100% - 80px); + border: solid black 1px; + box-shadow: 1px 2px; + background-color: yellow; + padding: 6px; + text-align: center; + box-sizing: border-box; +} +``` + +```html +
C'est une bannière !
+``` + +{{EmbedLiveSample("Positionner_un_objet_sur_l’écran_avec_une_marge", '100%', '60')}} + +### Dimensionner automatiquement les champs d’un formulaire pour s’ajuster au conteneur + +Un autre cas d'utilisation de `calc()` est d'aider à s'assurer que les champs d'un formulaire s'adaptent à l'espace disponible, sans s'étendre au-delà de la bordure du conteneur, tout en conservant une marge appropriée. + +Regardons un peu le CSS : + +```css +input { + padding: 2px; + display: block; + width: calc(100% - 1em); +} + +#boiteformulaire { + width: calc(100%/6); + border: 1px solid black; + padding: 4px; +} +``` + +Dans ce cas, le formulaire est lui-même défini pour utiliser un sixième de la taille disponible de la fenêtre. Ensuite, pour s'assurer que les champs gardent une taille appropriée, nous utilisons `calc()` pour définir qu'ils doivent être de la largeur de leur conteneur moins 1em. Enfin, le HTML suivant utilise le CSS défini : + +```html +
+
+ + +
+
+``` + +{{EmbedLiveSample("Dimensionner_automatiquement_les_champs_d’un_formulaire_pour_s’ajuster_au_conteneur", '100%', '80')}} + +### Imbriquer plusieurs `calc()` grâce aux variables CSS + +Prenons la feuille de style suivante : + +```css +.toto { + --largeurA: 100px; + --largeurB: calc(var(--largeurA) / 2); + --largeurC: calc(var(--largeurB) / 2); + width: var(--largeurC); +} +``` + +Une fois que toutes les variables sont développées, `largeurC` aura la valeur `calc( calc( 100px / 2) / 2)` et sera ensuite affectée à la propriété {{cssxref("width")}} des éléments de la classe `toto`. Tous les `calc()` imbriqués, quel que soit leur nombre, seront convertis en parenthèses, la valeur sera donc calculée comme `calc( ( 100px / 2) / 2)` (soit 25px). En résumé, utiliser des `calc()` imbriqués revient à utiliser des parenthèses. + +## Accessibilité + +Lorsque vous utilisez `calc()` pour définir la taille d'un texte, assurez-vous d'inclure [une unité de longueur relative](/fr/docs/Web/CSS/length#Unités_de_longueur_relatives). Par exemple : + +```css +h1 { + font-size: calc(1.5rem + 3vw); +} +``` + +De cette façon, la taille du texte s'adaptera si le lecteur zoome/dézoome. + +- [Comprendre les règles WCAG 1.4](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) +- [_Understanding Success Criterion 1.4.4 - W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html) + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------ | -------------------------------- | -------------------- | +| {{SpecName('CSS3 Values', '#calc-notation', 'calc()')}} | {{Spec2('CSS3 Values')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("css.types.calc")}} + +## Voir aussi + +- [Firefox 4 : CSS3 `calc()` sur Mozilla Hacks](https://hacks.mozilla.org/2010/06/css3-calc/ "Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog") diff --git a/files/fr/web/css/clamp()/index.md b/files/fr/web/css/clamp()/index.md deleted file mode 100644 index f692d1920f..0000000000 --- a/files/fr/web/css/clamp()/index.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: clamp() -slug: Web/CSS/clamp() -tags: - - CSS - - Fonction - - Reference -translation_of: Web/CSS/clamp() ---- -{{CSSRef}} - -La fonction CSS **`clamp()`** permet de ramener (d'écrêter) une valeur entre deux bornes inférieure et supérieure. Cette fonction utilise trois paramètres : une valeur minimale, la valeur à tester et une valeur maximale. La fonction `clamp()` peut être utilisée à tout endroit où une valeur de type {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<percentage>")}}, {{cssxref("<number>")}} ou {{cssxref("<integer>")}} peut être utilisée. - -> **Note :** l'expression `clamp(MIN, VAL, MAX)` sera résolue comme `max(MIN, min(VAL, MAX)))`. - -```css -width: clamp(10px, 4em, 80px); -``` - -Dans l'exemple précédent, la largeur fera au plus 80 pixels et au moins 10 pixels mais mesurera 4em de large si un em mesure entre 2.5 et 20px. - -Prenons comme hypothèse qu'un em mesure 16px de large : - -```css -width: clamp(10px, 4em, 80px); -/* avec 1em = 16px, on a 4em = 16px * 4 = 64px */ -width: clamp(10px, 64px, 80px); -/* clamp(MIN, VAL, MAX) est résolue comme max(MIN, min(VAL, MAX))) */ -width: max(10px, min(64px, 80px)) -width: max(10px, 64px); -width: 64px; -``` - -## Syntaxe - -La fonction `clamp()` utilise trois expressions séparées par des virgules comme paramètres. Ces paramètres sont, dans l'ordre, la valeur minimale, la valeur préférée et la valeur maximale. - -La valeur minimale est la borne inférieure des valeurs autorisées. C'est cette valeur qui sera utilisée si la valeur préférée lui est inférieure. - -La valeur préférée correspond à la valeur qui sera utilisée si elle est supérieure à la borne inférieure et inférieure à la borne supérieure. - -La valeur maximale est la borne supérieure des valeurs autorisées. C'est cette valeur qui sera utilisée si la valeur préférée lui est supérieure. - -Les expressions passées en paramètres peuvent utiliser des fonctions mathématiques (voir {{CSSxRef("calc")}} pour plus d'informationsn), des valeurs littérales ou d'autres expressions ( {{CSSxRef("attr", "attr()")}} par exemple) tant que le résultat de cette expression est évalué avec un type valide. Il est aussi possible d'utiliser des expressions mathématiques sans `calc()` et il est également possible d'ajouter des parenthèses pour prioriser correctement les opérations imbriquées. - -Il est possible d'utiliser différentes unités pour chacune des valeurs des expressions. - -### Notes - -- Les expressions mathématiques qui utilisent des pourcentages pour les hauteurs et largeurs de colonnes de tableaux, de groupes de colonnes de tableaux, pour les lignes de tableaux, pour les groupes de lignes de tableaux et pour les cellules de tableau seront considérées comme `auto` si le tableau suit une disposition automatique ou fixée. -- Il est possible d'imbriquer des fonctions `max()` et `min()` dans les expressions et d'utiliser les opérateurs mathématiques d'addition, soustraction, multiplication, division sans nécessairement recourir à `calc()`. -- Attention à bien utiliser un espace de chaque côté des opérateurs + et -. - -### Syntaxe formelle - -{{csssyntax}} - -## Exemples - -### Indiquer une taille de police minimale et maximale - -Un autre cas d'utilisation est de permettre à une taille de police de caractères de varier sans être minuscule et illisible et sans non plus être énorme. - -#### CSS - -```css -h1 { - font-size: 2rem; -} -h1.responsive { - font-size: clamp(32px, 2em, 2rem); -} -``` - -Ici on utilise l'unité `rem` pour fixer un maximum correspondant à deux fois la taille `em` de la racine. - -#### HTML - -```html -

Ce texte est toujours lisible mais sa taille ne change pas.

-

Ce texte est toujours lisible et s'adapte dans une certaine mesure.

-``` - -#### Résultat - -{{EmbedLiveSample("Indiquer_une_taille_de_police_minimale_et_maximale", '700', '300')}} - -## Spécifications - -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('CSS4 Values', '#calc-notation', 'clamp()')}} | {{Spec2('CSS4 Values')}} | | - -## Compatibilité des navigateurs - -{{Compat("css.types.clamp")}} - -## Voir aussi - -- {{CSSxRef("calc")}} -- {{CSSxRef("max")}} -- {{CSSxRef("min")}} -- [Valeurs CSS](/fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units) diff --git a/files/fr/web/css/clamp/index.md b/files/fr/web/css/clamp/index.md new file mode 100644 index 0000000000..010a4a68c8 --- /dev/null +++ b/files/fr/web/css/clamp/index.md @@ -0,0 +1,104 @@ +--- +title: clamp() +slug: Web/CSS/clamp +tags: + - CSS + - Fonction + - Reference +translation_of: Web/CSS/clamp() +original_slug: Web/CSS/clamp() +--- +{{CSSRef}} + +La fonction CSS **`clamp()`** permet de ramener (d'écrêter) une valeur entre deux bornes inférieure et supérieure. Cette fonction utilise trois paramètres : une valeur minimale, la valeur à tester et une valeur maximale. La fonction `clamp()` peut être utilisée à tout endroit où une valeur de type {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<percentage>")}}, {{cssxref("<number>")}} ou {{cssxref("<integer>")}} peut être utilisée. + +> **Note :** l'expression `clamp(MIN, VAL, MAX)` sera résolue comme `max(MIN, min(VAL, MAX)))`. + +```css +width: clamp(10px, 4em, 80px); +``` + +Dans l'exemple précédent, la largeur fera au plus 80 pixels et au moins 10 pixels mais mesurera 4em de large si un em mesure entre 2.5 et 20px. + +Prenons comme hypothèse qu'un em mesure 16px de large : + +```css +width: clamp(10px, 4em, 80px); +/* avec 1em = 16px, on a 4em = 16px * 4 = 64px */ +width: clamp(10px, 64px, 80px); +/* clamp(MIN, VAL, MAX) est résolue comme max(MIN, min(VAL, MAX))) */ +width: max(10px, min(64px, 80px)) +width: max(10px, 64px); +width: 64px; +``` + +## Syntaxe + +La fonction `clamp()` utilise trois expressions séparées par des virgules comme paramètres. Ces paramètres sont, dans l'ordre, la valeur minimale, la valeur préférée et la valeur maximale. + +La valeur minimale est la borne inférieure des valeurs autorisées. C'est cette valeur qui sera utilisée si la valeur préférée lui est inférieure. + +La valeur préférée correspond à la valeur qui sera utilisée si elle est supérieure à la borne inférieure et inférieure à la borne supérieure. + +La valeur maximale est la borne supérieure des valeurs autorisées. C'est cette valeur qui sera utilisée si la valeur préférée lui est supérieure. + +Les expressions passées en paramètres peuvent utiliser des fonctions mathématiques (voir {{CSSxRef("calc")}} pour plus d'informationsn), des valeurs littérales ou d'autres expressions ( {{CSSxRef("attr", "attr()")}} par exemple) tant que le résultat de cette expression est évalué avec un type valide. Il est aussi possible d'utiliser des expressions mathématiques sans `calc()` et il est également possible d'ajouter des parenthèses pour prioriser correctement les opérations imbriquées. + +Il est possible d'utiliser différentes unités pour chacune des valeurs des expressions. + +### Notes + +- Les expressions mathématiques qui utilisent des pourcentages pour les hauteurs et largeurs de colonnes de tableaux, de groupes de colonnes de tableaux, pour les lignes de tableaux, pour les groupes de lignes de tableaux et pour les cellules de tableau seront considérées comme `auto` si le tableau suit une disposition automatique ou fixée. +- Il est possible d'imbriquer des fonctions `max()` et `min()` dans les expressions et d'utiliser les opérateurs mathématiques d'addition, soustraction, multiplication, division sans nécessairement recourir à `calc()`. +- Attention à bien utiliser un espace de chaque côté des opérateurs + et -. + +### Syntaxe formelle + +{{csssyntax}} + +## Exemples + +### Indiquer une taille de police minimale et maximale + +Un autre cas d'utilisation est de permettre à une taille de police de caractères de varier sans être minuscule et illisible et sans non plus être énorme. + +#### CSS + +```css +h1 { + font-size: 2rem; +} +h1.responsive { + font-size: clamp(32px, 2em, 2rem); +} +``` + +Ici on utilise l'unité `rem` pour fixer un maximum correspondant à deux fois la taille `em` de la racine. + +#### HTML + +```html +

Ce texte est toujours lisible mais sa taille ne change pas.

+

Ce texte est toujours lisible et s'adapte dans une certaine mesure.

+``` + +#### Résultat + +{{EmbedLiveSample("Indiquer_une_taille_de_police_minimale_et_maximale", '700', '300')}} + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------- | -------------------------------- | ------------ | +| {{SpecName('CSS4 Values', '#calc-notation', 'clamp()')}} | {{Spec2('CSS4 Values')}} | | + +## Compatibilité des navigateurs + +{{Compat("css.types.clamp")}} + +## Voir aussi + +- {{CSSxRef("calc")}} +- {{CSSxRef("max")}} +- {{CSSxRef("min")}} +- [Valeurs CSS](/fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units) diff --git a/files/fr/web/css/counter()/index.md b/files/fr/web/css/counter()/index.md deleted file mode 100644 index 659de2ece3..0000000000 --- a/files/fr/web/css/counter()/index.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: counter() -slug: Web/CSS/counter() -tags: - - CSS - - Compteur CSS - - Fonction - - Reference -translation_of: Web/CSS/counter() ---- -{{CSSRef}} - -La fonction CSS **`counter()`** renvoie une chaîne de caractères qui représente la valeur courante du compteur nommé (dont le nom est passé en argument). Elle est généralement utilisée pour construire un [pseudo-élément](/fr/docs/Web/CSS/Pseudo-elements) mais elle peut tout à fait être utilisée à n'importe quel endroit où une valeur {{cssxref("<string>")}} est attendue. - - /* Usage simple */ - counter(nomcompteur); - - /* Modifier le type d'affichage du compteur */ - counter(nomcompteur, upper-roman) - -Un [compteur](/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters) CSS n'a aucun effet visible en lui-même. C'est la fonction `counter()` (ainsi que `counters()`) qui permet d'utiliser la chaîne de caractère ou l'image résultante. - -> **Note :** La fonction `counter()` peut être utilisée avec n'importe quelle propriété CSS mais la prise en charge des propriétés autres que {{CSSxRef("content")}} reste expérimentale et la prise en charge du paramètre « type ou unité » est hétérogène. -> -> Veillez à consulter [le tableau de compatibilité des navigateurs](#browser_compatibility) avant d'utiliser ces fonctionnalités en production. - -## Syntaxe - -### Valeurs - -- {{cssxref("<custom-ident>")}} - - : Un nom identifiant le compteur (sensible à la casse). C'est le même nom qui pourra être utilisé avec {{cssxref("counter-reset")}} et {{cssxref("counter-increment")}}. Le nom ne peut pas commencer avec deux tirets et ne peut pas être l'un des mots-clés `none`, `unset`, `initial` ou `inherit`. -- `` - - : Un nom de style de compteur ou une fonction [`symbols()`](). Le nom d'un style de compteur peut indiquer un compteur [alphabétique, numérique, symbolique ou encore utilisant un système de numération asiatique ou éthiopien](/fr/docs/Web/CSS/list-style-type#valeurs) ou un autre [style de compteur prédéfini](/fr/docs/Web/CSS/CSS_Counter_Styles). Si cette valeur n'est pas fournie, le style par défaut est décimal. -- `none` - - : Représente la chaîne de caractère vide. - -### Syntaxe formelle - -{{CSSSyntax}} - -## Exemples - -### Comparaison entre compteur par défaut et chiffres romains majuscules - -#### HTML - -```html -
    -
  1. -
  2. -
  3. -
-``` - -#### CSS - -```css -ol { - counter-reset: listCounter; -} -li { - counter-increment: listCounter; -} -li::after { - content: "[" counter(listCounter) "] == [" - counter(listCounter, upper-roman) "]"; -} -``` - -#### Résultat - -{{EmbedLiveSample("Comparaison_entre_compteur_par_défaut_et_chiffres_romains_majuscules", "100%", 150)}} - -### Comparaison entre compteur décimal avec zéro et compteur alphabétique minuscule - -#### HTML - -```html -
    -
  1. -
  2. -
  3. -
-``` - -#### CSS - -```css -ol { - counter-reset: count; -} - -li { - counter-increment: count; -} - -li::after { - content: "[" counter(count, decimal-leading-zero) "] == [" - counter(count, lower-alpha) "]"; -} -``` - -#### Résultat - -{{EmbedLiveSample("Comparaison_entre_compteur_décimal_avec_zéro_et_compteur_alphabétique_minuscule", "100%", 150)}} - -## Spécifications - -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | -| {{SpecName("CSS3 Lists", "#counter-functions", "CSS Counters")}} | {{Spec2("CSS3 Lists")}} | Aucune modification. | -| {{SpecName("CSS2.1", "generate.html#counters", "CSS Counters")}} | {{Spec2("CSS2.1")}} | Définition initiale. | - -## Compatibilité des navigateurs - -{{Compat("css.types.counter")}} - -## Voir aussi - -- [Utiliser les compteurs CSS](/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters) -- {{cssxref("counter-reset")}} -- {{cssxref("counter-increment")}} -- {{cssxref("@counter-style")}} -- La fonction CSS [`counters()`]() diff --git a/files/fr/web/css/counter/index.md b/files/fr/web/css/counter/index.md new file mode 100644 index 0000000000..3fb1f2eb3f --- /dev/null +++ b/files/fr/web/css/counter/index.md @@ -0,0 +1,126 @@ +--- +title: counter() +slug: Web/CSS/counter +tags: + - CSS + - Compteur CSS + - Fonction + - Reference +translation_of: Web/CSS/counter() +original_slug: Web/CSS/counter() +--- +{{CSSRef}} + +La fonction CSS **`counter()`** renvoie une chaîne de caractères qui représente la valeur courante du compteur nommé (dont le nom est passé en argument). Elle est généralement utilisée pour construire un [pseudo-élément](/fr/docs/Web/CSS/Pseudo-elements) mais elle peut tout à fait être utilisée à n'importe quel endroit où une valeur {{cssxref("<string>")}} est attendue. + + /* Usage simple */ + counter(nomcompteur); + + /* Modifier le type d'affichage du compteur */ + counter(nomcompteur, upper-roman) + +Un [compteur](/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters) CSS n'a aucun effet visible en lui-même. C'est la fonction `counter()` (ainsi que `counters()`) qui permet d'utiliser la chaîne de caractère ou l'image résultante. + +> **Note :** La fonction `counter()` peut être utilisée avec n'importe quelle propriété CSS mais la prise en charge des propriétés autres que {{CSSxRef("content")}} reste expérimentale et la prise en charge du paramètre « type ou unité » est hétérogène. +> +> Veillez à consulter [le tableau de compatibilité des navigateurs](#browser_compatibility) avant d'utiliser ces fonctionnalités en production. + +## Syntaxe + +### Valeurs + +- {{cssxref("<custom-ident>")}} + - : Un nom identifiant le compteur (sensible à la casse). C'est le même nom qui pourra être utilisé avec {{cssxref("counter-reset")}} et {{cssxref("counter-increment")}}. Le nom ne peut pas commencer avec deux tirets et ne peut pas être l'un des mots-clés `none`, `unset`, `initial` ou `inherit`. +- `` + - : Un nom de style de compteur ou une fonction [`symbols()`](). Le nom d'un style de compteur peut indiquer un compteur [alphabétique, numérique, symbolique ou encore utilisant un système de numération asiatique ou éthiopien](/fr/docs/Web/CSS/list-style-type#valeurs) ou un autre [style de compteur prédéfini](/fr/docs/Web/CSS/CSS_Counter_Styles). Si cette valeur n'est pas fournie, le style par défaut est décimal. +- `none` + - : Représente la chaîne de caractère vide. + +### Syntaxe formelle + +{{CSSSyntax}} + +## Exemples + +### Comparaison entre compteur par défaut et chiffres romains majuscules + +#### HTML + +```html +
    +
  1. +
  2. +
  3. +
+``` + +#### CSS + +```css +ol { + counter-reset: listCounter; +} +li { + counter-increment: listCounter; +} +li::after { + content: "[" counter(listCounter) "] == [" + counter(listCounter, upper-roman) "]"; +} +``` + +#### Résultat + +{{EmbedLiveSample("Comparaison_entre_compteur_par_défaut_et_chiffres_romains_majuscules", "100%", 150)}} + +### Comparaison entre compteur décimal avec zéro et compteur alphabétique minuscule + +#### HTML + +```html +
    +
  1. +
  2. +
  3. +
+``` + +#### CSS + +```css +ol { + counter-reset: count; +} + +li { + counter-increment: count; +} + +li::after { + content: "[" counter(count, decimal-leading-zero) "] == [" + counter(count, lower-alpha) "]"; +} +``` + +#### Résultat + +{{EmbedLiveSample("Comparaison_entre_compteur_décimal_avec_zéro_et_compteur_alphabétique_minuscule", "100%", 150)}} + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | +| {{SpecName("CSS3 Lists", "#counter-functions", "CSS Counters")}} | {{Spec2("CSS3 Lists")}} | Aucune modification. | +| {{SpecName("CSS2.1", "generate.html#counters", "CSS Counters")}} | {{Spec2("CSS2.1")}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("css.types.counter")}} + +## Voir aussi + +- [Utiliser les compteurs CSS](/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters) +- {{cssxref("counter-reset")}} +- {{cssxref("counter-increment")}} +- {{cssxref("@counter-style")}} +- La fonction CSS [`counters()`]() diff --git a/files/fr/web/css/counters()/index.md b/files/fr/web/css/counters()/index.md deleted file mode 100644 index b663dfb9ed..0000000000 --- a/files/fr/web/css/counters()/index.md +++ /dev/null @@ -1,170 +0,0 @@ ---- -title: counters() -slug: Web/CSS/counters() -tags: - - CSS - - Fonction - - Reference -translation_of: Web/CSS/counters() ---- -{{CSSRef}} - -La fonction CSS **`counters()`** permet d'obtenir des compteurs imbriqués en renvoyant la concaténation des chaînes de caractères des valeurs des compteurs passés en arguments. La fonction `counters()` peut s'utiliser sous deux formes : - -- `counters(name, string)` -- `counters(name, string, style)` - -Cette fonction est généralement utilisée sur des [pseudo-éléments](/fr/docs/Web/CSS/Pseudo-elements) mais peut théoriquement être utilisée à tout endroit où une valeur [``](/fr/docs/Web/CSS/string) est attendue. Le texte généré est la concaténation des compteurs en commençant par les compteurs « parents » puis en ajoutant la valeurs des compteurs « fils ». Les compteurs sont affichés avec le style indiqué (par défaut, ce sera `decimal`). - - /* Utilisation simple - style decimal par défaut */ - counters(countername, '-'); - - /* Changement du style d'affichage */ - counters(countername, '.', upper-roman) - -Un compteur n'est pas visible en tant que tel. Les fonctions `counters()` et [`counter()`](/fr/docs/Web/CSS/counter_function) doivent être utilisées pour créer du contenu. - -> **Note :** Bien que la fonction `counters()` puisse être utilisée avec n'importe quelle propriété CSS, la prise en charge des propriétés autres que {{CSSxRef("content")}} reste experimentale. -> -> Avant d'utiliser cette fonctionnalité en production, référez vous au tableau de compatibilité ci-après. - -## Syntaxe - -### Valeurs - -- {{cssxref("<custom-ident>")}} - - : Un nom identifiant les compteurs à utiliser. C'est le même nom qui pourra être utilisé avec les propriétés {{cssxref("counter-reset")}} et {{cssxref("counter-increment")}}. Le nom ne peut pas commencer par deux tirets et ne peut pas être `none`, `unset`, `initial` ou `inherit`. -- `` - - : Un style de compteur (cf. [les valeurs décrites pour `list-style-type`](/fr/docs/Web/CSS/list-style-type#valeurs)) ou une fonction [`symbols()`](). En absence de valeur, le style utilisé sera `decimal`. -- {{cssxref("<string>")}} - - : Une suite de caractères. Les caractères qui ne sont pas latins doivent être encodés avec leur séquence d'échappement Unicode. `\000A9` représentera par exemple le symbole copyright (©). -- `none` - - : Représente la chaîne vide. - -### Syntaxe formelle - -{{CSSSyntax}} - -## Exemples - -### Style par défaut et chiffres romains - -#### HTML - -```html -
    -
  1. -
      -
    1. -
    2. -
    3. -
    -
    2. -
  2. -
  3. -
  4. -
      -
    1. -
    2. -
        -
      1. -
      2. -
      3. -
      -
      3. -
    -
    5. -
-``` - -#### CSS - -```css -ol { - counter-reset: listCounter; -} -li { - counter-increment: listCounter; -} -li::marker { - content: counters(listCounter, '.', upper-roman) ') '; -} -li::before { - content: counters(listCounter, ".") " == " counters(listCounter, ".", lower-roman) ; -} -``` - -#### Résultat - -{{EmbedLiveSample("Style_par_défaut_et_chiffres_romains", "100%", 150)}} - -### _Numérotation décimale (avec zéro) et indices alphabétiques_ - -#### HTML - -```html -
    -
  1. -
      -
    1. -
    2. -
    3. -
    -
    2. -
  2. -
  3. -
  4. -
      -
    1. -
    2. -
        -
      1. -
      2. -
      3. -
      -
      3. -
    -
    5. -
-``` - -#### CSS - -```css -ol { - counter-reset: count; -} -li { - counter-increment: count; -} -li::marker { - content: counters(count, '.', upper-alpha) ') '; -} -li::before { - content: counters(count, ".", decimal-leading-zero) " == " counters(count, ".", lower-alpha); -} -``` - -#### Résultat - -{{EmbedLiveSample("Numérotation_décimale_(avec_zéro)_et_indices_alphabétiques", "100%", 150)}} - -## Spécifications - -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | -| {{SpecName("CSS3 Lists", "#counter-functions", "CSS Counters")}} | {{Spec2("CSS3 Lists")}} | Aucune modification. | -| {{SpecName("CSS2.1", "generate.html#counter-styles", "CSS Counters")}} | {{Spec2("CSS2.1")}} | Définition initiale. | - -## Compatibilité des navigateurs - -{{Compat("css.types.counters")}} - -## Voir aussi - -- [Utiliser les compteurs CSS](/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters) -- {{cssxref("counter-reset")}} -- {{cssxref("counter-increment")}} -- {{cssxref("@counter-style")}} -- La fonction CSS [`counter()`](/fr/docs/Web/CSS/counter_function) -- {{cssxref("::marker")}} diff --git a/files/fr/web/css/counters/index.md b/files/fr/web/css/counters/index.md new file mode 100644 index 0000000000..d398b8d09c --- /dev/null +++ b/files/fr/web/css/counters/index.md @@ -0,0 +1,171 @@ +--- +title: counters() +slug: Web/CSS/counters +tags: + - CSS + - Fonction + - Reference +translation_of: Web/CSS/counters() +original_slug: Web/CSS/counters() +--- +{{CSSRef}} + +La fonction CSS **`counters()`** permet d'obtenir des compteurs imbriqués en renvoyant la concaténation des chaînes de caractères des valeurs des compteurs passés en arguments. La fonction `counters()` peut s'utiliser sous deux formes : + +- `counters(name, string)` +- `counters(name, string, style)` + +Cette fonction est généralement utilisée sur des [pseudo-éléments](/fr/docs/Web/CSS/Pseudo-elements) mais peut théoriquement être utilisée à tout endroit où une valeur [``](/fr/docs/Web/CSS/string) est attendue. Le texte généré est la concaténation des compteurs en commençant par les compteurs « parents » puis en ajoutant la valeurs des compteurs « fils ». Les compteurs sont affichés avec le style indiqué (par défaut, ce sera `decimal`). + + /* Utilisation simple - style decimal par défaut */ + counters(countername, '-'); + + /* Changement du style d'affichage */ + counters(countername, '.', upper-roman) + +Un compteur n'est pas visible en tant que tel. Les fonctions `counters()` et [`counter()`](/fr/docs/Web/CSS/counter_function) doivent être utilisées pour créer du contenu. + +> **Note :** Bien que la fonction `counters()` puisse être utilisée avec n'importe quelle propriété CSS, la prise en charge des propriétés autres que {{CSSxRef("content")}} reste experimentale. +> +> Avant d'utiliser cette fonctionnalité en production, référez vous au tableau de compatibilité ci-après. + +## Syntaxe + +### Valeurs + +- {{cssxref("<custom-ident>")}} + - : Un nom identifiant les compteurs à utiliser. C'est le même nom qui pourra être utilisé avec les propriétés {{cssxref("counter-reset")}} et {{cssxref("counter-increment")}}. Le nom ne peut pas commencer par deux tirets et ne peut pas être `none`, `unset`, `initial` ou `inherit`. +- `` + - : Un style de compteur (cf. [les valeurs décrites pour `list-style-type`](/fr/docs/Web/CSS/list-style-type#valeurs)) ou une fonction [`symbols()`](). En absence de valeur, le style utilisé sera `decimal`. +- {{cssxref("<string>")}} + - : Une suite de caractères. Les caractères qui ne sont pas latins doivent être encodés avec leur séquence d'échappement Unicode. `\000A9` représentera par exemple le symbole copyright (©). +- `none` + - : Représente la chaîne vide. + +### Syntaxe formelle + +{{CSSSyntax}} + +## Exemples + +### Style par défaut et chiffres romains + +#### HTML + +```html +
    +
  1. +
      +
    1. +
    2. +
    3. +
    +
    2. +
  2. +
  3. +
  4. +
      +
    1. +
    2. +
        +
      1. +
      2. +
      3. +
      +
      3. +
    +
    5. +
+``` + +#### CSS + +```css +ol { + counter-reset: listCounter; +} +li { + counter-increment: listCounter; +} +li::marker { + content: counters(listCounter, '.', upper-roman) ') '; +} +li::before { + content: counters(listCounter, ".") " == " counters(listCounter, ".", lower-roman) ; +} +``` + +#### Résultat + +{{EmbedLiveSample("Style_par_défaut_et_chiffres_romains", "100%", 150)}} + +### _Numérotation décimale (avec zéro) et indices alphabétiques_ + +#### HTML + +```html +
    +
  1. +
      +
    1. +
    2. +
    3. +
    +
    2. +
  2. +
  3. +
  4. +
      +
    1. +
    2. +
        +
      1. +
      2. +
      3. +
      +
      3. +
    +
    5. +
+``` + +#### CSS + +```css +ol { + counter-reset: count; +} +li { + counter-increment: count; +} +li::marker { + content: counters(count, '.', upper-alpha) ') '; +} +li::before { + content: counters(count, ".", decimal-leading-zero) " == " counters(count, ".", lower-alpha); +} +``` + +#### Résultat + +{{EmbedLiveSample("Numérotation_décimale_(avec_zéro)_et_indices_alphabétiques", "100%", 150)}} + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | +| {{SpecName("CSS3 Lists", "#counter-functions", "CSS Counters")}} | {{Spec2("CSS3 Lists")}} | Aucune modification. | +| {{SpecName("CSS2.1", "generate.html#counter-styles", "CSS Counters")}} | {{Spec2("CSS2.1")}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("css.types.counters")}} + +## Voir aussi + +- [Utiliser les compteurs CSS](/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters) +- {{cssxref("counter-reset")}} +- {{cssxref("counter-increment")}} +- {{cssxref("@counter-style")}} +- La fonction CSS [`counter()`](/fr/docs/Web/CSS/counter_function) +- {{cssxref("::marker")}} diff --git a/files/fr/web/css/cross-fade()/index.md b/files/fr/web/css/cross-fade()/index.md deleted file mode 100644 index d31f0287bb..0000000000 --- a/files/fr/web/css/cross-fade()/index.md +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: cross-fade() -slug: Web/CSS/cross-fade() -translation_of: Web/CSS/cross-fade() -browser-compat: css.types.image.cross-fade ---- -{{CSSRef}} - -La fonction [CSS](/fr/docs/Web/CSS) **`cross-fade()`** peut être utilisée afin de fusionner deux ou plusieurs images avec une transparence donnée. -On peut l'utiliser pour de nombreuses manipulations d'image : teinter une image avec une couleur donnée ou mettre en avant une zone de l'image en combinant celle-ci avec un dégradé radial. - -## Syntaxe - -> **Attention :** À l'heure actuelle (janvier 2019), la syntaxe décrite par la spécification et les syntaxes implémentées sont différentes. Nous commencerons ici par définir la syntaxe telle que définie par la spécification puis celle utilisée au sein des implémentations actuelles. - -### Syntaxe de la spécification - -La fonction `cross-fade()` prend comme argument une liste d'images accompagnée d'un pourcentage qui définit la proportion, en termes d'opacité, de chaque image dans le « mélange » obtenu. La valeur en pourcentage ne doit pas être entourée de guillemets, doit contenir le symbole `%` et être comprise entre 0% et 100%. - -Cette fonction pourra être utilisée à tout endroit où une image CSS peut être utilisée. - -#### Utilisation des pourcentages - -Le pourcentage utilisé pour chaque image peut être considéré comme une valeur d'opacité. Un coefficient à 0% indiquera que l'image sera complètement transparente pour le mélange final tandis qu'un coefficient à 100% rendra l'image complètement opaque. - -```css -cross-fade(url(white.png) 0%, url(black.png) 100%); /* complètement noire */ -cross-fade(url(white.png) 25%, url(black.png) 75%); /* 25% blanche, 75% noire*/ -cross-fade(url(white.png) 50%, url(black.png) 50%); /* 50% blanche, 50% noire */ -cross-fade(url(white.png) 75%, url(black.png) 25%); /* 75% blanche, 25% noire */ -cross-fade(url(white.png) 100%, url(black.png) 0%); /* complètement blanche */ -cross-fade(url(green.png) 75%, url(red.png) 75%); /* image avec du rouge et vert à 75% */ -``` - -Si un des pourcentages est absent, l'ensemble des pourcentages exprimés est sommé et la différence avec 100% est répartie également entre toutes les images qui n'ont pas de coefficient. - -Dans le cas le plus simple, seules deux images sont fusionnées. Dans ce cas, seul un coefficient est nécessaire (la seconde image recevra dans tous les cas le complément à 100% du premier coefficient). Ainsi, si on utilise 0% pour la première image, le mélange résultant correspondra à la deuxième image. Inversement, un coefficient de 100% pour la première image masquera complètement la seconde. Utiliser 50% permettra d'obtenir un mélange à proportions égales. Un coefficient de 75% montrera la première image à 75% et la seconde à 25%. - -Les lignes précédentes peuvent ainsi s'écrire également : - -```css -cross-fade(url(white.png) 0%, url(black.png)); /* complètement noire */ -cross-fade(url(white.png) 25%, url(black.png)); /* 25% blanche, 75% noire*/ -cross-fade(url(white.png), url(black.png)); /* 50% blanche, 50% noire */ -cross-fade(url(white.png) 75%, url(black.png)); /* 75% blanche, 25% noire */ -cross-fade(url(white.png) 100%, url(black.png)); /* complètement blanche */ -cross-fade(url(green.png) 75%, url(red.png) 75%); /* image avec du rouge et vert à 75% */ -``` - -Si aucun pourcentage n'est indiqué, toutes les images contribuent également (si on a deux images, chacune contribuera à 50%). Les lignes qui suivent sont (quasiment) identiques : - -```css -cross-fade( url(red.png), url(yellow.png), url(blue.png)); /* chacune aura 33.3333% d'opacité */ -cross-fade( url(red.png) 33.33%, url(yellow.png) 33.33%, url(blue.png) 33.33%); -``` - -### Syntaxe des implémentations (plus ancienne) - -```css -cross-fade( , , ) -``` - -La spécification de la fonction `cross-fade()` permet d'avoir plusieurs images et d'associer un coefficient de transparence à chacune des images. Ce n'a pas toujours été le cas et la syntaxe originale, implémentée par certains navigateurs, ne permet d'avoir que deux images pour lesquelles la somme des coefficients doit être 100%. Cette syntaxe est prise en charge par Safari et préfixée avec `-webkit-` pour Chrome, Opera et les autres navigateurs basés sur Blink. - -```css -cross-fade(url(white.png), url(black.png), 0%); /* complètement noire */ -cross-fade(url(white.png), url(black.png), 25%); /* 25% blanche, 75% noire */ -cross-fade(url(white.png), url(black.png), 50%); /* 50% blanche, 50% noire */ -cross-fade(url(white.png), url(black.png), 75%); /* 75% blanche, 25% noire */ -cross-fade(url(white.png), url(black.png), 100%); /* complètement blanche */ -``` - -Pour cette syntaxe, les deux images sont déclarées en premières et séparées par une virgule puis arrive le coefficient. Si la virgule ou si le caractère pourcent est absent, la propriété est considérée invalide. Le coefficient utilisé dans la syntaxe est attribué à la première image. La deuxième image utilisera donc un coefficient implicite qui est le complément à 100 du premier complément. - -Dans les exemples associés à la syntaxe de la spécification, on avait un cas où la somme des coefficients valait 150% : ce cas ne serait pas possible avec la syntaxe implémentée actuellement. De même, on ne peut pas mélanger trois images (ou plus) avec cette syntaxe. - -## Accessibilité - -Les outils d'assistance ne peuvent pas analyser les images d'arrière-plan. Si l'image contient des informations essentielles à la compréhension du document, mieux vaudra la décrire de façon sémantique dans le document afin que ce dernier soit correctement accessible. Lorsqu'on utilisera des images d'arrière-plan, on s'assurera que le contraste est suffisamment élevé par rapport au texte qui serait affiché par-dessus. - -- [Comprendre les règles WCAG 1.1](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content) -- [Comprendre les critères de succès 1.1.1 | Comprendre WCAG 2.0 (en anglais)](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) - -## Syntaxe formelle - -{{csssyntax}} - -## Exemples - -### Ancienne syntaxe pour cross-fade - -#### HTML - -```html -
-``` - -#### CSS - -```css -.crossfade { - width: 300px; - height: 300px; - background-image: -webkit-cross-fade( - url('br.png'), - url('tr.png'), - 75%); - background-image: cross-fade( - url('br.png'), - url('tr.png'), - 75%); -} -``` - -#### Résultat - -{{EmbedLiveSample("", "330", "330")}} - -## Spécifications - -{{Specifications}} - -## Compatibilité des navigateurs - -{{Compat}} - -## Voir aussi - -- [``](/fr/docs/Web/CSS/image) -- [`url()`](/fr/docs/Web/CSS/url()) -- [`image()`](/fr/docs/Web/CSS/image/image()) -- [`image-set()`](/fr/docs/Web/CSS/image/image-set()) -- [`element()`](/fr/docs/Web/CSS/element()) -- [Utiliser les dégradés CSS](/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients) -- Fonctions de création de dégradés : - - [`linear-gradient()`](/fr/docs/Web/CSS/gradient/linear-gradient) - - [`radial-gradient()`](/fr/docs/Web/CSS/gradient/radial-gradient) - - [`repeating-linear-gradient()`](/fr/docs/Web/CSS/gradient/repeating-linear-gradient) - - [`repeating-radial-gradient()`](/fr/docs/Web/CSS/gradient/repeating-radial-gradient) - - [`conic-gradient()`](/fr/docs/Web/CSS/gradient/conic-gradient) diff --git a/files/fr/web/css/cross-fade/index.md b/files/fr/web/css/cross-fade/index.md new file mode 100644 index 0000000000..b7f9eea9b8 --- /dev/null +++ b/files/fr/web/css/cross-fade/index.md @@ -0,0 +1,141 @@ +--- +title: cross-fade() +slug: Web/CSS/cross-fade +translation_of: Web/CSS/cross-fade() +original_slug: Web/CSS/cross-fade() +browser-compat: css.types.image.cross-fade +--- +{{CSSRef}} + +La fonction [CSS](/fr/docs/Web/CSS) **`cross-fade()`** peut être utilisée afin de fusionner deux ou plusieurs images avec une transparence donnée. +On peut l'utiliser pour de nombreuses manipulations d'image : teinter une image avec une couleur donnée ou mettre en avant une zone de l'image en combinant celle-ci avec un dégradé radial. + +## Syntaxe + +> **Attention :** À l'heure actuelle (janvier 2019), la syntaxe décrite par la spécification et les syntaxes implémentées sont différentes. Nous commencerons ici par définir la syntaxe telle que définie par la spécification puis celle utilisée au sein des implémentations actuelles. + +### Syntaxe de la spécification + +La fonction `cross-fade()` prend comme argument une liste d'images accompagnée d'un pourcentage qui définit la proportion, en termes d'opacité, de chaque image dans le « mélange » obtenu. La valeur en pourcentage ne doit pas être entourée de guillemets, doit contenir le symbole `%` et être comprise entre 0% et 100%. + +Cette fonction pourra être utilisée à tout endroit où une image CSS peut être utilisée. + +#### Utilisation des pourcentages + +Le pourcentage utilisé pour chaque image peut être considéré comme une valeur d'opacité. Un coefficient à 0% indiquera que l'image sera complètement transparente pour le mélange final tandis qu'un coefficient à 100% rendra l'image complètement opaque. + +```css +cross-fade(url(white.png) 0%, url(black.png) 100%); /* complètement noire */ +cross-fade(url(white.png) 25%, url(black.png) 75%); /* 25% blanche, 75% noire*/ +cross-fade(url(white.png) 50%, url(black.png) 50%); /* 50% blanche, 50% noire */ +cross-fade(url(white.png) 75%, url(black.png) 25%); /* 75% blanche, 25% noire */ +cross-fade(url(white.png) 100%, url(black.png) 0%); /* complètement blanche */ +cross-fade(url(green.png) 75%, url(red.png) 75%); /* image avec du rouge et vert à 75% */ +``` + +Si un des pourcentages est absent, l'ensemble des pourcentages exprimés est sommé et la différence avec 100% est répartie également entre toutes les images qui n'ont pas de coefficient. + +Dans le cas le plus simple, seules deux images sont fusionnées. Dans ce cas, seul un coefficient est nécessaire (la seconde image recevra dans tous les cas le complément à 100% du premier coefficient). Ainsi, si on utilise 0% pour la première image, le mélange résultant correspondra à la deuxième image. Inversement, un coefficient de 100% pour la première image masquera complètement la seconde. Utiliser 50% permettra d'obtenir un mélange à proportions égales. Un coefficient de 75% montrera la première image à 75% et la seconde à 25%. + +Les lignes précédentes peuvent ainsi s'écrire également : + +```css +cross-fade(url(white.png) 0%, url(black.png)); /* complètement noire */ +cross-fade(url(white.png) 25%, url(black.png)); /* 25% blanche, 75% noire*/ +cross-fade(url(white.png), url(black.png)); /* 50% blanche, 50% noire */ +cross-fade(url(white.png) 75%, url(black.png)); /* 75% blanche, 25% noire */ +cross-fade(url(white.png) 100%, url(black.png)); /* complètement blanche */ +cross-fade(url(green.png) 75%, url(red.png) 75%); /* image avec du rouge et vert à 75% */ +``` + +Si aucun pourcentage n'est indiqué, toutes les images contribuent également (si on a deux images, chacune contribuera à 50%). Les lignes qui suivent sont (quasiment) identiques : + +```css +cross-fade( url(red.png), url(yellow.png), url(blue.png)); /* chacune aura 33.3333% d'opacité */ +cross-fade( url(red.png) 33.33%, url(yellow.png) 33.33%, url(blue.png) 33.33%); +``` + +### Syntaxe des implémentations (plus ancienne) + +```css +cross-fade( , , ) +``` + +La spécification de la fonction `cross-fade()` permet d'avoir plusieurs images et d'associer un coefficient de transparence à chacune des images. Ce n'a pas toujours été le cas et la syntaxe originale, implémentée par certains navigateurs, ne permet d'avoir que deux images pour lesquelles la somme des coefficients doit être 100%. Cette syntaxe est prise en charge par Safari et préfixée avec `-webkit-` pour Chrome, Opera et les autres navigateurs basés sur Blink. + +```css +cross-fade(url(white.png), url(black.png), 0%); /* complètement noire */ +cross-fade(url(white.png), url(black.png), 25%); /* 25% blanche, 75% noire */ +cross-fade(url(white.png), url(black.png), 50%); /* 50% blanche, 50% noire */ +cross-fade(url(white.png), url(black.png), 75%); /* 75% blanche, 25% noire */ +cross-fade(url(white.png), url(black.png), 100%); /* complètement blanche */ +``` + +Pour cette syntaxe, les deux images sont déclarées en premières et séparées par une virgule puis arrive le coefficient. Si la virgule ou si le caractère pourcent est absent, la propriété est considérée invalide. Le coefficient utilisé dans la syntaxe est attribué à la première image. La deuxième image utilisera donc un coefficient implicite qui est le complément à 100 du premier complément. + +Dans les exemples associés à la syntaxe de la spécification, on avait un cas où la somme des coefficients valait 150% : ce cas ne serait pas possible avec la syntaxe implémentée actuellement. De même, on ne peut pas mélanger trois images (ou plus) avec cette syntaxe. + +## Accessibilité + +Les outils d'assistance ne peuvent pas analyser les images d'arrière-plan. Si l'image contient des informations essentielles à la compréhension du document, mieux vaudra la décrire de façon sémantique dans le document afin que ce dernier soit correctement accessible. Lorsqu'on utilisera des images d'arrière-plan, on s'assurera que le contraste est suffisamment élevé par rapport au texte qui serait affiché par-dessus. + +- [Comprendre les règles WCAG 1.1](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content) +- [Comprendre les critères de succès 1.1.1 | Comprendre WCAG 2.0 (en anglais)](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) + +## Syntaxe formelle + +{{csssyntax}} + +## Exemples + +### Ancienne syntaxe pour cross-fade + +#### HTML + +```html +
+``` + +#### CSS + +```css +.crossfade { + width: 300px; + height: 300px; + background-image: -webkit-cross-fade( + url('br.png'), + url('tr.png'), + 75%); + background-image: cross-fade( + url('br.png'), + url('tr.png'), + 75%); +} +``` + +#### Résultat + +{{EmbedLiveSample("", "330", "330")}} + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [``](/fr/docs/Web/CSS/image) +- [`url()`](/fr/docs/Web/CSS/url()) +- [`image()`](/fr/docs/Web/CSS/image/image()) +- [`image-set()`](/fr/docs/Web/CSS/image/image-set()) +- [`element()`](/fr/docs/Web/CSS/element()) +- [Utiliser les dégradés CSS](/fr/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- Fonctions de création de dégradés : + - [`linear-gradient()`](/fr/docs/Web/CSS/gradient/linear-gradient) + - [`radial-gradient()`](/fr/docs/Web/CSS/gradient/radial-gradient) + - [`repeating-linear-gradient()`](/fr/docs/Web/CSS/gradient/repeating-linear-gradient) + - [`repeating-radial-gradient()`](/fr/docs/Web/CSS/gradient/repeating-radial-gradient) + - [`conic-gradient()`](/fr/docs/Web/CSS/gradient/conic-gradient) diff --git a/files/fr/web/css/element()/index.md b/files/fr/web/css/element()/index.md deleted file mode 100644 index 0c7ad0851e..0000000000 --- a/files/fr/web/css/element()/index.md +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: element -slug: Web/CSS/element() -tags: - - CSS - - Fonction - - Reference -translation_of: Web/CSS/element() ---- -{{CSSRef}}{{SeeCompatTable}} - -La fonction **`element()`** définit une valeur {{cssxref("<image>")}} générée à partir d'un élément HTML arbitraire. L'image est calculée dynamiquement : si l'élément HTML change, les propriétés CSS utilisant la valeur seront automatiquement mis à jour. - -Un scénario pour lequel cette fonction est particulièrement utile : on génère une image dans un élément HTML {{HTMLElement("canvas")}} et on l'utilise comme arrière-plan. - -Pour les navigateurs basés sur Gecko, on peut utiliser la méthode {{domxref("document.mozSetImageElement()")}} pour modifier l'élément utilisé comme arrière-plan pour un `background` CSS donné. - -## Syntaxe - - element(id) - -### Paramètres - -- **`id`** - - : L'identifiant (correspondant à l'attribut {{htmlattrxref("id")}}) de l'élément HTML visé. - -## Exemples - -### Un premier exemple réaliste - -#### CSS - -```css -.exemple { - width: 400px; - height: 400px; - background: -moz-element(#monArrierePlan) no-repeat; - -} - -.paragraphe { - transform-origin: 0 0; - transform: rotate(45deg); - color: white; -} - -#monArrierePlan{ - width: 1024px; - height: 1024px; - background-image: linear-gradient(to right, red, orange, yellow, white); -} -.cache { - overflow: hidden; - height: 0; -} -``` - -#### HTML - -```html -
-

- Cet élément utilise l'élément - #monArrierePlan comme image - de fond ! -

-
- -
-
-

- Et voici un texte inscrit sur - l'arrière-plan. -

-
-
-``` - -#### Résultat - -Pour les navigateurs qui prennent en charge `element`, on peut ici voir un arrière-plan généré avec un paragraphe HTML. - -{{EmbedLiveSample("Un_premier_exemple_réaliste","400","400")}} - -### Un second exemple plus méchant - -#### CSS - -```css -.exemple { - width: 400px; - height: 100px; - background: -moz-element(#monArrierePlan); -} - -.cache { - overflow: hidden; - height: 0; -} -``` - -#### HTML - -```html -
- -
- -
-``` - -#### Résultat - -{{EmbedLiveSample("Un_second_exemple_plus_méchant","400","400")}} - -## Spécifications - -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------- | -| {{SpecName('CSS4 Images', '#element-notation', 'Using Elements as Images: the element() notation')}} | {{Spec2('CSS4 Images')}} | Reporté pour CSS4 | - -## Compatibilité des navigateurs - -{{Compat("css.types.image.element")}} - -## Voir aussi - -- {{domxref("document.mozSetImageElement()")}} -- {{cssxref("_image", "image()")}} -- {{cssxref("image-set", "image-set()")}} -- {{cssxref("<image>")}} -- {{cssxref("<gradient>")}} -- {{cssxref("element()")}} -- {{cssxref("cross-fade")}} -- {{domxref("document.mozSetImageElement()")}} diff --git a/files/fr/web/css/element/index.md b/files/fr/web/css/element/index.md new file mode 100644 index 0000000000..3918c4945c --- /dev/null +++ b/files/fr/web/css/element/index.md @@ -0,0 +1,138 @@ +--- +title: element +slug: Web/CSS/element +tags: + - CSS + - Fonction + - Reference +translation_of: Web/CSS/element() +original_slug: Web/CSS/element() +--- +{{CSSRef}}{{SeeCompatTable}} + +La fonction **`element()`** définit une valeur {{cssxref("<image>")}} générée à partir d'un élément HTML arbitraire. L'image est calculée dynamiquement : si l'élément HTML change, les propriétés CSS utilisant la valeur seront automatiquement mis à jour. + +Un scénario pour lequel cette fonction est particulièrement utile : on génère une image dans un élément HTML {{HTMLElement("canvas")}} et on l'utilise comme arrière-plan. + +Pour les navigateurs basés sur Gecko, on peut utiliser la méthode {{domxref("document.mozSetImageElement()")}} pour modifier l'élément utilisé comme arrière-plan pour un `background` CSS donné. + +## Syntaxe + + element(id) + +### Paramètres + +- **`id`** + - : L'identifiant (correspondant à l'attribut {{htmlattrxref("id")}}) de l'élément HTML visé. + +## Exemples + +### Un premier exemple réaliste + +#### CSS + +```css +.exemple { + width: 400px; + height: 400px; + background: -moz-element(#monArrierePlan) no-repeat; + +} + +.paragraphe { + transform-origin: 0 0; + transform: rotate(45deg); + color: white; +} + +#monArrierePlan{ + width: 1024px; + height: 1024px; + background-image: linear-gradient(to right, red, orange, yellow, white); +} +.cache { + overflow: hidden; + height: 0; +} +``` + +#### HTML + +```html +
+

+ Cet élément utilise l'élément + #monArrierePlan comme image + de fond ! +

+
+ +
+
+

+ Et voici un texte inscrit sur + l'arrière-plan. +

+
+
+``` + +#### Résultat + +Pour les navigateurs qui prennent en charge `element`, on peut ici voir un arrière-plan généré avec un paragraphe HTML. + +{{EmbedLiveSample("Un_premier_exemple_réaliste","400","400")}} + +### Un second exemple plus méchant + +#### CSS + +```css +.exemple { + width: 400px; + height: 100px; + background: -moz-element(#monArrierePlan); +} + +.cache { + overflow: hidden; + height: 0; +} +``` + +#### HTML + +```html +
+ +
+ +
+``` + +#### Résultat + +{{EmbedLiveSample("Un_second_exemple_plus_méchant","400","400")}} + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------- | +| {{SpecName('CSS4 Images', '#element-notation', 'Using Elements as Images: the element() notation')}} | {{Spec2('CSS4 Images')}} | Reporté pour CSS4 | + +## Compatibilité des navigateurs + +{{Compat("css.types.image.element")}} + +## Voir aussi + +- {{domxref("document.mozSetImageElement()")}} +- {{cssxref("_image", "image()")}} +- {{cssxref("image-set", "image-set()")}} +- {{cssxref("<image>")}} +- {{cssxref("<gradient>")}} +- {{cssxref("element()")}} +- {{cssxref("cross-fade")}} +- {{domxref("document.mozSetImageElement()")}} diff --git a/files/fr/web/css/env()/index.md b/files/fr/web/css/env()/index.md deleted file mode 100644 index 059664aaf8..0000000000 --- a/files/fr/web/css/env()/index.md +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: env() -slug: Web/CSS/env() -translation_of: Web/CSS/env() ---- -{{CSSRef}} - -La fonction CSS **`env()`** peut être utilisée afin d'insérer la valeur d'une variable d'environnement dans une règle. Les variables d'environnement sont globales pour un document donné, à la différence des [propriétés personnalisées](/fr/docs/Web/CSS/--*). Les variables d'environnement sont définies au niveau de l'agent utilisateur et non par l'utilisateur/le concepteur. - -`env()` peut être utilisée aux endroits où on souhaite remplacer la valeur, à la façon de la fonction [`var()`](). - -```css -body { - padding: - env(safe-area-inset-top, 20px) - env(safe-area-inset-right, 20px) - env(safe-area-inset-bottom, 20px) - env(safe-area-inset-left, 20px); -} -``` - -La fonction `env()` peut être utilisée à n'importe quel endroit où une valeur peut être associée à une propriété, à n'importe quel endroit où une valeur peut être utilisée dans un descripteur d'une règle @ (ex. dans une [requête média](/fr/docs/Web/CSS/@media)) et, de façon générale, à n'importe quel endroit où les valeurs CSS sont autorisées. Selon les évolutions de la spécification, cette fonction pourrait également être utilisées à d'autres endroits comme les sélecteurs. - -> **Note :** Les variables d'environnement furent initialement fournies par le navigateur iOS afin de permettre aux développeurs de placer le contenu sur une zone sûre de la zone d'affichage (_viewport_) et d'éviter le décrochement formé en haut de l'écran sur certains des appareils. - -## Syntaxe - -```css -/* Utilisation des quatre zones sûres */ -env(safe-area-inset-top) -env(safe-area-inset-right) -env(safe-area-inset-bottom) -env(safe-area-inset-left) - -/* Utilisation du deuxième paramètre pour une valeur de recours */ -env(safe-area-inset-top, 20px); -env(safe-area-inset-right, 1em); -env(safe-area-inset-bottom, 0.5vh); -env(safe-area-inset-left, 1.4rem); -``` - -### Valeurs - -- `safe-area-inset-top`, `safe-area-inset-right`, `safe-area-inset-bottom`, `safe-area-inset-left` - - : Ces mots-clés sont des variables d'environnement qui définissent un rectangle avec les décalages par rapport à chacun des côtés de la zone d'affichage (_viewport_) dans lequel on pourra placer du contenu sans que ce dernier puisse être rogné du fait de la forme non rectangulaire de l'affichage. - -> **Note :** À la différence des autres propriétés CSS, les identifiants provenant de l'agent utilisateur sont sensibles à la casse. - -### Syntaxe formelle - -{{csssyntax}} - -## 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. - -### HTML - -```html -

- Si la fonction env() est prise en charge dans votre - navigateur, le texte de ce paragraphe aura 50 pixels de padding avec - la bordure gauche mais pas la droite / basse et haute. - En effet, le code CSS associé est équivalent à padding: 0 0 0 50px - car les noms des propriétés CSS associées aux agents utilisateurs sont - sensibles à la casse (contrairement aux autres propriétés). -

-``` - -### CSS - -```css -p { - width: 300px; - border: 2px solid red; - padding: - env(safe-area-inset-top, 50px) - env(safe-area-inset-right, 50px) - env(safe-area-inset-bottom, 50px) - env(SAFE-AREA-INSET-LEFT, 50px); -} -``` - -### Résultat - -{{EmbedLiveSample("Exemples")}} - -### Exemples de valeurs - -```css -/* zéro pour les agents utilisateurs rectangulaires */ -padding: env(safe-area-inset-bottom, 50px); - -/* 50px car les propriétés de l'agent sont sensibles à la casse */ -padding: env(Safe-area-inset-bottom, 50px); - -/* correspond à padding: 50px 20px car x n'est pas une variable - d'environnement valide */ -padding: env(x, 50px 20px); - -/* ignorée car '50px, 20px' n'est pas une valeur de padding correcte - et que x n'est pas une variable d'environnement */ -padding: env(x, 50px, 20px); -``` - -Pour la deuxième valeur, il est possible d'utiliser des virgules afin de fournir un ensemble composite de valeurs à la propriété. Toutefois, si la propriété en question ne permet pas de gérer plusieurs valeurs, la déclaration sera invalide. - -> **Note :** Les propriétés relatives à l'agent utilisateur ne sont pas réinitialisées avec la propriété {{cssxref("all")}}. - -## Spécifications - -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------------------- | ---------------------------------------------------- | -------------------- | -| {{SpecName("CSS3 Environment Variables", "#env-function", "env()")}} | {{Spec2("CSS3 Environment Variables")}} | Définition initiale. | - -## Compatibilité des navigateurs - -{{Compat("css.properties.custom-property.env")}} - -## Voir aussi - -- {{CSSxRef("var", "var(…)")}} -- [Les propriétés personnalisées et la cascade](/fr/docs/Web/CSS/CSS_Variables) -- [Les propriétés personnalisées (--\*)](/fr/docs/Web/CSS/--*) -- [Utiliser les propriétés CSS personnalisées](/fr/docs/Web/CSS/Les_variables_CSS) -- {{CSSxRef("@viewport/viewport-fit", "viewport-fit (@viewport)")}} diff --git a/files/fr/web/css/env/index.md b/files/fr/web/css/env/index.md new file mode 100644 index 0000000000..4ba684f5f1 --- /dev/null +++ b/files/fr/web/css/env/index.md @@ -0,0 +1,127 @@ +--- +title: env() +slug: Web/CSS/env +translation_of: Web/CSS/env() +original_slug: Web/CSS/env() +--- +{{CSSRef}} + +La fonction CSS **`env()`** peut être utilisée afin d'insérer la valeur d'une variable d'environnement dans une règle. Les variables d'environnement sont globales pour un document donné, à la différence des [propriétés personnalisées](/fr/docs/Web/CSS/--*). Les variables d'environnement sont définies au niveau de l'agent utilisateur et non par l'utilisateur/le concepteur. + +`env()` peut être utilisée aux endroits où on souhaite remplacer la valeur, à la façon de la fonction [`var()`](). + +```css +body { + padding: + env(safe-area-inset-top, 20px) + env(safe-area-inset-right, 20px) + env(safe-area-inset-bottom, 20px) + env(safe-area-inset-left, 20px); +} +``` + +La fonction `env()` peut être utilisée à n'importe quel endroit où une valeur peut être associée à une propriété, à n'importe quel endroit où une valeur peut être utilisée dans un descripteur d'une règle @ (ex. dans une [requête média](/fr/docs/Web/CSS/@media)) et, de façon générale, à n'importe quel endroit où les valeurs CSS sont autorisées. Selon les évolutions de la spécification, cette fonction pourrait également être utilisées à d'autres endroits comme les sélecteurs. + +> **Note :** Les variables d'environnement furent initialement fournies par le navigateur iOS afin de permettre aux développeurs de placer le contenu sur une zone sûre de la zone d'affichage (_viewport_) et d'éviter le décrochement formé en haut de l'écran sur certains des appareils. + +## Syntaxe + +```css +/* Utilisation des quatre zones sûres */ +env(safe-area-inset-top) +env(safe-area-inset-right) +env(safe-area-inset-bottom) +env(safe-area-inset-left) + +/* Utilisation du deuxième paramètre pour une valeur de recours */ +env(safe-area-inset-top, 20px); +env(safe-area-inset-right, 1em); +env(safe-area-inset-bottom, 0.5vh); +env(safe-area-inset-left, 1.4rem); +``` + +### Valeurs + +- `safe-area-inset-top`, `safe-area-inset-right`, `safe-area-inset-bottom`, `safe-area-inset-left` + - : Ces mots-clés sont des variables d'environnement qui définissent un rectangle avec les décalages par rapport à chacun des côtés de la zone d'affichage (_viewport_) dans lequel on pourra placer du contenu sans que ce dernier puisse être rogné du fait de la forme non rectangulaire de l'affichage. + +> **Note :** À la différence des autres propriétés CSS, les identifiants provenant de l'agent utilisateur sont sensibles à la casse. + +### Syntaxe formelle + +{{csssyntax}} + +## 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. + +### HTML + +```html +

+ Si la fonction env() est prise en charge dans votre + navigateur, le texte de ce paragraphe aura 50 pixels de padding avec + la bordure gauche mais pas la droite / basse et haute. + En effet, le code CSS associé est équivalent à padding: 0 0 0 50px + car les noms des propriétés CSS associées aux agents utilisateurs sont + sensibles à la casse (contrairement aux autres propriétés). +

+``` + +### CSS + +```css +p { + width: 300px; + border: 2px solid red; + padding: + env(safe-area-inset-top, 50px) + env(safe-area-inset-right, 50px) + env(safe-area-inset-bottom, 50px) + env(SAFE-AREA-INSET-LEFT, 50px); +} +``` + +### Résultat + +{{EmbedLiveSample("Exemples")}} + +### Exemples de valeurs + +```css +/* zéro pour les agents utilisateurs rectangulaires */ +padding: env(safe-area-inset-bottom, 50px); + +/* 50px car les propriétés de l'agent sont sensibles à la casse */ +padding: env(Safe-area-inset-bottom, 50px); + +/* correspond à padding: 50px 20px car x n'est pas une variable + d'environnement valide */ +padding: env(x, 50px 20px); + +/* ignorée car '50px, 20px' n'est pas une valeur de padding correcte + et que x n'est pas une variable d'environnement */ +padding: env(x, 50px, 20px); +``` + +Pour la deuxième valeur, il est possible d'utiliser des virgules afin de fournir un ensemble composite de valeurs à la propriété. Toutefois, si la propriété en question ne permet pas de gérer plusieurs valeurs, la déclaration sera invalide. + +> **Note :** Les propriétés relatives à l'agent utilisateur ne sont pas réinitialisées avec la propriété {{cssxref("all")}}. + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------- | ---------------------------------------------------- | -------------------- | +| {{SpecName("CSS3 Environment Variables", "#env-function", "env()")}} | {{Spec2("CSS3 Environment Variables")}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("css.properties.custom-property.env")}} + +## Voir aussi + +- {{CSSxRef("var", "var(…)")}} +- [Les propriétés personnalisées et la cascade](/fr/docs/Web/CSS/CSS_Variables) +- [Les propriétés personnalisées (--\*)](/fr/docs/Web/CSS/--*) +- [Utiliser les propriétés CSS personnalisées](/fr/docs/Web/CSS/Les_variables_CSS) +- {{CSSxRef("@viewport/viewport-fit", "viewport-fit (@viewport)")}} diff --git a/files/fr/web/css/filter-function/blur()/index.md b/files/fr/web/css/filter-function/blur()/index.md deleted file mode 100644 index 0297437fea..0000000000 --- a/files/fr/web/css/filter-function/blur()/index.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: blur() -slug: Web/CSS/filter-function/blur() -translation_of: Web/CSS/filter-function/blur() -browser-compat: css.types.filter-function.blur ---- -{{CSSRef}} - -La fonction CSS **`blur()`** permet d'appliquer [un flou gaussien](https://en.wikipedia.org/wiki/Gaussian_blur) sur l'image d'entrée. Le résultat de cette fonction est une valeur [``](/fr/docs/Web/CSS/filter-function). - -{{EmbedInteractiveExample("pages/css/function-blur.html")}} - -## Syntaxe - -```css -blur(rayon) -``` - -### Paramètres - -- `rayon` - - : Le rayon d'application du flou, défini par une longueur CSS ([``](/fr/docs/Web/CSS/length)). Cela définit l'écart-type de la fonction gaussienne appliquée (c'est-à-dire le nombre de pixels qui se mélangeront). Ainsi, plus la valeur est grande, plus le flou sera prononcé. Si on utilise la longueur nulle `0`, l'image ne sera pas modifiée. La valeur utilisée par défaut lors d'une interpolation est `0`. - -## Exemples - -### Définir un flou en pixels ou en rem - -```css -blur(0); /* Aucun effet */ -blur(8px); /* Un flou avec un rayon de 8px */ -blur(1.17rem); /* Un flou avec un rayon de 1.17rem */ -``` - -## Spécifications - -{{Specifications}} - -## Compatibilité des navigateurs - -{{Compat}} - -## Voir aussi - -- [``](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées - - [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) - - [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) - - [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) - - [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) - - [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) - - [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) - - [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) - - [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) - - [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia()) \ No newline at end of file diff --git a/files/fr/web/css/filter-function/blur/index.md b/files/fr/web/css/filter-function/blur/index.md new file mode 100644 index 0000000000..e5a1c84025 --- /dev/null +++ b/files/fr/web/css/filter-function/blur/index.md @@ -0,0 +1,54 @@ +--- +title: blur() +slug: Web/CSS/filter-function/blur +translation_of: Web/CSS/filter-function/blur() +original_slug: Web/CSS/filter-function/blur() +browser-compat: css.types.filter-function.blur +--- +{{CSSRef}} + +La fonction CSS **`blur()`** permet d'appliquer [un flou gaussien](https://en.wikipedia.org/wiki/Gaussian_blur) sur l'image d'entrée. Le résultat de cette fonction est une valeur [``](/fr/docs/Web/CSS/filter-function). + +{{EmbedInteractiveExample("pages/css/function-blur.html")}} + +## Syntaxe + +```css +blur(rayon) +``` + +### Paramètres + +- `rayon` + - : Le rayon d'application du flou, défini par une longueur CSS ([``](/fr/docs/Web/CSS/length)). Cela définit l'écart-type de la fonction gaussienne appliquée (c'est-à-dire le nombre de pixels qui se mélangeront). Ainsi, plus la valeur est grande, plus le flou sera prononcé. Si on utilise la longueur nulle `0`, l'image ne sera pas modifiée. La valeur utilisée par défaut lors d'une interpolation est `0`. + +## Exemples + +### Définir un flou en pixels ou en rem + +```css +blur(0); /* Aucun effet */ +blur(8px); /* Un flou avec un rayon de 8px */ +blur(1.17rem); /* Un flou avec un rayon de 1.17rem */ +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [``](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées + - [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) + - [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) + - [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) + - [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) + - [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) + - [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) + - [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) + - [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) + - [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia()) diff --git a/files/fr/web/css/filter-function/brightness()/index.md b/files/fr/web/css/filter-function/brightness()/index.md deleted file mode 100644 index 88d21e40f2..0000000000 --- a/files/fr/web/css/filter-function/brightness()/index.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: brightness() -slug: Web/CSS/filter-function/brightness() -translation_of: Web/CSS/filter-function/brightness() -browser-compat: css.types.filter-function.brightness ---- -{{CSSRef}} - -La fonction CSS **`brightness()`** applique un multiplicateur linéaire sur une image afin de la rendre plus claire ou plus sombre. Le résultat obtenu est une valeur de type [``](/fr/docs/Web/CSS/filter-function). - -{{EmbedInteractiveExample("pages/css/function-brightness.html")}} - -## Syntaxe - -```css -brightness(multiplicateur) -``` - -### Paramètres - -- `multiplicateur` - - : L'amplification de la clarté de l'image, indiquée sous la forme d'un nombre ([``](/fr/docs/Web/CSS/number)) ou d'un pourcentage ([``](/fr/docs/Web/CSS/percentage)). Une valeur inférieure à `100%` assombrira l'image alors qu'une valeur supérieure à `100%` la rendra plus claire. Une valeur de `0%` permettra d'obtenir une image complètement noire et une valeur de `100%` laissera l'image inchangée. La valeur par défaut utilisée lors de l'interpolation est `1`. - -## Exemples - -### Définir la clarté avec des nombres et des pourcentages - -```css -brightness(0%) /* Complètement noir */ -brightness(0.4) /* 40% de la clarté */ -brightness(1) /* Aucun effet */ -brightness(200%) /* Double la clarté */ -``` - -## Spécifications - -{{Specifications}} - -## Compatibilité des navigateurs - -{{Compat}} - -## Voir aussi - -- [``](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées - - [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) - - [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) - - [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) - - [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) - - [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) - - [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) - - [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) - - [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) - - [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia()) \ No newline at end of file diff --git a/files/fr/web/css/filter-function/brightness/index.md b/files/fr/web/css/filter-function/brightness/index.md new file mode 100644 index 0000000000..53a62e04e6 --- /dev/null +++ b/files/fr/web/css/filter-function/brightness/index.md @@ -0,0 +1,55 @@ +--- +title: brightness() +slug: Web/CSS/filter-function/brightness +translation_of: Web/CSS/filter-function/brightness() +original_slug: Web/CSS/filter-function/brightness() +browser-compat: css.types.filter-function.brightness +--- +{{CSSRef}} + +La fonction CSS **`brightness()`** applique un multiplicateur linéaire sur une image afin de la rendre plus claire ou plus sombre. Le résultat obtenu est une valeur de type [``](/fr/docs/Web/CSS/filter-function). + +{{EmbedInteractiveExample("pages/css/function-brightness.html")}} + +## Syntaxe + +```css +brightness(multiplicateur) +``` + +### Paramètres + +- `multiplicateur` + - : L'amplification de la clarté de l'image, indiquée sous la forme d'un nombre ([``](/fr/docs/Web/CSS/number)) ou d'un pourcentage ([``](/fr/docs/Web/CSS/percentage)). Une valeur inférieure à `100%` assombrira l'image alors qu'une valeur supérieure à `100%` la rendra plus claire. Une valeur de `0%` permettra d'obtenir une image complètement noire et une valeur de `100%` laissera l'image inchangée. La valeur par défaut utilisée lors de l'interpolation est `1`. + +## Exemples + +### Définir la clarté avec des nombres et des pourcentages + +```css +brightness(0%) /* Complètement noir */ +brightness(0.4) /* 40% de la clarté */ +brightness(1) /* Aucun effet */ +brightness(200%) /* Double la clarté */ +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [``](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées + - [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) + - [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) + - [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) + - [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) + - [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) + - [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) + - [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) + - [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) + - [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia()) diff --git a/files/fr/web/css/filter-function/contrast()/index.md b/files/fr/web/css/filter-function/contrast()/index.md deleted file mode 100644 index a7ed526629..0000000000 --- a/files/fr/web/css/filter-function/contrast()/index.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: contrast() -slug: Web/CSS/filter-function/contrast() -translation_of: Web/CSS/filter-function/contrast() -browser-compat: css.types.filter-function.contrast ---- -{{CSSRef}} - -La fonction CSS **`contrast()`** permet d'ajuster le contraste d'une image. Le résultat de cette fonction est une valeur de type [`](/fr/docs/Web/CSS/filter-function). - -{{EmbedInteractiveExample("pages/css/function-contrast.html")}} - -## Syntaxe - -```css -contrast(multiplicateur) -``` -### Paramètres - -- `multiplicateur` - - : La modification de contraste à appliquer à l'image, exprimée sous la forme d'un nombre ([``](/fr/docs/Web/CSS/number)) ou d'un pourcentage ([``](/fr/docs/Web/CSS/percentage)). Une valeur inférieure à `100%` réduira le contraste et une valeur supérieure à `100%` accentuera le contraste. Une valeur de `0%` permettra d'obtenir une image complètement grise et une valeur de `100%` laissera l'image inchangée. La valeur par défaut utilisée pour les interpolations est `1`. - -## Exemples - -### Définir un contraste à l'aide de nombres et de pourcentages - -```css -contrast(0); /* Complètement gris */ -contrast(65%); /* 65% de contraste */ -contrast(1); /* Aucun effet */ -contrast(200%); /* Contraste doublé */ -``` - -## Spécifications - -{{Specifications}} - -## Compatibilité des navigateurs - -{{Compat}} - -## Voir aussi - -- [``](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées - - [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) - - [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) - - [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) - - [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) - - [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) - - [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) - - [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) - - [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) - - [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia()) \ No newline at end of file diff --git a/files/fr/web/css/filter-function/contrast/index.md b/files/fr/web/css/filter-function/contrast/index.md new file mode 100644 index 0000000000..0a8d5a01d3 --- /dev/null +++ b/files/fr/web/css/filter-function/contrast/index.md @@ -0,0 +1,54 @@ +--- +title: contrast() +slug: Web/CSS/filter-function/contrast +translation_of: Web/CSS/filter-function/contrast() +original_slug: Web/CSS/filter-function/contrast() +browser-compat: css.types.filter-function.contrast +--- +{{CSSRef}} + +La fonction CSS **`contrast()`** permet d'ajuster le contraste d'une image. Le résultat de cette fonction est une valeur de type [`](/fr/docs/Web/CSS/filter-function). + +{{EmbedInteractiveExample("pages/css/function-contrast.html")}} + +## Syntaxe + +```css +contrast(multiplicateur) +``` +### Paramètres + +- `multiplicateur` + - : La modification de contraste à appliquer à l'image, exprimée sous la forme d'un nombre ([``](/fr/docs/Web/CSS/number)) ou d'un pourcentage ([``](/fr/docs/Web/CSS/percentage)). Une valeur inférieure à `100%` réduira le contraste et une valeur supérieure à `100%` accentuera le contraste. Une valeur de `0%` permettra d'obtenir une image complètement grise et une valeur de `100%` laissera l'image inchangée. La valeur par défaut utilisée pour les interpolations est `1`. + +## Exemples + +### Définir un contraste à l'aide de nombres et de pourcentages + +```css +contrast(0); /* Complètement gris */ +contrast(65%); /* 65% de contraste */ +contrast(1); /* Aucun effet */ +contrast(200%); /* Contraste doublé */ +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [``](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées + - [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) + - [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) + - [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) + - [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) + - [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) + - [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) + - [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) + - [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) + - [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia()) diff --git a/files/fr/web/css/filter-function/drop-shadow()/index.md b/files/fr/web/css/filter-function/drop-shadow()/index.md deleted file mode 100644 index af57af798d..0000000000 --- a/files/fr/web/css/filter-function/drop-shadow()/index.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: drop-shadow() -slug: Web/CSS/filter-function/drop-shadow() -translation_of: Web/CSS/filter-function/drop-shadow() -browser-compat: css.types.filter-function.drop-shadow ---- -{{CSSRef}} - -La fonction CSS **`drop-shadow()`** permet d'appliquer une ombre portée sur une image. Le résultat obtenu par cette fonction est une valeur [``](/fr/docs/Web/CSS/filter-function). - -{{EmbedInteractiveExample("pages/css/function-drop-shadow.html")}} - -En pratique, une ombre portée correspond à une version floutée et décalée du masque alpha de l'image, dessiné avec une couleur donnée et fusionné sous l'image. - -> **Note :** Cette fonction s'apparente à la propriété [`box-shadow`](/fr/docs/Web/CSS/box-shadow). La propriété `box-shadow` permet de créer une ombre rectangulaire sous **la boîte entière** d'un élément. En revanche, la fonction `drop-shadow()` permet de créer un ombre qui épouse la forme (le canal alpha) de **l'image même**. - -## Syntaxe - -```css -drop-shadow(decalage-x decalage-y rayon-flou couleur) -``` - -La fonction `drop-shadow()` accepte un paramètre de type `` (tel que défini dans la documentation de [`box-shadow`](/fr/docs/Web/CSS/box-shadow)), mais pour lequel le mot-clé `inset` et le paramètre `spread` ne sont pas acceptés. - -### Paramètres - -- `decalage-x` `decalage-y` (required) - - : Deux valeurs de longueur ( type [``](/fr/docs/Web/CSS/length)) qui déterminent le décalage de l'ombre. `decalage-x` indique la distance horizontale, les valeurs négatives décalant l'ombre vers la gauche de l'élément. `decalage-y` indique la distance verticale, les valeurs négatives décalant l'ombre vers le haut de l'élément. Si les deux valeurs sont `0`, l'ombre est placée directement sous l'élément. -- `rayon-flou` (optional) - - : Le rayon de flou de l'ombre, indiqué comme une longueur (type [``](/fr/docs/Web/CSS/length)). Plus la valeur est grande, plus l'ombre sera grande et floue. Si cette valeur n'est pas fournie, elle prendra 0 comme valeur par défaut, ce qui créera une ombre au contour net. Les valeurs négatives ne sont pas autorisées. -- `couleur` (optional) - - : La couleur de l'ombre, indiquée sous la forme d'une valeur de type [``](/fr/docs/Web/CSS/color_value). Si cette valeur n'est pas fournie, c'est la couleur indiquée par la propriété [`color`](/fr/docs/Web/CSS/color) qui est utilisée. - -## Exemples - -### Définir une ombre portée avec des décalages et un rayon de flou exprimés en pixels - -```css -/* Une ombre noire avec un rayon de flou de 10px */ -drop-shadow(16px 16px 10px black) -``` - -### Définir une ombre portée avec des décalages et un rayon de flou en rem - -```css -/* Une ombre rougeâtre avec un rayon de flou de 1rem */ -drop-shadow(.5rem .5rem 1rem #e23) -``` - -## Spécifications - -{{Specifications}} - -## Compatibilité des navigateurs - -{{Compat}} -## Voir aussi - -- [``](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées - - [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) - - [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) - - [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) - - [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) - - [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) - - [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) - - [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) - - [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) - - [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia()) -- La propriété CSS [`box-shadow`](/fr/docs/Web/CSS/box-shadow) \ No newline at end of file diff --git a/files/fr/web/css/filter-function/drop-shadow/index.md b/files/fr/web/css/filter-function/drop-shadow/index.md new file mode 100644 index 0000000000..854dd8959a --- /dev/null +++ b/files/fr/web/css/filter-function/drop-shadow/index.md @@ -0,0 +1,70 @@ +--- +title: drop-shadow() +slug: Web/CSS/filter-function/drop-shadow +translation_of: Web/CSS/filter-function/drop-shadow() +original_slug: Web/CSS/filter-function/drop-shadow() +browser-compat: css.types.filter-function.drop-shadow +--- +{{CSSRef}} + +La fonction CSS **`drop-shadow()`** permet d'appliquer une ombre portée sur une image. Le résultat obtenu par cette fonction est une valeur [``](/fr/docs/Web/CSS/filter-function). + +{{EmbedInteractiveExample("pages/css/function-drop-shadow.html")}} + +En pratique, une ombre portée correspond à une version floutée et décalée du masque alpha de l'image, dessiné avec une couleur donnée et fusionné sous l'image. + +> **Note :** Cette fonction s'apparente à la propriété [`box-shadow`](/fr/docs/Web/CSS/box-shadow). La propriété `box-shadow` permet de créer une ombre rectangulaire sous **la boîte entière** d'un élément. En revanche, la fonction `drop-shadow()` permet de créer un ombre qui épouse la forme (le canal alpha) de **l'image même**. + +## Syntaxe + +```css +drop-shadow(decalage-x decalage-y rayon-flou couleur) +``` + +La fonction `drop-shadow()` accepte un paramètre de type `` (tel que défini dans la documentation de [`box-shadow`](/fr/docs/Web/CSS/box-shadow)), mais pour lequel le mot-clé `inset` et le paramètre `spread` ne sont pas acceptés. + +### Paramètres + +- `decalage-x` `decalage-y` (required) + - : Deux valeurs de longueur ( type [``](/fr/docs/Web/CSS/length)) qui déterminent le décalage de l'ombre. `decalage-x` indique la distance horizontale, les valeurs négatives décalant l'ombre vers la gauche de l'élément. `decalage-y` indique la distance verticale, les valeurs négatives décalant l'ombre vers le haut de l'élément. Si les deux valeurs sont `0`, l'ombre est placée directement sous l'élément. +- `rayon-flou` (optional) + - : Le rayon de flou de l'ombre, indiqué comme une longueur (type [``](/fr/docs/Web/CSS/length)). Plus la valeur est grande, plus l'ombre sera grande et floue. Si cette valeur n'est pas fournie, elle prendra 0 comme valeur par défaut, ce qui créera une ombre au contour net. Les valeurs négatives ne sont pas autorisées. +- `couleur` (optional) + - : La couleur de l'ombre, indiquée sous la forme d'une valeur de type [``](/fr/docs/Web/CSS/color_value). Si cette valeur n'est pas fournie, c'est la couleur indiquée par la propriété [`color`](/fr/docs/Web/CSS/color) qui est utilisée. + +## Exemples + +### Définir une ombre portée avec des décalages et un rayon de flou exprimés en pixels + +```css +/* Une ombre noire avec un rayon de flou de 10px */ +drop-shadow(16px 16px 10px black) +``` + +### Définir une ombre portée avec des décalages et un rayon de flou en rem + +```css +/* Une ombre rougeâtre avec un rayon de flou de 1rem */ +drop-shadow(.5rem .5rem 1rem #e23) +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} +## Voir aussi + +- [``](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées + - [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) + - [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) + - [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) + - [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) + - [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) + - [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) + - [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) + - [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) + - [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia()) +- La propriété CSS [`box-shadow`](/fr/docs/Web/CSS/box-shadow) diff --git a/files/fr/web/css/filter-function/grayscale()/index.md b/files/fr/web/css/filter-function/grayscale()/index.md deleted file mode 100644 index 88329e7917..0000000000 --- a/files/fr/web/css/filter-function/grayscale()/index.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: grayscale() -slug: Web/CSS/filter-function/grayscale() -translation_of: Web/CSS/filter-function/grayscale() -browser-compat: css.types.filter-function.grayscale ---- -{{CSSRef}} - -La fonction CSS **`grayscale()`** convertit une image en niveaux de gris. Le résultat de cette fonction est une valeur [``](/fr/docs/Web/CSS/filter-function). - -{{EmbedInteractiveExample("pages/css/function-grayscale.html")}} - -## Syntaxe - -```css -grayscale(multiplicateur) -``` - -### Paramètres - -- `multiplicateur` - - : L'intensité de la conversion, indiquée sous la forme d'un nombre ([``](/fr/docs/Web/CSS/number)) ou d'un pourcentage ([``](/fr/docs/Web/CSS/percentage)). Avec une valeur égale à `100%`, l'image obtenue sera complètement en niveaux de gris. Avec une valeur égale à `0%`, l'image source restera inchangée. Les valeurs comprises entre `0%` et `100%` auront un effet intermédiaire (progression linéaire). Dans le cas d'une interpolation, la valeur par défaut utilisée est `0`. - -## Exemples - -### Exemples de valeurs correctes pour grayscale() - -```css -grayscale(0) /* Aucun effet */ -grayscale(.7) /* Converti à 70% en niveaux de gris */ -grayscale(100%) /* Uniquement en niveaux de gris */ -``` - -## Spécifications - -{{Specifications}} - -## Compatibilité des navigateurs - -{{Compat}} - -## Voir aussi - -- [``](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées - - [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) - - [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) - - [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) - - [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) - - [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) - - [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) - - [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) - - [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) - - [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia()) \ No newline at end of file diff --git a/files/fr/web/css/filter-function/grayscale/index.md b/files/fr/web/css/filter-function/grayscale/index.md new file mode 100644 index 0000000000..59517ae948 --- /dev/null +++ b/files/fr/web/css/filter-function/grayscale/index.md @@ -0,0 +1,54 @@ +--- +title: grayscale() +slug: Web/CSS/filter-function/grayscale +translation_of: Web/CSS/filter-function/grayscale() +original_slug: Web/CSS/filter-function/grayscale() +browser-compat: css.types.filter-function.grayscale +--- +{{CSSRef}} + +La fonction CSS **`grayscale()`** convertit une image en niveaux de gris. Le résultat de cette fonction est une valeur [``](/fr/docs/Web/CSS/filter-function). + +{{EmbedInteractiveExample("pages/css/function-grayscale.html")}} + +## Syntaxe + +```css +grayscale(multiplicateur) +``` + +### Paramètres + +- `multiplicateur` + - : L'intensité de la conversion, indiquée sous la forme d'un nombre ([``](/fr/docs/Web/CSS/number)) ou d'un pourcentage ([``](/fr/docs/Web/CSS/percentage)). Avec une valeur égale à `100%`, l'image obtenue sera complètement en niveaux de gris. Avec une valeur égale à `0%`, l'image source restera inchangée. Les valeurs comprises entre `0%` et `100%` auront un effet intermédiaire (progression linéaire). Dans le cas d'une interpolation, la valeur par défaut utilisée est `0`. + +## Exemples + +### Exemples de valeurs correctes pour grayscale() + +```css +grayscale(0) /* Aucun effet */ +grayscale(.7) /* Converti à 70% en niveaux de gris */ +grayscale(100%) /* Uniquement en niveaux de gris */ +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [``](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées + - [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) + - [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) + - [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) + - [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) + - [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) + - [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) + - [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) + - [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) + - [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia()) diff --git a/files/fr/web/css/filter-function/hue-rotate()/index.md b/files/fr/web/css/filter-function/hue-rotate()/index.md deleted file mode 100644 index 5a0095dafa..0000000000 --- a/files/fr/web/css/filter-function/hue-rotate()/index.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: hue-rotate() -slug: Web/CSS/filter-function/hue-rotate() -translation_of: Web/CSS/filter-function/hue-rotate() -browser-compat: css.types.filter-function.hue-rotate ---- -{{CSSRef}} - -La fonction CSS **`hue-rotate()`** permet d'appliquer une rotation de teinte sur une image. Le résultat de cette fonction est une valeur [``](/fr/docs/Web/CSS/filter-function). - -{{EmbedInteractiveExample("pages/css/function-hue-rotate.html")}} - -## Syntaxe - -```css -hue-rotate(angle) -``` - -### Paramètres - -- `angle` - - : L'angle de rotation sur le cercle des couleurs, exprimé avec une valeur de type [``](/fr/docs/Web/CSS/angle). Une valeur de `0deg` laissera l'image inchangée. La valeur utilisée par défaut pour une interpolation sera `0`. Bien qu'il n'y ait pas de valeur maximale, la valeur de l'angle est toujours ramenée entre `360deg` et `0deg`. - -## Exemples - -### Exemples de valeurs correctes pour hue-rotate() - -```css -hue-rotate(-90deg); /* Correspond à une rotation de 270deg */ -hue-rotate(0deg); /* Sans effet */ -hue-rotate(90deg); /* Rotation de 90deg */ -hue-rotate(.5turn); /* Rotation de 180deg */ -hue-rotate(405deg); /* Correspond à une rotation de 45deg */ -``` - -## Spécifications - -{{Specifications}} - -## Compatibilité des navigateurs - -{{Compat}} - -## Voir aussi - -- [``](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées - - [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) - - [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) - - [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) - - [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) - - [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) - - [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) - - [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) - - [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) - - [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia()) \ No newline at end of file diff --git a/files/fr/web/css/filter-function/hue-rotate/index.md b/files/fr/web/css/filter-function/hue-rotate/index.md new file mode 100644 index 0000000000..ad4ad247f9 --- /dev/null +++ b/files/fr/web/css/filter-function/hue-rotate/index.md @@ -0,0 +1,56 @@ +--- +title: hue-rotate() +slug: Web/CSS/filter-function/hue-rotate +translation_of: Web/CSS/filter-function/hue-rotate() +original_slug: Web/CSS/filter-function/hue-rotate() +browser-compat: css.types.filter-function.hue-rotate +--- +{{CSSRef}} + +La fonction CSS **`hue-rotate()`** permet d'appliquer une rotation de teinte sur une image. Le résultat de cette fonction est une valeur [``](/fr/docs/Web/CSS/filter-function). + +{{EmbedInteractiveExample("pages/css/function-hue-rotate.html")}} + +## Syntaxe + +```css +hue-rotate(angle) +``` + +### Paramètres + +- `angle` + - : L'angle de rotation sur le cercle des couleurs, exprimé avec une valeur de type [``](/fr/docs/Web/CSS/angle). Une valeur de `0deg` laissera l'image inchangée. La valeur utilisée par défaut pour une interpolation sera `0`. Bien qu'il n'y ait pas de valeur maximale, la valeur de l'angle est toujours ramenée entre `360deg` et `0deg`. + +## Exemples + +### Exemples de valeurs correctes pour hue-rotate() + +```css +hue-rotate(-90deg); /* Correspond à une rotation de 270deg */ +hue-rotate(0deg); /* Sans effet */ +hue-rotate(90deg); /* Rotation de 90deg */ +hue-rotate(.5turn); /* Rotation de 180deg */ +hue-rotate(405deg); /* Correspond à une rotation de 45deg */ +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [``](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées + - [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) + - [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) + - [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) + - [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) + - [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) + - [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) + - [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) + - [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) + - [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia()) diff --git a/files/fr/web/css/filter-function/invert()/index.md b/files/fr/web/css/filter-function/invert()/index.md deleted file mode 100644 index 0c148b0517..0000000000 --- a/files/fr/web/css/filter-function/invert()/index.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: invert() -slug: Web/CSS/filter-function/invert() -translation_of: Web/CSS/filter-function/invert() -browser-compat: css.types.filter-function.invert ---- -{{CSSRef}} - -La fonction CSS **`invert()`** permet d'inverser les couleurs de l'image. La valeur obtenue par cette fonction est de type [``](/fr/docs/Web/CSS/filter-function). - -{{EmbedInteractiveExample("pages/css/function-invert.html")}} - -## Syntaxe - -```css -invert(multiplicateur) -``` -### Paramètres - -- `multiplicateur` - - : L'intensité de la conversion, indiquée sous la forme d'un nombre ([``](/fr/docs/Web/CSS/number)) ou d'un pourcentage ([``](/fr/docs/Web/CSS/percentage)). Avec `100%`, les couleurs seront entièrement inversées (ce sera un négatif de l'image originale). Une valeur de `0%` ne modifiera pas l'image. Les valeurs intermédiaires auront un effet proportionnel. Lors d'une interpolation, la valeur utilisée par défaut est `0`. - -## Exemples - -### Exemples de valeurs correctes pour invert() - -```css -invert(0); /* Aucun effet */ -invert(.6); /* Inversion à 60% */ -invert(100%); /* Négatif de l'image originale */ -``` - -## Spécifications - -{{Specifications}} - -## Compatibilité des navigateurs - -{{Compat}} - -## Voir aussi - -- [``](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées - - [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) - - [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) - - [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) - - [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) - - [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) - - [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) - - [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) - - [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) - - [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia()) \ No newline at end of file diff --git a/files/fr/web/css/filter-function/invert/index.md b/files/fr/web/css/filter-function/invert/index.md new file mode 100644 index 0000000000..a0aaf92f2a --- /dev/null +++ b/files/fr/web/css/filter-function/invert/index.md @@ -0,0 +1,53 @@ +--- +title: invert() +slug: Web/CSS/filter-function/invert +translation_of: Web/CSS/filter-function/invert() +original_slug: Web/CSS/filter-function/invert() +browser-compat: css.types.filter-function.invert +--- +{{CSSRef}} + +La fonction CSS **`invert()`** permet d'inverser les couleurs de l'image. La valeur obtenue par cette fonction est de type [``](/fr/docs/Web/CSS/filter-function). + +{{EmbedInteractiveExample("pages/css/function-invert.html")}} + +## Syntaxe + +```css +invert(multiplicateur) +``` +### Paramètres + +- `multiplicateur` + - : L'intensité de la conversion, indiquée sous la forme d'un nombre ([``](/fr/docs/Web/CSS/number)) ou d'un pourcentage ([``](/fr/docs/Web/CSS/percentage)). Avec `100%`, les couleurs seront entièrement inversées (ce sera un négatif de l'image originale). Une valeur de `0%` ne modifiera pas l'image. Les valeurs intermédiaires auront un effet proportionnel. Lors d'une interpolation, la valeur utilisée par défaut est `0`. + +## Exemples + +### Exemples de valeurs correctes pour invert() + +```css +invert(0); /* Aucun effet */ +invert(.6); /* Inversion à 60% */ +invert(100%); /* Négatif de l'image originale */ +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [``](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées + - [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) + - [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) + - [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) + - [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) + - [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) + - [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) + - [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) + - [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) + - [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia()) diff --git a/files/fr/web/css/filter-function/opacity()/index.md b/files/fr/web/css/filter-function/opacity()/index.md deleted file mode 100644 index 42bee1f745..0000000000 --- a/files/fr/web/css/filter-function/opacity()/index.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: opacity() -slug: Web/CSS/filter-function/opacity() -translation_of: Web/CSS/filter-function/opacity() -browser-compat: css.types.filter-function.opacity ---- -{{CSSRef}} - -La fonction CSS **`opacity()`** permet de modifier la transparence de l'image. Le résultat obtenu par cette fonction est une valeur [``](/fr/docs/Web/CSS/filter-function). - -{{EmbedInteractiveExample("pages/css/function-opacity.html")}} - -> **Note :** Cette fonction est proche de la propriété [`opacity`](/fr/docs/Web/CSS/opacity) mais, selon le navigateur, les filtres CSS peuvent bénéficier de l'accélération matérielle pour de meilleures performances. - -## Syntaxe - -```css -opacity(multiplicateur) -``` - -### Paramètres - -- `multiplicateur` - - : L'intensité de l'opacité, indiquée comme un nombre ([``](/fr/docs/Web/CSS/number)) ou comme un pourcentage ([``](/fr/docs/Web/CSS/percentage)). Une valeur de `0%` entraînera une image complètement transparente. Une valeur de `100%` laissera l'image inchangée. Les valeurs intermédiaires auront un effet proportionnel. Lors d'une interpolation, la valeur par défaut utilisée sera `1`. - -## Exemples - -### Exemples de valeurs correctes pour opacity() - -```css -opacity(0%); /* Complètement transparente */ -opacity(50%); /* 50% transparent */ -opacity(1); /* Aucun effet */ -``` - -## Spécifications - -{{Specifications}} - -## Compatibilité des navigateurs - -{{Compat}} - -## Voir aussi - -- La propriété CSS [`opacity`](/fr/docs/Web/CSS/opacity) -- [``](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées - - [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) - - [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) - - [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) - - [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) - - [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) - - [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) - - [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) - - [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) - - [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia()) \ No newline at end of file diff --git a/files/fr/web/css/filter-function/opacity/index.md b/files/fr/web/css/filter-function/opacity/index.md new file mode 100644 index 0000000000..0b3934d29d --- /dev/null +++ b/files/fr/web/css/filter-function/opacity/index.md @@ -0,0 +1,57 @@ +--- +title: opacity() +slug: Web/CSS/filter-function/opacity +translation_of: Web/CSS/filter-function/opacity() +original_slug: Web/CSS/filter-function/opacity() +browser-compat: css.types.filter-function.opacity +--- +{{CSSRef}} + +La fonction CSS **`opacity()`** permet de modifier la transparence de l'image. Le résultat obtenu par cette fonction est une valeur [``](/fr/docs/Web/CSS/filter-function). + +{{EmbedInteractiveExample("pages/css/function-opacity.html")}} + +> **Note :** Cette fonction est proche de la propriété [`opacity`](/fr/docs/Web/CSS/opacity) mais, selon le navigateur, les filtres CSS peuvent bénéficier de l'accélération matérielle pour de meilleures performances. + +## Syntaxe + +```css +opacity(multiplicateur) +``` + +### Paramètres + +- `multiplicateur` + - : L'intensité de l'opacité, indiquée comme un nombre ([``](/fr/docs/Web/CSS/number)) ou comme un pourcentage ([``](/fr/docs/Web/CSS/percentage)). Une valeur de `0%` entraînera une image complètement transparente. Une valeur de `100%` laissera l'image inchangée. Les valeurs intermédiaires auront un effet proportionnel. Lors d'une interpolation, la valeur par défaut utilisée sera `1`. + +## Exemples + +### Exemples de valeurs correctes pour opacity() + +```css +opacity(0%); /* Complètement transparente */ +opacity(50%); /* 50% transparent */ +opacity(1); /* Aucun effet */ +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- La propriété CSS [`opacity`](/fr/docs/Web/CSS/opacity) +- [``](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées + - [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) + - [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) + - [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) + - [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) + - [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) + - [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) + - [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) + - [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) + - [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia()) diff --git a/files/fr/web/css/filter-function/saturate()/index.md b/files/fr/web/css/filter-function/saturate()/index.md deleted file mode 100644 index dc487e25b4..0000000000 --- a/files/fr/web/css/filter-function/saturate()/index.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: saturate() -slug: Web/CSS/filter-function/saturate() -translation_of: Web/CSS/filter-function/saturate() -browser-compat: css.types.filter-function.saturate ---- -{{CSSRef}} - -La fonction CSS **`saturate()`** permet d'accentuer ou de réduire la saturation d'une image. La valeur obtenue par cette fonction est une valeur de type [``](/fr/docs/Web/CSS/filter-function). - -{{EmbedInteractiveExample("pages/css/function-saturate.html")}} - -## Syntaxe - -```css -saturate(multiplicateur) -``` - -### Paramètres - -- `multiplicateur` - - : L'intensité de la modification sous la forme d'un nombre ([``](/fr/docs/Web/CSS/number)) ou d'un pourcentage ([``](/fr/docs/Web/CSS/percentage)). Une valeur inférieure à `100%` réduira la saturation et une valeur supérieure accentuera la saturation. Une valeur de `0%` désaturera complètement l'image alors qu'une valeur de `100%` laissera l'image inchangée. Lors d'une interpolation, la valeur par défaut est `1`. - -## Exemples - -### Exemples de valeurs correctes pour saturate() - -```css -saturate(0); /* Complètement sous-saturée */ -saturate(.4); /* Sous-saturée à 40% */ -saturate(100%); /* Aucun effet */ -saturate(200%); /* Saturation doublée */ -``` - -## Spécifications - -{{Specifications}} - -## Compatibilité des navigateurs - -{{Compat}} - -## Voir aussi - -- [``](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées - - [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) - - [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) - - [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) - - [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) - - [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) - - [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) - - [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) - - [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) - - [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia()) \ No newline at end of file diff --git a/files/fr/web/css/filter-function/saturate/index.md b/files/fr/web/css/filter-function/saturate/index.md new file mode 100644 index 0000000000..afd27682ad --- /dev/null +++ b/files/fr/web/css/filter-function/saturate/index.md @@ -0,0 +1,55 @@ +--- +title: saturate() +slug: Web/CSS/filter-function/saturate +translation_of: Web/CSS/filter-function/saturate() +original_slug: Web/CSS/filter-function/saturate() +browser-compat: css.types.filter-function.saturate +--- +{{CSSRef}} + +La fonction CSS **`saturate()`** permet d'accentuer ou de réduire la saturation d'une image. La valeur obtenue par cette fonction est une valeur de type [``](/fr/docs/Web/CSS/filter-function). + +{{EmbedInteractiveExample("pages/css/function-saturate.html")}} + +## Syntaxe + +```css +saturate(multiplicateur) +``` + +### Paramètres + +- `multiplicateur` + - : L'intensité de la modification sous la forme d'un nombre ([``](/fr/docs/Web/CSS/number)) ou d'un pourcentage ([``](/fr/docs/Web/CSS/percentage)). Une valeur inférieure à `100%` réduira la saturation et une valeur supérieure accentuera la saturation. Une valeur de `0%` désaturera complètement l'image alors qu'une valeur de `100%` laissera l'image inchangée. Lors d'une interpolation, la valeur par défaut est `1`. + +## Exemples + +### Exemples de valeurs correctes pour saturate() + +```css +saturate(0); /* Complètement sous-saturée */ +saturate(.4); /* Sous-saturée à 40% */ +saturate(100%); /* Aucun effet */ +saturate(200%); /* Saturation doublée */ +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [``](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées + - [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) + - [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) + - [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) + - [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) + - [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) + - [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) + - [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) + - [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) + - [`sepia()`](/fr/docs/Web/CSS/filter-function/sepia()) diff --git a/files/fr/web/css/filter-function/sepia()/index.md b/files/fr/web/css/filter-function/sepia()/index.md deleted file mode 100644 index 565a8f60a4..0000000000 --- a/files/fr/web/css/filter-function/sepia()/index.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: sepia() -slug: Web/CSS/filter-function/sepia() -translation_of: Web/CSS/filter-function/sepia() -browser-compat: css.types.filter-function.sepia ---- -{{cssref}} - -La fonction CSS **`sepia()`** convertit une image en sépia, lui donnant un aspect plus jaune/marron, voire vielli. Le résultat obtenu est une valeur de type [``](/fr/docs/Web/CSS/filter-function). - -{{EmbedInteractiveExample("pages/css/function-sepia.html")}} - -## Syntaxe - -```css -sepia(multiplicateur) -``` -### Paramètres - -- `multiplicateur` - - : L'intensité de la conversion indiquée sous la forme d'un nombre ([``](/fr/docs/Web/CSS/number)) ou d'un pourcentage ([``](/fr/docs/Web/CSS/percentage)). Une valeur de `100%` permettra d'obtenir une image complètement sépia tandis qu'une valeur de `0%` laissera l'image inchangée. Les valeurs entre `0%` et `100%` représenteront des conversions proportionnelles. Lors d'une interpolation, la valeur par défaut sera `0`. - -## Exemples - -### Exemples de valeurs correctes pour sepia() - -```css -sepia(0); /* Aucun effet */ -sepia(.65); /* 65% de sépia */ -sepia(100%); /* Complètement sépia */ -``` - -## Spécifications - -{{Specifications}} - -## Compatibilité des navigateurs - -{{Compat}} - -## Voir aussi - -- [``](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées - - [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) - - [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) - - [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) - - [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) - - [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) - - [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) - - [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) - - [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) - - [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) \ No newline at end of file diff --git a/files/fr/web/css/filter-function/sepia/index.md b/files/fr/web/css/filter-function/sepia/index.md new file mode 100644 index 0000000000..8ad82cdad6 --- /dev/null +++ b/files/fr/web/css/filter-function/sepia/index.md @@ -0,0 +1,53 @@ +--- +title: sepia() +slug: Web/CSS/filter-function/sepia +translation_of: Web/CSS/filter-function/sepia() +original_slug: Web/CSS/filter-function/sepia() +browser-compat: css.types.filter-function.sepia +--- +{{cssref}} + +La fonction CSS **`sepia()`** convertit une image en sépia, lui donnant un aspect plus jaune/marron, voire vielli. Le résultat obtenu est une valeur de type [``](/fr/docs/Web/CSS/filter-function). + +{{EmbedInteractiveExample("pages/css/function-sepia.html")}} + +## Syntaxe + +```css +sepia(multiplicateur) +``` +### Paramètres + +- `multiplicateur` + - : L'intensité de la conversion indiquée sous la forme d'un nombre ([``](/fr/docs/Web/CSS/number)) ou d'un pourcentage ([``](/fr/docs/Web/CSS/percentage)). Une valeur de `100%` permettra d'obtenir une image complètement sépia tandis qu'une valeur de `0%` laissera l'image inchangée. Les valeurs entre `0%` et `100%` représenteront des conversions proportionnelles. Lors d'une interpolation, la valeur par défaut sera `0`. + +## Exemples + +### Exemples de valeurs correctes pour sepia() + +```css +sepia(0); /* Aucun effet */ +sepia(.65); /* 65% de sépia */ +sepia(100%); /* Complètement sépia */ +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [``](/fr/docs/Web/CSS/filter-function) et les autres fonctions associées + - [`blur()`](/fr/docs/Web/CSS/filter-function/blur()) + - [`brightness()`](/fr/docs/Web/CSS/filter-function/brightness()) + - [`contrast()`](/fr/docs/Web/CSS/filter-function/contrast()) + - [`drop-shadow()`](/fr/docs/Web/CSS/filter-function/drop-shadow()) + - [`grayscale()`](/fr/docs/Web/CSS/filter-function/grayscale()) + - [`hue-rotate()`](/fr/docs/Web/CSS/filter-function/hue-rotate()) + - [`invert()`](/fr/docs/Web/CSS/filter-function/invert()) + - [`opacity()`](/fr/docs/Web/CSS/filter-function/opacity()) + - [`saturate()`](/fr/docs/Web/CSS/filter-function/saturate()) diff --git a/files/fr/web/css/gradient/linear-gradient()/index.md b/files/fr/web/css/gradient/linear-gradient()/index.md deleted file mode 100644 index 7889def802..0000000000 --- a/files/fr/web/css/gradient/linear-gradient()/index.md +++ /dev/null @@ -1,194 +0,0 @@ ---- -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 [``](/fr/docs/Web/CSS/gradient) qui est un type spécial d'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 - -- `` - - - : 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. - -- [``](/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. -- `` - - : Un arrêt de couleur indiqué par une valeur [``](/fr/docs/Web/CSS/color) suivie d'une ou deux positions d'arrêt (chacune étant indiquée comme un pourcentage ([``](/fr/docs/Web/CSS/percentage)) ou une longueur ([``](/fr/docs/Web/CSS/length)) le long de l'axe du dégradé). -- `` - - : 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 `` est un sous-type du type ``, 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 [``](/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é. - -![linear-gradient.png](linear-gradient.png) - -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 ([``](/fr/docs/Web/CSS/length)) ou un pourcentage ([``](/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()) -- [``](/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/gradient/linear-gradient/index.md b/files/fr/web/css/gradient/linear-gradient/index.md new file mode 100644 index 0000000000..bc68bac403 --- /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 +original_slug: 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 [``](/fr/docs/Web/CSS/gradient) qui est un type spécial d'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 + +- `` + + - : 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. + +- [``](/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. +- `` + - : Un arrêt de couleur indiqué par une valeur [``](/fr/docs/Web/CSS/color) suivie d'une ou deux positions d'arrêt (chacune étant indiquée comme un pourcentage ([``](/fr/docs/Web/CSS/percentage)) ou une longueur ([``](/fr/docs/Web/CSS/length)) le long de l'axe du dégradé). +- `` + - : 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 `` est un sous-type du type ``, 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 [``](/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é. + +![linear-gradient.png](linear-gradient.png) + +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 ([``](/fr/docs/Web/CSS/length)) ou un pourcentage ([``](/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()) +- [``](/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/max()/index.md b/files/fr/web/css/max()/index.md deleted file mode 100644 index c8d0c06732..0000000000 --- a/files/fr/web/css/max()/index.md +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: max() -slug: Web/CSS/max() -tags: - - CSS - - Fonction - - Reference -translation_of: Web/CSS/max() ---- -{{CSSRef}} - -La fonction CSS **`max()`** permet d'obtenir la plus grande valeurs parmi une liste d'expressions, séparées par des virgules afin d'utiliser ce maximum comme valeur d'une propriété CSS. La fonction `max()` peut être utilisée à tout endroit où une valeur de type {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<percentage>")}}, {{cssxref("<number>")}} ou {{cssxref("<integer>")}} est autorisée. - -```css -/* property: max(expression [, expression]) */ -width: max(10vw, 4em, 80px); -``` - -Dans l'exemple précédent, la largeur mesurera au moins 80 pixels de large, sera plus large si la zone d'affichage (_viewport_) est plus large que 800 pixels ou si un `em` vaut plus que 20 pixels de large. Autrement dit, la valeur fournie `max()` est calculée comme un seuil et généralement, on aura un seuil minimal dans une expression `max()` (ce qui peut paraître contradictoire à juste titre). - -## Syntaxe - -La fonction `max()` prend comme arguments une ou plusieurs expressions, séparées par des virgules. Elle renvoie comme valeur le plus grand résultat des évaluations des expressions passées en arguments. - -Les expressions passées à cette fonction peuvent utiliser des fonctions mathématiques (cf. {{CSSxRef("calc", "calc()")}}), des valeurs littérales ou d'autres expressions (ex. avec [`attr()`](/fr/docs/Web/CSS/attr)). Il est nécessaire que ces expressions fournissent une valeur d'un type valide (ex. {{cssxref("<length>")}}). - -Il est tout à fait possible de combiner des valeurs avec différentes unités dans les expressions passées en arguments. On peut également utiliser des parenthèses à l'intérieur des expressions afin de s'assurer de la précédence des opérateurs. - -### Notes - -- Les expressions mathématiques qui utilisent des pourcentages pour les hauteurs et largeurs de colonnes de tableaux, de groupes de colonnes de tableaux, pour les lignes de tableaux, pour les groupes de lignes de tableaux et pour les cellules de tableau seront considérées comme `auto` si le tableau suit une disposition automatique ou fixée. -- Il est possible d'imbriquer des fonctions `max()` et `min()` dans les expressions et d'utiliser les opérateurs mathématiques d'addition, soustraction, multiplication, division sans nécessairement recourir à `calc()`. - -### Syntaxe formelle - -{{csssyntax}} - -## Exemples - -### Garantir une taille minimale pour des images - -`max()` permet de simplifier la définition d'une taille **minimale**, 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 plus larges, sans dépasser 300 pixels et sans avoir à utiliser des requêtes média. - -#### CSS - -```css -.logo { - width: max(50vw, 300px); -} -``` - -#### HTML - -```html - -``` - -#### Résultat - -{{EmbedLiveSample('Garantir_une_taille_minimale_pour_des_images', 'auto', '60')}} - -Avec cet exemple, le logo sera au moins large de 300 pixels et sera plus large afin d'occuper la moitié de la zone d'affichage si le _viewport_ devient plus large que 600 pixels. - -### Fixer une taille minimale pour une police - -On peut également utiliser `max()` pour définir la taille d'une police et fixer un seuil minimal pour garantir une certaine lisibilité. - -#### CSS - -```css -h1 { - font-size: 2rem; -} -h1.responsive { - font-size: max(4vw, 2em, 2rem); -} -``` - -Avec ces règles, la valeur pour `font-size` vaudra au moins `2rems` ou deux fois la taille par défaut de la police sur la page. - -#### HTML - -```html -

Ce texte est toujours lisible mais sa taille ne change pas.

-

Ce texte est toujours lisible et s'adapte dans une certaine mesure.

-``` - -#### Résultat - -{{EmbedLiveSample('Fixer_une_taille_minimale_pour_une_police', '700', '300')}} - -## Spécifications - -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------ | -------------------------------- | -------------------- | -| {{SpecName('CSS4 Values', '#calc-notation', 'max()')}} | {{Spec2('CSS4 Values')}} | Définition initiale. | - -## Compatibilité des navigateurs - -{{Compat("css.types.max")}} - -## Voir aussi - -- {{CSSxRef("calc", "calc()")}} -- {{CSSxRef("clamp", "clamp()")}} -- {{CSSxRef("min", "min()")}} -- [Valeurs et unités en CSS](/fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units) diff --git a/files/fr/web/css/max/index.md b/files/fr/web/css/max/index.md new file mode 100644 index 0000000000..b4453d63dd --- /dev/null +++ b/files/fr/web/css/max/index.md @@ -0,0 +1,108 @@ +--- +title: max() +slug: Web/CSS/max +tags: + - CSS + - Fonction + - Reference +translation_of: Web/CSS/max() +original_slug: Web/CSS/max() +--- +{{CSSRef}} + +La fonction CSS **`max()`** permet d'obtenir la plus grande valeurs parmi une liste d'expressions, séparées par des virgules afin d'utiliser ce maximum comme valeur d'une propriété CSS. La fonction `max()` peut être utilisée à tout endroit où une valeur de type {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<percentage>")}}, {{cssxref("<number>")}} ou {{cssxref("<integer>")}} est autorisée. + +```css +/* property: max(expression [, expression]) */ +width: max(10vw, 4em, 80px); +``` + +Dans l'exemple précédent, la largeur mesurera au moins 80 pixels de large, sera plus large si la zone d'affichage (_viewport_) est plus large que 800 pixels ou si un `em` vaut plus que 20 pixels de large. Autrement dit, la valeur fournie `max()` est calculée comme un seuil et généralement, on aura un seuil minimal dans une expression `max()` (ce qui peut paraître contradictoire à juste titre). + +## Syntaxe + +La fonction `max()` prend comme arguments une ou plusieurs expressions, séparées par des virgules. Elle renvoie comme valeur le plus grand résultat des évaluations des expressions passées en arguments. + +Les expressions passées à cette fonction peuvent utiliser des fonctions mathématiques (cf. {{CSSxRef("calc", "calc()")}}), des valeurs littérales ou d'autres expressions (ex. avec [`attr()`](/fr/docs/Web/CSS/attr)). Il est nécessaire que ces expressions fournissent une valeur d'un type valide (ex. {{cssxref("<length>")}}). + +Il est tout à fait possible de combiner des valeurs avec différentes unités dans les expressions passées en arguments. On peut également utiliser des parenthèses à l'intérieur des expressions afin de s'assurer de la précédence des opérateurs. + +### Notes + +- Les expressions mathématiques qui utilisent des pourcentages pour les hauteurs et largeurs de colonnes de tableaux, de groupes de colonnes de tableaux, pour les lignes de tableaux, pour les groupes de lignes de tableaux et pour les cellules de tableau seront considérées comme `auto` si le tableau suit une disposition automatique ou fixée. +- Il est possible d'imbriquer des fonctions `max()` et `min()` dans les expressions et d'utiliser les opérateurs mathématiques d'addition, soustraction, multiplication, division sans nécessairement recourir à `calc()`. + +### Syntaxe formelle + +{{csssyntax}} + +## Exemples + +### Garantir une taille minimale pour des images + +`max()` permet de simplifier la définition d'une taille **minimale**, 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 plus larges, sans dépasser 300 pixels et sans avoir à utiliser des requêtes média. + +#### CSS + +```css +.logo { + width: max(50vw, 300px); +} +``` + +#### HTML + +```html + +``` + +#### Résultat + +{{EmbedLiveSample('Garantir_une_taille_minimale_pour_des_images', 'auto', '60')}} + +Avec cet exemple, le logo sera au moins large de 300 pixels et sera plus large afin d'occuper la moitié de la zone d'affichage si le _viewport_ devient plus large que 600 pixels. + +### Fixer une taille minimale pour une police + +On peut également utiliser `max()` pour définir la taille d'une police et fixer un seuil minimal pour garantir une certaine lisibilité. + +#### CSS + +```css +h1 { + font-size: 2rem; +} +h1.responsive { + font-size: max(4vw, 2em, 2rem); +} +``` + +Avec ces règles, la valeur pour `font-size` vaudra au moins `2rems` ou deux fois la taille par défaut de la police sur la page. + +#### HTML + +```html +

Ce texte est toujours lisible mais sa taille ne change pas.

+

Ce texte est toujours lisible et s'adapte dans une certaine mesure.

+``` + +#### Résultat + +{{EmbedLiveSample('Fixer_une_taille_minimale_pour_une_police', '700', '300')}} + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------ | -------------------------------- | -------------------- | +| {{SpecName('CSS4 Values', '#calc-notation', 'max()')}} | {{Spec2('CSS4 Values')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("css.types.max")}} + +## Voir aussi + +- {{CSSxRef("calc", "calc()")}} +- {{CSSxRef("clamp", "clamp()")}} +- {{CSSxRef("min", "min()")}} +- [Valeurs et unités en CSS](/fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units) diff --git a/files/fr/web/css/min()/index.md b/files/fr/web/css/min()/index.md deleted file mode 100644 index 137a90ffc8..0000000000 --- a/files/fr/web/css/min()/index.md +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: min() -slug: Web/CSS/min() -translation_of: Web/CSS/min() ---- -{{CSSRef}} - -La fonction CSS **`min()`** permet d'obtenir la plus petite valeurs parmi une liste d'expressions, séparées par des virgules afin d'utiliser ce minimum comme valeur d'une propriété CSS. La fonction `min()` peut être utilisée à tout endroit où une valeur de type {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<percentage>")}}, {{cssxref("<number>")}} ou {{cssxref("<integer>")}} est autorisée. - -```css -/* property: min(expression [, expression]) */ -width: min(10vw, 4em, 80px); -``` - -Dans l'exemple précédent, la largeur mesurera au plus 80 pixels de large, sera moins large si la zone d'affichage (_viewport_) est moins large que 800 pixels ou si un `em` vaut moins que 20 pixels de large. Autrement dit, la valeur fournie `min()` est calculée comme un seuil et généralement, on aura un seuil maximal dans une expression `min()` (ce qui peut paraître contradictoire à juste titre). - -## Syntaxe - -La fonction `min()` prend comme arguments une ou plusieurs expressions, séparées par des virgules. Elle renvoie comme valeur le plus petit résultat des évaluations des expressions passées en arguments. - -Les expressions passées à cette fonction peuvent utiliser des fonctions mathématiques (cf. {{CSSxRef("calc", "calc()")}}), des valeurs littérales ou d'autres expressions (ex. avec {{CSSxRef("attr", "attr()")}}). Il est nécessaire que ces expressions fournissent une valeur d'un type valide (ex. {{cssxref("<length>")}}). - -Il est tout à fait possible de combiner des valeurs avec différentes unités dans les expressions passées en arguments. On peut également utiliser des parenthèses à l'intérieur des expressions afin de s'assurer de la précédence des opérateurs. - -### Notes - -- Les expressions mathématiques qui utilisent des pourcentages pour les hauteurs et largeurs de colonnes de tableaux, de groupes de colonnes de tableaux, pour les lignes de tableaux, pour les groupes de lignes de tableaux et pour les cellules de tableau seront considérées comme `auto` si le tableau suit une disposition automatique ou fixée. -- Il est possible d'imbriquer des fonctions `min()` et `min()` dans les expressions et d'utiliser les opérateurs mathématiques d'addition, soustraction, multiplication, division sans nécessairement recourir à `calc()`. - -### Syntaxe formelle - -{{csssyntax}} - -## Exemples - -### 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. - -#### CSS - -```css -input, label { - padding: 2px; - box-sizing: border-box; - display: inline-block; - width: min(40%, 400px); - background-color: pink; -} - -form { - margin: 4px; - border: 1px solid black; - padding: 4px; -} -``` - -On a ici la règle qui s'applique au formulaire et qui occupe 100% de la largeur de son parent. On déclare avec `min()` que la largeur doit mesurer au plus 400 pixels ou 40% de la largeur du formulaire. Autrement dit, la taille la plus grande que pourra atteindre le champ et le libellé sera 400 pixels. La largeur la plus étroite sera nécessairement 40% (ce qui peut être tout petit sur l'affichage d'une montre par exemple). - -#### HTML - -```html -
- - -
-``` - -{{EmbedLiveSample("Définir_une_taille_maximale_pour_un_champ_de_saisie_et_son_libellé", '100%', '110')}} - -## Accessibilité - -Lorsqu'on utilise `min()` afin de contrôler la taille du texte, il faut s'assurer que le texte puisse toujours être suffisamment grand pour être lisible. Pour cela, on peut imbriquer l'appel à `min()` dans [`max()`](/fr/docs/Web/CSS/max) utilisant [une unité de longueur relative](/fr/docs/Web/CSS/length#Unités_de_longueur_relatives) en deuxième argument afin de garantir une lisibilité minimale : - -```css -small { - font-size: max(min(0.5vw, 0.5em), 1rem); -} -``` - -On aura ainsi une taille minimale de `1rem` et la taille du texte qui se met à l'échelle si on zoome sur la page. - -- [Comprendre les règles 1.4 du WCAG](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) (MDN) -- [Comprendre le critère de réussite 1.4.4 du WCAG 2.0 (W3C)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html) - -## Spécifications - -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------ | -------------------------------- | ------------ | -| {{SpecName('CSS4 Values', '#calc-notation', 'min()')}} | {{Spec2('CSS4 Values')}} | | - -## Compatibilité des navigateurs - -{{Compat("css.types.min")}} - -## Voir aussi - -- {{CSSxRef("calc", "calc()")}} -- {{CSSxRef("clamp", "clamp()")}} -- {{CSSxRef("max", "max()")}} -- [Valeurs et unités en CSS](/fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units) diff --git a/files/fr/web/css/min/index.md b/files/fr/web/css/min/index.md new file mode 100644 index 0000000000..e2b7eec384 --- /dev/null +++ b/files/fr/web/css/min/index.md @@ -0,0 +1,102 @@ +--- +title: min() +slug: Web/CSS/min +translation_of: Web/CSS/min() +original_slug: Web/CSS/min() +--- +{{CSSRef}} + +La fonction CSS **`min()`** permet d'obtenir la plus petite valeurs parmi une liste d'expressions, séparées par des virgules afin d'utiliser ce minimum comme valeur d'une propriété CSS. La fonction `min()` peut être utilisée à tout endroit où une valeur de type {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<percentage>")}}, {{cssxref("<number>")}} ou {{cssxref("<integer>")}} est autorisée. + +```css +/* property: min(expression [, expression]) */ +width: min(10vw, 4em, 80px); +``` + +Dans l'exemple précédent, la largeur mesurera au plus 80 pixels de large, sera moins large si la zone d'affichage (_viewport_) est moins large que 800 pixels ou si un `em` vaut moins que 20 pixels de large. Autrement dit, la valeur fournie `min()` est calculée comme un seuil et généralement, on aura un seuil maximal dans une expression `min()` (ce qui peut paraître contradictoire à juste titre). + +## Syntaxe + +La fonction `min()` prend comme arguments une ou plusieurs expressions, séparées par des virgules. Elle renvoie comme valeur le plus petit résultat des évaluations des expressions passées en arguments. + +Les expressions passées à cette fonction peuvent utiliser des fonctions mathématiques (cf. {{CSSxRef("calc", "calc()")}}), des valeurs littérales ou d'autres expressions (ex. avec {{CSSxRef("attr", "attr()")}}). Il est nécessaire que ces expressions fournissent une valeur d'un type valide (ex. {{cssxref("<length>")}}). + +Il est tout à fait possible de combiner des valeurs avec différentes unités dans les expressions passées en arguments. On peut également utiliser des parenthèses à l'intérieur des expressions afin de s'assurer de la précédence des opérateurs. + +### Notes + +- Les expressions mathématiques qui utilisent des pourcentages pour les hauteurs et largeurs de colonnes de tableaux, de groupes de colonnes de tableaux, pour les lignes de tableaux, pour les groupes de lignes de tableaux et pour les cellules de tableau seront considérées comme `auto` si le tableau suit une disposition automatique ou fixée. +- Il est possible d'imbriquer des fonctions `min()` et `min()` dans les expressions et d'utiliser les opérateurs mathématiques d'addition, soustraction, multiplication, division sans nécessairement recourir à `calc()`. + +### Syntaxe formelle + +{{csssyntax}} + +## Exemples + +### 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. + +#### CSS + +```css +input, label { + padding: 2px; + box-sizing: border-box; + display: inline-block; + width: min(40%, 400px); + background-color: pink; +} + +form { + margin: 4px; + border: 1px solid black; + padding: 4px; +} +``` + +On a ici la règle qui s'applique au formulaire et qui occupe 100% de la largeur de son parent. On déclare avec `min()` que la largeur doit mesurer au plus 400 pixels ou 40% de la largeur du formulaire. Autrement dit, la taille la plus grande que pourra atteindre le champ et le libellé sera 400 pixels. La largeur la plus étroite sera nécessairement 40% (ce qui peut être tout petit sur l'affichage d'une montre par exemple). + +#### HTML + +```html +
+ + +
+``` + +{{EmbedLiveSample("Définir_une_taille_maximale_pour_un_champ_de_saisie_et_son_libellé", '100%', '110')}} + +## Accessibilité + +Lorsqu'on utilise `min()` afin de contrôler la taille du texte, il faut s'assurer que le texte puisse toujours être suffisamment grand pour être lisible. Pour cela, on peut imbriquer l'appel à `min()` dans [`max()`](/fr/docs/Web/CSS/max) utilisant [une unité de longueur relative](/fr/docs/Web/CSS/length#Unités_de_longueur_relatives) en deuxième argument afin de garantir une lisibilité minimale : + +```css +small { + font-size: max(min(0.5vw, 0.5em), 1rem); +} +``` + +On aura ainsi une taille minimale de `1rem` et la taille du texte qui se met à l'échelle si on zoome sur la page. + +- [Comprendre les règles 1.4 du WCAG](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) (MDN) +- [Comprendre le critère de réussite 1.4.4 du WCAG 2.0 (W3C)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html) + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------ | -------------------------------- | ------------ | +| {{SpecName('CSS4 Values', '#calc-notation', 'min()')}} | {{Spec2('CSS4 Values')}} | | + +## Compatibilité des navigateurs + +{{Compat("css.types.min")}} + +## Voir aussi + +- {{CSSxRef("calc", "calc()")}} +- {{CSSxRef("clamp", "clamp()")}} +- {{CSSxRef("max", "max()")}} +- [Valeurs et unités en CSS](/fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units) diff --git a/files/fr/web/css/minmax()/index.md b/files/fr/web/css/minmax()/index.md deleted file mode 100644 index 6d9a7f6dfa..0000000000 --- a/files/fr/web/css/minmax()/index.md +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: minmax() -slug: Web/CSS/minmax() -translation_of: Web/CSS/minmax() ---- -{{CSSRef}} - -La [fonction CSS](/fr/docs/Web/CSS/CSS_Functions) **`minmax()`** définit un intervalle de taille supérieure ou égale à _min_ et inférieure ou égale à _max_. Elle est utilisée avec [les grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout). - -{{EmbedInteractiveExample("pages/css/function-minmax.html")}} - -## Syntaxe - -```css -/* Valeurs de type , */ -minmax(200px, 1fr) -minmax(400px, 50%) -minmax(30%, 300px) -minmax(100px, max-content) -minmax(min-content, 400px) -minmax(max-content, auto) -minmax(auto, 300px) -minmax(min-content, auto) - -/* Valeurs de type , */ -minmax(200px, 1fr) -minmax(30%, 300px) -minmax(400px, 50%) -minmax(50%, min-content) -minmax(300px, max-content) -minmax(200px, auto) - -/* Valeurs de type , */ -minmax(400px, 50%) -minmax(30%, 300px) -minmax(min-content, 200px) -minmax(max-content, 200px) -minmax(auto, 300px) -``` - -`minmax()` est une fonction qui prend deux paramètres, _min_ et _max_. - -Chaque paramètre peut être une longueur (type ``), un pourcentage (type ``), une valeur de type `` ou l'un des mots-clés `max-content`, `min-content`, ou `auto`. - -Si _max_ est inférieur à _min_, alors _max_ sera ignoré et `minmax(min,max)` sera considéré comme _min_. Utilisée comme valeur maximale, une valeur de type {{cssxref("flex_value","<flex>")}} définit le facteur de flexibilité de la piste de la grille ; une telle valeur ne peut pas être utilisée comme minimum. - -### Valeurs - -- {{cssxref("<length>")}} - - : Une longueur non-négative. -- {{cssxref("<percentage>")}} - - : Un pourcentage non-négatif. Cette valeur est relative à la taille en incise (_inline_) du conteneur de grille pour les pistes en colonnes et relative à la taille en bloc du conteneur de grille pour les pistes en lignes. Si la taille du conteneur de grille dépend de la taille de ses pistes, cette valeur `` sera traitée comme `auto`. L'agent utilisateur pourra ajuster les contributions à la piste de taille intrinsèques selon la taille du conteneur de grille et augmenter la taille finale de la piste d'une quantité minimale pour respecter le pourcentage. -- {{cssxref("<flex>")}} - - : Une valeur non-négative avec l'unité `fr` qui indique le facteur de flexibilité/extensibilité de la piste. Chaque piste dimensionnée avec une valeur de type `` occupera une part de l'espace restant proportionnellement à son coefficient de flexibilité. -- `max-content` - - : Représente la plus grande contribution max-content pour les objets de la grille qui occupent la piste. -- `min-content` - - : Représente la plus grande contribution min-content pour les objets de la grille qui occupent la piste. -- `auto` - - : Utilisée comme maximum, cette valeur agira comme `max-content`. Utilisée comme minimum, elle représentera la plus grande des tailles minimales (définies par {{cssxref("min-width")}}/{{cssxref("min-height")}}) des objets de la grille qui occupent la piste. - -### Syntaxe formelle - -{{csssyntax}} - -### Propriétés CSS associées - -`minmax()` peut être utilisée pour les propriétés suivantes : - -- [grid-template-columns](/fr/docs/Web/CSS/grid-template-columns) -- [grid-template-rows](/fr/docs/Web/CSS/grid-template-rows) -- [grid-auto-columns](/fr/docs/Web/CSS/grid-auto-columns) -- [grid-auto-rows](/fr/docs/Web/CSS/grid-auto-rows) - -## Exemples - -### CSS - -```css -#container { - display: grid; - grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px; - grid-gap: 5px; - box-sizing: border-box; - height: 200px; - width: 100%; - background-color: #8cffa0; - padding: 10px; -} - -#container > div { - background-color: #8ca0ff; - padding: 5px; -} -``` - -### HTML - -```html -
-
- Aussi large que le contenu, large d'au plus 300 pixels. -
-
- Item flexible mais dont la largeur vaut au moins 200 pixels. -
-
- Item avec une largeur de 150 pixels. -
-
-``` - -### Résultat - -{{EmbedLiveSample("Exemples", "100%", 200)}} - -## Spécifications - -| Spécification | État | Commentaires | -| ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | -| {{SpecName("CSS Grid", "#valdef-grid-template-columns-minmax", "minmax()")}} | {{Spec2("CSS Grid")}} | Définition initiale. | - -## Compatibilité des navigateurs - -{{Compat("css.properties.grid-template-columns.minmax")}} - -## Voir aussi - -- Guide sur les grilles CSS : _[Concepts de bases pour le dimensionnement des pistes avec minmax()]()_ -- [Valeurs logiques, modes d'écriture et grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes) -- Tutoriel vidéo (en anglais) : [Introduction à minmax()](http://gridbyexample.com/video/series-minmax/) diff --git a/files/fr/web/css/minmax/index.md b/files/fr/web/css/minmax/index.md new file mode 100644 index 0000000000..19cc34bd86 --- /dev/null +++ b/files/fr/web/css/minmax/index.md @@ -0,0 +1,132 @@ +--- +title: minmax() +slug: Web/CSS/minmax +translation_of: Web/CSS/minmax() +original_slug: Web/CSS/minmax() +--- +{{CSSRef}} + +La [fonction CSS](/fr/docs/Web/CSS/CSS_Functions) **`minmax()`** définit un intervalle de taille supérieure ou égale à _min_ et inférieure ou égale à _max_. Elle est utilisée avec [les grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout). + +{{EmbedInteractiveExample("pages/css/function-minmax.html")}} + +## Syntaxe + +```css +/* Valeurs de type , */ +minmax(200px, 1fr) +minmax(400px, 50%) +minmax(30%, 300px) +minmax(100px, max-content) +minmax(min-content, 400px) +minmax(max-content, auto) +minmax(auto, 300px) +minmax(min-content, auto) + +/* Valeurs de type , */ +minmax(200px, 1fr) +minmax(30%, 300px) +minmax(400px, 50%) +minmax(50%, min-content) +minmax(300px, max-content) +minmax(200px, auto) + +/* Valeurs de type , */ +minmax(400px, 50%) +minmax(30%, 300px) +minmax(min-content, 200px) +minmax(max-content, 200px) +minmax(auto, 300px) +``` + +`minmax()` est une fonction qui prend deux paramètres, _min_ et _max_. + +Chaque paramètre peut être une longueur (type ``), un pourcentage (type ``), une valeur de type `` ou l'un des mots-clés `max-content`, `min-content`, ou `auto`. + +Si _max_ est inférieur à _min_, alors _max_ sera ignoré et `minmax(min,max)` sera considéré comme _min_. Utilisée comme valeur maximale, une valeur de type {{cssxref("flex_value","<flex>")}} définit le facteur de flexibilité de la piste de la grille ; une telle valeur ne peut pas être utilisée comme minimum. + +### Valeurs + +- {{cssxref("<length>")}} + - : Une longueur non-négative. +- {{cssxref("<percentage>")}} + - : Un pourcentage non-négatif. Cette valeur est relative à la taille en incise (_inline_) du conteneur de grille pour les pistes en colonnes et relative à la taille en bloc du conteneur de grille pour les pistes en lignes. Si la taille du conteneur de grille dépend de la taille de ses pistes, cette valeur `` sera traitée comme `auto`. L'agent utilisateur pourra ajuster les contributions à la piste de taille intrinsèques selon la taille du conteneur de grille et augmenter la taille finale de la piste d'une quantité minimale pour respecter le pourcentage. +- {{cssxref("<flex>")}} + - : Une valeur non-négative avec l'unité `fr` qui indique le facteur de flexibilité/extensibilité de la piste. Chaque piste dimensionnée avec une valeur de type `` occupera une part de l'espace restant proportionnellement à son coefficient de flexibilité. +- `max-content` + - : Représente la plus grande contribution max-content pour les objets de la grille qui occupent la piste. +- `min-content` + - : Représente la plus grande contribution min-content pour les objets de la grille qui occupent la piste. +- `auto` + - : Utilisée comme maximum, cette valeur agira comme `max-content`. Utilisée comme minimum, elle représentera la plus grande des tailles minimales (définies par {{cssxref("min-width")}}/{{cssxref("min-height")}}) des objets de la grille qui occupent la piste. + +### Syntaxe formelle + +{{csssyntax}} + +### Propriétés CSS associées + +`minmax()` peut être utilisée pour les propriétés suivantes : + +- [grid-template-columns](/fr/docs/Web/CSS/grid-template-columns) +- [grid-template-rows](/fr/docs/Web/CSS/grid-template-rows) +- [grid-auto-columns](/fr/docs/Web/CSS/grid-auto-columns) +- [grid-auto-rows](/fr/docs/Web/CSS/grid-auto-rows) + +## Exemples + +### CSS + +```css +#container { + display: grid; + grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px; + grid-gap: 5px; + box-sizing: border-box; + height: 200px; + width: 100%; + background-color: #8cffa0; + padding: 10px; +} + +#container > div { + background-color: #8ca0ff; + padding: 5px; +} +``` + +### HTML + +```html +
+
+ Aussi large que le contenu, large d'au plus 300 pixels. +
+
+ Item flexible mais dont la largeur vaut au moins 200 pixels. +
+
+ Item avec une largeur de 150 pixels. +
+
+``` + +### Résultat + +{{EmbedLiveSample("Exemples", "100%", 200)}} + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | +| {{SpecName("CSS Grid", "#valdef-grid-template-columns-minmax", "minmax()")}} | {{Spec2("CSS Grid")}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("css.properties.grid-template-columns.minmax")}} + +## Voir aussi + +- Guide sur les grilles CSS : _[Concepts de bases pour le dimensionnement des pistes avec minmax()]()_ +- [Valeurs logiques, modes d'écriture et grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes) +- Tutoriel vidéo (en anglais) : [Introduction à minmax()](http://gridbyexample.com/video/series-minmax/) diff --git a/files/fr/web/css/path()/index.md b/files/fr/web/css/path()/index.md deleted file mode 100644 index fb6b5f61a6..0000000000 --- a/files/fr/web/css/path()/index.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: path() -slug: Web/CSS/path() -translation_of: Web/CSS/path() ---- -{{CSSRef}} - -La [fonction](/fr/docs/Web/CSS/CSS_Functions) [CSS](/fr/docs/Web/CSS) **`path()`** accepte comme paramètre une chaîne représentant un tracé SVG. Elle est utilisée dans les formes CSS et les animations de tracés CSS pour permettre de dessiner une forme. - -## Syntaxe - -```css -path( [[<'fill-rule'>,]?) -``` - -### Paramètres - -- `<'fill-rule'>` - - : La règle de remplissage de l'intérieur du tracé. Les valeurs possibles sont `nonzero` ou `evenodd`. La valeur par défaut est `nonzero`. Voir [fill-rule](/fr/docs/Web/SVG/Attribute/fill-rule) pour plus de détails. -- `` - - : Doit être une [chaîne représentant les données d'un chemin SVG](/fr/docs/Web/SVG/Element/path). - -## Exemples - -### Exemples de valeurs correctes pour path() - -```css -path("M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"); -path(evenodd,"M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"); -``` - -### Utilisation en tant que valeur de offset-path - -La fonction `path()` est utilisée pour créer un tracé à suivre pour l'élément. La modification de l'une de ces valeurs conduira celui-ci à ne pas pouvoir suivre le tracé de façon nette lors de l'animation. - -{{EmbedGHLiveSample("css-examples/path/offset-path.html", '100%', 960)}} - -## Spécifications - -| Spécification | Statut | -| ------------------------------------------------------------------------ | -------------------------------- | -| {{SpecName('CSS Shapes', '#funcdef-path', 'path()')}} | {{Spec2('CSS Shapes')}} | - -## Voir aussi - -- {{cssxref("<shape-outside>")}} -- [Formes CSS](/fr/docs/Web/CSS/CSS_Shapes) -- [Vue d'ensemble des formes CSS](/fr/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes) -- SVG Path Syntax Illustrated Guide - - [SVG Path Syntax Illustrated Guide (en anglais)](https://css-tricks.com/svg-path-syntax-illustrated-guide/) diff --git a/files/fr/web/css/path/index.md b/files/fr/web/css/path/index.md new file mode 100644 index 0000000000..39879b950c --- /dev/null +++ b/files/fr/web/css/path/index.md @@ -0,0 +1,52 @@ +--- +title: path() +slug: Web/CSS/path +translation_of: Web/CSS/path() +original_slug: Web/CSS/path() +--- +{{CSSRef}} + +La [fonction](/fr/docs/Web/CSS/CSS_Functions) [CSS](/fr/docs/Web/CSS) **`path()`** accepte comme paramètre une chaîne représentant un tracé SVG. Elle est utilisée dans les formes CSS et les animations de tracés CSS pour permettre de dessiner une forme. + +## Syntaxe + +```css +path( [[<'fill-rule'>,]?) +``` + +### Paramètres + +- `<'fill-rule'>` + - : La règle de remplissage de l'intérieur du tracé. Les valeurs possibles sont `nonzero` ou `evenodd`. La valeur par défaut est `nonzero`. Voir [fill-rule](/fr/docs/Web/SVG/Attribute/fill-rule) pour plus de détails. +- `` + - : Doit être une [chaîne représentant les données d'un chemin SVG](/fr/docs/Web/SVG/Element/path). + +## Exemples + +### Exemples de valeurs correctes pour path() + +```css +path("M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"); +path(evenodd,"M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"); +``` + +### Utilisation en tant que valeur de offset-path + +La fonction `path()` est utilisée pour créer un tracé à suivre pour l'élément. La modification de l'une de ces valeurs conduira celui-ci à ne pas pouvoir suivre le tracé de façon nette lors de l'animation. + +{{EmbedGHLiveSample("css-examples/path/offset-path.html", '100%', 960)}} + +## Spécifications + +| Spécification | Statut | +| ------------------------------------------------------------------------ | -------------------------------- | +| {{SpecName('CSS Shapes', '#funcdef-path', 'path()')}} | {{Spec2('CSS Shapes')}} | + +## Voir aussi + +- {{cssxref("<shape-outside>")}} +- [Formes CSS](/fr/docs/Web/CSS/CSS_Shapes) +- [Vue d'ensemble des formes CSS](/fr/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes) +- SVG Path Syntax Illustrated Guide + + [SVG Path Syntax Illustrated Guide (en anglais)](https://css-tricks.com/svg-path-syntax-illustrated-guide/) diff --git a/files/fr/web/css/repeat()/index.md b/files/fr/web/css/repeat()/index.md deleted file mode 100644 index 46bb78e832..0000000000 --- a/files/fr/web/css/repeat()/index.md +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: repeat() -slug: Web/CSS/repeat() -translation_of: Web/CSS/repeat() ---- -{{CSSRef}} - -La fonction CSS **`repeat()`** permet de répéter un fragment d'une liste de pistes. Autrement dit, lorsqu'on a une grille avec de nombreuses lignes/colonnes, cela permet de réutiliser un même motif sur la grille. On a alors des règles plus concises. - -Cette fonction peut être utilisée par les propriétés CSS {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}} relatives aux grilles. - -```css -/* Valeurs de type */ -repeat(4, 1fr) -repeat(4, [col-start] 250px [col-end]) -repeat(4, [col-start] 60% [col-end]) -repeat(4, [col-start] 1fr [col-end]) -repeat(4, [col-start] min-content [col-end]) -repeat(4, [col-start] max-content [col-end]) -repeat(4, [col-start] auto [col-end]) -repeat(4, [col-start] minmax(100px, 1fr) [col-end]) -repeat(4, [col-start] fit-content(200px) [col-end]) -repeat(4, 10px [col-start] 30% [col-middle] auto [col-end]) -repeat(4, [col-start] min-content [col-middle] max-content [col-end]) - -/* Valeurs de type */ -repeat(auto-fill, 250px) -repeat(auto-fit, 250px) -repeat(auto-fill, [col-start] 250px [col-end]) -repeat(auto-fit, [col-start] 250px [col-end]) -repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end]) -repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end]) - -/* Valeurs de type */ -repeat(4, 250px) -repeat(4, [col-start] 250px [col-end]) -repeat(4, [col-start] 60% [col-end]) -repeat(4, [col-start] minmax(100px, 1fr) [col-end]) -repeat(4, [col-start] fit-content(200px) [col-end]) -repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end]) -``` - -## Syntaxe - -### Valeurs - -- `` - - : Une longueur positive (cf. le type {{cssxref("<length>")}}). -- `` - - : Un pourcentage (cf. le type {{cssxref("<percentage>")}}) positif qui indique la proportion par rapport à la taille en ligne (c'est-à-dire la dimension qui suit l'axe de lecture) pour les colonnes et par rapport à la taille en bloc (l'axe orthogonal) pour les lignes. Si la taille de la grille est calculée en fonction de la taille des pistes qu'elle contient, `` devra être interprété comme `auto`. L'agent utilisateur peut ajuster les tailles intrinsèques des pistes pour qu'elles remplissent exactement le conteneur et acroître le moins possible la taille finale de la piste pour qu'elle se rapproche du pourcentage souhaité. -- `` - - : Une dimension positive, exprimée en `fr`, qui indique le facteur de flexibilité de la piste (cf. le type {{cssxref("<flex>")}}). Chaque piste flexible partage l'espace de façon proportionnelle avec les autres pistes flexibles. -- `max-content` - - : Cette valeur représente la contribution maximale des éléments qui occupent la piste. -- `min-content` - - : Cette valeur représente la contribution minimale des éléments qui occupent la piste. -- `auto` - - : Utilisée comme maximum, cette valeur se comporte comme `max-content`. Utilisée comme minimum, elle représente la plus grande taille minimale (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}}) des éléments qui occupent la piste. -- `auto-fill` - - : Si le conteneur de la grille possède une taille définie ou maximale sur cet axe, alors le moteur répètera autant que possible le motif pour ne pas déborder de la grille. Si répéter le motif implique de déborder de la grille, il n'est répété qu'une fois. Sinon, si le conteneur de la grille possède une taille minimale sur cet axe, on utilisera le moins de répétitions possible pour atteindre ce minimum. Sinon, la liste de piste n'est répétée qu'une seule fois. -- `auto-fit` - - - : Cette valeur se comporte comme `auto-fill` mais, une fois que les objets sont placés, toutes les pistes répétées qui sont vides sont repliées. Une piste vide est une piste qui ne contient aucun élément ou sur laquelle aucun élément n'intersecte. Toutes les pistes peuvent être repliées si elles sont toutes vides. - - Une piste repliée est traitée comme si elle avait une taille de piste de `0px` (les gouttières sont également repliées de chaque côté). - - Afin de calculer le nombre de pistes automatiquement répétées, l'agent utilisateur arrondit la taille de la piste à une valeur non nulle, propre à l'agent utilisateur (par exemple 1 px), afin d'éviter les divisions par zéros. - -### Syntaxe formelle - -{{csssyntax}} - -## Exemples - -### CSS - -```css -#container { - display: grid; - grid-template-columns: repeat(2, 50px 1fr) 100px; - grid-gap: 5px; - box-sizing: border-box; - height: 200px; - width: 100%; - background-color: #8cffa0; - padding: 10px; -} - -#container > div { - background-color: #8ca0ff; - padding: 5px; -} -``` - -### HTML - -```html -
-
- Un élément qui mesure 50 pixels de large. -
-
- Un élément avec une largeur flexible. -
-
- Un élément qui mesure 50 pixels de large. -
-
- Un élément avec une largeur flexible. -
-
- Un élément non-flexible qui mesure 100 pixels de large. -
-
-``` - -### Résultat - -{{EmbedLiveSample("Exemples", "100%", 200)}} - -## Spécifications - -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------ | ---------------------------- | -------------------- | -| {{SpecName("CSS Grid", "#funcdef-repeat", "repeat()")}} | {{Spec2("CSS Grid")}} | Définition initiale. | - -## Compatibilité des navigateurs - -{{Compat("css.properties.grid-template-columns.repeat")}} diff --git a/files/fr/web/css/repeat/index.md b/files/fr/web/css/repeat/index.md new file mode 100644 index 0000000000..7bab091a7f --- /dev/null +++ b/files/fr/web/css/repeat/index.md @@ -0,0 +1,130 @@ +--- +title: repeat() +slug: Web/CSS/repeat +translation_of: Web/CSS/repeat() +original_slug: Web/CSS/repeat() +--- +{{CSSRef}} + +La fonction CSS **`repeat()`** permet de répéter un fragment d'une liste de pistes. Autrement dit, lorsqu'on a une grille avec de nombreuses lignes/colonnes, cela permet de réutiliser un même motif sur la grille. On a alors des règles plus concises. + +Cette fonction peut être utilisée par les propriétés CSS {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}} relatives aux grilles. + +```css +/* Valeurs de type */ +repeat(4, 1fr) +repeat(4, [col-start] 250px [col-end]) +repeat(4, [col-start] 60% [col-end]) +repeat(4, [col-start] 1fr [col-end]) +repeat(4, [col-start] min-content [col-end]) +repeat(4, [col-start] max-content [col-end]) +repeat(4, [col-start] auto [col-end]) +repeat(4, [col-start] minmax(100px, 1fr) [col-end]) +repeat(4, [col-start] fit-content(200px) [col-end]) +repeat(4, 10px [col-start] 30% [col-middle] auto [col-end]) +repeat(4, [col-start] min-content [col-middle] max-content [col-end]) + +/* Valeurs de type */ +repeat(auto-fill, 250px) +repeat(auto-fit, 250px) +repeat(auto-fill, [col-start] 250px [col-end]) +repeat(auto-fit, [col-start] 250px [col-end]) +repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end]) +repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end]) + +/* Valeurs de type */ +repeat(4, 250px) +repeat(4, [col-start] 250px [col-end]) +repeat(4, [col-start] 60% [col-end]) +repeat(4, [col-start] minmax(100px, 1fr) [col-end]) +repeat(4, [col-start] fit-content(200px) [col-end]) +repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end]) +``` + +## Syntaxe + +### Valeurs + +- `` + - : Une longueur positive (cf. le type {{cssxref("<length>")}}). +- `` + - : Un pourcentage (cf. le type {{cssxref("<percentage>")}}) positif qui indique la proportion par rapport à la taille en ligne (c'est-à-dire la dimension qui suit l'axe de lecture) pour les colonnes et par rapport à la taille en bloc (l'axe orthogonal) pour les lignes. Si la taille de la grille est calculée en fonction de la taille des pistes qu'elle contient, `` devra être interprété comme `auto`. L'agent utilisateur peut ajuster les tailles intrinsèques des pistes pour qu'elles remplissent exactement le conteneur et acroître le moins possible la taille finale de la piste pour qu'elle se rapproche du pourcentage souhaité. +- `` + - : Une dimension positive, exprimée en `fr`, qui indique le facteur de flexibilité de la piste (cf. le type {{cssxref("<flex>")}}). Chaque piste flexible partage l'espace de façon proportionnelle avec les autres pistes flexibles. +- `max-content` + - : Cette valeur représente la contribution maximale des éléments qui occupent la piste. +- `min-content` + - : Cette valeur représente la contribution minimale des éléments qui occupent la piste. +- `auto` + - : Utilisée comme maximum, cette valeur se comporte comme `max-content`. Utilisée comme minimum, elle représente la plus grande taille minimale (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}}) des éléments qui occupent la piste. +- `auto-fill` + - : Si le conteneur de la grille possède une taille définie ou maximale sur cet axe, alors le moteur répètera autant que possible le motif pour ne pas déborder de la grille. Si répéter le motif implique de déborder de la grille, il n'est répété qu'une fois. Sinon, si le conteneur de la grille possède une taille minimale sur cet axe, on utilisera le moins de répétitions possible pour atteindre ce minimum. Sinon, la liste de piste n'est répétée qu'une seule fois. +- `auto-fit` + + - : Cette valeur se comporte comme `auto-fill` mais, une fois que les objets sont placés, toutes les pistes répétées qui sont vides sont repliées. Une piste vide est une piste qui ne contient aucun élément ou sur laquelle aucun élément n'intersecte. Toutes les pistes peuvent être repliées si elles sont toutes vides. + + Une piste repliée est traitée comme si elle avait une taille de piste de `0px` (les gouttières sont également repliées de chaque côté). + + Afin de calculer le nombre de pistes automatiquement répétées, l'agent utilisateur arrondit la taille de la piste à une valeur non nulle, propre à l'agent utilisateur (par exemple 1 px), afin d'éviter les divisions par zéros. + +### Syntaxe formelle + +{{csssyntax}} + +## Exemples + +### CSS + +```css +#container { + display: grid; + grid-template-columns: repeat(2, 50px 1fr) 100px; + grid-gap: 5px; + box-sizing: border-box; + height: 200px; + width: 100%; + background-color: #8cffa0; + padding: 10px; +} + +#container > div { + background-color: #8ca0ff; + padding: 5px; +} +``` + +### HTML + +```html +
+
+ Un élément qui mesure 50 pixels de large. +
+
+ Un élément avec une largeur flexible. +
+
+ Un élément qui mesure 50 pixels de large. +
+
+ Un élément avec une largeur flexible. +
+
+ Un élément non-flexible qui mesure 100 pixels de large. +
+
+``` + +### Résultat + +{{EmbedLiveSample("Exemples", "100%", 200)}} + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------ | ---------------------------- | -------------------- | +| {{SpecName("CSS Grid", "#funcdef-repeat", "repeat()")}} | {{Spec2("CSS Grid")}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("css.properties.grid-template-columns.repeat")}} diff --git a/files/fr/web/css/symbols()/index.md b/files/fr/web/css/symbols()/index.md deleted file mode 100644 index 7cf6303e0a..0000000000 --- a/files/fr/web/css/symbols()/index.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: symbols() -slug: Web/CSS/symbols() -tags: - - CSS - - Fonction - - Reference -translation_of: Web/CSS/symbols() ---- -{{CSSRef}} - -La fonction **`symbols()`** permet de définir des styles pour les compteurs en ligne, directement comme valeur de la propriété CSS. À la différence des styles définis avec {{cssxref("@counter-style")}}, ces styles sont anonymes. La fonction `symbols()` ne possède pas toute la flexibilité offerte par la règle @ {{cssxref("@counter-style")}} mais peut s'avérer utile dans des cas où le style nécessaire n'est utilisé qu'une seule fois et où il n'est pas nécessaire d'utiliser toutes les options fournies par {{cssxref("@counter-style")}}. - -## Syntaxe - - symbols() = symbols( ? [ | ]+ ); - -`` est l'un des mots-clés suivants : - -- `cyclic` : le système utilisera les différentes valeurs les unes à la suite des autres, de façon cyclique. -- `numeric` : le système interprètera les valeurs fournies comme une suite numérique composant un système de numération. -- `alphabetic` : le système interprètera les valeurs fournies comme les chiffres d'un système de numération alphabétique (par exemple : A, B, C, AA, AB, AC, etc.) sans zéro. -- `symbolic` : le système parcourt les différentes valeurs fournies et en affiche une de plus à chaque cycle. -- `fixed` : le système affiche chaque symbole une fois puis poursuit avec les chiffres arabes. - -## Exemples - -### HTML - -```html -
    -
  1. Un
    2. -
  2. Deux
    3. -
  3. Trois
    4. -
  4. Quatre
    5. -
  5. Cinq
    6. -
-``` - -### CSS - -```css -ol { - list-style: symbols(alphabetic "*" "\2020" "\2021"); -} -``` - -### Résultat - -{{EmbedLiveSample("Exemples","100%","100%")}} - -## Spécifications - -| Spécification | Statut | Commentaires | -| -------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- | -| {{SpecName('CSS3 Counter Styles', '#symbols-function', 'symbols()')}} | {{Spec2('CSS3 Counter Styles')}} | Définition initiale. | - -## Voir aussi - -- {{cssxref("@counter-style")}} -- {{cssxref("list-style-type")}} et la propriété raccourcie correspondante : {{cssxref("list-style")}}. diff --git a/files/fr/web/css/symbols/index.md b/files/fr/web/css/symbols/index.md new file mode 100644 index 0000000000..73d62466d7 --- /dev/null +++ b/files/fr/web/css/symbols/index.md @@ -0,0 +1,62 @@ +--- +title: symbols() +slug: Web/CSS/symbols +tags: + - CSS + - Fonction + - Reference +translation_of: Web/CSS/symbols() +original_slug: Web/CSS/symbols() +--- +{{CSSRef}} + +La fonction **`symbols()`** permet de définir des styles pour les compteurs en ligne, directement comme valeur de la propriété CSS. À la différence des styles définis avec {{cssxref("@counter-style")}}, ces styles sont anonymes. La fonction `symbols()` ne possède pas toute la flexibilité offerte par la règle @ {{cssxref("@counter-style")}} mais peut s'avérer utile dans des cas où le style nécessaire n'est utilisé qu'une seule fois et où il n'est pas nécessaire d'utiliser toutes les options fournies par {{cssxref("@counter-style")}}. + +## Syntaxe + + symbols() = symbols( ? [ | ]+ ); + +`` est l'un des mots-clés suivants : + +- `cyclic` : le système utilisera les différentes valeurs les unes à la suite des autres, de façon cyclique. +- `numeric` : le système interprètera les valeurs fournies comme une suite numérique composant un système de numération. +- `alphabetic` : le système interprètera les valeurs fournies comme les chiffres d'un système de numération alphabétique (par exemple : A, B, C, AA, AB, AC, etc.) sans zéro. +- `symbolic` : le système parcourt les différentes valeurs fournies et en affiche une de plus à chaque cycle. +- `fixed` : le système affiche chaque symbole une fois puis poursuit avec les chiffres arabes. + +## Exemples + +### HTML + +```html +
    +
  1. Un
    2. +
  2. Deux
    3. +
  3. Trois
    4. +
  4. Quatre
    5. +
  5. Cinq
    6. +
+``` + +### CSS + +```css +ol { + list-style: symbols(alphabetic "*" "\2020" "\2021"); +} +``` + +### Résultat + +{{EmbedLiveSample("Exemples","100%","100%")}} + +## Spécifications + +| Spécification | Statut | Commentaires | +| -------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- | +| {{SpecName('CSS3 Counter Styles', '#symbols-function', 'symbols()')}} | {{Spec2('CSS3 Counter Styles')}} | Définition initiale. | + +## Voir aussi + +- {{cssxref("@counter-style")}} +- {{cssxref("list-style-type")}} et la propriété raccourcie correspondante : {{cssxref("list-style")}}. diff --git a/files/fr/web/css/transform-function/matrix()/index.md b/files/fr/web/css/transform-function/matrix()/index.md deleted file mode 100644 index 2979ff3099..0000000000 --- a/files/fr/web/css/transform-function/matrix()/index.md +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: matrix() -slug: Web/CSS/transform-function/matrix() -translation_of: Web/CSS/transform-function/matrix() -browser-compat: css.types.transform-function.matrix ---- -{{CSSRef}} - -La fonction **`matrix()`** définit une matrice homogène de transformation, définie par 6 coefficients. Les paramètres de cette fonction sont ces coefficients, dans l'ordre des lignes puis des colonnes, suivis des coefficients de translation. - -`matrix(a, b, c, d, tx, ty)` est une notation raccourcie, équivalente à `matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)`. - -## Syntaxe - -La fonction `matrix()` s'utilise avec 6 valeurs. Les valeurs constantes sont implicites et ne sont pas passées comme paramètres. Les autres paramètres sont décrits dans l'ordre suivant d'abord les colonnes. - -```css -matrix(a, b, c, d, tx, ty) -``` - -### Valeurs - -- `a` `b` `c` `d` - - : Les coefficients de la matrice, de type [``](/fr/docs/Web/CSS/number), qui définissent la transformation linéaire. -- `tx` `ty` - - : Les coefficients de la matrice, de type [``](/fr/docs/Web/CSS/number), qui définissent la translation à appliquer. - -> **Note :** Jusqu'à Firefox 16, Gecko permettait d'utiliser des valeurs [``](/fr/docs/Web/CSS/length) pour les coefficients `tx` et `ty`. - - - - - - - - - - - - - - - - - - - - - -
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
- ac - bd - - actxbdty001 - - actxbdty001 - - ac0txbd0ty00100001 -
[a b c d tx ty]
- -## Exemples - -### HTML - -```html -

toto

-

truc

-``` - -### CSS - -```css -p { - width: 50px; - height: 50px; - background-color: teal; -} - -.transformation{ - transform: matrix(0.87,-0.5,0,0.87,0,1); - background-color: blue; -} -``` - -### Résultat - -{{EmbedLiveSample("Exemples","100%","200")}} - -## Spécifications - -{{Specifications}} - -## Compatibilité des navigateurs - -{{Compat}} - -## Voir aussi - -- [`transform`](/fr/docs/Web/CSS/transform) -- [``](/fr/docs/Web/CSS/transform-function) -- [`matrix3d()`]() -- [Comprendre les matrices de transformations CSS (en anglais)](https://dev.opera.com/articles/understanding-the-css-transforms-matrix/) diff --git a/files/fr/web/css/transform-function/matrix/index.md b/files/fr/web/css/transform-function/matrix/index.md new file mode 100644 index 0000000000..e16352059f --- /dev/null +++ b/files/fr/web/css/transform-function/matrix/index.md @@ -0,0 +1,136 @@ +--- +title: matrix() +slug: Web/CSS/transform-function/matrix +translation_of: Web/CSS/transform-function/matrix() +original_slug: Web/CSS/transform-function/matrix() +browser-compat: css.types.transform-function.matrix +--- +{{CSSRef}} + +La fonction **`matrix()`** définit une matrice homogène de transformation, définie par 6 coefficients. Les paramètres de cette fonction sont ces coefficients, dans l'ordre des lignes puis des colonnes, suivis des coefficients de translation. + +`matrix(a, b, c, d, tx, ty)` est une notation raccourcie, équivalente à `matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)`. + +## Syntaxe + +La fonction `matrix()` s'utilise avec 6 valeurs. Les valeurs constantes sont implicites et ne sont pas passées comme paramètres. Les autres paramètres sont décrits dans l'ordre suivant d'abord les colonnes. + +```css +matrix(a, b, c, d, tx, ty) +``` + +### Valeurs + +- `a` `b` `c` `d` + - : Les coefficients de la matrice, de type [``](/fr/docs/Web/CSS/number), qui définissent la transformation linéaire. +- `tx` `ty` + - : Les coefficients de la matrice, de type [``](/fr/docs/Web/CSS/number), qui définissent la translation à appliquer. + +> **Note :** Jusqu'à Firefox 16, Gecko permettait d'utiliser des valeurs [``](/fr/docs/Web/CSS/length) pour les coefficients `tx` et `ty`. + + + + + + + + + + + + + + + + + + + + + +
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
+ ac + bd + + actxbdty001 + + actxbdty001 + + ac0txbd0ty00100001 +
[a b c d tx ty]
+ +## Exemples + +### HTML + +```html +

toto

+

truc

+``` + +### CSS + +```css +p { + width: 50px; + height: 50px; + background-color: teal; +} + +.transformation{ + transform: matrix(0.87,-0.5,0,0.87,0,1); + background-color: blue; +} +``` + +### Résultat + +{{EmbedLiveSample("Exemples","100%","200")}} + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [`transform`](/fr/docs/Web/CSS/transform) +- [``](/fr/docs/Web/CSS/transform-function) +- [`matrix3d()`]() +- [Comprendre les matrices de transformations CSS (en anglais)](https://dev.opera.com/articles/understanding-the-css-transforms-matrix/) diff --git a/files/fr/web/css/transform-function/matrix3d()/index.md b/files/fr/web/css/transform-function/matrix3d()/index.md deleted file mode 100644 index 6cac4ae944..0000000000 --- a/files/fr/web/css/transform-function/matrix3d()/index.md +++ /dev/null @@ -1,190 +0,0 @@ ---- -title: matrix3d() -slug: Web/CSS/transform-function/matrix3d() -translation_of: Web/CSS/transform-function/matrix3d() -browser-compat: css.types.transform-function.matrix3d ---- -{{CSSRef}} - -La fonction **`matrix3d()`** décrit une transformation en trois dimensions sous la forme d'une matrice homogène (4x4). Les 16 paramètres passés à la fonction sont listés par ligne puis par colonne. Le résultat de cette fonction est une valeur de type [``](/fr/docs/Web/CSS/transform-function). - -## Syntaxe - -La fonction `matrix3d()` s'utilise avec 16 valeurs qui sont décrites dans l'ordre des colonnes. - -```css -matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) -``` - -### Valeurs - -- _a1_ _b1_ _c1_ _d1_ _a2_ _b2_ _c2_ _d2_ _a3_ _b3_ _c3_ _d3_ _d4_ - - : Des valeurs de type [``](/fr/docs/Web/CSS/number) qui sont les coefficients de la matrice définissant la transformation linéaire. -- `a4` `b4 c4` - - : Les coefficients de type [``](/fr/docs/Web/CSS/number) qui définissent la translation à appliquer. - -> **Note :** Jusqu'à Firefox 16, Gecko permettait d'utiliser des valeurs [``](/fr/docs/Web/CSS/length) pour les coefficients `a4`, `b4` et `c4`. - - - - - - - - - - - - - - - - - -
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
- Cette transformation s'applique dans l'espace (3D) et ne peut pas être - représentée en deux dimensions. - - Les matrices exprimées avec des coordonnées cartésiennes ne permettent - pas de représenter des transformations 3D affines car les translations - ne sont pas des transformations linéaires. - - a1a2a3a4b1b2b3b4c1c2c3c4d1d2d3d4 -
- -## Exemples - -### Exemple simple - -#### HTML - -```html -

toto

-

truc

-``` - -#### CSS - -```css -p { - width: 50px; - height: 50px; - background-color: teal; -} - -.transformation{ - transform: matrix3d(0.87,-0.5,0.00,0,0.50,0.87,0.00,0,0,0,1,0,0,0,0,1); - background-color: blue; -} -``` - -#### Résultat - -{{EmbedLiveSample("Exemple_simple","100%","200")}} - -### Translation et homothétie matricielle - -#### HTML - -```html -
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. - Quos quaerat sit soluta, quisquam exercitationem delectus qui unde in facere - necessitatibus aut quia porro dolorem nesciunt enim, at consequuntur aliquam esse? -
-``` - -#### CSS - -```css -html { - width: 100%; -} -body { - height: 100vh; - /* Centering content */ - display: flex; - flex-flow: row wrap; - justify-content: center; - align-content: center; - -} -.foo { - width: 50%; - padding: 1em; - color: white; - background: #ff8c66; - border: 2px dashed black; - text-align: center; - font-family: system-ui, sans-serif; - font-size: 14px; - /* Setting up animation for better demonstration */ - animation: MotionScale 2s alternate linear infinite; -} - -@keyframes MotionScale { - from { - /* - Identity matrix is used as basis here. - The matrix below describes the - following transformations: - Translates every X point by -50px - Translates every Y point by -100px - Translates every Z point by 0 - Scales down by 10% - */ - transform: matrix3d( - 1,0,0,0, - 0,1,0,0, - 0,0,1,0, - -50,-100,0,1.1 - ); - - } - 50% { - transform: matrix3d( - 1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 0,0,0,0.9 - ); - } - to { - transform: matrix3d( - 1,0,0,0, - 0,1,0,0, - 0,0,1,0, - 50,100,0,1.1 - ) - } -} -``` - -#### Résultat - -{{EmbedLiveSample('Translation_et_homothétie_matricielle', '100%', '400px')}} - -## Spécifications - -{{Specifications}} - -## Compatibilité des navigateurs - -{{Compat}} - -## Voir aussi - -- [`transform`](/fr/docs/Web/CSS/transform) -- [``](/fr/docs/Web/CSS/transform-function) -- [Comprendre les matrices de transformations CSS (en anglais)](https://dev.opera.com/articles/understanding-the-css-transforms-matrix/) diff --git a/files/fr/web/css/transform-function/matrix3d/index.md b/files/fr/web/css/transform-function/matrix3d/index.md new file mode 100644 index 0000000000..99a36de797 --- /dev/null +++ b/files/fr/web/css/transform-function/matrix3d/index.md @@ -0,0 +1,191 @@ +--- +title: matrix3d() +slug: Web/CSS/transform-function/matrix3d +translation_of: Web/CSS/transform-function/matrix3d() +original_slug: Web/CSS/transform-function/matrix3d() +browser-compat: css.types.transform-function.matrix3d +--- +{{CSSRef}} + +La fonction **`matrix3d()`** décrit une transformation en trois dimensions sous la forme d'une matrice homogène (4x4). Les 16 paramètres passés à la fonction sont listés par ligne puis par colonne. Le résultat de cette fonction est une valeur de type [``](/fr/docs/Web/CSS/transform-function). + +## Syntaxe + +La fonction `matrix3d()` s'utilise avec 16 valeurs qui sont décrites dans l'ordre des colonnes. + +```css +matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) +``` + +### Valeurs + +- _a1_ _b1_ _c1_ _d1_ _a2_ _b2_ _c2_ _d2_ _a3_ _b3_ _c3_ _d3_ _d4_ + - : Des valeurs de type [``](/fr/docs/Web/CSS/number) qui sont les coefficients de la matrice définissant la transformation linéaire. +- `a4` `b4 c4` + - : Les coefficients de type [``](/fr/docs/Web/CSS/number) qui définissent la translation à appliquer. + +> **Note :** Jusqu'à Firefox 16, Gecko permettait d'utiliser des valeurs [``](/fr/docs/Web/CSS/length) pour les coefficients `a4`, `b4` et `c4`. + + + + + + + + + + + + + + + + + +
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
+ Cette transformation s'applique dans l'espace (3D) et ne peut pas être + représentée en deux dimensions. + + Les matrices exprimées avec des coordonnées cartésiennes ne permettent + pas de représenter des transformations 3D affines car les translations + ne sont pas des transformations linéaires. + + a1a2a3a4b1b2b3b4c1c2c3c4d1d2d3d4 +
+ +## Exemples + +### Exemple simple + +#### HTML + +```html +

toto

+

truc

+``` + +#### CSS + +```css +p { + width: 50px; + height: 50px; + background-color: teal; +} + +.transformation{ + transform: matrix3d(0.87,-0.5,0.00,0,0.50,0.87,0.00,0,0,0,1,0,0,0,0,1); + background-color: blue; +} +``` + +#### Résultat + +{{EmbedLiveSample("Exemple_simple","100%","200")}} + +### Translation et homothétie matricielle + +#### HTML + +```html +
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Quos quaerat sit soluta, quisquam exercitationem delectus qui unde in facere + necessitatibus aut quia porro dolorem nesciunt enim, at consequuntur aliquam esse? +
+``` + +#### CSS + +```css +html { + width: 100%; +} +body { + height: 100vh; + /* Centering content */ + display: flex; + flex-flow: row wrap; + justify-content: center; + align-content: center; + +} +.foo { + width: 50%; + padding: 1em; + color: white; + background: #ff8c66; + border: 2px dashed black; + text-align: center; + font-family: system-ui, sans-serif; + font-size: 14px; + /* Setting up animation for better demonstration */ + animation: MotionScale 2s alternate linear infinite; +} + +@keyframes MotionScale { + from { + /* + Identity matrix is used as basis here. + The matrix below describes the + following transformations: + Translates every X point by -50px + Translates every Y point by -100px + Translates every Z point by 0 + Scales down by 10% + */ + transform: matrix3d( + 1,0,0,0, + 0,1,0,0, + 0,0,1,0, + -50,-100,0,1.1 + ); + + } + 50% { + transform: matrix3d( + 1,0,0,0, + 0,1,0,0, + 0,0,1,0, + 0,0,0,0.9 + ); + } + to { + transform: matrix3d( + 1,0,0,0, + 0,1,0,0, + 0,0,1,0, + 50,100,0,1.1 + ) + } +} +``` + +#### Résultat + +{{EmbedLiveSample('Translation_et_homothétie_matricielle', '100%', '400px')}} + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [`transform`](/fr/docs/Web/CSS/transform) +- [``](/fr/docs/Web/CSS/transform-function) +- [Comprendre les matrices de transformations CSS (en anglais)](https://dev.opera.com/articles/understanding-the-css-transforms-matrix/) diff --git a/files/fr/web/css/transform-function/perspective()/index.md b/files/fr/web/css/transform-function/perspective()/index.md deleted file mode 100644 index a325ec8bea..0000000000 --- a/files/fr/web/css/transform-function/perspective()/index.md +++ /dev/null @@ -1,157 +0,0 @@ ---- -title: perspective() -slug: Web/CSS/transform-function/perspective() -translation_of: Web/CSS/transform-function/perspective() -browser-compat: css.types.transform-function.perspective ---- -{{CSSRef}} - -La fonction **`perspective()`** définit la distance entre le plan d'équation z = 0 et l'œil de l'utilisateur afin de fournir une perspective aux éléments positionnés dans l'espace (3D). Chaque élément pour lequel z est positif apparaîtra plus grand et chaque élément pour lequel z est négatif apparaîtra plus petit. La « force » de cet effet est déterminée par la valeur de cette propriété. La valeur obtenue comme résultat de cette fonction est de type [``](/fr/docs/Web/CSS/transform-function). - -Le résultat de cette fonction est une valeur de type [``](/fr/docs/Web/CSS/transform-function). - -{{EmbedInteractiveExample("pages/css/function-perspective.html")}} - -La fonction de transformation `perspective()`s'applique à l'élément qu'on veut transformer. En revanche, les propriétés [`perspective`](/fr/docs/Web/CSS/perspective) et [`perspective-origin`](/fr/docs/Web/CSS/perspective-origin) s'appliquent sur l'élément parent de l'enfant qu'on veut placer dans un espace 3D. - -## Syntaxe - - perspective(l) - -### Valeurs - -- _l_ - - : Une valeur de type [``](/fr/docs/Web/CSS/length) qui définit la distance entre l'œil de l'utilisateur et le plan décrit par l'équation `z = 0`. Si la valeur est nulle ou négative, aucune perspective ne sera appliquée. - - - - - - - - - - - - - - - - - -
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
-

- Cette transformation s'applique dans l'espace (3D) et ne peut pas être - représentée en deux dimensions. -

- 		- Une perspective n'est pas une transformation linéaire de ℝ3 - et ne peut donc pas être représentée en utilisant une matrice du système - cartésien. - - 10000100001000−1/d1 -
- -## Exemples - -### Appliquer une perspective sur un objet 3D - -#### CSS - -```css -.face { - position: absolute; - width: 100px; - height: 100px; - line-height: 100px; - font-size: 100px; - text-align: center; -} - -p + div { - width: 100px; - height: 100px; - transform-style: preserve-3d; - margin-left: 100px; -} -.no-perspective-box { - transform: rotateX(-15deg) rotateY(30deg); -} - -.perspective-box-far { - transform: perspective(9cm) rotateX(-15deg) rotateY(30deg); -} - -.perspective-box-closer { - transform: perspective(4cm) rotateX(-15deg) rotateY(30deg); -} - -.top { - background-color: skyblue; - transform: rotateX(90deg) translate3d(0, 0, 50px); -} - -.left { - background-color: pink; - transform: rotateY(-90deg) translate3d(0, 0, 50px); -} - -.front { - background-color: limegreen; - transform: translate3d(0, 0, 50px); -} -``` - -#### HTML - -```html -

Sans perspective :

-
-
A
-
B
-
C
-
- -

Avec une perspective (9cm) :

-
-
A
-
B
-
C
-
- -

Avec une perspective (4cm) :

-
-
A
-
B
-
C
-
-``` - -#### Résultat - -{{EmbedLiveSample('Appliquer_une_perspective_sur_un_objet_3D', '100%', '600')}} - -## Spécifications - -{{Specifications}} - -## Compatibilité des navigateurs - -{{Compat}} - -## Voir aussi - -- [`transform`](/fr/docs/Web/CSS/transform) -- [``](/fr/docs/Web/CSS/transform-function) diff --git a/files/fr/web/css/transform-function/perspective/index.md b/files/fr/web/css/transform-function/perspective/index.md new file mode 100644 index 0000000000..ec8cb069fe --- /dev/null +++ b/files/fr/web/css/transform-function/perspective/index.md @@ -0,0 +1,158 @@ +--- +title: perspective() +slug: Web/CSS/transform-function/perspective +translation_of: Web/CSS/transform-function/perspective() +original_slug: Web/CSS/transform-function/perspective() +browser-compat: css.types.transform-function.perspective +--- +{{CSSRef}} + +La fonction **`perspective()`** définit la distance entre le plan d'équation z = 0 et l'œil de l'utilisateur afin de fournir une perspective aux éléments positionnés dans l'espace (3D). Chaque élément pour lequel z est positif apparaîtra plus grand et chaque élément pour lequel z est négatif apparaîtra plus petit. La « force » de cet effet est déterminée par la valeur de cette propriété. La valeur obtenue comme résultat de cette fonction est de type [``](/fr/docs/Web/CSS/transform-function). + +Le résultat de cette fonction est une valeur de type [``](/fr/docs/Web/CSS/transform-function). + +{{EmbedInteractiveExample("pages/css/function-perspective.html")}} + +La fonction de transformation `perspective()`s'applique à l'élément qu'on veut transformer. En revanche, les propriétés [`perspective`](/fr/docs/Web/CSS/perspective) et [`perspective-origin`](/fr/docs/Web/CSS/perspective-origin) s'appliquent sur l'élément parent de l'enfant qu'on veut placer dans un espace 3D. + +## Syntaxe + + perspective(l) + +### Valeurs + +- _l_ + - : Une valeur de type [``](/fr/docs/Web/CSS/length) qui définit la distance entre l'œil de l'utilisateur et le plan décrit par l'équation `z = 0`. Si la valeur est nulle ou négative, aucune perspective ne sera appliquée. + + + + + + + + + + + + + + + + + +
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
+

+ Cette transformation s'applique dans l'espace (3D) et ne peut pas être + représentée en deux dimensions. +

+ 		+ Une perspective n'est pas une transformation linéaire de ℝ3 + et ne peut donc pas être représentée en utilisant une matrice du système + cartésien. + + 10000100001000−1/d1 +
+ +## Exemples + +### Appliquer une perspective sur un objet 3D + +#### CSS + +```css +.face { + position: absolute; + width: 100px; + height: 100px; + line-height: 100px; + font-size: 100px; + text-align: center; +} + +p + div { + width: 100px; + height: 100px; + transform-style: preserve-3d; + margin-left: 100px; +} +.no-perspective-box { + transform: rotateX(-15deg) rotateY(30deg); +} + +.perspective-box-far { + transform: perspective(9cm) rotateX(-15deg) rotateY(30deg); +} + +.perspective-box-closer { + transform: perspective(4cm) rotateX(-15deg) rotateY(30deg); +} + +.top { + background-color: skyblue; + transform: rotateX(90deg) translate3d(0, 0, 50px); +} + +.left { + background-color: pink; + transform: rotateY(-90deg) translate3d(0, 0, 50px); +} + +.front { + background-color: limegreen; + transform: translate3d(0, 0, 50px); +} +``` + +#### HTML + +```html +

Sans perspective :

+
+
A
+
B
+
C
+
+ +

Avec une perspective (9cm) :

+
+
A
+
B
+
C
+
+ +

Avec une perspective (4cm) :

+
+
A
+
B
+
C
+
+``` + +#### Résultat + +{{EmbedLiveSample('Appliquer_une_perspective_sur_un_objet_3D', '100%', '600')}} + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [`transform`](/fr/docs/Web/CSS/transform) +- [``](/fr/docs/Web/CSS/transform-function) diff --git a/files/fr/web/css/transform-function/rotate()/index.md b/files/fr/web/css/transform-function/rotate()/index.md deleted file mode 100644 index ccd6bec1ed..0000000000 --- a/files/fr/web/css/transform-function/rotate()/index.md +++ /dev/null @@ -1,181 +0,0 @@ ---- -title: rotate() -slug: Web/CSS/transform-function/rotate() -translation_of: Web/CSS/transform-function/rotate() -browser-compat: css.types.transform-function.rotate ---- -{{CSSRef}} - -La fonction **`rotate()`** définit une transformation qui déplace un élément autour d'un point fixe (défini par la propriété [`transform-origin`](/fr/docs/Web/CSS/transform-origin)) sans le déformer (autrement dit, qui applique une rotation plane). C'est une rotation autour de ce point. Par défaut, cette origine correspond au centre de l'élément. - -La rotation plane est définie par un angle, l'argument de la fonction. Si l'angle indiqué est positif, le mouvement sera appliqué dans le sens horaire et sinon il sera appliqué dans le sens inverse des aiguilles d'une montre. La valeur obtenue par cette fonction est de type [``](/fr/docs/Web/CSS/transform-function). - -## Syntaxe - -L'angle de la rotation créée grâce à `rotate()` est fourni comme argument à cette fonction via une aleur de type [``](/fr/docs/Web/CSS/angle). Si l'angle est positif, la rotation sera dans le sens des aiguilles d'une montre et s'il est négatif, elle sera dans le sens inverse des aiguilles d'une montre. - -```css -rotate(a) -``` - -### Valeurs - -- _a_ - - : Une valeur de type [``](/fr/docs/Web/SS/angle) qui représente l'angle de la rotation. Un angle positif indique une rotation appliquée dans le sens horaire, un angle négatif applique une rotation dans le sens anti-horaire. - - - - - - - - - - - - - - - - - - - - - -
Coordonnées cartésiennes surℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
- cos(a)-sin(a) - sin(a)cos(a) - - cos(a)-sin(a)0sin(a)cos(a)0001 - - cos(a)-sin(a)0sin(a)cos(a)0001 - - cos(a)-sin(a)00sin(a)cos(a)0000100001 -
[cos(a) sin(a) -sin(a) cos(a) 0 0]
- -## Exemples - -### Exemple simple - -#### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.tourne { - transform: rotate(45deg); /* Équivalent à rotateZ(45deg) */ - background-color: pink; -} -``` - -#### HTML - -```html -
Normal
-
Tourné
-``` - -#### Résultat - -{{EmbedLiveSample("Exemple_simple", "auto", 180)}} - -### Associer une rotation à une autre transformation - -Lorsqu'on applique plusieurs transformations, il faut faire attention à l'ordre dans lequel elles sont appliquées. Ainsi, si on applique une rotation avant une translation, la translation se fera selon le nouvel axe de rotation ! - -#### CSS - -```css -div { - position: absolute; - left: 40px; - top: 40px; - width: 100px; - height: 100px; - background-color: lightgray; -} - -.rotate { - background-color: transparent; - outline: 2px dashed; - transform: rotate(45deg); -} - -.rotate-translate { - background-color: pink; - transform: rotate(45deg) translateX(180px); -} - -.translate-rotate { - background-color: gold; - transform: translateX(180px) rotate(45deg); -} -``` - -#### HTML - -```html -
Normal
-
Tourné
-
Tourné puis translaté
-
Translaté puis tourné
-``` - -#### Résultat - -{{EmbedLiveSample("Associer_une_rotation_à_une_autre_transformation", "auto", 320)}} - -## Spécifications - -{{Specifications}} - -## Compatibilité des navigateurs - -{{Compat}} - -## Voir aussi - -- [`transform`](/fr/docs/Web/CSS/transform) -- [``](/fr/docs/Web/CSS/transform-function) -- [`rotate3d()`]() diff --git a/files/fr/web/css/transform-function/rotate/index.md b/files/fr/web/css/transform-function/rotate/index.md new file mode 100644 index 0000000000..e6c30aefe9 --- /dev/null +++ b/files/fr/web/css/transform-function/rotate/index.md @@ -0,0 +1,182 @@ +--- +title: rotate() +slug: Web/CSS/transform-function/rotate +translation_of: Web/CSS/transform-function/rotate() +original_slug: Web/CSS/transform-function/rotate() +browser-compat: css.types.transform-function.rotate +--- +{{CSSRef}} + +La fonction **`rotate()`** définit une transformation qui déplace un élément autour d'un point fixe (défini par la propriété [`transform-origin`](/fr/docs/Web/CSS/transform-origin)) sans le déformer (autrement dit, qui applique une rotation plane). C'est une rotation autour de ce point. Par défaut, cette origine correspond au centre de l'élément. + +La rotation plane est définie par un angle, l'argument de la fonction. Si l'angle indiqué est positif, le mouvement sera appliqué dans le sens horaire et sinon il sera appliqué dans le sens inverse des aiguilles d'une montre. La valeur obtenue par cette fonction est de type [``](/fr/docs/Web/CSS/transform-function). + +## Syntaxe + +L'angle de la rotation créée grâce à `rotate()` est fourni comme argument à cette fonction via une aleur de type [``](/fr/docs/Web/CSS/angle). Si l'angle est positif, la rotation sera dans le sens des aiguilles d'une montre et s'il est négatif, elle sera dans le sens inverse des aiguilles d'une montre. + +```css +rotate(a) +``` + +### Valeurs + +- _a_ + - : Une valeur de type [``](/fr/docs/Web/SS/angle) qui représente l'angle de la rotation. Un angle positif indique une rotation appliquée dans le sens horaire, un angle négatif applique une rotation dans le sens anti-horaire. + + + + + + + + + + + + + + + + + + + + + +
Coordonnées cartésiennes surℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
+ cos(a)-sin(a) + sin(a)cos(a) + + cos(a)-sin(a)0sin(a)cos(a)0001 + + cos(a)-sin(a)0sin(a)cos(a)0001 + + cos(a)-sin(a)00sin(a)cos(a)0000100001 +
[cos(a) sin(a) -sin(a) cos(a) 0 0]
+ +## Exemples + +### Exemple simple + +#### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.tourne { + transform: rotate(45deg); /* Équivalent à rotateZ(45deg) */ + background-color: pink; +} +``` + +#### HTML + +```html +
Normal
+
Tourné
+``` + +#### Résultat + +{{EmbedLiveSample("Exemple_simple", "auto", 180)}} + +### Associer une rotation à une autre transformation + +Lorsqu'on applique plusieurs transformations, il faut faire attention à l'ordre dans lequel elles sont appliquées. Ainsi, si on applique une rotation avant une translation, la translation se fera selon le nouvel axe de rotation ! + +#### CSS + +```css +div { + position: absolute; + left: 40px; + top: 40px; + width: 100px; + height: 100px; + background-color: lightgray; +} + +.rotate { + background-color: transparent; + outline: 2px dashed; + transform: rotate(45deg); +} + +.rotate-translate { + background-color: pink; + transform: rotate(45deg) translateX(180px); +} + +.translate-rotate { + background-color: gold; + transform: translateX(180px) rotate(45deg); +} +``` + +#### HTML + +```html +
Normal
+
Tourné
+
Tourné puis translaté
+
Translaté puis tourné
+``` + +#### Résultat + +{{EmbedLiveSample("Associer_une_rotation_à_une_autre_transformation", "auto", 320)}} + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [`transform`](/fr/docs/Web/CSS/transform) +- [``](/fr/docs/Web/CSS/transform-function) +- [`rotate3d()`]() diff --git a/files/fr/web/css/transform-function/rotate3d()/index.md b/files/fr/web/css/transform-function/rotate3d()/index.md deleted file mode 100644 index 0dde6dc4b9..0000000000 --- a/files/fr/web/css/transform-function/rotate3d()/index.md +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: rotate3d() -slug: Web/CSS/transform-function/rotate3d() -translation_of: Web/CSS/transform-function/rotate3d() -browser-compat: css.types.transform-function.rotate3d ---- -{{CSSRef}} - -La fonction **`rotate3d()`** définit une transformation qui déplace un élément autour d'un axe sans le déformer. L'angle de la rotation est un argument de la fonction. Si l'angle indiqué est positif, le mouvement sera appliqué dans le sens horaire et sinon il sera appliqué dans le sens inverse des aiguilles d'une montre. La valeur obtenue par cette fonction est de type [``](/fr/docs/Web/CSS/transform-function). - -{{EmbedInteractiveExample("pages/css/rotate3d.html")}} - -Dans l'espace (en trois dimensions), les rotations ont trois degrés de liberté qui définissent l'axe de rotation. Cet axe est défini par un vecteur `[x, y, z]` et passe par l'origine du repère (définie grâce à la propriété [`transform-origin`](/fr/docs/Web/CSS/transform-origin)). Si le vecteur n'est pas normalisé (autrement dit, si la somme des carrés de ses trois composantes ne vaut pas 1), il sera normalisé par le moteur. Un vecteur qui ne peut être normalisé (par exemple le vecteur nul `[0, 0, 0]`) empêchera la rotation d'être appliquée mais la propriété CSS restera valide. - -> **Note :** Contrairement aux rotations appliquées dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant. - -## Syntaxe - - rotate3d(x, y, z, a) - -### Valeurs - -- `x` - - : Une valeur de type [``](/fr/docs/Web/CSS/number) qui définit la composante en X (l'abscisse) du vecteur qui sera l'axe de la rotation. -- `y` - - : Une valeur de type [``](/fr/docs/Web/CSS/number) qui définit la composante en Y (l'ordonnée) du vecteur qui sera l'axe de la rotation. -- `z` - - : Une valeur de type [``](/fr/docs/Web/CSS/number) qui définit la composante en Z (la côte) du vecteur qui sera l'axe de la rotation. -- `a` - - : Une valeur de type [``](/fr/docs/Web/CSS/angle) qui représente l'angle de la rotation. Un angle positif indique une rotation appliquée dans le sens horaire, un angle négatif applique une rotation dans le sens anti-horaire. - - - - - - - - - - - - - - - - - -
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
- Cette transformation s'applique dans l'espace (3D) et ne peut pas être - représentée en deux dimensions. - - 1+(1-cos(a))(x2-1)z·sin(a)+xy(1-cos(a))-y·sin(a)+xz·(1-cos(a))-z·sin(a)+xy·(1-cos(a))1+(1-cos(a))(y2-1)x·sin(a)+yz·(1-cos(a))ysin(a) + xz(1-cos(a))-xsin(a)+yz(1-cos(a))1+(1-cos(a))(z2-1)t0001 - - -
- -## Exemples - -### Définir une rotation en Y - -#### HTML - -```html -

toto

-

truc

-``` - -#### CSS - -```css -body { - perspective: 800px; -} - -p { - width: 50px; - height: 50px; - background-color: teal; - margin: auto; -} - -.transformation{ - transform: rotate3d(0,1,0,60deg); - background-color: blue; -} -``` - -#### Résultat - -{{EmbedLiveSample("Définir_une_rotation_en_Y","100%","200")}} - -### Définir une rotation sur un axe quelconque - -#### HTML - -```html -

toto

-

truc

-``` - -#### CSS - -```css -p { - width: 50px; - height: 50px; - background-color: teal; -} - -.transformation { - transform: rotate3d(1, 2, -1, 192deg); - background-color: blue; -} -``` - -#### Résultat - -{{EmbedLiveSample("Définir_une_rotation_sur_un_axe_quelconque","100%","200")}} - -## Spécifications - -{{Specifications}} - -## Compatibilité des navigateurs - -{{Compat}} - -## Voir aussi - -- [`transform`](/fr/docs/Web/CSS/transform) -- [``](/fr/docs/Web/CSS/transform-function) diff --git a/files/fr/web/css/transform-function/rotate3d/index.md b/files/fr/web/css/transform-function/rotate3d/index.md new file mode 100644 index 0000000000..08ff78ce12 --- /dev/null +++ b/files/fr/web/css/transform-function/rotate3d/index.md @@ -0,0 +1,170 @@ +--- +title: rotate3d() +slug: Web/CSS/transform-function/rotate3d +translation_of: Web/CSS/transform-function/rotate3d() +original_slug: Web/CSS/transform-function/rotate3d() +browser-compat: css.types.transform-function.rotate3d +--- +{{CSSRef}} + +La fonction **`rotate3d()`** définit une transformation qui déplace un élément autour d'un axe sans le déformer. L'angle de la rotation est un argument de la fonction. Si l'angle indiqué est positif, le mouvement sera appliqué dans le sens horaire et sinon il sera appliqué dans le sens inverse des aiguilles d'une montre. La valeur obtenue par cette fonction est de type [``](/fr/docs/Web/CSS/transform-function). + +{{EmbedInteractiveExample("pages/css/rotate3d.html")}} + +Dans l'espace (en trois dimensions), les rotations ont trois degrés de liberté qui définissent l'axe de rotation. Cet axe est défini par un vecteur `[x, y, z]` et passe par l'origine du repère (définie grâce à la propriété [`transform-origin`](/fr/docs/Web/CSS/transform-origin)). Si le vecteur n'est pas normalisé (autrement dit, si la somme des carrés de ses trois composantes ne vaut pas 1), il sera normalisé par le moteur. Un vecteur qui ne peut être normalisé (par exemple le vecteur nul `[0, 0, 0]`) empêchera la rotation d'être appliquée mais la propriété CSS restera valide. + +> **Note :** Contrairement aux rotations appliquées dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant. + +## Syntaxe + + rotate3d(x, y, z, a) + +### Valeurs + +- `x` + - : Une valeur de type [``](/fr/docs/Web/CSS/number) qui définit la composante en X (l'abscisse) du vecteur qui sera l'axe de la rotation. +- `y` + - : Une valeur de type [``](/fr/docs/Web/CSS/number) qui définit la composante en Y (l'ordonnée) du vecteur qui sera l'axe de la rotation. +- `z` + - : Une valeur de type [``](/fr/docs/Web/CSS/number) qui définit la composante en Z (la côte) du vecteur qui sera l'axe de la rotation. +- `a` + - : Une valeur de type [``](/fr/docs/Web/CSS/angle) qui représente l'angle de la rotation. Un angle positif indique une rotation appliquée dans le sens horaire, un angle négatif applique une rotation dans le sens anti-horaire. + + + + + + + + + + + + + + + + + +
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
+ Cette transformation s'applique dans l'espace (3D) et ne peut pas être + représentée en deux dimensions. + + 1+(1-cos(a))(x2-1)z·sin(a)+xy(1-cos(a))-y·sin(a)+xz·(1-cos(a))-z·sin(a)+xy·(1-cos(a))1+(1-cos(a))(y2-1)x·sin(a)+yz·(1-cos(a))ysin(a) + xz(1-cos(a))-xsin(a)+yz(1-cos(a))1+(1-cos(a))(z2-1)t0001 + + +
+ +## Exemples + +### Définir une rotation en Y + +#### HTML + +```html +

toto

+

truc

+``` + +#### CSS + +```css +body { + perspective: 800px; +} + +p { + width: 50px; + height: 50px; + background-color: teal; + margin: auto; +} + +.transformation{ + transform: rotate3d(0,1,0,60deg); + background-color: blue; +} +``` + +#### Résultat + +{{EmbedLiveSample("Définir_une_rotation_en_Y","100%","200")}} + +### Définir une rotation sur un axe quelconque + +#### HTML + +```html +

toto

+

truc

+``` + +#### CSS + +```css +p { + width: 50px; + height: 50px; + background-color: teal; +} + +.transformation { + transform: rotate3d(1, 2, -1, 192deg); + background-color: blue; +} +``` + +#### Résultat + +{{EmbedLiveSample("Définir_une_rotation_sur_un_axe_quelconque","100%","200")}} + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [`transform`](/fr/docs/Web/CSS/transform) +- [``](/fr/docs/Web/CSS/transform-function) diff --git a/files/fr/web/css/transform-function/rotatex()/index.md b/files/fr/web/css/transform-function/rotatex()/index.md deleted file mode 100644 index d58880be97..0000000000 --- a/files/fr/web/css/transform-function/rotatex()/index.md +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: rotateX() -slug: Web/CSS/transform-function/rotateX() -translation_of: Web/CSS/transform-function/rotateX() -browser-compat: css.types.transform-function.rotateX ---- -{{CSSRef}} - -La fonction **`rotateX()`** définit une transformation qui déplace l'élément autour de l'axe des abscisses sans le déformer. L'angle de rotation est défini par l'argument passé à la fonction. Si l'angle indiqué est positif, le mouvement sera appliqué dans le sens horaire et sinon il sera appliqué dans le sens inverse des aiguilles d'une montre. - -{{EmbedInteractiveExample("pages/css/function-rotateX.html")}} - -L'axe de la rotation passe par l'origine du repère, définie par la propriété [`transform-origin`](/fr/docs/Web/CSS/transform-origin). - -`rotateX(a)` est une notation raccourcie, équivalente à `rotate3D(1, 0, 0, a)`. - -> **Note :** Contrairement aux rotations appliquées dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant. - -## Syntaxe - -L'angle de la rotation opérée par `rotateX()` est indiquée par une valeur [``](/fr/docs/Web/CSS/angle). Si celle-ci est positive, la rotation s'effectuera dans le sens horaire ; si la valeur est négative elle s'effectuera dans le sens anti-horaire. - -```css -rotateX(a) -``` - -### Valeurs - -- `a` - - : Une valeur de type [``](/fr/docs/Web/CSS/angle) qui représente l'angle de la rotation. Un angle positif indique une rotation appliquée dans le sens horaire, un angle négatif applique une rotation dans le sens anti-horaire. - - - - - - - - - - - - - - - - - -
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
- Cette transformation s'applique dans l'espace (3D) et ne peut pas être - représentée en deux dimensions. - - 1000cos(a)-sin(a)0sin(a)cos(a) - - 10000cos(a)-sin(a)00sin(a)cos(a)00001 -
- -## Exemples - -### HTML - -```html -
Normal
-
Tourné
-``` - -### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.rotated { - transform: rotateX(45deg); - background-color: pink; -} -``` - -### Résultat - -{{EmbedLiveSample("Exemples","100%","200")}} - -## Spécifications - -{{Specifications}} - -## Compatibilité des navigateurs - -{{Compat}} - -## Voir aussi - -- [`transform`](/fr/docs/Web/CSS/transform) -- [``](/fr/docs/Web/CSS/transform-function) diff --git a/files/fr/web/css/transform-function/rotatex/index.md b/files/fr/web/css/transform-function/rotatex/index.md new file mode 100644 index 0000000000..9f6a372ad9 --- /dev/null +++ b/files/fr/web/css/transform-function/rotatex/index.md @@ -0,0 +1,119 @@ +--- +title: rotateX() +slug: Web/CSS/transform-function/rotateX +translation_of: Web/CSS/transform-function/rotateX() +original_slug: Web/CSS/transform-function/rotateX() +browser-compat: css.types.transform-function.rotateX +--- +{{CSSRef}} + +La fonction **`rotateX()`** définit une transformation qui déplace l'élément autour de l'axe des abscisses sans le déformer. L'angle de rotation est défini par l'argument passé à la fonction. Si l'angle indiqué est positif, le mouvement sera appliqué dans le sens horaire et sinon il sera appliqué dans le sens inverse des aiguilles d'une montre. + +{{EmbedInteractiveExample("pages/css/function-rotateX.html")}} + +L'axe de la rotation passe par l'origine du repère, définie par la propriété [`transform-origin`](/fr/docs/Web/CSS/transform-origin). + +`rotateX(a)` est une notation raccourcie, équivalente à `rotate3D(1, 0, 0, a)`. + +> **Note :** Contrairement aux rotations appliquées dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant. + +## Syntaxe + +L'angle de la rotation opérée par `rotateX()` est indiquée par une valeur [``](/fr/docs/Web/CSS/angle). Si celle-ci est positive, la rotation s'effectuera dans le sens horaire ; si la valeur est négative elle s'effectuera dans le sens anti-horaire. + +```css +rotateX(a) +``` + +### Valeurs + +- `a` + - : Une valeur de type [``](/fr/docs/Web/CSS/angle) qui représente l'angle de la rotation. Un angle positif indique une rotation appliquée dans le sens horaire, un angle négatif applique une rotation dans le sens anti-horaire. + + + + + + + + + + + + + + + + + +
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
+ Cette transformation s'applique dans l'espace (3D) et ne peut pas être + représentée en deux dimensions. + + 1000cos(a)-sin(a)0sin(a)cos(a) + + 10000cos(a)-sin(a)00sin(a)cos(a)00001 +
+ +## Exemples + +### HTML + +```html +
Normal
+
Tourné
+``` + +### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.rotated { + transform: rotateX(45deg); + background-color: pink; +} +``` + +### Résultat + +{{EmbedLiveSample("Exemples","100%","200")}} + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [`transform`](/fr/docs/Web/CSS/transform) +- [``](/fr/docs/Web/CSS/transform-function) diff --git a/files/fr/web/css/transform-function/rotatey()/index.md b/files/fr/web/css/transform-function/rotatey()/index.md deleted file mode 100644 index c63382815e..0000000000 --- a/files/fr/web/css/transform-function/rotatey()/index.md +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: rotateY() -slug: Web/CSS/transform-function/rotateY() -translation_of: Web/CSS/transform-function/rotateY() -browser-compat: css.types.transform-function.rotateY ---- -{{CSSRef}} - -La fonction **`rotateY()`** définit une rotation, qui déplace l'élément autour de l'axe des ordonnées, sans le déformer. L'angle de rotation est défini par l'argument passé à la fonction. Si l'angle indiqué est positif, le mouvement sera appliqué dans le sens horaire et sinon il sera appliqué dans le sens inverse des aiguilles d'une montre. - -{{EmbedInteractiveExample("pages/css/function-rotateY.html")}} - -L'axe de la rotation passe par l'origine du repère, définie par la propriété [`transform-origin`](/fr/docs/Web/CSS/transform-origin). - -`rotateY(a)` est une notation raccourcie, équivalente à `rotate3D(0, 1, 0, a)`. - -> **Note :** Contrairement aux rotations appliquées dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant. - -## Syntaxe - -L'angle de la rotation appliquée par `rotateY()` est fourni par une valeur [``](/fr/docs/Web/CSS/angle). Si cette valeur est positive, la rotation s'effectuera dans le sens horaire ; si elle est négative, la rotation s'effectuera dans le sens anti-horaire. - -```css -rotateY(a) -``` - -### Valeurs - -- `a` - - : Une valeur de type [``](/fr/docs/Web/CSS/angle) qui représente l'angle de la rotation. Un angle positif indique une rotation appliquée dans le sens horaire, un angle négatif applique une rotation dans le sens anti-horaire. - - - - - - - - - - - - - - - - - -
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
- Cette transformation s'applique dans l'espace (3D) et ne peut pas être - représentée en deux dimensions. - - cos(a)0sin(a)010-sin(a)0cos(a) - - cos(a)0sin(a)00100-sin(a)0cos(a)00001 -
- -## Exemples - -### HTML - -```html -
Normal
-
Tourné
-``` - -### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.rotated { - transform: rotateY(60deg); - background-color: pink; -} -``` - -### Résultat - -{{EmbedLiveSample("Exemples","100%","200")}} - -## Spécifications - -{{Specifications}} - -## Compatibilité des navigateurs - -{{Compat}} - -## Voir aussi - -- [`transform`](/fr/docs/Web/CSS/transform) -- [``](/fr/docs/Web/CSS/transform-function) diff --git a/files/fr/web/css/transform-function/rotatey/index.md b/files/fr/web/css/transform-function/rotatey/index.md new file mode 100644 index 0000000000..29e01f9ba9 --- /dev/null +++ b/files/fr/web/css/transform-function/rotatey/index.md @@ -0,0 +1,121 @@ +--- +title: rotateY() +slug: Web/CSS/transform-function/rotateY +translation_of: Web/CSS/transform-function/rotateY() +original_slug: Web/CSS/transform-function/rotateY() +browser-compat: css.types.transform-function.rotateY +--- +{{CSSRef}} + +La fonction **`rotateY()`** définit une rotation, qui déplace l'élément autour de l'axe des ordonnées, sans le déformer. L'angle de rotation est défini par l'argument passé à la fonction. Si l'angle indiqué est positif, le mouvement sera appliqué dans le sens horaire et sinon il sera appliqué dans le sens inverse des aiguilles d'une montre. + +{{EmbedInteractiveExample("pages/css/function-rotateY.html")}} + +L'axe de la rotation passe par l'origine du repère, définie par la propriété [`transform-origin`](/fr/docs/Web/CSS/transform-origin). + +`rotateY(a)` est une notation raccourcie, équivalente à `rotate3D(0, 1, 0, a)`. + +> **Note :** Contrairement aux rotations appliquées dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant. + +## Syntaxe + +L'angle de la rotation appliquée par `rotateY()` est fourni par une valeur [``](/fr/docs/Web/CSS/angle). Si cette valeur est positive, la rotation s'effectuera dans le sens horaire ; si elle est négative, la rotation s'effectuera dans le sens anti-horaire. + +```css +rotateY(a) +``` + +### Valeurs + +- `a` + - : Une valeur de type [``](/fr/docs/Web/CSS/angle) qui représente l'angle de la rotation. Un angle positif indique une rotation appliquée dans le sens horaire, un angle négatif applique une rotation dans le sens anti-horaire. + + + + + + + + + + + + + + + + + +
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
+ Cette transformation s'applique dans l'espace (3D) et ne peut pas être + représentée en deux dimensions. + + cos(a)0sin(a)010-sin(a)0cos(a) + + cos(a)0sin(a)00100-sin(a)0cos(a)00001 +
+ +## Exemples + +### HTML + +```html +
Normal
+
Tourné
+``` + +### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.rotated { + transform: rotateY(60deg); + background-color: pink; +} +``` + +### Résultat + +{{EmbedLiveSample("Exemples","100%","200")}} + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [`transform`](/fr/docs/Web/CSS/transform) +- [``](/fr/docs/Web/CSS/transform-function) diff --git a/files/fr/web/css/transform-function/rotatez()/index.md b/files/fr/web/css/transform-function/rotatez()/index.md deleted file mode 100644 index c39015700b..0000000000 --- a/files/fr/web/css/transform-function/rotatez()/index.md +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: rotateZ() -slug: Web/CSS/transform-function/rotateZ() -translation_of: Web/CSS/transform-function/rotateZ() -browser-compat: css.types.transform-function.rotateZ ---- -{{CSSRef}} - -La fonction **`rotateZ()`** définit une transformation qui déplace l'élément autour de l'axe Z, sans déformer cet élément. L'angle de rotation est défini par l'argument passé à la fonction. Si l'angle indiqué est positif, le mouvement sera appliqué dans le sens horaire et sinon il sera appliqué dans le sens inverse des aiguilles d'une montre. - -{{EmbedInteractiveExample("pages/css/function-rotateZ.html")}} - -L'axe de la rotation passe par l'origine du repère, définie par la propriété [`transform-origin`](/fr/docs/Web/CSS/transform-origin). - -`rotateZ(a)` est une notation raccourcie équivalente à `rotate3D(0, 0, 1, a)`. - -> **Note :** Contrairement aux rotations appliquées dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant. - -## Syntaxe - -L'angle de la rotation appliquée par `rotateZ()` est fourni par une valeur [``](/fr/docs/Web/CSS/angle). Si cette valeur est positive, la rotation s'effectuera dans le sens horaire ; si elle est négative, la rotation s'effectuera dans le sens anti-horaire. - -```css -rotateZ(a) -``` - -### Valeurs - -- `a` - - : Une valeur de type [``](/fr/docs/Web/CSS/angle) qui représente l'angle de la rotation. Un angle positif indique une rotation appliquée dans le sens horaire, un angle négatif applique une rotation dans le sens anti-horaire. - - - - - - - - - - - - - - - - - -
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
- Cette transformation s'applique dans l'espace (3D) et ne peut pas être - représentée en deux dimensions. - - cos(a)-sin(a)0sin(a)cos(a)0001 - - cos(a)-sin(a)00sin(a)cos(a)0000100001 -
- -## Exemples - -### HTML - -```html -
Normal
-
Tourné
-``` - -### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.rotated { - transform: rotateZ(45deg); - background-color: pink; -} -``` - -### Résultat - -{{EmbedLiveSample("Exemples","100%","200")}} - -## Spécifications - -{{Specifications}} - -## Compatibilité des navigateurs - -{{Compat}} - -## Voir aussi - -- [`transform`](/fr/docs/Web/CSS/transform) -- [``](/fr/docs/Web/CSS/transform-function) diff --git a/files/fr/web/css/transform-function/rotatez/index.md b/files/fr/web/css/transform-function/rotatez/index.md new file mode 100644 index 0000000000..88633274d3 --- /dev/null +++ b/files/fr/web/css/transform-function/rotatez/index.md @@ -0,0 +1,119 @@ +--- +title: rotateZ() +slug: Web/CSS/transform-function/rotateZ +translation_of: Web/CSS/transform-function/rotateZ() +original_slug: Web/CSS/transform-function/rotateZ() +browser-compat: css.types.transform-function.rotateZ +--- +{{CSSRef}} + +La fonction **`rotateZ()`** définit une transformation qui déplace l'élément autour de l'axe Z, sans déformer cet élément. L'angle de rotation est défini par l'argument passé à la fonction. Si l'angle indiqué est positif, le mouvement sera appliqué dans le sens horaire et sinon il sera appliqué dans le sens inverse des aiguilles d'une montre. + +{{EmbedInteractiveExample("pages/css/function-rotateZ.html")}} + +L'axe de la rotation passe par l'origine du repère, définie par la propriété [`transform-origin`](/fr/docs/Web/CSS/transform-origin). + +`rotateZ(a)` est une notation raccourcie équivalente à `rotate3D(0, 0, 1, a)`. + +> **Note :** Contrairement aux rotations appliquées dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant. + +## Syntaxe + +L'angle de la rotation appliquée par `rotateZ()` est fourni par une valeur [``](/fr/docs/Web/CSS/angle). Si cette valeur est positive, la rotation s'effectuera dans le sens horaire ; si elle est négative, la rotation s'effectuera dans le sens anti-horaire. + +```css +rotateZ(a) +``` + +### Valeurs + +- `a` + - : Une valeur de type [``](/fr/docs/Web/CSS/angle) qui représente l'angle de la rotation. Un angle positif indique une rotation appliquée dans le sens horaire, un angle négatif applique une rotation dans le sens anti-horaire. + + + + + + + + + + + + + + + + + +
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
+ Cette transformation s'applique dans l'espace (3D) et ne peut pas être + représentée en deux dimensions. + + cos(a)-sin(a)0sin(a)cos(a)0001 + + cos(a)-sin(a)00sin(a)cos(a)0000100001 +
+ +## Exemples + +### HTML + +```html +
Normal
+
Tourné
+``` + +### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.rotated { + transform: rotateZ(45deg); + background-color: pink; +} +``` + +### Résultat + +{{EmbedLiveSample("Exemples","100%","200")}} + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [`transform`](/fr/docs/Web/CSS/transform) +- [``](/fr/docs/Web/CSS/transform-function) diff --git a/files/fr/web/css/transform-function/scale()/index.md b/files/fr/web/css/transform-function/scale()/index.md deleted file mode 100644 index 68fae2dc27..0000000000 --- a/files/fr/web/css/transform-function/scale()/index.md +++ /dev/null @@ -1,207 +0,0 @@ ---- -title: scale() -slug: Web/CSS/transform-function/scale() -translation_of: Web/CSS/transform-function/scale() -browser-compat: css.types.transform-function.scale ---- -{{CSSRef}} - -La fonction CSS **`scale()`** permet de modifier la taille d'un élément avec un facteur d'échelle sur deux dimensions. Le résultat de cette fonction est une valeur de type [``](/fr/docs/Web/CSS/transform-function). - -![](scale.png) - -Cette transformation est définie par un vecteur dont les coordonnées définissent la déformation appliquée dans chaque direction (horizontale et verticale). Si les deux coordonnées du vecteur sont égales, la mise à l'échelle est uniforme (ou isotropique) et la forme de l'élément est conservée. - -Lorsque les coordonnées du vecteur sont en dehors de l'intervalle \[`-1, 1]`, la transformation agrandit la taille de l'élément. Dans cet intervalle, l'élément est réduit. - -> **Note :** La fonction `scale()` applique une transformation dans le plan (2D). S'il faut que la transformation soit appliquée dans l'espace (3D), on pourra utiliser la fonction `scale3D()`. - -## Syntaxe - -La fonction `scale()` s'utilise avec une ou deux valeurs qui indiquent l'échelle à utiliser selon chaque direction. - - -```css -scale(sx) - -scale(sx, sy) -``` - -### Valeurs - -- `sx` - - : Une valeur de type [``](/fr/docs/Web/CSS/number) qui représente l'abscisse du vecteur de transformation (le facteur d'échelle selon l'axe horizontal). -- `sy` - - : Une valeur de type [``](/fr/docs/Web/CSS/number) qui représente l'abscisse du vecteur de transformation (le facteur d'échelle selon l'axe vertical). Si ce paramètre est absent, la valeur par défaut qui sera prise sera **_sx_** (on aura ainsi une transformation homogène). - - - - - - - - - - - - - - - - - - - - - -
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
- sx 0 0 sy - - sx 0 0 0 sy 0 0 0 1 - - sx 0 0 0 sy 0 0 0 1 - - sx 0 0 0 0 sy 0 0 0 0 1 0 0 0 0 1 -
[sx 0 0 sy 0 0]
- -## Accessibilité - -Les animations utilisées pour les zooms/changement d'échelle peuvent poser problème comme facteurs de déclenchement pour certains types de migraine. Si vous devez inclure de telles animations sur votre site, vous devriez fournir un moyen de désactiver les animations pour le site. - -Vous pouvez également tirer parti de la caractéristique média [`prefers-reduced-motion`](/fr/docs/Web/CSS/@media/prefers-reduced-motion) et écrire une requête média qui désactivera les animations si l'utilisateur décide de réduire les animations via les préférences du système. - -Pour en savoir plus : - -- [Comprendre les règles WCAG 2.3](/fr/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline_2.3_%e2%80%94_seizures_and_physical_reactions_do_not_design_content_in_a_way_that_is_known_to_cause_seizures_or_physical_reactions) -- [Comprendre les critères de succès WCAG 2.1 / 2.3.3 (W3C)](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions) - -## Exemples - -### Déformation horizontale et verticale - -#### HTML - -```html -
Normal
-
Déformé
-``` - -#### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.scaled { - transform: scale(0.7); /* Équivalent à scaleX(0.7) scaleY(0.7) */ - background-color: pink; -} -``` - -#### Résultat - -{{EmbedLiveSample("Déformation_horizontale_et_verticale", "200", "200")}} - -### Déformer horizontalement et verticalement avec origine déplacée - -#### HTML - -```html -
Normal
-
Déformé
-``` - -#### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.scaled { - transform: scale(2, 0.5); /* Équivalent à scaleX(2) scaleY(0.5) */ - transform-origin: left; - background-color: pink; -} -``` - -#### Résultat - -{{EmbedLiveSample("Déformer_horizontalement_et_verticalement_avec_origine_déplacée", "200", "200")}} - -## Spécifications - -{{Specifications}} - -## Compatibilité des navigateurs - -{{Compat}} - -## Voir aussi - -- [`transform`](/fr/docs/Web/CSS/transform) -- [``](/fr/docs/Web/CSS/transform-function) -- [`scale3d()`]() diff --git a/files/fr/web/css/transform-function/scale/index.md b/files/fr/web/css/transform-function/scale/index.md new file mode 100644 index 0000000000..7f6fa9869d --- /dev/null +++ b/files/fr/web/css/transform-function/scale/index.md @@ -0,0 +1,208 @@ +--- +title: scale() +slug: Web/CSS/transform-function/scale +translation_of: Web/CSS/transform-function/scale() +original_slug: Web/CSS/transform-function/scale() +browser-compat: css.types.transform-function.scale +--- +{{CSSRef}} + +La fonction CSS **`scale()`** permet de modifier la taille d'un élément avec un facteur d'échelle sur deux dimensions. Le résultat de cette fonction est une valeur de type [``](/fr/docs/Web/CSS/transform-function). + +![](scale.png) + +Cette transformation est définie par un vecteur dont les coordonnées définissent la déformation appliquée dans chaque direction (horizontale et verticale). Si les deux coordonnées du vecteur sont égales, la mise à l'échelle est uniforme (ou isotropique) et la forme de l'élément est conservée. + +Lorsque les coordonnées du vecteur sont en dehors de l'intervalle \[`-1, 1]`, la transformation agrandit la taille de l'élément. Dans cet intervalle, l'élément est réduit. + +> **Note :** La fonction `scale()` applique une transformation dans le plan (2D). S'il faut que la transformation soit appliquée dans l'espace (3D), on pourra utiliser la fonction `scale3D()`. + +## Syntaxe + +La fonction `scale()` s'utilise avec une ou deux valeurs qui indiquent l'échelle à utiliser selon chaque direction. + + +```css +scale(sx) + +scale(sx, sy) +``` + +### Valeurs + +- `sx` + - : Une valeur de type [``](/fr/docs/Web/CSS/number) qui représente l'abscisse du vecteur de transformation (le facteur d'échelle selon l'axe horizontal). +- `sy` + - : Une valeur de type [``](/fr/docs/Web/CSS/number) qui représente l'abscisse du vecteur de transformation (le facteur d'échelle selon l'axe vertical). Si ce paramètre est absent, la valeur par défaut qui sera prise sera **_sx_** (on aura ainsi une transformation homogène). + + + + + + + + + + + + + + + + + + + + + +
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
+ sx 0 0 sy + + sx 0 0 0 sy 0 0 0 1 + + sx 0 0 0 sy 0 0 0 1 + + sx 0 0 0 0 sy 0 0 0 0 1 0 0 0 0 1 +
[sx 0 0 sy 0 0]
+ +## Accessibilité + +Les animations utilisées pour les zooms/changement d'échelle peuvent poser problème comme facteurs de déclenchement pour certains types de migraine. Si vous devez inclure de telles animations sur votre site, vous devriez fournir un moyen de désactiver les animations pour le site. + +Vous pouvez également tirer parti de la caractéristique média [`prefers-reduced-motion`](/fr/docs/Web/CSS/@media/prefers-reduced-motion) et écrire une requête média qui désactivera les animations si l'utilisateur décide de réduire les animations via les préférences du système. + +Pour en savoir plus : + +- [Comprendre les règles WCAG 2.3](/fr/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline_2.3_%e2%80%94_seizures_and_physical_reactions_do_not_design_content_in_a_way_that_is_known_to_cause_seizures_or_physical_reactions) +- [Comprendre les critères de succès WCAG 2.1 / 2.3.3 (W3C)](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions) + +## Exemples + +### Déformation horizontale et verticale + +#### HTML + +```html +
Normal
+
Déformé
+``` + +#### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.scaled { + transform: scale(0.7); /* Équivalent à scaleX(0.7) scaleY(0.7) */ + background-color: pink; +} +``` + +#### Résultat + +{{EmbedLiveSample("Déformation_horizontale_et_verticale", "200", "200")}} + +### Déformer horizontalement et verticalement avec origine déplacée + +#### HTML + +```html +
Normal
+
Déformé
+``` + +#### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.scaled { + transform: scale(2, 0.5); /* Équivalent à scaleX(2) scaleY(0.5) */ + transform-origin: left; + background-color: pink; +} +``` + +#### Résultat + +{{EmbedLiveSample("Déformer_horizontalement_et_verticalement_avec_origine_déplacée", "200", "200")}} + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [`transform`](/fr/docs/Web/CSS/transform) +- [``](/fr/docs/Web/CSS/transform-function) +- [`scale3d()`]() diff --git a/files/fr/web/css/transform-function/scale3d()/index.md b/files/fr/web/css/transform-function/scale3d()/index.md deleted file mode 100644 index f681f08b90..0000000000 --- a/files/fr/web/css/transform-function/scale3d()/index.md +++ /dev/null @@ -1,151 +0,0 @@ ---- -title: scale3d() -slug: Web/CSS/transform-function/scale3d() -translation_of: Web/CSS/transform-function/scale3d() -browser-compat: css.types.transform-function.scale3d ---- -{{CSSRef}} - -La fonction **`scale3d()`** permet de modifier la taille d'un élément en appliquant une homothétie définie par un vecteur. Les composantes de ce vecteur permettent d'appliquer des échelles différentes selon les différentes dimensions. - -{{EmbedInteractiveExample("pages/css/function-scale3d.html")}} - -La transformation appliquée est définie par un vecteur dont les coordonnées définissent l'amplitude de l'homothétie dans chaque direction. Si les trois coordonnées du vecteur sont égales, la transformation est isotropique et la forme de l'élément est conservée. - -Lorsque les composantes du vecteur sont en dehors de l'intervalle `[-1, 1]`, la transformation agrandit l'élément dans le sens des coordonnées. Lorsque les composantes sont dans cet intervalle, cela réduit l'élément. - -## Syntaxe - -La fonction `scale3d()` s'utilise avec trois valeurs dont chacune représente l'intensité de la transformation selon chaque direction. - -```css -scale3d(sx, sy, sz) -``` - -### Valeurs - -- `sx` - - : Une valeur de type [``](/fr/docs/Web/CSS/number) qui représente l'abscisse du vecteur définissant l'homothétie. -- `sy` - - : Une valeur de type [``](/fr/docs/Web/CSS/number) qui représente l'ordonnée du vecteur définissant l'homothétie -- `sz` - - : Une valeur de type [``](/fr/docs/Web/CSS/number) qui représente la composante, selon l'axe Z, du vecteur définissant l'homothétie - - - - - - - - - - - - - - - - - -
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
- Cette transformation s'applique dans en 3 dimensions et ne peut pas être - représentée sur le plan. - - sx000sy000sz - - sx0000sy0000sz00001 -
- -## Exemples - -### Avec origine non modifiée - -#### HTML - -```html -
Normal
-
Mis à l'échelle
-``` - -#### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.scaled { - transform: perspective(500px) scale3d(2, 0.7, 0.2) translateZ(100px); - background-color: pink; -} -``` - -#### Résultat - -{{EmbedLiveSample("Avec_origine_non_modifiée","100%","200")}} - -### Avec origine translatée - -#### HTML - -```html -
Normal
-
Mis à l'échelle
-``` - -#### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.scaled { - transform: perspective(500px) scale3d(2, 0.7, 0.2) translateZ(100px); - transform-origin: left; - background-color: pink; -} -``` - -#### Résultat - -{{EmbedLiveSample("Avec_origine_translatée","100%","200")}} - -## Spécifications - -{{Specifications}} - -## Compatibilité des navigateurs - -{{Compat}} - -## Voir aussi - -- [`transform`](/fr/docs/Web/CSS/transform) -- [``](/fr/docs/Web/CSS/transform-function) -- [`scaleZ()`](/fr/docs/Web/CSS/transform-function/scaleZ()) -- [`translate3d()`](/fr/docs/Web/CSS/transform-function/translate3d()) -- [`rotate3d()`](/fr/docs/Web/CSS/transform-function/rotate3d()) diff --git a/files/fr/web/css/transform-function/scale3d/index.md b/files/fr/web/css/transform-function/scale3d/index.md new file mode 100644 index 0000000000..1922243adb --- /dev/null +++ b/files/fr/web/css/transform-function/scale3d/index.md @@ -0,0 +1,152 @@ +--- +title: scale3d() +slug: Web/CSS/transform-function/scale3d +translation_of: Web/CSS/transform-function/scale3d() +original_slug: Web/CSS/transform-function/scale3d() +browser-compat: css.types.transform-function.scale3d +--- +{{CSSRef}} + +La fonction **`scale3d()`** permet de modifier la taille d'un élément en appliquant une homothétie définie par un vecteur. Les composantes de ce vecteur permettent d'appliquer des échelles différentes selon les différentes dimensions. + +{{EmbedInteractiveExample("pages/css/function-scale3d.html")}} + +La transformation appliquée est définie par un vecteur dont les coordonnées définissent l'amplitude de l'homothétie dans chaque direction. Si les trois coordonnées du vecteur sont égales, la transformation est isotropique et la forme de l'élément est conservée. + +Lorsque les composantes du vecteur sont en dehors de l'intervalle `[-1, 1]`, la transformation agrandit l'élément dans le sens des coordonnées. Lorsque les composantes sont dans cet intervalle, cela réduit l'élément. + +## Syntaxe + +La fonction `scale3d()` s'utilise avec trois valeurs dont chacune représente l'intensité de la transformation selon chaque direction. + +```css +scale3d(sx, sy, sz) +``` + +### Valeurs + +- `sx` + - : Une valeur de type [``](/fr/docs/Web/CSS/number) qui représente l'abscisse du vecteur définissant l'homothétie. +- `sy` + - : Une valeur de type [``](/fr/docs/Web/CSS/number) qui représente l'ordonnée du vecteur définissant l'homothétie +- `sz` + - : Une valeur de type [``](/fr/docs/Web/CSS/number) qui représente la composante, selon l'axe Z, du vecteur définissant l'homothétie + + + + + + + + + + + + + + + + + +
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
+ Cette transformation s'applique dans en 3 dimensions et ne peut pas être + représentée sur le plan. + + sx000sy000sz + + sx0000sy0000sz00001 +
+ +## Exemples + +### Avec origine non modifiée + +#### HTML + +```html +
Normal
+
Mis à l'échelle
+``` + +#### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.scaled { + transform: perspective(500px) scale3d(2, 0.7, 0.2) translateZ(100px); + background-color: pink; +} +``` + +#### Résultat + +{{EmbedLiveSample("Avec_origine_non_modifiée","100%","200")}} + +### Avec origine translatée + +#### HTML + +```html +
Normal
+
Mis à l'échelle
+``` + +#### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.scaled { + transform: perspective(500px) scale3d(2, 0.7, 0.2) translateZ(100px); + transform-origin: left; + background-color: pink; +} +``` + +#### Résultat + +{{EmbedLiveSample("Avec_origine_translatée","100%","200")}} + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [`transform`](/fr/docs/Web/CSS/transform) +- [``](/fr/docs/Web/CSS/transform-function) +- [`scaleZ()`](/fr/docs/Web/CSS/transform-function/scaleZ()) +- [`translate3d()`](/fr/docs/Web/CSS/transform-function/translate3d()) +- [`rotate3d()`](/fr/docs/Web/CSS/transform-function/rotate3d()) diff --git a/files/fr/web/css/transform-function/scalex()/index.md b/files/fr/web/css/transform-function/scalex()/index.md deleted file mode 100644 index f55fd09771..0000000000 --- a/files/fr/web/css/transform-function/scalex()/index.md +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: scaleX() -slug: Web/CSS/transform-function/scaleX() -translation_of: Web/CSS/transform-function/scaleX() -browser-compat: css.types.transform-function.scaleX ---- -{{CSSRef}} - -La fonction **`scaleX()`** permet de modifier l'abscisse de chaque sommet de l'élément par un facteur multiplicateur. L'homothétie obtenue n'est pas isotropique et les angles de l'élément ne sont pas conservés. - -![](scalex.png) - -`scaleX(sx)` est une notation raccourcie équivalente à `scale(sx, 1)` ou à `scale3d(sx, 1, 1)`. - -`scaleX(-1)` définit une symétrie axiale par rapport à un axe vertical passant par l'origine du repère (définie grâce à la propriété [`transform-origin`](/fr/docs/Web/CSS/transform-origin)). - -## Syntaxe - -```css -scaleX(s) -``` - -### Valeurs - -- `s` - - : Une valeur de type [``](/fr/docs/Web/CSS/number) qui représente le facteur d'échelle de l'homothétie. - - - - - - - - - - - - - - - - - - - - - -
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
- s0 - 01 - - s00010001 - - s00010001 - - s000010000100001 -
[s 0 0 1 0 0]
- -## Exemples - -### Origine inchangée - -#### HTML - -```html -
Normal
-
Mis à l'échelle
-``` - -#### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.scaled { - transform: scaleX(0.6); - background-color: pink; -} -``` - -#### Résultat - -{{EmbedLiveSample("Origine_inchangée","100%","200")}} - -### Origine déplacée - -#### HTML - -```html -
Normal
-
Mis à l'échelle
-``` - -#### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.scaled { - transform: scaleX(0.6); - transform-origin: left; - background-color: pink; -} -``` - -#### Résultat - -{{EmbedLiveSample("Origine_déplacée","100%","200")}} - -## Spécifications - -{{Specifications}} - -## Compatibilité des navigateurs - -{{Compat}} - -## Voir aussi - -- [`scaleY()`](/fr/docs/Web/CSS/transform-function/scaleY()) -- [`scaleZ()`](/fr/docs/Web/CSS/transform-function/scaleZ()) -- [`transform`](/fr/docs/Web/CSS/transform) -- [``](/fr/docs/Web/CSS/transform-function) -- [`transform-origin`](/fr/docs/Web/CSS/transform-origin) diff --git a/files/fr/web/css/transform-function/scalex/index.md b/files/fr/web/css/transform-function/scalex/index.md new file mode 100644 index 0000000000..09ad4de01b --- /dev/null +++ b/files/fr/web/css/transform-function/scalex/index.md @@ -0,0 +1,166 @@ +--- +title: scaleX() +slug: Web/CSS/transform-function/scaleX +translation_of: Web/CSS/transform-function/scaleX() +original_slug: Web/CSS/transform-function/scaleX() +browser-compat: css.types.transform-function.scaleX +--- +{{CSSRef}} + +La fonction **`scaleX()`** permet de modifier l'abscisse de chaque sommet de l'élément par un facteur multiplicateur. L'homothétie obtenue n'est pas isotropique et les angles de l'élément ne sont pas conservés. + +![](scalex.png) + +`scaleX(sx)` est une notation raccourcie équivalente à `scale(sx, 1)` ou à `scale3d(sx, 1, 1)`. + +`scaleX(-1)` définit une symétrie axiale par rapport à un axe vertical passant par l'origine du repère (définie grâce à la propriété [`transform-origin`](/fr/docs/Web/CSS/transform-origin)). + +## Syntaxe + +```css +scaleX(s) +``` + +### Valeurs + +- `s` + - : Une valeur de type [``](/fr/docs/Web/CSS/number) qui représente le facteur d'échelle de l'homothétie. + + + + + + + + + + + + + + + + + + + + + +
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
+ s0 + 01 + + s00010001 + + s00010001 + + s000010000100001 +
[s 0 0 1 0 0]
+ +## Exemples + +### Origine inchangée + +#### HTML + +```html +
Normal
+
Mis à l'échelle
+``` + +#### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.scaled { + transform: scaleX(0.6); + background-color: pink; +} +``` + +#### Résultat + +{{EmbedLiveSample("Origine_inchangée","100%","200")}} + +### Origine déplacée + +#### HTML + +```html +
Normal
+
Mis à l'échelle
+``` + +#### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.scaled { + transform: scaleX(0.6); + transform-origin: left; + background-color: pink; +} +``` + +#### Résultat + +{{EmbedLiveSample("Origine_déplacée","100%","200")}} + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [`scaleY()`](/fr/docs/Web/CSS/transform-function/scaleY()) +- [`scaleZ()`](/fr/docs/Web/CSS/transform-function/scaleZ()) +- [`transform`](/fr/docs/Web/CSS/transform) +- [``](/fr/docs/Web/CSS/transform-function) +- [`transform-origin`](/fr/docs/Web/CSS/transform-origin) diff --git a/files/fr/web/css/transform-function/scaley()/index.md b/files/fr/web/css/transform-function/scaley()/index.md deleted file mode 100644 index 7120a92d34..0000000000 --- a/files/fr/web/css/transform-function/scaley()/index.md +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: scaleY() -slug: Web/CSS/transform-function/scaleY() -translation_of: Web/CSS/transform-function/scaleY() -browser-compat: css.types.transform-function.scaleY ---- -{{CSSRef}} - -La fonction **`scaleY()`** modifie l'ordonnée de chaque sommet de l'élément avec un facteur multiplicateur. L'homothétie n'est pas isotropique et les angles de l'élément ne sont pas conservés. La valeur obtenue par cette fonction est de type [``](/fr/docs/Web/CSS/transform-function). - -![](scaley.png) - -`scaleY(sy)` est une notation raccourcie équivalente à `scale(1, sy)` ou à `scale3d(1, sy, 1)`. - -`scaleY(-1)` définit une symétrie axiale selon un axe horizontal, passant par l'origine du repère (cette origine est définie grâce à la propriété [`transform-origin`](/fr/docs/Web/CSS/transform-origin)). - -## Syntaxe - -```css -scaleY(s) -``` - -### Valeurs - -- `s` - - : Une valeur de type [``](/fr/docs/Web/CSS/number) qui indique le facteur d'échelle pour l'homothétie. - - - - - - - - - - - - - - - - - - - - - -
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
- 10 - 0s - - 1000s0001 - - 1000s0001 - - 10000s0000100001 -
[1 0 0 s 0 0]
- -## Exemples - -### HTML - -```html -
Normal
-
Mis à l'échelle
-``` - -### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.scaled { - transform: scaleY(0.6); - background-color: pink; -} -``` - -### Résultat - -{{EmbedLiveSample("Exemples","100%","200")}} - -## Spécifications - -{{Specifications}} - -## Compatibilité des navigateurs - -{{Compat}} - -## Voir aussi - -- [`scaleX()`](/fr/docs/Web/CSS/transform-function/scaleX()) -- [`scaleZ()`](/fr/docs/Web/CSS/transform-function/scaleZ()) -- [`transform`](/fr/docs/Web/CSS/transform) -- [``](/fr/docs/Web/CSS/transform-function) -- [`transform-origin`](/fr/docs/Web/CSS/transform-origin) diff --git a/files/fr/web/css/transform-function/scaley/index.md b/files/fr/web/css/transform-function/scaley/index.md new file mode 100644 index 0000000000..289930e313 --- /dev/null +++ b/files/fr/web/css/transform-function/scaley/index.md @@ -0,0 +1,135 @@ +--- +title: scaleY() +slug: Web/CSS/transform-function/scaleY +translation_of: Web/CSS/transform-function/scaleY() +original_slug: Web/CSS/transform-function/scaleY() +browser-compat: css.types.transform-function.scaleY +--- +{{CSSRef}} + +La fonction **`scaleY()`** modifie l'ordonnée de chaque sommet de l'élément avec un facteur multiplicateur. L'homothétie n'est pas isotropique et les angles de l'élément ne sont pas conservés. La valeur obtenue par cette fonction est de type [``](/fr/docs/Web/CSS/transform-function). + +![](scaley.png) + +`scaleY(sy)` est une notation raccourcie équivalente à `scale(1, sy)` ou à `scale3d(1, sy, 1)`. + +`scaleY(-1)` définit une symétrie axiale selon un axe horizontal, passant par l'origine du repère (cette origine est définie grâce à la propriété [`transform-origin`](/fr/docs/Web/CSS/transform-origin)). + +## Syntaxe + +```css +scaleY(s) +``` + +### Valeurs + +- `s` + - : Une valeur de type [``](/fr/docs/Web/CSS/number) qui indique le facteur d'échelle pour l'homothétie. + + + + + + + + + + + + + + + + + + + + + +
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
+ 10 + 0s + + 1000s0001 + + 1000s0001 + + 10000s0000100001 +
[1 0 0 s 0 0]
+ +## Exemples + +### HTML + +```html +
Normal
+
Mis à l'échelle
+``` + +### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.scaled { + transform: scaleY(0.6); + background-color: pink; +} +``` + +### Résultat + +{{EmbedLiveSample("Exemples","100%","200")}} + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [`scaleX()`](/fr/docs/Web/CSS/transform-function/scaleX()) +- [`scaleZ()`](/fr/docs/Web/CSS/transform-function/scaleZ()) +- [`transform`](/fr/docs/Web/CSS/transform) +- [``](/fr/docs/Web/CSS/transform-function) +- [`transform-origin`](/fr/docs/Web/CSS/transform-origin) diff --git a/files/fr/web/css/transform-function/scalez()/index.md b/files/fr/web/css/transform-function/scalez()/index.md deleted file mode 100644 index 3e28f8ab99..0000000000 --- a/files/fr/web/css/transform-function/scalez()/index.md +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: scaleZ() -slug: Web/CSS/transform-function/scaleZ() -translation_of: Web/CSS/transform-function/scaleZ() -browser-compat: css.types.transform-function.scaleZ ---- -{{CSSRef}} - -La fonction **`scaleZ()`** modifie la coordonnée en Z de chaque point de l'élément avec un facteur multiplicateur donné. Si ce facteur vaut 1, l'opération appliquée sera l'identité. L'homothétie n'est pas isotropique et les angles de l'élément ne sont pas conservés. La valeur obtenue par cette fonction est de type [``](/fr/docs/Web/CSS/transform-function). - -{{EmbedInteractiveExample("pages/css/function-scaleZ.html")}} - -`scaleZ(sz)` est une notation raccourcie équivalente à `scale3d(1, 1, sz)`. - -`scaleZ(-1)` définit une symétrie axiale selon l'axe Z qui passe par l'origine (définie grâce à la propriété [`transform-origin`](/fr/docs/Web/CSS/transform-origin)). - -Dans les exemples interactifs ci-avant, `perspective: 500px;` a été utilisée afin de créer un espace en trois dimensions et `transform-style: preserve-3d` permet de positionner les éléments enfants dans cet espace 3D. - -## Syntaxe - -```css -scaleZ(s) -``` - -### Valeurs - -- `s` - - : Une valeur de type [``](/fr/docs/Web/CSS/number) qui représente le facteur d'échelle à appliquer sur la côte (coordonnées en Z) de chaque point de l'élément. - - - - - - - - - - - - - - - - - -
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
- Cette transformation s'applique sur l'espace en trois dimensions et ne - peut donc être représentée sous la forme d'une transformation plane. - - 10001000s - - 1000010000s00001 -
- -## Exemples - -### HTML - -```html -
Normal
-
Avec translation
-
Avec mise à l'échelle
-``` - -### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.perspective { - /* On ajoute une perspective pour créer un volume 3D */ - transform: perspective(400px) translateZ(-100px); - background-color: limegreen; -} - -.scaled-translated { - /* On ajoute une perspective pour créer un volume 3D */ - transform: perspective(400px) scaleZ(2) translateZ(-100px); - background-color: pink; -} -``` - -### Résultat - -{{EmbedLiveSample("Exemples","100%","200")}} - -## Spécifications - -{{Specifications}} - -## Compatibilité des navigateurs - -{{Compat}} - -## Voir aussi - -- [`scaleX()`](/fr/docs/Web/CSS/transform-function/scaleX()) -- [`scaleY()`](/fr/docs/Web/CSS/transform-function/scaleY()) -- [`transform`](/fr/docs/Web/CSS/transform) -- [``](/fr/docs/Web/CSS/transform-function) -- [`transform-origin`](/fr/docs/Web/CSS/transform-origin) diff --git a/files/fr/web/css/transform-function/scalez/index.md b/files/fr/web/css/transform-function/scalez/index.md new file mode 100644 index 0000000000..2ebed9d86d --- /dev/null +++ b/files/fr/web/css/transform-function/scalez/index.md @@ -0,0 +1,125 @@ +--- +title: scaleZ() +slug: Web/CSS/transform-function/scaleZ +translation_of: Web/CSS/transform-function/scaleZ() +original_slug: Web/CSS/transform-function/scaleZ() +browser-compat: css.types.transform-function.scaleZ +--- +{{CSSRef}} + +La fonction **`scaleZ()`** modifie la coordonnée en Z de chaque point de l'élément avec un facteur multiplicateur donné. Si ce facteur vaut 1, l'opération appliquée sera l'identité. L'homothétie n'est pas isotropique et les angles de l'élément ne sont pas conservés. La valeur obtenue par cette fonction est de type [``](/fr/docs/Web/CSS/transform-function). + +{{EmbedInteractiveExample("pages/css/function-scaleZ.html")}} + +`scaleZ(sz)` est une notation raccourcie équivalente à `scale3d(1, 1, sz)`. + +`scaleZ(-1)` définit une symétrie axiale selon l'axe Z qui passe par l'origine (définie grâce à la propriété [`transform-origin`](/fr/docs/Web/CSS/transform-origin)). + +Dans les exemples interactifs ci-avant, `perspective: 500px;` a été utilisée afin de créer un espace en trois dimensions et `transform-style: preserve-3d` permet de positionner les éléments enfants dans cet espace 3D. + +## Syntaxe + +```css +scaleZ(s) +``` + +### Valeurs + +- `s` + - : Une valeur de type [``](/fr/docs/Web/CSS/number) qui représente le facteur d'échelle à appliquer sur la côte (coordonnées en Z) de chaque point de l'élément. + + + + + + + + + + + + + + + + + +
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
+ Cette transformation s'applique sur l'espace en trois dimensions et ne + peut donc être représentée sous la forme d'une transformation plane. + + 10001000s + + 1000010000s00001 +
+ +## Exemples + +### HTML + +```html +
Normal
+
Avec translation
+
Avec mise à l'échelle
+``` + +### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.perspective { + /* On ajoute une perspective pour créer un volume 3D */ + transform: perspective(400px) translateZ(-100px); + background-color: limegreen; +} + +.scaled-translated { + /* On ajoute une perspective pour créer un volume 3D */ + transform: perspective(400px) scaleZ(2) translateZ(-100px); + background-color: pink; +} +``` + +### Résultat + +{{EmbedLiveSample("Exemples","100%","200")}} + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [`scaleX()`](/fr/docs/Web/CSS/transform-function/scaleX()) +- [`scaleY()`](/fr/docs/Web/CSS/transform-function/scaleY()) +- [`transform`](/fr/docs/Web/CSS/transform) +- [``](/fr/docs/Web/CSS/transform-function) +- [`transform-origin`](/fr/docs/Web/CSS/transform-origin) diff --git a/files/fr/web/css/transform-function/skew()/index.md b/files/fr/web/css/transform-function/skew()/index.md deleted file mode 100644 index 600ff281a9..0000000000 --- a/files/fr/web/css/transform-function/skew()/index.md +++ /dev/null @@ -1,174 +0,0 @@ ---- -title: skew() -slug: Web/CSS/transform-function/skew() -translation_of: Web/CSS/transform-function/skew() -browser-compat: css.types.transform-function.skew ---- -{{CSSRef}} - -La fonction **`skew()`** permet d'opérer une distorsion en étirant chaque point de l'élément d'un certain angle dans une direction du plan. Pour cela, on augmente l'ordonnée d'un élément d'une valeur proportionnelle à l'angle donné et à la distance de l'origine. Plus le point est éloigné de l'origine, plus le décalage obtenu sera important. - -{{EmbedInteractiveExample("pages/css/function-skew.html")}} - -La valeur obtenue par cette fonction est de type [``](/fr/docs/Web/CSS/transform-function). - -## Syntaxe - -La fonction `skew()` s'utilise avec une ou deux valeurs qui représente l'intensité de la distorsion appliquée dans chaque direction. Si une seule valeur est fournie, elle sera utilisée pour la distorsion sur l'axe horizontal et il n'y aura pas de distorsion verticale. - -```css -skew(ax) - -skew(ax, ay) -``` - -### Valeurs - -- `ax` - - : Une valeur de type [``](/fr/docs/Web/CSS/angle) qui représente l'angle avec lequel appliquer la distorsion selon l'axe des abscisses (axe horizontal). -- `ay` - - : Une valeur de type [``](/fr/docs/Web/CSS/angle) qui représente l'angle avec lequel appliquer la distorsion selon l'axe des ordonnées (axe vertical). - - - - - - - - - - - - - - - - - - - - - -
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
- 1tan(ax)tan(ay)1 - - 1tan(ax)0tan(ay)10001 - - 1tan(ax)0tan(ay)10001 - - 1tan(ax)00tan(ay)10000100001 -
[1 tan(ay) tan(ax) 1 0 0]
- -## Exemples - -### Utiliser une distorsion horizontale - -#### HTML - -```html -
Normal
-
Distordu
-``` - -#### CSS - -```css -body { - margin: 20px; -} - -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.skewed { - transform: skew(10deg); /* Équivalent à skewX(10deg) */ - background-color: pink; -} -``` - -#### Résultat - -{{EmbedLiveSample("Utiliser_une_distorsion_horizontale","100%","200")}} - -### Utiliser deux angles - -#### HTML - -```html -
Normal
-
Distordu
-``` - -#### CSS - -```css -body { - margin: 20px; -} - -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.skewed { - transform: skew(10deg, 10deg); - background-color: pink; -} -``` - -#### Résultat - -{{EmbedLiveSample("Utiliser_deux_angles","100%","200")}} - -## Spécifications - -{{Specifications}} - -## Compatibilité des navigateurs - -{{Compat}} - -## Voir aussi - -- [`transform`](/fr/docs/Web/CSS/transform) -- [``](/fr/docs/Web/CSS/transform-function) -- [`skewX()`](/fr/docs/Web/CSS/transform-function/skewX()) -- [`skewY()`](/fr/docs/Web/CSS/transform-function/skewY()) diff --git a/files/fr/web/css/transform-function/skew/index.md b/files/fr/web/css/transform-function/skew/index.md new file mode 100644 index 0000000000..7b793247d7 --- /dev/null +++ b/files/fr/web/css/transform-function/skew/index.md @@ -0,0 +1,175 @@ +--- +title: skew() +slug: Web/CSS/transform-function/skew +translation_of: Web/CSS/transform-function/skew() +original_slug: Web/CSS/transform-function/skew() +browser-compat: css.types.transform-function.skew +--- +{{CSSRef}} + +La fonction **`skew()`** permet d'opérer une distorsion en étirant chaque point de l'élément d'un certain angle dans une direction du plan. Pour cela, on augmente l'ordonnée d'un élément d'une valeur proportionnelle à l'angle donné et à la distance de l'origine. Plus le point est éloigné de l'origine, plus le décalage obtenu sera important. + +{{EmbedInteractiveExample("pages/css/function-skew.html")}} + +La valeur obtenue par cette fonction est de type [``](/fr/docs/Web/CSS/transform-function). + +## Syntaxe + +La fonction `skew()` s'utilise avec une ou deux valeurs qui représente l'intensité de la distorsion appliquée dans chaque direction. Si une seule valeur est fournie, elle sera utilisée pour la distorsion sur l'axe horizontal et il n'y aura pas de distorsion verticale. + +```css +skew(ax) + +skew(ax, ay) +``` + +### Valeurs + +- `ax` + - : Une valeur de type [``](/fr/docs/Web/CSS/angle) qui représente l'angle avec lequel appliquer la distorsion selon l'axe des abscisses (axe horizontal). +- `ay` + - : Une valeur de type [``](/fr/docs/Web/CSS/angle) qui représente l'angle avec lequel appliquer la distorsion selon l'axe des ordonnées (axe vertical). + + + + + + + + + + + + + + + + + + + + + +
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
+ 1tan(ax)tan(ay)1 + + 1tan(ax)0tan(ay)10001 + + 1tan(ax)0tan(ay)10001 + + 1tan(ax)00tan(ay)10000100001 +
[1 tan(ay) tan(ax) 1 0 0]
+ +## Exemples + +### Utiliser une distorsion horizontale + +#### HTML + +```html +
Normal
+
Distordu
+``` + +#### CSS + +```css +body { + margin: 20px; +} + +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.skewed { + transform: skew(10deg); /* Équivalent à skewX(10deg) */ + background-color: pink; +} +``` + +#### Résultat + +{{EmbedLiveSample("Utiliser_une_distorsion_horizontale","100%","200")}} + +### Utiliser deux angles + +#### HTML + +```html +
Normal
+
Distordu
+``` + +#### CSS + +```css +body { + margin: 20px; +} + +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.skewed { + transform: skew(10deg, 10deg); + background-color: pink; +} +``` + +#### Résultat + +{{EmbedLiveSample("Utiliser_deux_angles","100%","200")}} + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [`transform`](/fr/docs/Web/CSS/transform) +- [``](/fr/docs/Web/CSS/transform-function) +- [`skewX()`](/fr/docs/Web/CSS/transform-function/skewX()) +- [`skewY()`](/fr/docs/Web/CSS/transform-function/skewY()) diff --git a/files/fr/web/css/transform-function/skewx()/index.md b/files/fr/web/css/transform-function/skewx()/index.md deleted file mode 100644 index e56061b928..0000000000 --- a/files/fr/web/css/transform-function/skewx()/index.md +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: skewX() -slug: Web/CSS/transform-function/skewX() -translation_of: Web/CSS/transform-function/skewX() -browser-compat: css.types.transform-function.skewX ---- -{{CSSRef}} - -La fonction **`skewX()`** permet d'opérer une distorsion horizontale en étirant chaque point de l'élément d'un certain angle dans la direction horizontale. Pour cela, on augmente l'abscisse d'un élément d'une valeur proportionnelle à l'angle donné et à la distance de l'origine. Plus le point est éloigné de l'origine et loin de l'axe, plus le décalage obtenu sera important. - -{{EmbedInteractiveExample("pages/css/function-skewX.html")}} - -La valeur obtenue par cette fonction est de type [``](/fr/docs/Web/CSS/transform-function). - -`skewX(a)` est équivalent à [`skew(a)`](). - -## Syntaxe - -```css -skewX(a) -``` - -### Valeurs - -- `a` - - : Une valeur de type [``](/fr/docs/Web/CSS/angle) qui représente l'angle avec lequel appliquer la distorsion selon l'axe des abscisses (axe horizontal). - - - - - - - - - - - - - - - - - - - - - -
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
- 1tan(ay)01 - - 1tan(ay)0010001 - - 1tan(ay)0010001 - - 1tan(ay)00010000100001 -
[1 0 tan(a) 1 0 0]
- -## Exemples - -### HTML - -```html -
Normal
-
Distordu
-``` - -### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.skewed { - transform: skewX(10deg); /* Équivalent à skew(10deg) */ - background-color: pink; -} -``` - -### Résultat - -{{EmbedLiveSample("Exemples","100%","200")}} - -## Spécifications - -{{Specifications}} - -## Compatibilité des navigateurs - -{{Compat}} - -## Voir aussi - -- [`transform`](/fr/docs/Web/CSS/transform) -- [``](/fr/docs/Web/CSS/transform-function) diff --git a/files/fr/web/css/transform-function/skewx/index.md b/files/fr/web/css/transform-function/skewx/index.md new file mode 100644 index 0000000000..f666f48b7e --- /dev/null +++ b/files/fr/web/css/transform-function/skewx/index.md @@ -0,0 +1,132 @@ +--- +title: skewX() +slug: Web/CSS/transform-function/skewX +translation_of: Web/CSS/transform-function/skewX() +original_slug: Web/CSS/transform-function/skewX() +browser-compat: css.types.transform-function.skewX +--- +{{CSSRef}} + +La fonction **`skewX()`** permet d'opérer une distorsion horizontale en étirant chaque point de l'élément d'un certain angle dans la direction horizontale. Pour cela, on augmente l'abscisse d'un élément d'une valeur proportionnelle à l'angle donné et à la distance de l'origine. Plus le point est éloigné de l'origine et loin de l'axe, plus le décalage obtenu sera important. + +{{EmbedInteractiveExample("pages/css/function-skewX.html")}} + +La valeur obtenue par cette fonction est de type [``](/fr/docs/Web/CSS/transform-function). + +`skewX(a)` est équivalent à [`skew(a)`](). + +## Syntaxe + +```css +skewX(a) +``` + +### Valeurs + +- `a` + - : Une valeur de type [``](/fr/docs/Web/CSS/angle) qui représente l'angle avec lequel appliquer la distorsion selon l'axe des abscisses (axe horizontal). + + + + + + + + + + + + + + + + + + + + + +
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
+ 1tan(ay)01 + + 1tan(ay)0010001 + + 1tan(ay)0010001 + + 1tan(ay)00010000100001 +
[1 0 tan(a) 1 0 0]
+ +## Exemples + +### HTML + +```html +
Normal
+
Distordu
+``` + +### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.skewed { + transform: skewX(10deg); /* Équivalent à skew(10deg) */ + background-color: pink; +} +``` + +### Résultat + +{{EmbedLiveSample("Exemples","100%","200")}} + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [`transform`](/fr/docs/Web/CSS/transform) +- [``](/fr/docs/Web/CSS/transform-function) diff --git a/files/fr/web/css/transform-function/skewy()/index.md b/files/fr/web/css/transform-function/skewy()/index.md deleted file mode 100644 index 5496e7d50e..0000000000 --- a/files/fr/web/css/transform-function/skewy()/index.md +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: skewY() -slug: Web/CSS/transform-function/skewY() -translation_of: Web/CSS/transform-function/skewY() -browser-compat: css.types.transform-function.skewY ---- -{{CSSRef}} - -La fonction **`skewY()`** permet d'opérer une distorsion verticale en étirant chaque point de l'élément d'un certain angle dans la direction verticale. Pour cela, on augmente l'ordonnée d'un élément d'une valeur proportionnelle à l'angle donné et à la distance de l'origine. Plus le point est éloigné de l'origine et loin de l'axe, plus le décalage obtenu sera important. - -{{EmbedInteractiveExample("pages/css/function-skewY.html")}} - -La valeur obtenue par cette fonction est de type [``](/fr/docs/Web/CSS/transform-function). - -## Syntaxe - -```css -skewY(a) -``` - -### Valeurs - -- `a` - - : Une valeur de type [``](/fr/docs/Web/CSS/angle) qui représente l'angle avec lequel appliquer la distorsion selon l'axe des ordonnées (axe vertical). - - - - - - - - - - - - - - - - - - - - - -
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
- 10tan(ax)1 - - 100tan(ax)10001 - - 100tan(ax)10001 - - 1000tan(ax)10000100001 -
[1 tan(a) 0 1 0 0]
- -## Exemples - -### HTML - -```html -
Normal
-
Distordu
-``` - -### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.skewed { - transform: skewY(40deg); - background-color: pink; -} -``` - -### Résultat - -{{EmbedLiveSample("Exemples","100%","250")}} - -## Specifications - -{{Specifications}} - -## Compatibilité des navigateurs - -{{Compat}} - -## Voir aussi - -- [`transform`](/fr/docs/Web/CSS/transform) -- [``](/fr/docs/Web/CSS/transform-function) diff --git a/files/fr/web/css/transform-function/translate()/index.md b/files/fr/web/css/transform-function/translate()/index.md deleted file mode 100644 index 8c2bb5b265..0000000000 --- a/files/fr/web/css/transform-function/translate()/index.md +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: translate() -slug: Web/CSS/transform-function/translate() -translation_of: Web/CSS/transform-function/translate() -browser-compat: css.types.transform-function.translate ---- -{{CSSRef}} - -La fonction **`translate()`** permet de déplacer un élément sur le plan représenté par le document. Cette transformation est définie à l'aide d'un vecteur dont les coordonnées définissent la quantité de déplacement sur chaque axe (horizontal et vertical). - -![](translate.png) - -La valeur obtenue par cette fonction est de type [``](/fr/docs/Web/CSS/transform-function). - -## Syntaxe - -```css -/* Avec une seule valeur */ -transform: translate(200px); -transform: translate(50%); - -/* Avec deux valeurs */ -transform: translate(100px, 200px); -transform: translate(100px, 50%); -transform: translate(30%, 200px); -transform: translate(30%, 50%); -``` -### Valeurs - -- Avec une seule valeur `` - - : Cette valeur est de type [``](/fr/docs/Web/CSS/length) ou [``](/fr/docs/Web/CSS/percentage) et représente l'abscisse (la coordonnée horizontale) du vecteur de translation. La composante verticale du vecteur de translation sera nulle. Ainsi, `translate(2px)` est équivalent à `translate(2px, 0)`. Une valeur en pourcentage sera relative à la largeur de la boîte de référence définie par la propriété [`transform-box`](/fr/docs/Web/CSS/transform-box). -- Avec deux valeurs `` - - : Ces valeurs sont de type [``](/fr/docs/Web/CSS/length) ou [``](/fr/docs/Web/CSS/percentage) et décrivent respectivement l'abscisse (la coordonnée horizontale) et l'ordonnée (la coordonnée verticale) du vecteur de translation. Un premier pourcentage sera relatif à la largeur de la boîte de référence et un deuxième pourcentage sera relatif à sa hauteur (la boîte de référence étant définie par la propriété [`transform-box`](/fr/docs/Web/CSS/transform-box)). - - - - - - - - - - - - - - - - - - - - - -
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
-

- Une translation plane n'est pas une transformation linéaire de ℝ2 - et ne peut donc pas être représentée sous la forme d'une matrice dans - le système cartésien. -

- 		- 10tx01ty001 - - 10tx01ty001 - - 100tx010ty00100001 -
[1 0 0 1 tx ty]
- -## Exemples - -### Définir une translation horizontale - -#### HTML - -```html -
Statique
-
Déplacé
-
Statique
-``` - -#### CSS - -```css -div { - width: 60px; - height: 60px; - background-color: skyblue; -} - -.moved { - transform: translate(10px); /* Équivalent à : translateX(10px) ou translate(10px, 0) */ - background-color: pink; -} -``` - -#### Résultat - -{{EmbedLiveSample("Définir_une_translation_horizontale","100%","250")}} - -### Définir une translation sur les deux axes - -#### HTML - -```html -
Statique
-
Déplacé
-
Statique
-``` - -#### CSS - -```css -div { - width: 60px; - height: 60px; - background-color: skyblue; -} - -.moved { - transform: translate(10px, 10px); - background-color: pink; -} -``` - -#### Résultat - -{{EmbedLiveSample("Définir_une_translation_sur_les_deux_axes","100%","250")}} - -## Spécifications - -{{Specifications}} - -## Compatibilité des navigateurs - -{{Compat}} - -## Voir aussi - -- [`transform`](/fr/docs/Web/CSS/transform) -- [``](/fr/docs/Web/CSS/transform-function) diff --git a/files/fr/web/css/transform-function/translate/index.md b/files/fr/web/css/transform-function/translate/index.md new file mode 100644 index 0000000000..38c4503bb0 --- /dev/null +++ b/files/fr/web/css/transform-function/translate/index.md @@ -0,0 +1,170 @@ +--- +title: translate() +slug: Web/CSS/transform-function/translate +translation_of: Web/CSS/transform-function/translate() +original_slug: Web/CSS/transform-function/translate() +browser-compat: css.types.transform-function.translate +--- +{{CSSRef}} + +La fonction **`translate()`** permet de déplacer un élément sur le plan représenté par le document. Cette transformation est définie à l'aide d'un vecteur dont les coordonnées définissent la quantité de déplacement sur chaque axe (horizontal et vertical). + +![](translate.png) + +La valeur obtenue par cette fonction est de type [``](/fr/docs/Web/CSS/transform-function). + +## Syntaxe + +```css +/* Avec une seule valeur */ +transform: translate(200px); +transform: translate(50%); + +/* Avec deux valeurs */ +transform: translate(100px, 200px); +transform: translate(100px, 50%); +transform: translate(30%, 200px); +transform: translate(30%, 50%); +``` +### Valeurs + +- Avec une seule valeur `` + - : Cette valeur est de type [``](/fr/docs/Web/CSS/length) ou [``](/fr/docs/Web/CSS/percentage) et représente l'abscisse (la coordonnée horizontale) du vecteur de translation. La composante verticale du vecteur de translation sera nulle. Ainsi, `translate(2px)` est équivalent à `translate(2px, 0)`. Une valeur en pourcentage sera relative à la largeur de la boîte de référence définie par la propriété [`transform-box`](/fr/docs/Web/CSS/transform-box). +- Avec deux valeurs `` + - : Ces valeurs sont de type [``](/fr/docs/Web/CSS/length) ou [``](/fr/docs/Web/CSS/percentage) et décrivent respectivement l'abscisse (la coordonnée horizontale) et l'ordonnée (la coordonnée verticale) du vecteur de translation. Un premier pourcentage sera relatif à la largeur de la boîte de référence et un deuxième pourcentage sera relatif à sa hauteur (la boîte de référence étant définie par la propriété [`transform-box`](/fr/docs/Web/CSS/transform-box)). + + + + + + + + + + + + + + + + + + + + + +
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
+

+ Une translation plane n'est pas une transformation linéaire de ℝ2 + et ne peut donc pas être représentée sous la forme d'une matrice dans + le système cartésien. +

+ 		+ 10tx01ty001 + + 10tx01ty001 + + 100tx010ty00100001 +
[1 0 0 1 tx ty]
+ +## Exemples + +### Définir une translation horizontale + +#### HTML + +```html +
Statique
+
Déplacé
+
Statique
+``` + +#### CSS + +```css +div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: translate(10px); /* Équivalent à : translateX(10px) ou translate(10px, 0) */ + background-color: pink; +} +``` + +#### Résultat + +{{EmbedLiveSample("Définir_une_translation_horizontale","100%","250")}} + +### Définir une translation sur les deux axes + +#### HTML + +```html +
Statique
+
Déplacé
+
Statique
+``` + +#### CSS + +```css +div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: translate(10px, 10px); + background-color: pink; +} +``` + +#### Résultat + +{{EmbedLiveSample("Définir_une_translation_sur_les_deux_axes","100%","250")}} + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [`transform`](/fr/docs/Web/CSS/transform) +- [``](/fr/docs/Web/CSS/transform-function) diff --git a/files/fr/web/css/transform-function/translate3d()/index.md b/files/fr/web/css/transform-function/translate3d()/index.md deleted file mode 100644 index f70578696e..0000000000 --- a/files/fr/web/css/transform-function/translate3d()/index.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: translate3d() -slug: Web/CSS/transform-function/translate3d() -translation_of: Web/CSS/transform-function/translate3d() -browser-compat: css.types.transform-function.translate3d ---- -{{CSSRef}} - -La fonction CSS **`translate3d()`** permet de déplacer un élément dans l'espace tridimensionnel. Cette transformation est définie à l'aide d'un vecteur dont les coordonnées définissent l'amplitude du déplacement pour chaque direction. - -{{EmbedInteractiveExample("pages/css/function-translate3d.html")}} - -La valeur obtenue par cette fonction est de type [``](/fr/docs/Web/CSS/transform-function). - -## Syntaxe - -```css -translate3d(tx, ty, tz) -``` - -### Valeurs - -- `tx` - - : Une valeur de type [``](/fr/docs/Web/CSS/length) ou [``](/fr/docs/Web/CSS/percentage) qui représente l'abscisse du vecteur de translation (équivalente au déplacement horizontal). -- `ty` - - : Une valeur de type [``](/fr/docs/Web/CSS/length) ou [``](/fr/docs/Web/CSS/percentage) qui représente l'ordonnée du vecteur de translation (équivalente au déplacement vertical). -- `tz` - - : Une valeur de type [``](/fr/docs/Web/CSS/length) qui représente la composante en profondeur du vecteur de translation (équivalente au déplacement en profondeur). La valeur ne peut pas être de type [``](/fr/docs/Web/CSS/percentage), si c'est le cas, la règle décrivant la transformation sera considérée comme invalide. - - - - - - - - - - - - - - - - - -
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
-

- Cette transformation s'applique en trois dimensions et ne peut donc - être représentée sur le plan. -

- 		- Une translation n'est pas une transformation linéaire de ℝ3 - et ne peut donc pas être représentée par une matrice dans le système - cartésien. - - 100tx010ty001tz0001 -
- -## Exemples - -### Définir une translation sur un seul axe - -#### HTML - -```html -
Statique
-
Déplacé
-
Statique
-``` - -#### CSS - -```css -div { - width: 60px; - height: 60px; - background-color: skyblue; -} - -.moved { - transform: perspective(500px) translate3d(10px,0px,0px); - /* Équivalent à perspective(500px) translateX(10px)*/ - background-color: pink; -} -``` - -#### Résultat - -{{EmbedLiveSample("Définir_une_translation_sur_un_seul_axe","100%","250")}} - -### Définir une translation sur les axes X et Z - -#### HTML - -```html -
Statique
-
Déplacé
-
Statique
-``` - -#### CSS - -```css -div { - width: 60px; - height: 60px; - background-color: skyblue; -} - -.moved { - transform: perspective(500px) translate3d(10px, 0, 100px); - background-color: pink; -} -``` - -#### Résultat - -{{EmbedLiveSample("Définir_une_translation_sur_les_axes_X_et_Z","100%","250")}} - -## Spécifications - -{{Specifications}} - -## Compatibilité des navigateurs - -{{Compat}} - -## Voir aussi - -- [`transform`](/fr/docs/Web/CSS/transform) -- [``](/fr/docs/Web/CSS/transform-function) diff --git a/files/fr/web/css/transform-function/translate3d/index.md b/files/fr/web/css/transform-function/translate3d/index.md new file mode 100644 index 0000000000..d8bc84c588 --- /dev/null +++ b/files/fr/web/css/transform-function/translate3d/index.md @@ -0,0 +1,143 @@ +--- +title: translate3d() +slug: Web/CSS/transform-function/translate3d +translation_of: Web/CSS/transform-function/translate3d() +original_slug: Web/CSS/transform-function/translate3d() +browser-compat: css.types.transform-function.translate3d +--- +{{CSSRef}} + +La fonction CSS **`translate3d()`** permet de déplacer un élément dans l'espace tridimensionnel. Cette transformation est définie à l'aide d'un vecteur dont les coordonnées définissent l'amplitude du déplacement pour chaque direction. + +{{EmbedInteractiveExample("pages/css/function-translate3d.html")}} + +La valeur obtenue par cette fonction est de type [``](/fr/docs/Web/CSS/transform-function). + +## Syntaxe + +```css +translate3d(tx, ty, tz) +``` + +### Valeurs + +- `tx` + - : Une valeur de type [``](/fr/docs/Web/CSS/length) ou [``](/fr/docs/Web/CSS/percentage) qui représente l'abscisse du vecteur de translation (équivalente au déplacement horizontal). +- `ty` + - : Une valeur de type [``](/fr/docs/Web/CSS/length) ou [``](/fr/docs/Web/CSS/percentage) qui représente l'ordonnée du vecteur de translation (équivalente au déplacement vertical). +- `tz` + - : Une valeur de type [``](/fr/docs/Web/CSS/length) qui représente la composante en profondeur du vecteur de translation (équivalente au déplacement en profondeur). La valeur ne peut pas être de type [``](/fr/docs/Web/CSS/percentage), si c'est le cas, la règle décrivant la transformation sera considérée comme invalide. + + + + + + + + + + + + + + + + + +
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
+

+ Cette transformation s'applique en trois dimensions et ne peut donc + être représentée sur le plan. +

+ 		+ Une translation n'est pas une transformation linéaire de ℝ3 + et ne peut donc pas être représentée par une matrice dans le système + cartésien. + + 100tx010ty001tz0001 +
+ +## Exemples + +### Définir une translation sur un seul axe + +#### HTML + +```html +
Statique
+
Déplacé
+
Statique
+``` + +#### CSS + +```css +div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: perspective(500px) translate3d(10px,0px,0px); + /* Équivalent à perspective(500px) translateX(10px)*/ + background-color: pink; +} +``` + +#### Résultat + +{{EmbedLiveSample("Définir_une_translation_sur_un_seul_axe","100%","250")}} + +### Définir une translation sur les axes X et Z + +#### HTML + +```html +
Statique
+
Déplacé
+
Statique
+``` + +#### CSS + +```css +div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: perspective(500px) translate3d(10px, 0, 100px); + background-color: pink; +} +``` + +#### Résultat + +{{EmbedLiveSample("Définir_une_translation_sur_les_axes_X_et_Z","100%","250")}} + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [`transform`](/fr/docs/Web/CSS/transform) +- [``](/fr/docs/Web/CSS/transform-function) diff --git a/files/fr/web/css/transform-function/translatex()/index.md b/files/fr/web/css/transform-function/translatex()/index.md deleted file mode 100644 index e56ae4d35e..0000000000 --- a/files/fr/web/css/transform-function/translatex()/index.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: translateX() -slug: Web/CSS/transform-function/translateX() -translation-of: Web/CSS/transform-function/translateX() -browser-compat: css.types.transform-function.translateX ---- -{{CSSRef}} - -La fonction CSS **`translateX()`** permet d'appliquer une translation en 2D. La valeur obtenue sera du type [``](/fr/docs/Web/CSS/transform-function). - -![](transform-functions-translatex_2.png) - -> **Note :** `translateX(tx)` est équivalent à `translate(tx, 0)` ou `translate3d(tx, 0, 0)`. - -## Syntaxe - -```css -/* Valeurs de type */ -transform: translateX(200px); -transform: translateX(50%); -``` - -### Values - -- `` - - : Une valeur exprimant une longueur (type [``](/fr/docs/Web/CSS/length)) ou un pourcentage ([``](/fr/docs/Web/CSS/percentage)) qui représente la composante horizontale du vecteur de translation. Lorsque la valeur est un pourcentage, elle est relative à la largeur de la boîte de référence définie par la propriété [`transform-box`](/fr/docs/Web/CSS/transform-box). - - - - - - - - - - - - - - - - - - - - - -
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2
-

- Une translation n'étant pas une transformation linéaire pour ℝ2, elle ne peut pas être représentée par une matrice avec des coordonnées cartésiennes. -

- 		- 1 0 t 0 1 0 0 0 1 - - 1 0 t 0 1 0 0 0 1 - - 1 0 0 t 0 1 0 0 0 0 1 0 0 0 0 1 -
[1 0 0 1 t 0]
- -### Syntaxe formelle - -```css -translateX([``](/fr/docs/Web/CSS/length-percentage)) -``` - -## Exemples - -### HTML - -```html -
Statique
-
Déplacé
-
Statique
-``` - -### CSS - -```css -div { - width: 60px; - height: 60px; - background-color: skyblue; -} - -.moved { - transform: translateX(10px); /* Équivalent à translate(10px) */ - background-color: pink; -} -``` - -### Résultat - -{{EmbedLiveSample("Exemples", 250, 250)}} - -## Spécifications - -{{Specifications}} - -## Compatibilité des navigateurs - -{{Compat}} - -## Voir aussi - -- [`translate()`](/fr/docs/Web/CSS/transform-function/translate) -- [`translateY()`](/fr/docs/Web/CSS/transform-function/translateY) -- [`transform`](/fr/docs/Web/CSS/transform) -- [``](/fr/docs/Web/CSS/transform-function) diff --git a/files/fr/web/css/transform-function/translatex/index.md b/files/fr/web/css/transform-function/translatex/index.md new file mode 100644 index 0000000000..027f1ba718 --- /dev/null +++ b/files/fr/web/css/transform-function/translatex/index.md @@ -0,0 +1,156 @@ +--- +title: translateX() +slug: Web/CSS/transform-function/translateX +original_slug: Web/CSS/transform-function/translateX() +browser-compat: css.types.transform-function.translateX +--- +{{CSSRef}} + +La fonction CSS **`translateX()`** permet d'appliquer une translation en 2D. La valeur obtenue sera du type [``](/fr/docs/Web/CSS/transform-function). + +![](transform-functions-translatex_2.png) + +> **Note :** `translateX(tx)` est équivalent à `translate(tx, 0)` ou `translate3d(tx, 0, 0)`. + +## Syntaxe + +```css +/* Valeurs de type */ +transform: translateX(200px); +transform: translateX(50%); +``` + +### Values + +- `` + - : Une valeur exprimant une longueur (type [``](/fr/docs/Web/CSS/length)) ou un pourcentage ([``](/fr/docs/Web/CSS/percentage)) qui représente la composante horizontale du vecteur de translation. Lorsque la valeur est un pourcentage, elle est relative à la largeur de la boîte de référence définie par la propriété [`transform-box`](/fr/docs/Web/CSS/transform-box). + + + + + + + + + + + + + + + + + + + + + +
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2
+

+ Une translation n'étant pas une transformation linéaire pour ℝ2, elle ne peut pas être représentée par une matrice avec des coordonnées cartésiennes. +

+ 		+ 1 0 t 0 1 0 0 0 1 + + 1 0 t 0 1 0 0 0 1 + + 1 0 0 t 0 1 0 0 0 0 1 0 0 0 0 1 +
[1 0 0 1 t 0]
+ +### Syntaxe formelle + +```css +translateX([``](/fr/docs/Web/CSS/length-percentage)) +``` + +## Exemples + +### HTML + +```html +
Statique
+
Déplacé
+
Statique
+``` + +### CSS + +```css +div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: translateX(10px); /* Équivalent à translate(10px) */ + background-color: pink; +} +``` + +### Résultat + +{{EmbedLiveSample("Exemples", 250, 250)}} + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [`translate()`](/fr/docs/Web/CSS/transform-function/translate) +- [`translateY()`](/fr/docs/Web/CSS/transform-function/translateY) +- [`transform`](/fr/docs/Web/CSS/transform) +- [``](/fr/docs/Web/CSS/transform-function) diff --git a/files/fr/web/css/transform-function/translatey()/index.md b/files/fr/web/css/transform-function/translatey()/index.md deleted file mode 100644 index e2c7779624..0000000000 --- a/files/fr/web/css/transform-function/translatey()/index.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: translateY() -slug: Web/CSS/transform-function/translateY() -translation_of: Web/CSS/transform-function/translateY() -browser-compat: css.types.transform-function.translateY ---- -{{CSSRef}} - -La fonction **`translateY()`** permet de déplacer un élement verticalement sur le plan. Cette transformation est caractérisée par une longueur (type [``](/fr/docs/Web/CSS/length)) qui définit l'amplitude du déplacement. La valeur obtenue par cette fonction est de type [``](/fr/docs/Web/CSS/transform-function). - -![](translatey.png) - -`translateY(ty)` est une notation raccourcie équivalente à `translate(0, ty)`. - -## Syntaxe - -```css -/* Valeurs de type */ -transform: translateY(200px); -transform: translateY(50%); -``` - -### Valeurs - -- `t` - - : Une valeur de type [``](/fr/docs/Web/CSS/length) qui représente l'ordonnée du vecteur de translation (la composante en Y). - - - - - - - - - - - - - - - - - - - - - -
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
-

- Une translation n'est pas une transformation linéaire sur ℝ2 - et on ne peut donc pas la représenter en utilisant une matrice - exprimée dans le système cartésien. -

- 		- 10001t001 - - 10001t001 - - 1000010t00100001 -
[1 0 0 1 0 t]
- -### Syntaxe formelle - -```css -translateY([``](/fr/docs/Web/CSS/length-percentage)) -``` - -## Exemples - -### HTML - -```html -
Statique
-
Déplacé
-
Statique
-``` - -### CSS - -```css -div { - width: 60px; - height: 60px; - background-color: skyblue; -} - -.moved { - transform: translateY(10px); - background-color: pink; -} -``` - -### Résultat - -{{EmbedLiveSample("Exemples","100%","250")}} - -## Spécifications - -{{Specifications}} - -## Compatibilité des navigateurs - -{{Compat}} - -## Voir aussi - -- [`transform`](/fr/docs/Web/CSS/transform) -- [``](/fr/docs/Web/CSS/transform-function) diff --git a/files/fr/web/css/transform-function/translatey/index.md b/files/fr/web/css/transform-function/translatey/index.md new file mode 100644 index 0000000000..1f231b4d0d --- /dev/null +++ b/files/fr/web/css/transform-function/translatey/index.md @@ -0,0 +1,140 @@ +--- +title: translateY() +slug: Web/CSS/transform-function/translateY +translation_of: Web/CSS/transform-function/translateY() +original_slug: Web/CSS/transform-function/translateY() +browser-compat: css.types.transform-function.translateY +--- +{{CSSRef}} + +La fonction **`translateY()`** permet de déplacer un élement verticalement sur le plan. Cette transformation est caractérisée par une longueur (type [``](/fr/docs/Web/CSS/length)) qui définit l'amplitude du déplacement. La valeur obtenue par cette fonction est de type [``](/fr/docs/Web/CSS/transform-function). + +![](translatey.png) + +`translateY(ty)` est une notation raccourcie équivalente à `translate(0, ty)`. + +## Syntaxe + +```css +/* Valeurs de type */ +transform: translateY(200px); +transform: translateY(50%); +``` + +### Valeurs + +- `t` + - : Une valeur de type [``](/fr/docs/Web/CSS/length) qui représente l'ordonnée du vecteur de translation (la composante en Y). + + + + + + + + + + + + + + + + + + + + + +
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
+

+ Une translation n'est pas une transformation linéaire sur ℝ2 + et on ne peut donc pas la représenter en utilisant une matrice + exprimée dans le système cartésien. +

+ 		+ 10001t001 + + 10001t001 + + 1000010t00100001 +
[1 0 0 1 0 t]
+ +### Syntaxe formelle + +```css +translateY([``](/fr/docs/Web/CSS/length-percentage)) +``` + +## Exemples + +### HTML + +```html +
Statique
+
Déplacé
+
Statique
+``` + +### CSS + +```css +div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: translateY(10px); + background-color: pink; +} +``` + +### Résultat + +{{EmbedLiveSample("Exemples","100%","250")}} + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [`transform`](/fr/docs/Web/CSS/transform) +- [``](/fr/docs/Web/CSS/transform-function) diff --git a/files/fr/web/css/transform-function/translatez()/index.md b/files/fr/web/css/transform-function/translatez()/index.md deleted file mode 100644 index fb4b9fe811..0000000000 --- a/files/fr/web/css/transform-function/translatez()/index.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: translateZ() -slug: Web/CSS/transform-function/translateZ() -translation_of: Web/CSS/transform-function/translateZ() -browser-compat: css.types.transform-function.translateZ ---- -{{CSSRef}} - -La fonction **`translateZ()`** permet de déplacer un élément selon l'axe z de l'espace tridimensionnel. Cette transformation est caractérisée par une valeur de longueur (type [``](/fr/docs/Web/CSS/length)) qui définit l'amplitude du mouvement. La valeur obtenue par cette fonction est de type [``](/fr/docs/Web/CSS/transform-function). - -{{EmbedInteractiveExample("pages/css/function-translateZ.html")}} - -`translateZ(tz)` est un raccourci équivalent à `translate3d(0, 0, tz)`. - -Dans les exemples interactifs ci-avant, `perspective: 500px;` a été utilisée afin de créer un espace en trois dimensions et `transform-style: preserve-3d` permet de positionner les éléments enfants (les 6 faces du cube) dans cet espace 3D. - -## Syntaxe - -```css -translateZ(tz) -``` - -### Valeurs - -- `t` - - : Une valeur de type [``](/fr/docs/Web/CSS/length) qui représente la composante en Z du vecteur de translation appliqué. Cet argument ne peut pas être de type [``](/fr/docs/Web/CSS/percentage), si c'est le cas, la propriété qui contient la transformation est considérée comme invalide. - - - - - - - - - - - - - - - - - -
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
- Cette transformation s'applique en trois dimensions et ne peut donc être - représentée sur un plan. - - Une translation n'est pas une transformation linéaire sur ℝ3 - et ne peut donc pas être représentée avec une matrice dans le système - cartésien. - - 10000100001t0001 -
- -## Exemples - -### HTML - -```html -
Statique
-
Déplacé
-``` - -### CSS - -```css -div { - position: relative; - width: 60px; - height: 60px; - left: 100px; - background-color: skyblue; -} - -.moved { - /* On ajoute une perspective pour créer un */ - /* espace 3D. L'utilisateur regarde « depuis »*/ - /* 500px et on avance l'élément vers l'utili- */ - /* sateur de 200px */ - transform: perspective(500px) translateZ(200px); - background-color: pink; -} -``` - -### Résultat - -{{EmbedLiveSample("Exemples")}} - -Si la valeur fournie à `perspective()` est inférieure à l'argument de `translateZ()` (ex. `transform: perspective(200px) translateZ(300px);`), l'élément transformé ne sera pas visible, car il sera situé au-delà de l'espace projeté sur l'écran. Plus l'écart entre ces deux arguments est faible, plus l'élément paraîtra proche de l'utilisateur. - -## Spécifications - -{{Specifications}} - -## Compatibilité des navigateurs - -{{Compat}} - -## Voir aussi - -- [``](/fr/docs/Web/CSS/transform-function) -- [Les transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms) -- [`transform`](/fr/docs/Web/CSS/transform) -- [`translateX()`](/fr/docs/Web/CSS/transform-function/translateX()) et [`translateY()`](/fr/docs/Web/CSS/transform-function/translateY()) \ No newline at end of file diff --git a/files/fr/web/css/transform-function/translatez/index.md b/files/fr/web/css/transform-function/translatez/index.md new file mode 100644 index 0000000000..86e533d69c --- /dev/null +++ b/files/fr/web/css/transform-function/translatez/index.md @@ -0,0 +1,116 @@ +--- +title: translateZ() +slug: Web/CSS/transform-function/translateZ +translation_of: Web/CSS/transform-function/translateZ() +original_slug: Web/CSS/transform-function/translateZ() +browser-compat: css.types.transform-function.translateZ +--- +{{CSSRef}} + +La fonction **`translateZ()`** permet de déplacer un élément selon l'axe z de l'espace tridimensionnel. Cette transformation est caractérisée par une valeur de longueur (type [``](/fr/docs/Web/CSS/length)) qui définit l'amplitude du mouvement. La valeur obtenue par cette fonction est de type [``](/fr/docs/Web/CSS/transform-function). + +{{EmbedInteractiveExample("pages/css/function-translateZ.html")}} + +`translateZ(tz)` est un raccourci équivalent à `translate3d(0, 0, tz)`. + +Dans les exemples interactifs ci-avant, `perspective: 500px;` a été utilisée afin de créer un espace en trois dimensions et `transform-style: preserve-3d` permet de positionner les éléments enfants (les 6 faces du cube) dans cet espace 3D. + +## Syntaxe + +```css +translateZ(tz) +``` + +### Valeurs + +- `t` + - : Une valeur de type [``](/fr/docs/Web/CSS/length) qui représente la composante en Z du vecteur de translation appliqué. Cet argument ne peut pas être de type [``](/fr/docs/Web/CSS/percentage), si c'est le cas, la propriété qui contient la transformation est considérée comme invalide. + + + + + + + + + + + + + + + + + +
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
+ Cette transformation s'applique en trois dimensions et ne peut donc être + représentée sur un plan. + + Une translation n'est pas une transformation linéaire sur ℝ3 + et ne peut donc pas être représentée avec une matrice dans le système + cartésien. + + 10000100001t0001 +
+ +## Exemples + +### HTML + +```html +
Statique
+
Déplacé
+``` + +### CSS + +```css +div { + position: relative; + width: 60px; + height: 60px; + left: 100px; + background-color: skyblue; +} + +.moved { + /* On ajoute une perspective pour créer un */ + /* espace 3D. L'utilisateur regarde « depuis »*/ + /* 500px et on avance l'élément vers l'utili- */ + /* sateur de 200px */ + transform: perspective(500px) translateZ(200px); + background-color: pink; +} +``` + +### Résultat + +{{EmbedLiveSample("Exemples")}} + +Si la valeur fournie à `perspective()` est inférieure à l'argument de `translateZ()` (ex. `transform: perspective(200px) translateZ(300px);`), l'élément transformé ne sera pas visible, car il sera situé au-delà de l'espace projeté sur l'écran. Plus l'écart entre ces deux arguments est faible, plus l'élément paraîtra proche de l'utilisateur. + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [``](/fr/docs/Web/CSS/transform-function) +- [Les transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms) +- [`transform`](/fr/docs/Web/CSS/transform) +- [`translateX()`](/fr/docs/Web/CSS/transform-function/translateX()) et [`translateY()`](/fr/docs/Web/CSS/transform-function/translateY()) diff --git a/files/fr/web/css/url()/index.md b/files/fr/web/css/url()/index.md deleted file mode 100644 index d914cc0ee0..0000000000 --- a/files/fr/web/css/url()/index.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -title: url() -slug: Web/CSS/url() -translation_of: Web/CSS/url() -browser-compat: css.types.url ---- -{{CSSRef}} - -La fonction [CSS](/fr/docs/Web/CSS) **`url()`** est utilisée afin d'inclure un fichier. Le paramètre est une URL absolue, une URL relative ou un URI de donnée. La fonction **`url()`** peut être utilisée comme paramètre d'une autre fonction comme [`attr()`](/fr/docs/Web/CSS/attr()). Selon la propriété pour laquelle elle est utilisée, la ressource utilisée peut être une image, une police ou une feuille de style. - -La notation fonctionnelle `url()` correspond au type de donnée CSS ``. - -> **Note :** Il y a une différence entre un URI et une URL. Un URI identifie une ressource. Une URL est un type d'URI qui décrit _l'emplacement_ d'une ressource. Un URI peut être une URL ou un nom (URN) d'une ressource. -> -> Pour la spécification CSS de niveau 1, la notation fonctionnelle `url()` ne décrivaient que des URL au sens strict. Pour la spécification CSS de niveau 2, la définition de `url()` a été étendue afin de décrire n'importe quel URI (que ce soit une URL ou un URN). Cela a été une source de confusion, car `url()` pouvait être utilisée pour créer un type de données ``. Cette évolution était non seulement étrange mais aussi superflue, car les URN ne sont quasiment jamais utilisées dans du CSS réel. Pour éviter cette confusion, la spécification CSS de niveau 3 est revenue à la définition initiale. Aujourd'hui, `url()` ne manipule que des vraies ``. - -```css -/* Utilisation simple */ -url(https://example.com/images/monImg.jpg); -url(data:image/png;base64,iRxVB0…); -url(maPolice.woff); -url(#IDdeCheminSVG); - -/* Propriétés utilisables */ -background-image: url("star.gif"); -list-style-image: url('../images/bullet.jpg'); -content: url("pdficon.jpg"); -cursor: url(moncurseur.cur); -border-image-source: url(/media/diamonds.png); -src: url('superpolice.woff'); -offset-path: url(#path); -mask-image: url("masques.svg#masque1"); - -/* Propriétés avec valeurs de recours */ -cursor: url(pointer.cur), pointer - -/* Propriétés raccourcies associées */ -background: url('star.gif') bottom right repeat-x blue; -border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space; - -/* Utilisation comme paramètre d'une fonction CSS */ -background-image: cross-fade(20% url(first.png), url(second.png)); -mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent)); - -/* Utilisation avec plusieurs valeurs */ -content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); - -/* Règles @ / at-rules */ -@document url("https://www.example.com/") { ... } /* expérimental */ -@import url("https://www.example.com/style.css"); -@namespace url(http://www.w3.org/1999/xhtml); -``` - -Lorsque des URL relatives sont utilisées, elles sont relatives à l'URL de la feuille de style et pas à celle de la page web courante. - -La fonction **`url()`** peut être incluse comme valeur pour les propriétés [`background`](/fr/docs/Web/CSS/background), [`background-image`](/fr/docs/Web/CSS/background-image), [`border`](/fr/docs/Web/CSS/border), [`border-image`](/fr/docs/Web/CSS/border-image), [`border-image-source`](/fr/docs/Web/CSS/border-image-source), [`content`](/fr/docs/Web/CSS/content), [`cursor`](/fr/docs/Web/CSS/cursor), [`filter`](/fr/docs/Web/CSS/filter), [`list-style`](/fr/docs/Web/CSS/list-style), [`list-style-image`](/fr/docs/Web/CSS/list-style-image), [`mask`](/fr/docs/Web/CSS/mask), [`mask-image`](/fr/docs/Web/CSS/mask-image), [`offset-path`](/fr/docs/Web/CSS/offset-path), comme descripteur [`src`](/fr/docs/Web/CSS/@font-face/src) pour une règle [`@font-face`](/fr/docs/Web/CSS/@font-face) ou [`@counter-style/symbol`](/fr/docs/Web/CSS/@counter-style/symbols) - -## Syntaxe - -### Valeurs - -- `` - - - : Une chaîne de caractères indiquant une URL ou l'identifiant d'une forme SVG. - - - `` - - - : Une URL, relative ou absolue, qui pointe vers une ressource web à inclure ou un URI de données éventuellement encadrée entre quotes ou doubles quotes. Les quotes sont obligatoires si l'URL inclut des parenthèses, espaces, doubles quotes, etc. (sauf si ces caractères sont échappés) ou si l'adresse inclut des caractères de contrôle supérieurs à `0x7e`. Il n'est pas possible d'utiliser des doubles quotes dans une URL encadrée par des doubles quotes à moins de les échapper. De même, on ne peut pas utiliser une simple quote dans une URL délimitée par des simples quotes. Les déclarations suivantes seront équivalentes : - - ```css - : url("https://example.com/image.png") - : url('https://example.com/image.png') - : url(https://example.com/image.png) - ``` - - Si vous choisissez d'écrire l'URL sans guillemets, il faudra utiliser une barre oblique inverse (`\`) avant toute parenthèse, espace ou apostrophe (`'`) ou guillemets (`"`) faisant partie de l'URL. - - - `chemin` - - : La référence à un identifiant d'une [forme SVG](/fr/docs/Web/SVG/Tutorial/Basic_Shapes), `circle`, `ellipse`, `line`, `path`, `polygon`, `polyline`, ou `rect`. Ce sera alors la géométrie de la forme qui sera utilisée pour le chemin. - -- `url-modifier` {{Experimental_Inline}} - - : À l'avenir, la fonction `url()` pourrait prendre en charge un modificateur tel qu'un identifiant ou une notation fonctionnelle qui modifierait le sens de l'URL. Cette valeur n'est pas complètement définie par la spécification et n'est pas prise en charge. - -### Syntaxe formelle - -```css -url( * ) -``` - -## Exemples - -### Une URL utilisée pour la propriété `background` - -```css -.topbanner { - background: url("banniere_haut.png") #00D no-repeat fixed; -} -``` - -### Une URL pour une image de puce pour une liste - -```css -ul { - list-style: square url(http://www.example.com/redball.png); -} -``` - -### Utilisation avec la propriété `content` - -#### HTML - -```html -
    -
  • Élément 1
    • -
  • Élément 2
    • -
  • Élément 3
    • -
-``` - -#### CSS - -```css -li::after { - content: ' - ' url(star.gif); -} -``` - -#### Résultat - -{{EmbedLiveSample("", "100%", 150)}} - -### Utilisation d'un URI de données - -#### HTML - -```html -
-``` - -#### CSS - -```css hidden -.background { - height: 100vh; -} -``` - -```css -.background { - background: yellow; - background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45'%3E%3Cpath d='M10 10h60' stroke='%2300F' stroke-width='5'/%3E%3Cpath d='M10 20h60' stroke='%230F0' stroke-width='5'/%3E%3Cpath d='M10 30h60' stroke='red' stroke-width='5'/%3E%3C/svg%3E"); -} -``` - -#### Résultat - -{{EmbedLiveSample("", "100%", 50)}} - -### Utilisation pour les filtres - -Lorsqu'une URL est utilisée comme chemin d'un filtre, l'URL doit être : - -1. Le chemin d'un fichier SVG avec l'ancre qui pointe vers l'identifiant du filtre. -2. Ou l'identifiant du filtre si le SVG existe déjà sur la page. - -```css -.blur { - filter: url(mon-fichier.svg#svg-blur); - /* L'URL d'un fichier SVG utilisé comme filtre */ -} - -.inline-blur { - filter: url(#svg-blur); - /* L'identifiant d'un SVG déjà chargé sur la page HTML */ -} -``` - -## Spécifications - -{{Specifications}} - -## Compatibilité des navigateurs - -{{Compat}} - -## Voir aussi - -- [``](/fr/docs/Web/CSS/gradient) -- [`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/url/index.md b/files/fr/web/css/url/index.md new file mode 100644 index 0000000000..01dc5caaf7 --- /dev/null +++ b/files/fr/web/css/url/index.md @@ -0,0 +1,193 @@ +--- +title: url() +slug: Web/CSS/url +translation_of: Web/CSS/url() +original_slug: Web/CSS/url() +browser-compat: css.types.url +--- +{{CSSRef}} + +La fonction [CSS](/fr/docs/Web/CSS) **`url()`** est utilisée afin d'inclure un fichier. Le paramètre est une URL absolue, une URL relative ou un URI de donnée. La fonction **`url()`** peut être utilisée comme paramètre d'une autre fonction comme [`attr()`](/fr/docs/Web/CSS/attr()). Selon la propriété pour laquelle elle est utilisée, la ressource utilisée peut être une image, une police ou une feuille de style. + +La notation fonctionnelle `url()` correspond au type de donnée CSS ``. + +> **Note :** Il y a une différence entre un URI et une URL. Un URI identifie une ressource. Une URL est un type d'URI qui décrit _l'emplacement_ d'une ressource. Un URI peut être une URL ou un nom (URN) d'une ressource. +> +> Pour la spécification CSS de niveau 1, la notation fonctionnelle `url()` ne décrivaient que des URL au sens strict. Pour la spécification CSS de niveau 2, la définition de `url()` a été étendue afin de décrire n'importe quel URI (que ce soit une URL ou un URN). Cela a été une source de confusion, car `url()` pouvait être utilisée pour créer un type de données ``. Cette évolution était non seulement étrange mais aussi superflue, car les URN ne sont quasiment jamais utilisées dans du CSS réel. Pour éviter cette confusion, la spécification CSS de niveau 3 est revenue à la définition initiale. Aujourd'hui, `url()` ne manipule que des vraies ``. + +```css +/* Utilisation simple */ +url(https://example.com/images/monImg.jpg); +url(data:image/png;base64,iRxVB0…); +url(maPolice.woff); +url(#IDdeCheminSVG); + +/* Propriétés utilisables */ +background-image: url("star.gif"); +list-style-image: url('../images/bullet.jpg'); +content: url("pdficon.jpg"); +cursor: url(moncurseur.cur); +border-image-source: url(/media/diamonds.png); +src: url('superpolice.woff'); +offset-path: url(#path); +mask-image: url("masques.svg#masque1"); + +/* Propriétés avec valeurs de recours */ +cursor: url(pointer.cur), pointer + +/* Propriétés raccourcies associées */ +background: url('star.gif') bottom right repeat-x blue; +border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space; + +/* Utilisation comme paramètre d'une fonction CSS */ +background-image: cross-fade(20% url(first.png), url(second.png)); +mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent)); + +/* Utilisation avec plusieurs valeurs */ +content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); + +/* Règles @ / at-rules */ +@document url("https://www.example.com/") { ... } /* expérimental */ +@import url("https://www.example.com/style.css"); +@namespace url(http://www.w3.org/1999/xhtml); +``` + +Lorsque des URL relatives sont utilisées, elles sont relatives à l'URL de la feuille de style et pas à celle de la page web courante. + +La fonction **`url()`** peut être incluse comme valeur pour les propriétés [`background`](/fr/docs/Web/CSS/background), [`background-image`](/fr/docs/Web/CSS/background-image), [`border`](/fr/docs/Web/CSS/border), [`border-image`](/fr/docs/Web/CSS/border-image), [`border-image-source`](/fr/docs/Web/CSS/border-image-source), [`content`](/fr/docs/Web/CSS/content), [`cursor`](/fr/docs/Web/CSS/cursor), [`filter`](/fr/docs/Web/CSS/filter), [`list-style`](/fr/docs/Web/CSS/list-style), [`list-style-image`](/fr/docs/Web/CSS/list-style-image), [`mask`](/fr/docs/Web/CSS/mask), [`mask-image`](/fr/docs/Web/CSS/mask-image), [`offset-path`](/fr/docs/Web/CSS/offset-path), comme descripteur [`src`](/fr/docs/Web/CSS/@font-face/src) pour une règle [`@font-face`](/fr/docs/Web/CSS/@font-face) ou [`@counter-style/symbol`](/fr/docs/Web/CSS/@counter-style/symbols) + +## Syntaxe + +### Valeurs + +- `` + + - : Une chaîne de caractères indiquant une URL ou l'identifiant d'une forme SVG. + + - `` + + - : Une URL, relative ou absolue, qui pointe vers une ressource web à inclure ou un URI de données éventuellement encadrée entre quotes ou doubles quotes. Les quotes sont obligatoires si l'URL inclut des parenthèses, espaces, doubles quotes, etc. (sauf si ces caractères sont échappés) ou si l'adresse inclut des caractères de contrôle supérieurs à `0x7e`. Il n'est pas possible d'utiliser des doubles quotes dans une URL encadrée par des doubles quotes à moins de les échapper. De même, on ne peut pas utiliser une simple quote dans une URL délimitée par des simples quotes. Les déclarations suivantes seront équivalentes : + + ```css + : url("https://example.com/image.png") + : url('https://example.com/image.png') + : url(https://example.com/image.png) + ``` + + Si vous choisissez d'écrire l'URL sans guillemets, il faudra utiliser une barre oblique inverse (`\`) avant toute parenthèse, espace ou apostrophe (`'`) ou guillemets (`"`) faisant partie de l'URL. + + - `chemin` + - : La référence à un identifiant d'une [forme SVG](/fr/docs/Web/SVG/Tutorial/Basic_Shapes), `circle`, `ellipse`, `line`, `path`, `polygon`, `polyline`, ou `rect`. Ce sera alors la géométrie de la forme qui sera utilisée pour le chemin. + +- `url-modifier` {{Experimental_Inline}} + - : À l'avenir, la fonction `url()` pourrait prendre en charge un modificateur tel qu'un identifiant ou une notation fonctionnelle qui modifierait le sens de l'URL. Cette valeur n'est pas complètement définie par la spécification et n'est pas prise en charge. + +### Syntaxe formelle + +```css +url( * ) +``` + +## Exemples + +### Une URL utilisée pour la propriété `background` + +```css +.topbanner { + background: url("banniere_haut.png") #00D no-repeat fixed; +} +``` + +### Une URL pour une image de puce pour une liste + +```css +ul { + list-style: square url(http://www.example.com/redball.png); +} +``` + +### Utilisation avec la propriété `content` + +#### HTML + +```html +
    +
  • Élément 1
    • +
  • Élément 2
    • +
  • Élément 3
    • +
+``` + +#### CSS + +```css +li::after { + content: ' - ' url(star.gif); +} +``` + +#### Résultat + +{{EmbedLiveSample("", "100%", 150)}} + +### Utilisation d'un URI de données + +#### HTML + +```html +
+``` + +#### CSS + +```css hidden +.background { + height: 100vh; +} +``` + +```css +.background { + background: yellow; + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45'%3E%3Cpath d='M10 10h60' stroke='%2300F' stroke-width='5'/%3E%3Cpath d='M10 20h60' stroke='%230F0' stroke-width='5'/%3E%3Cpath d='M10 30h60' stroke='red' stroke-width='5'/%3E%3C/svg%3E"); +} +``` + +#### Résultat + +{{EmbedLiveSample("", "100%", 50)}} + +### Utilisation pour les filtres + +Lorsqu'une URL est utilisée comme chemin d'un filtre, l'URL doit être : + +1. Le chemin d'un fichier SVG avec l'ancre qui pointe vers l'identifiant du filtre. +2. Ou l'identifiant du filtre si le SVG existe déjà sur la page. + +```css +.blur { + filter: url(mon-fichier.svg#svg-blur); + /* L'URL d'un fichier SVG utilisé comme filtre */ +} + +.inline-blur { + filter: url(#svg-blur); + /* L'identifiant d'un SVG déjà chargé sur la page HTML */ +} +``` + +## Spécifications + +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +## Voir aussi + +- [``](/fr/docs/Web/CSS/gradient) +- [`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/var()/index.md b/files/fr/web/css/var()/index.md deleted file mode 100644 index 4cefbea53b..0000000000 --- a/files/fr/web/css/var()/index.md +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: var() -slug: Web/CSS/var() -tags: - - CSS - - Experimental - - Fonction CSS - - Reference - - Variables CSS -translation_of: Web/CSS/var() ---- -{{CSSRef}} - -La fonction **`var()`** peut être utilisée à la place d'une valeur pour n'importe quelle propriété d'un élément. Elle permet d'insérer la valeur d'[une propriété personnalisée (custom property)](/fr/docs/Web/CSS/--*). - -```css -var(--header-color, blue); -``` - -La fonction `var()` ne peut pas être utilisée pour les noms de propriété, les sélecteurs et pour tout ce qui n'est pas une valeur de propriété. - -## Syntaxe - -Le premier argument de la fonction est le nom de la propriété qu'on veut substituer. Le deuxième argument, optionnel, est une valeur de recours (_fallback_) qui est utilisée au cas où la valeur de subsitution référencée par la propriété est invalide. - -{{csssyntax}} - -> **Note :** La syntaxe de la valeur de recours permet d'utiliser des virgules. Aussi, si on a `var(--toto, red, blue)`, la valeur de recours sera bien `red, blue` (autrement dit, tout ce qui est situé après la première virgule sert de valeur de recours). - -### Valeurs - -- `` - - : Le nom d'une propriété personnalisée, représenté par un identifiant valide qui commence par deux tirets. Les propriétés personnalisées sont uniquement utilisées par les auteurs et les utilisateurs. CSS ne définit pas leur valeur ou leur sémantique. -- `` - - : Une valeur de subsitution qui peut être utilisée afin que la règle soit valide si la valeur du premier argument ne peut être utilisée ici. - -## Exemples - -```css -:root{ - --main-bg-color: pink; -} - -body { - background-color: var(--main-bg-color); -} -``` - -```css -/* On ajoute un paramètre de secours */ -.component .header { - color: var(--header-color, blue); // à ce moment header-color n'est pas définie, c'est donc le bleu qui est utilisé -} -.component .text { - color: var(--text-color, black); -} - -.component { - --text-color: #080; -} -``` - -## Spécifications - -| Spécification | État | Commentaires | -| -------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | -| {{SpecName('CSS3 Variables', '#using-variables', 'var()')}} | {{Spec2('CSS3 Variables')}} | Définition initiale. | - -## Compatibilité des navigateurs - -{{Compat("css.properties.custom-property.var")}} - -## Voir aussi - -- {{cssxref("env","env(…)")}} – variables d'environnement en lecture seule, contrôlées par l'agent utilisateur. -- [Utiliser les variables CSS](/fr/docs/Web/CSS/Utiliser_les_variables_CSS) diff --git a/files/fr/web/css/var/index.md b/files/fr/web/css/var/index.md new file mode 100644 index 0000000000..d6b8a55af9 --- /dev/null +++ b/files/fr/web/css/var/index.md @@ -0,0 +1,77 @@ +--- +title: var() +slug: Web/CSS/var +tags: + - CSS + - Experimental + - Fonction CSS + - Reference + - Variables CSS +translation_of: Web/CSS/var() +original_slug: Web/CSS/var() +--- +{{CSSRef}} + +La fonction **`var()`** peut être utilisée à la place d'une valeur pour n'importe quelle propriété d'un élément. Elle permet d'insérer la valeur d'[une propriété personnalisée (custom property)](/fr/docs/Web/CSS/--*). + +```css +var(--header-color, blue); +``` + +La fonction `var()` ne peut pas être utilisée pour les noms de propriété, les sélecteurs et pour tout ce qui n'est pas une valeur de propriété. + +## Syntaxe + +Le premier argument de la fonction est le nom de la propriété qu'on veut substituer. Le deuxième argument, optionnel, est une valeur de recours (_fallback_) qui est utilisée au cas où la valeur de subsitution référencée par la propriété est invalide. + +{{csssyntax}} + +> **Note :** La syntaxe de la valeur de recours permet d'utiliser des virgules. Aussi, si on a `var(--toto, red, blue)`, la valeur de recours sera bien `red, blue` (autrement dit, tout ce qui est situé après la première virgule sert de valeur de recours). + +### Valeurs + +- `` + - : Le nom d'une propriété personnalisée, représenté par un identifiant valide qui commence par deux tirets. Les propriétés personnalisées sont uniquement utilisées par les auteurs et les utilisateurs. CSS ne définit pas leur valeur ou leur sémantique. +- `` + - : Une valeur de subsitution qui peut être utilisée afin que la règle soit valide si la valeur du premier argument ne peut être utilisée ici. + +## Exemples + +```css +:root{ + --main-bg-color: pink; +} + +body { + background-color: var(--main-bg-color); +} +``` + +```css +/* On ajoute un paramètre de secours */ +.component .header { + color: var(--header-color, blue); // à ce moment header-color n'est pas définie, c'est donc le bleu qui est utilisé +} +.component .text { + color: var(--text-color, black); +} + +.component { + --text-color: #080; +} +``` + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | +| {{SpecName('CSS3 Variables', '#using-variables', 'var()')}} | {{Spec2('CSS3 Variables')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("css.properties.custom-property.var")}} + +## Voir aussi + +- {{cssxref("env","env(…)")}} – variables d'environnement en lecture seule, contrôlées par l'agent utilisateur. +- [Utiliser les variables CSS](/fr/docs/Web/CSS/Utiliser_les_variables_CSS) -- cgit v1.2.3-54-g00ecf