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/de/_redirects.txt | 11 +- files/de/_wikihistory.json | 12 +- files/de/web/css/attr()/index.html | 189 ----------- files/de/web/css/attr/index.html | 190 +++++++++++ files/de/web/css/calc()/index.html | 106 ------ files/de/web/css/calc/index.html | 107 ++++++ .../transform-function/translate3d()/index.html | 145 -------- .../css/transform-function/translate3d/index.html | 146 ++++++++ .../css/transform-function/translatey()/index.html | 121 ------- .../css/transform-function/translatey/index.html | 122 +++++++ .../css/transform-function/translatez()/index.html | 126 ------- .../css/transform-function/translatez/index.html | 127 +++++++ files/de/web/css/url()/index.html | 84 ----- files/de/web/css/url/index.html | 84 +++++ files/es/_redirects.txt | 35 +- files/es/_wikihistory.json | 32 +- files/es/web/css/attr()/index.html | 182 ---------- files/es/web/css/attr/index.html | 183 ++++++++++ files/es/web/css/calc()/index.html | 133 -------- files/es/web/css/calc/index.html | 134 ++++++++ files/es/web/css/env()/index.html | 27 -- files/es/web/css/env/index.html | 28 ++ files/es/web/css/filter-function/blur()/index.html | 40 --- files/es/web/css/filter-function/blur/index.html | 41 +++ .../css/filter-function/brightness()/index.html | 45 --- .../web/css/filter-function/brightness/index.html | 46 +++ files/es/web/css/min()/index.html | 120 ------- files/es/web/css/min/index.html | 121 +++++++ files/es/web/css/minmax()/index.html | 214 ------------ files/es/web/css/minmax/index.html | 215 ++++++++++++ files/es/web/css/repeat()/index.html | 147 --------- files/es/web/css/repeat/index.html | 148 +++++++++ .../web/css/transform-function/rotate()/index.html | 79 ----- .../web/css/transform-function/rotate/index.html | 80 +++++ .../web/css/transform-function/rotate3d()/index.md | 320 ------------------ .../web/css/transform-function/rotate3d/index.md | 321 ++++++++++++++++++ .../web/css/transform-function/scale()/index.html | 122 ------- .../es/web/css/transform-function/scale/index.html | 123 +++++++ .../css/transform-function/translate()/index.html | 146 -------- .../css/transform-function/translate/index.html | 147 +++++++++ .../css/transform-function/translatey()/index.html | 117 ------- .../css/transform-function/translatey/index.html | 118 +++++++ .../css/transform-function/translatez()/index.html | 126 ------- .../css/transform-function/translatez/index.html | 127 +++++++ files/es/web/css/url()/index.html | 34 -- files/es/web/css/url/index.html | 34 ++ files/es/web/css/var()/index.html | 79 ----- files/es/web/css/var/index.html | 80 +++++ 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 +++++ files/ja/_redirects.txt | 157 +++++---- files/ja/_wikihistory.json | 112 +++---- .../web/css/transform-function/skewx/index.md | 178 ++++++++++ files/ja/web/css/_colon_host()/index.md | 80 ----- files/ja/web/css/_colon_host_function/index.md | 81 +++++ files/ja/web/css/attr()/index.md | 220 ------------ files/ja/web/css/attr/index.md | 221 +++++++++++++ files/ja/web/css/basic-shape/circle()/index.md | 59 ---- files/ja/web/css/basic-shape/circle/index.md | 60 ++++ files/ja/web/css/basic-shape/ellipse()/index.md | 67 ---- files/ja/web/css/basic-shape/ellipse/index.md | 68 ++++ files/ja/web/css/basic-shape/inset()/index.md | 51 --- files/ja/web/css/basic-shape/inset/index.md | 52 +++ files/ja/web/css/basic-shape/polygon()/index.md | 51 --- files/ja/web/css/basic-shape/polygon/index.md | 52 +++ files/ja/web/css/calc()/index.md | 168 ---------- files/ja/web/css/calc/index.md | 169 ++++++++++ files/ja/web/css/clamp()/index.md | 111 ------- files/ja/web/css/clamp/index.md | 112 +++++++ files/ja/web/css/counter()/index.md | 123 ------- files/ja/web/css/counter/index.md | 124 +++++++ files/ja/web/css/counters()/index.md | 166 ---------- files/ja/web/css/counters/index.md | 167 ++++++++++ files/ja/web/css/cross-fade()/index.md | 146 -------- files/ja/web/css/cross-fade/index.md | 147 +++++++++ files/ja/web/css/element()/index.md | 89 ----- files/ja/web/css/element/index.md | 90 +++++ files/ja/web/css/env()/index.md | 222 ------------- files/ja/web/css/env/index.md | 223 +++++++++++++ files/ja/web/css/filter-function/blur()/index.md | 59 ---- files/ja/web/css/filter-function/blur/index.md | 60 ++++ .../web/css/filter-function/brightness()/index.md | 60 ---- .../ja/web/css/filter-function/brightness/index.md | 61 ++++ .../ja/web/css/filter-function/contrast()/index.md | 60 ---- files/ja/web/css/filter-function/contrast/index.md | 61 ++++ .../web/css/filter-function/drop-shadow()/index.md | 76 ----- .../web/css/filter-function/drop-shadow/index.md | 77 +++++ .../web/css/filter-function/grayscale()/index.md | 59 ---- .../ja/web/css/filter-function/grayscale/index.md | 60 ++++ .../web/css/filter-function/hue-rotate()/index.md | 61 ---- .../ja/web/css/filter-function/hue-rotate/index.md | 62 ++++ files/ja/web/css/filter-function/invert()/index.md | 59 ---- files/ja/web/css/filter-function/invert/index.md | 60 ++++ .../ja/web/css/filter-function/opacity()/index.md | 62 ---- files/ja/web/css/filter-function/opacity/index.md | 63 ++++ .../ja/web/css/filter-function/saturate()/index.md | 60 ---- files/ja/web/css/filter-function/saturate/index.md | 61 ++++ files/ja/web/css/filter-function/sepia()/index.md | 59 ---- files/ja/web/css/filter-function/sepia/index.md | 60 ++++ files/ja/web/css/fit-content()/index.md | 113 ------- files/ja/web/css/fit-content_function/index.md | 114 +++++++ .../ja/web/css/gradient/conic-gradient()/index.md | 243 -------------- files/ja/web/css/gradient/conic-gradient/index.md | 243 ++++++++++++++ .../ja/web/css/gradient/linear-gradient()/index.md | 198 ----------- files/ja/web/css/gradient/linear-gradient/index.md | 198 +++++++++++ .../ja/web/css/gradient/radial-gradient()/index.md | 143 -------- files/ja/web/css/gradient/radial-gradient/index.md | 143 ++++++++ .../gradient/repeating-conic-gradient()/index.md | 177 ---------- .../css/gradient/repeating-conic-gradient/index.md | 178 ++++++++++ .../gradient/repeating-linear-gradient()/index.md | 149 --------- .../gradient/repeating-linear-gradient/index.md | 149 +++++++++ .../gradient/repeating-radial-gradient()/index.md | 152 --------- .../gradient/repeating-radial-gradient/index.md | 152 +++++++++ files/ja/web/css/image/image()/index.md | 154 --------- files/ja/web/css/image/image-set()/index.md | 93 ------ files/ja/web/css/image/image-set/index.md | 93 ++++++ files/ja/web/css/image/image/index.md | 155 +++++++++ files/ja/web/css/image/paint()/index.md | 103 ------ files/ja/web/css/image/paint/index.md | 103 ++++++ files/ja/web/css/max()/index.md | 100 ------ files/ja/web/css/max/index.md | 101 ++++++ files/ja/web/css/min()/index.md | 99 ------ files/ja/web/css/min/index.md | 100 ++++++ files/ja/web/css/minmax()/index.md | 139 -------- files/ja/web/css/minmax/index.md | 140 ++++++++ files/ja/web/css/repeat()/index.md | 140 -------- files/ja/web/css/repeat/index.md | 141 ++++++++ files/ja/web/css/symbols()/index.md | 67 ---- files/ja/web/css/symbols/index.md | 68 ++++ .../web/css/transform-function/matrix()/index.md | 166 ---------- .../ja/web/css/transform-function/matrix/index.md | 167 ++++++++++ .../web/css/transform-function/matrix3d()/index.md | 254 -------------- .../web/css/transform-function/matrix3d/index.md | 255 ++++++++++++++ .../css/transform-function/perspective()/index.md | 173 ---------- .../css/transform-function/perspective/index.md | 174 ++++++++++ .../web/css/transform-function/rotate()/index.md | 287 ---------------- .../ja/web/css/transform-function/rotate/index.md | 288 ++++++++++++++++ .../web/css/transform-function/rotate3d()/index.md | 326 ------------------ .../web/css/transform-function/rotate3d/index.md | 327 ++++++++++++++++++ .../web/css/transform-function/rotatex()/index.md | 176 ---------- .../ja/web/css/transform-function/rotatex/index.md | 177 ++++++++++ .../web/css/transform-function/rotatey()/index.md | 176 ---------- .../ja/web/css/transform-function/rotatey/index.md | 177 ++++++++++ .../web/css/transform-function/rotatez()/index.md | 172 ---------- .../ja/web/css/transform-function/rotatez/index.md | 173 ++++++++++ .../ja/web/css/transform-function/scale()/index.md | 212 ------------ files/ja/web/css/transform-function/scale/index.md | 213 ++++++++++++ .../web/css/transform-function/scale3d()/index.md | 171 ---------- .../ja/web/css/transform-function/scale3d/index.md | 172 ++++++++++ .../web/css/transform-function/scalex()/index.md | 164 --------- .../ja/web/css/transform-function/scalex/index.md | 165 +++++++++ .../web/css/transform-function/scaley()/index.md | 166 ---------- .../ja/web/css/transform-function/scaley/index.md | 167 ++++++++++ .../web/css/transform-function/scalez()/index.md | 142 -------- .../ja/web/css/transform-function/scalez/index.md | 143 ++++++++ .../ja/web/css/transform-function/skew()/index.md | 244 -------------- files/ja/web/css/transform-function/skew/index.md | 245 ++++++++++++++ .../ja/web/css/transform-function/skewx()/index.md | 182 ---------- files/ja/web/css/transform-function/skewx/index.md | 183 ++++++++++ .../ja/web/css/transform-function/skewy()/index.md | 177 ---------- .../css/transform-function/translate()/index.md | 199 ----------- .../web/css/transform-function/translate/index.md | 200 +++++++++++ .../css/transform-function/translate3d()/index.md | 152 --------- .../css/transform-function/translate3d/index.md | 153 +++++++++ .../css/transform-function/translatex()/index.md | 163 --------- .../web/css/transform-function/translatex/index.md | 163 +++++++++ .../css/transform-function/translatey()/index.md | 174 ---------- .../web/css/transform-function/translatey/index.md | 175 ++++++++++ .../css/transform-function/translatez()/index.md | 129 -------- .../web/css/transform-function/translatez/index.md | 130 ++++++++ files/ja/web/css/url()/index.md | 191 ----------- files/ja/web/css/url/index.md | 192 +++++++++++ files/ja/web/css/var()/index.md | 85 ----- files/ja/web/css/var/index.md | 86 +++++ files/ko/_redirects.txt | 16 +- files/ko/_wikihistory.json | 16 +- files/ko/web/css/calc()/index.html | 160 --------- files/ko/web/css/calc/index.html | 161 +++++++++ files/ko/web/css/filter-function/blur()/index.html | 40 --- files/ko/web/css/filter-function/blur/index.html | 41 +++ .../css/filter-function/brightness()/index.html | 41 --- .../web/css/filter-function/brightness/index.html | 42 +++ .../web/css/filter-function/contrast()/index.html | 41 --- .../ko/web/css/filter-function/contrast/index.html | 42 +++ .../web/css/transform-function/matrix()/index.html | 89 ----- .../web/css/transform-function/matrix/index.html | 90 +++++ .../web/css/transform-function/scalex()/index.html | 101 ------ .../web/css/transform-function/scalex/index.html | 102 ++++++ files/ko/web/css/url()/index.html | 81 ----- files/ko/web/css/url/index.html | 81 +++++ files/ko/web/css/var()/index.html | 98 ------ files/ko/web/css/var/index.html | 99 ++++++ files/pl/_redirects.txt | 2 +- files/pl/_wikihistory.json | 2 +- .../web/css/transform-function/matrix()/index.html | 58 ---- .../web/css/transform-function/matrix/index.html | 59 ++++ files/pt-br/_redirects.txt | 28 +- files/pt-br/_wikihistory.json | 28 +- files/pt-br/web/css/attr()/index.html | 213 ------------ files/pt-br/web/css/attr/index.html | 214 ++++++++++++ files/pt-br/web/css/calc()/index.html | 162 --------- files/pt-br/web/css/calc/index.html | 163 +++++++++ files/pt-br/web/css/element()/index.html | 101 ------ files/pt-br/web/css/element/index.html | 102 ++++++ files/pt-br/web/css/env()/index.html | 132 -------- files/pt-br/web/css/env/index.html | 133 ++++++++ .../web/css/filter-function/grayscale()/index.html | 39 --- .../web/css/filter-function/grayscale/index.html | 40 +++ .../web/css/filter-function/opacity()/index.html | 40 --- .../web/css/filter-function/opacity/index.html | 41 +++ .../web/css/filter-function/sepia()/index.html | 35 -- .../pt-br/web/css/filter-function/sepia/index.html | 36 ++ .../web/css/transform-function/matrix()/index.html | 111 ------- .../web/css/transform-function/matrix/index.html | 112 +++++++ .../transform-function/perspective()/index.html | 123 ------- .../css/transform-function/perspective/index.html | 124 +++++++ .../web/css/transform-function/rotate()/index.html | 85 ----- .../web/css/transform-function/rotate/index.html | 86 +++++ .../css/transform-function/rotate3d()/index.html | 127 ------- .../web/css/transform-function/rotate3d/index.html | 128 +++++++ .../web/css/transform-function/scale()/index.html | 125 ------- .../web/css/transform-function/scale/index.html | 126 +++++++ .../css/transform-function/translate()/index.html | 152 --------- .../css/transform-function/translate/index.html | 153 +++++++++ files/pt-br/web/css/var()/index.html | 145 -------- files/pt-br/web/css/var/index.html | 146 ++++++++ files/ru/_redirects.txt | 21 +- files/ru/_wikihistory.json | 22 +- files/ru/web/css/_colon_host()/index.html | 72 ---- files/ru/web/css/_colon_host_function/index.html | 73 ++++ files/ru/web/css/attr()/index.html | 182 ---------- files/ru/web/css/attr/index.html | 183 ++++++++++ files/ru/web/css/calc()/index.html | 125 ------- files/ru/web/css/calc/index.html | 126 +++++++ files/ru/web/css/clamp()/index.html | 108 ------ files/ru/web/css/clamp/index.html | 109 ++++++ files/ru/web/css/filter-function/blur()/index.html | 44 --- files/ru/web/css/filter-function/blur/index.html | 45 +++ files/ru/web/css/minmax()/index.html | 176 ---------- files/ru/web/css/minmax/index.html | 177 ++++++++++ .../web/css/transform-function/rotate()/index.html | 137 -------- .../web/css/transform-function/rotate/index.html | 138 ++++++++ .../css/transform-function/rotate3d()/index.html | 131 -------- .../web/css/transform-function/rotate3d/index.html | 132 ++++++++ .../css/transform-function/scale3d()/index.html | 99 ------ .../web/css/transform-function/scale3d/index.html | 100 ++++++ .../web/css/transform-function/skew()/index.html | 117 ------- .../ru/web/css/transform-function/skew/index.html | 118 +++++++ files/ru/web/css/url()/index.html | 171 ---------- files/ru/web/css/url/index.html | 172 ++++++++++ files/ru/web/css/var()/index.md | 84 ----- files/ru/web/css/var/index.md | 85 +++++ files/zh-cn/_redirects.txt | 83 ++--- files/zh-cn/_wikihistory.json | 100 +++--- .../web/css/transform-function/skewx/index.html | 131 ++++++++ files/zh-cn/web/css/_colon_host()/index.html | 90 ----- .../zh-cn/web/css/_colon_host_function/index.html | 91 +++++ files/zh-cn/web/css/attr()/index.html | 303 ----------------- files/zh-cn/web/css/attr/index.html | 304 +++++++++++++++++ files/zh-cn/web/css/calc()/index.html | 163 --------- files/zh-cn/web/css/calc/index.html | 164 +++++++++ files/zh-cn/web/css/clamp()/index.html | 121 ------- files/zh-cn/web/css/clamp/index.html | 122 +++++++ files/zh-cn/web/css/counter()/index.html | 145 -------- files/zh-cn/web/css/counter/index.html | 146 ++++++++ files/zh-cn/web/css/counters()/index.html | 188 ----------- files/zh-cn/web/css/counters/index.html | 189 +++++++++++ files/zh-cn/web/css/element()/index.html | 103 ------ files/zh-cn/web/css/element/index.html | 104 ++++++ files/zh-cn/web/css/env()/index.html | 133 -------- files/zh-cn/web/css/env/index.html | 134 ++++++++ .../web/css/filter-function/blur()/index.html | 49 --- .../zh-cn/web/css/filter-function/blur/index.html | 50 +++ .../css/filter-function/brightness()/index.html | 36 -- .../web/css/filter-function/brightness/index.html | 37 +++ .../web/css/filter-function/contrast()/index.html | 45 --- .../web/css/filter-function/contrast/index.html | 46 +++ .../css/filter-function/drop-shadow()/index.html | 65 ---- .../web/css/filter-function/drop-shadow/index.html | 66 ++++ .../web/css/filter-function/grayscale()/index.html | 35 -- .../web/css/filter-function/grayscale/index.html | 36 ++ .../web/css/filter-function/opacity()/index.html | 40 --- .../web/css/filter-function/opacity/index.html | 41 +++ .../web/css/gradient/linear-gradient()/index.html | 281 ---------------- .../web/css/gradient/linear-gradient/index.html | 281 ++++++++++++++++ .../web/css/gradient/radial-gradient()/index.html | 196 ----------- .../web/css/gradient/radial-gradient/index.html | 197 +++++++++++ .../repeating-linear-gradient()/index.html | 170 ---------- .../gradient/repeating-linear-gradient/index.html | 171 ++++++++++ .../repeating-radial-gradient()/index.html | 181 ---------- .../gradient/repeating-radial-gradient/index.html | 182 ++++++++++ files/zh-cn/web/css/max()/index.html | 120 ------- files/zh-cn/web/css/max/index.html | 121 +++++++ files/zh-cn/web/css/min()/index.html | 130 -------- files/zh-cn/web/css/min/index.html | 131 ++++++++ files/zh-cn/web/css/minmax()/index.html | 198 ----------- files/zh-cn/web/css/minmax/index.html | 199 +++++++++++ files/zh-cn/web/css/repeat()/index.html | 143 -------- files/zh-cn/web/css/repeat/index.html | 144 ++++++++ .../web/css/transform-function/matrix()/index.html | 84 ----- .../web/css/transform-function/matrix/index.html | 85 +++++ .../css/transform-function/matrix3d()/index.html | 153 --------- .../web/css/transform-function/matrix3d/index.html | 154 +++++++++ .../transform-function/perspective()/index.html | 46 --- .../css/transform-function/perspective/index.html | 47 +++ .../web/css/transform-function/rotate()/index.html | 90 ----- .../web/css/transform-function/rotate/index.html | 91 +++++ .../css/transform-function/rotate3d()/index.html | 127 ------- .../web/css/transform-function/rotate3d/index.html | 128 +++++++ .../css/transform-function/rotatex()/index.html | 107 ------ .../web/css/transform-function/rotatex/index.html | 108 ++++++ .../css/transform-function/rotatey()/index.html | 107 ------ .../web/css/transform-function/rotatey/index.html | 108 ++++++ .../css/transform-function/rotatez()/index.html | 107 ------ .../web/css/transform-function/rotatez/index.html | 108 ++++++ .../web/css/transform-function/scale()/index.html | 111 ------- .../web/css/transform-function/scale/index.html | 112 +++++++ .../web/css/transform-function/scalex()/index.html | 109 ------ .../web/css/transform-function/scalex/index.html | 110 ++++++ .../web/css/transform-function/scaley()/index.html | 91 ----- .../web/css/transform-function/scaley/index.html | 92 ++++++ .../web/css/transform-function/skew()/index.html | 139 -------- .../web/css/transform-function/skew/index.html | 140 ++++++++ .../web/css/transform-function/skewx()/index.html | 107 ------ .../web/css/transform-function/skewx/index.html | 108 ++++++ .../web/css/transform-function/skewy()/index.html | 130 -------- .../css/transform-function/translate()/index.html | 152 --------- .../css/transform-function/translate/index.html | 153 +++++++++ .../transform-function/translate3d()/index.html | 138 -------- .../css/transform-function/translate3d/index.html | 139 ++++++++ .../css/transform-function/translatex()/index.html | 132 -------- .../css/transform-function/translatex/index.html | 133 ++++++++ .../css/transform-function/translatey()/index.html | 115 ------- .../css/transform-function/translatey/index.html | 116 +++++++ files/zh-cn/web/css/url()/index.html | 82 ----- files/zh-cn/web/css/url/index.html | 82 +++++ files/zh-cn/web/css/var()/index.html | 98 ------ files/zh-cn/web/css/var/index.html | 99 ++++++ files/zh-tw/_redirects.txt | 4 +- files/zh-tw/_wikihistory.json | 4 +- files/zh-tw/web/css/attr()/index.html | 200 ----------- files/zh-tw/web/css/attr/index.html | 201 +++++++++++ .../transform-function/translate3d()/index.html | 116 ------- .../css/transform-function/translate3d/index.html | 117 +++++++ 442 files changed, 27223 insertions(+), 26989 deletions(-) delete mode 100644 files/de/web/css/attr()/index.html create mode 100644 files/de/web/css/attr/index.html delete mode 100644 files/de/web/css/calc()/index.html create mode 100644 files/de/web/css/calc/index.html delete mode 100644 files/de/web/css/transform-function/translate3d()/index.html create mode 100644 files/de/web/css/transform-function/translate3d/index.html delete mode 100644 files/de/web/css/transform-function/translatey()/index.html create mode 100644 files/de/web/css/transform-function/translatey/index.html delete mode 100644 files/de/web/css/transform-function/translatez()/index.html create mode 100644 files/de/web/css/transform-function/translatez/index.html delete mode 100644 files/de/web/css/url()/index.html create mode 100644 files/de/web/css/url/index.html delete mode 100644 files/es/web/css/attr()/index.html create mode 100644 files/es/web/css/attr/index.html delete mode 100644 files/es/web/css/calc()/index.html create mode 100644 files/es/web/css/calc/index.html delete mode 100644 files/es/web/css/env()/index.html create mode 100644 files/es/web/css/env/index.html delete mode 100644 files/es/web/css/filter-function/blur()/index.html create mode 100644 files/es/web/css/filter-function/blur/index.html delete mode 100644 files/es/web/css/filter-function/brightness()/index.html create mode 100644 files/es/web/css/filter-function/brightness/index.html delete mode 100644 files/es/web/css/min()/index.html create mode 100644 files/es/web/css/min/index.html delete mode 100644 files/es/web/css/minmax()/index.html create mode 100644 files/es/web/css/minmax/index.html delete mode 100644 files/es/web/css/repeat()/index.html create mode 100644 files/es/web/css/repeat/index.html delete mode 100644 files/es/web/css/transform-function/rotate()/index.html create mode 100644 files/es/web/css/transform-function/rotate/index.html delete mode 100644 files/es/web/css/transform-function/rotate3d()/index.md create mode 100644 files/es/web/css/transform-function/rotate3d/index.md delete mode 100644 files/es/web/css/transform-function/scale()/index.html create mode 100644 files/es/web/css/transform-function/scale/index.html delete mode 100644 files/es/web/css/transform-function/translate()/index.html create mode 100644 files/es/web/css/transform-function/translate/index.html delete mode 100644 files/es/web/css/transform-function/translatey()/index.html create mode 100644 files/es/web/css/transform-function/translatey/index.html delete mode 100644 files/es/web/css/transform-function/translatez()/index.html create mode 100644 files/es/web/css/transform-function/translatez/index.html delete mode 100644 files/es/web/css/url()/index.html create mode 100644 files/es/web/css/url/index.html delete mode 100644 files/es/web/css/var()/index.html create mode 100644 files/es/web/css/var/index.html 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 create mode 100644 files/ja/conflicting/web/css/transform-function/skewx/index.md delete mode 100644 files/ja/web/css/_colon_host()/index.md create mode 100644 files/ja/web/css/_colon_host_function/index.md delete mode 100644 files/ja/web/css/attr()/index.md create mode 100644 files/ja/web/css/attr/index.md delete mode 100644 files/ja/web/css/basic-shape/circle()/index.md create mode 100644 files/ja/web/css/basic-shape/circle/index.md delete mode 100644 files/ja/web/css/basic-shape/ellipse()/index.md create mode 100644 files/ja/web/css/basic-shape/ellipse/index.md delete mode 100644 files/ja/web/css/basic-shape/inset()/index.md create mode 100644 files/ja/web/css/basic-shape/inset/index.md delete mode 100644 files/ja/web/css/basic-shape/polygon()/index.md create mode 100644 files/ja/web/css/basic-shape/polygon/index.md delete mode 100644 files/ja/web/css/calc()/index.md create mode 100644 files/ja/web/css/calc/index.md delete mode 100644 files/ja/web/css/clamp()/index.md create mode 100644 files/ja/web/css/clamp/index.md delete mode 100644 files/ja/web/css/counter()/index.md create mode 100644 files/ja/web/css/counter/index.md delete mode 100644 files/ja/web/css/counters()/index.md create mode 100644 files/ja/web/css/counters/index.md delete mode 100644 files/ja/web/css/cross-fade()/index.md create mode 100644 files/ja/web/css/cross-fade/index.md delete mode 100644 files/ja/web/css/element()/index.md create mode 100644 files/ja/web/css/element/index.md delete mode 100644 files/ja/web/css/env()/index.md create mode 100644 files/ja/web/css/env/index.md delete mode 100644 files/ja/web/css/filter-function/blur()/index.md create mode 100644 files/ja/web/css/filter-function/blur/index.md delete mode 100644 files/ja/web/css/filter-function/brightness()/index.md create mode 100644 files/ja/web/css/filter-function/brightness/index.md delete mode 100644 files/ja/web/css/filter-function/contrast()/index.md create mode 100644 files/ja/web/css/filter-function/contrast/index.md delete mode 100644 files/ja/web/css/filter-function/drop-shadow()/index.md create mode 100644 files/ja/web/css/filter-function/drop-shadow/index.md delete mode 100644 files/ja/web/css/filter-function/grayscale()/index.md create mode 100644 files/ja/web/css/filter-function/grayscale/index.md delete mode 100644 files/ja/web/css/filter-function/hue-rotate()/index.md create mode 100644 files/ja/web/css/filter-function/hue-rotate/index.md delete mode 100644 files/ja/web/css/filter-function/invert()/index.md create mode 100644 files/ja/web/css/filter-function/invert/index.md delete mode 100644 files/ja/web/css/filter-function/opacity()/index.md create mode 100644 files/ja/web/css/filter-function/opacity/index.md delete mode 100644 files/ja/web/css/filter-function/saturate()/index.md create mode 100644 files/ja/web/css/filter-function/saturate/index.md delete mode 100644 files/ja/web/css/filter-function/sepia()/index.md create mode 100644 files/ja/web/css/filter-function/sepia/index.md delete mode 100644 files/ja/web/css/fit-content()/index.md create mode 100644 files/ja/web/css/fit-content_function/index.md delete mode 100644 files/ja/web/css/gradient/conic-gradient()/index.md create mode 100644 files/ja/web/css/gradient/conic-gradient/index.md delete mode 100644 files/ja/web/css/gradient/linear-gradient()/index.md create mode 100644 files/ja/web/css/gradient/linear-gradient/index.md delete mode 100644 files/ja/web/css/gradient/radial-gradient()/index.md create mode 100644 files/ja/web/css/gradient/radial-gradient/index.md delete mode 100644 files/ja/web/css/gradient/repeating-conic-gradient()/index.md create mode 100644 files/ja/web/css/gradient/repeating-conic-gradient/index.md delete mode 100644 files/ja/web/css/gradient/repeating-linear-gradient()/index.md create mode 100644 files/ja/web/css/gradient/repeating-linear-gradient/index.md delete mode 100644 files/ja/web/css/gradient/repeating-radial-gradient()/index.md create mode 100644 files/ja/web/css/gradient/repeating-radial-gradient/index.md delete mode 100644 files/ja/web/css/image/image()/index.md delete mode 100644 files/ja/web/css/image/image-set()/index.md create mode 100644 files/ja/web/css/image/image-set/index.md create mode 100644 files/ja/web/css/image/image/index.md delete mode 100644 files/ja/web/css/image/paint()/index.md create mode 100644 files/ja/web/css/image/paint/index.md delete mode 100644 files/ja/web/css/max()/index.md create mode 100644 files/ja/web/css/max/index.md delete mode 100644 files/ja/web/css/min()/index.md create mode 100644 files/ja/web/css/min/index.md delete mode 100644 files/ja/web/css/minmax()/index.md create mode 100644 files/ja/web/css/minmax/index.md delete mode 100644 files/ja/web/css/repeat()/index.md create mode 100644 files/ja/web/css/repeat/index.md delete mode 100644 files/ja/web/css/symbols()/index.md create mode 100644 files/ja/web/css/symbols/index.md delete mode 100644 files/ja/web/css/transform-function/matrix()/index.md create mode 100644 files/ja/web/css/transform-function/matrix/index.md delete mode 100644 files/ja/web/css/transform-function/matrix3d()/index.md create mode 100644 files/ja/web/css/transform-function/matrix3d/index.md delete mode 100644 files/ja/web/css/transform-function/perspective()/index.md create mode 100644 files/ja/web/css/transform-function/perspective/index.md delete mode 100644 files/ja/web/css/transform-function/rotate()/index.md create mode 100644 files/ja/web/css/transform-function/rotate/index.md delete mode 100644 files/ja/web/css/transform-function/rotate3d()/index.md create mode 100644 files/ja/web/css/transform-function/rotate3d/index.md delete mode 100644 files/ja/web/css/transform-function/rotatex()/index.md create mode 100644 files/ja/web/css/transform-function/rotatex/index.md delete mode 100644 files/ja/web/css/transform-function/rotatey()/index.md create mode 100644 files/ja/web/css/transform-function/rotatey/index.md delete mode 100644 files/ja/web/css/transform-function/rotatez()/index.md create mode 100644 files/ja/web/css/transform-function/rotatez/index.md delete mode 100644 files/ja/web/css/transform-function/scale()/index.md create mode 100644 files/ja/web/css/transform-function/scale/index.md delete mode 100644 files/ja/web/css/transform-function/scale3d()/index.md create mode 100644 files/ja/web/css/transform-function/scale3d/index.md delete mode 100644 files/ja/web/css/transform-function/scalex()/index.md create mode 100644 files/ja/web/css/transform-function/scalex/index.md delete mode 100644 files/ja/web/css/transform-function/scaley()/index.md create mode 100644 files/ja/web/css/transform-function/scaley/index.md delete mode 100644 files/ja/web/css/transform-function/scalez()/index.md create mode 100644 files/ja/web/css/transform-function/scalez/index.md delete mode 100644 files/ja/web/css/transform-function/skew()/index.md create mode 100644 files/ja/web/css/transform-function/skew/index.md delete mode 100644 files/ja/web/css/transform-function/skewx()/index.md create mode 100644 files/ja/web/css/transform-function/skewx/index.md delete mode 100644 files/ja/web/css/transform-function/skewy()/index.md delete mode 100644 files/ja/web/css/transform-function/translate()/index.md create mode 100644 files/ja/web/css/transform-function/translate/index.md delete mode 100644 files/ja/web/css/transform-function/translate3d()/index.md create mode 100644 files/ja/web/css/transform-function/translate3d/index.md delete mode 100644 files/ja/web/css/transform-function/translatex()/index.md create mode 100644 files/ja/web/css/transform-function/translatex/index.md delete mode 100644 files/ja/web/css/transform-function/translatey()/index.md create mode 100644 files/ja/web/css/transform-function/translatey/index.md delete mode 100644 files/ja/web/css/transform-function/translatez()/index.md create mode 100644 files/ja/web/css/transform-function/translatez/index.md delete mode 100644 files/ja/web/css/url()/index.md create mode 100644 files/ja/web/css/url/index.md delete mode 100644 files/ja/web/css/var()/index.md create mode 100644 files/ja/web/css/var/index.md delete mode 100644 files/ko/web/css/calc()/index.html create mode 100644 files/ko/web/css/calc/index.html delete mode 100644 files/ko/web/css/filter-function/blur()/index.html create mode 100644 files/ko/web/css/filter-function/blur/index.html delete mode 100644 files/ko/web/css/filter-function/brightness()/index.html create mode 100644 files/ko/web/css/filter-function/brightness/index.html delete mode 100644 files/ko/web/css/filter-function/contrast()/index.html create mode 100644 files/ko/web/css/filter-function/contrast/index.html delete mode 100644 files/ko/web/css/transform-function/matrix()/index.html create mode 100644 files/ko/web/css/transform-function/matrix/index.html delete mode 100644 files/ko/web/css/transform-function/scalex()/index.html create mode 100644 files/ko/web/css/transform-function/scalex/index.html delete mode 100644 files/ko/web/css/url()/index.html create mode 100644 files/ko/web/css/url/index.html delete mode 100644 files/ko/web/css/var()/index.html create mode 100644 files/ko/web/css/var/index.html delete mode 100644 files/pl/web/css/transform-function/matrix()/index.html create mode 100644 files/pl/web/css/transform-function/matrix/index.html delete mode 100644 files/pt-br/web/css/attr()/index.html create mode 100644 files/pt-br/web/css/attr/index.html delete mode 100644 files/pt-br/web/css/calc()/index.html create mode 100644 files/pt-br/web/css/calc/index.html delete mode 100644 files/pt-br/web/css/element()/index.html create mode 100644 files/pt-br/web/css/element/index.html delete mode 100644 files/pt-br/web/css/env()/index.html create mode 100644 files/pt-br/web/css/env/index.html delete mode 100644 files/pt-br/web/css/filter-function/grayscale()/index.html create mode 100644 files/pt-br/web/css/filter-function/grayscale/index.html delete mode 100644 files/pt-br/web/css/filter-function/opacity()/index.html create mode 100644 files/pt-br/web/css/filter-function/opacity/index.html delete mode 100644 files/pt-br/web/css/filter-function/sepia()/index.html create mode 100644 files/pt-br/web/css/filter-function/sepia/index.html delete mode 100644 files/pt-br/web/css/transform-function/matrix()/index.html create mode 100644 files/pt-br/web/css/transform-function/matrix/index.html delete mode 100644 files/pt-br/web/css/transform-function/perspective()/index.html create mode 100644 files/pt-br/web/css/transform-function/perspective/index.html delete mode 100644 files/pt-br/web/css/transform-function/rotate()/index.html create mode 100644 files/pt-br/web/css/transform-function/rotate/index.html delete mode 100644 files/pt-br/web/css/transform-function/rotate3d()/index.html create mode 100644 files/pt-br/web/css/transform-function/rotate3d/index.html delete mode 100644 files/pt-br/web/css/transform-function/scale()/index.html create mode 100644 files/pt-br/web/css/transform-function/scale/index.html delete mode 100644 files/pt-br/web/css/transform-function/translate()/index.html create mode 100644 files/pt-br/web/css/transform-function/translate/index.html delete mode 100644 files/pt-br/web/css/var()/index.html create mode 100644 files/pt-br/web/css/var/index.html delete mode 100644 files/ru/web/css/_colon_host()/index.html create mode 100644 files/ru/web/css/_colon_host_function/index.html delete mode 100644 files/ru/web/css/attr()/index.html create mode 100644 files/ru/web/css/attr/index.html delete mode 100644 files/ru/web/css/calc()/index.html create mode 100644 files/ru/web/css/calc/index.html delete mode 100644 files/ru/web/css/clamp()/index.html create mode 100644 files/ru/web/css/clamp/index.html delete mode 100644 files/ru/web/css/filter-function/blur()/index.html create mode 100644 files/ru/web/css/filter-function/blur/index.html delete mode 100644 files/ru/web/css/minmax()/index.html create mode 100644 files/ru/web/css/minmax/index.html delete mode 100644 files/ru/web/css/transform-function/rotate()/index.html create mode 100644 files/ru/web/css/transform-function/rotate/index.html delete mode 100644 files/ru/web/css/transform-function/rotate3d()/index.html create mode 100644 files/ru/web/css/transform-function/rotate3d/index.html delete mode 100644 files/ru/web/css/transform-function/scale3d()/index.html create mode 100644 files/ru/web/css/transform-function/scale3d/index.html delete mode 100644 files/ru/web/css/transform-function/skew()/index.html create mode 100644 files/ru/web/css/transform-function/skew/index.html delete mode 100644 files/ru/web/css/url()/index.html create mode 100644 files/ru/web/css/url/index.html delete mode 100644 files/ru/web/css/var()/index.md create mode 100644 files/ru/web/css/var/index.md create mode 100644 files/zh-cn/conflicting/web/css/transform-function/skewx/index.html delete mode 100644 files/zh-cn/web/css/_colon_host()/index.html create mode 100644 files/zh-cn/web/css/_colon_host_function/index.html delete mode 100644 files/zh-cn/web/css/attr()/index.html create mode 100644 files/zh-cn/web/css/attr/index.html delete mode 100644 files/zh-cn/web/css/calc()/index.html create mode 100644 files/zh-cn/web/css/calc/index.html delete mode 100644 files/zh-cn/web/css/clamp()/index.html create mode 100644 files/zh-cn/web/css/clamp/index.html delete mode 100644 files/zh-cn/web/css/counter()/index.html create mode 100644 files/zh-cn/web/css/counter/index.html delete mode 100644 files/zh-cn/web/css/counters()/index.html create mode 100644 files/zh-cn/web/css/counters/index.html delete mode 100644 files/zh-cn/web/css/element()/index.html create mode 100644 files/zh-cn/web/css/element/index.html delete mode 100644 files/zh-cn/web/css/env()/index.html create mode 100644 files/zh-cn/web/css/env/index.html delete mode 100644 files/zh-cn/web/css/filter-function/blur()/index.html create mode 100644 files/zh-cn/web/css/filter-function/blur/index.html delete mode 100644 files/zh-cn/web/css/filter-function/brightness()/index.html create mode 100644 files/zh-cn/web/css/filter-function/brightness/index.html delete mode 100644 files/zh-cn/web/css/filter-function/contrast()/index.html create mode 100644 files/zh-cn/web/css/filter-function/contrast/index.html delete mode 100644 files/zh-cn/web/css/filter-function/drop-shadow()/index.html create mode 100644 files/zh-cn/web/css/filter-function/drop-shadow/index.html delete mode 100644 files/zh-cn/web/css/filter-function/grayscale()/index.html create mode 100644 files/zh-cn/web/css/filter-function/grayscale/index.html delete mode 100644 files/zh-cn/web/css/filter-function/opacity()/index.html create mode 100644 files/zh-cn/web/css/filter-function/opacity/index.html delete mode 100644 files/zh-cn/web/css/gradient/linear-gradient()/index.html create mode 100644 files/zh-cn/web/css/gradient/linear-gradient/index.html delete mode 100644 files/zh-cn/web/css/gradient/radial-gradient()/index.html create mode 100644 files/zh-cn/web/css/gradient/radial-gradient/index.html delete mode 100644 files/zh-cn/web/css/gradient/repeating-linear-gradient()/index.html create mode 100644 files/zh-cn/web/css/gradient/repeating-linear-gradient/index.html delete mode 100644 files/zh-cn/web/css/gradient/repeating-radial-gradient()/index.html create mode 100644 files/zh-cn/web/css/gradient/repeating-radial-gradient/index.html delete mode 100644 files/zh-cn/web/css/max()/index.html create mode 100644 files/zh-cn/web/css/max/index.html delete mode 100644 files/zh-cn/web/css/min()/index.html create mode 100644 files/zh-cn/web/css/min/index.html delete mode 100644 files/zh-cn/web/css/minmax()/index.html create mode 100644 files/zh-cn/web/css/minmax/index.html delete mode 100644 files/zh-cn/web/css/repeat()/index.html create mode 100644 files/zh-cn/web/css/repeat/index.html delete mode 100644 files/zh-cn/web/css/transform-function/matrix()/index.html create mode 100644 files/zh-cn/web/css/transform-function/matrix/index.html delete mode 100644 files/zh-cn/web/css/transform-function/matrix3d()/index.html create mode 100644 files/zh-cn/web/css/transform-function/matrix3d/index.html delete mode 100644 files/zh-cn/web/css/transform-function/perspective()/index.html create mode 100644 files/zh-cn/web/css/transform-function/perspective/index.html delete mode 100644 files/zh-cn/web/css/transform-function/rotate()/index.html create mode 100644 files/zh-cn/web/css/transform-function/rotate/index.html delete mode 100644 files/zh-cn/web/css/transform-function/rotate3d()/index.html create mode 100644 files/zh-cn/web/css/transform-function/rotate3d/index.html delete mode 100644 files/zh-cn/web/css/transform-function/rotatex()/index.html create mode 100644 files/zh-cn/web/css/transform-function/rotatex/index.html delete mode 100644 files/zh-cn/web/css/transform-function/rotatey()/index.html create mode 100644 files/zh-cn/web/css/transform-function/rotatey/index.html delete mode 100644 files/zh-cn/web/css/transform-function/rotatez()/index.html create mode 100644 files/zh-cn/web/css/transform-function/rotatez/index.html delete mode 100644 files/zh-cn/web/css/transform-function/scale()/index.html create mode 100644 files/zh-cn/web/css/transform-function/scale/index.html delete mode 100644 files/zh-cn/web/css/transform-function/scalex()/index.html create mode 100644 files/zh-cn/web/css/transform-function/scalex/index.html delete mode 100644 files/zh-cn/web/css/transform-function/scaley()/index.html create mode 100644 files/zh-cn/web/css/transform-function/scaley/index.html delete mode 100644 files/zh-cn/web/css/transform-function/skew()/index.html create mode 100644 files/zh-cn/web/css/transform-function/skew/index.html delete mode 100644 files/zh-cn/web/css/transform-function/skewx()/index.html create mode 100644 files/zh-cn/web/css/transform-function/skewx/index.html delete mode 100644 files/zh-cn/web/css/transform-function/skewy()/index.html delete mode 100644 files/zh-cn/web/css/transform-function/translate()/index.html create mode 100644 files/zh-cn/web/css/transform-function/translate/index.html delete mode 100644 files/zh-cn/web/css/transform-function/translate3d()/index.html create mode 100644 files/zh-cn/web/css/transform-function/translate3d/index.html delete mode 100644 files/zh-cn/web/css/transform-function/translatex()/index.html create mode 100644 files/zh-cn/web/css/transform-function/translatex/index.html delete mode 100644 files/zh-cn/web/css/transform-function/translatey()/index.html create mode 100644 files/zh-cn/web/css/transform-function/translatey/index.html delete mode 100644 files/zh-cn/web/css/url()/index.html create mode 100644 files/zh-cn/web/css/url/index.html delete mode 100644 files/zh-cn/web/css/var()/index.html create mode 100644 files/zh-cn/web/css/var/index.html delete mode 100644 files/zh-tw/web/css/attr()/index.html create mode 100644 files/zh-tw/web/css/attr/index.html delete mode 100644 files/zh-tw/web/css/transform-function/translate3d()/index.html create mode 100644 files/zh-tw/web/css/transform-function/translate3d/index.html diff --git a/files/de/_redirects.txt b/files/de/_redirects.txt index 6bc5c87499..6660472287 100644 --- a/files/de/_redirects.txt +++ b/files/de/_redirects.txt @@ -79,7 +79,7 @@ /de/docs/CSS/border-width /de/docs/Web/CSS/border-width /de/docs/CSS/box-shadow /de/docs/Web/CSS/box-shadow /de/docs/CSS/box-sizing /de/docs/Web/CSS/box-sizing -/de/docs/CSS/calc /de/docs/Web/CSS/calc() +/de/docs/CSS/calc /de/docs/Web/CSS/calc /de/docs/CSS/clear /de/docs/Web/CSS/clear /de/docs/CSS/color /de/docs/Web/CSS/color /de/docs/CSS/cursor /de/docs/Web/CSS/cursor @@ -544,14 +544,17 @@ /de/docs/Web/CSS/Tools /de/docs/conflicting/Web/CSS /de/docs/Web/CSS/Vererbung /de/docs/Web/CSS/inheritance /de/docs/Web/CSS/Wertdefinitionssyntax /de/docs/Web/CSS/Value_definition_syntax -/de/docs/Web/CSS/attr /de/docs/Web/CSS/attr() +/de/docs/Web/CSS/attr() /de/docs/Web/CSS/attr /de/docs/Web/CSS/berechneter_Wert /de/docs/Web/CSS/computed_value -/de/docs/Web/CSS/calc /de/docs/Web/CSS/calc() +/de/docs/Web/CSS/calc() /de/docs/Web/CSS/calc /de/docs/Web/CSS/ersetztes_Element /de/docs/Web/CSS/Replaced_element /de/docs/Web/CSS/grid-gap /de/docs/Web/CSS/gap /de/docs/Web/CSS/hidden /de/docs/Web/CSS/visibility /de/docs/Web/CSS/tatsächlicher_Wert /de/docs/Web/CSS/actual_value -/de/docs/Web/CSS/url /de/docs/Web/CSS/url() +/de/docs/Web/CSS/transform-function/translate3d() /de/docs/Web/CSS/transform-function/translate3d +/de/docs/Web/CSS/transform-function/translateY() /de/docs/Web/CSS/transform-function/translateY +/de/docs/Web/CSS/transform-function/translateZ() /de/docs/Web/CSS/transform-function/translateZ +/de/docs/Web/CSS/url() /de/docs/Web/CSS/url /de/docs/Web/CSS/visible /de/docs/Web/CSS/visibility /de/docs/Web/CSS/word-wrap /de/docs/Web/CSS/overflow-wrap /de/docs/Web/Demos_of_open_web_technologies /de/docs/Web/Demos diff --git a/files/de/_wikihistory.json b/files/de/_wikihistory.json index 0cee929ea0..42b0647ea5 100644 --- a/files/de/_wikihistory.json +++ b/files/de/_wikihistory.json @@ -5776,7 +5776,7 @@ "bee8bit" ] }, - "Web/CSS/attr()": { + "Web/CSS/attr": { "modified": "2020-11-04T08:51:28.043Z", "contributors": [ "chrisdavidmills", @@ -6269,7 +6269,7 @@ "tonra" ] }, - "Web/CSS/calc()": { + "Web/CSS/calc": { "modified": "2020-11-04T09:07:46.370Z", "contributors": [ "chrisdavidmills", @@ -7402,19 +7402,19 @@ "ramiy" ] }, - "Web/CSS/transform-function/translate3d()": { + "Web/CSS/transform-function/translate3d": { "modified": "2020-12-11T16:32:16.509Z", "contributors": [ "Johuspect" ] }, - "Web/CSS/transform-function/translateY()": { + "Web/CSS/transform-function/translateY": { "modified": "2020-12-11T16:48:39.299Z", "contributors": [ "Johuspect" ] }, - "Web/CSS/transform-function/translateZ()": { + "Web/CSS/transform-function/translateZ": { "modified": "2020-12-11T16:58:23.802Z", "contributors": [ "Johuspect" @@ -7465,7 +7465,7 @@ "Sebastianz" ] }, - "Web/CSS/url()": { + "Web/CSS/url": { "modified": "2020-10-15T22:01:29.787Z", "contributors": [ "valentinprotiuc" diff --git a/files/de/web/css/attr()/index.html b/files/de/web/css/attr()/index.html deleted file mode 100644 index 8da73fd80c..0000000000 --- a/files/de/web/css/attr()/index.html +++ /dev/null @@ -1,189 +0,0 @@ ---- -title: attr -slug: Web/CSS/attr() -tags: - - CSS - - CSS Funktion - - Layout - - Referenz - - Web -translation_of: Web/CSS/attr() ---- -

{{ CSSRef() }}

- -

Übersicht

- -

Die attr() CSS Funktion wird verwendet, um einen Wert eines Attributs des ausgewählten Elements abzurufen und innerhalb des Stylesheets zu verwenden. Sie kann auch für Pseudoelemente verwendet werden. In diesem Fall wird der Wert des Attributs seines ursprünglichen Elements zurückgegeben.

- -

Die attr() Funktion kann innerhalb jeder CSS Eigenschaft verwendet werden. {{ experimental_inline() }}

- -

Syntax

- -
Formale Syntax: attr( attribute-name <type-or-unit>? [, <fallback> ]? )
-
- -

Werte

- -
-
attribute-name
-
Entspricht dem Namen des Attributs des HTML Elements, das durch CSS referenziert wird.
-
<type-or-unit>
-
Ist ein Schlüsselwort, das den Typ oder die Einheit des Attributwerts angibt, da in HTML einige Attribute implizite Einheiten haben. Falls die Verwendung von <type-or-unit> als Wert für das angegebene Attribut ungültig ist, ist der attr() Ausdruck ebenfalls ungültig. Falls nicht angegeben, wird standardmäßig string verwendet. Nachfolgend ist eine Liste aller Werte aufgeführt: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SchlüsselwortAssoziierter TypAnmerkungStandardwert
string{{cssxref("<string>")}}Der Attributwert wird als CSS {{cssxref("<string>")}} Wert behandelt. Er wird nicht erneut geparst, insbesondere werden die Zeichen wie angegeben verwendet, anstatt dass CSS Escapes zu anderen Zeichen umgewandelt werden.An empty string
color {{ experimental_inline() }}{{cssxref("<color>")}}Der Attributwert wird als Hash (3- oder 6-Werthash) oder als Schlüsselwort interpretiert. Er muss ein gültiger CSS {{cssxref("<string>")}} Wert sein.
- Voran- und nachgestellte Leerzeichen werden abgeschnitten.		currentColor
url {{ experimental_inline() }}{{ cssxref("<uri>") }}Der Attributwert wird als ein String interpretiert, wie er in einer url() Funktion verwendet wird. Relative URLs werden relativ zum ursprünglichen Dokument interpretiert, nicht relativ zum Stylesheet.
- Voran- und nachgestellte Leerzeichen werden abgeschnitten.		Die URL about:invalid, die auf ein nicht existierendes Dokument mit einer allgemeinen Fehlermeldung verweist.
integer {{ experimental_inline() }}{{cssxref("<integer>")}}Der Attributwert wird als CSS {{cssxref("<integer>")}} Wert interpretiert. Falls er nicht gültig ist, d. h. keine Ganzzahl oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
- Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0 oder, falls 0 kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
number {{ experimental_inline() }}{{cssxref("<number>")}}Der Attributwert wird als CSS {{cssxref("<number>")}} Wertinterpretiert. Falls er nicht gültig ist, d. h. keine Zahl oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
- Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0 oder, falls 0 kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
length {{ experimental_inline() }}{{cssxref("<length>")}}Der Attributwert wird als CSS {{cssxref("<length>")}} Wert interpretiert, der die Einheit beinhaltet (z. B. 12.5em). Falls er ungültig ist, d. h. keine Länge oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
- Falls die angegebene Einheit eine relative Länge ist, wandelt attr()sie in eine absolute Länge um.
- Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0 oder, falls 0 kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, oder pc {{ experimental_inline() }}{{cssxref("<length>")}}Der Attributwert wird als CSS {{cssxref("<number>")}} Wert ohne Einheit interpretiert (z. B. 12.5) und in einen {{cssxref("<length>")}} Wert mit der angegebenen Einheit umgewandelt. Falls er nicht gültig ist, d. h. keine Zahl oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
- Falls die angegebene Einheit eine relative Länge ist, wandelt attr()sie in eine absolute Länge um.
- Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0 oder, falls 0 kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
angle {{ experimental_inline() }}{{ cssxref("<angle>") }}Der Attributwert wird als CSS {{ cssxref("<angle>") }} Wert interpretiert, der die Einheit beinhaltet (z. B. 30.5deg). Falls er ungültig ist, d. h. kein Winkel oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
- Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0deg oder, falls 0deg kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
deg, grad, rad {{ experimental_inline() }}{{ cssxref("<angle>") }}Der Attributwert wird als CSS {{cssxref("<number>")}} Wert ohne Einheit interpretiert (z. B. 12.5) und in einen {{ cssxref("<angle>") }} Wert mit der angegebenen Einheit umgewandelt. Falls er nicht gültig ist, d. h. keine Zahl oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
- Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0deg oder, falls 0deg kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
time {{ experimental_inline() }}{{cssxref("<time>")}}Der Attributwert wird als CSS {{cssxref("<time>")}} Wert interpretiert, der die Einheit beinhaltet (z. B. 30.5ms). Falls er ungültig ist, d. h. keine Zeit oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
- Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0s oder, falls 0s kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
s, ms {{ experimental_inline() }}{{cssxref("<time>")}}Der Attributwert wird als CSS {{cssxref("<number>")}} Wert ohne Einheit interpretiert (z. B. 12.5) und in einen {{cssxref("<time>")}} Wert mit der angegebenen Einheit umgewandelt. Falls er nicht gültig ist, d. h. keine Zeit oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
- Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0s oder, falls 0s kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
frequency {{ experimental_inline() }}{{cssxref("<frequency>")}}Der Attributwert wird als CSS {{cssxref("<frequency>")}} Wert interpretiert, der die Einheit beinhaltet (z. B. 30.5kHz). Falls er ungültig ist, d. h. keine Frequenz oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
- Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0Hz oder, falls 0Hz kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
Hz, kHz {{ experimental_inline() }}{{cssxref("<frequency>")}}Der Attributwert wird als CSS {{cssxref("<number>")}} Wert ohne Einheit interpretiert (z. B. 12.5) und in einen {{cssxref("<frequency>")}} Wert mit der angegebenen Einheit umgewandelt. Falls er nicht gültig ist, d. h. keine Frequenz oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
- Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0Hz oder, falls 0Hz kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
% {{ experimental_inline() }}{{cssxref("<percentage>")}}Der Attributwert wird als CSS {{cssxref("<number>")}} Wert ohne Einheit interpretiert (z. B. 12.5) und in einen {{cssxref("<percentage>")}} Wert umgewandelt. Falls er nicht gültig ist, d. h. keine Zahl oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
- Falls der Wert als Länge verwendet wird, wandelt attr()ihn in eine absolute Länge um.
- Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0% oder, falls 0% kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
-
-
<fallback>
-
Der Wert, der verwendet wird, falls das zugehörige Attribut fehlt oder einen ungültigen Wert beinhaltet. Der Fallbackwert muss gültig sein, auch wenn er nicht verwendet wird, und darf keinen weiteren attr() Ausdruck beinhalten. Falls attr() nicht der einzige Wert einer Eigenschaft ist, muss dessen <fallback> Wert von dem Typ sein, der durch <type-or-unit> definiert wird. Falls nicht angegeben, wird CSS den Standardwert verwenden, der für jeden <type-or-unit> Wert angegeben ist.
-
- -

Beispiele

- -
p:before {
-  content:attr(data-foo) " ";
-}
-
- -
<p data-foo="Hallo">Welt</p>
-
- -

Ergebnis

- -

{{ EmbedLiveSample("Beispiele", '100%', '60') }}

- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - -
SpezifikationStatusAnmerkung
{{ SpecName('CSS3 Values', '#attr', 'attr()') }}{{ Spec2('CSS3 Values') }}Fügt zwei optionale Parameter hinzu; kann in allen Eigenschaften verwendet werden; kann andere Werte als {{cssxref("<string>")}} zurückliefern. Diese Änderungen sind als experimentell {{ experimental_inline() }} markiert und können jederzeit während der CR Phase verworfen werden, falls die Browserunterstützung nicht groß genug ist.
{{ SpecName('CSS2.1', 'generate.html#x18', 'attr()') }}{{ Spec2('CSS2.1') }}Beschränkt auf die {{ cssxref("content") }} Eigenschaft; gibt immer {{cssxref("<string>")}} zurück.
- -

Browser Kompatibilität

- -{{Compat("css.types.attr")}} diff --git a/files/de/web/css/attr/index.html b/files/de/web/css/attr/index.html new file mode 100644 index 0000000000..472e9e2794 --- /dev/null +++ b/files/de/web/css/attr/index.html @@ -0,0 +1,190 @@ +--- +title: attr +slug: Web/CSS/attr +tags: + - CSS + - CSS Funktion + - Layout + - Referenz + - Web +translation_of: Web/CSS/attr() +original_slug: Web/CSS/attr() +--- +

{{ CSSRef() }}

+ +

Übersicht

+ +

Die attr() CSS Funktion wird verwendet, um einen Wert eines Attributs des ausgewählten Elements abzurufen und innerhalb des Stylesheets zu verwenden. Sie kann auch für Pseudoelemente verwendet werden. In diesem Fall wird der Wert des Attributs seines ursprünglichen Elements zurückgegeben.

+ +

Die attr() Funktion kann innerhalb jeder CSS Eigenschaft verwendet werden. {{ experimental_inline() }}

+ +

Syntax

+ +
Formale Syntax: attr( attribute-name <type-or-unit>? [, <fallback> ]? )
+
+ +

Werte

+ +
+
attribute-name
+
Entspricht dem Namen des Attributs des HTML Elements, das durch CSS referenziert wird.
+
<type-or-unit>
+
Ist ein Schlüsselwort, das den Typ oder die Einheit des Attributwerts angibt, da in HTML einige Attribute implizite Einheiten haben. Falls die Verwendung von <type-or-unit> als Wert für das angegebene Attribut ungültig ist, ist der attr() Ausdruck ebenfalls ungültig. Falls nicht angegeben, wird standardmäßig string verwendet. Nachfolgend ist eine Liste aller Werte aufgeführt: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SchlüsselwortAssoziierter TypAnmerkungStandardwert
string{{cssxref("<string>")}}Der Attributwert wird als CSS {{cssxref("<string>")}} Wert behandelt. Er wird nicht erneut geparst, insbesondere werden die Zeichen wie angegeben verwendet, anstatt dass CSS Escapes zu anderen Zeichen umgewandelt werden.An empty string
color {{ experimental_inline() }}{{cssxref("<color>")}}Der Attributwert wird als Hash (3- oder 6-Werthash) oder als Schlüsselwort interpretiert. Er muss ein gültiger CSS {{cssxref("<string>")}} Wert sein.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		currentColor
url {{ experimental_inline() }}{{ cssxref("<uri>") }}Der Attributwert wird als ein String interpretiert, wie er in einer url() Funktion verwendet wird. Relative URLs werden relativ zum ursprünglichen Dokument interpretiert, nicht relativ zum Stylesheet.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		Die URL about:invalid, die auf ein nicht existierendes Dokument mit einer allgemeinen Fehlermeldung verweist.
integer {{ experimental_inline() }}{{cssxref("<integer>")}}Der Attributwert wird als CSS {{cssxref("<integer>")}} Wert interpretiert. Falls er nicht gültig ist, d. h. keine Ganzzahl oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0 oder, falls 0 kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
number {{ experimental_inline() }}{{cssxref("<number>")}}Der Attributwert wird als CSS {{cssxref("<number>")}} Wertinterpretiert. Falls er nicht gültig ist, d. h. keine Zahl oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0 oder, falls 0 kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
length {{ experimental_inline() }}{{cssxref("<length>")}}Der Attributwert wird als CSS {{cssxref("<length>")}} Wert interpretiert, der die Einheit beinhaltet (z. B. 12.5em). Falls er ungültig ist, d. h. keine Länge oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
+ Falls die angegebene Einheit eine relative Länge ist, wandelt attr()sie in eine absolute Länge um.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0 oder, falls 0 kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, oder pc {{ experimental_inline() }}{{cssxref("<length>")}}Der Attributwert wird als CSS {{cssxref("<number>")}} Wert ohne Einheit interpretiert (z. B. 12.5) und in einen {{cssxref("<length>")}} Wert mit der angegebenen Einheit umgewandelt. Falls er nicht gültig ist, d. h. keine Zahl oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
+ Falls die angegebene Einheit eine relative Länge ist, wandelt attr()sie in eine absolute Länge um.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0 oder, falls 0 kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
angle {{ experimental_inline() }}{{ cssxref("<angle>") }}Der Attributwert wird als CSS {{ cssxref("<angle>") }} Wert interpretiert, der die Einheit beinhaltet (z. B. 30.5deg). Falls er ungültig ist, d. h. kein Winkel oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0deg oder, falls 0deg kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
deg, grad, rad {{ experimental_inline() }}{{ cssxref("<angle>") }}Der Attributwert wird als CSS {{cssxref("<number>")}} Wert ohne Einheit interpretiert (z. B. 12.5) und in einen {{ cssxref("<angle>") }} Wert mit der angegebenen Einheit umgewandelt. Falls er nicht gültig ist, d. h. keine Zahl oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0deg oder, falls 0deg kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
time {{ experimental_inline() }}{{cssxref("<time>")}}Der Attributwert wird als CSS {{cssxref("<time>")}} Wert interpretiert, der die Einheit beinhaltet (z. B. 30.5ms). Falls er ungültig ist, d. h. keine Zeit oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0s oder, falls 0s kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
s, ms {{ experimental_inline() }}{{cssxref("<time>")}}Der Attributwert wird als CSS {{cssxref("<number>")}} Wert ohne Einheit interpretiert (z. B. 12.5) und in einen {{cssxref("<time>")}} Wert mit der angegebenen Einheit umgewandelt. Falls er nicht gültig ist, d. h. keine Zeit oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0s oder, falls 0s kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
frequency {{ experimental_inline() }}{{cssxref("<frequency>")}}Der Attributwert wird als CSS {{cssxref("<frequency>")}} Wert interpretiert, der die Einheit beinhaltet (z. B. 30.5kHz). Falls er ungültig ist, d. h. keine Frequenz oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0Hz oder, falls 0Hz kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
Hz, kHz {{ experimental_inline() }}{{cssxref("<frequency>")}}Der Attributwert wird als CSS {{cssxref("<number>")}} Wert ohne Einheit interpretiert (z. B. 12.5) und in einen {{cssxref("<frequency>")}} Wert mit der angegebenen Einheit umgewandelt. Falls er nicht gültig ist, d. h. keine Frequenz oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0Hz oder, falls 0Hz kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
% {{ experimental_inline() }}{{cssxref("<percentage>")}}Der Attributwert wird als CSS {{cssxref("<number>")}} Wert ohne Einheit interpretiert (z. B. 12.5) und in einen {{cssxref("<percentage>")}} Wert umgewandelt. Falls er nicht gültig ist, d. h. keine Zahl oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
+ Falls der Wert als Länge verwendet wird, wandelt attr()ihn in eine absolute Länge um.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0% oder, falls 0% kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
+
+
<fallback>
+
Der Wert, der verwendet wird, falls das zugehörige Attribut fehlt oder einen ungültigen Wert beinhaltet. Der Fallbackwert muss gültig sein, auch wenn er nicht verwendet wird, und darf keinen weiteren attr() Ausdruck beinhalten. Falls attr() nicht der einzige Wert einer Eigenschaft ist, muss dessen <fallback> Wert von dem Typ sein, der durch <type-or-unit> definiert wird. Falls nicht angegeben, wird CSS den Standardwert verwenden, der für jeden <type-or-unit> Wert angegeben ist.
+
+ +

Beispiele

+ +
p:before {
+  content:attr(data-foo) " ";
+}
+
+ +
<p data-foo="Hallo">Welt</p>
+
+ +

Ergebnis

+ +

{{ EmbedLiveSample("Beispiele", '100%', '60') }}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{ SpecName('CSS3 Values', '#attr', 'attr()') }}{{ Spec2('CSS3 Values') }}Fügt zwei optionale Parameter hinzu; kann in allen Eigenschaften verwendet werden; kann andere Werte als {{cssxref("<string>")}} zurückliefern. Diese Änderungen sind als experimentell {{ experimental_inline() }} markiert und können jederzeit während der CR Phase verworfen werden, falls die Browserunterstützung nicht groß genug ist.
{{ SpecName('CSS2.1', 'generate.html#x18', 'attr()') }}{{ Spec2('CSS2.1') }}Beschränkt auf die {{ cssxref("content") }} Eigenschaft; gibt immer {{cssxref("<string>")}} zurück.
+ +

Browser Kompatibilität

+ +{{Compat("css.types.attr")}} diff --git a/files/de/web/css/calc()/index.html b/files/de/web/css/calc()/index.html deleted file mode 100644 index f8424ee032..0000000000 --- a/files/de/web/css/calc()/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: calc -slug: Web/CSS/calc() -tags: - - CSS - - CSS Funktion - - Referenz -translation_of: Web/CSS/calc() ---- -
{{CSSRef}}
- -

Übersicht

- -

Mit der CSS-Funktion calc() lassen sich Werte für CSS-Eigenschaften berechnen.

- -

calc() kann überall verwendet werden, wo {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<number>")}} und {{cssxref("<integer>")}} eingesetzt werden dürfen.

- -

Syntax

- -{{csssyntax}} - -
/* Eigenschaft: calc(Ausdruck) */
-width: calc(100% - 80px);
- -

Werte

- -
-
Ausdruck
-
Ein mathematischer Ausdruck, dessen Ergebnis als Wert verwendet wird.
-
- -

Ausdrücke

- -

Der Ausdruck kann eine beliebige Kombination der folgenden Operatoren sein:

- -
-
+
-
Addition.
-
-
-
Subtraktion.
-
*
-
Multiplikation (muss mindestens eine {{cssxref("<number>")}} enthalten).
-
/
-
Division (Divisor muss eine {{cssxref("<number>")}} sein).
-
- -

Bei den Operanden darf es sich um jeden Wert vom Typ {{cssxref("<length>")}} handeln, insbesondere können auch verschiedene Einheiten miteinander verrechnet werden.
- Das Setzen von Klammern ist ebenfalls möglich.

- -

calc()-Funktionen können ineinander verschachtelt werden.

- -
Hinweis: Die Operatoren + und - erfordern zwingend ein Leerzeichen zwischen dem Operator und den Werten. Zum Beispiel würde calc(50% -8px) als Prozentwert, gefolgt von einer negativen Pixel-Länge interpretiert. Eine korrekte Subtraktion ergibt sich nur mit einem Leerzeichen zwischen - und 8px: calc(50% - 8px)
-Bei einer Multiplikation oder Division spielen Leerzeichen keine Rolle, sind aber der Lesbarkeit wegen empfohlen.
- -
Berechnungen für die Breite oder Höhe von Tabellenspalten und -spaltengruppen sowie Tabellenzeilen und -zeilengruppen, sowie Tabellenzellen können vom Browser als Wert auto behandelt werden. Dies gilt für Tabellen mit dem Typ auto oder fixed.
- -

Beispiele

- -

Relative Größe eines Objekts mit einer absoluten Positionierung

- -

Mit calc() ist es kein Problem mehr, die Maße eines Objekts in Abhängigkeit anderer Maße festzulegen.

- -

In diesem Beispiel wurde ein Banner erstellt, das die gesamte verfügbare Breite einnehmen, dabei jedoch auf beiden Seiten einen Abstand einnehmen soll, der exakt 40 Pixeln beträgt.

- -

Links ist die Position mit left: 40px definiert. Mit calc(100% - 80px) werden von der Gesamtbreite 80 Pixel abgezogen (2 * 40 Pixel), so verbleibt am rechten Rand ein Abstand von ebenfalls exakt 40 Pixeln.

- -
.banner {
-  position: absolute;
-  left: 40px;
-  width: 90%;               /* fallback for browsers without support for calc() */
-  width: calc(100% - 80px);
-}
-
- -
<div class="banner">This is a banner!</div>
- -

{{ EmbedLiveSample('Relative_Gr%C3%B6sse_eines_Objekts_mit_einer_absoluten_Positionierung', '100%', '60') }}

- -

Spezifikation

- - - - - - - - - - - - - - - - -
SpezifikationStatusAnmerkung
{{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}{{Spec2('CSS3 Values')}}
- -

Browserkompatibilität

- -

{{Compat("css.types.calc")}}

- -

Siehe auch

- - diff --git a/files/de/web/css/calc/index.html b/files/de/web/css/calc/index.html new file mode 100644 index 0000000000..0b54fba886 --- /dev/null +++ b/files/de/web/css/calc/index.html @@ -0,0 +1,107 @@ +--- +title: calc +slug: Web/CSS/calc +tags: + - CSS + - CSS Funktion + - Referenz +translation_of: Web/CSS/calc() +original_slug: Web/CSS/calc() +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Mit der CSS-Funktion calc() lassen sich Werte für CSS-Eigenschaften berechnen.

+ +

calc() kann überall verwendet werden, wo {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<number>")}} und {{cssxref("<integer>")}} eingesetzt werden dürfen.

+ +

Syntax

+ +{{csssyntax}} + +
/* Eigenschaft: calc(Ausdruck) */
+width: calc(100% - 80px);
+ +

Werte

+ +
+
Ausdruck
+
Ein mathematischer Ausdruck, dessen Ergebnis als Wert verwendet wird.
+
+ +

Ausdrücke

+ +

Der Ausdruck kann eine beliebige Kombination der folgenden Operatoren sein:

+ +
+
+
+
Addition.
+
-
+
Subtraktion.
+
*
+
Multiplikation (muss mindestens eine {{cssxref("<number>")}} enthalten).
+
/
+
Division (Divisor muss eine {{cssxref("<number>")}} sein).
+
+ +

Bei den Operanden darf es sich um jeden Wert vom Typ {{cssxref("<length>")}} handeln, insbesondere können auch verschiedene Einheiten miteinander verrechnet werden.
+ Das Setzen von Klammern ist ebenfalls möglich.

+ +

calc()-Funktionen können ineinander verschachtelt werden.

+ +
Hinweis: Die Operatoren + und - erfordern zwingend ein Leerzeichen zwischen dem Operator und den Werten. Zum Beispiel würde calc(50% -8px) als Prozentwert, gefolgt von einer negativen Pixel-Länge interpretiert. Eine korrekte Subtraktion ergibt sich nur mit einem Leerzeichen zwischen - und 8px: calc(50% - 8px)
+Bei einer Multiplikation oder Division spielen Leerzeichen keine Rolle, sind aber der Lesbarkeit wegen empfohlen.
+ +
Berechnungen für die Breite oder Höhe von Tabellenspalten und -spaltengruppen sowie Tabellenzeilen und -zeilengruppen, sowie Tabellenzellen können vom Browser als Wert auto behandelt werden. Dies gilt für Tabellen mit dem Typ auto oder fixed.
+ +

Beispiele

+ +

Relative Größe eines Objekts mit einer absoluten Positionierung

+ +

Mit calc() ist es kein Problem mehr, die Maße eines Objekts in Abhängigkeit anderer Maße festzulegen.

+ +

In diesem Beispiel wurde ein Banner erstellt, das die gesamte verfügbare Breite einnehmen, dabei jedoch auf beiden Seiten einen Abstand einnehmen soll, der exakt 40 Pixeln beträgt.

+ +

Links ist die Position mit left: 40px definiert. Mit calc(100% - 80px) werden von der Gesamtbreite 80 Pixel abgezogen (2 * 40 Pixel), so verbleibt am rechten Rand ein Abstand von ebenfalls exakt 40 Pixeln.

+ +
.banner {
+  position: absolute;
+  left: 40px;
+  width: 90%;               /* fallback for browsers without support for calc() */
+  width: calc(100% - 80px);
+}
+
+ +
<div class="banner">This is a banner!</div>
+ +

{{ EmbedLiveSample('Relative_Gr%C3%B6sse_eines_Objekts_mit_einer_absoluten_Positionierung', '100%', '60') }}

+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}{{Spec2('CSS3 Values')}}
+ +

Browserkompatibilität

+ +

{{Compat("css.types.calc")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/css/transform-function/translate3d()/index.html b/files/de/web/css/transform-function/translate3d()/index.html deleted file mode 100644 index 4798b754a8..0000000000 --- a/files/de/web/css/transform-function/translate3d()/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: translate3d() -slug: Web/CSS/transform-function/translate3d() -tags: - - CSS - - CSS Funktion - - CSS Transformation - - Funktion - - Referenz -translation_of: Web/CSS/transform-function/translate3d() ---- -
{{CSSRef}}
- -

Die CSS-Eigenschaften translate3d() positioniert ein Element im 3D-Raum neu. Sein Ergebnis ist ein {{cssxref("<Transform-Funktion>")}} Datentyp.

- -
{{EmbedInteractiveExample("pages/css/function-translate3d.html")}}
- - - -

Diese Transformation wird durch einen dreidimensionalen Vektor charakterisiert. Seine Koordinaten legen fest, wie sehr sich das Element in jede Richtung bewegt.

- -

Syntax

- -
translate3d(tx, ty, tz)
-
- -

Werte

- -
-
tx
-
Ist ein {{cssxref("<Länge>")}} oder {{cssxref("<Prozentsatz>")}}, das die Abszisse des Verschiebungsvektors darstellt.
-
ty
-
Ist ein {{cssxref("<Länge>")}} oder {{cssxref("<Prozentsatz>")}}, das die Ordinate des Verschiebevektors darstellt.
-
tz
-
Ist ein {{cssxref("<Länge>")}}, der die z-Komponente des Verschiebungsvektors darstellt.
- Es kann kein {{cssxref("<Prozentwert>")}}-Wert sein; in diesem Fall wird die Eigenschaft, die die Transformation enthält, als ungültig betrachtet.
-
- - - - - - - - - - - - - - - - - -
Kartesische Koordinaten auf ℝ2Homogene Koordinaten auf ℝℙ2Kartesische Koordinaten auf ℝ3Homogene Koordinaten auf ℝℙ3
-

Diese Transformation gilt für den 3D-Raum und kann nicht in der Ebene dargestellt werden.

- 		Eine Verschiebung ist keine lineare Transformation in ℝ3 und kann nicht durch eine kartesische Koordinatenmatrix dargestellt werden. 100tx010ty001tz0001
- -

Beispiele

- -

Verwendung einer einachsigen Verschiebung

- -

HTML

- -
<div>Static</div>
-<div class="moved">Moved</div>
-<div>Static</div>
- -

CSS

- -
div {
-  width: 60px;
-  height: 60px;
-  background-color: skyblue;
-}
-
-.moved {
-  /* Equivalent to perspective(500px) translateX(10px) */
-  transform: perspective(500px) translate3d(10px, 0, 0px);
-  background-color: pink;
-}
-
- -

Ergebnis

- -

{{EmbedLiveSample("Using_a_single_axis_translation", 250, 250)}}

- -

Kombinierte Z-Achsen- und X-Achsen-Verschiebung

- -

HTML

- -
<div>Static</div>
-<div class="moved">Moved</div>
-<div>Static</div>
- -

CSS

- -
div {
-  width: 60px;
-  height: 60px;
-  background-color: skyblue;
-}
-
-.moved {
-  transform: perspective(500px) translate3d(10px, 0, 100px);
-  background-color: pink;
-}
-
- -

Ergebnis

- -

{{EmbedLiveSample("Combining_z-axis_and_x-axis_translation", 250, 250)}}

- -

Spezifikation

- - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName("CSS Transforms 2", "#funcdef-translate3d", "translate3d()")}}{{Spec2("CSS Transforms 2")}}Ursprüngliche Definition
- -

Browser-Kompatibilität

- -

{{Compat("css.types.transform-function")}}

- -

Siehe auch

- - diff --git a/files/de/web/css/transform-function/translate3d/index.html b/files/de/web/css/transform-function/translate3d/index.html new file mode 100644 index 0000000000..8e232a1f6f --- /dev/null +++ b/files/de/web/css/transform-function/translate3d/index.html @@ -0,0 +1,146 @@ +--- +title: translate3d() +slug: Web/CSS/transform-function/translate3d +tags: + - CSS + - CSS Funktion + - CSS Transformation + - Funktion + - Referenz +translation_of: Web/CSS/transform-function/translate3d() +original_slug: Web/CSS/transform-function/translate3d() +--- +
{{CSSRef}}
+ +

Die CSS-Eigenschaften translate3d() positioniert ein Element im 3D-Raum neu. Sein Ergebnis ist ein {{cssxref("<Transform-Funktion>")}} Datentyp.

+ +
{{EmbedInteractiveExample("pages/css/function-translate3d.html")}}
+ + + +

Diese Transformation wird durch einen dreidimensionalen Vektor charakterisiert. Seine Koordinaten legen fest, wie sehr sich das Element in jede Richtung bewegt.

+ +

Syntax

+ +
translate3d(tx, ty, tz)
+
+ +

Werte

+ +
+
tx
+
Ist ein {{cssxref("<Länge>")}} oder {{cssxref("<Prozentsatz>")}}, das die Abszisse des Verschiebungsvektors darstellt.
+
ty
+
Ist ein {{cssxref("<Länge>")}} oder {{cssxref("<Prozentsatz>")}}, das die Ordinate des Verschiebevektors darstellt.
+
tz
+
Ist ein {{cssxref("<Länge>")}}, der die z-Komponente des Verschiebungsvektors darstellt.
+ Es kann kein {{cssxref("<Prozentwert>")}}-Wert sein; in diesem Fall wird die Eigenschaft, die die Transformation enthält, als ungültig betrachtet.
+
+ + + + + + + + + + + + + + + + + +
Kartesische Koordinaten auf ℝ2Homogene Koordinaten auf ℝℙ2Kartesische Koordinaten auf ℝ3Homogene Koordinaten auf ℝℙ3
+

Diese Transformation gilt für den 3D-Raum und kann nicht in der Ebene dargestellt werden.

+ 		Eine Verschiebung ist keine lineare Transformation in ℝ3 und kann nicht durch eine kartesische Koordinatenmatrix dargestellt werden. 100tx010ty001tz0001
+ +

Beispiele

+ +

Verwendung einer einachsigen Verschiebung

+ +

HTML

+ +
<div>Static</div>
+<div class="moved">Moved</div>
+<div>Static</div>
+ +

CSS

+ +
div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  /* Equivalent to perspective(500px) translateX(10px) */
+  transform: perspective(500px) translate3d(10px, 0, 0px);
+  background-color: pink;
+}
+
+ +

Ergebnis

+ +

{{EmbedLiveSample("Using_a_single_axis_translation", 250, 250)}}

+ +

Kombinierte Z-Achsen- und X-Achsen-Verschiebung

+ +

HTML

+ +
<div>Static</div>
+<div class="moved">Moved</div>
+<div>Static</div>
+ +

CSS

+ +
div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: perspective(500px) translate3d(10px, 0, 100px);
+  background-color: pink;
+}
+
+ +

Ergebnis

+ +

{{EmbedLiveSample("Combining_z-axis_and_x-axis_translation", 250, 250)}}

+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("CSS Transforms 2", "#funcdef-translate3d", "translate3d()")}}{{Spec2("CSS Transforms 2")}}Ursprüngliche Definition
+ +

Browser-Kompatibilität

+ +

{{Compat("css.types.transform-function")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/css/transform-function/translatey()/index.html b/files/de/web/css/transform-function/translatey()/index.html deleted file mode 100644 index 83a980b3d0..0000000000 --- a/files/de/web/css/transform-function/translatey()/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: translateY() -slug: Web/CSS/transform-function/translateY() -tags: - - CSS - - CSS Funktion - - CSS Transfomation - - Funktion - - Referenz -translation_of: Web/CSS/transform-function/translateY() ---- -
{{CSSRef}}
- -

Die CSS-Funktion translateY() positioniert ein Element horizontal auf der 2D-Ebene neu. Ihr Ergebnis ist ein {{cssxref("<transform-function>")}} Datentyp.

- -

- -
-

Hinweis: translateY(ty) ist dasselbe wie translate(0, ty) oder translate3d(0, ty, 0).

-
- -

Syntax

- -
/* <length-percentage> values */
-transform: translateY(200px);
-transform: translateY(50%);
-
- -

Werte

- -
-
<length-percentage>
-
Ist ein {{cssxref("<length>")}} oder {{cssxref("<percentage>")}} , der die Abszisse des Verschiebevektors darstellt. Ein Prozentwert bezieht sich auf die Breite der Referenzbox, die durch die Eigenschaft {{cssxref("transform-box")}} definiert ist.
-
- - - - - - - - - - - - - - - - - - - - - -
Kartesische Koordinaten auf ℝ2Homogene Koordinaten auf ℝℙ2Kartesische Koordinaten auf ℝ3Homogene Koordinaten auf ℝℙ3
-

Eine Translation ist keine lineare Transformation in ℝ2 und kann nicht durch eine kartesische Koordinatenmatrix dargestellt werden.

- 		10001t001 10001t001 1000010t00100001
[1 0 0 1 0 t]
- -

Formale Syntax

- -
translateY({{cssxref("<length-percentage>")}})
-
- -

Beispiel

- -

HTML

- -
<div>Static</div>
-<div class="moved">Moved</div>
-<div>Static</div>
- -

CSS

- -
div {
-  width: 60px;
-  height: 60px;
-  background-color: skyblue;
-}
-
-.moved {
-  transform: translateY(10px);
-  background-color: pink;
-}
-
- -

Ergebnis

- -

{{EmbedLiveSample("Examples", 250, 250)}}

- -

Spezifikation

- - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName("CSS3 Transforms", "#funcdef-transform-translatex", "translateX()")}}{{Spec2("CSS3 Transforms")}}Ursprüngliche Definition
- -

Browser-Kompatibilität

- -

{{Compat("css.types.transform-function")}}

- -

See also

- - diff --git a/files/de/web/css/transform-function/translatey/index.html b/files/de/web/css/transform-function/translatey/index.html new file mode 100644 index 0000000000..099f7d2202 --- /dev/null +++ b/files/de/web/css/transform-function/translatey/index.html @@ -0,0 +1,122 @@ +--- +title: translateY() +slug: Web/CSS/transform-function/translateY +tags: + - CSS + - CSS Funktion + - CSS Transfomation + - Funktion + - Referenz +translation_of: Web/CSS/transform-function/translateY() +original_slug: Web/CSS/transform-function/translateY() +--- +
{{CSSRef}}
+ +

Die CSS-Funktion translateY() positioniert ein Element horizontal auf der 2D-Ebene neu. Ihr Ergebnis ist ein {{cssxref("<transform-function>")}} Datentyp.

+ +

+ +
+

Hinweis: translateY(ty) ist dasselbe wie translate(0, ty) oder translate3d(0, ty, 0).

+
+ +

Syntax

+ +
/* <length-percentage> values */
+transform: translateY(200px);
+transform: translateY(50%);
+
+ +

Werte

+ +
+
<length-percentage>
+
Ist ein {{cssxref("<length>")}} oder {{cssxref("<percentage>")}} , der die Abszisse des Verschiebevektors darstellt. Ein Prozentwert bezieht sich auf die Breite der Referenzbox, die durch die Eigenschaft {{cssxref("transform-box")}} definiert ist.
+
+ + + + + + + + + + + + + + + + + + + + + +
Kartesische Koordinaten auf ℝ2Homogene Koordinaten auf ℝℙ2Kartesische Koordinaten auf ℝ3Homogene Koordinaten auf ℝℙ3
+

Eine Translation ist keine lineare Transformation in ℝ2 und kann nicht durch eine kartesische Koordinatenmatrix dargestellt werden.

+ 		10001t001 10001t001 1000010t00100001
[1 0 0 1 0 t]
+ +

Formale Syntax

+ +
translateY({{cssxref("<length-percentage>")}})
+
+ +

Beispiel

+ +

HTML

+ +
<div>Static</div>
+<div class="moved">Moved</div>
+<div>Static</div>
+ +

CSS

+ +
div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: translateY(10px);
+  background-color: pink;
+}
+
+ +

Ergebnis

+ +

{{EmbedLiveSample("Examples", 250, 250)}}

+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("CSS3 Transforms", "#funcdef-transform-translatex", "translateX()")}}{{Spec2("CSS3 Transforms")}}Ursprüngliche Definition
+ +

Browser-Kompatibilität

+ +

{{Compat("css.types.transform-function")}}

+ +

See also

+ + diff --git a/files/de/web/css/transform-function/translatez()/index.html b/files/de/web/css/transform-function/translatez()/index.html deleted file mode 100644 index 5a3f6876da..0000000000 --- a/files/de/web/css/transform-function/translatez()/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: translateZ() -slug: Web/CSS/transform-function/translateZ() -tags: - - 3D - - CSS - - CSS Funktion - - CSS Transformation - - Funktion - - Referenz -translation_of: Web/CSS/transform-function/translateZ() ---- -
{{CSSRef}}
- -

Die CSS-Funktion translateZ() positioniert ein Element entlang der Z-Achse im 3D-Raum neu, d. h. näher zum Betrachter hin oder weiter von ihm weg. Ihr Ergebnis ist ein {{cssxref("<transform-function>")}} Datentyp.

- -
{{EmbedInteractiveExample("pages/css/function-translateZ.html")}}
- - - -

Diese Transformation wird durch einen {{cssxref("<length>")}}-Wert definiert, der angibt, wie weit sich das Element oder die Elemente nach innen oder nach außen bewegen.

- -

In den obigen interaktiven Beispielen wurden die Werte perspective: 550px; gesetzt, um einen 3D-Raum zu erzeugen, und transform-style: preserve-3d;, damit die Kinder-elemente, die 6 Seiten des Würfels, auch im 3D-Raum positioniert werden, auf den Würfel gesetzt.

- -
-

Hinweis: translateZ(tz) ist gleichzusetzen mit translate3d(0, 0, tz).

-
- -

Syntax

- -
translateZ(tz)
-
- -

Werte

- -
-
tz
-
Ein {{cssxref("<Länge>")}} Wert, der die Z-Komponente des Verschiebungsvektors darstellt. Ein positiver Wert verschiebt das Element zum Betrachter hin, ein negativer Wert weiter vom Betrachter weg.
-
- - - - - - - - - - - - - - - - - -
Kartesische Koordinaten auf ℝ2Homogene Koordinaten auf ℝℙ2Kartesische Koordinaten auf ℝ3Homogene Koordinaten auf ℝℙ3
Diese Transformation gilt für den 3D-Raum und kann nicht in der Ebene dargestellt werden.Eine Verschiebung ist keine lineare Transformation in ℝ3 und kann nicht durch eine kartesische Koordinatenmatrix dargestellt werden. 10000100001t0001
- -

Beispiel

- -

In diesem Beispiel werden zwei Boxen erstellt. Einer wird normal auf der Seite positioniert, ohne dass er übersetzt wird. Der zweite wird durch Anwendung der Perspektive verändert, um einen 3D-Raum zu erzeugen, und dann in Richtung des Benutzers bewegt.

- -

HTML

- -
<div>Static</div>
-<div class="moved">Moved</div>
- -

CSS

- -
div {
-  position: relative;
-  width: 60px;
-  height: 60px;
-  left: 100px;
-  background-color: skyblue;
-}
-
-.moved {
-  transform: perspective(500px) translateZ(200px);
-  background-color: pink;
-}
-
- -

Was hier wirklich wichtig ist, ist die Klasse "moved"; lassen Sie uns einen Blick darauf werfen, was sie tut. Zunächst positioniert die Funktion perspective() den Betrachter relativ zu der Ebene, die bei z=0 liegt (im Wesentlichen die Oberfläche des Bildschirms). Ein Wert von 500px bedeutet, dass sich der Benutzer 500 Pixel "vor" dem Bild befindet, das bei z=0 liegt.

- -

Dann verschiebt die Funktion translateZ() das Element um 200 Pixel vom Bildschirm "nach außen", in Richtung des Benutzers. Dies hat den Effekt, dass das Element größer erscheint, wenn es auf einem 2D-Display betrachtet wird, oder näher, wenn es mit einem VR-Headset oder einem anderen 3D-Anzeigegerät betrachtet wird.

- -

Beachten Sie, wenn der perspective()-Wert kleiner ist als der translateZ()-Wert, wie z.B. transform: perspective(200px) translateZ(300px); das transformierte Element wird nicht sichtbar sein, da es weiter als der Viewport des Benutzers ist. Je kleiner der Unterschied zwischen den Werten von perspective() und translateZ() ist, desto näher ist der Benutzer am Element und desto größer erscheint das übersetzte Element.

- -

Ergebnis

- -

{{EmbedLiveSample("Examples", 250, 250)}}

- -

Specifications

- - - - - - - - - - - - - - - - -
SpezifikationStatusKommentar
{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}{{Spec2('CSS Transforms 2')}}Fügt eine 3D-Transformationsfunktion zum CSS Transform-Standard hinzu.
- -

Browser-Kompatibilität

- -

{{Compat("css.types.transform-function")}}

- -

Siehe auch

- - diff --git a/files/de/web/css/transform-function/translatez/index.html b/files/de/web/css/transform-function/translatez/index.html new file mode 100644 index 0000000000..6b19b25096 --- /dev/null +++ b/files/de/web/css/transform-function/translatez/index.html @@ -0,0 +1,127 @@ +--- +title: translateZ() +slug: Web/CSS/transform-function/translateZ +tags: + - 3D + - CSS + - CSS Funktion + - CSS Transformation + - Funktion + - Referenz +translation_of: Web/CSS/transform-function/translateZ() +original_slug: Web/CSS/transform-function/translateZ() +--- +
{{CSSRef}}
+ +

Die CSS-Funktion translateZ() positioniert ein Element entlang der Z-Achse im 3D-Raum neu, d. h. näher zum Betrachter hin oder weiter von ihm weg. Ihr Ergebnis ist ein {{cssxref("<transform-function>")}} Datentyp.

+ +
{{EmbedInteractiveExample("pages/css/function-translateZ.html")}}
+ + + +

Diese Transformation wird durch einen {{cssxref("<length>")}}-Wert definiert, der angibt, wie weit sich das Element oder die Elemente nach innen oder nach außen bewegen.

+ +

In den obigen interaktiven Beispielen wurden die Werte perspective: 550px; gesetzt, um einen 3D-Raum zu erzeugen, und transform-style: preserve-3d;, damit die Kinder-elemente, die 6 Seiten des Würfels, auch im 3D-Raum positioniert werden, auf den Würfel gesetzt.

+ +
+

Hinweis: translateZ(tz) ist gleichzusetzen mit translate3d(0, 0, tz).

+
+ +

Syntax

+ +
translateZ(tz)
+
+ +

Werte

+ +
+
tz
+
Ein {{cssxref("<Länge>")}} Wert, der die Z-Komponente des Verschiebungsvektors darstellt. Ein positiver Wert verschiebt das Element zum Betrachter hin, ein negativer Wert weiter vom Betrachter weg.
+
+ + + + + + + + + + + + + + + + + +
Kartesische Koordinaten auf ℝ2Homogene Koordinaten auf ℝℙ2Kartesische Koordinaten auf ℝ3Homogene Koordinaten auf ℝℙ3
Diese Transformation gilt für den 3D-Raum und kann nicht in der Ebene dargestellt werden.Eine Verschiebung ist keine lineare Transformation in ℝ3 und kann nicht durch eine kartesische Koordinatenmatrix dargestellt werden. 10000100001t0001
+ +

Beispiel

+ +

In diesem Beispiel werden zwei Boxen erstellt. Einer wird normal auf der Seite positioniert, ohne dass er übersetzt wird. Der zweite wird durch Anwendung der Perspektive verändert, um einen 3D-Raum zu erzeugen, und dann in Richtung des Benutzers bewegt.

+ +

HTML

+ +
<div>Static</div>
+<div class="moved">Moved</div>
+ +

CSS

+ +
div {
+  position: relative;
+  width: 60px;
+  height: 60px;
+  left: 100px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: perspective(500px) translateZ(200px);
+  background-color: pink;
+}
+
+ +

Was hier wirklich wichtig ist, ist die Klasse "moved"; lassen Sie uns einen Blick darauf werfen, was sie tut. Zunächst positioniert die Funktion perspective() den Betrachter relativ zu der Ebene, die bei z=0 liegt (im Wesentlichen die Oberfläche des Bildschirms). Ein Wert von 500px bedeutet, dass sich der Benutzer 500 Pixel "vor" dem Bild befindet, das bei z=0 liegt.

+ +

Dann verschiebt die Funktion translateZ() das Element um 200 Pixel vom Bildschirm "nach außen", in Richtung des Benutzers. Dies hat den Effekt, dass das Element größer erscheint, wenn es auf einem 2D-Display betrachtet wird, oder näher, wenn es mit einem VR-Headset oder einem anderen 3D-Anzeigegerät betrachtet wird.

+ +

Beachten Sie, wenn der perspective()-Wert kleiner ist als der translateZ()-Wert, wie z.B. transform: perspective(200px) translateZ(300px); das transformierte Element wird nicht sichtbar sein, da es weiter als der Viewport des Benutzers ist. Je kleiner der Unterschied zwischen den Werten von perspective() und translateZ() ist, desto näher ist der Benutzer am Element und desto größer erscheint das übersetzte Element.

+ +

Ergebnis

+ +

{{EmbedLiveSample("Examples", 250, 250)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}{{Spec2('CSS Transforms 2')}}Fügt eine 3D-Transformationsfunktion zum CSS Transform-Standard hinzu.
+ +

Browser-Kompatibilität

+ +

{{Compat("css.types.transform-function")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/css/url()/index.html b/files/de/web/css/url()/index.html deleted file mode 100644 index 9137892300..0000000000 --- a/files/de/web/css/url()/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: -slug: Web/CSS/url() -tags: - - CSS - - Layout - - Referenz - - URI - - URL -translation_of: Web/CSS/url() -translation_of_original: Web/CSS/url -original_slug: Web/CSS/url ---- -
{{ CssRef() }}
- -

Der <url> CSS-Datentyp bezeichnet einen Zeiger auf eine Ressource, z.B. ein Bild oder eine Schriftart. URLs können in zahlreichen CSS Eigenschaften verwendet werden, wie etwa {{ Cssxref("background-image") }}, {{ Cssxref("cursor") }}, und {{ cssxref("list-style") }}.

- -
-

URI oder URL? Es gibt einen Unterschied zwischen einem URI und einem URL. Ein URI identifiziert einfach eine Ressource. Ein URL ist eine Art von URI und beschreibt den Speicherort einer Ressource. Ein URI kann entweder ein URL oder ein Name (URN) einer Ressource sein.

- -

In CSS1 die funktionale Notation url() beschrieb nur echte URLs. In CSS2.1 die Definition von url()  wurde erweitert, um alle URIs zu beschreiben, ob URL oder URN. Verwirrenderweise bedeutete es, dass url() verwendet werden konnte, um ein <uri> CSS-Datentyp zu erstellen. Diese Änderung war nicht nur ungünstig, sondern auch überflüßig, weil die URNs so oft wie nie in CSS verwendet werden. Um die Verwirrung zu vermindern, kehrte CSS3 zu der engeren Anfangsdefinition. Jetzt bezeichnet url() nur echte <url>s.

-
- -

Syntax

- -

Der <url> Datentyp wird mit der funktionalen Notation url() spezifiziert. Es kann sowohl ohne Anführungszeichen als auch mit  einfachen oder doppelten Anführungszeichen geschrieben werden. Relative URLs sind erlaubt und sind relativ zum URL des Stylesheets (nicht zum URL der Webseite).

- -
<a_css_property>: url("http://mysite.example.com/mycursor.png")
-<a_css_property>: url('http://mysite.example.com/mycursor.png')
-<a_css_property>: url(http://mysite.example.com/mycursor.png)
-
- -
-

Hinweis: Steuerzeichen über 0x7e sind ab Firefox 15 in URLs ohne Anführungszeichen nicht erlaubt. Sieh {{Bug(752230)}} für mehr Details.

-
- -

Beispiele

- -
.topbanner {
-  background: url("topbanner.png") #00D no-repeat fixed;
-}
-
- -
ul {
-  list-style: square url(http://www.example.com/redball.png);
-}
-
- -

Spezifikationen

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS3 Values', '#urls', '<url>') }}{{ Spec2('CSS3 Values') }}Keine wichtige Änderungen seit CSS2.1.
{{ Specname('CSS2.1', 'syndata.html#uri', '<uri>') }}{{ Spec2('CSS2.1') }}Keine wichtige Änderungen seit CSS1.
{{ SpecName('CSS1', '#url', '<url>') }}{{ Spec2('CSS1') }}Erste Definition.
- -

Browserkompatibilität

- -

 

- -

{{Compat("css.types.url")}}

- -

 

diff --git a/files/de/web/css/url/index.html b/files/de/web/css/url/index.html new file mode 100644 index 0000000000..4b7cec57e4 --- /dev/null +++ b/files/de/web/css/url/index.html @@ -0,0 +1,84 @@ +--- +title: +slug: Web/CSS/url +tags: + - CSS + - Layout + - Referenz + - URI + - URL +translation_of: Web/CSS/url() +translation_of_original: Web/CSS/url +original_slug: Web/CSS/url() +--- +
{{ CssRef() }}
+ +

Der <url> CSS-Datentyp bezeichnet einen Zeiger auf eine Ressource, z.B. ein Bild oder eine Schriftart. URLs können in zahlreichen CSS Eigenschaften verwendet werden, wie etwa {{ Cssxref("background-image") }}, {{ Cssxref("cursor") }}, und {{ cssxref("list-style") }}.

+ +
+

URI oder URL? Es gibt einen Unterschied zwischen einem URI und einem URL. Ein URI identifiziert einfach eine Ressource. Ein URL ist eine Art von URI und beschreibt den Speicherort einer Ressource. Ein URI kann entweder ein URL oder ein Name (URN) einer Ressource sein.

+ +

In CSS1 die funktionale Notation url() beschrieb nur echte URLs. In CSS2.1 die Definition von url()  wurde erweitert, um alle URIs zu beschreiben, ob URL oder URN. Verwirrenderweise bedeutete es, dass url() verwendet werden konnte, um ein <uri> CSS-Datentyp zu erstellen. Diese Änderung war nicht nur ungünstig, sondern auch überflüßig, weil die URNs so oft wie nie in CSS verwendet werden. Um die Verwirrung zu vermindern, kehrte CSS3 zu der engeren Anfangsdefinition. Jetzt bezeichnet url() nur echte <url>s.

+
+ +

Syntax

+ +

Der <url> Datentyp wird mit der funktionalen Notation url() spezifiziert. Es kann sowohl ohne Anführungszeichen als auch mit  einfachen oder doppelten Anführungszeichen geschrieben werden. Relative URLs sind erlaubt und sind relativ zum URL des Stylesheets (nicht zum URL der Webseite).

+ +
<a_css_property>: url("http://mysite.example.com/mycursor.png")
+<a_css_property>: url('http://mysite.example.com/mycursor.png')
+<a_css_property>: url(http://mysite.example.com/mycursor.png)
+
+ +
+

Hinweis: Steuerzeichen über 0x7e sind ab Firefox 15 in URLs ohne Anführungszeichen nicht erlaubt. Sieh {{Bug(752230)}} für mehr Details.

+
+ +

Beispiele

+ +
.topbanner {
+  background: url("topbanner.png") #00D no-repeat fixed;
+}
+
+ +
ul {
+  list-style: square url(http://www.example.com/redball.png);
+}
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Values', '#urls', '<url>') }}{{ Spec2('CSS3 Values') }}Keine wichtige Änderungen seit CSS2.1.
{{ Specname('CSS2.1', 'syndata.html#uri', '<uri>') }}{{ Spec2('CSS2.1') }}Keine wichtige Änderungen seit CSS1.
{{ SpecName('CSS1', '#url', '<url>') }}{{ Spec2('CSS1') }}Erste Definition.
+ +

Browserkompatibilität

+ +

 

+ +

{{Compat("css.types.url")}}

+ +

 

diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt index 36353e53fe..dcd299fa1c 100644 --- a/files/es/_redirects.txt +++ b/files/es/_redirects.txt @@ -77,7 +77,7 @@ /es/docs/CSS/border-width /es/docs/Web/CSS/border-width /es/docs/CSS/bottom /es/docs/Web/CSS/bottom /es/docs/CSS/box-shadow /es/docs/Web/CSS/box-shadow -/es/docs/CSS/calc /es/docs/Web/CSS/calc() +/es/docs/CSS/calc /es/docs/Web/CSS/calc /es/docs/CSS/capacidad_de_animacion_de_propiedades_CSS /es/docs/Web/CSS /es/docs/CSS/clip /es/docs/Web/CSS/clip /es/docs/CSS/color /es/docs/Web/CSS/color @@ -1711,33 +1711,34 @@ /es/docs/Web/CSS/after /es/docs/Web/CSS/::after /es/docs/Web/CSS/animacion-iteracion-cuenta /es/docs/Web/CSS/animation-iteration-count /es/docs/Web/CSS/animacion-nombre /es/docs/Web/CSS/animation-name -/es/docs/Web/CSS/attr /es/docs/Web/CSS/attr() +/es/docs/Web/CSS/attr() /es/docs/Web/CSS/attr /es/docs/Web/CSS/before /es/docs/Web/CSS/::before -/es/docs/Web/CSS/calc /es/docs/Web/CSS/calc() +/es/docs/Web/CSS/calc() /es/docs/Web/CSS/calc /es/docs/Web/CSS/capacidad_de_animacion_de_propiedades_CSS /es/docs/Web/CSS /es/docs/Web/CSS/cursor/Uso_de_URL_como_valor_de_la_propiedad_cursor /es/docs/conflicting/Web/CSS/cursor -/es/docs/Web/CSS/env /es/docs/Web/CSS/env() -/es/docs/Web/CSS/filter-function/blur /es/docs/Web/CSS/filter-function/blur() -/es/docs/Web/CSS/filter-function/brightness /es/docs/Web/CSS/filter-function/brightness() -/es/docs/Web/CSS/filter-function/url /es/docs/Web/CSS/url() +/es/docs/Web/CSS/env() /es/docs/Web/CSS/env +/es/docs/Web/CSS/filter-function/blur() /es/docs/Web/CSS/filter-function/blur +/es/docs/Web/CSS/filter-function/brightness() /es/docs/Web/CSS/filter-function/brightness +/es/docs/Web/CSS/filter-function/url /es/docs/Web/CSS/url /es/docs/Web/CSS/filtro /es/docs/Web/CSS/filter /es/docs/Web/CSS/grid-column-gap /es/docs/Web/CSS/column-gap /es/docs/Web/CSS/grid-gap /es/docs/Web/CSS/gap /es/docs/Web/CSS/kerning /en-US/docs/Web/CSS/font-kerning -/es/docs/Web/CSS/min /es/docs/Web/CSS/min() -/es/docs/Web/CSS/minmax /es/docs/Web/CSS/minmax() +/es/docs/Web/CSS/min() /es/docs/Web/CSS/min +/es/docs/Web/CSS/minmax() /es/docs/Web/CSS/minmax /es/docs/Web/CSS/none /es/docs/Web/CSS/float /es/docs/Web/CSS/padding_paspartu /es/docs/Web/CSS/padding /es/docs/Web/CSS/porcentaje /es/docs/Web/CSS/percentage -/es/docs/Web/CSS/repeat /es/docs/Web/CSS/repeat() +/es/docs/Web/CSS/repeat() /es/docs/Web/CSS/repeat /es/docs/Web/CSS/resolución /es/docs/Web/CSS/resolution -/es/docs/Web/CSS/transform-function/rotate /es/docs/Web/CSS/transform-function/rotate() -/es/docs/Web/CSS/transform-function/rotate3d /es/docs/Web/CSS/transform-function/rotate3d() -/es/docs/Web/CSS/transform-function/scale /es/docs/Web/CSS/transform-function/scale() -/es/docs/Web/CSS/transform-function/translate /es/docs/Web/CSS/transform-function/translate() -/es/docs/Web/CSS/transform-function/translateY /es/docs/Web/CSS/transform-function/translateY() -/es/docs/Web/CSS/transform-function/translateZ /es/docs/Web/CSS/transform-function/translateZ() -/es/docs/Web/CSS/var /es/docs/Web/CSS/var() +/es/docs/Web/CSS/transform-function/rotate() /es/docs/Web/CSS/transform-function/rotate +/es/docs/Web/CSS/transform-function/rotate3d() /es/docs/Web/CSS/transform-function/rotate3d +/es/docs/Web/CSS/transform-function/scale() /es/docs/Web/CSS/transform-function/scale +/es/docs/Web/CSS/transform-function/translate() /es/docs/Web/CSS/transform-function/translate +/es/docs/Web/CSS/transform-function/translateY() /es/docs/Web/CSS/transform-function/translateY +/es/docs/Web/CSS/transform-function/translateZ() /es/docs/Web/CSS/transform-function/translateZ +/es/docs/Web/CSS/url() /es/docs/Web/CSS/url +/es/docs/Web/CSS/var() /es/docs/Web/CSS/var /es/docs/Web/Demos_of_open_web_technologies /es/docs/Web/Demos /es/docs/Web/Events/animationend /es/docs/Web/API/HTMLElement/animationend_event /es/docs/Web/Events/beforeunload /es/docs/Web/API/Window/beforeunload_event diff --git a/files/es/_wikihistory.json b/files/es/_wikihistory.json index 9767ca6830..abe45797eb 100644 --- a/files/es/_wikihistory.json +++ b/files/es/_wikihistory.json @@ -11309,7 +11309,7 @@ "guerratron" ] }, - "Web/CSS/attr()": { + "Web/CSS/attr": { "modified": "2020-11-04T08:51:33.506Z", "contributors": [ "chrisdavidmills", @@ -11873,7 +11873,7 @@ "juandiegoles" ] }, - "Web/CSS/calc()": { + "Web/CSS/calc": { "modified": "2020-11-04T09:08:00.719Z", "contributors": [ "chrisdavidmills", @@ -11995,7 +11995,7 @@ "FranciscoCastle" ] }, - "Web/CSS/env()": { + "Web/CSS/env": { "modified": "2020-11-10T11:09:30.133Z", "contributors": [ "chrisdavidmills", @@ -12018,14 +12018,14 @@ "mfluehr" ] }, - "Web/CSS/filter-function/blur()": { + "Web/CSS/filter-function/blur": { "modified": "2020-11-05T09:45:32.642Z", "contributors": [ "chrisdavidmills", "lajaso" ] }, - "Web/CSS/filter-function/brightness()": { + "Web/CSS/filter-function/brightness": { "modified": "2020-11-05T09:57:09.596Z", "contributors": [ "chrisdavidmills", @@ -12619,7 +12619,7 @@ "teffcode" ] }, - "Web/CSS/min()": { + "Web/CSS/min": { "modified": "2020-12-03T10:19:50.144Z", "contributors": [ "AlePerez92", @@ -12658,7 +12658,7 @@ "Mgjbot" ] }, - "Web/CSS/minmax()": { + "Web/CSS/minmax": { "modified": "2020-11-16T09:05:45.467Z", "contributors": [ "chrisdavidmills", @@ -12885,7 +12885,7 @@ "arroutado" ] }, - "Web/CSS/repeat()": { + "Web/CSS/repeat": { "modified": "2020-11-18T14:44:16.857Z", "contributors": [ "chrisdavidmills", @@ -13053,7 +13053,7 @@ "limbus" ] }, - "Web/CSS/transform-function/rotate()": { + "Web/CSS/transform-function/rotate": { "modified": "2020-11-19T16:05:17.901Z", "contributors": [ "chrisdavidmills", @@ -13061,7 +13061,7 @@ "pekechis" ] }, - "Web/CSS/transform-function/rotate3d()": { + "Web/CSS/transform-function/rotate3d": { "modified": "2020-11-19T16:07:08.348Z", "contributors": [ "chrisdavidmills", @@ -13069,7 +13069,7 @@ "jjyepez" ] }, - "Web/CSS/transform-function/scale()": { + "Web/CSS/transform-function/scale": { "modified": "2020-11-30T10:15:28.610Z", "contributors": [ "chrisdavidmills", @@ -13081,7 +13081,7 @@ "maramal" ] }, - "Web/CSS/transform-function/translate()": { + "Web/CSS/transform-function/translate": { "modified": "2020-11-30T10:30:15.561Z", "contributors": [ "chrisdavidmills", @@ -13092,14 +13092,14 @@ "ShakMR" ] }, - "Web/CSS/transform-function/translateY()": { + "Web/CSS/transform-function/translateY": { "modified": "2020-11-30T13:00:51.105Z", "contributors": [ "chrisdavidmills", "israel-munoz" ] }, - "Web/CSS/transform-function/translateZ()": { + "Web/CSS/transform-function/translateZ": { "modified": "2020-11-30T13:02:44.123Z", "contributors": [ "chrisdavidmills", @@ -13153,7 +13153,7 @@ "juan-ferrer-toribio" ] }, - "Web/CSS/url()": { + "Web/CSS/url": { "modified": "2020-01-10T13:46:46.404Z", "contributors": [ "roocce" @@ -13172,7 +13172,7 @@ "qwerty726" ] }, - "Web/CSS/var()": { + "Web/CSS/var": { "modified": "2020-11-04T09:10:15.439Z", "contributors": [ "chrisdavidmills", diff --git a/files/es/web/css/attr()/index.html b/files/es/web/css/attr()/index.html deleted file mode 100644 index d47f8e6b88..0000000000 --- a/files/es/web/css/attr()/index.html +++ /dev/null @@ -1,182 +0,0 @@ ---- -title: attr -slug: Web/CSS/attr() -translation_of: Web/CSS/attr() ---- -

{{ CSSRef() }}

- -

Resumen

- -

La función attr() de CSS se usa para recuperar el valor de un atributo del elemento seleccionado y usarlo en la hoja de estilos. Se puede usar también en un pseudo-elemento y, en este caso, el valor del atributo en el elemento originado del pseudo-elemento es devuelto.

- -

La función attr() de CSS se puede usar con cualquier propiedad de CSS. {{ experimental_inline() }}

- -

Sintaxis

- -
Sintaxis formal: attr( attribute-name <type-or-unit>? [, <fallback> ]? )
-
- -

Valores

- -
-
attribute-name
-
Es el nombre de un atributo en el elemento HTML al que se hace referencia en el CSS. Soporte para otros atributos a parte de {{ cssxref("content") }} es {{ experimental_inline() }}.
-
<type-or-unit>
-
Es una palabra clave que representa o el tipo del valor del atributo, o su unidad, pues en HTML algunos atributos tienen unidades implícitas. Si el uso de <type-or-unit> como valor del atributo especificado no es válido, la expresión attr() también será no válida. Si se omite, el valor por defecto es string. La lista de valores válidos son: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeywordAssociated typeCommentDefault value
string{{cssxref("<string>")}}El valor del atributo es tratado como una {{cssxref("<string>")}} de CSS. No se reparsea, y en este caso particular los caracteres son usados tal y como son en vez de convertirlos en diferentes caracteres de CSS.Cadena vacía
color {{ experimental_inline() }}{{cssxref("<color>")}}El valor del atributo es tratado como hash (3- or 6-value hash) o a una palabra clave. Debe ser un valor válido de una {{cssxref("<string>")}} de CSS.
- Los espacios iniciales y finales son eliminados.		currentColor
url {{ experimental_inline() }}{{ cssxref("<uri>") }}El valor del atributo es tratado como una cadena que se usa en una función url() de CSS.
- URLs relativas se resuelven con respecto al documento original, no respecto a la hoja de estilos. Los espacios iniciales y finales son eliminados.		La url about:invalid que apunta a un documento inexistente con una condición de error genérico.
integer {{ experimental_inline() }}{{cssxref("<integer>")}}El valor del atributo es tratado como un {{cssxref("<integer>")}} CSS. Si no es válido, si no es un entero o está fuera del rango aceptado por la propiedad CSS, se usa el valor por defecto.
- Los espacios iniciales y finales son eliminados.		0, or, if 0 is not a valid value for the property, the property's minimum value.
number {{ experimental_inline() }}{{cssxref("<number>")}}El valor del atributo es tratado como {{cssxref("<number>")}}. Si no es válido, si no es un número o está fuera del rango aceptado por la propiedad CSS, se usa el valor por defecto.
- Los espacios iniciales y finales son eliminados.		0, or, if 0 is not a valid value for the property, the property's minimum value.
length {{ experimental_inline() }}{{cssxref("<length>")}}The attribute value is parsed as a CSS {{cssxref("<length>")}} dimension, that is including the unit (e.g. 12.5em). If it is not valid, that is not a length or out of the range accepted by the CSS property, the default value is used.
- If the given unit is a relative length, attr()computes it to an absolute length.
- Leading and trailing spaces are stripped.		0, or, if 0 is not a valid value for the property, the property's minimum value.
em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, or pc {{ experimental_inline() }}{{cssxref("<length>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as a {{cssxref("<length>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
- If the given unit is a relative length, attr()computes it to an absolute length.
- Leading and trailing spaces are stripped.		0, or, if 0 is not a valid value for the property, the property's minimum value.
angle {{ experimental_inline() }}{{ cssxref("<angle>") }}The attribute value is parsed as a CSS {{ cssxref("<angle>") }} dimension, that is including the unit (e.g. 30.5deg). If it is not valid, that is not an angle or out of the range accepted by the CSS property, the default value is used.
- Leading and trailing spaces are stripped.		0deg, or, if 0deg is not a valid value for the property, the property's minimum value.
deg, grad, rad {{ experimental_inline() }}{{ cssxref("<angle>") }}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as an {{ cssxref("<angle>") }} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
- Leading and trailing spaces are stripped.		0deg, or, if 0deg is not a valid value for the property, the property's minimum value.
time {{ experimental_inline() }}{{cssxref("<time>")}}The attribute value is parsed as a CSS {{cssxref("<time>")}} dimension, that is including the unit (e.g. 30.5ms). If it is not valid, that is not a time or out of the range accepted by the CSS property, the default value is used.
- Leading and trailing spaces are stripped.		0s, or, if 0s is not a valid value for the property, the property's minimum value.
s, ms {{ experimental_inline() }}{{cssxref("<time>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as an{{cssxref("<time>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
- Leading and trailing spaces are stripped.		0s, or, if 0s is not a valid value for the property, the property's minimum value.
frequency {{ experimental_inline() }}{{cssxref("<frequency>")}}The attribute value is parsed as a CSS {{cssxref("<frequency>")}} dimension, that is including the unit (e.g. 30.5kHz). If it is not valid, that is not a frequency or out of the range accepted by the CSS property, the default value is used.0Hz, or, if 0Hz is not a valid value for the property, the property's minimum value.
Hz, kHz {{ experimental_inline() }}{{cssxref("<frequency>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as a {{cssxref("<frequency>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
- Leading and trailing spaces are stripped.		0Hz, or, if 0Hz is not a valid value for the property, the property's minimum value.
% {{ experimental_inline() }}{{cssxref("<percentage>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as a {{cssxref("<percentage>")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
- If the given value is used as a length, attr()computes it to an absolute length.
- Leading and trailing spaces are stripped.		0%, or, if 0% is not a valid value for the property, the property's minimum value.
-
-
<fallback>
-
The value to be used if the associated attribute is missing or contains an invalid value. The fallback value must be valid where attr() is used, even if it is not used, and must not contain another attr() expression. If attr() is not the sole component value of a property, its <fallback> value must be of the type defined by <type-or-unit>. If not set, CSS will use the default value defined for each <type-or-unit>.
-
- -

Examples

- -
p::before {
-  content:attr(data-foo) " ";
-}
-
- -
<p data-foo="hello">world</p>
-
- -

Result

- -

{{ EmbedLiveSample("Examples", '100%', '80') }}

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS3 Values', '#attr', 'attr()') }}{{ Spec2('CSS3 Values') }}Added two optional parameters; can be used on all properties; may return other values than {{cssxref("<string>")}}. These changes are {{ experimental_inline() }} and may be dropped during the CR phase if browser support is too small.
{{ SpecName('CSS2.1', 'generate.html#x18', 'attr()') }}{{ Spec2('CSS2.1') }}Limited to the {{ cssxref("content") }} property; always return a {{cssxref("<string>")}}
- -

Browser compatibility

- -{{Compat("css.types.attr")}} diff --git a/files/es/web/css/attr/index.html b/files/es/web/css/attr/index.html new file mode 100644 index 0000000000..5efb73b796 --- /dev/null +++ b/files/es/web/css/attr/index.html @@ -0,0 +1,183 @@ +--- +title: attr +slug: Web/CSS/attr +translation_of: Web/CSS/attr() +original_slug: Web/CSS/attr() +--- +

{{ CSSRef() }}

+ +

Resumen

+ +

La función attr() de CSS se usa para recuperar el valor de un atributo del elemento seleccionado y usarlo en la hoja de estilos. Se puede usar también en un pseudo-elemento y, en este caso, el valor del atributo en el elemento originado del pseudo-elemento es devuelto.

+ +

La función attr() de CSS se puede usar con cualquier propiedad de CSS. {{ experimental_inline() }}

+ +

Sintaxis

+ +
Sintaxis formal: attr( attribute-name <type-or-unit>? [, <fallback> ]? )
+
+ +

Valores

+ +
+
attribute-name
+
Es el nombre de un atributo en el elemento HTML al que se hace referencia en el CSS. Soporte para otros atributos a parte de {{ cssxref("content") }} es {{ experimental_inline() }}.
+
<type-or-unit>
+
Es una palabra clave que representa o el tipo del valor del atributo, o su unidad, pues en HTML algunos atributos tienen unidades implícitas. Si el uso de <type-or-unit> como valor del atributo especificado no es válido, la expresión attr() también será no válida. Si se omite, el valor por defecto es string. La lista de valores válidos son: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeywordAssociated typeCommentDefault value
string{{cssxref("<string>")}}El valor del atributo es tratado como una {{cssxref("<string>")}} de CSS. No se reparsea, y en este caso particular los caracteres son usados tal y como son en vez de convertirlos en diferentes caracteres de CSS.Cadena vacía
color {{ experimental_inline() }}{{cssxref("<color>")}}El valor del atributo es tratado como hash (3- or 6-value hash) o a una palabra clave. Debe ser un valor válido de una {{cssxref("<string>")}} de CSS.
+ Los espacios iniciales y finales son eliminados.		currentColor
url {{ experimental_inline() }}{{ cssxref("<uri>") }}El valor del atributo es tratado como una cadena que se usa en una función url() de CSS.
+ URLs relativas se resuelven con respecto al documento original, no respecto a la hoja de estilos. Los espacios iniciales y finales son eliminados.		La url about:invalid que apunta a un documento inexistente con una condición de error genérico.
integer {{ experimental_inline() }}{{cssxref("<integer>")}}El valor del atributo es tratado como un {{cssxref("<integer>")}} CSS. Si no es válido, si no es un entero o está fuera del rango aceptado por la propiedad CSS, se usa el valor por defecto.
+ Los espacios iniciales y finales son eliminados.		0, or, if 0 is not a valid value for the property, the property's minimum value.
number {{ experimental_inline() }}{{cssxref("<number>")}}El valor del atributo es tratado como {{cssxref("<number>")}}. Si no es válido, si no es un número o está fuera del rango aceptado por la propiedad CSS, se usa el valor por defecto.
+ Los espacios iniciales y finales son eliminados.		0, or, if 0 is not a valid value for the property, the property's minimum value.
length {{ experimental_inline() }}{{cssxref("<length>")}}The attribute value is parsed as a CSS {{cssxref("<length>")}} dimension, that is including the unit (e.g. 12.5em). If it is not valid, that is not a length or out of the range accepted by the CSS property, the default value is used.
+ If the given unit is a relative length, attr()computes it to an absolute length.
+ Leading and trailing spaces are stripped.		0, or, if 0 is not a valid value for the property, the property's minimum value.
em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, or pc {{ experimental_inline() }}{{cssxref("<length>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as a {{cssxref("<length>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
+ If the given unit is a relative length, attr()computes it to an absolute length.
+ Leading and trailing spaces are stripped.		0, or, if 0 is not a valid value for the property, the property's minimum value.
angle {{ experimental_inline() }}{{ cssxref("<angle>") }}The attribute value is parsed as a CSS {{ cssxref("<angle>") }} dimension, that is including the unit (e.g. 30.5deg). If it is not valid, that is not an angle or out of the range accepted by the CSS property, the default value is used.
+ Leading and trailing spaces are stripped.		0deg, or, if 0deg is not a valid value for the property, the property's minimum value.
deg, grad, rad {{ experimental_inline() }}{{ cssxref("<angle>") }}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as an {{ cssxref("<angle>") }} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
+ Leading and trailing spaces are stripped.		0deg, or, if 0deg is not a valid value for the property, the property's minimum value.
time {{ experimental_inline() }}{{cssxref("<time>")}}The attribute value is parsed as a CSS {{cssxref("<time>")}} dimension, that is including the unit (e.g. 30.5ms). If it is not valid, that is not a time or out of the range accepted by the CSS property, the default value is used.
+ Leading and trailing spaces are stripped.		0s, or, if 0s is not a valid value for the property, the property's minimum value.
s, ms {{ experimental_inline() }}{{cssxref("<time>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as an{{cssxref("<time>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
+ Leading and trailing spaces are stripped.		0s, or, if 0s is not a valid value for the property, the property's minimum value.
frequency {{ experimental_inline() }}{{cssxref("<frequency>")}}The attribute value is parsed as a CSS {{cssxref("<frequency>")}} dimension, that is including the unit (e.g. 30.5kHz). If it is not valid, that is not a frequency or out of the range accepted by the CSS property, the default value is used.0Hz, or, if 0Hz is not a valid value for the property, the property's minimum value.
Hz, kHz {{ experimental_inline() }}{{cssxref("<frequency>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as a {{cssxref("<frequency>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
+ Leading and trailing spaces are stripped.		0Hz, or, if 0Hz is not a valid value for the property, the property's minimum value.
% {{ experimental_inline() }}{{cssxref("<percentage>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as a {{cssxref("<percentage>")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
+ If the given value is used as a length, attr()computes it to an absolute length.
+ Leading and trailing spaces are stripped.		0%, or, if 0% is not a valid value for the property, the property's minimum value.
+
+
<fallback>
+
The value to be used if the associated attribute is missing or contains an invalid value. The fallback value must be valid where attr() is used, even if it is not used, and must not contain another attr() expression. If attr() is not the sole component value of a property, its <fallback> value must be of the type defined by <type-or-unit>. If not set, CSS will use the default value defined for each <type-or-unit>.
+
+ +

Examples

+ +
p::before {
+  content:attr(data-foo) " ";
+}
+
+ +
<p data-foo="hello">world</p>
+
+ +

Result

+ +

{{ EmbedLiveSample("Examples", '100%', '80') }}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Values', '#attr', 'attr()') }}{{ Spec2('CSS3 Values') }}Added two optional parameters; can be used on all properties; may return other values than {{cssxref("<string>")}}. These changes are {{ experimental_inline() }} and may be dropped during the CR phase if browser support is too small.
{{ SpecName('CSS2.1', 'generate.html#x18', 'attr()') }}{{ Spec2('CSS2.1') }}Limited to the {{ cssxref("content") }} property; always return a {{cssxref("<string>")}}
+ +

Browser compatibility

+ +{{Compat("css.types.attr")}} diff --git a/files/es/web/css/calc()/index.html b/files/es/web/css/calc()/index.html deleted file mode 100644 index c1f2f6c1d4..0000000000 --- a/files/es/web/css/calc()/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: calc -slug: Web/CSS/calc() -translation_of: Web/CSS/calc() ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

Sumario

- -

La función CSS calc() puede ser usada en cualquier sitio donde {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<number>")}}, o {{cssxref("<integer>")}} sea requerido. Con calc() puedes realizar cálculos para determinar valores de propiedades CSS.

- -

Es posible anidar llamadas a calc() dentro de otras llamadas calc().

- -

Sintaxis

- -
calc(expresión)
- -

Values

- -
-
expresión
-
Una expresión matemática cuyo resultado es usado como valor para la propiedad sobre la cual se aplica.
-
- -

Expresiones

- -

{{todo("mod,min,max : http://hacks.mozilla.org/2010/06/css3-calc/")}}La expresión puede ser una combinación de los siguientes operadores:

- -
-
+
-
Suma
-
-
-
Resta
-
*
-
Multiplicación. Al menos uno de los argumentos debe ser un {{cssxref("<number>")}}.
-
/
-
División. El divisor debe ser un {{cssxref("<number>")}}.
-
- -

Los operandos en la expresión pueden ser valores tanto positivos como negativos. Puedes usar diferentes unidades para cada valor si lo deseas. Es recomendable el uso de paréntesis para añadir legibilidad a la expresión o para forzar precedencia en las operaciones en caso necesario.

- -
Nota: La división por cero dará lugar a un error generado por el analizador de HTML del navegador.
- -
Nota: las operaciones + y - siempre deben estar separadas de sus operandos mediante espacios en blanco. La expresión calc(50% -8px) será tomada como un operando de porcentaje seguido de otro operando de signo negativo (una expresión inválida, dado que no hay operador en medio), mientras que la expresión calc(50% - 8px) es un porcentaje seguido de una operación de resta.
-Los operadores * y / no requieren espacio en blanco, pero es recomendable añadirlo por consistencia.
- -
-
- -

Ejemplos

- -

Añadir un margen a un objeto en pantalla

- -

calc() hace más fácil añadir márgenes a un objeto en determinadas circunstancias. En este ejemplo, CSS crea un espacio horizontal de color amarillo que llena el ancho de la ventana con un hueco de 40 pixels en ambos lados:

- -
.banner {
-  position: absolute;
-  left: 40px;
-  width: 90%;               /* salvaguarda para navegadores que no reconocen calc() */
-  width: calc(100% - 80px);
-  border: solid black 1px;
-  box-shadow: 1px 2px;
-  background-color: yellow;
-  padding: 6px;
-  text-align: center;
-}
-
- -
<div class="banner">This is a banner!</div>
- -

{{ EmbedLiveSample('Positioning_an_object_on_screen_with_a_margin', '100%', '60') }}

- -

Entradas de formulario que se ajustan automáticamente al ancho de su contenedor

- -

Otro caso de uso para calc() es asegurar que los campos de un formulario llenan el espacio disponible sin pasarse de los límites de su contenedor mientras mantienen el margen apropiado.

- -

Echémosle un vistazo al CSS:

- -
input {
-  padding: 2px;
-  display: block;
-  width: 98%;               /* salvaguarda para navegadores que no reconocen calc() */
-  width: calc(100% - 1em);
-}
-
-#formbox {
-  width: 130px;             /* salvaguarda para navegadores que no reconocen calc() */
-  width: calc(100% / 6);
-  border: 1px solid black;
-  padding: 4px;
-}
-
- -

El formulario usa 1/6 del ancho disponible. Para asegurar que los campos de entrada tienen el tamaño adecuado, usamos  calc() de nuevo para establecer el ancho que deberían tener (el de su contenedor) menos 1em. Para probar esto, usaremos el siguiente HTML:

- -
<form>
-  <div id="formbox">
-  <label>Type something:</label>
-  <input type="text">
-  </div>
-</form>
-
- -

{{ EmbedLiveSample('Automatically_sizing_form_fields_to_fit_their_container', '100%', '80') }}

- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}{{Spec2('CSS3 Values')}} 
- -

Compatibilidad en navegadores

- -{{Compat("css.types.calc")}} - -

Ver también

- - diff --git a/files/es/web/css/calc/index.html b/files/es/web/css/calc/index.html new file mode 100644 index 0000000000..93edfa0f39 --- /dev/null +++ b/files/es/web/css/calc/index.html @@ -0,0 +1,134 @@ +--- +title: calc +slug: Web/CSS/calc +translation_of: Web/CSS/calc() +original_slug: Web/CSS/calc() +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Sumario

+ +

La función CSS calc() puede ser usada en cualquier sitio donde {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<number>")}}, o {{cssxref("<integer>")}} sea requerido. Con calc() puedes realizar cálculos para determinar valores de propiedades CSS.

+ +

Es posible anidar llamadas a calc() dentro de otras llamadas calc().

+ +

Sintaxis

+ +
calc(expresión)
+ +

Values

+ +
+
expresión
+
Una expresión matemática cuyo resultado es usado como valor para la propiedad sobre la cual se aplica.
+
+ +

Expresiones

+ +

{{todo("mod,min,max : http://hacks.mozilla.org/2010/06/css3-calc/")}}La expresión puede ser una combinación de los siguientes operadores:

+ +
+
+
+
Suma
+
-
+
Resta
+
*
+
Multiplicación. Al menos uno de los argumentos debe ser un {{cssxref("<number>")}}.
+
/
+
División. El divisor debe ser un {{cssxref("<number>")}}.
+
+ +

Los operandos en la expresión pueden ser valores tanto positivos como negativos. Puedes usar diferentes unidades para cada valor si lo deseas. Es recomendable el uso de paréntesis para añadir legibilidad a la expresión o para forzar precedencia en las operaciones en caso necesario.

+ +
Nota: La división por cero dará lugar a un error generado por el analizador de HTML del navegador.
+ +
Nota: las operaciones + y - siempre deben estar separadas de sus operandos mediante espacios en blanco. La expresión calc(50% -8px) será tomada como un operando de porcentaje seguido de otro operando de signo negativo (una expresión inválida, dado que no hay operador en medio), mientras que la expresión calc(50% - 8px) es un porcentaje seguido de una operación de resta.
+Los operadores * y / no requieren espacio en blanco, pero es recomendable añadirlo por consistencia.
+ +
+
+ +

Ejemplos

+ +

Añadir un margen a un objeto en pantalla

+ +

calc() hace más fácil añadir márgenes a un objeto en determinadas circunstancias. En este ejemplo, CSS crea un espacio horizontal de color amarillo que llena el ancho de la ventana con un hueco de 40 pixels en ambos lados:

+ +
.banner {
+  position: absolute;
+  left: 40px;
+  width: 90%;               /* salvaguarda para navegadores que no reconocen calc() */
+  width: calc(100% - 80px);
+  border: solid black 1px;
+  box-shadow: 1px 2px;
+  background-color: yellow;
+  padding: 6px;
+  text-align: center;
+}
+
+ +
<div class="banner">This is a banner!</div>
+ +

{{ EmbedLiveSample('Positioning_an_object_on_screen_with_a_margin', '100%', '60') }}

+ +

Entradas de formulario que se ajustan automáticamente al ancho de su contenedor

+ +

Otro caso de uso para calc() es asegurar que los campos de un formulario llenan el espacio disponible sin pasarse de los límites de su contenedor mientras mantienen el margen apropiado.

+ +

Echémosle un vistazo al CSS:

+ +
input {
+  padding: 2px;
+  display: block;
+  width: 98%;               /* salvaguarda para navegadores que no reconocen calc() */
+  width: calc(100% - 1em);
+}
+
+#formbox {
+  width: 130px;             /* salvaguarda para navegadores que no reconocen calc() */
+  width: calc(100% / 6);
+  border: 1px solid black;
+  padding: 4px;
+}
+
+ +

El formulario usa 1/6 del ancho disponible. Para asegurar que los campos de entrada tienen el tamaño adecuado, usamos  calc() de nuevo para establecer el ancho que deberían tener (el de su contenedor) menos 1em. Para probar esto, usaremos el siguiente HTML:

+ +
<form>
+  <div id="formbox">
+  <label>Type something:</label>
+  <input type="text">
+  </div>
+</form>
+
+ +

{{ EmbedLiveSample('Automatically_sizing_form_fields_to_fit_their_container', '100%', '80') }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}{{Spec2('CSS3 Values')}} 
+ +

Compatibilidad en navegadores

+ +{{Compat("css.types.calc")}} + +

Ver también

+ + diff --git a/files/es/web/css/env()/index.html b/files/es/web/css/env()/index.html deleted file mode 100644 index 674fa460b3..0000000000 --- a/files/es/web/css/env()/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: env() -slug: Web/CSS/env() -tags: - - CSS - - Experimental - - Función CSS - - Variables CSS - - env - - env() -translation_of: Web/CSS/env() ---- -

La función CSS env() puede ser utilizada para insertar el valor de una variable de entorno, que sea global para un documento en particular, al contrario de una propiedad personalizada. Entonces, la funcion env() puede ser utilizada para remplazar el valor en ubicaciones arbitrarias, de la misma manera que la función var().

- -

La función env() puede ser utilizada en el lugar de cualquier parte de un valor en cualquier propiedad de cualquier elemento, o de cualquier parte de un valor en cualquier descriptor de cualquier regla @, y en varios otros lugares donde los valores CSS están permitidos.

- -

Las Variables de Entorno CSS están actualmente en curso de definición en un borrador de Recomendación: CSS Environment Variables Module Level 1.

- -

Compatibilidad con navegadores

- -
- - -

{{Compat("css.properties.custom-property.env")}}

-
- -

 

diff --git a/files/es/web/css/env/index.html b/files/es/web/css/env/index.html new file mode 100644 index 0000000000..a5a4b5518e --- /dev/null +++ b/files/es/web/css/env/index.html @@ -0,0 +1,28 @@ +--- +title: env() +slug: Web/CSS/env +tags: + - CSS + - Experimental + - Función CSS + - Variables CSS + - env + - env() +translation_of: Web/CSS/env() +original_slug: Web/CSS/env() +--- +

La función CSS env() puede ser utilizada para insertar el valor de una variable de entorno, que sea global para un documento en particular, al contrario de una propiedad personalizada. Entonces, la funcion env() puede ser utilizada para remplazar el valor en ubicaciones arbitrarias, de la misma manera que la función var().

+ +

La función env() puede ser utilizada en el lugar de cualquier parte de un valor en cualquier propiedad de cualquier elemento, o de cualquier parte de un valor en cualquier descriptor de cualquier regla @, y en varios otros lugares donde los valores CSS están permitidos.

+ +

Las Variables de Entorno CSS están actualmente en curso de definición en un borrador de Recomendación: CSS Environment Variables Module Level 1.

+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.properties.custom-property.env")}}

+
+ +

 

diff --git a/files/es/web/css/filter-function/blur()/index.html b/files/es/web/css/filter-function/blur()/index.html deleted file mode 100644 index a60e4408eb..0000000000 --- a/files/es/web/css/filter-function/blur()/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: blur() -slug: Web/CSS/filter-function/blur() -tags: - - CSS - - Efectos de Filtro - - Función CSS - - Referencia -translation_of: Web/CSS/filter-function/blur() ---- -
{{cssref}}
- -

La función CSS blur() aplica un desenfoque Gaussiano a la imagen de entrada. El resultado es un {{cssxref("<filter-function>")}}.

- -
{{EmbedInteractiveExample("pages/css/function-blur.html")}}
- - - -

Sintaxis

- -
blur(radio)
- -

Parámetros

- -
-
radio
-
El radio del desenfoque, especificado como {{cssxref("<length>")}}. Define el valor de la desviación estándar a la función gaussiana, es decir, cuántos píxeles en la pantalla se combinan entre sí; por lo tanto, un valor mayor creará más desenfoque. Un valor de 0 deja la entrada sin cambios. El valor de laguna para la interpolación es 0.
-
- -

Ejemplos

- -
blur(0)        /* Sin efecto */
-blur(8px)      /* Desenfoque con 8px de radio */
-blur(1.17rem)  /* Desenfoque con 1.17rem de radio */
- -

Ver también

- -
    -
  • {{cssxref("<filter-function>")}}
    • -
diff --git a/files/es/web/css/filter-function/blur/index.html b/files/es/web/css/filter-function/blur/index.html new file mode 100644 index 0000000000..c1d0a80431 --- /dev/null +++ b/files/es/web/css/filter-function/blur/index.html @@ -0,0 +1,41 @@ +--- +title: blur() +slug: Web/CSS/filter-function/blur +tags: + - CSS + - Efectos de Filtro + - Función CSS + - Referencia +translation_of: Web/CSS/filter-function/blur() +original_slug: Web/CSS/filter-function/blur() +--- +
{{cssref}}
+ +

La función CSS blur() aplica un desenfoque Gaussiano a la imagen de entrada. El resultado es un {{cssxref("<filter-function>")}}.

+ +
{{EmbedInteractiveExample("pages/css/function-blur.html")}}
+ + + +

Sintaxis

+ +
blur(radio)
+ +

Parámetros

+ +
+
radio
+
El radio del desenfoque, especificado como {{cssxref("<length>")}}. Define el valor de la desviación estándar a la función gaussiana, es decir, cuántos píxeles en la pantalla se combinan entre sí; por lo tanto, un valor mayor creará más desenfoque. Un valor de 0 deja la entrada sin cambios. El valor de laguna para la interpolación es 0.
+
+ +

Ejemplos

+ +
blur(0)        /* Sin efecto */
+blur(8px)      /* Desenfoque con 8px de radio */
+blur(1.17rem)  /* Desenfoque con 1.17rem de radio */
+ +

Ver también

+ +
    +
  • {{cssxref("<filter-function>")}}
    • +
diff --git a/files/es/web/css/filter-function/brightness()/index.html b/files/es/web/css/filter-function/brightness()/index.html deleted file mode 100644 index 8d51f5d70c..0000000000 --- a/files/es/web/css/filter-function/brightness()/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: brightness() -slug: Web/CSS/filter-function/brightness() -translation_of: Web/CSS/filter-function/brightness() ---- -
{{cssref}}
- -

La función brightness() CSS aplica un multiplicador linear a la imagen, haciendo que su apariencia sea más brallante u oscura. Su resultado es un {{cssxref("<filter-function>")}}.

- -
{{EmbedInteractiveExample("pages/css/function-brightness.html")}}
- - - -

Sintaxis

- -
brightness(valor)
- -

Parametros

- -
-
valor
-
El brillo resultante, es definido como un {{cssxref("<number>")}} o un {{cssxref("<percentage>")}}. Un valor debajo del 100% oscurecerá la imagen, como así un valor superior al 100% le dará más brillo. Un valor de 0% dará como resultado una imagen completamente negra, siendo el valor de 100% una imagen sin cambios. El valor de la Interpolación es 1.
-
- -

Ejemplos

- -
brightness(0%)   /* Completamente negro */
-brightness(0.4)  /* 40% de brillo */
-brightness(1)    /* Sin Efecto */
-brightness(200%) /* Doble de Brillo */
- -

Ver también

- -
    -
  • {{cssxref("<filter-function>")}}
    • -
  • {{cssxref("filter-function/blur", "blur()")}}
    • -
  • {{cssxref("filter-function/contrast", "contrast()")}}
    • -
  • {{cssxref("filter-function/drop-shadow", "drop-shadow()")}}
    • -
  • {{cssxref("filter-function/grayscale", "grayscale()")}}
    • -
  • {{cssxref("filter-function/hue-rotate", "hue-rotate()")}}
    • -
  • {{cssxref("filter-function/invert", "invert()")}}
    • -
  • {{cssxref("filter-function/opacity", "opacity()")}}
    • -
  • {{cssxref("filter-function/saturate", "saturate()")}}
    • -
  • {{cssxref("filter-function/sepia", "sepia()")}}
    • -
diff --git a/files/es/web/css/filter-function/brightness/index.html b/files/es/web/css/filter-function/brightness/index.html new file mode 100644 index 0000000000..33aa10f07d --- /dev/null +++ b/files/es/web/css/filter-function/brightness/index.html @@ -0,0 +1,46 @@ +--- +title: brightness() +slug: Web/CSS/filter-function/brightness +translation_of: Web/CSS/filter-function/brightness() +original_slug: Web/CSS/filter-function/brightness() +--- +
{{cssref}}
+ +

La función brightness() CSS aplica un multiplicador linear a la imagen, haciendo que su apariencia sea más brallante u oscura. Su resultado es un {{cssxref("<filter-function>")}}.

+ +
{{EmbedInteractiveExample("pages/css/function-brightness.html")}}
+ + + +

Sintaxis

+ +
brightness(valor)
+ +

Parametros

+ +
+
valor
+
El brillo resultante, es definido como un {{cssxref("<number>")}} o un {{cssxref("<percentage>")}}. Un valor debajo del 100% oscurecerá la imagen, como así un valor superior al 100% le dará más brillo. Un valor de 0% dará como resultado una imagen completamente negra, siendo el valor de 100% una imagen sin cambios. El valor de la Interpolación es 1.
+
+ +

Ejemplos

+ +
brightness(0%)   /* Completamente negro */
+brightness(0.4)  /* 40% de brillo */
+brightness(1)    /* Sin Efecto */
+brightness(200%) /* Doble de Brillo */
+ +

Ver también

+ +
    +
  • {{cssxref("<filter-function>")}}
    • +
  • {{cssxref("filter-function/blur", "blur()")}}
    • +
  • {{cssxref("filter-function/contrast", "contrast()")}}
    • +
  • {{cssxref("filter-function/drop-shadow", "drop-shadow()")}}
    • +
  • {{cssxref("filter-function/grayscale", "grayscale()")}}
    • +
  • {{cssxref("filter-function/hue-rotate", "hue-rotate()")}}
    • +
  • {{cssxref("filter-function/invert", "invert()")}}
    • +
  • {{cssxref("filter-function/opacity", "opacity()")}}
    • +
  • {{cssxref("filter-function/saturate", "saturate()")}}
    • +
  • {{cssxref("filter-function/sepia", "sepia()")}}
    • +
diff --git a/files/es/web/css/min()/index.html b/files/es/web/css/min()/index.html deleted file mode 100644 index b81e63bb6f..0000000000 --- a/files/es/web/css/min()/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: min() -slug: Web/CSS/min() -tags: - - CSS - - CSS Function - - CSS Grid - - Calculate - - Compute - - Function - - Layout - - Reference - - min -translation_of: Web/CSS/min() ---- -
{{CSSRef}}
- -

La función CSS min() permite establecer el valor mas pequeño (mas negativo) de una lista de expresiones separadas por coma como el valor de una propiedad CSS. La función min() puede ser usada donde quiera que  {{CSSxRef("<length>")}}, {{CSSxRef("<frequency>")}}, {{CSSxRef("<angle>")}}, {{CSSxRef("<time>")}}, {{CSSxRef("<percentage>")}}, {{CSSxRef("<number>")}}, o {{CSSxRef("<integer>")}} esté permitido.

- -
{{EmbedInteractiveExample("pages/css/function-min.html")}}
- - - -

En el primer ejemplo anterior, el ancho será al menos 200px, pero será menor si el viewport es menor de 400px de ancho (en tal caso 1vw sería 4px, así 50vw sería 200px). En otras palabras, el ancho máximo es 200px. Piensa en el valor de  min() como el máximo valor que una propiedad puede tener.

- -

Sintaxis

- -

La funcion min() toma uno o mas expresiones separadas por coma como sus parametros, y usa el valor mas pequeño de esas expresiones como su valor.

- -

Las expresiones pueden ser expresiones matemáticas (usando operadores aritmeticos), valores literales, u otras expresiones, tales como {{CSSxRef("attr", "attr()")}}, que se evaluan a un tipo de argumento válido (like {{CSSxRef("<length>")}}).

- -

Se pueden usar distintas unidades de medida para cada valor en la expresion, si se desea. Tambien puede usar parentesis para establecer orden de percedencia si lo requiere.

- -
    -
  • Expresiones matematicas que involucran porcentajes para los anchos y altos en columnas de tabla, grupos de columnas de tabla, filas de tablas, y celdas de tablas en ambos layout fijo y tablas pueden ser tratados como si se hubiera especificado auto
    • -
  • Es permitido anidar  max() y otros funciones min() como valores de expresiones. Las expresiones son completamente matematicas asi que puede usarse adicion directa, resta, multiplicacion y division sin usar la funcion calc() en si.
    • -
  • La expresion pueden ser valores combinando los operadores de adicion ( + ), resta ( - ), multiplicacion ( * ) y division ( / ) , aplicando las reglas estandares de precedencia de operadores. Asegurese de poner un espacio en cada lado de los operandos de + y -. Los oprandos en la expresion pueden ser cualquier valor de sintaxis <length>.
    • -
  • Usted puede (y con frecuencia necesitara) combinar los valores  min() y max(), o usar min() dentro de las funciones  clamp() o calc().
    • -
  • Usted puede proveer mas de 2 argumentos, si tiene multiples restricciones para aplicar.
    • -
- -

Sintaxis formal

- -{{CSSSyntax}} - -

Probemas de accesibilidad

- -

Cuando use min() para establecer el maximo valor de fonr size, asegurese de que la fuente todavia podra ser escalada por lo menos al 200% para mas legibilidad (sin tecnologia asistente como la funcion de zoom).

- - - -

Ejemplos

- -

Setting a maximum size for a label and input

- -

Otro caso de uso para las funciones CSS es establecer la maxima longitud en controles enformularios responsive: habilitando el ancho de los labels y los inputs para encogerse como lo hace el ancho del formulario

- -

Veamos algo de 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;
-}
-
- -

Aquí, el formulario en si mismo, junto con el margen, borde y padding, será de 100% del ancho de su padre. Declaramos el input y el label para que sean menores ente el 40% del ancho del formulario hasta el padding o de 400px, el que sea menor. En otras palabras, lo mas ancho que el label y el input pueden ser es de 400px. Lo mas estrecho que serán es 40% del ancho del formulario, el cual en pantallas de relojes inteligentes es muy pequeño.

- -
<form>
-  <label>Escribe algo:</label>
-  <input type="text">
-</form>
-
- -

{{EmbedLiveSample("Setting_a_maximum_size_for_a_label_and_input", "100%", "110")}}

- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("CSS4 Values", "#calc-notation", "min()")}}{{Spec2("CSS4 Values")}}Definición inicial.
- -

Compatibilidad con navegadores

- - - -

{{Compat("css.types.min")}}

- -

Ver también

- -
    -
  • {{CSSxRef("calc", "calc()")}}
    • -
  • {{CSSxRef("clamp", "clamp()")}}
    • -
  • {{CSSxRef("max", "max()")}}
    • -
  • CSS Values
    • -
diff --git a/files/es/web/css/min/index.html b/files/es/web/css/min/index.html new file mode 100644 index 0000000000..0791bd2590 --- /dev/null +++ b/files/es/web/css/min/index.html @@ -0,0 +1,121 @@ +--- +title: min() +slug: Web/CSS/min +tags: + - CSS + - CSS Function + - CSS Grid + - Calculate + - Compute + - Function + - Layout + - Reference + - min +translation_of: Web/CSS/min() +original_slug: Web/CSS/min() +--- +
{{CSSRef}}
+ +

La función CSS min() permite establecer el valor mas pequeño (mas negativo) de una lista de expresiones separadas por coma como el valor de una propiedad CSS. La función min() puede ser usada donde quiera que  {{CSSxRef("<length>")}}, {{CSSxRef("<frequency>")}}, {{CSSxRef("<angle>")}}, {{CSSxRef("<time>")}}, {{CSSxRef("<percentage>")}}, {{CSSxRef("<number>")}}, o {{CSSxRef("<integer>")}} esté permitido.

+ +
{{EmbedInteractiveExample("pages/css/function-min.html")}}
+ + + +

En el primer ejemplo anterior, el ancho será al menos 200px, pero será menor si el viewport es menor de 400px de ancho (en tal caso 1vw sería 4px, así 50vw sería 200px). En otras palabras, el ancho máximo es 200px. Piensa en el valor de  min() como el máximo valor que una propiedad puede tener.

+ +

Sintaxis

+ +

La funcion min() toma uno o mas expresiones separadas por coma como sus parametros, y usa el valor mas pequeño de esas expresiones como su valor.

+ +

Las expresiones pueden ser expresiones matemáticas (usando operadores aritmeticos), valores literales, u otras expresiones, tales como {{CSSxRef("attr", "attr()")}}, que se evaluan a un tipo de argumento válido (like {{CSSxRef("<length>")}}).

+ +

Se pueden usar distintas unidades de medida para cada valor en la expresion, si se desea. Tambien puede usar parentesis para establecer orden de percedencia si lo requiere.

+ +
    +
  • Expresiones matematicas que involucran porcentajes para los anchos y altos en columnas de tabla, grupos de columnas de tabla, filas de tablas, y celdas de tablas en ambos layout fijo y tablas pueden ser tratados como si se hubiera especificado auto
    • +
  • Es permitido anidar  max() y otros funciones min() como valores de expresiones. Las expresiones son completamente matematicas asi que puede usarse adicion directa, resta, multiplicacion y division sin usar la funcion calc() en si.
    • +
  • La expresion pueden ser valores combinando los operadores de adicion ( + ), resta ( - ), multiplicacion ( * ) y division ( / ) , aplicando las reglas estandares de precedencia de operadores. Asegurese de poner un espacio en cada lado de los operandos de + y -. Los oprandos en la expresion pueden ser cualquier valor de sintaxis <length>.
    • +
  • Usted puede (y con frecuencia necesitara) combinar los valores  min() y max(), o usar min() dentro de las funciones  clamp() o calc().
    • +
  • Usted puede proveer mas de 2 argumentos, si tiene multiples restricciones para aplicar.
    • +
+ +

Sintaxis formal

+ +{{CSSSyntax}} + +

Probemas de accesibilidad

+ +

Cuando use min() para establecer el maximo valor de fonr size, asegurese de que la fuente todavia podra ser escalada por lo menos al 200% para mas legibilidad (sin tecnologia asistente como la funcion de zoom).

+ + + +

Ejemplos

+ +

Setting a maximum size for a label and input

+ +

Otro caso de uso para las funciones CSS es establecer la maxima longitud en controles enformularios responsive: habilitando el ancho de los labels y los inputs para encogerse como lo hace el ancho del formulario

+ +

Veamos algo de 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;
+}
+
+ +

Aquí, el formulario en si mismo, junto con el margen, borde y padding, será de 100% del ancho de su padre. Declaramos el input y el label para que sean menores ente el 40% del ancho del formulario hasta el padding o de 400px, el que sea menor. En otras palabras, lo mas ancho que el label y el input pueden ser es de 400px. Lo mas estrecho que serán es 40% del ancho del formulario, el cual en pantallas de relojes inteligentes es muy pequeño.

+ +
<form>
+  <label>Escribe algo:</label>
+  <input type="text">
+</form>
+
+ +

{{EmbedLiveSample("Setting_a_maximum_size_for_a_label_and_input", "100%", "110")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS4 Values", "#calc-notation", "min()")}}{{Spec2("CSS4 Values")}}Definición inicial.
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("css.types.min")}}

+ +

Ver también

+ +
    +
  • {{CSSxRef("calc", "calc()")}}
    • +
  • {{CSSxRef("clamp", "clamp()")}}
    • +
  • {{CSSxRef("max", "max()")}}
    • +
  • CSS Values
    • +
diff --git a/files/es/web/css/minmax()/index.html b/files/es/web/css/minmax()/index.html deleted file mode 100644 index 4b91d4aee7..0000000000 --- a/files/es/web/css/minmax()/index.html +++ /dev/null @@ -1,214 +0,0 @@ ---- -title: minmax() -slug: Web/CSS/minmax() -tags: - - CSS - - CSS Grid - - Diseño - - Función CSS - - Referencia - - Rejilla CSS - - Web -translation_of: Web/CSS/minmax() ---- -

La función minmax() en CSS define un rango de tamaño mayor o igual que min y menor o igual que max. Se emplea con rejillas CSS.

- -
/* valores <ancho no-flexible>, <ancho de la banda> */
-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)
-
-/* valores <ancho fijo>, <ancho de la banda> */
-minmax(200px, 1fr)
-minmax(30%, 300px)
-minmax(400px, 50%)
-minmax(50%, min-content)
-minmax(300px, max-content)
-minmax(200px, auto)
-
-/* valores <ancho no-flexible>, <ancho fijo> */
-minmax(400px, 50%)
-minmax(30%, 300px)
-minmax(min-content, 200px)
-minmax(max-content, 200px)
-minmax(auto, 300px)
-
- -

Sintáxis

- -

Una función que toma dos parámetros, min y max.

- -

Cada parámetro puede ser un valor <length>, <percentage>, <flex> o uno de los valores de las palabras clave max-content, min-content o auto.

- -

Si max < min, entonces max es ignorado y se trata a minmax(min,max) como min. Como un máximo, un valor {{cssxref("flex_value","<flex>")}} establece el factor flex de una banda; no es válido como un mínimo.

- -

Valores

- -
-
{{cssxref("<length>")}}
-
Una medida no negativa.
-
{{cssxref("<percentage>")}}
-
Un porcentaje no negativo, relativo al tamaño en línea del contenedor de la rejilla en bandas de columna y el tamaño de bloque del contenedor de rejilla en bandas de fila. Si el tamaño del contenedor de la rejilla depende del tamaño de sus bandas, entonces <percentage> debe ser tratado como auto. El {{glossary("user agent")}} puede ajustar las contribuciones del tamaño implícito de la banda al tamaño del contenedor de rejilla y así incrementar el tamaño final de la banda y así incrementar el tamaño final en la cantidad mínima que resultase al respetar el porcentaje.
-
{{cssxref("<flex>")}}
-
Una dimension no-negativa con la unidad fr especificando el factor flex de la banda. Cada banda de tamaño <flex> toma una parte del espacio disponible en proporción a su factor flex.
-
max-content
-
Representa la mayor contribución max-content de los elementos de rejilla que ocupan la banda.
-
min-content
-
Representa la mayor contribución min-content de los elementos de rejilla que ocupan la banda.
-
auto
-
Como un máximo, idéntico a max-content. Como un mínimo representa el mayor tamaño mínimo (como se especifica en {{cssxref("min-width")}}/{{cssxref("min-height")}}) de los elementos de rejilla que ocupan la banda.
-
- -

Sintáxis formal

- -{{csssyntax}} - -

Propiedades CSS

- -

La función minmax() puede ser usada dentro de: 

- - - -

Ejemplo

- -

CSS

- -
#container {
-  display: grid;
-  grid-template-columns: minmax(max-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

- -
<div id="container">
-  <div>
-    Elemento tan ancho como el contenido,<br/>
-    pero de máximo 300 píxeles.
-  </div>
-  <div>
-    Elemento con un ancho flexible, pero con un mínimo de 200 píxeles.
-  </div>
-  <div>
-    Elemento inflexible de 150 píxeles de ancho.
-  </div>
-</div>
- -

Resultado

- -

{{EmbedLiveSample("Example", "100%", 200)}}

- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("CSS Grid", "#valdef-grid-template-columns-minmax", "minmax()")}}{{Spec2("CSS Grid")}}Definición inicial
- -

Compatibilidad de navegadores

- - - -

{{Compat("css.properties.grid-template-columns.minmax")}}

- -

Mira también

- - - - diff --git a/files/es/web/css/minmax/index.html b/files/es/web/css/minmax/index.html new file mode 100644 index 0000000000..58a3701655 --- /dev/null +++ b/files/es/web/css/minmax/index.html @@ -0,0 +1,215 @@ +--- +title: minmax() +slug: Web/CSS/minmax +tags: + - CSS + - CSS Grid + - Diseño + - Función CSS + - Referencia + - Rejilla CSS + - Web +translation_of: Web/CSS/minmax() +original_slug: Web/CSS/minmax() +--- +

La función minmax() en CSS define un rango de tamaño mayor o igual que min y menor o igual que max. Se emplea con rejillas CSS.

+ +
/* valores <ancho no-flexible>, <ancho de la banda> */
+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)
+
+/* valores <ancho fijo>, <ancho de la banda> */
+minmax(200px, 1fr)
+minmax(30%, 300px)
+minmax(400px, 50%)
+minmax(50%, min-content)
+minmax(300px, max-content)
+minmax(200px, auto)
+
+/* valores <ancho no-flexible>, <ancho fijo> */
+minmax(400px, 50%)
+minmax(30%, 300px)
+minmax(min-content, 200px)
+minmax(max-content, 200px)
+minmax(auto, 300px)
+
+ +

Sintáxis

+ +

Una función que toma dos parámetros, min y max.

+ +

Cada parámetro puede ser un valor <length>, <percentage>, <flex> o uno de los valores de las palabras clave max-content, min-content o auto.

+ +

Si max < min, entonces max es ignorado y se trata a minmax(min,max) como min. Como un máximo, un valor {{cssxref("flex_value","<flex>")}} establece el factor flex de una banda; no es válido como un mínimo.

+ +

Valores

+ +
+
{{cssxref("<length>")}}
+
Una medida no negativa.
+
{{cssxref("<percentage>")}}
+
Un porcentaje no negativo, relativo al tamaño en línea del contenedor de la rejilla en bandas de columna y el tamaño de bloque del contenedor de rejilla en bandas de fila. Si el tamaño del contenedor de la rejilla depende del tamaño de sus bandas, entonces <percentage> debe ser tratado como auto. El {{glossary("user agent")}} puede ajustar las contribuciones del tamaño implícito de la banda al tamaño del contenedor de rejilla y así incrementar el tamaño final de la banda y así incrementar el tamaño final en la cantidad mínima que resultase al respetar el porcentaje.
+
{{cssxref("<flex>")}}
+
Una dimension no-negativa con la unidad fr especificando el factor flex de la banda. Cada banda de tamaño <flex> toma una parte del espacio disponible en proporción a su factor flex.
+
max-content
+
Representa la mayor contribución max-content de los elementos de rejilla que ocupan la banda.
+
min-content
+
Representa la mayor contribución min-content de los elementos de rejilla que ocupan la banda.
+
auto
+
Como un máximo, idéntico a max-content. Como un mínimo representa el mayor tamaño mínimo (como se especifica en {{cssxref("min-width")}}/{{cssxref("min-height")}}) de los elementos de rejilla que ocupan la banda.
+
+ +

Sintáxis formal

+ +{{csssyntax}} + +

Propiedades CSS

+ +

La función minmax() puede ser usada dentro de: 

+ + + +

Ejemplo

+ +

CSS

+ +
#container {
+  display: grid;
+  grid-template-columns: minmax(max-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

+ +
<div id="container">
+  <div>
+    Elemento tan ancho como el contenido,<br/>
+    pero de máximo 300 píxeles.
+  </div>
+  <div>
+    Elemento con un ancho flexible, pero con un mínimo de 200 píxeles.
+  </div>
+  <div>
+    Elemento inflexible de 150 píxeles de ancho.
+  </div>
+</div>
+ +

Resultado

+ +

{{EmbedLiveSample("Example", "100%", 200)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Grid", "#valdef-grid-template-columns-minmax", "minmax()")}}{{Spec2("CSS Grid")}}Definición inicial
+ +

Compatibilidad de navegadores

+ + + +

{{Compat("css.properties.grid-template-columns.minmax")}}

+ +

Mira también

+ + + + diff --git a/files/es/web/css/repeat()/index.html b/files/es/web/css/repeat()/index.html deleted file mode 100644 index 04b53caa45..0000000000 --- a/files/es/web/css/repeat()/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: repeat() -slug: Web/CSS/repeat() -tags: - - CSS - - CSS Grid - - Función CSS - - Layout - - Maquetado - - Referencia - - Web -translation_of: Web/CSS/repeat() ---- -
{{cssref}}
- -

La función CSS repeat() representa un fragmento repetido de la lista de la pista, permitiendo un gran número de columnas o renglones que exhiben un patrón recurrente para ser escrito de una forma más compacta.

- -

Esta función puede ser usada en las propiedades CSS Grid {{cssxref("grid-template-columns")}} y {{cssxref("grid-template-rows")}}.

- -
/* <track-repeat> values */
-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])
-
-/* <auto-repeat> values */
-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])
-
-/* <fixed-repeat> values */
-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])
-
- -

Síntaxis

- -

Valores

- -
-
{{cssxref("<length>")}}
-
Una longitud no negativa.
-
{{cssxref("<percentage>")}}
-
Un porcentaje no negativo relativo con el tamaño en línea del contenedor de la cuadrícula en las pistas de la cuadrícula de columna, y el tamaño del bloque del contenedor de la cuadrícula en las pistas de la cuadrúcula de la fila. Si el tamaño de la rejilla depende del tamaño de sus pistas, entonces el <percentage> debe ser tratado como auto. El agente de usuario puede ajustar las contribuciones de tamaño intrínseco de la pista al tamaño del contenedor de la rejilla y aumentar el tamaño final de la pista en la cantidad que resultaría en respetar el porcentaje.
-
{{cssxref("<flex>")}}
-
Una dimensión no negativa con la unidad fr especificando el factor flexible de la pista. Cada pista de tamaño <flex> comparte el espacio restante en proporción a su factor flex
-
max-content
-
Representa la contribución mas grande de max-content de los elementos de la cuadrícula ocupando la pista.
-
min-content
-
Representa la contribución más pequeña min-content de los elementos de la cuadrícula ocupando la pista.
-
auto
-
Como un máximo, idéntico a max-content. Como un mínimo representa el mayor tamaño mínimo (como se específica en {{cssxref("min-width")}}/{{cssxref("min-height")}}) de los elementos de la cuadrícula ocupando la pista.
-
auto-fill
-
Si el contenedor de cuadrícula tiene un tamaño definido o máximo en el eje relevante, entonces el número de repeticiones es el mayor entero positivo posible que no hace que la cuadrícula desborde su contenedor de cuadrícula. Tratando cada pista con su función de dimensiones máximo de pista (cada valor se utiliza individualmente para definir grid-template-rows o grid-template-columns), si está definido. De lo contrario, como su función de tamaño mínimo de pista, y teniendo en cuenta la brecha de cuadrícula. Si se desbordara cualquier número de repeticiones, entonces la repetición es 1. De lo contrario, si el contenedor de la cuadrícula tiene un tamaño mínimo definido en el eje relevante, el número de repeticiones es el número entero positivo más pequeño posible que cumple ese requisito mínimo. De lo contrario, la lista de pistas especificada se repite solo una vez.
-
auto-fit
-
-

Se comporta igual que el autocompletado auto-fill, excepto que después de colocar los elementos de la cuadrícula se colapsan las pistas vacías repetidas. Una pista vacía es aquella sin elementos de cuadrícula colocados o que se extienden a través de ella. (Esto puede provocar el colapso de todas las pistas, si están todas vacías).

- -

Una pista colapsada se trata como si tuviera una única función de tamaño de pista fija de 0px, y los canales (gutters) a cada lado de ella colapsan.

- -

Con el fin de encontrar el número de pistas repetidas automáticamente, el agente de usuario distribuye el tamaño de la pista a un valor especificado por el agente de usuario (por ejemplo, 1px), para evitar la división por cero.

-
-
- -

Ejemplo

- -

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

- -
<div id="container">
-  <div>
-    Este elemento tiene un ancho de 50 pixels.
-  </div>
-  <div>
-    Elemento con un ancho flexible.
-  </div>
-  <div>
-    Este elemento tiene un ancho de 50 pixels.
-  </div>
-  <div>
-    Elemento con un ancho flexible.
-  </div>
-  <div>
-    Este elemento tiene un ancho de 100 pixels.
-  </div>
-</div>
- -

Resultados

- -

{{EmbedLiveSample("Example", "100%", 200)}}

- -

Especificaciones

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSS Grid", "#funcdef-repeat", "repeat()")}}{{Spec2("CSS Grid")}}Initial definition
- -

Compatibilidad del navegador

- - - -

{{Compat("css.properties.grid-template-columns.repeat")}}

diff --git a/files/es/web/css/repeat/index.html b/files/es/web/css/repeat/index.html new file mode 100644 index 0000000000..4c63a10c8d --- /dev/null +++ b/files/es/web/css/repeat/index.html @@ -0,0 +1,148 @@ +--- +title: repeat() +slug: Web/CSS/repeat +tags: + - CSS + - CSS Grid + - Función CSS + - Layout + - Maquetado + - Referencia + - Web +translation_of: Web/CSS/repeat() +original_slug: Web/CSS/repeat() +--- +
{{cssref}}
+ +

La función CSS repeat() representa un fragmento repetido de la lista de la pista, permitiendo un gran número de columnas o renglones que exhiben un patrón recurrente para ser escrito de una forma más compacta.

+ +

Esta función puede ser usada en las propiedades CSS Grid {{cssxref("grid-template-columns")}} y {{cssxref("grid-template-rows")}}.

+ +
/* <track-repeat> values */
+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])
+
+/* <auto-repeat> values */
+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])
+
+/* <fixed-repeat> values */
+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])
+
+ +

Síntaxis

+ +

Valores

+ +
+
{{cssxref("<length>")}}
+
Una longitud no negativa.
+
{{cssxref("<percentage>")}}
+
Un porcentaje no negativo relativo con el tamaño en línea del contenedor de la cuadrícula en las pistas de la cuadrícula de columna, y el tamaño del bloque del contenedor de la cuadrícula en las pistas de la cuadrúcula de la fila. Si el tamaño de la rejilla depende del tamaño de sus pistas, entonces el <percentage> debe ser tratado como auto. El agente de usuario puede ajustar las contribuciones de tamaño intrínseco de la pista al tamaño del contenedor de la rejilla y aumentar el tamaño final de la pista en la cantidad que resultaría en respetar el porcentaje.
+
{{cssxref("<flex>")}}
+
Una dimensión no negativa con la unidad fr especificando el factor flexible de la pista. Cada pista de tamaño <flex> comparte el espacio restante en proporción a su factor flex
+
max-content
+
Representa la contribución mas grande de max-content de los elementos de la cuadrícula ocupando la pista.
+
min-content
+
Representa la contribución más pequeña min-content de los elementos de la cuadrícula ocupando la pista.
+
auto
+
Como un máximo, idéntico a max-content. Como un mínimo representa el mayor tamaño mínimo (como se específica en {{cssxref("min-width")}}/{{cssxref("min-height")}}) de los elementos de la cuadrícula ocupando la pista.
+
auto-fill
+
Si el contenedor de cuadrícula tiene un tamaño definido o máximo en el eje relevante, entonces el número de repeticiones es el mayor entero positivo posible que no hace que la cuadrícula desborde su contenedor de cuadrícula. Tratando cada pista con su función de dimensiones máximo de pista (cada valor se utiliza individualmente para definir grid-template-rows o grid-template-columns), si está definido. De lo contrario, como su función de tamaño mínimo de pista, y teniendo en cuenta la brecha de cuadrícula. Si se desbordara cualquier número de repeticiones, entonces la repetición es 1. De lo contrario, si el contenedor de la cuadrícula tiene un tamaño mínimo definido en el eje relevante, el número de repeticiones es el número entero positivo más pequeño posible que cumple ese requisito mínimo. De lo contrario, la lista de pistas especificada se repite solo una vez.
+
auto-fit
+
+

Se comporta igual que el autocompletado auto-fill, excepto que después de colocar los elementos de la cuadrícula se colapsan las pistas vacías repetidas. Una pista vacía es aquella sin elementos de cuadrícula colocados o que se extienden a través de ella. (Esto puede provocar el colapso de todas las pistas, si están todas vacías).

+ +

Una pista colapsada se trata como si tuviera una única función de tamaño de pista fija de 0px, y los canales (gutters) a cada lado de ella colapsan.

+ +

Con el fin de encontrar el número de pistas repetidas automáticamente, el agente de usuario distribuye el tamaño de la pista a un valor especificado por el agente de usuario (por ejemplo, 1px), para evitar la división por cero.

+
+
+ +

Ejemplo

+ +

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

+ +
<div id="container">
+  <div>
+    Este elemento tiene un ancho de 50 pixels.
+  </div>
+  <div>
+    Elemento con un ancho flexible.
+  </div>
+  <div>
+    Este elemento tiene un ancho de 50 pixels.
+  </div>
+  <div>
+    Elemento con un ancho flexible.
+  </div>
+  <div>
+    Este elemento tiene un ancho de 100 pixels.
+  </div>
+</div>
+ +

Resultados

+ +

{{EmbedLiveSample("Example", "100%", 200)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Grid", "#funcdef-repeat", "repeat()")}}{{Spec2("CSS Grid")}}Initial definition
+ +

Compatibilidad del navegador

+ + + +

{{Compat("css.properties.grid-template-columns.repeat")}}

diff --git a/files/es/web/css/transform-function/rotate()/index.html b/files/es/web/css/transform-function/rotate()/index.html deleted file mode 100644 index 65c97a27fc..0000000000 --- a/files/es/web/css/transform-function/rotate()/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: rotate() -slug: Web/CSS/transform-function/rotate() -tags: - - CSS - - NeedsCompatTable - - Referencia - - Transformaciones CSS -translation_of: Web/CSS/transform-function/rotate() ---- -
{{CSSRef}}
- -

La función CSS rotate()  define una transformación que gira un elemento alrededor de un punto fijo en un plano 2D sin deformarlo.

- -

El punto fijo alrededor del cual gira el elemento, mencionado anteriormente, también se conoce como el origen de transformación. Se establece de manera predeterminada en el centro del elemento, pero se puede personalizar utilizando la propiedad {{ cssxref("transform-origin") }}.

- -

La cantidad de rotación generada por la propiedad rotate() se define mediante un {{cssxref("<angle>")}}. Si es positivo, el movimiento serán en el sentido de las agujas del reloj; si es negativo, en sentido contrario a las agujas. Una rotación de 180° se llama centro de simetría.

- -

- -

Síntaxis

- -
rotate(a)
-
- -

Valores

- -
-
a
-
es un {{ cssxref("<angle>") }}  que representa en ángulo de rotación. Un ángulo positivo representa un rotación en el sentido del reloj y un ángulo negativo representa una rotación en sentido contrario a las agujas del reloj.
-
- - - - - - - - - - - - - - - - - - - - - -
Coordenadas cartesianas en ℝ2Coordenadas homgéneas en  ℝℙ2Coordinadas cartesianas en ℝ3Coordenadas homgéneas en ℝℙ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]
- -

Ejemplos

- -

HTML

- -
<p>foo</p>
-<p class="transformed">bar</p>
- -

CSS

- -
p {
-  width: 50px;
-  height: 50px;
-  background-color: teal;
-}
-
-.transformed{
-  /* idéntico a rotateZ(45deg); */
-  transform: rotate(45deg);
-  background-color: blue;
-}
-
- -

Resultado

- -

{{EmbedLiveSample("Examples","100%","200")}}

diff --git a/files/es/web/css/transform-function/rotate/index.html b/files/es/web/css/transform-function/rotate/index.html new file mode 100644 index 0000000000..27d2ba3a43 --- /dev/null +++ b/files/es/web/css/transform-function/rotate/index.html @@ -0,0 +1,80 @@ +--- +title: rotate() +slug: Web/CSS/transform-function/rotate +tags: + - CSS + - NeedsCompatTable + - Referencia + - Transformaciones CSS +translation_of: Web/CSS/transform-function/rotate() +original_slug: Web/CSS/transform-function/rotate() +--- +
{{CSSRef}}
+ +

La función CSS rotate()  define una transformación que gira un elemento alrededor de un punto fijo en un plano 2D sin deformarlo.

+ +

El punto fijo alrededor del cual gira el elemento, mencionado anteriormente, también se conoce como el origen de transformación. Se establece de manera predeterminada en el centro del elemento, pero se puede personalizar utilizando la propiedad {{ cssxref("transform-origin") }}.

+ +

La cantidad de rotación generada por la propiedad rotate() se define mediante un {{cssxref("<angle>")}}. Si es positivo, el movimiento serán en el sentido de las agujas del reloj; si es negativo, en sentido contrario a las agujas. Una rotación de 180° se llama centro de simetría.

+ +

+ +

Síntaxis

+ +
rotate(a)
+
+ +

Valores

+ +
+
a
+
es un {{ cssxref("<angle>") }}  que representa en ángulo de rotación. Un ángulo positivo representa un rotación en el sentido del reloj y un ángulo negativo representa una rotación en sentido contrario a las agujas del reloj.
+
+ + + + + + + + + + + + + + + + + + + + + +
Coordenadas cartesianas en ℝ2Coordenadas homgéneas en  ℝℙ2Coordinadas cartesianas en ℝ3Coordenadas homgéneas en ℝℙ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]
+ +

Ejemplos

+ +

HTML

+ +
<p>foo</p>
+<p class="transformed">bar</p>
+ +

CSS

+ +
p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformed{
+  /* idéntico a rotateZ(45deg); */
+  transform: rotate(45deg);
+  background-color: blue;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample("Examples","100%","200")}}

diff --git a/files/es/web/css/transform-function/rotate3d()/index.md b/files/es/web/css/transform-function/rotate3d()/index.md deleted file mode 100644 index c1c0ee7975..0000000000 --- a/files/es/web/css/transform-function/rotate3d()/index.md +++ /dev/null @@ -1,320 +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 [función](/es/docs/Web/CSS/CSS_Functions) **`rotate3d()`** de [CSS](/es/docs/Web/CSS) define una transformación que mueve el elemento alrededor de un eje fijo sin deformarlo. Su resultado es un tipo de dato {{cssxref("<transform-function>")}}. - -{{EmbedInteractiveExample("pages/css/rotate3d.html")}} - -En el espacio tridimencional, las rotaciones tienen tres grados de libertad, juntos describen un ángulo de rotación. El ángulo de rotación está definido por un vector \[x, y, z] y pasa por el origen (como lo define la propiedad {{cssxref("transform-origin")}}. Si el vector no está _normalizado_ (ej. si la suma del cuadrado de sus tres coordenadas no es igual a 1), el {{glossary("user agent")}} lo normalizará internamente. Un vector no-normalizable, como es el caso del vector nulo, \[0, 0, 0], causará que la rotación no sea aplicada, pero sin que esto invalide la propiedad CSS en su totalidad. - -> **Nota:** Contrario a las rotaciones en el plano 2D, la composición de las rotaciones 3D normalmente no es conmutativa; lo que significa que el orden en el que dichas rotaciones son aplicadas impacta al resultado. - -## Sintaxis - -La cantidad de rotación creada por `rotate3d()` está especificada por tres {{cssxref("<number>")}}s y un {{cssxref("<angle>")}}. El `` representa las coordenadas _x_, _y_ y _z_ del vector, denotando los ejes de la rotación. El `` representa el angulo de rotación; si es positivo el movimiento será en el sentido de las agujas del reloj; si es negativo será en el sentido opuesto. - -```css -rotate3d(x, y, z, a) -``` - -## Valores - -- `x` - - : Es un {{cssxref("<number>")}} que describe la coordenada-x del vector y denota el eje de rotación. -- `y` - - : Es un {{cssxref("<number>")}} que describe la coordenada-y del vector y denota el eje de rotación. -- `z` - - : Es un {{cssxref("<number>")}} que describe la coordenada-z del vector y denota el eje de rotación. -- `a` - - : Es un {{ cssxref("<angle>") }} que representa el ángulo de rotación. Un valor positivo indica una rotación en el sentido de las agujas del reloj, un valor negativo indica una rotación en sentido contrario a las agujas del reloj. - - - - - - - - - - - - - - - - - - - -
Coordenadas cartesianas en ℝ^2 - Esta transformación aplica al espacio tridimencional y no puede ser representada en el plano. -
Coordenadas homogéneas en ℝℙ^2
Coordenadas cartesianas en ℝ^3 - - (1 - + - ( - 1 - - - cos - ( - a - ) - ) - ( - x - 2 - - 1 - ) z - · - sin - ( - a - ) - + - x - y - ( - 1 - - - cos - ( - a - ) - ) - - y - · - sin - ( - a - ) - + - x - z - · - ( - 1 - - - cos - ( - a - ) - ) - - - z - · - sin - ( - a - ) - + - x - y - · - ( - 1 - - - cos - ( - a - ) - ) 1 - + - ( - 1 - - - cos - ( - a - ) - ) - ( - y2 - - - 1 - ) x - · - sin - ( - a - ) - + - y - z - · - ( - 1 - - - cos - ( - a - ) - ) - y - sin - ( - a - ) - + - xz - ( - 1 - - - cos - ( - a - ) - ) - - x - sin - ( - a - ) - + - yz - ( - 1 - - - cos - ( - a - ) - ) 1 - + - ( - 1 - - - cos - ( - a - ) - ) - ( - z2 - - - 1 - ) t 0 0 0 1) -
Coordenadas homogéneas en ℝℙ^3 - -
- -## Ejemplos - -### Rotar sobre el eje-Y - -#### HTML - -```html -
Normal
-
Rotado
-``` - -#### CSS - -```css -body { - perspective: 800px; -} - -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.rotated { - transform: rotate3d(0, 1, 0, 60deg); - background-color: pink; -} -``` - -#### Resultado - -{{EmbedLiveSample("Rotating_on_the_y-axis", "auto", 180)}} - -### Rotar sobre un eje personalizado - -#### HTML - -```html -
Normal
-
Rotado
-``` - -#### CSS - -```css -body { - perspective: 800px; -} - -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.rotated { - transform: rotate3d(1, 2, -1, 192deg); - background-color: pink; -} -``` - -#### Resultado - -{{EmbedLiveSample("Rotating_on_a_custom_axis", "auto", 180)}} - -## Especificaciones - -{{Specifications}} - -## Compatibilidad con navegadores - -{{Compat}} - -## Véase también - -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} diff --git a/files/es/web/css/transform-function/rotate3d/index.md b/files/es/web/css/transform-function/rotate3d/index.md new file mode 100644 index 0000000000..92edec1d62 --- /dev/null +++ b/files/es/web/css/transform-function/rotate3d/index.md @@ -0,0 +1,321 @@ +--- +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 [función](/es/docs/Web/CSS/CSS_Functions) **`rotate3d()`** de [CSS](/es/docs/Web/CSS) define una transformación que mueve el elemento alrededor de un eje fijo sin deformarlo. Su resultado es un tipo de dato {{cssxref("<transform-function>")}}. + +{{EmbedInteractiveExample("pages/css/rotate3d.html")}} + +En el espacio tridimencional, las rotaciones tienen tres grados de libertad, juntos describen un ángulo de rotación. El ángulo de rotación está definido por un vector \[x, y, z] y pasa por el origen (como lo define la propiedad {{cssxref("transform-origin")}}. Si el vector no está _normalizado_ (ej. si la suma del cuadrado de sus tres coordenadas no es igual a 1), el {{glossary("user agent")}} lo normalizará internamente. Un vector no-normalizable, como es el caso del vector nulo, \[0, 0, 0], causará que la rotación no sea aplicada, pero sin que esto invalide la propiedad CSS en su totalidad. + +> **Nota:** Contrario a las rotaciones en el plano 2D, la composición de las rotaciones 3D normalmente no es conmutativa; lo que significa que el orden en el que dichas rotaciones son aplicadas impacta al resultado. + +## Sintaxis + +La cantidad de rotación creada por `rotate3d()` está especificada por tres {{cssxref("<number>")}}s y un {{cssxref("<angle>")}}. El `` representa las coordenadas _x_, _y_ y _z_ del vector, denotando los ejes de la rotación. El `` representa el angulo de rotación; si es positivo el movimiento será en el sentido de las agujas del reloj; si es negativo será en el sentido opuesto. + +```css +rotate3d(x, y, z, a) +``` + +## Valores + +- `x` + - : Es un {{cssxref("<number>")}} que describe la coordenada-x del vector y denota el eje de rotación. +- `y` + - : Es un {{cssxref("<number>")}} que describe la coordenada-y del vector y denota el eje de rotación. +- `z` + - : Es un {{cssxref("<number>")}} que describe la coordenada-z del vector y denota el eje de rotación. +- `a` + - : Es un {{ cssxref("<angle>") }} que representa el ángulo de rotación. Un valor positivo indica una rotación en el sentido de las agujas del reloj, un valor negativo indica una rotación en sentido contrario a las agujas del reloj. + + + + + + + + + + + + + + + + + + + +
Coordenadas cartesianas en ℝ^2 + Esta transformación aplica al espacio tridimencional y no puede ser representada en el plano. +
Coordenadas homogéneas en ℝℙ^2
Coordenadas cartesianas en ℝ^3 + + (1 + + + ( + 1 + - + cos + ( + a + ) + ) + ( + x + 2 - + 1 + ) z + · + sin + ( + a + ) + + + x + y + ( + 1 + - + cos + ( + a + ) + ) - + y + · + sin + ( + a + ) + + + x + z + · + ( + 1 + - + cos + ( + a + ) + ) + - + z + · + sin + ( + a + ) + + + x + y + · + ( + 1 + - + cos + ( + a + ) + ) 1 + + + ( + 1 + - + cos + ( + a + ) + ) + ( + y2 + - + 1 + ) x + · + sin + ( + a + ) + + + y + z + · + ( + 1 + - + cos + ( + a + ) + ) + y + sin + ( + a + ) + + + xz + ( + 1 + - + cos + ( + a + ) + ) - + x + sin + ( + a + ) + + + yz + ( + 1 + - + cos + ( + a + ) + ) 1 + + + ( + 1 + - + cos + ( + a + ) + ) + ( + z2 + - + 1 + ) t 0 0 0 1) +
Coordenadas homogéneas en ℝℙ^3 + +
+ +## Ejemplos + +### Rotar sobre el eje-Y + +#### HTML + +```html +
Normal
+
Rotado
+``` + +#### CSS + +```css +body { + perspective: 800px; +} + +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.rotated { + transform: rotate3d(0, 1, 0, 60deg); + background-color: pink; +} +``` + +#### Resultado + +{{EmbedLiveSample("Rotating_on_the_y-axis", "auto", 180)}} + +### Rotar sobre un eje personalizado + +#### HTML + +```html +
Normal
+
Rotado
+``` + +#### CSS + +```css +body { + perspective: 800px; +} + +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.rotated { + transform: rotate3d(1, 2, -1, 192deg); + background-color: pink; +} +``` + +#### Resultado + +{{EmbedLiveSample("Rotating_on_a_custom_axis", "auto", 180)}} + +## Especificaciones + +{{Specifications}} + +## Compatibilidad con navegadores + +{{Compat}} + +## Véase también + +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} diff --git a/files/es/web/css/transform-function/scale()/index.html b/files/es/web/css/transform-function/scale()/index.html deleted file mode 100644 index 81a0e24714..0000000000 --- a/files/es/web/css/transform-function/scale()/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: scale() -slug: Web/CSS/transform-function/scale() -tags: - - CSS Scale - - scale() - - scaleX() - - scaleY() -translation_of: Web/CSS/transform-function/scale() ---- -
{{CSSRef}}
- -

La función CSS scale() define una transformación que modifica el tamaño de un elemento en el plano 2D. Debido a que la cantidad de escalado está definida por un vector, puede cambiar el tamaño de la dimensiones horizontal y vertical a diferentes escalas. Su resultado es un dato tipo {cssxref("<transform-function>")}} .

- -

- -

Esta transformación de escalado se caracteriza por un vector bidimensional. Sus coordenadas definen cuanto escalamiento se realiza en cada dirección. Sí ambas coordenadas son iguales, la escala es uniforme (isotrópica) y la relación de aspecto del elemento se conserva (esta es una transformación homotética).

- -

Cuando un valor de coordenadas está fuera del rango [-1, 1], el elemento crece a lo largo de esa dimensión; cuando está dentro, se encoge. Si es negativo, el resultado es un reflejo de punto en esa dimensión. Un valor de 1 no tiene ningún efecto.

- -
La función scale() solo se escala en 2d. Para escalar en 3D se utiliza la función scale3d() en su lugar.
- -

Sintaxis

- -

La función scale () se especifica con uno o dos valores, que representan la cantidad de escala que se aplicará en cada dirección.

- -
scale(sx) scale(sx, sy)
-
- -

Valores

- -
-
sx
-
Es un {{cssxref("<número>")}} representando la abscisa del vector de escala.
-
sy
-
Es un {{cssxref("<número>")}} representado la ordenada de la escala del vector.  Si no está presente, su valor por defecto es sx, llevando a una escala uniforme preservando la curva del elemento.
-
- - - - - - - - - - - - - - - - - - - - - -
Coordenadas Cartesianas en ℝ2Coordenadas Homogéneas en ℝℙ2Coordenadas Cartesianas en ℝ3Coordenadas Homogéneas en ℝℙ3
sx0 0sy sx000sy0001 sx000sy0001 sx0000sy0000100001
[sx 0 0 sy 0 0]
- -

Ejemplos

- -

Escalar las dimensiones X e Y al mismo tiempo

- -

HTML

- -
<div>Normal</div>
-<div class="scaled">Scaled</div>
- -

CSS

- -
div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.scaled {
-  transform: scale(0.7); /* Igual que: scaleX(0.7) scaleY(0.7) */
-  background-color: pink;
-}
- -

Resultado

- -

{{EmbedLiveSample("Scaling_the_X_and_Y_dimensions_together", "200", "200")}}

- -

Escalando dimensiones X e Y por separado y trasladando el origen

- -

HTML

- -
<div>Normal</div>
-<div class="scaled">Scaled</div>
- -

CSS

- -
div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.scaled {
-  transform: scale(2, 0.5); /* Igual que: scaleX(2) scaleY(0.5) */
-  transform-origin: left;
-  background-color: pink;
-}
- -

Resultado

- -

{{EmbedLiveSample("Scaling_X_and_Y_dimensions_separately_and_translating_the_origin", "200", "200")}}

- -

Compatibilidad con navegadores

- -

Please see the <transform-function> data type for compatibility info.

- -

También puede ver

- -
    -
  • {{cssxref("transform")}}
    • -
  • {{cssxref("<transform-function>")}}
    • -
  • scale3d()
    • -
diff --git a/files/es/web/css/transform-function/scale/index.html b/files/es/web/css/transform-function/scale/index.html new file mode 100644 index 0000000000..bd6304eb52 --- /dev/null +++ b/files/es/web/css/transform-function/scale/index.html @@ -0,0 +1,123 @@ +--- +title: scale() +slug: Web/CSS/transform-function/scale +tags: + - CSS Scale + - scale() + - scaleX() + - scaleY() +translation_of: Web/CSS/transform-function/scale() +original_slug: Web/CSS/transform-function/scale() +--- +
{{CSSRef}}
+ +

La función CSS scale() define una transformación que modifica el tamaño de un elemento en el plano 2D. Debido a que la cantidad de escalado está definida por un vector, puede cambiar el tamaño de la dimensiones horizontal y vertical a diferentes escalas. Su resultado es un dato tipo {cssxref("<transform-function>")}} .

+ +

+ +

Esta transformación de escalado se caracteriza por un vector bidimensional. Sus coordenadas definen cuanto escalamiento se realiza en cada dirección. Sí ambas coordenadas son iguales, la escala es uniforme (isotrópica) y la relación de aspecto del elemento se conserva (esta es una transformación homotética).

+ +

Cuando un valor de coordenadas está fuera del rango [-1, 1], el elemento crece a lo largo de esa dimensión; cuando está dentro, se encoge. Si es negativo, el resultado es un reflejo de punto en esa dimensión. Un valor de 1 no tiene ningún efecto.

+ +
La función scale() solo se escala en 2d. Para escalar en 3D se utiliza la función scale3d() en su lugar.
+ +

Sintaxis

+ +

La función scale () se especifica con uno o dos valores, que representan la cantidad de escala que se aplicará en cada dirección.

+ +
scale(sx) scale(sx, sy)
+
+ +

Valores

+ +
+
sx
+
Es un {{cssxref("<número>")}} representando la abscisa del vector de escala.
+
sy
+
Es un {{cssxref("<número>")}} representado la ordenada de la escala del vector.  Si no está presente, su valor por defecto es sx, llevando a una escala uniforme preservando la curva del elemento.
+
+ + + + + + + + + + + + + + + + + + + + + +
Coordenadas Cartesianas en ℝ2Coordenadas Homogéneas en ℝℙ2Coordenadas Cartesianas en ℝ3Coordenadas Homogéneas en ℝℙ3
sx0 0sy sx000sy0001 sx000sy0001 sx0000sy0000100001
[sx 0 0 sy 0 0]
+ +

Ejemplos

+ +

Escalar las dimensiones X e Y al mismo tiempo

+ +

HTML

+ +
<div>Normal</div>
+<div class="scaled">Scaled</div>
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.scaled {
+  transform: scale(0.7); /* Igual que: scaleX(0.7) scaleY(0.7) */
+  background-color: pink;
+}
+ +

Resultado

+ +

{{EmbedLiveSample("Scaling_the_X_and_Y_dimensions_together", "200", "200")}}

+ +

Escalando dimensiones X e Y por separado y trasladando el origen

+ +

HTML

+ +
<div>Normal</div>
+<div class="scaled">Scaled</div>
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.scaled {
+  transform: scale(2, 0.5); /* Igual que: scaleX(2) scaleY(0.5) */
+  transform-origin: left;
+  background-color: pink;
+}
+ +

Resultado

+ +

{{EmbedLiveSample("Scaling_X_and_Y_dimensions_separately_and_translating_the_origin", "200", "200")}}

+ +

Compatibilidad con navegadores

+ +

Please see the <transform-function> data type for compatibility info.

+ +

También puede ver

+ +
    +
  • {{cssxref("transform")}}
    • +
  • {{cssxref("<transform-function>")}}
    • +
  • scale3d()
    • +
diff --git a/files/es/web/css/transform-function/translate()/index.html b/files/es/web/css/transform-function/translate()/index.html deleted file mode 100644 index 26562a503c..0000000000 --- a/files/es/web/css/transform-function/translate()/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: translate() -slug: Web/CSS/transform-function/translate() -tags: - - CSS - - CSS Function - - CSS Transforms - - Función CSS - - Referencia -translation_of: Web/CSS/transform-function/translate() ---- -
{{CSSRef}}
- -

La function de CSS translate() recoloca un elemento en el eje horizontal y/o vertical. Su resultado es de tipo {{cssxref("<transform-function>")}}.

- -

- -

Esta transformacion esta compuesta por un vector bidimensional cuyas coordenadas definen cuanto se movera el elemente en cada dirección.

- -

Sintaxis

- -

La function translate() esta especificada con uno o dos valores.

- -
translate(tx)
-
-translate(tx, ty)
-
- -

Valores

- -
-
tx
-
Es un {{cssxref("<length>")}} que representa la absisa (coordenada x) del vector de translación.
-
ty
-
Es un {{cssxref("<length>")}} que representa las ordenadas (coordenada y) del vector de translación. Si no se especifica, su valor es 0. Por ejemplo, translate(2) es equivalente a translate(2, 0).
-
- - - - - - - - - - - - - - - - - - - - - -
Coordenadas cartesianas en ℝ2Coordenadas homogeneas en ℝℙ2 -

Coordenadas cartesianas en ℝ3

- 		Coordenadas homogeneas en ℝℙ3
-

Una translación no es una transformación lineal en ℝ2 y no puede ser representada usando una matriz de coordenadas cartesianas.

- 		10tx01ty001 10tx01ty001 100tx010ty00100001
[1 0 0 1 tx ty]
- -

Ejemplos

- -

Translación en un solo eje

- -

HTML

- -
<div>Estático</div>
-<div class="moved">Movido</div>
-<div>Estático</div>
- -

CSS

- -
div {
-  width: 60px;
-  height: 60px;
-  background-color: skyblue;
-}
-
-.moved {
-  transform: translate(10px); /* Equivalente a translateX(10px) */
-  background-color: pink;
-}
-
- -

Resultado

- -

{{EmbedLiveSample("Using_a_single-axis_translation", 250, 250)}}

- -

Translación combinada en los ejes X e Y

- -

HTML

- -
<div>Estático</div>
-<div class="moved">Movido</div>
-<div>Estático</div>
- -

CSS

- -
div {
-  width: 60px;
-  height: 60px;
-  background-color: skyblue;
-}
-
-.moved {
-  transform: translate(10px, 10px);
-  background-color: pink;
-}
-
- -

Resultado

- -

{{EmbedLiveSample("Combining_y-axis_and_x-axis_translation", 250, 250)}}

- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('CSS3 Transforms', '#funcdef-transform-translate', 'translate()')}}{{Spec2('CSS3 Transforms')}}Definición inicial
- -

Compatibilidad con navegadores

- -

Ver el tipo de datos <transform-function> para la información de compatibilidad.

- -

Véase también

- -
    -
  • {{cssxref("transform")}}
    • -
  • {{cssxref("<transform-function>")}}
    • -
diff --git a/files/es/web/css/transform-function/translate/index.html b/files/es/web/css/transform-function/translate/index.html new file mode 100644 index 0000000000..1f345f1d84 --- /dev/null +++ b/files/es/web/css/transform-function/translate/index.html @@ -0,0 +1,147 @@ +--- +title: translate() +slug: Web/CSS/transform-function/translate +tags: + - CSS + - CSS Function + - CSS Transforms + - Función CSS + - Referencia +translation_of: Web/CSS/transform-function/translate() +original_slug: Web/CSS/transform-function/translate() +--- +
{{CSSRef}}
+ +

La function de CSS translate() recoloca un elemento en el eje horizontal y/o vertical. Su resultado es de tipo {{cssxref("<transform-function>")}}.

+ +

+ +

Esta transformacion esta compuesta por un vector bidimensional cuyas coordenadas definen cuanto se movera el elemente en cada dirección.

+ +

Sintaxis

+ +

La function translate() esta especificada con uno o dos valores.

+ +
translate(tx)
+
+translate(tx, ty)
+
+ +

Valores

+ +
+
tx
+
Es un {{cssxref("<length>")}} que representa la absisa (coordenada x) del vector de translación.
+
ty
+
Es un {{cssxref("<length>")}} que representa las ordenadas (coordenada y) del vector de translación. Si no se especifica, su valor es 0. Por ejemplo, translate(2) es equivalente a translate(2, 0).
+
+ + + + + + + + + + + + + + + + + + + + + +
Coordenadas cartesianas en ℝ2Coordenadas homogeneas en ℝℙ2 +

Coordenadas cartesianas en ℝ3

+ 		Coordenadas homogeneas en ℝℙ3
+

Una translación no es una transformación lineal en ℝ2 y no puede ser representada usando una matriz de coordenadas cartesianas.

+ 		10tx01ty001 10tx01ty001 100tx010ty00100001
[1 0 0 1 tx ty]
+ +

Ejemplos

+ +

Translación en un solo eje

+ +

HTML

+ +
<div>Estático</div>
+<div class="moved">Movido</div>
+<div>Estático</div>
+ +

CSS

+ +
div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: translate(10px); /* Equivalente a translateX(10px) */
+  background-color: pink;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample("Using_a_single-axis_translation", 250, 250)}}

+ +

Translación combinada en los ejes X e Y

+ +

HTML

+ +
<div>Estático</div>
+<div class="moved">Movido</div>
+<div>Estático</div>
+ +

CSS

+ +
div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: translate(10px, 10px);
+  background-color: pink;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample("Combining_y-axis_and_x-axis_translation", 250, 250)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Transforms', '#funcdef-transform-translate', 'translate()')}}{{Spec2('CSS3 Transforms')}}Definición inicial
+ +

Compatibilidad con navegadores

+ +

Ver el tipo de datos <transform-function> para la información de compatibilidad.

+ +

Véase también

+ +
    +
  • {{cssxref("transform")}}
    • +
  • {{cssxref("<transform-function>")}}
    • +
diff --git a/files/es/web/css/transform-function/translatey()/index.html b/files/es/web/css/transform-function/translatey()/index.html deleted file mode 100644 index 5d01de73be..0000000000 --- a/files/es/web/css/transform-function/translatey()/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: translateY() -slug: Web/CSS/transform-function/translateY() -tags: - - Funciones CSS - - Referencia - - Transformaciones CSS -translation_of: Web/CSS/transform-function/translateY() ---- -
{{CSSRef}}
- -

La función translateY() de CSS reposiciona un elemento verticalmente dentro del plano bidimensional. Su resultado es de tipo {{cssxref("<transform-function>")}}.

- -

- -
-

Nota: translateY(ty) es equivalente a translate(0, ty) o translate3d(0, ty, 0).

-
- -

Sintaxis

- -
/* <length-percentage> values */
-transform: translateY(200px);
-transform: translateY(50%);
-
- -

Valores

- -
-
<length-percentage>
-
El valor es de tipo {{cssxref("<length>")}} o {{cssxref("<percentage>")}}, representando el ordinal del vector de traslación. Un valor en porcentaje es relativo a la altura de la caja de referencia definida por la propiedad {{cssxref("transform-box")}}.
-
- - - - - - - - - - - - - - - - - - - - - -
Coordenadas cartesianas en ℝ2Coordenadas homogéneas en ℝℙ2Coordenadas cartesianas en ℝ3Coordenadas homogéneas en ℝℙ3
-

Una traslación no es una transformación linear en ℝ2  y no puede ser representada usando una matriz de coordenada cartesiana.

- 		10001t001 10001t001 1000010t00100001
[1 0 0 1 0 t]
- -

Sintaxis formal

- -
translateY({{cssxref("<length-percentage>")}})
-
- -

Ejemplos

- -

HTML

- -
<div>Static</div>
-<div class="moved">Moved</div>
-<div>Static</div>
- -

CSS

- -
div {
-  width: 60px;
-  height: 60px;
-  background-color: skyblue;
-}
-
-.moved {
-  transform: translateY(10px);
-  background-color: pink;
-}
-
- -

Resultado

- -

{{EmbedLiveSample("Ejemplos", 250, 250)}}

- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentarios
{{SpecName("CSS3 Transforms", "#funcdef-transform-translatey", "translateY()")}}{{Spec2("CSS3 Transforms")}}Definición inicial
- -

Compatibilidad de navegadores

- -

Por favor, véase el tipo <transform-function> para información de compatibilidad.

- -

Véase también

- -
    -
  • {{cssxref("transform")}}
    • -
  • {{cssxref("<transform-function>")}}
    • -
diff --git a/files/es/web/css/transform-function/translatey/index.html b/files/es/web/css/transform-function/translatey/index.html new file mode 100644 index 0000000000..b3e2185290 --- /dev/null +++ b/files/es/web/css/transform-function/translatey/index.html @@ -0,0 +1,118 @@ +--- +title: translateY() +slug: Web/CSS/transform-function/translateY +tags: + - Funciones CSS + - Referencia + - Transformaciones CSS +translation_of: Web/CSS/transform-function/translateY() +original_slug: Web/CSS/transform-function/translateY() +--- +
{{CSSRef}}
+ +

La función translateY() de CSS reposiciona un elemento verticalmente dentro del plano bidimensional. Su resultado es de tipo {{cssxref("<transform-function>")}}.

+ +

+ +
+

Nota: translateY(ty) es equivalente a translate(0, ty) o translate3d(0, ty, 0).

+
+ +

Sintaxis

+ +
/* <length-percentage> values */
+transform: translateY(200px);
+transform: translateY(50%);
+
+ +

Valores

+ +
+
<length-percentage>
+
El valor es de tipo {{cssxref("<length>")}} o {{cssxref("<percentage>")}}, representando el ordinal del vector de traslación. Un valor en porcentaje es relativo a la altura de la caja de referencia definida por la propiedad {{cssxref("transform-box")}}.
+
+ + + + + + + + + + + + + + + + + + + + + +
Coordenadas cartesianas en ℝ2Coordenadas homogéneas en ℝℙ2Coordenadas cartesianas en ℝ3Coordenadas homogéneas en ℝℙ3
+

Una traslación no es una transformación linear en ℝ2  y no puede ser representada usando una matriz de coordenada cartesiana.

+ 		10001t001 10001t001 1000010t00100001
[1 0 0 1 0 t]
+ +

Sintaxis formal

+ +
translateY({{cssxref("<length-percentage>")}})
+
+ +

Ejemplos

+ +

HTML

+ +
<div>Static</div>
+<div class="moved">Moved</div>
+<div>Static</div>
+ +

CSS

+ +
div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: translateY(10px);
+  background-color: pink;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample("Ejemplos", 250, 250)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName("CSS3 Transforms", "#funcdef-transform-translatey", "translateY()")}}{{Spec2("CSS3 Transforms")}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

Por favor, véase el tipo <transform-function> para información de compatibilidad.

+ +

Véase también

+ +
    +
  • {{cssxref("transform")}}
    • +
  • {{cssxref("<transform-function>")}}
    • +
diff --git a/files/es/web/css/transform-function/translatez()/index.html b/files/es/web/css/transform-function/translatez()/index.html deleted file mode 100644 index 75ee9ac918..0000000000 --- a/files/es/web/css/transform-function/translatez()/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: translateZ() -slug: Web/CSS/transform-function/translateZ() -tags: - - 3D - - CSS -translation_of: Web/CSS/transform-function/translateZ() ---- -
{{CSSRef}}
- -

La función translateZ() CSS reposiciona un elemento a lo largo del eje-z (z-axis) en el espacio 3D, es decir, más cerca o mas lejos del espectador. Su resultado es un {{cssxref("<transform-function>")}} tipo de dato.

- -
{{EmbedInteractiveExample("pages/css/function-translateZ.html")}}
- - - -

Esta transformación es definida por una {{cssxref("<length>")}} la cual especifica que tan lejos hacia denttro o hacia afuera el elemento o los elementos se mueven.

- -

En los ejemplos interacticos anteriores, perspective: 550px; (para crear un espacio 3D) y transform-style: preserve-3d; (los elementos hijos, los 6 lados del cubo, estan también posicionados en el espacio 3D), es decir, han sido establecidos en el cubo.

- -
-

Nota: translateZ(tz) es equivalente a translate3d(0, 0, tz).

-
- -

Syntax

- -
translateZ(tz)
-
- -

Values

- -
-
tz
-
Una {{cssxref("<length>")}} que representa el componente-z del vector. Un valor positivo mueve el elemento hacia el espectador, y un elemento negativo mueve el elemento más lejos.
-
- - - - - - - - - - - - - - - - - -
Coordenadas Cartesianas en  ℝ2Coordenadas Homógeneas en ℝℙ2Coordenadas Cartesianas en ℝ3Coordenadas Homógeneas enℝℙ3
Esta transformación se aplica al espacio 4D y no puede ser representada en el plano.Una traducción no es una transformación lineal en ℝ3 y no puede ser representada usando una matriz de coordenadas-Cartesianas. -

1 0 0 0 

- -

0 1 0 0

- -

0 0 1 t

- -

 0 0 0 1

-
- -

Ejemplos

- -

En este ejemplo, se crean dos cuadros. Uno se coloca normalmente en la página, sin ser traducida en absoluto. El segundo se modifica aplicando perspectiva para crear un espacio 3D, luego se mueve hacia el usuario.

- -

HTML

- -
<div>Static</div>
-<div class="moved">Moved</div>
- -

CSS

- -
div {
-  position: relative;
-  width: 60px;
-  height: 60px;
-  left: 100px;
-  background-color: skyblue;
-}
-
-.moved {
-  transform: perspective(500px) translateZ(200px);
-  background-color: pink;
-}
-
- -

Lo que realmente importa es la clase "movida"; veamos que hace. Primero, la función perspective() posiciona al espectador en relación con el plano  que se encuentra donde z=0 (en esencia, la superficie de la pantalla). Un valor de 500px significa que el usario es 500 pixels "delante de" las imagenes ubicadas en z=0.

- -

Luego, la función translateZ() mueve el elemento 200 pixeles "hacia afuera" desde la pantalla, hacia el usuario. Esto tiene el efecto de hacer que el elemento parezca más grande cuando se ve en una pantalla 2D, o más cerca cuando se ve usando un auricular VR u otro dispositivo de pantalla 3D.

- -

Resultado

- -

{{EmbedLiveSample("Examples", 250, 250)}}

- -

Si el valor perspective() es menor que el valor translateZ(), como transform: perspective(200px) translateZ(300px); el elemento transformado no será visible ya que está más allá de la vista del usuario. Cuanto menor sea la diferencia entre la pespectiva y los valores de transformación, más cerca estará el usuario del elemento y más grande parecerá el elemento traducido. 

- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}{{Spec2('CSS Transforms 2')}}Agrega funciones de transformación 3D al CSS Transform estándar.
- -

Compatibilidad con navegador

- -

Por favor observe la propiedad <transform-function> para información de compatibilidad.

- -

Véase también

- -
    -
  • {{cssxref("transform")}}
    • -
  • {{cssxref("<transform-function>")}}
    • -
diff --git a/files/es/web/css/transform-function/translatez/index.html b/files/es/web/css/transform-function/translatez/index.html new file mode 100644 index 0000000000..1030c389d5 --- /dev/null +++ b/files/es/web/css/transform-function/translatez/index.html @@ -0,0 +1,127 @@ +--- +title: translateZ() +slug: Web/CSS/transform-function/translateZ +tags: + - 3D + - CSS +translation_of: Web/CSS/transform-function/translateZ() +original_slug: Web/CSS/transform-function/translateZ() +--- +
{{CSSRef}}
+ +

La función translateZ() CSS reposiciona un elemento a lo largo del eje-z (z-axis) en el espacio 3D, es decir, más cerca o mas lejos del espectador. Su resultado es un {{cssxref("<transform-function>")}} tipo de dato.

+ +
{{EmbedInteractiveExample("pages/css/function-translateZ.html")}}
+ + + +

Esta transformación es definida por una {{cssxref("<length>")}} la cual especifica que tan lejos hacia denttro o hacia afuera el elemento o los elementos se mueven.

+ +

En los ejemplos interacticos anteriores, perspective: 550px; (para crear un espacio 3D) y transform-style: preserve-3d; (los elementos hijos, los 6 lados del cubo, estan también posicionados en el espacio 3D), es decir, han sido establecidos en el cubo.

+ +
+

Nota: translateZ(tz) es equivalente a translate3d(0, 0, tz).

+
+ +

Syntax

+ +
translateZ(tz)
+
+ +

Values

+ +
+
tz
+
Una {{cssxref("<length>")}} que representa el componente-z del vector. Un valor positivo mueve el elemento hacia el espectador, y un elemento negativo mueve el elemento más lejos.
+
+ + + + + + + + + + + + + + + + + +
Coordenadas Cartesianas en  ℝ2Coordenadas Homógeneas en ℝℙ2Coordenadas Cartesianas en ℝ3Coordenadas Homógeneas enℝℙ3
Esta transformación se aplica al espacio 4D y no puede ser representada en el plano.Una traducción no es una transformación lineal en ℝ3 y no puede ser representada usando una matriz de coordenadas-Cartesianas. +

1 0 0 0 

+ +

0 1 0 0

+ +

0 0 1 t

+ +

 0 0 0 1

+
+ +

Ejemplos

+ +

En este ejemplo, se crean dos cuadros. Uno se coloca normalmente en la página, sin ser traducida en absoluto. El segundo se modifica aplicando perspectiva para crear un espacio 3D, luego se mueve hacia el usuario.

+ +

HTML

+ +
<div>Static</div>
+<div class="moved">Moved</div>
+ +

CSS

+ +
div {
+  position: relative;
+  width: 60px;
+  height: 60px;
+  left: 100px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: perspective(500px) translateZ(200px);
+  background-color: pink;
+}
+
+ +

Lo que realmente importa es la clase "movida"; veamos que hace. Primero, la función perspective() posiciona al espectador en relación con el plano  que se encuentra donde z=0 (en esencia, la superficie de la pantalla). Un valor de 500px significa que el usario es 500 pixels "delante de" las imagenes ubicadas en z=0.

+ +

Luego, la función translateZ() mueve el elemento 200 pixeles "hacia afuera" desde la pantalla, hacia el usuario. Esto tiene el efecto de hacer que el elemento parezca más grande cuando se ve en una pantalla 2D, o más cerca cuando se ve usando un auricular VR u otro dispositivo de pantalla 3D.

+ +

Resultado

+ +

{{EmbedLiveSample("Examples", 250, 250)}}

+ +

Si el valor perspective() es menor que el valor translateZ(), como transform: perspective(200px) translateZ(300px); el elemento transformado no será visible ya que está más allá de la vista del usuario. Cuanto menor sea la diferencia entre la pespectiva y los valores de transformación, más cerca estará el usuario del elemento y más grande parecerá el elemento traducido. 

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}{{Spec2('CSS Transforms 2')}}Agrega funciones de transformación 3D al CSS Transform estándar.
+ +

Compatibilidad con navegador

+ +

Por favor observe la propiedad <transform-function> para información de compatibilidad.

+ +

Véase también

+ +
    +
  • {{cssxref("transform")}}
    • +
  • {{cssxref("<transform-function>")}}
    • +
diff --git a/files/es/web/css/url()/index.html b/files/es/web/css/url()/index.html deleted file mode 100644 index c57e34235d..0000000000 --- a/files/es/web/css/url()/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: url() -slug: Web/CSS/url() -tags: - - CSS - - Referencia -translation_of: Web/CSS/url() -translation_of_original: Web/CSS/filter-function/url -original_slug: Web/CSS/filter-function/url ---- -
{{cssref}}
- -

La función de CSS url() usa un filtro SVG para cambiar la apariencia en la imagen de entrada.

- -

Sintaxis

- -
url(location)
- -

Parámetros

- -
-
location
-
La {{cssxref("<url>")}} de un archivo {{glossary("XML")}} que especifique un filtro SVG, y puede incluir un ancla a un elemento filtro específico.
-
- -

Ejemplo

- -
url(resources.svg#c1)
- -

Ver también

- -
    -
  • {{cssxref("<filter-function>")}}
    • -
diff --git a/files/es/web/css/url/index.html b/files/es/web/css/url/index.html new file mode 100644 index 0000000000..f0a590a6f3 --- /dev/null +++ b/files/es/web/css/url/index.html @@ -0,0 +1,34 @@ +--- +title: url() +slug: Web/CSS/url +tags: + - CSS + - Referencia +translation_of: Web/CSS/url() +translation_of_original: Web/CSS/filter-function/url +original_slug: Web/CSS/url() +--- +
{{cssref}}
+ +

La función de CSS url() usa un filtro SVG para cambiar la apariencia en la imagen de entrada.

+ +

Sintaxis

+ +
url(location)
+ +

Parámetros

+ +
+
location
+
La {{cssxref("<url>")}} de un archivo {{glossary("XML")}} que especifique un filtro SVG, y puede incluir un ancla a un elemento filtro específico.
+
+ +

Ejemplo

+ +
url(resources.svg#c1)
+ +

Ver también

+ +
    +
  • {{cssxref("<filter-function>")}}
    • +
diff --git a/files/es/web/css/var()/index.html b/files/es/web/css/var()/index.html deleted file mode 100644 index 0f8dc84a0a..0000000000 --- a/files/es/web/css/var()/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: var() -slug: Web/CSS/var() -translation_of: Web/CSS/var() ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La función var() puede ser utilizada como valor en cualquier propiedad de un elemento. La función var() no puede ser usada como nombre de una propiedad, selector o cualquier cosa que no sea un valor de propiedad. (Hacerlo provoca normalmente una sintaxis erronea o bien un valor que no tiene conexión con la variable).

- -

Sintaxis

- -

El primer parámetro que recibe la función es el nombre de la custom property que será reemplazada. Se puede utilizar un segundo parámetro opcional como fallback de el primero. Si la custom property referenciada por el primer parámetro no es válida, entonces la función utiliza el valor del segúndo parámetro.

- -{{csssyntax}} - -

Valores

- -
-
<custom-property-name>
-
El nombre de la custom property a la que se hace referencia, representada por un identificador válido, es decir, cualquier nombre que comience por dos guiones. Las "custom properties" son para uso exclusivo de autores y usuarios. CSS no dará nunca un significado más alla del que se detalla aquí.
-
<declaration-value>
-
El valor por defecto de la custom property en caso de que la custom property referenciada sea inválida. Este valor puede contener cualquier caracter salvo algunos con significado especial como saltos de linea, llaves sin cerrar, exclamaciones o puntos y comas .
-
- -

Ejemplos

- -
:root {
-  --main-bg-color: pink;
-}
-
-body {
-  background-color: var(--main-bg-color);
-}
-
- -
/* Fallback */
-/* En el estilo del componente: */
-.component .header {
-  color: var(--header-color, blue);
-}
-
-.component .text {
-  color: var(--text-color, black);
-}
-
-/* En el estilo de la aplicación: */
-.component {
-  --text-color: #080; /* header-color no está definido y por lo tanto permanece con el valor "blue" definido como fallback */
-}
-
- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('CSS3 Variables', '#using-variables', 'var()')}}{{Spec2('CSS3 Variables')}}Definición inicial
- -

Compatibilidad con navegadores

- -{{Compat("css.properties.custom-property.var")}} - -

Ver también

- - diff --git a/files/es/web/css/var/index.html b/files/es/web/css/var/index.html new file mode 100644 index 0000000000..04eb1d9809 --- /dev/null +++ b/files/es/web/css/var/index.html @@ -0,0 +1,80 @@ +--- +title: var() +slug: Web/CSS/var +translation_of: Web/CSS/var() +original_slug: Web/CSS/var() +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La función var() puede ser utilizada como valor en cualquier propiedad de un elemento. La función var() no puede ser usada como nombre de una propiedad, selector o cualquier cosa que no sea un valor de propiedad. (Hacerlo provoca normalmente una sintaxis erronea o bien un valor que no tiene conexión con la variable).

+ +

Sintaxis

+ +

El primer parámetro que recibe la función es el nombre de la custom property que será reemplazada. Se puede utilizar un segundo parámetro opcional como fallback de el primero. Si la custom property referenciada por el primer parámetro no es válida, entonces la función utiliza el valor del segúndo parámetro.

+ +{{csssyntax}} + +

Valores

+ +
+
<custom-property-name>
+
El nombre de la custom property a la que se hace referencia, representada por un identificador válido, es decir, cualquier nombre que comience por dos guiones. Las "custom properties" son para uso exclusivo de autores y usuarios. CSS no dará nunca un significado más alla del que se detalla aquí.
+
<declaration-value>
+
El valor por defecto de la custom property en caso de que la custom property referenciada sea inválida. Este valor puede contener cualquier caracter salvo algunos con significado especial como saltos de linea, llaves sin cerrar, exclamaciones o puntos y comas .
+
+ +

Ejemplos

+ +
:root {
+  --main-bg-color: pink;
+}
+
+body {
+  background-color: var(--main-bg-color);
+}
+
+ +
/* Fallback */
+/* En el estilo del componente: */
+.component .header {
+  color: var(--header-color, blue);
+}
+
+.component .text {
+  color: var(--text-color, black);
+}
+
+/* En el estilo de la aplicación: */
+.component {
+  --text-color: #080; /* header-color no está definido y por lo tanto permanece con el valor "blue" definido como fallback */
+}
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Variables', '#using-variables', 'var()')}}{{Spec2('CSS3 Variables')}}Definición inicial
+ +

Compatibilidad con navegadores

+ +{{Compat("css.properties.custom-property.var")}} + +

Ver también

+ + 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) diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index 59f25a6bab..a85221cdef 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -166,12 +166,12 @@ /ja/docs/CSS/-moz-column-width /ja/docs/Web/CSS/column-width /ja/docs/CSS/-moz-context-menu /ja/docs/Web/CSS/cursor /ja/docs/CSS/-moz-copy /ja/docs/Web/CSS/cursor -/ja/docs/CSS/-moz-linear-gradient /ja/docs/Web/CSS/gradient/linear-gradient() +/ja/docs/CSS/-moz-linear-gradient /ja/docs/Web/CSS/gradient/linear-gradient /ja/docs/CSS/-moz-orient /ja/docs/Web/CSS/-moz-orient /ja/docs/CSS/-moz-outline /ja/docs/Web/CSS/outline /ja/docs/CSS/-moz-outline-color /ja/docs/Web/CSS/outline-color /ja/docs/CSS/-moz-outline-offset /ja/docs/Web/CSS/outline-offset -/ja/docs/CSS/-moz-radial-gradient /ja/docs/Web/CSS/gradient/radial-gradient() +/ja/docs/CSS/-moz-radial-gradient /ja/docs/Web/CSS/gradient/radial-gradient /ja/docs/CSS/-moz-transform /ja/docs/Web/CSS/transform /ja/docs/CSS/-moz-transform-origin /ja/docs/Web/CSS/transform-origin /ja/docs/CSS/-moz-user-input /ja/docs/Web/CSS/-moz-user-input @@ -331,7 +331,7 @@ /ja/docs/CSS/animation-name /ja/docs/Web/CSS/animation-name /ja/docs/CSS/animation-play-state /ja/docs/Web/CSS/animation-play-state /ja/docs/CSS/animation-timing-function /ja/docs/Web/CSS/animation-timing-function -/ja/docs/CSS/attr /ja/docs/Web/CSS/attr() +/ja/docs/CSS/attr /ja/docs/Web/CSS/attr /ja/docs/CSS/aural /ja/docs/Web/CSS/@media/aural /ja/docs/CSS/auto /ja/docs/Web/CSS/width /ja/docs/CSS/backface-visibility /ja/docs/Web/CSS/backface-visibility @@ -382,7 +382,7 @@ /ja/docs/CSS/box-shadow /ja/docs/Web/CSS/box-shadow /ja/docs/CSS/box-sizing /ja/docs/Web/CSS/box-sizing /ja/docs/CSS/box_model /ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model -/ja/docs/CSS/calc /ja/docs/Web/CSS/calc() +/ja/docs/CSS/calc /ja/docs/Web/CSS/calc /ja/docs/CSS/caption-side /ja/docs/Web/CSS/caption-side /ja/docs/CSS/clear /ja/docs/Web/CSS/clear /ja/docs/CSS/clip /ja/docs/Web/CSS/clip @@ -407,7 +407,7 @@ /ja/docs/CSS/cursor /ja/docs/Web/CSS/cursor /ja/docs/CSS/direction /ja/docs/Web/CSS/direction /ja/docs/CSS/display /ja/docs/Web/CSS/display -/ja/docs/CSS/element /ja/docs/Web/CSS/element() +/ja/docs/CSS/element /ja/docs/Web/CSS/element /ja/docs/CSS/empty-cells /ja/docs/Web/CSS/empty-cells /ja/docs/CSS/flex /ja/docs/Web/CSS/flex /ja/docs/CSS/flex-basis /ja/docs/Web/CSS/flex-basis @@ -439,7 +439,7 @@ /ja/docs/CSS/left /ja/docs/Web/CSS/left /ja/docs/CSS/letter-spacing /ja/docs/Web/CSS/letter-spacing /ja/docs/CSS/line-height /ja/docs/Web/CSS/line-height -/ja/docs/CSS/linear-gradient /ja/docs/Web/CSS/gradient/linear-gradient() +/ja/docs/CSS/linear-gradient /ja/docs/Web/CSS/gradient/linear-gradient /ja/docs/CSS/list-style /ja/docs/Web/CSS/list-style /ja/docs/CSS/list-style-image /ja/docs/Web/CSS/list-style-image /ja/docs/CSS/list-style-position /ja/docs/Web/CSS/list-style-position @@ -478,9 +478,9 @@ /ja/docs/CSS/position /ja/docs/Web/CSS/position /ja/docs/CSS/position_value /ja/docs/Web/CSS/position_value /ja/docs/CSS/quotes /ja/docs/Web/CSS/quotes -/ja/docs/CSS/radial-gradient /ja/docs/Web/CSS/gradient/radial-gradient() -/ja/docs/CSS/repeating-linear-gradient /ja/docs/Web/CSS/gradient/repeating-linear-gradient() -/ja/docs/CSS/repeating-radial-gradient /ja/docs/Web/CSS/gradient/repeating-radial-gradient() +/ja/docs/CSS/radial-gradient /ja/docs/Web/CSS/gradient/radial-gradient +/ja/docs/CSS/repeating-linear-gradient /ja/docs/Web/CSS/gradient/repeating-linear-gradient +/ja/docs/CSS/repeating-radial-gradient /ja/docs/Web/CSS/gradient/repeating-radial-gradient /ja/docs/CSS/resize /ja/docs/Web/CSS/resize /ja/docs/CSS/resolution /ja/docs/Web/CSS/resolution /ja/docs/CSS/right /ja/docs/Web/CSS/right @@ -507,7 +507,7 @@ /ja/docs/CSS/transition-property /ja/docs/Web/CSS/transition-property /ja/docs/CSS/transition-timing-function /ja/docs/Web/CSS/transition-timing-function /ja/docs/CSS/unicode-bidi /ja/docs/Web/CSS/unicode-bidi -/ja/docs/CSS/uri /ja/docs/Web/CSS/url() +/ja/docs/CSS/uri /ja/docs/Web/CSS/url /ja/docs/CSS/used_value /ja/docs/Web/CSS/used_value /ja/docs/CSS/user-ident /ja/docs/Web/CSS/custom-ident /ja/docs/CSS/vertical-align /ja/docs/Web/CSS/vertical-align @@ -3703,6 +3703,7 @@ /ja/docs/Web/CSS/::-moz-placeholder /ja/docs/Web/CSS/::placeholder /ja/docs/Web/CSS/::-webkit-input-placeholder /ja/docs/Web/CSS/::placeholder /ja/docs/Web/CSS/:any /ja/docs/Web/CSS/:is +/ja/docs/Web/CSS/:host() /ja/docs/Web/CSS/:host_function /ja/docs/Web/CSS/:matches /ja/docs/Web/CSS/:is /ja/docs/Web/CSS/@media/scan /ja/docs/orphaned/Web/CSS/@media/scan /ja/docs/Web/CSS/@page/bleed /ja/docs/orphaned/Web/CSS/@page/bleed @@ -3793,84 +3794,102 @@ /ja/docs/Web/CSS/Using_media_queries_from_code /ja/docs/Web/CSS/Media_Queries/Testing_media_queries /ja/docs/Web/CSS/Using_multi-column_layouts /ja/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts /ja/docs/Web/CSS/Using_multiple_backgrounds /ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds -/ja/docs/Web/CSS/attr /ja/docs/Web/CSS/attr() +/ja/docs/Web/CSS/attr() /ja/docs/Web/CSS/attr /ja/docs/Web/CSS/aural /ja/docs/Web/CSS/@media/aural /ja/docs/Web/CSS/auto /ja/docs/Web/CSS/width +/ja/docs/Web/CSS/basic-shape/circle() /ja/docs/Web/CSS/basic-shape/circle +/ja/docs/Web/CSS/basic-shape/ellipse() /ja/docs/Web/CSS/basic-shape/ellipse +/ja/docs/Web/CSS/basic-shape/inset() /ja/docs/Web/CSS/basic-shape/inset +/ja/docs/Web/CSS/basic-shape/polygon() /ja/docs/Web/CSS/basic-shape/polygon /ja/docs/Web/CSS/border-radius/border-radius /ja/docs/Web/CSS/border-radius /ja/docs/Web/CSS/border-top-left-radius_|_-moz-border-radius-topleft /ja/docs/Web/CSS/border-top-left-radius /ja/docs/Web/CSS/box_model /ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model -/ja/docs/Web/CSS/calc /ja/docs/Web/CSS/calc() -/ja/docs/Web/CSS/clamp /ja/docs/Web/CSS/clamp() +/ja/docs/Web/CSS/calc() /ja/docs/Web/CSS/calc +/ja/docs/Web/CSS/clamp() /ja/docs/Web/CSS/clamp /ja/docs/Web/CSS/color-adjust /ja/docs/conflicting/Web/CSS/print-color-adjust -/ja/docs/Web/CSS/conic-gradient /ja/docs/Web/CSS/gradient/conic-gradient() -/ja/docs/Web/CSS/conic-gradient() /ja/docs/Web/CSS/gradient/conic-gradient() -/ja/docs/Web/CSS/counter /ja/docs/Web/CSS/counter() -/ja/docs/Web/CSS/counters /ja/docs/Web/CSS/counters() -/ja/docs/Web/CSS/counters1 /ja/docs/Web/CSS/counters() -/ja/docs/Web/CSS/cross-fade /ja/docs/Web/CSS/cross-fade() -/ja/docs/Web/CSS/element /ja/docs/Web/CSS/element() -/ja/docs/Web/CSS/env /ja/docs/Web/CSS/env() -/ja/docs/Web/CSS/filter-function/blur /ja/docs/Web/CSS/filter-function/blur() -/ja/docs/Web/CSS/filter-function/brightness /ja/docs/Web/CSS/filter-function/brightness() -/ja/docs/Web/CSS/filter-function/contrast /ja/docs/Web/CSS/filter-function/contrast() -/ja/docs/Web/CSS/filter-function/drop-shadow /ja/docs/Web/CSS/filter-function/drop-shadow() -/ja/docs/Web/CSS/filter-function/grayscale /ja/docs/Web/CSS/filter-function/grayscale() -/ja/docs/Web/CSS/filter-function/hue-rotate /ja/docs/Web/CSS/filter-function/hue-rotate() -/ja/docs/Web/CSS/filter-function/invert /ja/docs/Web/CSS/filter-function/invert() -/ja/docs/Web/CSS/filter-function/opacity /ja/docs/Web/CSS/filter-function/opacity() -/ja/docs/Web/CSS/filter-function/saturate /ja/docs/Web/CSS/filter-function/saturate() -/ja/docs/Web/CSS/filter-function/sepia /ja/docs/Web/CSS/filter-function/sepia() +/ja/docs/Web/CSS/conic-gradient /ja/docs/Web/CSS/gradient/conic-gradient +/ja/docs/Web/CSS/conic-gradient() /ja/docs/Web/CSS/gradient/conic-gradient +/ja/docs/Web/CSS/counter() /ja/docs/Web/CSS/counter +/ja/docs/Web/CSS/counters() /ja/docs/Web/CSS/counters +/ja/docs/Web/CSS/counters1 /ja/docs/Web/CSS/counters +/ja/docs/Web/CSS/cross-fade() /ja/docs/Web/CSS/cross-fade +/ja/docs/Web/CSS/element() /ja/docs/Web/CSS/element +/ja/docs/Web/CSS/env() /ja/docs/Web/CSS/env +/ja/docs/Web/CSS/filter-function/blur() /ja/docs/Web/CSS/filter-function/blur +/ja/docs/Web/CSS/filter-function/brightness() /ja/docs/Web/CSS/filter-function/brightness +/ja/docs/Web/CSS/filter-function/contrast() /ja/docs/Web/CSS/filter-function/contrast +/ja/docs/Web/CSS/filter-function/drop-shadow() /ja/docs/Web/CSS/filter-function/drop-shadow +/ja/docs/Web/CSS/filter-function/grayscale() /ja/docs/Web/CSS/filter-function/grayscale +/ja/docs/Web/CSS/filter-function/hue-rotate() /ja/docs/Web/CSS/filter-function/hue-rotate +/ja/docs/Web/CSS/filter-function/invert() /ja/docs/Web/CSS/filter-function/invert +/ja/docs/Web/CSS/filter-function/opacity() /ja/docs/Web/CSS/filter-function/opacity +/ja/docs/Web/CSS/filter-function/saturate() /ja/docs/Web/CSS/filter-function/saturate +/ja/docs/Web/CSS/filter-function/sepia() /ja/docs/Web/CSS/filter-function/sepia +/ja/docs/Web/CSS/fit-content() /ja/docs/Web/CSS/fit-content_function +/ja/docs/Web/CSS/gradient/conic-gradient() /ja/docs/Web/CSS/gradient/conic-gradient +/ja/docs/Web/CSS/gradient/linear-gradient() /ja/docs/Web/CSS/gradient/linear-gradient +/ja/docs/Web/CSS/gradient/radial-gradient() /ja/docs/Web/CSS/gradient/radial-gradient +/ja/docs/Web/CSS/gradient/repeating-conic-gradient() /ja/docs/Web/CSS/gradient/repeating-conic-gradient +/ja/docs/Web/CSS/gradient/repeating-linear-gradient() /ja/docs/Web/CSS/gradient/repeating-linear-gradient +/ja/docs/Web/CSS/gradient/repeating-radial-gradient() /ja/docs/Web/CSS/gradient/repeating-radial-gradient /ja/docs/Web/CSS/grid-column-gap /ja/docs/Web/CSS/column-gap /ja/docs/Web/CSS/grid-gap /ja/docs/Web/CSS/gap /ja/docs/Web/CSS/grid-row-gap /ja/docs/Web/CSS/row-gap -/ja/docs/Web/CSS/image-set /ja/docs/Web/CSS/image/image-set() -/ja/docs/Web/CSS/image-set() /ja/docs/Web/CSS/image/image-set() -/ja/docs/Web/CSS/linear-gradient /ja/docs/Web/CSS/gradient/linear-gradient() -/ja/docs/Web/CSS/linear-gradient() /ja/docs/Web/CSS/gradient/linear-gradient() +/ja/docs/Web/CSS/image-set /ja/docs/Web/CSS/image/image-set +/ja/docs/Web/CSS/image-set() /ja/docs/Web/CSS/image/image-set +/ja/docs/Web/CSS/image/image() /ja/docs/Web/CSS/image/image +/ja/docs/Web/CSS/image/image-set() /ja/docs/Web/CSS/image/image-set +/ja/docs/Web/CSS/image/paint() /ja/docs/Web/CSS/image/paint +/ja/docs/Web/CSS/linear-gradient /ja/docs/Web/CSS/gradient/linear-gradient +/ja/docs/Web/CSS/linear-gradient() /ja/docs/Web/CSS/gradient/linear-gradient /ja/docs/Web/CSS/margin-new /ja/docs/Web/CSS/margin /ja/docs/Web/CSS/margin_collapsing /ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing -/ja/docs/Web/CSS/max /ja/docs/Web/CSS/max() -/ja/docs/Web/CSS/min /ja/docs/Web/CSS/min() -/ja/docs/Web/CSS/minmax /ja/docs/Web/CSS/minmax() +/ja/docs/Web/CSS/max() /ja/docs/Web/CSS/max +/ja/docs/Web/CSS/min() /ja/docs/Web/CSS/min +/ja/docs/Web/CSS/minmax() /ja/docs/Web/CSS/minmax /ja/docs/Web/CSS/normal /ja/docs/Web/CSS/font-variant /ja/docs/Web/CSS/offset-block-end /ja/docs/Web/CSS/inset-block-end /ja/docs/Web/CSS/offset-block-start /ja/docs/Web/CSS/inset-block-start /ja/docs/Web/CSS/offset-inline-end /ja/docs/Web/CSS/inset-inline-end /ja/docs/Web/CSS/offset-inline-start /ja/docs/Web/CSS/inset-inline-start -/ja/docs/Web/CSS/paint /ja/docs/Web/CSS/image/paint() -/ja/docs/Web/CSS/paint() /ja/docs/Web/CSS/image/paint() -/ja/docs/Web/CSS/radial-gradient /ja/docs/Web/CSS/gradient/radial-gradient() -/ja/docs/Web/CSS/radial-gradient() /ja/docs/Web/CSS/gradient/radial-gradient() -/ja/docs/Web/CSS/repeat /ja/docs/Web/CSS/repeat() -/ja/docs/Web/CSS/repeating-linear-gradient /ja/docs/Web/CSS/gradient/repeating-linear-gradient() -/ja/docs/Web/CSS/repeating-linear-gradient() /ja/docs/Web/CSS/gradient/repeating-linear-gradient() -/ja/docs/Web/CSS/repeating-radial-gradient /ja/docs/Web/CSS/gradient/repeating-radial-gradient() -/ja/docs/Web/CSS/repeating-radial-gradient() /ja/docs/Web/CSS/gradient/repeating-radial-gradient() +/ja/docs/Web/CSS/paint /ja/docs/Web/CSS/image/paint +/ja/docs/Web/CSS/paint() /ja/docs/Web/CSS/image/paint +/ja/docs/Web/CSS/radial-gradient /ja/docs/Web/CSS/gradient/radial-gradient +/ja/docs/Web/CSS/radial-gradient() /ja/docs/Web/CSS/gradient/radial-gradient +/ja/docs/Web/CSS/repeat() /ja/docs/Web/CSS/repeat +/ja/docs/Web/CSS/repeating-linear-gradient /ja/docs/Web/CSS/gradient/repeating-linear-gradient +/ja/docs/Web/CSS/repeating-linear-gradient() /ja/docs/Web/CSS/gradient/repeating-linear-gradient +/ja/docs/Web/CSS/repeating-radial-gradient /ja/docs/Web/CSS/gradient/repeating-radial-gradient +/ja/docs/Web/CSS/repeating-radial-gradient() /ja/docs/Web/CSS/gradient/repeating-radial-gradient /ja/docs/Web/CSS/single-transition-timing-function /ja/docs/Web/CSS/easing-function +/ja/docs/Web/CSS/symbols() /ja/docs/Web/CSS/symbols /ja/docs/Web/CSS/timing-function /ja/docs/Web/CSS/easing-function -/ja/docs/Web/CSS/transform-function/matrix /ja/docs/Web/CSS/transform-function/matrix() -/ja/docs/Web/CSS/transform-function/matrix3d /ja/docs/Web/CSS/transform-function/matrix3d() -/ja/docs/Web/CSS/transform-function/perspective /ja/docs/Web/CSS/transform-function/perspective() -/ja/docs/Web/CSS/transform-function/rotate /ja/docs/Web/CSS/transform-function/rotate() -/ja/docs/Web/CSS/transform-function/rotate3d /ja/docs/Web/CSS/transform-function/rotate3d() -/ja/docs/Web/CSS/transform-function/rotateX /ja/docs/Web/CSS/transform-function/rotateX() -/ja/docs/Web/CSS/transform-function/rotateY /ja/docs/Web/CSS/transform-function/rotateY() -/ja/docs/Web/CSS/transform-function/rotateZ /ja/docs/Web/CSS/transform-function/rotateZ() -/ja/docs/Web/CSS/transform-function/scale /ja/docs/Web/CSS/transform-function/scale() -/ja/docs/Web/CSS/transform-function/scaleX /ja/docs/Web/CSS/transform-function/scaleX() -/ja/docs/Web/CSS/transform-function/scaleY /ja/docs/Web/CSS/transform-function/scaleY() -/ja/docs/Web/CSS/transform-function/skew /ja/docs/Web/CSS/transform-function/skew() -/ja/docs/Web/CSS/transform-function/skewX /ja/docs/Web/CSS/transform-function/skewX() -/ja/docs/Web/CSS/transform-function/skewY /ja/docs/Web/CSS/transform-function/skewY() -/ja/docs/Web/CSS/transform-function/translate /ja/docs/Web/CSS/transform-function/translate() -/ja/docs/Web/CSS/transform-function/translate3d /ja/docs/Web/CSS/transform-function/translate3d() -/ja/docs/Web/CSS/transform-function/translateX /ja/docs/Web/CSS/transform-function/translateX() -/ja/docs/Web/CSS/transform-function/translateY /ja/docs/Web/CSS/transform-function/translateY() -/ja/docs/Web/CSS/transform-function/translateZ /ja/docs/Web/CSS/transform-function/translateZ() -/ja/docs/Web/CSS/uri /ja/docs/Web/CSS/url() -/ja/docs/Web/CSS/url /ja/docs/Web/CSS/url() +/ja/docs/Web/CSS/transform-function/matrix() /ja/docs/Web/CSS/transform-function/matrix +/ja/docs/Web/CSS/transform-function/matrix3d() /ja/docs/Web/CSS/transform-function/matrix3d +/ja/docs/Web/CSS/transform-function/perspective() /ja/docs/Web/CSS/transform-function/perspective +/ja/docs/Web/CSS/transform-function/rotate() /ja/docs/Web/CSS/transform-function/rotate +/ja/docs/Web/CSS/transform-function/rotate3d() /ja/docs/Web/CSS/transform-function/rotate3d +/ja/docs/Web/CSS/transform-function/rotateX() /ja/docs/Web/CSS/transform-function/rotateX +/ja/docs/Web/CSS/transform-function/rotateY() /ja/docs/Web/CSS/transform-function/rotateY +/ja/docs/Web/CSS/transform-function/rotateZ() /ja/docs/Web/CSS/transform-function/rotateZ +/ja/docs/Web/CSS/transform-function/scale() /ja/docs/Web/CSS/transform-function/scale +/ja/docs/Web/CSS/transform-function/scale3d() /ja/docs/Web/CSS/transform-function/scale3d +/ja/docs/Web/CSS/transform-function/scaleX() /ja/docs/Web/CSS/transform-function/scaleX +/ja/docs/Web/CSS/transform-function/scaleY() /ja/docs/Web/CSS/transform-function/scaleY +/ja/docs/Web/CSS/transform-function/scaleZ() /ja/docs/Web/CSS/transform-function/scaleZ +/ja/docs/Web/CSS/transform-function/skew() /ja/docs/Web/CSS/transform-function/skew +/ja/docs/Web/CSS/transform-function/skewX() /ja/docs/Web/CSS/transform-function/skewX +/ja/docs/Web/CSS/transform-function/skewY /ja/docs/conflicting/Web/CSS/transform-function/skewX +/ja/docs/Web/CSS/transform-function/skewY() /ja/docs/conflicting/Web/CSS/transform-function/skewX +/ja/docs/Web/CSS/transform-function/translate() /ja/docs/Web/CSS/transform-function/translate +/ja/docs/Web/CSS/transform-function/translate3d() /ja/docs/Web/CSS/transform-function/translate3d +/ja/docs/Web/CSS/transform-function/translateX() /ja/docs/Web/CSS/transform-function/translateX +/ja/docs/Web/CSS/transform-function/translateY() /ja/docs/Web/CSS/transform-function/translateY +/ja/docs/Web/CSS/transform-function/translateZ() /ja/docs/Web/CSS/transform-function/translateZ +/ja/docs/Web/CSS/uri /ja/docs/Web/CSS/url +/ja/docs/Web/CSS/url() /ja/docs/Web/CSS/url /ja/docs/Web/CSS/user-ident /ja/docs/Web/CSS/custom-ident -/ja/docs/Web/CSS/var /ja/docs/Web/CSS/var() +/ja/docs/Web/CSS/var() /ja/docs/Web/CSS/var /ja/docs/Web/CSS/visible /ja/docs/Web/CSS/visibility /ja/docs/Web/CSS/word-wrap /ja/docs/Web/CSS/overflow-wrap /ja/docs/Web/CSS/複数の背景 /ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index 3062576ebe..3e3cf59b92 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -29136,7 +29136,7 @@ "Marsf" ] }, - "Web/CSS/attr()": { + "Web/CSS/attr": { "modified": "2020-11-04T08:51:47.501Z", "contributors": [ "chrisdavidmills", @@ -29946,7 +29946,7 @@ "bershanskiy" ] }, - "Web/CSS/calc()": { + "Web/CSS/calc": { "modified": "2020-11-04T09:09:02.280Z", "contributors": [ "chrisdavidmills", @@ -29976,7 +29976,7 @@ "YuichiNukiyama" ] }, - "Web/CSS/clamp()": { + "Web/CSS/clamp": { "modified": "2020-11-05T09:58:37.606Z", "contributors": [ "chrisdavidmills", @@ -30197,7 +30197,7 @@ "kobayashitomoya" ] }, - "Web/CSS/counter()": { + "Web/CSS/counter": { "modified": "2020-11-09T07:18:22.935Z", "contributors": [ "chrisdavidmills", @@ -30230,7 +30230,7 @@ "cmplstofB" ] }, - "Web/CSS/counters()": { + "Web/CSS/counters": { "modified": "2020-11-09T07:19:35.662Z", "contributors": [ "chrisdavidmills", @@ -30238,7 +30238,7 @@ "ethertank" ] }, - "Web/CSS/cross-fade()": { + "Web/CSS/cross-fade": { "modified": "2020-11-09T07:22:45.614Z", "contributors": [ "chrisdavidmills", @@ -30342,7 +30342,7 @@ "mfuji09" ] }, - "Web/CSS/element()": { + "Web/CSS/element": { "modified": "2020-11-10T11:06:13.439Z", "contributors": [ "chrisdavidmills", @@ -30362,7 +30362,7 @@ "sosleepy" ] }, - "Web/CSS/env()": { + "Web/CSS/env": { "modified": "2020-11-10T11:10:10.231Z", "contributors": [ "chrisdavidmills", @@ -30382,35 +30382,35 @@ "mfuji09" ] }, - "Web/CSS/filter-function/blur()": { + "Web/CSS/filter-function/blur": { "modified": "2020-11-05T09:45:39.556Z", "contributors": [ "chrisdavidmills", "mfuji09" ] }, - "Web/CSS/filter-function/brightness()": { + "Web/CSS/filter-function/brightness": { "modified": "2020-11-05T09:57:18.296Z", "contributors": [ "chrisdavidmills", "mfuji09" ] }, - "Web/CSS/filter-function/contrast()": { + "Web/CSS/filter-function/contrast": { "modified": "2020-11-09T07:20:59.133Z", "contributors": [ "chrisdavidmills", "mfuji09" ] }, - "Web/CSS/filter-function/drop-shadow()": { + "Web/CSS/filter-function/drop-shadow": { "modified": "2020-11-10T10:58:41.907Z", "contributors": [ "chrisdavidmills", "mfuji09" ] }, - "Web/CSS/filter-function/grayscale()": { + "Web/CSS/filter-function/grayscale": { "modified": "2020-11-10T11:18:51.925Z", "contributors": [ "chrisdavidmills", @@ -30418,35 +30418,35 @@ "mfuji09" ] }, - "Web/CSS/filter-function/hue-rotate()": { + "Web/CSS/filter-function/hue-rotate": { "modified": "2020-11-16T08:50:53.626Z", "contributors": [ "chrisdavidmills", "mfuji09" ] }, - "Web/CSS/filter-function/invert()": { + "Web/CSS/filter-function/invert": { "modified": "2020-11-16T08:55:36.207Z", "contributors": [ "chrisdavidmills", "mfuji09" ] }, - "Web/CSS/filter-function/opacity()": { + "Web/CSS/filter-function/opacity": { "modified": "2020-11-16T09:07:57.491Z", "contributors": [ "chrisdavidmills", "mfuji09" ] }, - "Web/CSS/filter-function/saturate()": { + "Web/CSS/filter-function/saturate": { "modified": "2020-11-30T10:11:53.056Z", "contributors": [ "chrisdavidmills", "mfuji09" ] }, - "Web/CSS/filter-function/sepia()": { + "Web/CSS/filter-function/sepia": { "modified": "2020-11-30T10:24:34.907Z", "contributors": [ "chrisdavidmills", @@ -30774,14 +30774,14 @@ "sosleepy" ] }, - "Web/CSS/gradient/conic-gradient()": { + "Web/CSS/gradient/conic-gradient": { "modified": "2020-11-05T10:00:21.729Z", "contributors": [ "chrisdavidmills", "mfuji09" ] }, - "Web/CSS/gradient/linear-gradient()": { + "Web/CSS/gradient/linear-gradient": { "modified": "2020-11-16T08:57:22.063Z", "contributors": [ "chrisdavidmills", @@ -30798,7 +30798,7 @@ "FredB" ] }, - "Web/CSS/gradient/radial-gradient()": { + "Web/CSS/gradient/radial-gradient": { "modified": "2020-11-18T14:42:27.892Z", "contributors": [ "chrisdavidmills", @@ -30813,7 +30813,7 @@ "FredB" ] }, - "Web/CSS/gradient/repeating-linear-gradient()": { + "Web/CSS/gradient/repeating-linear-gradient": { "modified": "2020-11-18T14:46:06.699Z", "contributors": [ "chrisdavidmills", @@ -30826,7 +30826,7 @@ "sosleepy" ] }, - "Web/CSS/gradient/repeating-radial-gradient()": { + "Web/CSS/gradient/repeating-radial-gradient": { "modified": "2020-11-18T14:47:38.855Z", "contributors": [ "chrisdavidmills", @@ -30954,14 +30954,14 @@ "Taken" ] }, - "Web/CSS/image/image-set()": { + "Web/CSS/image/image-set": { "modified": "2020-11-16T08:53:38.885Z", "contributors": [ "chrisdavidmills", "mfuji09" ] }, - "Web/CSS/image/paint()": { + "Web/CSS/image/paint": { "modified": "2020-11-16T09:09:19.836Z", "contributors": [ "chrisdavidmills", @@ -31405,7 +31405,7 @@ "mfuji09" ] }, - "Web/CSS/max()": { + "Web/CSS/max": { "modified": "2020-11-16T09:02:50.796Z", "contributors": [ "chrisdavidmills", @@ -31451,7 +31451,7 @@ "ethertank" ] }, - "Web/CSS/min()": { + "Web/CSS/min": { "modified": "2020-11-16T09:04:29.790Z", "contributors": [ "chrisdavidmills", @@ -31498,7 +31498,7 @@ "Daigo" ] }, - "Web/CSS/minmax()": { + "Web/CSS/minmax": { "modified": "2020-11-16T09:06:18.837Z", "contributors": [ "chrisdavidmills", @@ -32012,7 +32012,7 @@ "Marsf" ] }, - "Web/CSS/repeat()": { + "Web/CSS/repeat": { "modified": "2020-11-18T14:44:34.850Z", "contributors": [ "chrisdavidmills", @@ -32595,35 +32595,35 @@ "sosleepy" ] }, - "Web/CSS/transform-function/matrix()": { + "Web/CSS/transform-function/matrix": { "modified": "2020-11-16T08:59:37.252Z", "contributors": [ "chrisdavidmills", "mfuji09" ] }, - "Web/CSS/transform-function/matrix3d()": { + "Web/CSS/transform-function/matrix3d": { "modified": "2020-11-16T09:01:22.452Z", "contributors": [ "chrisdavidmills", "mfuji09" ] }, - "Web/CSS/transform-function/perspective()": { + "Web/CSS/transform-function/perspective": { "modified": "2020-11-16T09:10:41.498Z", "contributors": [ "chrisdavidmills", "mfuji09" ] }, - "Web/CSS/transform-function/rotate()": { + "Web/CSS/transform-function/rotate": { "modified": "2020-11-19T16:05:58.158Z", "contributors": [ "chrisdavidmills", "mfuji09" ] }, - "Web/CSS/transform-function/rotate3d()": { + "Web/CSS/transform-function/rotate3d": { "modified": "2020-11-19T16:07:26.126Z", "contributors": [ "chrisdavidmills", @@ -32631,14 +32631,14 @@ "mfuji09" ] }, - "Web/CSS/transform-function/rotateX()": { + "Web/CSS/transform-function/rotateX": { "modified": "2020-11-19T16:09:11.463Z", "contributors": [ "chrisdavidmills", "mfuji09" ] }, - "Web/CSS/transform-function/rotateY()": { + "Web/CSS/transform-function/rotateY": { "modified": "2020-11-19T16:10:06.903Z", "contributors": [ "chrisdavidmills", @@ -32646,14 +32646,14 @@ "FumioNonaka" ] }, - "Web/CSS/transform-function/rotateZ()": { + "Web/CSS/transform-function/rotateZ": { "modified": "2020-11-30T10:07:43.066Z", "contributors": [ "chrisdavidmills", "mfuji09" ] }, - "Web/CSS/transform-function/scale()": { + "Web/CSS/transform-function/scale": { "modified": "2020-11-30T10:15:45.837Z", "contributors": [ "chrisdavidmills", @@ -32662,28 +32662,28 @@ "piyo-ko" ] }, - "Web/CSS/transform-function/scaleX()": { + "Web/CSS/transform-function/scaleX": { "modified": "2020-11-30T10:20:41.782Z", "contributors": [ "chrisdavidmills", "koj" ] }, - "Web/CSS/transform-function/scaleY()": { + "Web/CSS/transform-function/scaleY": { "modified": "2020-11-30T10:21:56.287Z", "contributors": [ "chrisdavidmills", "mfuji09" ] }, - "Web/CSS/transform-function/skew()": { + "Web/CSS/transform-function/skew": { "modified": "2020-11-30T10:25:54.744Z", "contributors": [ "chrisdavidmills", "mfuji09" ] }, - "Web/CSS/transform-function/skewX()": { + "Web/CSS/transform-function/skewX": { "modified": "2020-11-30T10:27:20.302Z", "contributors": [ "chrisdavidmills", @@ -32691,36 +32691,28 @@ "inkusu" ] }, - "Web/CSS/transform-function/skewY()": { - "modified": "2020-11-30T10:28:22.488Z", - "contributors": [ - "chrisdavidmills", - "mfuji09", - "inkusu" - ] - }, - "Web/CSS/transform-function/translate()": { + "Web/CSS/transform-function/translate": { "modified": "2020-11-30T10:30:33.470Z", "contributors": [ "chrisdavidmills", "mfuji09" ] }, - "Web/CSS/transform-function/translate3d()": { + "Web/CSS/transform-function/translate3d": { "modified": "2020-11-30T12:58:24.581Z", "contributors": [ "chrisdavidmills", "mfuji09" ] }, - "Web/CSS/transform-function/translateY()": { + "Web/CSS/transform-function/translateY": { "modified": "2020-11-30T13:01:09.056Z", "contributors": [ "chrisdavidmills", "mfuji09" ] }, - "Web/CSS/transform-function/translateZ()": { + "Web/CSS/transform-function/translateZ": { "modified": "2020-11-30T13:03:02.820Z", "contributors": [ "chrisdavidmills", @@ -32835,7 +32827,7 @@ "YuichiNukiyama" ] }, - "Web/CSS/url()": { + "Web/CSS/url": { "modified": "2020-10-15T22:29:36.625Z", "contributors": [ "mfuji09" @@ -32864,7 +32856,7 @@ "0918nobita" ] }, - "Web/CSS/var()": { + "Web/CSS/var": { "modified": "2020-11-04T09:10:31.423Z", "contributors": [ "chrisdavidmills", @@ -48515,6 +48507,14 @@ "mfuji09" ] }, + "conflicting/Web/CSS/transform-function/skewX": { + "modified": "2020-11-30T10:28:22.488Z", + "contributors": [ + "chrisdavidmills", + "mfuji09", + "inkusu" + ] + }, "conflicting/Web/Guide": { "modified": "2020-12-07T13:42:04.312Z", "contributors": [ diff --git a/files/ja/conflicting/web/css/transform-function/skewx/index.md b/files/ja/conflicting/web/css/transform-function/skewx/index.md new file mode 100644 index 0000000000..88d95d65af --- /dev/null +++ b/files/ja/conflicting/web/css/transform-function/skewx/index.md @@ -0,0 +1,178 @@ +--- +title: skewY() +slug: conflicting/Web/CSS/transform-function/skewX +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/skewY() +original_slug: Web/CSS/transform-function/skewY() +browser-compat: css.types.transform-function.skewY +--- +{{CSSRef}} + +**`skewY()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上で垂直方向にゆがめる変換を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 + +{{EmbedInteractiveExample("pages/css/function-skewY.html")}} + +この変換はシアー変形 ({{interwiki('wikipedia', 'せん断写像')}}) で、要素内のそれぞれの点を垂直方向に指定された角度でゆがませます。それぞれの点の縦座標は、指定された角度と原点からの距離に比例した値によって変更されます。よって、原点から遠くなるにしたがって、加えられる値が大きくなります。 + +## 構文 + +```css +skewY(a) +``` + +### 値 + +- `a` + - : {{cssxref("<angle>")}} で、縦座標方向にゆがめるのに使用する角度を表します。 + + + + + + + + + + + + + + + + + + + + + +
ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
+ 1 0 tan + ( + a + ) 1 + + 1 0 0 tan + ( + a + ) 1 0 0 0 1 + + 1 0 0 tan + ( + a + ) 1 0 0 0 1 + + 1 0 0 0 tan + ( + a + ) 1 0 0 0 0 1 0 0 0 0 1 +
[1 tan(a) 0 1 0 0]
+ +

例

+ +### HTML + +```html +
Normal
+
Skewed
+``` + +### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.skewed { + transform: skewY(40deg); + background-color: pink; +} +``` + +### 結果 + +{{EmbedLiveSample("Examples", 200, 200)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/_colon_host()/index.md b/files/ja/web/css/_colon_host()/index.md deleted file mode 100644 index 138003d847..0000000000 --- a/files/ja/web/css/_colon_host()/index.md +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: ':host()' -slug: Web/CSS/:host() -tags: - - ':host()' - - CSS - - Layout - - Pseudo-class - - Reference - - Selector - - Web -browser-compat: css.selectors.hostfunction -translation_of: Web/CSS/:host() ---- -{{CSSRef}} - -**`:host()`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)関数で、その中で使われている CSS を含む[シャドウ DOM](/ja/docs/Web/Web_Components/Using_shadow_DOM) のシャドウホストを選択します（従ってカスタム要素をそのシャドウ DOM 内部から選択できます）。ただし、関数の引数として与えられたセレクターがシャドウホストと一致した場合のみです。 - -この最も明白な使用法は、特定のカスタム要素インスタンスにのみクラス名を付け、関数の引数として関連するクラスセレクターを指定することです。特定の祖先の内部にあるカスタム要素のインスタンスのみを選択するために、子孫セレクター式でこれを使用することはできません。それは {{CSSxRef(":host-context()")}} の仕事です。 - -> **Note:** これは、シャドウ DOM の外部で使用されても効果がありません。 - -```css -/* セレクターの引数に一致する場合のみ、 - シャドウルートのホストを選択 */ -:host(.special-custom-element) { - font-weight: bold; -} -``` - -## 構文 - -{{CSSSyntax}} - -## 例 - -### シャドウホストの選択的なスタイル付け - -以下のスニペットは、 [host-selectors example](https://github.com/mdn/web-components-examples/tree/master/host-selectors) ([ライブでも確認](https://mdn.github.io/web-components-examples/host-selectors/)) から引用したものです。 - -この例では、テキストを囲むことができるシンプルなカスタム要素 `` を用意しています。 - -```html -

Host selectors example

-``` - -要素のコンストラクター内で `style` と `span` の各要素を作成し、 `span` にカスタム要素の内容を入れ、 `style` 要素にいくつかの 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; }'; -``` - -ルール `:host(.footer) { color : red; }` は、文書内の `` 要素（この例ではシャドウホスト）のインスタンスで `footer` クラスがあるものにスタイルを設定します。このルールを使って {{htmlelement("footer")}} 内の要素のインスタンスに特殊な色を設定しています。 - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- [ウェブコンポーネント](/ja/docs/Web/Web_Components) -- {{CSSxRef(":host")}} -- {{CSSxRef(":host-context()")}} diff --git a/files/ja/web/css/_colon_host_function/index.md b/files/ja/web/css/_colon_host_function/index.md new file mode 100644 index 0000000000..66823eb0b1 --- /dev/null +++ b/files/ja/web/css/_colon_host_function/index.md @@ -0,0 +1,81 @@ +--- +title: ':host()' +slug: Web/CSS/:host_function +tags: + - ':host()' + - CSS + - Layout + - Pseudo-class + - Reference + - Selector + - Web +translation_of: Web/CSS/:host() +original_slug: Web/CSS/:host() +browser-compat: css.selectors.hostfunction +--- +{{CSSRef}} + +**`:host()`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)関数で、その中で使われている CSS を含む[シャドウ DOM](/ja/docs/Web/Web_Components/Using_shadow_DOM) のシャドウホストを選択します（従ってカスタム要素をそのシャドウ DOM 内部から選択できます）。ただし、関数の引数として与えられたセレクターがシャドウホストと一致した場合のみです。 + +この最も明白な使用法は、特定のカスタム要素インスタンスにのみクラス名を付け、関数の引数として関連するクラスセレクターを指定することです。特定の祖先の内部にあるカスタム要素のインスタンスのみを選択するために、子孫セレクター式でこれを使用することはできません。それは {{CSSxRef(":host-context()")}} の仕事です。 + +> **Note:** これは、シャドウ DOM の外部で使用されても効果がありません。 + +```css +/* セレクターの引数に一致する場合のみ、 + シャドウルートのホストを選択 */ +:host(.special-custom-element) { + font-weight: bold; +} +``` + +## 構文 + +{{CSSSyntax}} + +## 例 + +### シャドウホストの選択的なスタイル付け + +以下のスニペットは、 [host-selectors example](https://github.com/mdn/web-components-examples/tree/master/host-selectors) ([ライブでも確認](https://mdn.github.io/web-components-examples/host-selectors/)) から引用したものです。 + +この例では、テキストを囲むことができるシンプルなカスタム要素 `` を用意しています。 + +```html +

Host selectors example

+``` + +要素のコンストラクター内で `style` と `span` の各要素を作成し、 `span` にカスタム要素の内容を入れ、 `style` 要素にいくつかの 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; }'; +``` + +ルール `:host(.footer) { color : red; }` は、文書内の `` 要素（この例ではシャドウホスト）のインスタンスで `footer` クラスがあるものにスタイルを設定します。このルールを使って {{htmlelement("footer")}} 内の要素のインスタンスに特殊な色を設定しています。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ウェブコンポーネント](/ja/docs/Web/Web_Components) +- {{CSSxRef(":host")}} +- {{CSSxRef(":host-context()")}} diff --git a/files/ja/web/css/attr()/index.md b/files/ja/web/css/attr()/index.md deleted file mode 100644 index e9f97a85f2..0000000000 --- a/files/ja/web/css/attr()/index.md +++ /dev/null @@ -1,220 +0,0 @@ ---- -title: attr() -slug: Web/CSS/attr() -tags: - - CSS - - CSS 関数 - - 関数 - - レイアウト - - リファレンス - - ウェブ - - attr -browser-compat: css.types.attr -translation_of: Web/CSS/attr() ---- -{{CSSRef}} - -> **Note:** `attr()` 関数はどの CSS プロパティでも使用することができますが、 {{CSSxRef("content")}} 以外のプロパティでの対応は実験的であり、型や単位の引数の対応はまちまちです。 - -**`attr()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、選択された要素の属性の値を受け取り、スタイルシートの中で使うために使用されます。[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)で使用することもでき、その場合は擬似要素を作る元になった要素の属性値が返されます。 - -```css -/* 単純な使用法 */ -attr(data-count); -attr(title); - -/* 型付き */ -attr(src url); -attr(data-count number); -attr(data-width px); - -/* 代替値付き */ -attr(data-count number, 0); -attr(src url, ""); -attr(data-width px, inherit); -attr(data-something, "default"); -``` - -## 構文 - -### 値 - -- `attribute-name` - - : CSS で参照する、 HTML 要素の属性名です。 -- `` {{Experimental_Inline}} - - - : 属性値の型またはその単位を示すキーワードです。 HTML では暗黙に単位を持つ属性があります。属性に対して無効な値を `` で与えると、 `attr()` 式も無効になります。省略すると既定値の `string` になります。有効な値は以下の通りです。 - - - `string` - - - : 属性値は CSS {{CSSxRef("<string>")}} として扱われます。再解析はされず、特に文字は CSS エスケープで他の文字に変換されることなく、そのまま使用されます。 - - 既定値は空文字列です。 - - - `color` {{Experimental_Inline}} - - - : 属性値はハッシュ (3 値または 6 値のハッシュ) またはキーワードとして解析されます。妥当な CSS の {{CSSxRef("<string>")}} 値でなければなりません。前後の空白は除去されます。 - - 既定値は `currentcolor` です。 - - - `url` {{Experimental_Inline}} - - - : 属性値は、 CSS の `url()` 関数の中で使用される文字列として解析されます。 - 相対 URL は、スタイルシートからの相対ではなく、元の文書からの相対で解決されます。 - 前後の空白は除去されます。 - - 既定値は、一般的なエラーの状況で存在しない文書を指す `about:invalid` の URL です。 - - - `integer` {{Experimental_Inline}} - - - : 属性値は CSS の {{CSSxRef("<integer>")}} として解析されます。妥当ではない場合、つまり整数ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 - 前後の空白は除去されます。 - - 既定値は `0`、または `0` が妥当な値ではないプロパティでは、プロパティの最小値です。 - - - `number` {{Experimental_Inline}} - - - : 属性値は CSS の {{CSSxRef("<number>")}} として解析されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 - 前後の空白は除去されます。 - - 既定値は `0`、または `0` が妥当な値ではないプロパティでは、プロパティの最小値です。 - - - `length` {{Experimental_Inline}} - - - : 属性値は CSS の {{CSSxRef("<length>")}} の距離として単位を含んで (`12.5em` など) 解釈されます。妥当ではない場合、つまり長さではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 - 指定された値が相対的な長さの場合は、 `attr()` は絶対的な値に変換して計算します。
- 前後の空白は除去されます。 - - 既定値は `0`、または `0` が妥当な値ではないプロパティでは、プロパティの最小値です。 - - - `em`, `ex`, `px`, `rem`, `vw`, `vh`, `vmin`, `vmax`, `mm`, `cm`, `in`, `pt`, or `pc` {{Experimental_Inline}} - - - : 属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (`12.5` など) で解析され、特定の単位を付けた {{CSSxRef("<length>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 - 指定された値が相対的な長さの場合は、 `attr()` は絶対的な値に変換して計算します。
- 前後の空白は除去されます。 - - 既定値は `0`、または `0` が妥当な値ではないプロパティでは、プロパティの最小値です。 - - - `angle` {{Experimental_Inline}} - - - : 属性値は CSS の {{CSSxRef("<angle>")}} の大きさとして単位を含んで (`30.5deg` など) 解釈されます。妥当ではない場合、つまり角度ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 - 前後の空白は除去されます。 - - 既定値は `0deg`、または `0deg` が妥当な値ではないプロパティでは、プロパティの最小値です。 - - - `deg`, `grad`, `rad` {{Experimental_Inline}} - - - : 属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (`12.5` など) で解析され、特定の単位を付けた {{CSSxRef("<angle>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 - 前後の空白は除去されます。 - - 既定値は `0deg`、または `0deg` が妥当な値ではないプロパティでは、プロパティの最小値です。 - - - `time` {{Experimental_Inline}} - - - : 属性値は CSS の {{CSSxRef("<time>")}} の大きさとして単位を含んで (`30.5ms` など) 解釈されます。妥当ではない場合、つまり時間ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 - 前後の空白は除去されます。 - - 既定値は `0s`、または `0s` が妥当な値ではないプロパティでは、プロパティの最小値です。 - - - `s`, `ms` {{Experimental_Inline}} - - - : 属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (`12.5` など) で解析され、特定の単位を付けた {{CSSxRef("<time>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 - 前後の空白は除去されます。 - - 既定値は `0s`、または `0s` が妥当な値ではないプロパティでは、プロパティの最小値です。 - - - `frequency` {{Experimental_Inline}} - - - : 属性値は CSS の {{CSSxRef("<frequency>")}} の大きさとして単位を含んで (`30.5ms` など) 解釈されます。妥当ではない場合、つまり周波数ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 - - 既定値は `0Hz`、または `0Hz` が妥当な値ではないプロパティでは、プロパティの最小値です。 - - - `Hz`, `kHz` {{Experimental_Inline}} - - - : 属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (`12.5` など) で解析され、特定の単位を付けた {{CSSxRef("<frequency>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 - 前後の空白は除去されます。 - - 既定値は `0Hz`、または `0Hz` が妥当な値ではないプロパティでは、プロパティの最小値です。 - - - `%` {{Experimental_Inline}} - - - : 属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (`12.5` など) で解析され、 {{CSSxRef("<percentage>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 - 指定された値が長さの場合は、 `attr()` は絶対的な値に変換して計算します。 - 前後の空白は除去されます。 - - 既定値は `0%`、または `0%` が妥当な値ではないプロパティでは、プロパティの最小値です。 - -- `` {{Experimental_Inline}} - - : 関連する属性が見つからないか、無効値を含むときに使われる値です。設定されていない場合は、 CSS は各 `` で定義された既定値を使います。 - -### 形式文法 - -{{CSSSyntax}} - -## 例 - -

content プロパティ

- -#### HTML - -```html -

world

-``` - -#### CSS - -```css -[data-foo]::before { - content: attr(data-foo) " "; -} -``` - -#### 結果 - -{{EmbedLiveSample("content_property", "100%", 50)}} - -

<color> 値

- -{{SeeCompatTable}} - -#### HTML - -```html -
background expected to be red if your browser does not support advanced usage of attr()
-``` - -#### CSS - -```css hidden -.background { - height: 100vh; -} -``` - -```css -.background { - background-color: red; -} - -.background[data-background] { - background-color: attr(data-background color, red); -} -``` - -#### 結果 - -{{EmbedLiveSample("color_value", "100%", 50)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- [属性セレクター](/ja/docs/Web/CSS/Attribute_selectors) -- [HTML `data-*` 属性](/ja/docs/Web/HTML/Global_attributes/data-*) -- [SVG `data-*` 属性](/ja/docs/Web/SVG/Attribute/data-*) diff --git a/files/ja/web/css/attr/index.md b/files/ja/web/css/attr/index.md new file mode 100644 index 0000000000..890c73f11e --- /dev/null +++ b/files/ja/web/css/attr/index.md @@ -0,0 +1,221 @@ +--- +title: attr() +slug: Web/CSS/attr +tags: + - CSS + - CSS 関数 + - 関数 + - レイアウト + - リファレンス + - ウェブ + - attr +translation_of: Web/CSS/attr() +original_slug: Web/CSS/attr() +browser-compat: css.types.attr +--- +{{CSSRef}} + +> **Note:** `attr()` 関数はどの CSS プロパティでも使用することができますが、 {{CSSxRef("content")}} 以外のプロパティでの対応は実験的であり、型や単位の引数の対応はまちまちです。 + +**`attr()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、選択された要素の属性の値を受け取り、スタイルシートの中で使うために使用されます。[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)で使用することもでき、その場合は擬似要素を作る元になった要素の属性値が返されます。 + +```css +/* 単純な使用法 */ +attr(data-count); +attr(title); + +/* 型付き */ +attr(src url); +attr(data-count number); +attr(data-width px); + +/* 代替値付き */ +attr(data-count number, 0); +attr(src url, ""); +attr(data-width px, inherit); +attr(data-something, "default"); +``` + +## 構文 + +### 値 + +- `attribute-name` + - : CSS で参照する、 HTML 要素の属性名です。 +- `` {{Experimental_Inline}} + + - : 属性値の型またはその単位を示すキーワードです。 HTML では暗黙に単位を持つ属性があります。属性に対して無効な値を `` で与えると、 `attr()` 式も無効になります。省略すると既定値の `string` になります。有効な値は以下の通りです。 + + - `string` + + - : 属性値は CSS {{CSSxRef("<string>")}} として扱われます。再解析はされず、特に文字は CSS エスケープで他の文字に変換されることなく、そのまま使用されます。 + + 既定値は空文字列です。 + + - `color` {{Experimental_Inline}} + + - : 属性値はハッシュ (3 値または 6 値のハッシュ) またはキーワードとして解析されます。妥当な CSS の {{CSSxRef("<string>")}} 値でなければなりません。前後の空白は除去されます。 + + 既定値は `currentcolor` です。 + + - `url` {{Experimental_Inline}} + + - : 属性値は、 CSS の `url()` 関数の中で使用される文字列として解析されます。 + 相対 URL は、スタイルシートからの相対ではなく、元の文書からの相対で解決されます。 + 前後の空白は除去されます。 + + 既定値は、一般的なエラーの状況で存在しない文書を指す `about:invalid` の URL です。 + + - `integer` {{Experimental_Inline}} + + - : 属性値は CSS の {{CSSxRef("<integer>")}} として解析されます。妥当ではない場合、つまり整数ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 + 前後の空白は除去されます。 + + 既定値は `0`、または `0` が妥当な値ではないプロパティでは、プロパティの最小値です。 + + - `number` {{Experimental_Inline}} + + - : 属性値は CSS の {{CSSxRef("<number>")}} として解析されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 + 前後の空白は除去されます。 + + 既定値は `0`、または `0` が妥当な値ではないプロパティでは、プロパティの最小値です。 + + - `length` {{Experimental_Inline}} + + - : 属性値は CSS の {{CSSxRef("<length>")}} の距離として単位を含んで (`12.5em` など) 解釈されます。妥当ではない場合、つまり長さではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 + 指定された値が相対的な長さの場合は、 `attr()` は絶対的な値に変換して計算します。
+ 前後の空白は除去されます。 + + 既定値は `0`、または `0` が妥当な値ではないプロパティでは、プロパティの最小値です。 + + - `em`, `ex`, `px`, `rem`, `vw`, `vh`, `vmin`, `vmax`, `mm`, `cm`, `in`, `pt`, or `pc` {{Experimental_Inline}} + + - : 属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (`12.5` など) で解析され、特定の単位を付けた {{CSSxRef("<length>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 + 指定された値が相対的な長さの場合は、 `attr()` は絶対的な値に変換して計算します。
+ 前後の空白は除去されます。 + + 既定値は `0`、または `0` が妥当な値ではないプロパティでは、プロパティの最小値です。 + + - `angle` {{Experimental_Inline}} + + - : 属性値は CSS の {{CSSxRef("<angle>")}} の大きさとして単位を含んで (`30.5deg` など) 解釈されます。妥当ではない場合、つまり角度ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 + 前後の空白は除去されます。 + + 既定値は `0deg`、または `0deg` が妥当な値ではないプロパティでは、プロパティの最小値です。 + + - `deg`, `grad`, `rad` {{Experimental_Inline}} + + - : 属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (`12.5` など) で解析され、特定の単位を付けた {{CSSxRef("<angle>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 + 前後の空白は除去されます。 + + 既定値は `0deg`、または `0deg` が妥当な値ではないプロパティでは、プロパティの最小値です。 + + - `time` {{Experimental_Inline}} + + - : 属性値は CSS の {{CSSxRef("<time>")}} の大きさとして単位を含んで (`30.5ms` など) 解釈されます。妥当ではない場合、つまり時間ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 + 前後の空白は除去されます。 + + 既定値は `0s`、または `0s` が妥当な値ではないプロパティでは、プロパティの最小値です。 + + - `s`, `ms` {{Experimental_Inline}} + + - : 属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (`12.5` など) で解析され、特定の単位を付けた {{CSSxRef("<time>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 + 前後の空白は除去されます。 + + 既定値は `0s`、または `0s` が妥当な値ではないプロパティでは、プロパティの最小値です。 + + - `frequency` {{Experimental_Inline}} + + - : 属性値は CSS の {{CSSxRef("<frequency>")}} の大きさとして単位を含んで (`30.5ms` など) 解釈されます。妥当ではない場合、つまり周波数ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 + + 既定値は `0Hz`、または `0Hz` が妥当な値ではないプロパティでは、プロパティの最小値です。 + + - `Hz`, `kHz` {{Experimental_Inline}} + + - : 属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (`12.5` など) で解析され、特定の単位を付けた {{CSSxRef("<frequency>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 + 前後の空白は除去されます。 + + 既定値は `0Hz`、または `0Hz` が妥当な値ではないプロパティでは、プロパティの最小値です。 + + - `%` {{Experimental_Inline}} + + - : 属性値は CSS の {{CSSxRef("<number>")}}、つまり単位なし (`12.5` など) で解析され、 {{CSSxRef("<percentage>")}} として解釈されます。妥当ではない場合、つまり数値ではない場合や CSS プロパティが受け入れ可能な範囲を超えていた場合は、既定値が使用されます。 + 指定された値が長さの場合は、 `attr()` は絶対的な値に変換して計算します。 + 前後の空白は除去されます。 + + 既定値は `0%`、または `0%` が妥当な値ではないプロパティでは、プロパティの最小値です。 + +- `` {{Experimental_Inline}} + - : 関連する属性が見つからないか、無効値を含むときに使われる値です。設定されていない場合は、 CSS は各 `` で定義された既定値を使います。 + +### 形式文法 + +{{CSSSyntax}} + +## 例 + +

content プロパティ

+ +#### HTML + +```html +

world

+``` + +#### CSS + +```css +[data-foo]::before { + content: attr(data-foo) " "; +} +``` + +#### 結果 + +{{EmbedLiveSample("content_property", "100%", 50)}} + +

<color> 値

+ +{{SeeCompatTable}} + +#### HTML + +```html +
background expected to be red if your browser does not support advanced usage of attr()
+``` + +#### CSS + +```css hidden +.background { + height: 100vh; +} +``` + +```css +.background { + background-color: red; +} + +.background[data-background] { + background-color: attr(data-background color, red); +} +``` + +#### 結果 + +{{EmbedLiveSample("color_value", "100%", 50)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [属性セレクター](/ja/docs/Web/CSS/Attribute_selectors) +- [HTML `data-*` 属性](/ja/docs/Web/HTML/Global_attributes/data-*) +- [SVG `data-*` 属性](/ja/docs/Web/SVG/Attribute/data-*) diff --git a/files/ja/web/css/basic-shape/circle()/index.md b/files/ja/web/css/basic-shape/circle()/index.md deleted file mode 100644 index 5c1b236415..0000000000 --- a/files/ja/web/css/basic-shape/circle()/index.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: circle() -slug: Web/CSS/basic-shape/circle() -tags: - - CSS - - CSS データ型 - - CSS シェイプ - - circle - - CSS 関数 - - データ型 - - Reference -browser-compat: css.types.basic-shape.circle -translation_of: Web/CSS/basic-shape/circle() ---- -{{CSSRef}} - -**`circle()`** は [CSS](/ja/docs/Web/CSS) の関数で、{{cssxref("<basic-shape>")}} [データ型](/ja/docs/Web/CSS/CSS_Types)の一つです。 - -## 構文 - -```css -shape-outside: circle(50%); -clip-path: circle(6rem at 12rem 8rem); -``` - -### 値 - -- `` - - - : {{cssxref("length")}}、{{cssxref("percentage")}}、または `closest-side` および `farthest-side` の値の何れかです。 - - - `closest-side` - - : シェイプの中心から参照ボックスの最も近い辺までの長さを使用します。円の場合は、あらゆる軸で最も近い辺となります。 - - `farthest-side` - - : シェイプの中心から参照ボックスの最も遠い辺までの長さを使用します。円の場合は、あらゆる軸で最も近い辺となります。 - -- `` - - : 円の中心を移動します。{{cssxref("length")}}、{{cssxref("percentage")}}、または `left` のような値の何れかです。 - -## 例 - -### 基本的な円 - -下の例では、{{cssxref("shape-outside")}} プロパティの値が `circle(50%)` となっており、浮動要素に円を定義して、テキストが回り込むようになっています。 - -{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- このデータ型を使用するプロパティ: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} -- [基本シェイプのガイド](/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes) diff --git a/files/ja/web/css/basic-shape/circle/index.md b/files/ja/web/css/basic-shape/circle/index.md new file mode 100644 index 0000000000..ac8ecca800 --- /dev/null +++ b/files/ja/web/css/basic-shape/circle/index.md @@ -0,0 +1,60 @@ +--- +title: circle() +slug: Web/CSS/basic-shape/circle +tags: + - CSS + - CSS データ型 + - CSS シェイプ + - circle + - CSS 関数 + - データ型 + - Reference +translation_of: Web/CSS/basic-shape/circle() +original_slug: Web/CSS/basic-shape/circle() +browser-compat: css.types.basic-shape.circle +--- +{{CSSRef}} + +**`circle()`** は [CSS](/ja/docs/Web/CSS) の関数で、{{cssxref("<basic-shape>")}} [データ型](/ja/docs/Web/CSS/CSS_Types)の一つです。 + +## 構文 + +```css +shape-outside: circle(50%); +clip-path: circle(6rem at 12rem 8rem); +``` + +### 値 + +- `` + + - : {{cssxref("length")}}、{{cssxref("percentage")}}、または `closest-side` および `farthest-side` の値の何れかです。 + + - `closest-side` + - : シェイプの中心から参照ボックスの最も近い辺までの長さを使用します。円の場合は、あらゆる軸で最も近い辺となります。 + - `farthest-side` + - : シェイプの中心から参照ボックスの最も遠い辺までの長さを使用します。円の場合は、あらゆる軸で最も近い辺となります。 + +- `` + - : 円の中心を移動します。{{cssxref("length")}}、{{cssxref("percentage")}}、または `left` のような値の何れかです。 + +## 例 + +### 基本的な円 + +下の例では、{{cssxref("shape-outside")}} プロパティの値が `circle(50%)` となっており、浮動要素に円を定義して、テキストが回り込むようになっています。 + +{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このデータ型を使用するプロパティ: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} +- [基本シェイプのガイド](/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes) diff --git a/files/ja/web/css/basic-shape/ellipse()/index.md b/files/ja/web/css/basic-shape/ellipse()/index.md deleted file mode 100644 index 54b5f5b6b4..0000000000 --- a/files/ja/web/css/basic-shape/ellipse()/index.md +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: ellipse() -slug: Web/CSS/basic-shape/ellipse() -tags: - - CSS - - CSS データ型 - - CSS シェイプ - - ellipse - - CSS 関数 - - データ型 - - Reference -browser-compat: css.types.basic-shape.ellipse -translation_of: Web/CSS/basic-shape/ellipse() ---- -{{CSSRef}} - -**`ellipse()`** は [CSS](/ja/docs/Web/CSS) の関数で、{{cssxref("<basic-shape>")}} [データ型](/ja/docs/Web/CSS/CSS_Types)の一つです。 - -## 構文 - -```css -shape-outside: ellipse(40% 50% at left); -shape-outside: ellipse(closest-side farthest-side at 30%); -``` - -楕円は基本的に円を潰したものなので、`ellipse()` は、2 つの半径 x と y を指定しなければならないことを除けば、 {{cssxref("basic-shape/circle()","circle()")}} とよく似た方法で動作します。 - -### 値 - -- `` - - - : 2 つの半径で、x および y をその順で指定します。{{cssxref("length")}}、{{cssxref("percentage")}}、または `closest-side` および `farthest-side` の値の何れかです。 - - - `closest-side` - - : シェイプの中心から参照ボックスの最も近い辺までの長さを使用します。楕円の場合は、半径の軸で最も近い辺となります。 - - `farthest-side` - - : シェイプの中心から参照ボックスの最も遠い辺までの長さを使用します。楕円の場合は、半径の軸で最も遠い辺となります。 - -- `` - - : 円の中心を移動します。{{cssxref("length")}}、{{cssxref("percentage")}}、または `left` のような値の何れかです。 - -## 例 - -### 基本的な ellipse() の例 - -この例では、x 半径が 40%、y 半径が 50%、位置が左の楕円を示しています。これは、楕円の中心がボックスの左端にあることを意味しており、テキストを回り込ませるための半楕円の形になります。これらの値を変更すると、楕円の変化を確認することができます。 - -{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse.html", '100%', 800)}} - -### closest-side / farthest-side の値の使用 - -キーワード値の `closest-side` と `farthest-side` は、浮動要素の参照ボックスの大きさに基づいて、素早く楕円を作成するのに便利です。 - -{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse-keywords.html", '100%', 800)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- このデータ型を使用するプロパティ: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} -- [基本シェイプのガイド](/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes) diff --git a/files/ja/web/css/basic-shape/ellipse/index.md b/files/ja/web/css/basic-shape/ellipse/index.md new file mode 100644 index 0000000000..3fb705600e --- /dev/null +++ b/files/ja/web/css/basic-shape/ellipse/index.md @@ -0,0 +1,68 @@ +--- +title: ellipse() +slug: Web/CSS/basic-shape/ellipse +tags: + - CSS + - CSS データ型 + - CSS シェイプ + - ellipse + - CSS 関数 + - データ型 + - Reference +translation_of: Web/CSS/basic-shape/ellipse() +original_slug: Web/CSS/basic-shape/ellipse() +browser-compat: css.types.basic-shape.ellipse +--- +{{CSSRef}} + +**`ellipse()`** は [CSS](/ja/docs/Web/CSS) の関数で、{{cssxref("<basic-shape>")}} [データ型](/ja/docs/Web/CSS/CSS_Types)の一つです。 + +## 構文 + +```css +shape-outside: ellipse(40% 50% at left); +shape-outside: ellipse(closest-side farthest-side at 30%); +``` + +楕円は基本的に円を潰したものなので、`ellipse()` は、2 つの半径 x と y を指定しなければならないことを除けば、 {{cssxref("basic-shape/circle()","circle()")}} とよく似た方法で動作します。 + +### 値 + +- `` + + - : 2 つの半径で、x および y をその順で指定します。{{cssxref("length")}}、{{cssxref("percentage")}}、または `closest-side` および `farthest-side` の値の何れかです。 + + - `closest-side` + - : シェイプの中心から参照ボックスの最も近い辺までの長さを使用します。楕円の場合は、半径の軸で最も近い辺となります。 + - `farthest-side` + - : シェイプの中心から参照ボックスの最も遠い辺までの長さを使用します。楕円の場合は、半径の軸で最も遠い辺となります。 + +- `` + - : 円の中心を移動します。{{cssxref("length")}}、{{cssxref("percentage")}}、または `left` のような値の何れかです。 + +## 例 + +### 基本的な ellipse() の例 + +この例では、x 半径が 40%、y 半径が 50%、位置が左の楕円を示しています。これは、楕円の中心がボックスの左端にあることを意味しており、テキストを回り込ませるための半楕円の形になります。これらの値を変更すると、楕円の変化を確認することができます。 + +{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse.html", '100%', 800)}} + +### closest-side / farthest-side の値の使用 + +キーワード値の `closest-side` と `farthest-side` は、浮動要素の参照ボックスの大きさに基づいて、素早く楕円を作成するのに便利です。 + +{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse-keywords.html", '100%', 800)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このデータ型を使用するプロパティ: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} +- [基本シェイプのガイド](/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes) diff --git a/files/ja/web/css/basic-shape/inset()/index.md b/files/ja/web/css/basic-shape/inset()/index.md deleted file mode 100644 index 7afdcbb0eb..0000000000 --- a/files/ja/web/css/basic-shape/inset()/index.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: inset() -slug: Web/CSS/basic-shape/inset() -tags: - - CSS - - CSS データ型 - - CSS シェイプ - - inset - - CSS 関数 - - データ型 - - Reference -browser-compat: css.types.basic-shape.inset -translation_of: Web/CSS/basic-shape/inset() ---- -{{CSSRef}} - -**`inset()`** は [CSS](/ja/docs/Web/CSS) の関数で、{{cssxref("<basic-shape>")}} [データ型](/ja/docs/Web/CSS/CSS_Types)の一つです。内部の矩形を定義します。 - -## 構文 - -```css -shape-outside: inset(20px 50px 10px 0 round 50px); -``` - -### 値 - -- `{1,4}` - - : 4 つの引数がすべて与えられた場合、参照ボックスの内側に向けた上、右、下、左のオフセットを表し、内部の矩形の辺の位置を定義します。これらの引数は margin 一括指定の構文に従っており、4 つの内側の位置すべてに 1 つ、2 つ、または 4 つの値を設定することができます。 -- `` - - : オプションの [``](/ja/docs/Web/CSS/border-radius) 引数は、 border-radius 一括指定の構文を使用して内部の矩形の角の丸みを定義します。 - -## 例 - -### 基本的な内側の矩形の例 - -下記の例では、浮動要素の上にコンテンツを引き寄せるために、`inset()` のシェイプを使用しています。オフセット値を変更するとシェイプの変化を確認することができます。 - -{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset.html", '100%', 800)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- このデータ型を使用するプロパティ: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} -- [基本シェイプのガイド](/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes) diff --git a/files/ja/web/css/basic-shape/inset/index.md b/files/ja/web/css/basic-shape/inset/index.md new file mode 100644 index 0000000000..06de859d46 --- /dev/null +++ b/files/ja/web/css/basic-shape/inset/index.md @@ -0,0 +1,52 @@ +--- +title: inset() +slug: Web/CSS/basic-shape/inset +tags: + - CSS + - CSS データ型 + - CSS シェイプ + - inset + - CSS 関数 + - データ型 + - Reference +translation_of: Web/CSS/basic-shape/inset() +original_slug: Web/CSS/basic-shape/inset() +browser-compat: css.types.basic-shape.inset +--- +{{CSSRef}} + +**`inset()`** は [CSS](/ja/docs/Web/CSS) の関数で、{{cssxref("<basic-shape>")}} [データ型](/ja/docs/Web/CSS/CSS_Types)の一つです。内部の矩形を定義します。 + +## 構文 + +```css +shape-outside: inset(20px 50px 10px 0 round 50px); +``` + +### 値 + +- `{1,4}` + - : 4 つの引数がすべて与えられた場合、参照ボックスの内側に向けた上、右、下、左のオフセットを表し、内部の矩形の辺の位置を定義します。これらの引数は margin 一括指定の構文に従っており、4 つの内側の位置すべてに 1 つ、2 つ、または 4 つの値を設定することができます。 +- `` + - : オプションの [``](/ja/docs/Web/CSS/border-radius) 引数は、 border-radius 一括指定の構文を使用して内部の矩形の角の丸みを定義します。 + +## 例 + +### 基本的な内側の矩形の例 + +下記の例では、浮動要素の上にコンテンツを引き寄せるために、`inset()` のシェイプを使用しています。オフセット値を変更するとシェイプの変化を確認することができます。 + +{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset.html", '100%', 800)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このデータ型を使用するプロパティ: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} +- [基本シェイプのガイド](/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes) diff --git a/files/ja/web/css/basic-shape/polygon()/index.md b/files/ja/web/css/basic-shape/polygon()/index.md deleted file mode 100644 index 9a2df5b4d0..0000000000 --- a/files/ja/web/css/basic-shape/polygon()/index.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: polygon() -slug: Web/CSS/basic-shape/polygon() -tags: - - CSS - - CSS データ型 - - CSS シェイプ - - polygon - - CSS 関数 - - データ型 - - Reference -browser-compat: css.types.basic-shape.polygon -translation_of: Web/CSS/basic-shape/polygon() ---- -{{CSSRef}} - -**`polygon()`** は [CSS](/ja/docs/Web/CSS) の関数で、{{cssxref("<basic-shape>")}} [データ型](/ja/docs/Web/CSS/CSS_Types)の一つです。 - -## 構文 - -```css -clip-path: polygon(50% 2.4%, 34.5% 33.8%, 0% 38.8%, 25% 63.1%, 19.1% 97.6%); -``` - -### 値 - -- `` - - : オプションで `nonzero` (省略時の既定値) または `evenodd` のどちらかであり、[塗りつぶしルール](/ja/docs/Web/SVG/Attribute/fill-rule)を指定します。 -- `[]#` - - : 3 組以上の値です (多角形は少なくとも三角形を描く必要があります)。これらの値は、リファレンスボックスを基準にして描かれる座標です。 - -## 例 - -### 基本的な polygon() の例 - -この例では、`polygon()` を使って、テキストを回り込ませるシェイプを作成しています。値を変更するとシェイプの変化を確認することができます。 - -{{EmbedGHLiveSample("css-examples/shapes/basic-shape/polygon.html", '100%', 800)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- このデータ型を使用するプロパティ: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} -- [基本シェイプのガイド](/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes) diff --git a/files/ja/web/css/basic-shape/polygon/index.md b/files/ja/web/css/basic-shape/polygon/index.md new file mode 100644 index 0000000000..910b233dbf --- /dev/null +++ b/files/ja/web/css/basic-shape/polygon/index.md @@ -0,0 +1,52 @@ +--- +title: polygon() +slug: Web/CSS/basic-shape/polygon +tags: + - CSS + - CSS データ型 + - CSS シェイプ + - polygon + - CSS 関数 + - データ型 + - Reference +translation_of: Web/CSS/basic-shape/polygon() +original_slug: Web/CSS/basic-shape/polygon() +browser-compat: css.types.basic-shape.polygon +--- +{{CSSRef}} + +**`polygon()`** は [CSS](/ja/docs/Web/CSS) の関数で、{{cssxref("<basic-shape>")}} [データ型](/ja/docs/Web/CSS/CSS_Types)の一つです。 + +## 構文 + +```css +clip-path: polygon(50% 2.4%, 34.5% 33.8%, 0% 38.8%, 25% 63.1%, 19.1% 97.6%); +``` + +### 値 + +- `` + - : オプションで `nonzero` (省略時の既定値) または `evenodd` のどちらかであり、[塗りつぶしルール](/ja/docs/Web/SVG/Attribute/fill-rule)を指定します。 +- `[]#` + - : 3 組以上の値です (多角形は少なくとも三角形を描く必要があります)。これらの値は、リファレンスボックスを基準にして描かれる座標です。 + +## 例 + +### 基本的な polygon() の例 + +この例では、`polygon()` を使って、テキストを回り込ませるシェイプを作成しています。値を変更するとシェイプの変化を確認することができます。 + +{{EmbedGHLiveSample("css-examples/shapes/basic-shape/polygon.html", '100%', 800)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このデータ型を使用するプロパティ: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} +- [基本シェイプのガイド](/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes) diff --git a/files/ja/web/css/calc()/index.md b/files/ja/web/css/calc()/index.md deleted file mode 100644 index 3e8ca05a43..0000000000 --- a/files/ja/web/css/calc()/index.md +++ /dev/null @@ -1,168 +0,0 @@ ---- -title: calc() -slug: Web/CSS/calc() -tags: - - CSS - - CSS 関数 - - 計算 - - 演算 - - 関数 - - レイアウト - - リファレンス - - ウェブ - - calc -browser-compat: css.types.calc -translation_of: Web/CSS/calc() ---- -{{CSSRef}} - -**`calc()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 CSS のプロパティ値を指定する際に計算を行うことができるものです。 {{cssxref("<length>")}}、{{cssxref("<frequency>")}}、{{cssxref("<angle>")}}、{{cssxref("<time>")}}、{{cssxref("<percentage>")}}、{{cssxref("<number>")}}、{{cssxref("<integer>")}} が利用できる場所ならば使用できます。

- -{{EmbedInteractiveExample("pages/css/function-calc.html")}} - -## 構文 - -```css -/* プロパティ: calc(式) */ -width: calc(100% - 80px); -``` - -`calc()` 関数は1つの式を引数として取り、式の結果が値として使用されます。式は以下の演算子を組み合わせたもので、標準的な[演算子の優先順位の規則](/ja/docs/Learn/JavaScript/First_steps/Math#operator_precedence")を使用します。 - -- `+` - - : 加算です。 -- `-` - - : 減算です。 -- `*` - - : 乗算です。引数の少なくとも 1 つは {{cssxref("<number>")}} でなければなりません。 -- `/` - - : 除算です。右側は {{cssxref("<number>")}} でなければなりません。 - -式のオペランドは任意の {{cssxref("<length>")}} 構文の値にすることができます。式の中のそれぞれの値に異なる単位を使用することもできます。必要に応じて、計算の順番を設定するために括弧を使用することもできます。 - -### メモ - -- `+` 演算子と `-` 演算子は**前後に{{Glossary("whitespace", "ホワイトスペース")}}を置く必要があります**。たとえば、 `calc(50% -8px)` と記述した場合、パーセント表記と負の長さが連続しているものとみなされ、無効な式となるからです。 `calc(50% - 8px)` はパーセント表記、減算記号、長さの順に並んでいるものと解釈されます。また、 `calc(8px + -50%)` は長さ、加算記号、負のパーセント表記の順に並んでいるものと解釈されます。 -- `*` 演算子と `/` 演算子には前後のホワイトスペースは必要ありませんが、こちらにもホワイトスペースを用いて記述ルールに一貫性を持たせておくことは認められており、推奨されています。 -- ゼロで除算を行うと、 HTML パーサーで生成されるエラーになります。 -- 自動レイアウトおよび固定レイアウトのテーブルで列・列グループ・行・行グループ・セルの幅や高さに対してパーセンテージを含む数式を指定すると、 `auto` が指定されたものとして扱います。 -- `calc()` 関数は入れ子にすることができ、内側のものは単なる括弧として扱われます。 - -### 形式文法 - -{{csssyntax}} - -## アクセシビリティの考慮 - -`calc()` を使用してテキストの大きさを制御する場合は、一方の値が[相対的な長さの単位](/ja/docs/Web/CSS/length#relative_length_units)になることを確認してください。 - -```css -h1 { - font-size: calc(1.5rem + 3vw); -} -``` - -これによって、ページが拡大縮小されたときにテキストの大きさが変化します。 - -- [MDN WCAG のを理解する 1.4 の解説](/ja/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](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html) - -## 整数での使用 - -**`calc()`** は {{cssxref("<integer>")}} が求められる場面で使用することができ、その値は次のように、最も近い整数に丸められます。 - -```css -.modal { - z-index: calc(3 / 2); -} -``` - -これによって最終的に `.modal` は `z-index` の値は 2 になります。 - -**Note:** Chrome ブラウザーでは現在のところ、整数が求められる場面で **`calc()`** から返される一部の値を受け付けません。例えば、結果が整数になる場合であっても割り算は受け付けません。すなわち、 `z-index: calc(4 / 2);` は受け付けられません。 - -## 例 - -

余白をつけてオブジェクトを画面に配置する

- -`calc()` でマージン設定を持つボックス配置がしやすくなります。この例では CSS でウィンドウを横切るように広がるバナーを作ります。バナーの両側とウィンドウの縁は 40 ピクセル空けます。 - -```css -.banner { - 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 - -``` - -{{EmbedLiveSample('Positioning_an_object_on_screen_with_a_margin', 'auto', '60')}} - -

フォームフィールドの大きさを自動的に隅に合うように調整

- -`calc()` はフォーム要素のサイズ変更にも利用できます。適切なマージンを維持しながら、コンテナの縁を突き破らないように、利用できるスペースいっぱいに広げます。 - -いくらかの CSS を見てみましょう。 - -```css -input { - padding: 2px; - display: block; - width: calc(100% - 1em); -} - -#formbox { - width: calc(100% / 6); - border: 1px solid black; - padding: 4px; -} -``` - -ここで、フォームはウィンドウの取り得る幅の 1/6 を使うように指定しています。それから、入力項目が必ず妥当なサイズを持つように再度 `calc()` を使い、コンテナーの幅 - 1em の幅になるように指定します。次の HTML でこの CSS を使います。

- -```html -
-
- - -
-
-``` - -{{EmbedLiveSample('Automatically_sizing_form_fields_to_fit_their_container', '700', '80')}} - -### 入れ子の `calc()` と CSS 変数 - -`calc()` で [CSS 変数](/ja/docs/Web/CSS/CSS_Variables) を使用することもできます。以下のコードを見てみてください。

- -```css -.foo { - --widthA: 100px; - --widthB: calc(var(--widthA) / 2); - --widthC: calc(var(--widthB) / 2); - width: var(--widthC); -} -``` - -すべての変数が展開された後、 `widthC` の値は `calc( calc( 100px / 2) / 2)` になります。この値が .foo の width プロパティに割り当てられたとき、内部にあるすべての `calc()` は (入れ子の深さにかかわらず) 単なる括弧になり、`width` プロパティの値は最終的に `calc( ( 100px / 2) / 2)`、すなわち `25px` になります。要するに、`calc()` の内部にある `calc()` は単なる括弧と同等です。 - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- [Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog](https://hacks.mozilla.org/2010/06/css3-calc/) diff --git a/files/ja/web/css/calc/index.md b/files/ja/web/css/calc/index.md new file mode 100644 index 0000000000..575feddff4 --- /dev/null +++ b/files/ja/web/css/calc/index.md @@ -0,0 +1,169 @@ +--- +title: calc() +slug: Web/CSS/calc +tags: + - CSS + - CSS 関数 + - 計算 + - 演算 + - 関数 + - レイアウト + - リファレンス + - ウェブ + - calc +translation_of: Web/CSS/calc() +original_slug: Web/CSS/calc() +browser-compat: css.types.calc +--- +{{CSSRef}} + +**`calc()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 CSS のプロパティ値を指定する際に計算を行うことができるものです。 {{cssxref("<length>")}}、{{cssxref("<frequency>")}}、{{cssxref("<angle>")}}、{{cssxref("<time>")}}、{{cssxref("<percentage>")}}、{{cssxref("<number>")}}、{{cssxref("<integer>")}} が利用できる場所ならば使用できます。

+ +{{EmbedInteractiveExample("pages/css/function-calc.html")}} + +## 構文 + +```css +/* プロパティ: calc(式) */ +width: calc(100% - 80px); +``` + +`calc()` 関数は1つの式を引数として取り、式の結果が値として使用されます。式は以下の演算子を組み合わせたもので、標準的な[演算子の優先順位の規則](/ja/docs/Learn/JavaScript/First_steps/Math#operator_precedence")を使用します。 + +- `+` + - : 加算です。 +- `-` + - : 減算です。 +- `*` + - : 乗算です。引数の少なくとも 1 つは {{cssxref("<number>")}} でなければなりません。 +- `/` + - : 除算です。右側は {{cssxref("<number>")}} でなければなりません。 + +式のオペランドは任意の {{cssxref("<length>")}} 構文の値にすることができます。式の中のそれぞれの値に異なる単位を使用することもできます。必要に応じて、計算の順番を設定するために括弧を使用することもできます。 + +### メモ + +- `+` 演算子と `-` 演算子は**前後に{{Glossary("whitespace", "ホワイトスペース")}}を置く必要があります**。たとえば、 `calc(50% -8px)` と記述した場合、パーセント表記と負の長さが連続しているものとみなされ、無効な式となるからです。 `calc(50% - 8px)` はパーセント表記、減算記号、長さの順に並んでいるものと解釈されます。また、 `calc(8px + -50%)` は長さ、加算記号、負のパーセント表記の順に並んでいるものと解釈されます。 +- `*` 演算子と `/` 演算子には前後のホワイトスペースは必要ありませんが、こちらにもホワイトスペースを用いて記述ルールに一貫性を持たせておくことは認められており、推奨されています。 +- ゼロで除算を行うと、 HTML パーサーで生成されるエラーになります。 +- 自動レイアウトおよび固定レイアウトのテーブルで列・列グループ・行・行グループ・セルの幅や高さに対してパーセンテージを含む数式を指定すると、 `auto` が指定されたものとして扱います。 +- `calc()` 関数は入れ子にすることができ、内側のものは単なる括弧として扱われます。 + +### 形式文法 + +{{csssyntax}} + +## アクセシビリティの考慮 + +`calc()` を使用してテキストの大きさを制御する場合は、一方の値が[相対的な長さの単位](/ja/docs/Web/CSS/length#relative_length_units)になることを確認してください。 + +```css +h1 { + font-size: calc(1.5rem + 3vw); +} +``` + +これによって、ページが拡大縮小されたときにテキストの大きさが変化します。 + +- [MDN WCAG のを理解する 1.4 の解説](/ja/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](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html) + +## 整数での使用 + +**`calc()`** は {{cssxref("<integer>")}} が求められる場面で使用することができ、その値は次のように、最も近い整数に丸められます。 + +```css +.modal { + z-index: calc(3 / 2); +} +``` + +これによって最終的に `.modal` は `z-index` の値は 2 になります。 + +**Note:** Chrome ブラウザーでは現在のところ、整数が求められる場面で **`calc()`** から返される一部の値を受け付けません。例えば、結果が整数になる場合であっても割り算は受け付けません。すなわち、 `z-index: calc(4 / 2);` は受け付けられません。 + +## 例 + +

余白をつけてオブジェクトを画面に配置する

+ +`calc()` でマージン設定を持つボックス配置がしやすくなります。この例では CSS でウィンドウを横切るように広がるバナーを作ります。バナーの両側とウィンドウの縁は 40 ピクセル空けます。 + +```css +.banner { + 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 + +``` + +{{EmbedLiveSample('Positioning_an_object_on_screen_with_a_margin', 'auto', '60')}} + +

フォームフィールドの大きさを自動的に隅に合うように調整

+ +`calc()` はフォーム要素のサイズ変更にも利用できます。適切なマージンを維持しながら、コンテナの縁を突き破らないように、利用できるスペースいっぱいに広げます。 + +いくらかの CSS を見てみましょう。 + +```css +input { + padding: 2px; + display: block; + width: calc(100% - 1em); +} + +#formbox { + width: calc(100% / 6); + border: 1px solid black; + padding: 4px; +} +``` + +ここで、フォームはウィンドウの取り得る幅の 1/6 を使うように指定しています。それから、入力項目が必ず妥当なサイズを持つように再度 `calc()` を使い、コンテナーの幅 - 1em の幅になるように指定します。次の HTML でこの CSS を使います。

+ +```html +
+
+ + +
+
+``` + +{{EmbedLiveSample('Automatically_sizing_form_fields_to_fit_their_container', '700', '80')}} + +### 入れ子の `calc()` と CSS 変数 + +`calc()` で [CSS 変数](/ja/docs/Web/CSS/CSS_Variables) を使用することもできます。以下のコードを見てみてください。

+ +```css +.foo { + --widthA: 100px; + --widthB: calc(var(--widthA) / 2); + --widthC: calc(var(--widthB) / 2); + width: var(--widthC); +} +``` + +すべての変数が展開された後、 `widthC` の値は `calc( calc( 100px / 2) / 2)` になります。この値が .foo の width プロパティに割り当てられたとき、内部にあるすべての `calc()` は (入れ子の深さにかかわらず) 単なる括弧になり、`width` プロパティの値は最終的に `calc( ( 100px / 2) / 2)`、すなわち `25px` になります。要するに、`calc()` の内部にある `calc()` は単なる括弧と同等です。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog](https://hacks.mozilla.org/2010/06/css3-calc/) diff --git a/files/ja/web/css/clamp()/index.md b/files/ja/web/css/clamp()/index.md deleted file mode 100644 index a230b40d6c..0000000000 --- a/files/ja/web/css/clamp()/index.md +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: clamp() -slug: Web/CSS/clamp() -tags: - - CSS - - CSS 関数 - - 計算 - - 演算 - - 関数 - - レイアウト - - リファレンス - - ウェブ - - clamp -browser-compat: css.types.clamp -translation_of: Web/CSS/clamp() ---- -{{CSSRef}} - -**`clamp()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、値を上限と下限の間に制限します。 `clamp()` によって、定義された最大値と最小値の間の値を選択することができます。最小値、推奨値、最大値の3つの引数を取ります。 `clamp()` 関数は {{CSSxRef("<length>")}}, {{CSSxRef("<frequency>")}}, {{CSSxRef("<angle>")}}, {{CSSxRef("<time>")}}, {{CSSxRef("<percentage>")}}, {{CSSxRef("<number>")}}, {{CSSxRef("<integer>")}} のいずれでも使用することができます。 - -`clamp(MIN, VAL, MAX)` は `{{CSSxRef("max()")}}(MIN, {{CSSxRef("min()")}}(VAL, MAX))` と同等です。 - -{{EmbedInteractiveExample("pages/css/function-clamp.html")}} - -これらの例のように、フォントの大きさに `clamp()` を使用すると、ビューポートの大きさに合わせてフォントの大きさを設定することができますが、最小フォントサイズを下回ったり、最大フォントサイズを上回ったりすることはありません。これは [Fluid Typography](https://css-tricks.com/snippets/css/fluid-typography/) のコードと同じ効果がありますが、1 行で済み、メディアクエリーも使用しません。 - -## 構文 - -`clamp()` 関数は、3 つの式を最小値、推奨値、最大値の順で引数としてカンマ区切りで受け取ります。 - -最小値は最も小さい (最も負側の) 値です。これは許される値の範囲の下限です。推奨値がこの値よりも小さい場合、最小値が使用されます。 - -推奨値は、結果が最小値と最大値の間である限り使用される値の式です。 - -最大値は最も大きな (最も正側の) 値で、推奨値がこの上限値よりも大きい場合にプロパティの値に代入されます。 - -式は計算関数 (詳しくは {{CSSxRef("calc()")}} を参照)、リテラル値、 {{CSSxRef("attr()")}} のように正しい引数の型 ({{CSSxRef("<length>")}} など) として評価されるその他の式、重複した {{CSSxRef("min()")}} および {{CSSxRef("max()")}} 関数などです。数式としては、 `calc()` 関数自体を使用せずに加算、減算、乗算、除算を使用することができます。計算順を指定するために括弧を使用することもできます。 - -式の中でそれぞれの値に異なる単位を使用し、いずれかの引数を構成する計算関数の中で異なる単位を使用することもできます。 - -### メモ - -- 自動レイアウト、固定レイアウトを問わず、表の列、列グループ、行、行グループ、セルの幅や高さのパーセント値を出力する数式は、 `auto` が指定されたものとして扱われる*ことが*あります。 -- 式の値として `max()` および `min()` 関数を重ねることは許可されており、内側のものは単純な括弧として扱われます。式は完全な数式であるため、 `calc()` 関数自体を使用せずに加算、減算、乗算、除算を使用することができます。 -- 式は加算 ( + )、減算 ( - )、乗算 ( \* )、除算 ( / ) 演算子で組み合わせた値にすることがができ、標準の演算子の優先順位を使用します。 + および - 演算子の両側に空白を入れることを忘れないでください。式の中の値には {{CSSxRef("<length>")}} の構文の値にすることができます。式の中のそれぞれの値に異なる単位を使用することができます。必要に応じて、計算順を指定するために括弧を使用することもできます。 -- {{CSSxRef("min()")}} および {{CSSxRef("max()")}} を `clamp()` 関数の中で使用したくなるでしょう。 - -### 形式文法 - -{{CSSSyntax}} - -## 例 - -### min, max, clamp の比較 - -この例では、いくつかの大きさに対して {{CSSxRef("min()")}}、{{CSSxRef("max()")}}、{{CSSxRef("clamp()")}} を利用した単純なレスポンシブの例を紹介します。 - -[``](/ja/docs/Web/HTML/Element/body) 要素の [`width`](/ja/docs/Web/CSS/width) には、`min(1000px, calc(70% + 100px))` が設定されています。これは、`calc(70% + 100px)` の結果が `1000px` よりも小さい場合には、その値に設定されることを意味しています。`min()` では最大値を設定することができます。 - -[`

`](/ja/docs/Web/HTML/Element/p) 要素の [`font-size`](/ja/docs/Web/CSS/font-size) には、`max(1.2rem, 1.2vw)` が設定されています。すなわち、計算された `1.2vw` の値が `1.2rem` の値よりも大きい場合には、代わりにその値が設定されます。`max()` では、最小値を設定することができ、このような場合にはアクセシビリティの観点からも便利です。 - -[`

`](/ja/docs/Web/HTML/Element/Heading_Elements) 要素の `font-size` は、`clamp(1.8rem, 2.5vw, 2.8rem)` と設定されています。これは、`2.5vw` の計算値が `1.8rem` の値よりも大きくなるまで、`font-size` が `1.8rem` に設定されることを意味します。この時点では、`2.5vw` の計算値が `2.8rem` の計算値よりも大きくなるまで、`font-size` は `2.5vw` に設定されます。この時点で、`font-size` は `2.8rem` に設定されます。`clamp()` では、最小値と最大値を設定することができます。 - -操作してみたい場合は、[GitHub で公開されている例](https://mdn.github.io/css-examples/min-max-clamp/)を参照してください。 - -#### HTML - -```html -

Simple responsive test

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In orci orci, eleifend id risus nec, mattis rutrum velit. Suspendisse fringilla egestas erat eu convallis. Phasellus eu velit ut magna dapibus elementum cursus at ligula. Ut tempus varius nibh, nec auctor sapien iaculis sit amet. Fusce iaculis, libero quis elementum viverra, nulla ante accumsan lectus, sit amet convallis lacus ipsum vel est. Curabitur et urna non est consectetur pulvinar vel id risus. Ut vestibulum, sem in semper aliquet, felis arcu euismod sapien, ac imperdiet massa nisl quis sem. Vestibulum ac elementum felis, in tempor velit. Pellentesque purus ex, mattis at ornare quis, porta condimentum mi. Donec vestibulum ligula vel nulla blandit, quis euismod nulla vestibulum. Suspendisse potenti. Nunc neque mauris, tempor sed facilisis at, ultrices eget nulla. Pellentesque convallis ante nec augue porttitor, id tempus ante luctus.

- -

Integer rutrum sollicitudin tellus, quis cursus nulla scelerisque nec. Nunc eu facilisis lorem. Maecenas faucibus sapien eleifend, semper tellus at, pharetra quam. Cras feugiat vulputate tortor at rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam non felis quis sem lobortis sodales vel id libero. Phasellus sit amet placerat lorem.

-``` - -#### CSS - -```css -html { - font-family: sans-serif; -} - -body { - margin: 0 auto; - width: min(1000px, calc(70% + 100px)); -} - -h1 { - letter-spacing: 2px; - font-size: clamp(1.8rem, 2.5vw, 2.8rem); -} - -p { - line-height: 1.5; - font-size: max(1.2rem, 1.2vw); -} -``` - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{CSSxRef("calc()")}} -- {{CSSxRef("max()")}} -- {{CSSxRef("min()")}} -- [CSS 値](/ja/docs/Learn/CSS/Building_blocks/Values_and_units) diff --git a/files/ja/web/css/clamp/index.md b/files/ja/web/css/clamp/index.md new file mode 100644 index 0000000000..bfdd03f109 --- /dev/null +++ b/files/ja/web/css/clamp/index.md @@ -0,0 +1,112 @@ +--- +title: clamp() +slug: Web/CSS/clamp +tags: + - CSS + - CSS 関数 + - 計算 + - 演算 + - 関数 + - レイアウト + - リファレンス + - ウェブ + - clamp +translation_of: Web/CSS/clamp() +original_slug: Web/CSS/clamp() +browser-compat: css.types.clamp +--- +{{CSSRef}} + +**`clamp()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、値を上限と下限の間に制限します。 `clamp()` によって、定義された最大値と最小値の間の値を選択することができます。最小値、推奨値、最大値の3つの引数を取ります。 `clamp()` 関数は {{CSSxRef("<length>")}}, {{CSSxRef("<frequency>")}}, {{CSSxRef("<angle>")}}, {{CSSxRef("<time>")}}, {{CSSxRef("<percentage>")}}, {{CSSxRef("<number>")}}, {{CSSxRef("<integer>")}} のいずれでも使用することができます。 + +`clamp(MIN, VAL, MAX)` は `{{CSSxRef("max()")}}(MIN, {{CSSxRef("min()")}}(VAL, MAX))` と同等です。 + +{{EmbedInteractiveExample("pages/css/function-clamp.html")}} + +これらの例のように、フォントの大きさに `clamp()` を使用すると、ビューポートの大きさに合わせてフォントの大きさを設定することができますが、最小フォントサイズを下回ったり、最大フォントサイズを上回ったりすることはありません。これは [Fluid Typography](https://css-tricks.com/snippets/css/fluid-typography/) のコードと同じ効果がありますが、1 行で済み、メディアクエリーも使用しません。 + +## 構文 + +`clamp()` 関数は、3 つの式を最小値、推奨値、最大値の順で引数としてカンマ区切りで受け取ります。 + +最小値は最も小さい (最も負側の) 値です。これは許される値の範囲の下限です。推奨値がこの値よりも小さい場合、最小値が使用されます。 + +推奨値は、結果が最小値と最大値の間である限り使用される値の式です。 + +最大値は最も大きな (最も正側の) 値で、推奨値がこの上限値よりも大きい場合にプロパティの値に代入されます。 + +式は計算関数 (詳しくは {{CSSxRef("calc()")}} を参照)、リテラル値、 {{CSSxRef("attr()")}} のように正しい引数の型 ({{CSSxRef("<length>")}} など) として評価されるその他の式、重複した {{CSSxRef("min()")}} および {{CSSxRef("max()")}} 関数などです。数式としては、 `calc()` 関数自体を使用せずに加算、減算、乗算、除算を使用することができます。計算順を指定するために括弧を使用することもできます。 + +式の中でそれぞれの値に異なる単位を使用し、いずれかの引数を構成する計算関数の中で異なる単位を使用することもできます。 + +### メモ + +- 自動レイアウト、固定レイアウトを問わず、表の列、列グループ、行、行グループ、セルの幅や高さのパーセント値を出力する数式は、 `auto` が指定されたものとして扱われる*ことが*あります。 +- 式の値として `max()` および `min()` 関数を重ねることは許可されており、内側のものは単純な括弧として扱われます。式は完全な数式であるため、 `calc()` 関数自体を使用せずに加算、減算、乗算、除算を使用することができます。 +- 式は加算 ( + )、減算 ( - )、乗算 ( \* )、除算 ( / ) 演算子で組み合わせた値にすることがができ、標準の演算子の優先順位を使用します。 + および - 演算子の両側に空白を入れることを忘れないでください。式の中の値には {{CSSxRef("<length>")}} の構文の値にすることができます。式の中のそれぞれの値に異なる単位を使用することができます。必要に応じて、計算順を指定するために括弧を使用することもできます。 +- {{CSSxRef("min()")}} および {{CSSxRef("max()")}} を `clamp()` 関数の中で使用したくなるでしょう。 + +### 形式文法 + +{{CSSSyntax}} + +## 例 + +### min, max, clamp の比較 + +この例では、いくつかの大きさに対して {{CSSxRef("min()")}}、{{CSSxRef("max()")}}、{{CSSxRef("clamp()")}} を利用した単純なレスポンシブの例を紹介します。 + +[``](/ja/docs/Web/HTML/Element/body) 要素の [`width`](/ja/docs/Web/CSS/width) には、`min(1000px, calc(70% + 100px))` が設定されています。これは、`calc(70% + 100px)` の結果が `1000px` よりも小さい場合には、その値に設定されることを意味しています。`min()` では最大値を設定することができます。 + +[`

`](/ja/docs/Web/HTML/Element/p) 要素の [`font-size`](/ja/docs/Web/CSS/font-size) には、`max(1.2rem, 1.2vw)` が設定されています。すなわち、計算された `1.2vw` の値が `1.2rem` の値よりも大きい場合には、代わりにその値が設定されます。`max()` では、最小値を設定することができ、このような場合にはアクセシビリティの観点からも便利です。 + +[`

`](/ja/docs/Web/HTML/Element/Heading_Elements) 要素の `font-size` は、`clamp(1.8rem, 2.5vw, 2.8rem)` と設定されています。これは、`2.5vw` の計算値が `1.8rem` の値よりも大きくなるまで、`font-size` が `1.8rem` に設定されることを意味します。この時点では、`2.5vw` の計算値が `2.8rem` の計算値よりも大きくなるまで、`font-size` は `2.5vw` に設定されます。この時点で、`font-size` は `2.8rem` に設定されます。`clamp()` では、最小値と最大値を設定することができます。 + +操作してみたい場合は、[GitHub で公開されている例](https://mdn.github.io/css-examples/min-max-clamp/)を参照してください。 + +#### HTML + +```html +

Simple responsive test

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In orci orci, eleifend id risus nec, mattis rutrum velit. Suspendisse fringilla egestas erat eu convallis. Phasellus eu velit ut magna dapibus elementum cursus at ligula. Ut tempus varius nibh, nec auctor sapien iaculis sit amet. Fusce iaculis, libero quis elementum viverra, nulla ante accumsan lectus, sit amet convallis lacus ipsum vel est. Curabitur et urna non est consectetur pulvinar vel id risus. Ut vestibulum, sem in semper aliquet, felis arcu euismod sapien, ac imperdiet massa nisl quis sem. Vestibulum ac elementum felis, in tempor velit. Pellentesque purus ex, mattis at ornare quis, porta condimentum mi. Donec vestibulum ligula vel nulla blandit, quis euismod nulla vestibulum. Suspendisse potenti. Nunc neque mauris, tempor sed facilisis at, ultrices eget nulla. Pellentesque convallis ante nec augue porttitor, id tempus ante luctus.

+ +

Integer rutrum sollicitudin tellus, quis cursus nulla scelerisque nec. Nunc eu facilisis lorem. Maecenas faucibus sapien eleifend, semper tellus at, pharetra quam. Cras feugiat vulputate tortor at rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam non felis quis sem lobortis sodales vel id libero. Phasellus sit amet placerat lorem.

+``` + +#### CSS + +```css +html { + font-family: sans-serif; +} + +body { + margin: 0 auto; + width: min(1000px, calc(70% + 100px)); +} + +h1 { + letter-spacing: 2px; + font-size: clamp(1.8rem, 2.5vw, 2.8rem); +} + +p { + line-height: 1.5; + font-size: max(1.2rem, 1.2vw); +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{CSSxRef("calc()")}} +- {{CSSxRef("max()")}} +- {{CSSxRef("min()")}} +- [CSS 値](/ja/docs/Learn/CSS/Building_blocks/Values_and_units) diff --git a/files/ja/web/css/counter()/index.md b/files/ja/web/css/counter()/index.md deleted file mode 100644 index b525841d28..0000000000 --- a/files/ja/web/css/counter()/index.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: counter() -slug: Web/CSS/counter() -tags: - - CSS - - CSS カウンター - - CSS 関数 - - 関数 - - リファレンス -browser-compat: css.types.counter -translation_of: Web/CSS/counter() ---- -{{CSSRef}} - -**`counter()`** は [CSS](/ja/docs/Web/CSS) の関数で、指定された名前付きカウンターの現在値があれば、その文字列を返します。[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)において用いるのが多いものの、理論的には [``](/ja/docs/Web/CSS/string) に対応するすべての箇所で用いることができます。 - -```css -/* 単純な使用法 */ -counter(countername); - -/* カウンターの表示の変更 */ -counter(countername, upper-roman) -``` - -[カウンター](/ja/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters)自身には視覚的効果が何もありません。 `counter()` 関数 (および {{cssxref("counters()")}} 関数) は開発者が定義した文字列 (または画像) を返すことでカウンターは利用価値が生まれます。 - -> **Note:** `counter()` 関数は CSS プロパティとも併用できますが、 {{CSSxRef("content")}} 以外のプロパティにおける対応は実験的であり、型または単位の引数への対応は限られています。 -> -> [ブラウザーの互換性の表](#ブラウザーの互換性)を注意深く確認してから本番環境に用いてください。 - -## 構文 - -### 値 - -- {{cssxref("<custom-ident>")}} - - : カウンターを識別する名前であり、{{cssxref("counter-reset")}} および {{cssxref("counter-increment")}} に用いた名前と、大文字小文字まで同一でなければなりません。名前をダッシュ 2 つで始めることはできず、また `none`, `unset`, `initial`, `inherit` という名前は禁止です。 -- `` - - : {{cssxref("<list-style-type>")}} 名、 {{cssxref("<@counter-style>")}} 名、 {{cssxref("symbols()")}} 関数の何れかです。カウンタースタイル名には `numeric`, `alphabetic`, `symbolic` などの単純な定義済みスタイル、より複雑なアジアやエチオピアのカウンタースタイル、その他の[定義済みカウンタースタイル](/ja/docs/Web/CSS/CSS_Counter_Styles)があります。省略された場合は、既定で `decimal` になります。 - -### 形式文法 - -{{CSSSyntax}} - -## 例 - -### 既定値と upper-roman との比較 - -#### HTML - -```html -
    -
  1. -
  2. -
  3. -
-``` - -#### CSS - -```css -ol { - counter-reset: listCounter; -} -li { - counter-increment: listCounter; -} -li::after { - content: "[" counter(listCounter) "] == [" - counter(listCounter, upper-roman) "]"; -} -``` - -#### 結果 - -{{EmbedLiveSample("default_value_compared_to_upper_Roman", "100%", 150)}} - -### decimal-leading-zero と lower-alpha との比較 - -#### 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) "]"; -} -``` - -#### 結果 - -{{EmbedLiveSample("decimal-leading-zero_compared_to_lower-alpha", "100%", 150)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- [CSS カウンターの使用](/ja/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters) -- {{cssxref("counter-reset")}} -- {{cssxref("counter-set")}} -- {{cssxref("counter-increment")}} -- {{cssxref("@counter-style")}} -- CSS の [`counters()`](/ja/docs/Web/CSS/counters()) 関数 diff --git a/files/ja/web/css/counter/index.md b/files/ja/web/css/counter/index.md new file mode 100644 index 0000000000..8416fed3c2 --- /dev/null +++ b/files/ja/web/css/counter/index.md @@ -0,0 +1,124 @@ +--- +title: counter() +slug: Web/CSS/counter +tags: + - CSS + - CSS カウンター + - CSS 関数 + - 関数 + - リファレンス +translation_of: Web/CSS/counter() +original_slug: Web/CSS/counter() +browser-compat: css.types.counter +--- +{{CSSRef}} + +**`counter()`** は [CSS](/ja/docs/Web/CSS) の関数で、指定された名前付きカウンターの現在値があれば、その文字列を返します。[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)において用いるのが多いものの、理論的には [``](/ja/docs/Web/CSS/string) に対応するすべての箇所で用いることができます。 + +```css +/* 単純な使用法 */ +counter(countername); + +/* カウンターの表示の変更 */ +counter(countername, upper-roman) +``` + +[カウンター](/ja/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters)自身には視覚的効果が何もありません。 `counter()` 関数 (および {{cssxref("counters()")}} 関数) は開発者が定義した文字列 (または画像) を返すことでカウンターは利用価値が生まれます。 + +> **Note:** `counter()` 関数は CSS プロパティとも併用できますが、 {{CSSxRef("content")}} 以外のプロパティにおける対応は実験的であり、型または単位の引数への対応は限られています。 +> +> [ブラウザーの互換性の表](#ブラウザーの互換性)を注意深く確認してから本番環境に用いてください。 + +## 構文 + +### 値 + +- {{cssxref("<custom-ident>")}} + - : カウンターを識別する名前であり、{{cssxref("counter-reset")}} および {{cssxref("counter-increment")}} に用いた名前と、大文字小文字まで同一でなければなりません。名前をダッシュ 2 つで始めることはできず、また `none`, `unset`, `initial`, `inherit` という名前は禁止です。 +- `` + - : {{cssxref("<list-style-type>")}} 名、 {{cssxref("<@counter-style>")}} 名、 {{cssxref("symbols()")}} 関数の何れかです。カウンタースタイル名には `numeric`, `alphabetic`, `symbolic` などの単純な定義済みスタイル、より複雑なアジアやエチオピアのカウンタースタイル、その他の[定義済みカウンタースタイル](/ja/docs/Web/CSS/CSS_Counter_Styles)があります。省略された場合は、既定で `decimal` になります。 + +### 形式文法 + +{{CSSSyntax}} + +## 例 + +### 既定値と upper-roman との比較 + +#### HTML + +```html +
    +
  1. +
  2. +
  3. +
+``` + +#### CSS + +```css +ol { + counter-reset: listCounter; +} +li { + counter-increment: listCounter; +} +li::after { + content: "[" counter(listCounter) "] == [" + counter(listCounter, upper-roman) "]"; +} +``` + +#### 結果 + +{{EmbedLiveSample("default_value_compared_to_upper_Roman", "100%", 150)}} + +### decimal-leading-zero と lower-alpha との比較 + +#### 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) "]"; +} +``` + +#### 結果 + +{{EmbedLiveSample("decimal-leading-zero_compared_to_lower-alpha", "100%", 150)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS カウンターの使用](/ja/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters) +- {{cssxref("counter-reset")}} +- {{cssxref("counter-set")}} +- {{cssxref("counter-increment")}} +- {{cssxref("@counter-style")}} +- CSS の [`counters()`](/ja/docs/Web/CSS/counters()) 関数 diff --git a/files/ja/web/css/counters()/index.md b/files/ja/web/css/counters()/index.md deleted file mode 100644 index ab28c38df1..0000000000 --- a/files/ja/web/css/counters()/index.md +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: counters() -slug: Web/CSS/counters() -tags: - - CSS - - CSS カウンター - - CSS 関数 - - 関数 - - リファレンス -browser-compat: css.types.counters -translation_of: Web/CSS/counters() ---- -{{CSSRef}} - -**`counter()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、階層的なカウンターを利用できるようにし、指定された名前付きカウンターがあれば、その現在値を表す連結された文字列を返します。 `counters()` 関数には `counters(name, string)` と `counters(name, string, style)` の二つの形式があります。一般的には[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)と一緒に使用されますが、理論的には [``](/ja/docs/Web/CSS/string) 値に対応している場所ならばどこでも使用できます。生成されるテキストは、指定された名前を持つすべてのカウンターの値で、指定された文字列で区切られた一番外側から一番内側までの値です。カウンターは、指定されたスタイルで表示され、スタイルが指定されていない場合は既定で `decimal` で表示されます。 - -```css -/* 単純な使用法 - スタイルは既定で decimal */ -counters(countername, '-'); - -/* カウンターの表示の変更 */ -counters(countername, '.', upper-roman) -``` - -[カウンター](/ja/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters)自身には視覚的効果が何もありません。 `counters()` 関数 (および {{cssxref("counter()")}} 関数) は開発者が定義した文字列 (または画像) を返すことでカウンターは利用価値が生まれます。 - -> **Note:** `counters()` 関数は CSS プロパティとも併用できますが、 {{CSSxRef("content")}} 以外のプロパティにおける対応は実験的であり、型または単位の引数への対応は限られています。 -> -> [ブラウザーの互換性の表](#ブラウザーの互換性)を注意深く確認してから本番環境に用いてください。 - -## 構文 - -### 値 - -- {{cssxref("<custom-ident>")}} - - : カウンターを識別する名前であり、 {{cssxref("counter-reset")}} および {{cssxref("counter-increment")}} に用いた名前と、大文字小文字まで同一でなければなりません。名前をダッシュ 2 つで始めることはできず、また `none`, `unset`, `initial`, `inherit` という名前は禁止です。 -- `` - - : カウンタースタイル名または [`symbols()`](/ja/docs/Web/CSS/symbols()) 関数です。カウンタースタイル名には `numeric`, `alphabetic`, `symbolic` などの単純な定義済みスタイル、より複雑なアジアやエチオピアのカウンタースタイル、その他の[定義済みカウンタースタイル](/ja/docs/Web/CSS/CSS_Counter_Styles)があります。省略された場合は、既定で `decimal` になります。 -- {{cssxref("<string>")}} - - : 任意の数のテキスト文字です。ラテン文字以外は Unicode エスケープシーケンスでエンコードする必要があります。例えば `\000A9` は著作権記号を表します。 - -### 形式文法 - -{{CSSSyntax}} - -## 例 - -### 既定値と upper-roman との比較 - -#### 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) ; -} -``` - -#### 結果 - -{{EmbedLiveSample("default_value_compared_to_upper_Roman", "100%", 150)}} - -### decimal-leading-zero と lower-alpha との比較 - -#### 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); -} -``` - -#### 結果 - -{{EmbedLiveSample("decimal-leading-zero_compared_to_lower-alpha", "100%", 150)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- [CSS カウンターの使用](/ja/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters) -- {{cssxref("counter-set")}} -- {{cssxref("counter-reset")}} -- {{cssxref("counter-increment")}} -- {{cssxref("@counter-style")}} -- CSS の [`counter()`](/ja/docs/Web/CSS/counter()) 関数 -- {{cssxref("::marker")}} diff --git a/files/ja/web/css/counters/index.md b/files/ja/web/css/counters/index.md new file mode 100644 index 0000000000..f49b9ba981 --- /dev/null +++ b/files/ja/web/css/counters/index.md @@ -0,0 +1,167 @@ +--- +title: counters() +slug: Web/CSS/counters +tags: + - CSS + - CSS カウンター + - CSS 関数 + - 関数 + - リファレンス +translation_of: Web/CSS/counters() +original_slug: Web/CSS/counters() +browser-compat: css.types.counters +--- +{{CSSRef}} + +**`counter()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、階層的なカウンターを利用できるようにし、指定された名前付きカウンターがあれば、その現在値を表す連結された文字列を返します。 `counters()` 関数には `counters(name, string)` と `counters(name, string, style)` の二つの形式があります。一般的には[擬似要素](/ja/docs/Web/CSS/Pseudo-elements)と一緒に使用されますが、理論的には [``](/ja/docs/Web/CSS/string) 値に対応している場所ならばどこでも使用できます。生成されるテキストは、指定された名前を持つすべてのカウンターの値で、指定された文字列で区切られた一番外側から一番内側までの値です。カウンターは、指定されたスタイルで表示され、スタイルが指定されていない場合は既定で `decimal` で表示されます。 + +```css +/* 単純な使用法 - スタイルは既定で decimal */ +counters(countername, '-'); + +/* カウンターの表示の変更 */ +counters(countername, '.', upper-roman) +``` + +[カウンター](/ja/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters)自身には視覚的効果が何もありません。 `counters()` 関数 (および {{cssxref("counter()")}} 関数) は開発者が定義した文字列 (または画像) を返すことでカウンターは利用価値が生まれます。 + +> **Note:** `counters()` 関数は CSS プロパティとも併用できますが、 {{CSSxRef("content")}} 以外のプロパティにおける対応は実験的であり、型または単位の引数への対応は限られています。 +> +> [ブラウザーの互換性の表](#ブラウザーの互換性)を注意深く確認してから本番環境に用いてください。 + +## 構文 + +### 値 + +- {{cssxref("<custom-ident>")}} + - : カウンターを識別する名前であり、 {{cssxref("counter-reset")}} および {{cssxref("counter-increment")}} に用いた名前と、大文字小文字まで同一でなければなりません。名前をダッシュ 2 つで始めることはできず、また `none`, `unset`, `initial`, `inherit` という名前は禁止です。 +- `` + - : カウンタースタイル名または [`symbols()`](/ja/docs/Web/CSS/symbols()) 関数です。カウンタースタイル名には `numeric`, `alphabetic`, `symbolic` などの単純な定義済みスタイル、より複雑なアジアやエチオピアのカウンタースタイル、その他の[定義済みカウンタースタイル](/ja/docs/Web/CSS/CSS_Counter_Styles)があります。省略された場合は、既定で `decimal` になります。 +- {{cssxref("<string>")}} + - : 任意の数のテキスト文字です。ラテン文字以外は Unicode エスケープシーケンスでエンコードする必要があります。例えば `\000A9` は著作権記号を表します。 + +### 形式文法 + +{{CSSSyntax}} + +## 例 + +### 既定値と upper-roman との比較 + +#### 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) ; +} +``` + +#### 結果 + +{{EmbedLiveSample("default_value_compared_to_upper_Roman", "100%", 150)}} + +### decimal-leading-zero と lower-alpha との比較 + +#### 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); +} +``` + +#### 結果 + +{{EmbedLiveSample("decimal-leading-zero_compared_to_lower-alpha", "100%", 150)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS カウンターの使用](/ja/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters) +- {{cssxref("counter-set")}} +- {{cssxref("counter-reset")}} +- {{cssxref("counter-increment")}} +- {{cssxref("@counter-style")}} +- CSS の [`counter()`](/ja/docs/Web/CSS/counter()) 関数 +- {{cssxref("::marker")}} diff --git a/files/ja/web/css/cross-fade()/index.md b/files/ja/web/css/cross-fade()/index.md deleted file mode 100644 index b654ae148f..0000000000 --- a/files/ja/web/css/cross-fade()/index.md +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: cross-fade() -slug: Web/CSS/cross-fade() -tags: - - CSS - - CSS 関数 - - CSS-4 画像 - - 実験的 - - 関数 - - Reference - - ウェブ -browser-compat: css.types.image.cross-fade -translation_of: Web/CSS/cross-fade() ---- -{{CSSRef}} - -**`cross-fade()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、2 枚以上の画像を所定の透過度で合成するために使用することができます。これは単色で色を薄めたり、放射状グラデーションとの組み合わせでページの特定の領域を強調させたりするような、数多くの単純な画像加工に使用することができます。 - -## 構文 - -**重要**: 仕様書と現在の実装とで構文が異なっています。仕様書の構文を先に説明します。 - -## 仕様書上の構文 - -`cross-fade()` 関数は、画像と、他の画像と合成したときにそれぞれの画像が占める割合を定義したパーセント値のリストを取ります。パーセント値は引用符なしで記述し、`'%'` 記号を含め、 0% から 100% までの間である必要があります。 - -この関数は CSS の中で、通常の画像の参照が利用できるところならばどこでも利用できます。 - -#### cross-fade のパーセント値 - -子のパーセント値は、それぞれの画像の混合率の値と考えてください。つまり、0% の値は画像が完全に透明であり、100% の値は完全に不透明になります。 - -```css -cross-fade( url(white.png) 0%, url(black.png) 100%); /* 完全に黒 */ -cross-fade( url(white.png) 25%, url(black.png) 75%); /* 黒 25%、白 75% */ -cross-fade( url(white.png) 50%, url(black.png) 50%); /* 黒 50%、白 50% */ -cross-fade( url(white.png) 75%, url(black.png) 25%); /* 白 75%、黒 25% */ -cross-fade( url(white.png) 100%, url(black.png) 0%); /* 完全に白 */ -cross-fade( url(green.png) 75%, url(red.png) 75%); /* 緑と赤がともに 75% */ -``` - -パーセント値が省略された場合は、指定されたすべてのパーセント値が合計され、`100%` から減算されます。その結果が `0%` より大きい場合は、パーセント値が省略されているすべての画像で均等に分割されます。 - -最も単純なケースは、2 つの画像を互いにフェードアウトさせる場合です。そのためには、パーセント値を設定する必要があるのは片方の画像だけで、もう片方の画像はそれに応じてフェードされます。例えば、1 枚目の画像に 0% の値を設定すると 2 枚目の画像のみが表示され、100% の値を設定すると 1 枚目の画像のみが表示されます。25% の値を設定すると、1 枚目の画像は 25%、2 枚目の画像は 75% で表示されます。75% の場合はその逆で、1 枚目が 75%、2 枚目が 25% になります。 - -以下のように書くこともできます。 - -```css -cross-fade( url(white.png) 0%, url(black.png)); /* 完全に黒 */ -cross-fade( url(white.png) 25%, url(black.png)); /* 黒 25%、白 75% */ -cross-fade( url(white.png), url(black.png)); /* 白 50%、白 50% */ -cross-fade( url(white.png) 75%, url(black.png)); /* 白 75%、黒 25% */ -cross-fade( url(white.png) 100%, url(black.png)); /* 完全に白 */ -cross-fade( url(green.png) 75%, url(red.png) 75%); /* 緑と赤がともに 75% */ -``` - -パーセント値が宣言されていない場合は、両方の画像が 50% の混合率となり、cross-fade では両方の画像が均等に合成されたように描画されます。上述の 50%/50% の例では、パーセント値を記載する必要はありませんでした。パーセント値が省略された場合、含まれるパーセント値が合計され、100% から差し引かれます。その結果、0 より大きい場合は、パーセント値が省略されたすべての画像で均等に分割されます。 - -最後の例では、両方のパーセント値の合計が 100% ではないため、両方の画像にそれぞれの混合率が含まれています。 - -パーセント値が宣言されておらず、3 つの画像が含まれている場合、それぞれの画像は 33.33% の混合率になります。以下の 2 つは (ほぼ) 同じ線です。 - -```css -cross-fade( url(red.png), url(yellow.png), url(blue.png)); /* 3 つとも 33.3333% の混合率となる */ -cross-fade( url(red.png) 33.33%, url(yellow.png) 33.33%, url(blue.png) 33.33%); -``` - -### 古い、実装されている構文 - -```css -cross-fade( , , ) -``` - -`cross-fade()` 関数の仕様では、複数の画像を指定し、それぞれの画像に他の値とは独立した透明度の値を持たせることができます。これは必ずしもそうではありませんでした。一部のブラウザーで実装されている元の構文では、2 つの画像しか使用できず、その 2 つの画像の透明度の合計がちょうど 100% になります。オリジナルの構文は Safari が対応しており、`-webkit-` の接頭辞付きのものは Chrome、Opera、その他の blink ベースのブラウザーで対応しています。 - -```css -cross-fade(url(white.png), url(black.png), 0%); /* 完全に黒 */ -cross-fade(url(white.png), url(black.png), 25%); /* 黒 25%、白 75% */ -cross-fade(url(white.png), url(black.png), 50%); /* 白 50%、白 50% */ -cross-fade(url(white.png), url(black.png), 75%); /* 白 75%、黒 25% */ -cross-fade(url(white.png), url(black.png), 100%); /* 完全に白 */ -``` - -実装されている構文では、カンマで区切られた 2 つの画像を最初に宣言し、その後にカンマと必要なパーセント値を宣言します。カンマやパーセント値を省略すると、その値は無効になります。パーセント値は、最初に宣言された画像の混合率です。含まれるパーセントは 100% から差し引かれ、その差が 2 番目の画像の混合率になります。 - -仕様書の構文の項にある緑/赤の例 (パーセント値の合計が 150%) と黄/赤/青の例 (3 つの画像を使用) は、この実装では不可能です。 - -## アクセシビリティの考慮 - -ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に読み上げアプリにとって重要であり、読み上げアプリはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。背景画像を使用する場合は、色のコントラストを大きくして、画像がない場合と同様に、画像の上にどのような文字も読み取れるようにしてください。 - -- [MDN "WCAG を理解する ― ガイドライン 1.1 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content) -- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) - -## 形式文法 - -{{csssyntax}} - -## 例 - -

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%); -} -``` - -#### 結果 - -{{EmbedLiveSample("Older_syntax_for_cross-fade", "330", "330")}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("image")}} -- {{cssxref("url()")}} -- {{cssxref("image/image()", "image()")}} -- {{cssxref("image/image-set()", "image-set()")}} -- {{cssxref("element()")}} -- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) -- グラデーション関数: {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} diff --git a/files/ja/web/css/cross-fade/index.md b/files/ja/web/css/cross-fade/index.md new file mode 100644 index 0000000000..ed47aea7f2 --- /dev/null +++ b/files/ja/web/css/cross-fade/index.md @@ -0,0 +1,147 @@ +--- +title: cross-fade() +slug: Web/CSS/cross-fade +tags: + - CSS + - CSS 関数 + - CSS-4 画像 + - 実験的 + - 関数 + - Reference + - ウェブ +translation_of: Web/CSS/cross-fade() +original_slug: Web/CSS/cross-fade() +browser-compat: css.types.image.cross-fade +--- +{{CSSRef}} + +**`cross-fade()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、2 枚以上の画像を所定の透過度で合成するために使用することができます。これは単色で色を薄めたり、放射状グラデーションとの組み合わせでページの特定の領域を強調させたりするような、数多くの単純な画像加工に使用することができます。 + +## 構文 + +**重要**: 仕様書と現在の実装とで構文が異なっています。仕様書の構文を先に説明します。 + +## 仕様書上の構文 + +`cross-fade()` 関数は、画像と、他の画像と合成したときにそれぞれの画像が占める割合を定義したパーセント値のリストを取ります。パーセント値は引用符なしで記述し、`'%'` 記号を含め、 0% から 100% までの間である必要があります。 + +この関数は CSS の中で、通常の画像の参照が利用できるところならばどこでも利用できます。 + +#### cross-fade のパーセント値 + +子のパーセント値は、それぞれの画像の混合率の値と考えてください。つまり、0% の値は画像が完全に透明であり、100% の値は完全に不透明になります。 + +```css +cross-fade( url(white.png) 0%, url(black.png) 100%); /* 完全に黒 */ +cross-fade( url(white.png) 25%, url(black.png) 75%); /* 黒 25%、白 75% */ +cross-fade( url(white.png) 50%, url(black.png) 50%); /* 黒 50%、白 50% */ +cross-fade( url(white.png) 75%, url(black.png) 25%); /* 白 75%、黒 25% */ +cross-fade( url(white.png) 100%, url(black.png) 0%); /* 完全に白 */ +cross-fade( url(green.png) 75%, url(red.png) 75%); /* 緑と赤がともに 75% */ +``` + +パーセント値が省略された場合は、指定されたすべてのパーセント値が合計され、`100%` から減算されます。その結果が `0%` より大きい場合は、パーセント値が省略されているすべての画像で均等に分割されます。 + +最も単純なケースは、2 つの画像を互いにフェードアウトさせる場合です。そのためには、パーセント値を設定する必要があるのは片方の画像だけで、もう片方の画像はそれに応じてフェードされます。例えば、1 枚目の画像に 0% の値を設定すると 2 枚目の画像のみが表示され、100% の値を設定すると 1 枚目の画像のみが表示されます。25% の値を設定すると、1 枚目の画像は 25%、2 枚目の画像は 75% で表示されます。75% の場合はその逆で、1 枚目が 75%、2 枚目が 25% になります。 + +以下のように書くこともできます。 + +```css +cross-fade( url(white.png) 0%, url(black.png)); /* 完全に黒 */ +cross-fade( url(white.png) 25%, url(black.png)); /* 黒 25%、白 75% */ +cross-fade( url(white.png), url(black.png)); /* 白 50%、白 50% */ +cross-fade( url(white.png) 75%, url(black.png)); /* 白 75%、黒 25% */ +cross-fade( url(white.png) 100%, url(black.png)); /* 完全に白 */ +cross-fade( url(green.png) 75%, url(red.png) 75%); /* 緑と赤がともに 75% */ +``` + +パーセント値が宣言されていない場合は、両方の画像が 50% の混合率となり、cross-fade では両方の画像が均等に合成されたように描画されます。上述の 50%/50% の例では、パーセント値を記載する必要はありませんでした。パーセント値が省略された場合、含まれるパーセント値が合計され、100% から差し引かれます。その結果、0 より大きい場合は、パーセント値が省略されたすべての画像で均等に分割されます。 + +最後の例では、両方のパーセント値の合計が 100% ではないため、両方の画像にそれぞれの混合率が含まれています。 + +パーセント値が宣言されておらず、3 つの画像が含まれている場合、それぞれの画像は 33.33% の混合率になります。以下の 2 つは (ほぼ) 同じ線です。 + +```css +cross-fade( url(red.png), url(yellow.png), url(blue.png)); /* 3 つとも 33.3333% の混合率となる */ +cross-fade( url(red.png) 33.33%, url(yellow.png) 33.33%, url(blue.png) 33.33%); +``` + +### 古い、実装されている構文 + +```css +cross-fade( , , ) +``` + +`cross-fade()` 関数の仕様では、複数の画像を指定し、それぞれの画像に他の値とは独立した透明度の値を持たせることができます。これは必ずしもそうではありませんでした。一部のブラウザーで実装されている元の構文では、2 つの画像しか使用できず、その 2 つの画像の透明度の合計がちょうど 100% になります。オリジナルの構文は Safari が対応しており、`-webkit-` の接頭辞付きのものは Chrome、Opera、その他の blink ベースのブラウザーで対応しています。 + +```css +cross-fade(url(white.png), url(black.png), 0%); /* 完全に黒 */ +cross-fade(url(white.png), url(black.png), 25%); /* 黒 25%、白 75% */ +cross-fade(url(white.png), url(black.png), 50%); /* 白 50%、白 50% */ +cross-fade(url(white.png), url(black.png), 75%); /* 白 75%、黒 25% */ +cross-fade(url(white.png), url(black.png), 100%); /* 完全に白 */ +``` + +実装されている構文では、カンマで区切られた 2 つの画像を最初に宣言し、その後にカンマと必要なパーセント値を宣言します。カンマやパーセント値を省略すると、その値は無効になります。パーセント値は、最初に宣言された画像の混合率です。含まれるパーセントは 100% から差し引かれ、その差が 2 番目の画像の混合率になります。 + +仕様書の構文の項にある緑/赤の例 (パーセント値の合計が 150%) と黄/赤/青の例 (3 つの画像を使用) は、この実装では不可能です。 + +## アクセシビリティの考慮 + +ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に読み上げアプリにとって重要であり、読み上げアプリはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。背景画像を使用する場合は、色のコントラストを大きくして、画像がない場合と同様に、画像の上にどのような文字も読み取れるようにしてください。 + +- [MDN "WCAG を理解する ― ガイドライン 1.1 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content) +- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) + +## 形式文法 + +{{csssyntax}} + +## 例 + +

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%); +} +``` + +#### 結果 + +{{EmbedLiveSample("Older_syntax_for_cross-fade", "330", "330")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("image")}} +- {{cssxref("url()")}} +- {{cssxref("image/image()", "image()")}} +- {{cssxref("image/image-set()", "image-set()")}} +- {{cssxref("element()")}} +- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- グラデーション関数: {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} diff --git a/files/ja/web/css/element()/index.md b/files/ja/web/css/element()/index.md deleted file mode 100644 index f790c32369..0000000000 --- a/files/ja/web/css/element()/index.md +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: element() -slug: Web/CSS/element() -tags: - - CSS - - CSS 関数 - - CSS4-images - - 関数 - - レイアウト - - Reference - - ウェブ -browser-compat: css.types.image.element -translation_of: Web/CSS/element() ---- -{{CSSRef}}{{SeeCompatTable}} - -**`element()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、任意の HTML 要素から生成された {{cssxref("<image>")}} 値を定義します。この画像は動的で、HTML 要素が変更されると、この関数の結果を使う CSS プロパティが自動的に更新されます。 - -特に便利な使い道としては、HTML の {{HTMLElement("canvas")}} 要素の画像を背景に使うというものです。 - -Gecko ブラウザーでは、標準外の {{domxref("document.mozSetImageElement()")}} メソッドで背景として使われる要素を既定の CSS の背景要素と取り替えることができます。 - -## 構文 - -```css -element(id) -``` - -ここで: - -- _id_ - - : 背景として使う要素の ID です。要素の HTML 属性 #_id_ に定義されているものです。 - -## 例 - -この例を[ライブで見る](https://media.prod.mdn.mozit.cloud/samples/cssref/moz-element.html)には、`-moz-element()` に対応している Firefox が必要です。 - -

いくらか現実的な例

- -この例では hidden 状態の {{HTMLElement("div")}} を背景に使います。背景要素はグラデーションを使うだけでなく、背景の一部として描画されるテキストも含んでいます。 - -```html -
-

This box uses the element with the #myBackground1 ID as its background!

-
- -
-
-

This text is part of the background. Cool, huh?

-
-
-``` - -"myBackground1" という ID を持つ {{HTMLElement("div")}} 要素が、"This box uses the element with the #myBackground1 ID as its background!" という段落を含むコンテンツの背景に使われています。 - -![](example1.png) - -

いくらか突飛な例

- -この例は hidden 状態の {{HTMLElement("button")}} 要素を、背景の繰り返しパターンとして使います。これは、好きな要素を背景として使うことができるという例ですが、すぐれたデザインとはいえないかもしれません。 - -```html -
-
- -
- -
-``` - -![](example2.png) - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("image/image()", "image()")}} -- {{cssxref("image/image-set()", "image-set()")}} -- {{cssxref("<image>")}} -- {{cssxref("<gradient>")}} -- {{cssxref("element()")}} -- {{cssxref("cross-fade()")}} -- {{domxref("document.mozSetImageElement()")}} diff --git a/files/ja/web/css/element/index.md b/files/ja/web/css/element/index.md new file mode 100644 index 0000000000..bdd17e1c78 --- /dev/null +++ b/files/ja/web/css/element/index.md @@ -0,0 +1,90 @@ +--- +title: element() +slug: Web/CSS/element +tags: + - CSS + - CSS 関数 + - CSS4-images + - 関数 + - レイアウト + - Reference + - ウェブ +translation_of: Web/CSS/element() +original_slug: Web/CSS/element() +browser-compat: css.types.image.element +--- +{{CSSRef}}{{SeeCompatTable}} + +**`element()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、任意の HTML 要素から生成された {{cssxref("<image>")}} 値を定義します。この画像は動的で、HTML 要素が変更されると、この関数の結果を使う CSS プロパティが自動的に更新されます。 + +特に便利な使い道としては、HTML の {{HTMLElement("canvas")}} 要素の画像を背景に使うというものです。 + +Gecko ブラウザーでは、標準外の {{domxref("document.mozSetImageElement()")}} メソッドで背景として使われる要素を既定の CSS の背景要素と取り替えることができます。 + +## 構文 + +```css +element(id) +``` + +ここで: + +- _id_ + - : 背景として使う要素の ID です。要素の HTML 属性 #_id_ に定義されているものです。 + +## 例 + +この例を[ライブで見る](https://media.prod.mdn.mozit.cloud/samples/cssref/moz-element.html)には、`-moz-element()` に対応している Firefox が必要です。 + +

いくらか現実的な例

+ +この例では hidden 状態の {{HTMLElement("div")}} を背景に使います。背景要素はグラデーションを使うだけでなく、背景の一部として描画されるテキストも含んでいます。 + +```html +
+

This box uses the element with the #myBackground1 ID as its background!

+
+ +
+
+

This text is part of the background. Cool, huh?

+
+
+``` + +"myBackground1" という ID を持つ {{HTMLElement("div")}} 要素が、"This box uses the element with the #myBackground1 ID as its background!" という段落を含むコンテンツの背景に使われています。 + +![](example1.png) + +

いくらか突飛な例

+ +この例は hidden 状態の {{HTMLElement("button")}} 要素を、背景の繰り返しパターンとして使います。これは、好きな要素を背景として使うことができるという例ですが、すぐれたデザインとはいえないかもしれません。 + +```html +
+
+ +
+ +
+``` + +![](example2.png) + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("image/image()", "image()")}} +- {{cssxref("image/image-set()", "image-set()")}} +- {{cssxref("<image>")}} +- {{cssxref("<gradient>")}} +- {{cssxref("element()")}} +- {{cssxref("cross-fade()")}} +- {{domxref("document.mozSetImageElement()")}} diff --git a/files/ja/web/css/env()/index.md b/files/ja/web/css/env()/index.md deleted file mode 100644 index 818c2fbfdf..0000000000 --- a/files/ja/web/css/env()/index.md +++ /dev/null @@ -1,222 +0,0 @@ ---- -title: env() -slug: Web/CSS/env() -tags: - - CSS - - CSS 変数 - - CSS 関数 - - Draft - - 関数 - - リファレンス - - 変数 - - env - - env() -browser-compat: css.properties.custom-property.env -translation_of: Web/CSS/env() ---- -{{CSSRef}} - -**`env()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、ユーザーエージェントが定義した環境変数の値を、 {{cssxref("var()")}} 関数や[カスタムプロパティ](/ja/docs/Web/CSS/--*)と同じ方法で CSS に挿入するために使用することができます。異なる点は、ユーザーが定義しているのではなくユーザーエージェントが定義しているものであること、カスタムプロパティは宣言されている要素のスコープであるのに対し、環境変数は文書でグローバルなスコープであることです。 - -加えて、宣言の外部で使用することができないカスタムプロパティとは異なり、 `env()` 関数はプロパティ値の任意の部分、記述子の任意の部分 (例 [メディアクエリールール](/ja/docs/Web/CSS/@media)) で使用することができます。仕様書が発展すると、セレクターなどの他の場所でも使用することができるかもしれません。 - -もともとは iOS ブラウザーで、開発者が内容物をビューポートの安全な領域に配置できるように提供されていたもので、仕様で定義されている `safe-area-inset-*` の値を使用することで、矩形以外の画面を使用している閲覧者でも、内容物が見えることを保証するのに役立ちます。 - -例えば、 `env()` によって解決される一般的な問題として、端末の通知がアプリのユーザーインターフェースの一部を覆ってしまうというものがあります。 `env()` を使って固定要素を配置することで、ビューポートの安全な領域に確実に表示させることができます。 - -`env()` 変数のもう一つの使用例は、アプリケーションのウィンドウの表面積をフルに活用するために、ウィンドウ制御オーバーレイ機能を使用するデスクトップの[プログレッシブウェブアプリ](/ja/docs/Web/Progressive_web_apps) (PWA) のためのものです。 `titlebar-area-*` 値を使用すると、タイトルバーがあったであろう場所に要素を配置し、内容物がウィンドウ制御ボタンにかからないようにすることができます。 - -## 構文 - -```css -/* 代替値なしで 4 つの安全な矩形までの寸法値を使用 */ -env(safe-area-inset-top); -env(safe-area-inset-right); -env(safe-area-inset-bottom); -env(safe-area-inset-left); - -/* 代替値付きで使用 */ -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); -``` - -### 値 - -- `safe-area-inset-top`, `safe-area-inset-right`, `safe-area-inset-bottom`, `safe-area-inset-left` - - : `safe-area-inset-*` の値は 4 つの環境変数から成り、矩形ではない画面において、ビューポートの縁から、内容物を置いても切り取られる危険がない安全な矩形までの寸法を、上、右、下、左で定義します。一般的なノートパソコンのモニターなどの矩形のビューポートでは、これらの値はゼロに等しくなります。矩形ではない画面 — 例えば円い腕時計の画面 — では、矩形の中のすべての内容物が表示できるような矩形から、ユーザーエージェントが設定します。 -- `titlebar-area-x`, `titlebar-area-y`, `titlebar-area-width`, `titlebar-area-height` - - : `titlebar-area-*` 変数は、デスクトップ端末にインストールされた PWA に有用です。デスクトップの PWA が `window-controls-overlay` で [display_override](/ja/docs/Web/Manifest/display_override) の値を使用すると、 `titlebar-area-*` 変数を使用して内容物がウィンドウの制御ボタン（すなわち、最小化、最大化、閉じるボタン）に重ならないようにすることができます。 - -**注**: ほかの CSS プロパティとは異なり、ユーザーエージェントの定義するプロパティ名は大文字・小文字が区別されます。 - -### 形式文法 - -{{CSSSyntax}} - -## 使用方法 - -ブラウザーに画面上の利用可能な範囲全体を使用するように指示し、 `env()` 変数を使用できるようにするには、新しいビューポートのメタ値を追加する必要があります。 - -```html - -``` - -You can then use `env()` in your CSS: - -```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); -} -``` - -## 例 - -### env() を使用して端末の UI がボタンに被らないようにする - -次の例では、 `env()` を使用して、固定アプリのツールバーのボタンが、画面の下部に表示される端末の通知によって隠れないようにしています。デスクトップでは、 `safe-area-inset-bottom` は `0` です。しかし、 iOS のような画面下部に通知を表示する端末では、通知を表示するためのスペースを残す値が含まれています。これを {{cssxref("padding-bottom")}} の値として使用することで、その端末で自然に見える隙間を作ることができます。 - -```html -
アプリのメイン内容物はこちらです。
-
- - -
-``` - -```css -body { - display: flex; - flex-direction: column; - min-height: 100vh; - font: 1em system-ui; -} - -main { - flex: 1; - background-color: #eee; - padding: 1em; -} - -footer { - flex: none; - display: flex; - gap: 1em; - justify-content: space-evenly; - background: black; - padding: 1em 1em calc(1em + env(safe-area-inset-bottom)); - /* safe-area-inset-bottom の値を最初の 1em のパディングに追加します。 - この変数が正の値であるデバイスでは、より大きな黒い領域が表示されます。 */ - position: sticky; - bottom: 0; -} - -button { - padding: 1em; - background: white; - color: black; - margin: 0; - width: 100%; - border: none; - font: 1em system-ui; -} -``` - -{{EmbedLiveSample("Using_env_to_ensure_buttons_are_not_obscured_by_device_UI", "200px", "500px")}} - -### 代替値の仕様 - -以下の例では、 `env()` の第 2 引数を使用して、環境変数が利用できなかった場合の代替値を提供しています。 - -```html -

- お使いのブラウザーが env() 関数に対応している場合、 - この段落のテキストと左の境界の間に 50px のパディングが設定されますが、 - 上、右、下には設定されません。 - これは、他の CSS プロパティとは異なり、ユーザーエージェントプロパティ名は - 大文字・小文字が区別されるため、 padding: 0 0 0 50px - と同等の 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); -} -``` - -{{EmbedLiveSample("Using_the_fallback_value", "350px", "250px")}} - -### 値の例 - -```css -padding: env(safe-area-inset-bottom, 50px); /* 画面が矩形のユーザーエージェントではゼロ */ -padding: env(Safe-area-inset-bottom, 50px); /* UA プロパティは大文字・小文字を区別するため 50px */ -padding: env(x, 50px 20px); /* x が妥当な環境変数でなければ padding: '50px 20px' が設定される */ -padding: env(x, 50px, 20px); /* x が妥当な環境変数でなく、 '50px, 20px' が妥当なパディング値でないため無視 */ -``` - -代替値の構文は、カスタムプロパティの場合と同様、カンマが許容されます。ただし、プロパティ値がカンマに対応していない場合、値は妥当ではなくなります。 - -**注**: ユーザーエージェントプロパティは [all](/ja/docs/Web/CSS/all) プロパティでリセットされません。 - -### env() を使用して、デスクトップの PWA でウィンドウ制御ボタンが内容物に被らないようにする - -次の例では、ウィンドウ制御オーバーレイ機能を使用する PWA で表示される内容物が、オペレーティングシステムのウィンドウ制御ボタンで隠れないようにするために `env()` を使用しています。 `titlebar-area-*` の値は、通常タイトルバーが表示されていたであろう矩形を定義します。モバイル端末など、ウィンドウ制御オーバーレイ機能に対応していない端末では、代替値が使用されます。 - -デスクトップ端末にインストールされた PWA は、通常次のように表示されます。 - -![デスクトップにインストールされた PWA が通常どのように見えるかを示す図。ウィンドウの操作ボタンとタイトルバー、その下にウェブコンテンツが表示される。](desktop-pwa-window.png) - -ウィンドウ制御オーバーレイ機能では、ウェブコンテンツがアプリのウィンドウ表面全体を覆い、ウィンドウ制御ボタンや PWA ボタンがオーバーレイ表示されます。 - -![デスクトップにインストールされた PWA がウィンドウ制御オーバーレイ機能により、ウィンドウ制御ボタン、タイトルバーなし、ウィンドウ全体に広がるウェブコンテンツがどのように見えるかの図](desktop-pwa-window-wco.png) - -```html -
ここにアプリのタイトルが入る
-
ここにアプリのメインコンテンツが入る
-``` - -```css -header { - position: fixed; - left: env(titlebar-area-x); - top: env(titlebar-area-y); - width: env(titlebar-area-width); - height: env(titlebar-area-height); -} - -main { - margin-top: env(titlebar-area-height); -} -``` - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{CSSxRef("var()", "var(…)")}} -- [CSS カスタムプロパティと変数のカスケード](/ja/docs/Web/CSS/CSS_Variables) -- [カスタムプロパティ (--\*)](/ja/docs/Web/CSS/--*) -- [CSS カスタムプロパティ (変数) の使用](/ja/docs/Web/CSS/Using_CSS_custom_properties) -- {{CSSxRef("@viewport", "viewport-fit (@viewport)")}} -- [Customize the window controls overlay of your PWA's title bar](https://web.dev/window-controls-overlay/) -- [Display content in the title bar](https://docs.microsoft.com/microsoft-edge/progressive-web-apps-chromium/how-to/window-controls-overlay) -- [Breaking Out of the Box](https://alistapart.com/article/breaking-out-of-the-box/) diff --git a/files/ja/web/css/env/index.md b/files/ja/web/css/env/index.md new file mode 100644 index 0000000000..797bad559a --- /dev/null +++ b/files/ja/web/css/env/index.md @@ -0,0 +1,223 @@ +--- +title: env() +slug: Web/CSS/env +tags: + - CSS + - CSS 変数 + - CSS 関数 + - Draft + - 関数 + - リファレンス + - 変数 + - env + - env() +translation_of: Web/CSS/env() +original_slug: Web/CSS/env() +browser-compat: css.properties.custom-property.env +--- +{{CSSRef}} + +**`env()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、ユーザーエージェントが定義した環境変数の値を、 {{cssxref("var()")}} 関数や[カスタムプロパティ](/ja/docs/Web/CSS/--*)と同じ方法で CSS に挿入するために使用することができます。異なる点は、ユーザーが定義しているのではなくユーザーエージェントが定義しているものであること、カスタムプロパティは宣言されている要素のスコープであるのに対し、環境変数は文書でグローバルなスコープであることです。 + +加えて、宣言の外部で使用することができないカスタムプロパティとは異なり、 `env()` 関数はプロパティ値の任意の部分、記述子の任意の部分 (例 [メディアクエリールール](/ja/docs/Web/CSS/@media)) で使用することができます。仕様書が発展すると、セレクターなどの他の場所でも使用することができるかもしれません。 + +もともとは iOS ブラウザーで、開発者が内容物をビューポートの安全な領域に配置できるように提供されていたもので、仕様で定義されている `safe-area-inset-*` の値を使用することで、矩形以外の画面を使用している閲覧者でも、内容物が見えることを保証するのに役立ちます。 + +例えば、 `env()` によって解決される一般的な問題として、端末の通知がアプリのユーザーインターフェースの一部を覆ってしまうというものがあります。 `env()` を使って固定要素を配置することで、ビューポートの安全な領域に確実に表示させることができます。 + +`env()` 変数のもう一つの使用例は、アプリケーションのウィンドウの表面積をフルに活用するために、ウィンドウ制御オーバーレイ機能を使用するデスクトップの[プログレッシブウェブアプリ](/ja/docs/Web/Progressive_web_apps) (PWA) のためのものです。 `titlebar-area-*` 値を使用すると、タイトルバーがあったであろう場所に要素を配置し、内容物がウィンドウ制御ボタンにかからないようにすることができます。 + +## 構文 + +```css +/* 代替値なしで 4 つの安全な矩形までの寸法値を使用 */ +env(safe-area-inset-top); +env(safe-area-inset-right); +env(safe-area-inset-bottom); +env(safe-area-inset-left); + +/* 代替値付きで使用 */ +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); +``` + +### 値 + +- `safe-area-inset-top`, `safe-area-inset-right`, `safe-area-inset-bottom`, `safe-area-inset-left` + - : `safe-area-inset-*` の値は 4 つの環境変数から成り、矩形ではない画面において、ビューポートの縁から、内容物を置いても切り取られる危険がない安全な矩形までの寸法を、上、右、下、左で定義します。一般的なノートパソコンのモニターなどの矩形のビューポートでは、これらの値はゼロに等しくなります。矩形ではない画面 — 例えば円い腕時計の画面 — では、矩形の中のすべての内容物が表示できるような矩形から、ユーザーエージェントが設定します。 +- `titlebar-area-x`, `titlebar-area-y`, `titlebar-area-width`, `titlebar-area-height` + - : `titlebar-area-*` 変数は、デスクトップ端末にインストールされた PWA に有用です。デスクトップの PWA が `window-controls-overlay` で [display_override](/ja/docs/Web/Manifest/display_override) の値を使用すると、 `titlebar-area-*` 変数を使用して内容物がウィンドウの制御ボタン（すなわち、最小化、最大化、閉じるボタン）に重ならないようにすることができます。 + +**注**: ほかの CSS プロパティとは異なり、ユーザーエージェントの定義するプロパティ名は大文字・小文字が区別されます。 + +### 形式文法 + +{{CSSSyntax}} + +## 使用方法 + +ブラウザーに画面上の利用可能な範囲全体を使用するように指示し、 `env()` 変数を使用できるようにするには、新しいビューポートのメタ値を追加する必要があります。 + +```html + +``` + +You can then use `env()` in your CSS: + +```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); +} +``` + +## 例 + +### env() を使用して端末の UI がボタンに被らないようにする + +次の例では、 `env()` を使用して、固定アプリのツールバーのボタンが、画面の下部に表示される端末の通知によって隠れないようにしています。デスクトップでは、 `safe-area-inset-bottom` は `0` です。しかし、 iOS のような画面下部に通知を表示する端末では、通知を表示するためのスペースを残す値が含まれています。これを {{cssxref("padding-bottom")}} の値として使用することで、その端末で自然に見える隙間を作ることができます。 + +```html +
アプリのメイン内容物はこちらです。
+
+ + +
+``` + +```css +body { + display: flex; + flex-direction: column; + min-height: 100vh; + font: 1em system-ui; +} + +main { + flex: 1; + background-color: #eee; + padding: 1em; +} + +footer { + flex: none; + display: flex; + gap: 1em; + justify-content: space-evenly; + background: black; + padding: 1em 1em calc(1em + env(safe-area-inset-bottom)); + /* safe-area-inset-bottom の値を最初の 1em のパディングに追加します。 + この変数が正の値であるデバイスでは、より大きな黒い領域が表示されます。 */ + position: sticky; + bottom: 0; +} + +button { + padding: 1em; + background: white; + color: black; + margin: 0; + width: 100%; + border: none; + font: 1em system-ui; +} +``` + +{{EmbedLiveSample("Using_env_to_ensure_buttons_are_not_obscured_by_device_UI", "200px", "500px")}} + +### 代替値の仕様 + +以下の例では、 `env()` の第 2 引数を使用して、環境変数が利用できなかった場合の代替値を提供しています。 + +```html +

+ お使いのブラウザーが env() 関数に対応している場合、 + この段落のテキストと左の境界の間に 50px のパディングが設定されますが、 + 上、右、下には設定されません。 + これは、他の CSS プロパティとは異なり、ユーザーエージェントプロパティ名は + 大文字・小文字が区別されるため、 padding: 0 0 0 50px + と同等の 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); +} +``` + +{{EmbedLiveSample("Using_the_fallback_value", "350px", "250px")}} + +### 値の例 + +```css +padding: env(safe-area-inset-bottom, 50px); /* 画面が矩形のユーザーエージェントではゼロ */ +padding: env(Safe-area-inset-bottom, 50px); /* UA プロパティは大文字・小文字を区別するため 50px */ +padding: env(x, 50px 20px); /* x が妥当な環境変数でなければ padding: '50px 20px' が設定される */ +padding: env(x, 50px, 20px); /* x が妥当な環境変数でなく、 '50px, 20px' が妥当なパディング値でないため無視 */ +``` + +代替値の構文は、カスタムプロパティの場合と同様、カンマが許容されます。ただし、プロパティ値がカンマに対応していない場合、値は妥当ではなくなります。 + +**注**: ユーザーエージェントプロパティは [all](/ja/docs/Web/CSS/all) プロパティでリセットされません。 + +### env() を使用して、デスクトップの PWA でウィンドウ制御ボタンが内容物に被らないようにする + +次の例では、ウィンドウ制御オーバーレイ機能を使用する PWA で表示される内容物が、オペレーティングシステムのウィンドウ制御ボタンで隠れないようにするために `env()` を使用しています。 `titlebar-area-*` の値は、通常タイトルバーが表示されていたであろう矩形を定義します。モバイル端末など、ウィンドウ制御オーバーレイ機能に対応していない端末では、代替値が使用されます。 + +デスクトップ端末にインストールされた PWA は、通常次のように表示されます。 + +![デスクトップにインストールされた PWA が通常どのように見えるかを示す図。ウィンドウの操作ボタンとタイトルバー、その下にウェブコンテンツが表示される。](desktop-pwa-window.png) + +ウィンドウ制御オーバーレイ機能では、ウェブコンテンツがアプリのウィンドウ表面全体を覆い、ウィンドウ制御ボタンや PWA ボタンがオーバーレイ表示されます。 + +![デスクトップにインストールされた PWA がウィンドウ制御オーバーレイ機能により、ウィンドウ制御ボタン、タイトルバーなし、ウィンドウ全体に広がるウェブコンテンツがどのように見えるかの図](desktop-pwa-window-wco.png) + +```html +
ここにアプリのタイトルが入る
+
ここにアプリのメインコンテンツが入る
+``` + +```css +header { + position: fixed; + left: env(titlebar-area-x); + top: env(titlebar-area-y); + width: env(titlebar-area-width); + height: env(titlebar-area-height); +} + +main { + margin-top: env(titlebar-area-height); +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{CSSxRef("var()", "var(…)")}} +- [CSS カスタムプロパティと変数のカスケード](/ja/docs/Web/CSS/CSS_Variables) +- [カスタムプロパティ (--\*)](/ja/docs/Web/CSS/--*) +- [CSS カスタムプロパティ (変数) の使用](/ja/docs/Web/CSS/Using_CSS_custom_properties) +- {{CSSxRef("@viewport", "viewport-fit (@viewport)")}} +- [Customize the window controls overlay of your PWA's title bar](https://web.dev/window-controls-overlay/) +- [Display content in the title bar](https://docs.microsoft.com/microsoft-edge/progressive-web-apps-chromium/how-to/window-controls-overlay) +- [Breaking Out of the Box](https://alistapart.com/article/breaking-out-of-the-box/) diff --git a/files/ja/web/css/filter-function/blur()/index.md b/files/ja/web/css/filter-function/blur()/index.md deleted file mode 100644 index 8ff94873c5..0000000000 --- a/files/ja/web/css/filter-function/blur()/index.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: blur() -slug: Web/CSS/filter-function/blur() -tags: - - CSS - - CSS 関数 - - フィルター効果 - - 関数 - - リファレンス -browser-compat: css.types.filter-function.blur -translation_of: Web/CSS/filter-function/blur() ---- -{{CSSRef}} - -**`blur()`** は [CSS](/ja/docs/Web/CSS) の関数で、入力画像に[ガウシアンぼかし](https://ja.wikipedia.org/wiki/%E3%82%AC%E3%82%A6%E3%82%B7%E3%82%A2%E3%83%B3%E3%81%BC%E3%81%8B%E3%81%97)を適用します。返値は {{cssxref("<filter-function>")}} です。 - -{{EmbedInteractiveExample("pages/css/function-blur.html")}} - -## 構文 - -```css -blur(radius) -``` - -### 引数 - -- `radius` - - : ぼかしの半径で、 {{cssxref("<length>")}} で指定します。ガウス関数の標準偏差の値を定義します。つまり、画面上のピクセルをいくつ互いに混合するかということです。すなわち、大きい値になるほどよりぼかしが入ります。 `0` の値は入力を変更しません。補間時の欠損値は `0` です。 - -## 例 - -### ピクセル数と rem を用いた blur の設定 - -```css -blur(0) /* 効果なし */ -blur(8px) /* 半径 8px でぼかす */ -blur(1.17rem) /* 半径 1.17rem でぼかす */ -``` - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("<filter-function>")}} -- {{cssxref("filter-function/brightness()", "brightness()")}} -- {{cssxref("filter-function/contrast()", "contrast()")}} -- {{cssxref("filter-function/drop-shadow()", "drop-shadow()")}} -- {{cssxref("filter-function/grayscale()", "grayscale()")}} -- {{cssxref("filter-function/hue-rotate()", "hue-rotate()")}} -- {{cssxref("filter-function/invert()", "invert()")}} -- {{cssxref("filter-function/opacity()", "opacity()")}} -- {{cssxref("filter-function/saturate()", "saturate()")}} -- {{cssxref("filter-function/sepia()", "sepia()")}} diff --git a/files/ja/web/css/filter-function/blur/index.md b/files/ja/web/css/filter-function/blur/index.md new file mode 100644 index 0000000000..c2d632c8de --- /dev/null +++ b/files/ja/web/css/filter-function/blur/index.md @@ -0,0 +1,60 @@ +--- +title: blur() +slug: Web/CSS/filter-function/blur +tags: + - CSS + - CSS 関数 + - フィルター効果 + - 関数 + - リファレンス +translation_of: Web/CSS/filter-function/blur() +original_slug: Web/CSS/filter-function/blur() +browser-compat: css.types.filter-function.blur +--- +{{CSSRef}} + +**`blur()`** は [CSS](/ja/docs/Web/CSS) の関数で、入力画像に[ガウシアンぼかし](https://ja.wikipedia.org/wiki/%E3%82%AC%E3%82%A6%E3%82%B7%E3%82%A2%E3%83%B3%E3%81%BC%E3%81%8B%E3%81%97)を適用します。返値は {{cssxref("<filter-function>")}} です。 + +{{EmbedInteractiveExample("pages/css/function-blur.html")}} + +## 構文 + +```css +blur(radius) +``` + +### 引数 + +- `radius` + - : ぼかしの半径で、 {{cssxref("<length>")}} で指定します。ガウス関数の標準偏差の値を定義します。つまり、画面上のピクセルをいくつ互いに混合するかということです。すなわち、大きい値になるほどよりぼかしが入ります。 `0` の値は入力を変更しません。補間時の欠損値は `0` です。 + +## 例 + +### ピクセル数と rem を用いた blur の設定 + +```css +blur(0) /* 効果なし */ +blur(8px) /* 半径 8px でぼかす */ +blur(1.17rem) /* 半径 1.17rem でぼかす */ +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("<filter-function>")}} +- {{cssxref("filter-function/brightness()", "brightness()")}} +- {{cssxref("filter-function/contrast()", "contrast()")}} +- {{cssxref("filter-function/drop-shadow()", "drop-shadow()")}} +- {{cssxref("filter-function/grayscale()", "grayscale()")}} +- {{cssxref("filter-function/hue-rotate()", "hue-rotate()")}} +- {{cssxref("filter-function/invert()", "invert()")}} +- {{cssxref("filter-function/opacity()", "opacity()")}} +- {{cssxref("filter-function/saturate()", "saturate()")}} +- {{cssxref("filter-function/sepia()", "sepia()")}} diff --git a/files/ja/web/css/filter-function/brightness()/index.md b/files/ja/web/css/filter-function/brightness()/index.md deleted file mode 100644 index bdabac3a94..0000000000 --- a/files/ja/web/css/filter-function/brightness()/index.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: brightness() -slug: Web/CSS/filter-function/brightness() -tags: - - CSS - - CSS 関数 - - フィルター効果 - - 関数 - - リファレンス -browser-compat: css.types.filter-function.brightness -translation_of: Web/CSS/filter-function/brightness() ---- -{{CSSRef}} - -**`brightness()`** は [CSS](/ja/docs/Web/CSS) の関数で、入力画像に線形乗算を適用し、明るくしたり暗くしたりします。その結果は {{cssxref("<filter-function>")}} です。 - -{{EmbedInteractiveExample("pages/css/function-brightness.html")}} - -## 構文 - -```css -brightness(amount) -``` - -### 引数 - -- `amount` - - : 結果の明るさで、 {{cssxref("<number>")}} または {{cssxref("<percentage>")}} で指定します。 `100%` 未満の値では画像が暗くなり、 `100%` を超える値では画像が明るくなります。 `0%` の値では画像が完全に黒くなり、 `100%` の値では入力が変更されないままになります。補間時の欠損値は `1` です。 - -## 例 - -### 数値とパーセント値を用いた brightness の設定 - -```css ->brightness(0%) /* 完全に黒 */ -brightness(0.4) /* 明るさ 40% */ -brightness(1) /* 効果なし */ -brightness(200%) /* 明るさ 2 倍 */ -``` - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("<filter-function>")}} -- {{cssxref("filter-function/blur()", "blur()")}} -- {{cssxref("filter-function/contrast()", "contrast()")}} -- {{cssxref("filter-function/drop-shadow()", "drop-shadow()")}} -- {{cssxref("filter-function/grayscale()", "grayscale()")}} -- {{cssxref("filter-function/hue-rotate()", "hue-rotate()")}} -- {{cssxref("filter-function/invert()", "invert()")}} -- {{cssxref("filter-function/opacity()", "opacity()")}} -- {{cssxref("filter-function/saturate()", "saturate()")}} -- {{cssxref("filter-function/sepia()", "sepia()")}} diff --git a/files/ja/web/css/filter-function/brightness/index.md b/files/ja/web/css/filter-function/brightness/index.md new file mode 100644 index 0000000000..152694ef5f --- /dev/null +++ b/files/ja/web/css/filter-function/brightness/index.md @@ -0,0 +1,61 @@ +--- +title: brightness() +slug: Web/CSS/filter-function/brightness +tags: + - CSS + - CSS 関数 + - フィルター効果 + - 関数 + - リファレンス +translation_of: Web/CSS/filter-function/brightness() +original_slug: Web/CSS/filter-function/brightness() +browser-compat: css.types.filter-function.brightness +--- +{{CSSRef}} + +**`brightness()`** は [CSS](/ja/docs/Web/CSS) の関数で、入力画像に線形乗算を適用し、明るくしたり暗くしたりします。その結果は {{cssxref("<filter-function>")}} です。 + +{{EmbedInteractiveExample("pages/css/function-brightness.html")}} + +## 構文 + +```css +brightness(amount) +``` + +### 引数 + +- `amount` + - : 結果の明るさで、 {{cssxref("<number>")}} または {{cssxref("<percentage>")}} で指定します。 `100%` 未満の値では画像が暗くなり、 `100%` を超える値では画像が明るくなります。 `0%` の値では画像が完全に黒くなり、 `100%` の値では入力が変更されないままになります。補間時の欠損値は `1` です。 + +## 例 + +### 数値とパーセント値を用いた brightness の設定 + +```css +>brightness(0%) /* 完全に黒 */ +brightness(0.4) /* 明るさ 40% */ +brightness(1) /* 効果なし */ +brightness(200%) /* 明るさ 2 倍 */ +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("<filter-function>")}} +- {{cssxref("filter-function/blur()", "blur()")}} +- {{cssxref("filter-function/contrast()", "contrast()")}} +- {{cssxref("filter-function/drop-shadow()", "drop-shadow()")}} +- {{cssxref("filter-function/grayscale()", "grayscale()")}} +- {{cssxref("filter-function/hue-rotate()", "hue-rotate()")}} +- {{cssxref("filter-function/invert()", "invert()")}} +- {{cssxref("filter-function/opacity()", "opacity()")}} +- {{cssxref("filter-function/saturate()", "saturate()")}} +- {{cssxref("filter-function/sepia()", "sepia()")}} diff --git a/files/ja/web/css/filter-function/contrast()/index.md b/files/ja/web/css/filter-function/contrast()/index.md deleted file mode 100644 index 10c8968679..0000000000 --- a/files/ja/web/css/filter-function/contrast()/index.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: contrast() -slug: Web/CSS/filter-function/contrast() -tags: - - CSS - - CSS 関数 - - フィルター効果 - - 関数 - - リファレンス -browser-compat: css.types.filter-function.contrast -translation_of: Web/CSS/filter-function/contrast() ---- -{{CSSRef}} - -**`contrast()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、入力画像のコントラストを調整します。結果は {{cssxref("<filter-function>")}} です。 - -{{EmbedInteractiveExample("pages/css/function-contrast.html")}} - -## 構文 - -```css -contrast(amount) -``` - -### 引数 - -- `amount` - - : 結果のコントラストで、 {{cssxref("<number>")}} または {{cssxref("<percentage>")}} で指定します。 `100%` 未満の値ではコントラストが下がり、 `100%` を超える値ではコントラストが上がります。 `0%` の値では画像が完全に灰色になり、 `100%` の値では入力が変更されないままになります。補間時の欠損値は `1` です。 - -## 例 - -### 数値とパーセント値を使用した contrast の設定 - -```css -contrast(0) /* 完全な灰色 */ -contrast(65%) /* 65% のコントラスト */ -contrast(1) /* 効果なし */ -contrast(200%) /* 2 倍のコントラスト */ -``` - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("<filter-function>")}} -- {{cssxref("filter-function/blur()", "blur()")}} -- {{cssxref("filter-function/brightness()", "brightness()")}} -- {{cssxref("filter-function/drop-shadow()", "drop-shadow()")}} -- {{cssxref("filter-function/grayscale()", "grayscale()")}} -- {{cssxref("filter-function/hue-rotate()", "hue-rotate()")}} -- {{cssxref("filter-function/invert()", "invert()")}} -- {{cssxref("filter-function/opacity()", "opacity()")}} -- {{cssxref("filter-function/saturate()", "saturate()")}} -- {{cssxref("filter-function/sepia()", "sepia()")}} diff --git a/files/ja/web/css/filter-function/contrast/index.md b/files/ja/web/css/filter-function/contrast/index.md new file mode 100644 index 0000000000..1a15d43334 --- /dev/null +++ b/files/ja/web/css/filter-function/contrast/index.md @@ -0,0 +1,61 @@ +--- +title: contrast() +slug: Web/CSS/filter-function/contrast +tags: + - CSS + - CSS 関数 + - フィルター効果 + - 関数 + - リファレンス +translation_of: Web/CSS/filter-function/contrast() +original_slug: Web/CSS/filter-function/contrast() +browser-compat: css.types.filter-function.contrast +--- +{{CSSRef}} + +**`contrast()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、入力画像のコントラストを調整します。結果は {{cssxref("<filter-function>")}} です。 + +{{EmbedInteractiveExample("pages/css/function-contrast.html")}} + +## 構文 + +```css +contrast(amount) +``` + +### 引数 + +- `amount` + - : 結果のコントラストで、 {{cssxref("<number>")}} または {{cssxref("<percentage>")}} で指定します。 `100%` 未満の値ではコントラストが下がり、 `100%` を超える値ではコントラストが上がります。 `0%` の値では画像が完全に灰色になり、 `100%` の値では入力が変更されないままになります。補間時の欠損値は `1` です。 + +## 例 + +### 数値とパーセント値を使用した contrast の設定 + +```css +contrast(0) /* 完全な灰色 */ +contrast(65%) /* 65% のコントラスト */ +contrast(1) /* 効果なし */ +contrast(200%) /* 2 倍のコントラスト */ +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("<filter-function>")}} +- {{cssxref("filter-function/blur()", "blur()")}} +- {{cssxref("filter-function/brightness()", "brightness()")}} +- {{cssxref("filter-function/drop-shadow()", "drop-shadow()")}} +- {{cssxref("filter-function/grayscale()", "grayscale()")}} +- {{cssxref("filter-function/hue-rotate()", "hue-rotate()")}} +- {{cssxref("filter-function/invert()", "invert()")}} +- {{cssxref("filter-function/opacity()", "opacity()")}} +- {{cssxref("filter-function/saturate()", "saturate()")}} +- {{cssxref("filter-function/sepia()", "sepia()")}} diff --git a/files/ja/web/css/filter-function/drop-shadow()/index.md b/files/ja/web/css/filter-function/drop-shadow()/index.md deleted file mode 100644 index 90f1ce5ab3..0000000000 --- a/files/ja/web/css/filter-function/drop-shadow()/index.md +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: drop-shadow() -slug: Web/CSS/filter-function/drop-shadow() -tags: - - CSS - - CSS 関数 - - フィルター効果 - - 関数 - - リファレンス -browser-compat: css.types.filter-function.drop-shadow -translation_of: Web/CSS/filter-function/drop-shadow() ---- -{{CSSRef}} - -**`drop-shadow()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、入力画像にドロップシャドウ効果を適用します。結果は {{cssxref("<filter-function>")}} です。 - -{{EmbedInteractiveExample("pages/css/function-drop-shadow.html")}} - -ドロップシャドウは効果的にぼけ、入力画像のアルファマスクのバージョンからずれ、特定の色で描かれて画像の下に混合されます。 - -> **Note:** この関数はいくらか {{Cssxref("box-shadow")}} プロパティと似ています。 `box-shadow` プロパティは要素の*ボックス全体*の背後に長方形の影を作成しますが、 `drop-shadow()` フィルター関数は*画像自体*の形 (アルファチャネル) に合った影を作成します。 - -## 構文 - -```css -drop-shadow(offset-x offset-y blur-radius color) -``` - -`drop-shadow()` 関数は `` 型の引数 ({{cssxref("box-shadow")}} プロパティで定義) を受け付けますが、 `inset` キーワードと `spread` 引数が許可されないという例外があります。 - -### 引数 - -- `offset-x` `offset-y` (必須) - - : 影のオフセットを指定する 2 つの {{cssxref("<length>")}} 値です。 `offset-x` は水平方向の距離を表し、負の数で影を要素の左方に配置します。 `offset-y` は垂直方向の距離を表し、負の数で影を要素の上方に配置します。どちらの値も `0` であれば、影は要素の真後ろに配置されます。 -- `blur-radius` (任意) - - : 影をぼかす半径で、 {{cssxref("<length>")}} で指定します。値が大きくなるほど、影は広く薄くなります。指定されていない場合は、既定値の `0` になり、辺がはっきりとしてぼけなくなります。負の数は許可されていません。 -- `color` (任意) - - : 影の色で、 {{cssxref("<color>")}} で指定します。指定されなかった場合は、 {{cssxref("color")}} プロパティの値が使用されます。 - -## 例 - -### ピクセル単位のオフセットとぼかし半径を用いたドロップシャドウの設定 - -```css -/* 10px のぼかしで広がりのない黒い影 */ -drop-shadow(16px 16px 10px black) -``` - -### rem 単位ののオフセットとぼかし半径を用いたドロップシャドウの設定 - -```css -/* 1rem のぼかしで 3rem の広がりの赤っぽい影 */ -drop-shadow(.5rem .5rem 1rem #e23) -``` - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("<filter-function>")}} -- CSS の {{cssxref("box-shadow")}} プロパティ -- {{cssxref("filter-function/blur()", "blur()")}} -- {{cssxref("filter-function/brightness()", "brightness()")}} -- {{cssxref("filter-function/contrast()", "contrast()")}} -- {{cssxref("filter-function/grayscale()", "grayscale()")}} -- {{cssxref("filter-function/hue-rotate()", "hue-rotate()")}} -- {{cssxref("filter-function/invert()", "invert()")}} -- {{cssxref("filter-function/opacity()", "opacity()")}} -- {{cssxref("filter-function/saturate()", "saturate()")}} -- {{cssxref("filter-function/sepia()", "sepia()")}} diff --git a/files/ja/web/css/filter-function/drop-shadow/index.md b/files/ja/web/css/filter-function/drop-shadow/index.md new file mode 100644 index 0000000000..cf3905205d --- /dev/null +++ b/files/ja/web/css/filter-function/drop-shadow/index.md @@ -0,0 +1,77 @@ +--- +title: drop-shadow() +slug: Web/CSS/filter-function/drop-shadow +tags: + - CSS + - CSS 関数 + - フィルター効果 + - 関数 + - リファレンス +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}} + +**`drop-shadow()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、入力画像にドロップシャドウ効果を適用します。結果は {{cssxref("<filter-function>")}} です。 + +{{EmbedInteractiveExample("pages/css/function-drop-shadow.html")}} + +ドロップシャドウは効果的にぼけ、入力画像のアルファマスクのバージョンからずれ、特定の色で描かれて画像の下に混合されます。 + +> **Note:** この関数はいくらか {{Cssxref("box-shadow")}} プロパティと似ています。 `box-shadow` プロパティは要素の*ボックス全体*の背後に長方形の影を作成しますが、 `drop-shadow()` フィルター関数は*画像自体*の形 (アルファチャネル) に合った影を作成します。 + +## 構文 + +```css +drop-shadow(offset-x offset-y blur-radius color) +``` + +`drop-shadow()` 関数は `` 型の引数 ({{cssxref("box-shadow")}} プロパティで定義) を受け付けますが、 `inset` キーワードと `spread` 引数が許可されないという例外があります。 + +### 引数 + +- `offset-x` `offset-y` (必須) + - : 影のオフセットを指定する 2 つの {{cssxref("<length>")}} 値です。 `offset-x` は水平方向の距離を表し、負の数で影を要素の左方に配置します。 `offset-y` は垂直方向の距離を表し、負の数で影を要素の上方に配置します。どちらの値も `0` であれば、影は要素の真後ろに配置されます。 +- `blur-radius` (任意) + - : 影をぼかす半径で、 {{cssxref("<length>")}} で指定します。値が大きくなるほど、影は広く薄くなります。指定されていない場合は、既定値の `0` になり、辺がはっきりとしてぼけなくなります。負の数は許可されていません。 +- `color` (任意) + - : 影の色で、 {{cssxref("<color>")}} で指定します。指定されなかった場合は、 {{cssxref("color")}} プロパティの値が使用されます。 + +## 例 + +### ピクセル単位のオフセットとぼかし半径を用いたドロップシャドウの設定 + +```css +/* 10px のぼかしで広がりのない黒い影 */ +drop-shadow(16px 16px 10px black) +``` + +### rem 単位ののオフセットとぼかし半径を用いたドロップシャドウの設定 + +```css +/* 1rem のぼかしで 3rem の広がりの赤っぽい影 */ +drop-shadow(.5rem .5rem 1rem #e23) +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("<filter-function>")}} +- CSS の {{cssxref("box-shadow")}} プロパティ +- {{cssxref("filter-function/blur()", "blur()")}} +- {{cssxref("filter-function/brightness()", "brightness()")}} +- {{cssxref("filter-function/contrast()", "contrast()")}} +- {{cssxref("filter-function/grayscale()", "grayscale()")}} +- {{cssxref("filter-function/hue-rotate()", "hue-rotate()")}} +- {{cssxref("filter-function/invert()", "invert()")}} +- {{cssxref("filter-function/opacity()", "opacity()")}} +- {{cssxref("filter-function/saturate()", "saturate()")}} +- {{cssxref("filter-function/sepia()", "sepia()")}} diff --git a/files/ja/web/css/filter-function/grayscale()/index.md b/files/ja/web/css/filter-function/grayscale()/index.md deleted file mode 100644 index 520fe781fc..0000000000 --- a/files/ja/web/css/filter-function/grayscale()/index.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: grayscale() -slug: Web/CSS/filter-function/grayscale() -tags: - - CSS - - CSS 関数 - - フィルター効果 - - 関数 - - リファレンス -browser-compat: css.types.filter-function.grayscale -translation_of: Web/CSS/filter-function/grayscale() ---- -{{CSSRef}} - -**`grayscale()`** は [CSS](/ja/docs/Web/CSS) の関数は、入力画像をグレースケールに変換します。結果は {{cssxref("<filter-function>")}} です。 - -{{EmbedInteractiveExample("pages/css/function-grayscale.html")}} - -## 構文 - -```css -grayscale(amount) -``` - -### 引数 - -- `amount` - - : 変換の度合いで、 {{cssxref("<number>")}} または {{cssxref("<percentage>")}} で指定します。 `100%` の値では完全にグレースケールになり、 `0%` の値では入力が変更されないままになります。 `0%` と `100%` の間の値は、効果の割合です。省略時の既定値は `1` です。補間時の欠損値は `0` です。 - -## 例 - -### grayscale() の正しい値の例 - -```css -grayscale(0) /* 効果なし */ -grayscale(.7) /* 70% グレースケール */ -grayscale(100%) /* 完全なグレースケール */ -``` - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("<filter-function>")}} -- {{cssxref("filter-function/blur()", "blur()")}} -- {{cssxref("filter-function/brightness()", "brightness()")}} -- {{cssxref("filter-function/contrast()", "contrast()")}} -- {{cssxref("filter-function/drop-shadow()", "drop-shadow()")}} -- {{cssxref("filter-function/hue-rotate()", "hue-rotate()")}} -- {{cssxref("filter-function/invert()", "invert()")}} -- {{cssxref("filter-function/opacity()", "opacity()")}} -- {{cssxref("filter-function/saturate()", "saturate()")}} -- {{cssxref("filter-function/sepia()", "sepia()")}} diff --git a/files/ja/web/css/filter-function/grayscale/index.md b/files/ja/web/css/filter-function/grayscale/index.md new file mode 100644 index 0000000000..d5e359542c --- /dev/null +++ b/files/ja/web/css/filter-function/grayscale/index.md @@ -0,0 +1,60 @@ +--- +title: grayscale() +slug: Web/CSS/filter-function/grayscale +tags: + - CSS + - CSS 関数 + - フィルター効果 + - 関数 + - リファレンス +translation_of: Web/CSS/filter-function/grayscale() +original_slug: Web/CSS/filter-function/grayscale() +browser-compat: css.types.filter-function.grayscale +--- +{{CSSRef}} + +**`grayscale()`** は [CSS](/ja/docs/Web/CSS) の関数は、入力画像をグレースケールに変換します。結果は {{cssxref("<filter-function>")}} です。 + +{{EmbedInteractiveExample("pages/css/function-grayscale.html")}} + +## 構文 + +```css +grayscale(amount) +``` + +### 引数 + +- `amount` + - : 変換の度合いで、 {{cssxref("<number>")}} または {{cssxref("<percentage>")}} で指定します。 `100%` の値では完全にグレースケールになり、 `0%` の値では入力が変更されないままになります。 `0%` と `100%` の間の値は、効果の割合です。省略時の既定値は `1` です。補間時の欠損値は `0` です。 + +## 例 + +### grayscale() の正しい値の例 + +```css +grayscale(0) /* 効果なし */ +grayscale(.7) /* 70% グレースケール */ +grayscale(100%) /* 完全なグレースケール */ +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("<filter-function>")}} +- {{cssxref("filter-function/blur()", "blur()")}} +- {{cssxref("filter-function/brightness()", "brightness()")}} +- {{cssxref("filter-function/contrast()", "contrast()")}} +- {{cssxref("filter-function/drop-shadow()", "drop-shadow()")}} +- {{cssxref("filter-function/hue-rotate()", "hue-rotate()")}} +- {{cssxref("filter-function/invert()", "invert()")}} +- {{cssxref("filter-function/opacity()", "opacity()")}} +- {{cssxref("filter-function/saturate()", "saturate()")}} +- {{cssxref("filter-function/sepia()", "sepia()")}} diff --git a/files/ja/web/css/filter-function/hue-rotate()/index.md b/files/ja/web/css/filter-function/hue-rotate()/index.md deleted file mode 100644 index 8170c4c277..0000000000 --- a/files/ja/web/css/filter-function/hue-rotate()/index.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: hue-rotate() -slug: Web/CSS/filter-function/hue-rotate() -tags: - - CSS - - CSS 関数 - - フィルター効果 - - 関数 - - リファレンス -browser-compat: css.types.filter-function.hue-rotate -translation_of: Web/CSS/filter-function/hue-rotate() ---- -{{CSSRef}} - -**`hue-rotate()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素およびその中身のコンテンツの[色相環](https://ja.wikipedia.org/wiki/%E8%89%B2%E7%9B%B8)を回転させます。結果は {{cssxref("<filter-function>")}} です。 - -{{EmbedInteractiveExample("pages/css/function-hue-rotate.html")}} - -## 構文 - -```css -hue-rotate(angle) -``` - -### 引数 - -- `angle` - - : 入力サンプルの色相の相対的な変化量を、 {{cssxref("<angle>")}} で指定します。 `0deg` は入力を変更しないままにします。正の回転角は色相の値を増加させるのに対し、負の回転角は色相の値を減少させます。補間時の欠損値は `0` です。最小値または最大値はなく、 `hue-rotate(Ndeg)` は `N` を 360 で割った余りと等価です。 - -## 例 - -### hue-rotate の正しい値の例 - -```css -hue-rotate(-90deg) /* 270 度の回転と同じ */ -hue-rotate(0deg) /* 効果なし */ -hue-rotate(90deg) /* 90 度の回転 */ -hue-rotate(.5turn) /* 180 度の回転 */ -hue-rotate(405deg) /* 45 度の回転と同じ */ -``` - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("<filter-function>")}} -- {{cssxref("filter-function/blur()", "blur()")}} -- {{cssxref("filter-function/brightness()", "brightness()")}} -- {{cssxref("filter-function/contrast()", "contrast()")}} -- {{cssxref("filter-function/drop-shadow()", "drop-shadow()")}} -- {{cssxref("filter-function/grayscale()", "grayscale()")}} -- {{cssxref("filter-function/invert()", "invert()")}} -- {{cssxref("filter-function/opacity()", "opacity()")}} -- {{cssxref("filter-function/saturate()", "saturate()")}} -- {{cssxref("filter-function/sepia()", "sepia()")}} diff --git a/files/ja/web/css/filter-function/hue-rotate/index.md b/files/ja/web/css/filter-function/hue-rotate/index.md new file mode 100644 index 0000000000..e214eeff5f --- /dev/null +++ b/files/ja/web/css/filter-function/hue-rotate/index.md @@ -0,0 +1,62 @@ +--- +title: hue-rotate() +slug: Web/CSS/filter-function/hue-rotate +tags: + - CSS + - CSS 関数 + - フィルター効果 + - 関数 + - リファレンス +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}} + +**`hue-rotate()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素およびその中身のコンテンツの[色相環](https://ja.wikipedia.org/wiki/%E8%89%B2%E7%9B%B8)を回転させます。結果は {{cssxref("<filter-function>")}} です。 + +{{EmbedInteractiveExample("pages/css/function-hue-rotate.html")}} + +## 構文 + +```css +hue-rotate(angle) +``` + +### 引数 + +- `angle` + - : 入力サンプルの色相の相対的な変化量を、 {{cssxref("<angle>")}} で指定します。 `0deg` は入力を変更しないままにします。正の回転角は色相の値を増加させるのに対し、負の回転角は色相の値を減少させます。補間時の欠損値は `0` です。最小値または最大値はなく、 `hue-rotate(Ndeg)` は `N` を 360 で割った余りと等価です。 + +## 例 + +### hue-rotate の正しい値の例 + +```css +hue-rotate(-90deg) /* 270 度の回転と同じ */ +hue-rotate(0deg) /* 効果なし */ +hue-rotate(90deg) /* 90 度の回転 */ +hue-rotate(.5turn) /* 180 度の回転 */ +hue-rotate(405deg) /* 45 度の回転と同じ */ +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("<filter-function>")}} +- {{cssxref("filter-function/blur()", "blur()")}} +- {{cssxref("filter-function/brightness()", "brightness()")}} +- {{cssxref("filter-function/contrast()", "contrast()")}} +- {{cssxref("filter-function/drop-shadow()", "drop-shadow()")}} +- {{cssxref("filter-function/grayscale()", "grayscale()")}} +- {{cssxref("filter-function/invert()", "invert()")}} +- {{cssxref("filter-function/opacity()", "opacity()")}} +- {{cssxref("filter-function/saturate()", "saturate()")}} +- {{cssxref("filter-function/sepia()", "sepia()")}} diff --git a/files/ja/web/css/filter-function/invert()/index.md b/files/ja/web/css/filter-function/invert()/index.md deleted file mode 100644 index a5550ebf12..0000000000 --- a/files/ja/web/css/filter-function/invert()/index.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: invert() -slug: Web/CSS/filter-function/invert() -tags: - - CSS - - CSS 関数 - - フィルター効果 - - 関数 - - リファレンス -browser-compat: css.types.filter-function.invert -translation_of: Web/CSS/filter-function/invert() ---- -{{CSSRef}} - -**`invert()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、入力画像の色サンプルを反転します。結果は {{cssxref("<filter-function>")}} です。 - -{{EmbedInteractiveExample("pages/css/function-invert.html")}} - -## 構文 - -```css -invert(amount) -``` - -### 引数 - -- `amount` - - : 変換の度合いで、 {{cssxref("<number>")}} または {{cssxref("<percentage>")}} で指定します。 `100%` の値では完全に反転され、 `0%` の値では入力が変更されないままになります。 `0%` と `100%` の間の値は、効果の割合です。補間時の欠損値は `0` です。 - -## 例 - -### invert() の正しい値の例 - -```css -invert(0) /* 効果なし */ -invert(.6) /* 60% 反転 */ -invert(100%) /* 完全に反転 */ -``` - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("<filter-function>")}} -- {{cssxref("filter-function/blur()", "blur()")}} -- {{cssxref("filter-function/brightness()", "brightness()")}} -- {{cssxref("filter-function/contrast()", "contrast()")}} -- {{cssxref("filter-function/drop-shadow()", "drop-shadow()")}} -- {{cssxref("filter-function/grayscale()", "grayscale()")}} -- {{cssxref("filter-function/hue-rotate()", "hue-rotate()")}} -- {{cssxref("filter-function/opacity()", "opacity()")}} -- {{cssxref("filter-function/saturate()", "saturate()")}} -- {{cssxref("filter-function/sepia()", "sepia()")}} diff --git a/files/ja/web/css/filter-function/invert/index.md b/files/ja/web/css/filter-function/invert/index.md new file mode 100644 index 0000000000..776fb898ef --- /dev/null +++ b/files/ja/web/css/filter-function/invert/index.md @@ -0,0 +1,60 @@ +--- +title: invert() +slug: Web/CSS/filter-function/invert +tags: + - CSS + - CSS 関数 + - フィルター効果 + - 関数 + - リファレンス +translation_of: Web/CSS/filter-function/invert() +original_slug: Web/CSS/filter-function/invert() +browser-compat: css.types.filter-function.invert +--- +{{CSSRef}} + +**`invert()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、入力画像の色サンプルを反転します。結果は {{cssxref("<filter-function>")}} です。 + +{{EmbedInteractiveExample("pages/css/function-invert.html")}} + +## 構文 + +```css +invert(amount) +``` + +### 引数 + +- `amount` + - : 変換の度合いで、 {{cssxref("<number>")}} または {{cssxref("<percentage>")}} で指定します。 `100%` の値では完全に反転され、 `0%` の値では入力が変更されないままになります。 `0%` と `100%` の間の値は、効果の割合です。補間時の欠損値は `0` です。 + +## 例 + +### invert() の正しい値の例 + +```css +invert(0) /* 効果なし */ +invert(.6) /* 60% 反転 */ +invert(100%) /* 完全に反転 */ +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("<filter-function>")}} +- {{cssxref("filter-function/blur()", "blur()")}} +- {{cssxref("filter-function/brightness()", "brightness()")}} +- {{cssxref("filter-function/contrast()", "contrast()")}} +- {{cssxref("filter-function/drop-shadow()", "drop-shadow()")}} +- {{cssxref("filter-function/grayscale()", "grayscale()")}} +- {{cssxref("filter-function/hue-rotate()", "hue-rotate()")}} +- {{cssxref("filter-function/opacity()", "opacity()")}} +- {{cssxref("filter-function/saturate()", "saturate()")}} +- {{cssxref("filter-function/sepia()", "sepia()")}} diff --git a/files/ja/web/css/filter-function/opacity()/index.md b/files/ja/web/css/filter-function/opacity()/index.md deleted file mode 100644 index edee2ef5b5..0000000000 --- a/files/ja/web/css/filter-function/opacity()/index.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: opacity() -slug: Web/CSS/filter-function/opacity() -tags: - - CSS - - CSS 関数 - - フィルター効果 - - 関数 - - リファレンス -browser-compat: css.types.filter-function.opacity -translation_of: Web/CSS/filter-function/opacity() ---- -{{CSSRef}} - -**`opacity()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、入力画像のサンプルに透過性を適用します。結果は {{cssxref("<filter-function>")}} です。 - -{{EmbedInteractiveExample("pages/css/function-opacity.html")}} - -> **Note:** この関数はもっと一般的な {{Cssxref("opacity")}} プロパティと似ています。違いはフィルターの場合、ブラウザーによってはハードウェアアクセラレーションにより性能が上がることです。 - -## 構文 - -```css -opacity(amount) -``` - -### 引数 - -- `amount` - - : 変換の度合いで、 {{cssxref("<number>")}} または {{cssxref("<percentage>")}} で指定します。 `0%` の値では完全に透明になり、 `100%` の値では入力が変更されないままになります。 `0%` と `100%` の間の値は、効果の割合です。補間時の欠損値は `1` です。 - -## 例 - -### opacity() の正しい値の例 - -```css -opacity(0%) /* 完全に透過 */ -opacity(50%) /* 50% 透過 */ -opacity(1) /* 効果なし */ -``` - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("<filter-function>")}} -- CSS の {{cssxref("opacity")}} プロパティ -- {{cssxref("filter-function/blur()", "blur()")}} -- {{cssxref("filter-function/brightness()", "brightness()")}} -- {{cssxref("filter-function/contrast()", "contrast()")}} -- {{cssxref("filter-function/drop-shadow()", "drop-shadow()")}} -- {{cssxref("filter-function/grayscale()", "grayscale()")}} -- {{cssxref("filter-function/hue-rotate()", "hue-rotate()")}} -- {{cssxref("filter-function/invert()", "invert()")}} -- {{cssxref("filter-function/saturate()", "saturate()")}} -- {{cssxref("filter-function/sepia()", "sepia()")}} diff --git a/files/ja/web/css/filter-function/opacity/index.md b/files/ja/web/css/filter-function/opacity/index.md new file mode 100644 index 0000000000..4d0303231b --- /dev/null +++ b/files/ja/web/css/filter-function/opacity/index.md @@ -0,0 +1,63 @@ +--- +title: opacity() +slug: Web/CSS/filter-function/opacity +tags: + - CSS + - CSS 関数 + - フィルター効果 + - 関数 + - リファレンス +translation_of: Web/CSS/filter-function/opacity() +original_slug: Web/CSS/filter-function/opacity() +browser-compat: css.types.filter-function.opacity +--- +{{CSSRef}} + +**`opacity()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、入力画像のサンプルに透過性を適用します。結果は {{cssxref("<filter-function>")}} です。 + +{{EmbedInteractiveExample("pages/css/function-opacity.html")}} + +> **Note:** この関数はもっと一般的な {{Cssxref("opacity")}} プロパティと似ています。違いはフィルターの場合、ブラウザーによってはハードウェアアクセラレーションにより性能が上がることです。 + +## 構文 + +```css +opacity(amount) +``` + +### 引数 + +- `amount` + - : 変換の度合いで、 {{cssxref("<number>")}} または {{cssxref("<percentage>")}} で指定します。 `0%` の値では完全に透明になり、 `100%` の値では入力が変更されないままになります。 `0%` と `100%` の間の値は、効果の割合です。補間時の欠損値は `1` です。 + +## 例 + +### opacity() の正しい値の例 + +```css +opacity(0%) /* 完全に透過 */ +opacity(50%) /* 50% 透過 */ +opacity(1) /* 効果なし */ +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("<filter-function>")}} +- CSS の {{cssxref("opacity")}} プロパティ +- {{cssxref("filter-function/blur()", "blur()")}} +- {{cssxref("filter-function/brightness()", "brightness()")}} +- {{cssxref("filter-function/contrast()", "contrast()")}} +- {{cssxref("filter-function/drop-shadow()", "drop-shadow()")}} +- {{cssxref("filter-function/grayscale()", "grayscale()")}} +- {{cssxref("filter-function/hue-rotate()", "hue-rotate()")}} +- {{cssxref("filter-function/invert()", "invert()")}} +- {{cssxref("filter-function/saturate()", "saturate()")}} +- {{cssxref("filter-function/sepia()", "sepia()")}} diff --git a/files/ja/web/css/filter-function/saturate()/index.md b/files/ja/web/css/filter-function/saturate()/index.md deleted file mode 100644 index 7c6612b369..0000000000 --- a/files/ja/web/css/filter-function/saturate()/index.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: saturate() -slug: Web/CSS/filter-function/saturate() -tags: - - CSS - - CSS 関数 - - フィルター効果 - - 関数 - - リファレンス -browser-compat: css.types.filter-function.saturate -translation_of: Web/CSS/filter-function/saturate() ---- -{{CSSRef}} - -**`saturate()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、入力画像の彩度を上げたり下げたりします。結果は {{cssxref("<filter-function>")}} です。 - -{{EmbedInteractiveExample("pages/css/function-saturate.html")}} - -## 構文 - -```css -saturate(amount) -``` - -### 引数 - -- `amount` - - : 変換の量で、 {{cssxref("<number>")}} または {{cssxref("<percentage>")}} で指定します。 `100%` 未満の値では彩度を下げ、 `100%` を超える値では彩度を上げます。 `0%` の値では画像が完全に彩度がなくなり、 `100%` の値では入力が変更されないままになります。補間時の欠損値は `1` です。 - -## 例 - -### saturate() の正しい値の例 - -```css -saturate(0) /* 彩度なし */ -saturate(.4) /* 彩度 40% */ -saturate(100%) /* 効果なし */ -saturate(200%) /* 2 倍の彩度 */ -``` - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("<filter-function>")}} -- {{cssxref("filter-function/blur()", "blur()")}} -- {{cssxref("filter-function/brightness()", "brightness()")}} -- {{cssxref("filter-function/contrast()", "contrast()")}} -- {{cssxref("filter-function/drop-shadow()", "drop-shadow()")}} -- {{cssxref("filter-function/grayscale()", "grayscale()")}} -- {{cssxref("filter-function/hue-rotate()", "hue-rotate()")}} -- {{cssxref("filter-function/invert()", "invert()")}} -- {{cssxref("filter-function/opacity()", "opacity()")}} -- {{cssxref("filter-function/sepia()", "sepia()")}} diff --git a/files/ja/web/css/filter-function/saturate/index.md b/files/ja/web/css/filter-function/saturate/index.md new file mode 100644 index 0000000000..d0e12188bc --- /dev/null +++ b/files/ja/web/css/filter-function/saturate/index.md @@ -0,0 +1,61 @@ +--- +title: saturate() +slug: Web/CSS/filter-function/saturate +tags: + - CSS + - CSS 関数 + - フィルター効果 + - 関数 + - リファレンス +translation_of: Web/CSS/filter-function/saturate() +original_slug: Web/CSS/filter-function/saturate() +browser-compat: css.types.filter-function.saturate +--- +{{CSSRef}} + +**`saturate()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、入力画像の彩度を上げたり下げたりします。結果は {{cssxref("<filter-function>")}} です。 + +{{EmbedInteractiveExample("pages/css/function-saturate.html")}} + +## 構文 + +```css +saturate(amount) +``` + +### 引数 + +- `amount` + - : 変換の量で、 {{cssxref("<number>")}} または {{cssxref("<percentage>")}} で指定します。 `100%` 未満の値では彩度を下げ、 `100%` を超える値では彩度を上げます。 `0%` の値では画像が完全に彩度がなくなり、 `100%` の値では入力が変更されないままになります。補間時の欠損値は `1` です。 + +## 例 + +### saturate() の正しい値の例 + +```css +saturate(0) /* 彩度なし */ +saturate(.4) /* 彩度 40% */ +saturate(100%) /* 効果なし */ +saturate(200%) /* 2 倍の彩度 */ +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("<filter-function>")}} +- {{cssxref("filter-function/blur()", "blur()")}} +- {{cssxref("filter-function/brightness()", "brightness()")}} +- {{cssxref("filter-function/contrast()", "contrast()")}} +- {{cssxref("filter-function/drop-shadow()", "drop-shadow()")}} +- {{cssxref("filter-function/grayscale()", "grayscale()")}} +- {{cssxref("filter-function/hue-rotate()", "hue-rotate()")}} +- {{cssxref("filter-function/invert()", "invert()")}} +- {{cssxref("filter-function/opacity()", "opacity()")}} +- {{cssxref("filter-function/sepia()", "sepia()")}} diff --git a/files/ja/web/css/filter-function/sepia()/index.md b/files/ja/web/css/filter-function/sepia()/index.md deleted file mode 100644 index e3708e8cbe..0000000000 --- a/files/ja/web/css/filter-function/sepia()/index.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: sepia() -slug: Web/CSS/filter-function/sepia() -tags: - - CSS - - CSS 関数 - - フィルター効果 - - 関数 - - リファレンス -browser-compat: css.types.filter-function.sepia -translation_of: Web/CSS/filter-function/sepia() ---- -{{CSSRef}} - -**`sepia()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、入力画像をセピア色に、より暖かい、より黄色/茶色がかったの表現に変換します。結果は {{cssxref("<filter-function>")}} です。 - -{{EmbedInteractiveExample("pages/css/function-sepia.html")}} - -## 構文 - -```css -sepia(amount) -``` - -### 引数 - -- `amount` - - : 変換の度合いで、 {{cssxref("<number>")}} または {{cssxref("<percentage>")}} で指定します。 `100%` の値では完全にセピア色になり、 `0%` の値では入力が変更されないままになります。 `0%` と `100%` の間の値は、効果の割合です。補間時の欠損値は `0` です。 - -## 例 - -### sepia() の正しい値の例 - -```css -sepia(0) /* 効果なし */ -sepia(.65) /* 65% セピア色 */ -sepia(100%) /* 完全にセピア色 */ -``` - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("<filter-function>")}} -- {{cssxref("filter-function/blur()", "blur()")}} -- {{cssxref("filter-function/brightness()", "brightness()")}} -- {{cssxref("filter-function/contrast()", "contrast()")}} -- {{cssxref("filter-function/drop-shadow()", "drop-shadow()")}} -- {{cssxref("filter-function/grayscale()", "grayscale()")}} -- {{cssxref("filter-function/hue-rotate()", "hue-rotate()")}} -- {{cssxref("filter-function/invert()", "invert()")}} -- {{cssxref("filter-function/opacity()", "opacity()")}} -- {{cssxref("filter-function/saturate()", "saturate()")}} diff --git a/files/ja/web/css/filter-function/sepia/index.md b/files/ja/web/css/filter-function/sepia/index.md new file mode 100644 index 0000000000..853dae74d3 --- /dev/null +++ b/files/ja/web/css/filter-function/sepia/index.md @@ -0,0 +1,60 @@ +--- +title: sepia() +slug: Web/CSS/filter-function/sepia +tags: + - CSS + - CSS 関数 + - フィルター効果 + - 関数 + - リファレンス +translation_of: Web/CSS/filter-function/sepia() +original_slug: Web/CSS/filter-function/sepia() +browser-compat: css.types.filter-function.sepia +--- +{{CSSRef}} + +**`sepia()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、入力画像をセピア色に、より暖かい、より黄色/茶色がかったの表現に変換します。結果は {{cssxref("<filter-function>")}} です。 + +{{EmbedInteractiveExample("pages/css/function-sepia.html")}} + +## 構文 + +```css +sepia(amount) +``` + +### 引数 + +- `amount` + - : 変換の度合いで、 {{cssxref("<number>")}} または {{cssxref("<percentage>")}} で指定します。 `100%` の値では完全にセピア色になり、 `0%` の値では入力が変更されないままになります。 `0%` と `100%` の間の値は、効果の割合です。補間時の欠損値は `0` です。 + +## 例 + +### sepia() の正しい値の例 + +```css +sepia(0) /* 効果なし */ +sepia(.65) /* 65% セピア色 */ +sepia(100%) /* 完全にセピア色 */ +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("<filter-function>")}} +- {{cssxref("filter-function/blur()", "blur()")}} +- {{cssxref("filter-function/brightness()", "brightness()")}} +- {{cssxref("filter-function/contrast()", "contrast()")}} +- {{cssxref("filter-function/drop-shadow()", "drop-shadow()")}} +- {{cssxref("filter-function/grayscale()", "grayscale()")}} +- {{cssxref("filter-function/hue-rotate()", "hue-rotate()")}} +- {{cssxref("filter-function/invert()", "invert()")}} +- {{cssxref("filter-function/opacity()", "opacity()")}} +- {{cssxref("filter-function/saturate()", "saturate()")}} diff --git a/files/ja/web/css/fit-content()/index.md b/files/ja/web/css/fit-content()/index.md deleted file mode 100644 index 93f77251dc..0000000000 --- a/files/ja/web/css/fit-content()/index.md +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: fit-content() -slug: Web/CSS/fit-content() -tags: - - CSS - - CSS 関数 - - CSS グリッド - - 関数 - - レイアウト - - リファレンス - - ウェブ -translation_of: Web/CSS/fit-content() ---- -{{CSSRef}} - -**`fit-content()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、指定された寸法を `min(max-content, max(min-content, 引数))` の式に従って有効な範囲の寸法に収めます。 - -{{EmbedInteractiveExample("pages/css/function-fit-content.html")}} - -この関数は [CSS グリッド](/ja/docs/Web/CSS/CSS_Grid_Layout)のプロパティにおいて、トラックの寸法を `max-content` で定義された最大寸法と `auto` で定義された最小寸法との間で、 `auto` と似た方法 (すなわち [`minmax(auto, max-content)`](/ja/docs/Web/CSS/minmax())) で計算しますが、 `auto` の最小値よりも大きい場合は*引数*がトラックの寸法になるという点が異なります。 - -`max-content` および `auto` キーワードについての詳細は、 {{cssxref("grid-template-columns")}} ページを参照してください。 - -`fit-content()` 関数は {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}}, {{cssxref("max-height")}} のレイアウトボックスの寸法としても使用され、最大寸法は内容物の最大寸法、最小寸法は内容物の最小寸法になります。 - -## 構文 - -引数として `` または `` を受け付ける関数です。 - -```css -/* 値 */ -fit-content(200px) -fit-content(5cm) -fit-content(30vw) -fit-content(100ch) - -/* 値 */ -fit-content(40%) -``` - -### 値 - -- {{cssxref("<length>")}} - - : 絶対的な長さ。 -- {{cssxref("<percentage>")}} - - - : 指定された軸で有効な空間に対する相対的なパーセント値です。 - - グリッドプロパティでは、行トラックにおける列内のグリッドコンテナーのインライン方向の寸法およびグリッドコンテナーのブロック方向の寸法の相対値です。それ以外では、書字方向に応じてレイアウトボックスの有効なインライン方向の寸法またはブロック方向の寸法に対する相対値になります。 - -## 例 - -

グリッドカラムの大きさを fit-content で指定

- -#### HTML - -```html -
- Item as wide as the content. -
- Item with more text in it. Because the contents of it are - wider than the maximum width, it is clamped at 300 pixels. -
- Flexible item -
-``` - -#### CSS - -```css -#container { - display: grid; - grid-template-columns: fit-content(300px) fit-content(300px) 1fr; - grid-gap: 5px; - box-sizing: border-box; - height: 200px; - width: 100%; - background-color: #8cffa0; - padding: 10px; -} - -#container > div { - background-color: #8ca0ff; - padding: 5px; -} -``` - -#### 結果 - -{{EmbedLiveSample("Sizing_grid_columns_with_fit-content", "100%", 200)}} - -## 仕様書 -| 仕様書 | 状態 | 備考 | -| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName("CSS3 Sizing", "#valdef-width-fit-content-length-percentage", "fit-content()")}} | {{Spec2("CSS3 Sizing")}} | {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}}, {{cssxref("max-height")}} のレイアウトボックスの寸法としての関数を定義。 | -| {{SpecName("CSS Grid", "#valdef-grid-template-columns-fit-content", "fit-content()")}} | {{Spec2("CSS Grid")}} | トラックの寸法として使用される際の関数を定義。 | - -## ブラウザーの互換性 - -### width (および他の大きさのプロパティ) での対応 - -{{Compat("css.properties.width.fit-content_function")}} - -### グリッドレイアウトでの対応 - -{{Compat("css.properties.grid-template-columns.fit-content")}} - -## 関連情報 - -- 関連する大きさのキーワード: {{cssxref("min-content")}}, {{cssxref("max-content")}} -- 関連する CSS グリッドプロパティ: {{cssxref("grid-template")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}} -- グリッドレイアウトガイド: _[Line-based placement with CSS Grid](/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)_ -- グリッドレイアウトガイド: _[Grid template areas - Grid definition shorthands](/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#grid_definition_shorthands)_ diff --git a/files/ja/web/css/fit-content_function/index.md b/files/ja/web/css/fit-content_function/index.md new file mode 100644 index 0000000000..06d7ebad1a --- /dev/null +++ b/files/ja/web/css/fit-content_function/index.md @@ -0,0 +1,114 @@ +--- +title: fit-content() +slug: Web/CSS/fit-content_function +tags: + - CSS + - CSS 関数 + - CSS グリッド + - 関数 + - レイアウト + - リファレンス + - ウェブ +translation_of: Web/CSS/fit-content() +original_slug: Web/CSS/fit-content() +--- +{{CSSRef}} + +**`fit-content()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、指定された寸法を `min(max-content, max(min-content, 引数))` の式に従って有効な範囲の寸法に収めます。 + +{{EmbedInteractiveExample("pages/css/function-fit-content.html")}} + +この関数は [CSS グリッド](/ja/docs/Web/CSS/CSS_Grid_Layout)のプロパティにおいて、トラックの寸法を `max-content` で定義された最大寸法と `auto` で定義された最小寸法との間で、 `auto` と似た方法 (すなわち [`minmax(auto, max-content)`](/ja/docs/Web/CSS/minmax())) で計算しますが、 `auto` の最小値よりも大きい場合は*引数*がトラックの寸法になるという点が異なります。 + +`max-content` および `auto` キーワードについての詳細は、 {{cssxref("grid-template-columns")}} ページを参照してください。 + +`fit-content()` 関数は {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}}, {{cssxref("max-height")}} のレイアウトボックスの寸法としても使用され、最大寸法は内容物の最大寸法、最小寸法は内容物の最小寸法になります。 + +## 構文 + +引数として `` または `` を受け付ける関数です。 + +```css +/* 値 */ +fit-content(200px) +fit-content(5cm) +fit-content(30vw) +fit-content(100ch) + +/* 値 */ +fit-content(40%) +``` + +### 値 + +- {{cssxref("<length>")}} + - : 絶対的な長さ。 +- {{cssxref("<percentage>")}} + + - : 指定された軸で有効な空間に対する相対的なパーセント値です。 + + グリッドプロパティでは、行トラックにおける列内のグリッドコンテナーのインライン方向の寸法およびグリッドコンテナーのブロック方向の寸法の相対値です。それ以外では、書字方向に応じてレイアウトボックスの有効なインライン方向の寸法またはブロック方向の寸法に対する相対値になります。 + +## 例 + +

グリッドカラムの大きさを fit-content で指定

+ +#### HTML + +```html +
+ Item as wide as the content. +
+ Item with more text in it. Because the contents of it are + wider than the maximum width, it is clamped at 300 pixels. +
+ Flexible item +
+``` + +#### CSS + +```css +#container { + display: grid; + grid-template-columns: fit-content(300px) fit-content(300px) 1fr; + grid-gap: 5px; + box-sizing: border-box; + height: 200px; + width: 100%; + background-color: #8cffa0; + padding: 10px; +} + +#container > div { + background-color: #8ca0ff; + padding: 5px; +} +``` + +#### 結果 + +{{EmbedLiveSample("Sizing_grid_columns_with_fit-content", "100%", 200)}} + +## 仕様書 +| 仕様書 | 状態 | 備考 | +| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName("CSS3 Sizing", "#valdef-width-fit-content-length-percentage", "fit-content()")}} | {{Spec2("CSS3 Sizing")}} | {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}}, {{cssxref("max-height")}} のレイアウトボックスの寸法としての関数を定義。 | +| {{SpecName("CSS Grid", "#valdef-grid-template-columns-fit-content", "fit-content()")}} | {{Spec2("CSS Grid")}} | トラックの寸法として使用される際の関数を定義。 | + +## ブラウザーの互換性 + +### width (および他の大きさのプロパティ) での対応 + +{{Compat("css.properties.width.fit-content_function")}} + +### グリッドレイアウトでの対応 + +{{Compat("css.properties.grid-template-columns.fit-content")}} + +## 関連情報 + +- 関連する大きさのキーワード: {{cssxref("min-content")}}, {{cssxref("max-content")}} +- 関連する CSS グリッドプロパティ: {{cssxref("grid-template")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}} +- グリッドレイアウトガイド: _[Line-based placement with CSS Grid](/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)_ +- グリッドレイアウトガイド: _[Grid template areas - Grid definition shorthands](/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#grid_definition_shorthands)_ diff --git a/files/ja/web/css/gradient/conic-gradient()/index.md b/files/ja/web/css/gradient/conic-gradient()/index.md deleted file mode 100644 index d5e01f3ad7..0000000000 --- a/files/ja/web/css/gradient/conic-gradient()/index.md +++ /dev/null @@ -1,243 +0,0 @@ ---- -title: conic-gradient() -slug: Web/CSS/gradient/conic-gradient() -tags: - - CSS - - CSS Function - - CSS Images - - Function - - Graphics - - Layout - - Reference - - Web - - gradient -browser-compat: css.types.image.gradient.conic-gradient -translation_of: Web/CSS/gradient/conic-gradient() -original_slug: Web/CSS/conic-gradient() ---- -{{CSSRef}} - -**`conic-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 (中心から広がるのではなく) 中心点の周りを回りながら色が変化する画像を生成します。扇型グラデーションの例としては、円グラフや色相環などがあります。 `conic-gradient()` 関数の結果は {{CSSxRef("<gradient>")}} データ型のオブジェクトであり、これは {{CSSxRef("<image>")}} の特殊型です。 - -{{EmbedInteractiveExample("pages/css/function-conic-gradient.html")}} - -## 構文 - -```css -/* 45度回転した扇形グラデーション、 - 青で始まり赤で終わる */ -conic-gradient(from 45deg, blue, red); - -/* 青みがかった紫のボックス。グラデーションは青から赤へと - 進みます。しかし、扇形グラデーションの中心が左上にある - ため、右下の四分の一しか見えません。 */ -conic-gradient(from 90deg at 0 0, blue, red); - -/* 色相環 */ -background: conic-gradient( - hsl(360, 100%, 50%), - hsl(315, 100%, 50%), - hsl(270, 100%, 50%), - hsl(225, 100%, 50%), - hsl(180, 100%, 50%), - hsl(135, 100%, 50%), - hsl(90, 100%, 50%), - hsl(45, 100%, 50%), - hsl(0, 100%, 50%) -); -``` - -### 値 - -- {{CSSxRef("<angle>")}} - - : `from` キーワードに続いて角度を指定することで、時計回りのグラデーションの位置を定義します。 -- `` - - : {{cssxref("background-position")}} プロパティと同じ長さ、順番、キーワード値を使用して、グラデーションの中心の位置を定義します。省略すると、既定値は`center`、すなわちグラデーションに配置されます。 -- `` - - : 色経由点の {{CSSxRef("<color>")}} 値で、その後にオプションで 1 ～ 2 個の位置 (グラデーションの円周軸に沿った {{CSSxRef("<angle>")}}) が続きます。 -- `` - - : 隣接する色経由点の間でグラデーションがどのように進行するかを定義する補間のヒントです。長さは、 2 つの色経由点の間のどの位置でグラデーションの色が色の遷移の中間点に到達するかを定義します。省略した場合、色の遷移の中間点は 2 つの色経由点間の中間点になります。 - -> **Note:** [CSS グラデーションにおける色経由点](#gradient_with_multiple_color_stops)の描画は、 [SVG グラデーション](/ja/docs/Web/SVG/Tutorial/Gradients)と同じ規則に従います。 - -## 解説 - -他のグラデーションと同様、扇形グラデーションは[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、自然の寸法や推奨される寸法、推奨される縦横比もありません。自身の寸法は適用先の要素の寸法、または要素の寸法以外で設定された `` の寸法に一致します。 - -繰り返して 360 度の回転を埋める扇形グラデーションを生成するには、代わりに {{CSSxRef("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} 関数を使用してください。 - -`` は `` データ型に属するため、 `` が使用できるところでしか使用できません。このため、 `conic-gradient()` は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("<color>")}} データ型を使用するプロパティでは動作しません。

- -> **Note:** 英語ではなぜ "conic" (円錐) グラデーションと呼ばれるのか。色経由点が一方よりもう一方が明るい場合、上から見た円錐のように見えるからです。 - -### 扇型グラデーションの構成 - -扇形グラデーションの構文は放射グラデーションと似ていますが、色経由点はグラデーションの中心から現れるグラデーション軸上ではなく、グラデーション円弧、すなわち円周上に配置されます。扇形グラデーションでは、色の遷移は円の中心を回るように、上から始まって時計回りに行われます。放射グラデーションでは、色の遷移は楕円の中心から外に向けて、すべての方向に行われます。 - -![扇形グラデーションの円周と放射グラデーションの軸に沿った色経由点](screenshot_2018-11-29_21.09.19.png) - -扇形グラデーションは、回転角度とグラデーションの中心を指定し、色経由点のリストを指定します。[長さ](/ja/docs/Web/CSS/length)を指定して色経由点を配置する線形グラデーションや放射グラデーションとは異なり、扇形グラデーションの色経由点は角度を指定します。単位には[度](/ja/docs/Web/CSS/angle)を表す `deg`、グラードを表す `grad`、ラジアンを表す `rad`、回転数を表す `turn` があります。 1 つの円は 360 度、 400 グラード、 2π ラジアン、 1 回転になります。扇形グラデーションに対応しているブラウザーはパーセント値も受け付けており、 100% は 360 度に相当しますが、これは仕様にはありません。 - -放射グラデーションと同様に、扇形グラデーションの構文では、グラデーションの中心を画像内のどこにでも、あるいは画像の外側にでも配置することができます。位置の値は、 2 値の背景位置の構文に似ています。 - -グラデーション円弧は、グラデーションの円周です。グラデーションまたは円弧の*始点*は北、つまり 12 時の方向です。そして、グラデーションは _from_ の角度だけ回転します。グラデーションの色は、角度のついた色経由点、それらの開始点、終了点、および、その間、および、任意の角度のついた色経由点によって決定されます。色間の遷移は、隣接する色の色経由点の間のカラーヒントで変更することができます。 - -#### グラデーションのカスタマイズ - -グラデーション円弧上に角度のついた色経由点をさらに追加することで、複数の色の間で高度なカスタマイズされた遷移を行うことができます。色経由点の位置は、 {{CSSxRef("<angle>")}} を使って明示的に定義することができます。色経由点の位置を指定しない場合は、前の色経由点と後の色経由点の中間に配置されます。最初の色経由点と最後の色経由点に角度を指定しない場合、その値はそれぞれ 0deg と 360deg です。次の2つのグラデーションは同等です。 - -```css -conic-gradient(red, orange, yellow, green, blue); -conic-gradient(red 0deg, orange 90deg, yellow 180deg, green 270deg, blue 360deg); -``` - -既定では、色はある色経由点の色から次の色経由点の色へとスムーズに移行し、色と色の中間点が色移行の中間点となります。カラーヒントを追加して色遷移の中間点を示すことで、この色遷移の中間点を 2 つの色経由点間の任意の位置に移動させることができます。次の例は、開始点から 10% の印までは赤一色で、回転の 80% 以上で赤から青に移行し、最後の 10% は青一色になっています。しかし、赤から青へのグラデーション変化の中間点は 20％ の位置になります。 80grad (20％) のカラーヒントがなかった場合は 50％ の位置になります。 - -```css -conic-gradient(red 40grad, 80grad, blue 360grad); -``` - -2 つ以上の色経由点が同じ場所にある場合、その場所で宣言された最初の色と最後の色の間に不連続の (硬い) 色変化として表示されます。扇形グラデーションを使用して円グラフを作成するには、 -- 背景画像はアクセシビリティが確保できないため、正しい方法ではありませんが -- 隣接する 2 つの色経由点の色経由点の角度が同じである、硬い色経由点を使用します。これを実現する最も簡単な方法は、複数のポジションの色経由点を使用することです。次の 2 つの宣言は等価です。 - -```css -conic-gradient(#fff 0.09turn, #bbb 0.09turn, #bbb 0.27turn, #666 0.27turn, #666 0.54turn, #000 0.54turn); -conic-gradient(#fff 0turn 0.09turn, #bbb 0.09turn 0.27turn, #666 0.27turn 0.54turn, #000 0.54turn 1turn); -``` - -色経由点は、昇順に並べる必要があります。後続の色経由点がより低い値であった場合、前の色経由点の値を上書きし、硬い (不連続の) 色変化を生成します。次の例では、 30% の地点で赤から黄色に変化し、グラデーションの 35% の地点で黄色から青に変化しています。 - -```css -conic-gradient(red .8rad, yellow .6rad, blue 1.3rad); -``` - -扇形グラデーションでは、他にもさまざまな効果を作り出すことができます。奇しくも市松模様もその一つです。左上と右下の白、左下と右上の黒で四分円を作り、グラデーションを16回 (横に4回、下に4回) 繰り返すと市松模様になります。 - -```css -conic-gradient(#fff 90deg, #000 0.25turn 0.5turn, #fff 1rad 1.5rad, #000 300grad); -background-size: 25% 25%; -``` - -そして、そうですね、異なる角度のユニットを混ぜて使うこともできますが、やめておきましょう。以上、読みにくかったですね。 - -## アクセシビリティの考慮 - -ブラウザは、背景画像に関する特別な情報を支援技術に提供しません。これは主に画面リーダーにとって重要なことで、画面リーダーはその存在を告知しないため、ユーザーに何も伝えられません。扇形グラデーションを使って円グラフや市松模様などの効果を出すことは可能ですが、 CSS 画像は代替テキストを割り当てるネイティブな方法を提供していないため、扇形グラデーションで表現された画像は画面リーダーのユーザーが認知することはできません。ページの全体的な目的を理解するために重要な情報が画像に含まれている場合は、文書内で意味的に記述する方が良いでしょう。 - -- [MDN WCAG を理解する, ガイドライン 1.1 の説明](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content) -- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) - -## 例 - -

40 度のグラデーション

- -```css hidden -div { - width: 100px; - height: 100px; -} -``` - -```html hidden -
-``` - -```css -div { - background-image: - conic-gradient(from 40deg, #fff, #000); -} -``` - -{{EmbedLiveSample("Gradient_at_40-degrees", 120, 120)}} - -

中心をずらしたグラデーション

- -```css hidden -div { - width: 100px; - height: 100px; -} -``` - -```html hidden -
-``` - -```css -div { - background: conic-gradient(from 0deg at 0% 25%, blue, green, yellow 180deg); -} -``` - -{{EmbedLiveSample("Off-centered_gradient", 120, 120)}} - -

グラデーションの円グラフ

- -This example uses multi-position color stops, with adjacent colors having the same color stop value, creating a striped effect. - -```css hidden -div { - width: 100px; - height: 100px; -} -``` - -```html hidden -
-``` - -```css -div { - background: conic-gradient( - red 36deg, orange 36deg 170deg, yellow 170deg); - border-radius: 50% -} -``` - -{{EmbedLiveSample("Gradient_pie-chart", 120, 120)}} - -

市松模様

- -```css hidden -div { - width: 100px; - height: 100px; -} -``` - -```html hidden -
-``` - -```css -div { - background: - conic-gradient(#fff 0.25turn, #000 0.25turn 0.5turn, #fff 0.5turn 0.75turn, #000 0.75turn) - top left / 25% 25% repeat; - border: 1px solid; -} -``` - -{{EmbedLiveSample("Checkerboard", 120, 120)}} - -### その他の conic-gradient の例 - -他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。 - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) -- 他のグラデーション関数: {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}}, {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}} -- {{cssxref("<image>")}} -- {{cssxref("image/image()","image()")}} -- {{cssxref("element()")}} -- {{cssxref("image/image-set()","image-set()")}} -- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/gradient/conic-gradient/index.md b/files/ja/web/css/gradient/conic-gradient/index.md new file mode 100644 index 0000000000..25b8f907a6 --- /dev/null +++ b/files/ja/web/css/gradient/conic-gradient/index.md @@ -0,0 +1,243 @@ +--- +title: conic-gradient() +slug: Web/CSS/gradient/conic-gradient +tags: + - CSS + - CSS Function + - CSS Images + - Function + - Graphics + - Layout + - Reference + - Web + - gradient +translation_of: Web/CSS/gradient/conic-gradient() +original_slug: Web/CSS/gradient/conic-gradient() +browser-compat: css.types.image.gradient.conic-gradient +--- +{{CSSRef}} + +**`conic-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 (中心から広がるのではなく) 中心点の周りを回りながら色が変化する画像を生成します。扇型グラデーションの例としては、円グラフや色相環などがあります。 `conic-gradient()` 関数の結果は {{CSSxRef("<gradient>")}} データ型のオブジェクトであり、これは {{CSSxRef("<image>")}} の特殊型です。 + +{{EmbedInteractiveExample("pages/css/function-conic-gradient.html")}} + +## 構文 + +```css +/* 45度回転した扇形グラデーション、 + 青で始まり赤で終わる */ +conic-gradient(from 45deg, blue, red); + +/* 青みがかった紫のボックス。グラデーションは青から赤へと + 進みます。しかし、扇形グラデーションの中心が左上にある + ため、右下の四分の一しか見えません。 */ +conic-gradient(from 90deg at 0 0, blue, red); + +/* 色相環 */ +background: conic-gradient( + hsl(360, 100%, 50%), + hsl(315, 100%, 50%), + hsl(270, 100%, 50%), + hsl(225, 100%, 50%), + hsl(180, 100%, 50%), + hsl(135, 100%, 50%), + hsl(90, 100%, 50%), + hsl(45, 100%, 50%), + hsl(0, 100%, 50%) +); +``` + +### 値 + +- {{CSSxRef("<angle>")}} + - : `from` キーワードに続いて角度を指定することで、時計回りのグラデーションの位置を定義します。 +- `` + - : {{cssxref("background-position")}} プロパティと同じ長さ、順番、キーワード値を使用して、グラデーションの中心の位置を定義します。省略すると、既定値は`center`、すなわちグラデーションに配置されます。 +- `` + - : 色経由点の {{CSSxRef("<color>")}} 値で、その後にオプションで 1 ～ 2 個の位置 (グラデーションの円周軸に沿った {{CSSxRef("<angle>")}}) が続きます。 +- `` + - : 隣接する色経由点の間でグラデーションがどのように進行するかを定義する補間のヒントです。長さは、 2 つの色経由点の間のどの位置でグラデーションの色が色の遷移の中間点に到達するかを定義します。省略した場合、色の遷移の中間点は 2 つの色経由点間の中間点になります。 + +> **Note:** [CSS グラデーションにおける色経由点](#gradient_with_multiple_color_stops)の描画は、 [SVG グラデーション](/ja/docs/Web/SVG/Tutorial/Gradients)と同じ規則に従います。 + +## 解説 + +他のグラデーションと同様、扇形グラデーションは[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、自然の寸法や推奨される寸法、推奨される縦横比もありません。自身の寸法は適用先の要素の寸法、または要素の寸法以外で設定された `` の寸法に一致します。 + +繰り返して 360 度の回転を埋める扇形グラデーションを生成するには、代わりに {{CSSxRef("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} 関数を使用してください。 + +`` は `` データ型に属するため、 `` が使用できるところでしか使用できません。このため、 `conic-gradient()` は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("<color>")}} データ型を使用するプロパティでは動作しません。

+ +> **Note:** 英語ではなぜ "conic" (円錐) グラデーションと呼ばれるのか。色経由点が一方よりもう一方が明るい場合、上から見た円錐のように見えるからです。 + +### 扇型グラデーションの構成 + +扇形グラデーションの構文は放射グラデーションと似ていますが、色経由点はグラデーションの中心から現れるグラデーション軸上ではなく、グラデーション円弧、すなわち円周上に配置されます。扇形グラデーションでは、色の遷移は円の中心を回るように、上から始まって時計回りに行われます。放射グラデーションでは、色の遷移は楕円の中心から外に向けて、すべての方向に行われます。 + +![扇形グラデーションの円周と放射グラデーションの軸に沿った色経由点](screenshot_2018-11-29_21.09.19.png) + +扇形グラデーションは、回転角度とグラデーションの中心を指定し、色経由点のリストを指定します。[長さ](/ja/docs/Web/CSS/length)を指定して色経由点を配置する線形グラデーションや放射グラデーションとは異なり、扇形グラデーションの色経由点は角度を指定します。単位には[度](/ja/docs/Web/CSS/angle)を表す `deg`、グラードを表す `grad`、ラジアンを表す `rad`、回転数を表す `turn` があります。 1 つの円は 360 度、 400 グラード、 2π ラジアン、 1 回転になります。扇形グラデーションに対応しているブラウザーはパーセント値も受け付けており、 100% は 360 度に相当しますが、これは仕様にはありません。 + +放射グラデーションと同様に、扇形グラデーションの構文では、グラデーションの中心を画像内のどこにでも、あるいは画像の外側にでも配置することができます。位置の値は、 2 値の背景位置の構文に似ています。 + +グラデーション円弧は、グラデーションの円周です。グラデーションまたは円弧の*始点*は北、つまり 12 時の方向です。そして、グラデーションは _from_ の角度だけ回転します。グラデーションの色は、角度のついた色経由点、それらの開始点、終了点、および、その間、および、任意の角度のついた色経由点によって決定されます。色間の遷移は、隣接する色の色経由点の間のカラーヒントで変更することができます。 + +#### グラデーションのカスタマイズ + +グラデーション円弧上に角度のついた色経由点をさらに追加することで、複数の色の間で高度なカスタマイズされた遷移を行うことができます。色経由点の位置は、 {{CSSxRef("<angle>")}} を使って明示的に定義することができます。色経由点の位置を指定しない場合は、前の色経由点と後の色経由点の中間に配置されます。最初の色経由点と最後の色経由点に角度を指定しない場合、その値はそれぞれ 0deg と 360deg です。次の2つのグラデーションは同等です。 + +```css +conic-gradient(red, orange, yellow, green, blue); +conic-gradient(red 0deg, orange 90deg, yellow 180deg, green 270deg, blue 360deg); +``` + +既定では、色はある色経由点の色から次の色経由点の色へとスムーズに移行し、色と色の中間点が色移行の中間点となります。カラーヒントを追加して色遷移の中間点を示すことで、この色遷移の中間点を 2 つの色経由点間の任意の位置に移動させることができます。次の例は、開始点から 10% の印までは赤一色で、回転の 80% 以上で赤から青に移行し、最後の 10% は青一色になっています。しかし、赤から青へのグラデーション変化の中間点は 20％ の位置になります。 80grad (20％) のカラーヒントがなかった場合は 50％ の位置になります。 + +```css +conic-gradient(red 40grad, 80grad, blue 360grad); +``` + +2 つ以上の色経由点が同じ場所にある場合、その場所で宣言された最初の色と最後の色の間に不連続の (硬い) 色変化として表示されます。扇形グラデーションを使用して円グラフを作成するには、 -- 背景画像はアクセシビリティが確保できないため、正しい方法ではありませんが -- 隣接する 2 つの色経由点の色経由点の角度が同じである、硬い色経由点を使用します。これを実現する最も簡単な方法は、複数のポジションの色経由点を使用することです。次の 2 つの宣言は等価です。 + +```css +conic-gradient(#fff 0.09turn, #bbb 0.09turn, #bbb 0.27turn, #666 0.27turn, #666 0.54turn, #000 0.54turn); +conic-gradient(#fff 0turn 0.09turn, #bbb 0.09turn 0.27turn, #666 0.27turn 0.54turn, #000 0.54turn 1turn); +``` + +色経由点は、昇順に並べる必要があります。後続の色経由点がより低い値であった場合、前の色経由点の値を上書きし、硬い (不連続の) 色変化を生成します。次の例では、 30% の地点で赤から黄色に変化し、グラデーションの 35% の地点で黄色から青に変化しています。 + +```css +conic-gradient(red .8rad, yellow .6rad, blue 1.3rad); +``` + +扇形グラデーションでは、他にもさまざまな効果を作り出すことができます。奇しくも市松模様もその一つです。左上と右下の白、左下と右上の黒で四分円を作り、グラデーションを16回 (横に4回、下に4回) 繰り返すと市松模様になります。 + +```css +conic-gradient(#fff 90deg, #000 0.25turn 0.5turn, #fff 1rad 1.5rad, #000 300grad); +background-size: 25% 25%; +``` + +そして、そうですね、異なる角度のユニットを混ぜて使うこともできますが、やめておきましょう。以上、読みにくかったですね。 + +## アクセシビリティの考慮 + +ブラウザは、背景画像に関する特別な情報を支援技術に提供しません。これは主に画面リーダーにとって重要なことで、画面リーダーはその存在を告知しないため、ユーザーに何も伝えられません。扇形グラデーションを使って円グラフや市松模様などの効果を出すことは可能ですが、 CSS 画像は代替テキストを割り当てるネイティブな方法を提供していないため、扇形グラデーションで表現された画像は画面リーダーのユーザーが認知することはできません。ページの全体的な目的を理解するために重要な情報が画像に含まれている場合は、文書内で意味的に記述する方が良いでしょう。 + +- [MDN WCAG を理解する, ガイドライン 1.1 の説明](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content) +- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) + +## 例 + +

40 度のグラデーション

+ +```css hidden +div { + width: 100px; + height: 100px; +} +``` + +```html hidden +
+``` + +```css +div { + background-image: + conic-gradient(from 40deg, #fff, #000); +} +``` + +{{EmbedLiveSample("Gradient_at_40-degrees", 120, 120)}} + +

中心をずらしたグラデーション

+ +```css hidden +div { + width: 100px; + height: 100px; +} +``` + +```html hidden +
+``` + +```css +div { + background: conic-gradient(from 0deg at 0% 25%, blue, green, yellow 180deg); +} +``` + +{{EmbedLiveSample("Off-centered_gradient", 120, 120)}} + +

グラデーションの円グラフ

+ +This example uses multi-position color stops, with adjacent colors having the same color stop value, creating a striped effect. + +```css hidden +div { + width: 100px; + height: 100px; +} +``` + +```html hidden +
+``` + +```css +div { + background: conic-gradient( + red 36deg, orange 36deg 170deg, yellow 170deg); + border-radius: 50% +} +``` + +{{EmbedLiveSample("Gradient_pie-chart", 120, 120)}} + +

市松模様

+ +```css hidden +div { + width: 100px; + height: 100px; +} +``` + +```html hidden +
+``` + +```css +div { + background: + conic-gradient(#fff 0.25turn, #000 0.25turn 0.5turn, #fff 0.5turn 0.75turn, #000 0.75turn) + top left / 25% 25% repeat; + border: 1px solid; +} +``` + +{{EmbedLiveSample("Checkerboard", 120, 120)}} + +### その他の conic-gradient の例 + +他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- 他のグラデーション関数: {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}}, {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}} +- {{cssxref("<image>")}} +- {{cssxref("image/image()","image()")}} +- {{cssxref("element()")}} +- {{cssxref("image/image-set()","image-set()")}} +- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/gradient/linear-gradient()/index.md b/files/ja/web/css/gradient/linear-gradient()/index.md deleted file mode 100644 index 963db61405..0000000000 --- a/files/ja/web/css/gradient/linear-gradient()/index.md +++ /dev/null @@ -1,198 +0,0 @@ ---- -title: linear-gradient() -slug: Web/CSS/gradient/linear-gradient() -tags: - - CSS - - CSS 画像 - - CSS 関数 - - Function - - Graphics - - Layout - - Reference - - Web - - gradient -translation_of: Web/CSS/gradient/linear-gradient() -original_slug: Web/CSS/linear-gradient() -browser-compat: css.types.image.gradient.linear-gradient ---- -{{CSSRef}} - -**`linear-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、二つ以上の色の連続的な直線に沿った変化から構成される画像を生成します。結果は {{CSSxRef("<gradient>")}} データ型のオブジェクトであり、これは {{CSSxRef("<image>")}} の特殊型です。 - -{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}} - -## 構文 - -```css -/* 45度に傾いたグラデーションで、 - 青から始まり赤で終わる */ -linear-gradient(45deg, blue, red); - -/* 右下から左上に向かうグラデーションで、 - 青から始まり赤で終わる */ -linear-gradient(to left top, blue, red); - -/* 色経由点: 下から上に向かうグラデーションで、 - 青から始まり、長さの 40% のところで緑になり、 - 赤で終わる */ -linear-gradient(0deg, blue, green 40%, red); - -/* 色ヒント: 左から右に向かうグラデーションで、 - 赤から始まり、グラデーションの長さ全体の - 10% に中間点が来て、残りの 90% の長さをかけて - 青色に変わる */ -linear-gradient(.25turn, red, 10%, blue); - -/* 複数位置の色経由点: 45 度傾いたグラデーションで、 - 左下半分が赤で右上半分が青、 - 赤から青への変化は明確な線 */ -linear-gradient(45deg, red 0 50%, blue 50% 100%); -``` - -### 値 - -- `` - - - : グラデーション軸の開始点の位置。指定する場合は、 `to` に続けて 2 つ以下のキーワードから成ります。一つは水平方向の辺 (`left` または `right`)、もう一方は垂直方向の辺 (`top` または `bottom`) です。辺を表すキーワードは順不同です。指定しない場合は、 `to bottom` が既定になります。 - - `to top`, `to bottom`, `to left`, `to right` の値は、 `0deg`, `180deg`, `270deg`, `90deg` の角度にそれぞれ対応します。他の値は角度に変換されます。 - -- {{CSSxRef("<angle>")}} - - : グラデーション軸の方向を角度で示します。 `0deg` の値は `to top` と等価で、値が増加するとそこから時計回りに回ります。 -- `` - - : 色経由点の {{CSSxRef("<color>")}} の値であり、任意でその後に停止位置を指定します (グラデーションの軸に沿った {{CSSxRef("<percentage>")}} または {{CSSxRef("<length>")}} の位置)。 -- `` - - : 隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。 - -> **Note:** [CSS グラデーションにおける色経由点](#gradient_with_multiple_color_stops)の描画は、 [SVG グラデーション](/ja/docs/Web/SVG/Tutorial/Gradients)と同じ規則に従います。 -> -> なお、上記の最初の例は、 Mozilla Firefox (特にバージョン 80.0b3) では、正確には図のようには表示されません。描かれているように表示するには、 html の height プロパティを 100% または 100vh に設定する必要があります。 - -## 解説 - -他のグラデーションと同様、線形グラデーションは[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、画像本来の寸法や、推奨される縦横比を持たないということです。実際の寸法は、適用先の要素の寸法と一致します。 - -繰り返して領域を埋め尽くす線形グラデーションを生成するには、代わりに {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}} 関数を使用してください。 - -`` は CSS の `` データ型に所属しますので、 `` が使用できるところでのみ使用できます。このため、 `linear-gradient` は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("<color>")}} を要求するプロパティでは動作しません。 - -### 線形グラデーションの構成 - -線形グラデーションは、グラデーション軸 (Gradient line) と呼ばれる軸によって定義されます。軸上の各点にはそれぞれ違った色が割り当てられます。なめらかなグラデーションを作成するために、 `linear-gradient()` 関数はグラデーション軸と直行する直線を、グラデーション軸上の交点の色で連続して引きます。 - -![linear-gradient.png](linear-gradient.png) - -グラデーション軸は、グラデーション画像を含むボックスの中心と、角度によって定義されます。グラデーションの色は、開始点 (Starting point)、 終了点 (Ending point) と、省略可能な色経由点 (color-stop point) の各点でそれぞれ定義されます。 - -開始点は、グラデーション軸の最初の色が始まる点です。終了点は最後の色が終わるところです。これらの点は、グラデーション軸とそれに直交し、ボックスの同一象限にあるコーナーを通る直線との交点によって定義されます。ただ、もっと簡単に、ボックスの中心を原点としたときの開始点の点対称な位置としても定義できます。こうした何だかややこしい開始点と終了点の定義が、*マジックコーナー*と呼ばれる興味深い効果を生みました。開始点と終了点に近いコーナーは、それぞれ開始点と終了点と同じ色を持ちます。 - -#### グラデーションのカスタマイズ - -グラデーション軸に色経由点を追加することで、開始点と終了点の間で高度にカスタマイズした変化を作成することができます。色経由点は {{CSSxRef("<length>")}} や {{CSSxRef("<percentage>")}} データ型を使って、明示的に定義することができます。もし場所を定義しなかったときは、直前の点と直後の点の中間点になります。以下の二つのグラデーションは等価です。 - -```css -linear-gradient(red, orange, yellow, green, blue); -linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%); -``` - -ある色経由点の色から次の色経由点の色まで滑らかに色が変化し、色と色の中間点は、既定では色の変化の中間の位置になります。色の変化の中間点をどこに置くかを示すために、二つの色の間でラベルのない % の色ヒントを追加することで、色の中間点を二つの色経由点の間の任意の位置に移動することができます。次の例では、純粋な赤を先頭から 10% の位置まで、純粋な青を 90% の位置から末尾までに配置します。 10% から 90％ までの間は、赤から青への色変化ですが、色ヒントがない 30% があるので、変化の中間点は 50% の位置ではなく 30% の位置になります。 - -```css -linear-gradient(red 10%, 30%, blue 90%); -``` - -二つ以上の色経由点が同じ位置である場合、その位置で宣言された最初と最後の色の間で明確な線になります。 - -色経由点は昇順に並べてください。次の色経由点がより小さな値になると、以前の色経由点を上書きすることになり、急な変化になります。以下の例では、赤から始まって 40% の位置で黄色になり、それから 25% にわたって黄色から青への変化になります。 - -```css -linear-gradient(red 40%, yellow 30%, blue 65%); -``` - -色経由点には複数の位置が利用できます。 CSS 宣言の中で二つの位置を含めることで、二つの隣り合う色経由点として色を宣言することができます。 - -```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%); -``` - -既定では、 0% の経由点に色がない場合、宣言されている最初の色がその場所の色になります。同様に、最後の色経由点に位置が宣言されていない場合は、最後の色が 100% の位置まで続くか、 100% の位置の色になります。 - -## 例 - -

45 度 のグラデーション

- -```css hidden -body { - width: 100vw; - height: 100vh; -} -``` - -```css -body { - background: linear-gradient(45deg, red, blue); -} -``` - -{{EmbedLiveSample("Gradient_at_a_45-degree_angle", 120, 120)}} - -

グラデーション軸の 60% から始まるグラデーション

- -```css hidden -body { - width: 100vw; - height: 100vh; -} -``` - -```css -body { - background: linear-gradient(135deg, orange 60%, cyan); -} -``` - -{{EmbedLiveSample("Gradient_that_starts_at_60_of_the_gradient_line", 120, 120)}} - -

複数の位置の色経由点があるグラデーション

- -この例は複数の位置の色経由点を使用しており、隣り合う色に同じ色経由値があるため、縞模様の効果になります。 - -```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("Gradient_with_multi-position_color_stops", 120, 120)}} - -

その他のグラデーションの例

- -他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。 - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) -- 他のグラデーション関数: {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} -- {{CSSxRef("<image>")}} -- {{cssxref("element()")}} -- {{cssxref("image/image()","image()")}} -- {{cssxref("image/image-set()","image-set()")}} -- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/gradient/linear-gradient/index.md b/files/ja/web/css/gradient/linear-gradient/index.md new file mode 100644 index 0000000000..a03f52dc83 --- /dev/null +++ b/files/ja/web/css/gradient/linear-gradient/index.md @@ -0,0 +1,198 @@ +--- +title: linear-gradient() +slug: Web/CSS/gradient/linear-gradient +tags: + - CSS + - CSS 画像 + - CSS 関数 + - Function + - Graphics + - Layout + - Reference + - Web + - gradient +translation_of: Web/CSS/gradient/linear-gradient() +original_slug: Web/CSS/gradient/linear-gradient() +browser-compat: css.types.image.gradient.linear-gradient +--- +{{CSSRef}} + +**`linear-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、二つ以上の色の連続的な直線に沿った変化から構成される画像を生成します。結果は {{CSSxRef("<gradient>")}} データ型のオブジェクトであり、これは {{CSSxRef("<image>")}} の特殊型です。 + +{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}} + +## 構文 + +```css +/* 45度に傾いたグラデーションで、 + 青から始まり赤で終わる */ +linear-gradient(45deg, blue, red); + +/* 右下から左上に向かうグラデーションで、 + 青から始まり赤で終わる */ +linear-gradient(to left top, blue, red); + +/* 色経由点: 下から上に向かうグラデーションで、 + 青から始まり、長さの 40% のところで緑になり、 + 赤で終わる */ +linear-gradient(0deg, blue, green 40%, red); + +/* 色ヒント: 左から右に向かうグラデーションで、 + 赤から始まり、グラデーションの長さ全体の + 10% に中間点が来て、残りの 90% の長さをかけて + 青色に変わる */ +linear-gradient(.25turn, red, 10%, blue); + +/* 複数位置の色経由点: 45 度傾いたグラデーションで、 + 左下半分が赤で右上半分が青、 + 赤から青への変化は明確な線 */ +linear-gradient(45deg, red 0 50%, blue 50% 100%); +``` + +### 値 + +- `` + + - : グラデーション軸の開始点の位置。指定する場合は、 `to` に続けて 2 つ以下のキーワードから成ります。一つは水平方向の辺 (`left` または `right`)、もう一方は垂直方向の辺 (`top` または `bottom`) です。辺を表すキーワードは順不同です。指定しない場合は、 `to bottom` が既定になります。 + + `to top`, `to bottom`, `to left`, `to right` の値は、 `0deg`, `180deg`, `270deg`, `90deg` の角度にそれぞれ対応します。他の値は角度に変換されます。 + +- {{CSSxRef("<angle>")}} + - : グラデーション軸の方向を角度で示します。 `0deg` の値は `to top` と等価で、値が増加するとそこから時計回りに回ります。 +- `` + - : 色経由点の {{CSSxRef("<color>")}} の値であり、任意でその後に停止位置を指定します (グラデーションの軸に沿った {{CSSxRef("<percentage>")}} または {{CSSxRef("<length>")}} の位置)。 +- `` + - : 隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。 + +> **Note:** [CSS グラデーションにおける色経由点](#gradient_with_multiple_color_stops)の描画は、 [SVG グラデーション](/ja/docs/Web/SVG/Tutorial/Gradients)と同じ規則に従います。 +> +> なお、上記の最初の例は、 Mozilla Firefox (特にバージョン 80.0b3) では、正確には図のようには表示されません。描かれているように表示するには、 html の height プロパティを 100% または 100vh に設定する必要があります。 + +## 解説 + +他のグラデーションと同様、線形グラデーションは[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、画像本来の寸法や、推奨される縦横比を持たないということです。実際の寸法は、適用先の要素の寸法と一致します。 + +繰り返して領域を埋め尽くす線形グラデーションを生成するには、代わりに {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}} 関数を使用してください。 + +`` は CSS の `` データ型に所属しますので、 `` が使用できるところでのみ使用できます。このため、 `linear-gradient` は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("<color>")}} を要求するプロパティでは動作しません。 + +### 線形グラデーションの構成 + +線形グラデーションは、グラデーション軸 (Gradient line) と呼ばれる軸によって定義されます。軸上の各点にはそれぞれ違った色が割り当てられます。なめらかなグラデーションを作成するために、 `linear-gradient()` 関数はグラデーション軸と直行する直線を、グラデーション軸上の交点の色で連続して引きます。 + +![linear-gradient.png](linear-gradient.png) + +グラデーション軸は、グラデーション画像を含むボックスの中心と、角度によって定義されます。グラデーションの色は、開始点 (Starting point)、 終了点 (Ending point) と、省略可能な色経由点 (color-stop point) の各点でそれぞれ定義されます。 + +開始点は、グラデーション軸の最初の色が始まる点です。終了点は最後の色が終わるところです。これらの点は、グラデーション軸とそれに直交し、ボックスの同一象限にあるコーナーを通る直線との交点によって定義されます。ただ、もっと簡単に、ボックスの中心を原点としたときの開始点の点対称な位置としても定義できます。こうした何だかややこしい開始点と終了点の定義が、*マジックコーナー*と呼ばれる興味深い効果を生みました。開始点と終了点に近いコーナーは、それぞれ開始点と終了点と同じ色を持ちます。 + +#### グラデーションのカスタマイズ + +グラデーション軸に色経由点を追加することで、開始点と終了点の間で高度にカスタマイズした変化を作成することができます。色経由点は {{CSSxRef("<length>")}} や {{CSSxRef("<percentage>")}} データ型を使って、明示的に定義することができます。もし場所を定義しなかったときは、直前の点と直後の点の中間点になります。以下の二つのグラデーションは等価です。 + +```css +linear-gradient(red, orange, yellow, green, blue); +linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%); +``` + +ある色経由点の色から次の色経由点の色まで滑らかに色が変化し、色と色の中間点は、既定では色の変化の中間の位置になります。色の変化の中間点をどこに置くかを示すために、二つの色の間でラベルのない % の色ヒントを追加することで、色の中間点を二つの色経由点の間の任意の位置に移動することができます。次の例では、純粋な赤を先頭から 10% の位置まで、純粋な青を 90% の位置から末尾までに配置します。 10% から 90％ までの間は、赤から青への色変化ですが、色ヒントがない 30% があるので、変化の中間点は 50% の位置ではなく 30% の位置になります。 + +```css +linear-gradient(red 10%, 30%, blue 90%); +``` + +二つ以上の色経由点が同じ位置である場合、その位置で宣言された最初と最後の色の間で明確な線になります。 + +色経由点は昇順に並べてください。次の色経由点がより小さな値になると、以前の色経由点を上書きすることになり、急な変化になります。以下の例では、赤から始まって 40% の位置で黄色になり、それから 25% にわたって黄色から青への変化になります。 + +```css +linear-gradient(red 40%, yellow 30%, blue 65%); +``` + +色経由点には複数の位置が利用できます。 CSS 宣言の中で二つの位置を含めることで、二つの隣り合う色経由点として色を宣言することができます。 + +```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%); +``` + +既定では、 0% の経由点に色がない場合、宣言されている最初の色がその場所の色になります。同様に、最後の色経由点に位置が宣言されていない場合は、最後の色が 100% の位置まで続くか、 100% の位置の色になります。 + +## 例 + +

45 度 のグラデーション

+ +```css hidden +body { + width: 100vw; + height: 100vh; +} +``` + +```css +body { + background: linear-gradient(45deg, red, blue); +} +``` + +{{EmbedLiveSample("Gradient_at_a_45-degree_angle", 120, 120)}} + +

グラデーション軸の 60% から始まるグラデーション

+ +```css hidden +body { + width: 100vw; + height: 100vh; +} +``` + +```css +body { + background: linear-gradient(135deg, orange 60%, cyan); +} +``` + +{{EmbedLiveSample("Gradient_that_starts_at_60_of_the_gradient_line", 120, 120)}} + +

複数の位置の色経由点があるグラデーション

+ +この例は複数の位置の色経由点を使用しており、隣り合う色に同じ色経由値があるため、縞模様の効果になります。 + +```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("Gradient_with_multi-position_color_stops", 120, 120)}} + +

その他のグラデーションの例

+ +他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- 他のグラデーション関数: {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} +- {{CSSxRef("<image>")}} +- {{cssxref("element()")}} +- {{cssxref("image/image()","image()")}} +- {{cssxref("image/image-set()","image-set()")}} +- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/gradient/radial-gradient()/index.md b/files/ja/web/css/gradient/radial-gradient()/index.md deleted file mode 100644 index 127f5f85ac..0000000000 --- a/files/ja/web/css/gradient/radial-gradient()/index.md +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: radial-gradient() -slug: Web/CSS/gradient/radial-gradient() -tags: - - CSS - - CSS Function - - CSS Images - - Function - - Graphics - - Layout - - Reference - - Web - - gradient -translation_of: Web/CSS/gradient/radial-gradient() -original_slug: Web/CSS/radial-gradient() -browser-compat: css.types.image.gradient.radial-gradient ---- -{{CSSRef}} - -**`radial-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、二つ以上の色の連続的な推移が原点から放射状に広がる画像を生成します。形状は円形または楕円形にになります。関数の結果は {{cssxref("<gradient>")}} データ型のオブジェクトであり、これは {{cssxref("<image>")}} の特殊形です。 - -{{EmbedInteractiveExample("pages/css/function-radial-gradient.html")}} - -## 構文 - -```css -/* コンテナーの中央にあるグラデーション、 - 赤で始まり、青へ変わり、緑で終わる */ -radial-gradient(circle at center, red 0, blue, green 100%) -``` - -放射状のグラデーションは、グラデーションの中心 (0％ の楕円の位置) と、*末端図形* (100％ の楕円) の大きさと形状を示すことで指定します。  - -## 値 - -- {{cssxref("<position>")}} - - : グラデーションの位置で、 {{cssxref("background-position")}} や {{cssxref("transform-origin")}} と同じ方法で解釈されます。指定されなかった場合、既定値は `center` です。 -- `` - - : グラデーションの末端図形です。値は `circle` (つまり、グラデーションの形状が一定の半径の円) か `ellipse` (つまり、軸に沿った楕円) のいずれかです。指定されなかった場合、既定値は `ellipse` です。 -- `` - - - : グラデーションの末端図形の大きさを決定します。省略した場合の既定値は farthest-corner です。これは明示的に指定することも、キーワードで指定することもできます。ここでのキーワード定義では、グラデーションボックスのエッジは有限の線分ではなく、両方向に無限に伸びているものと考えてください。 - - グラデーションが円でも楕円でも `` に以下のキーワードを使用することができます。 - - | キーワード | 説明 | - | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | - | `closest-side` | グラデーションの末端図形は、ボックスの中心から最も近い辺 (circle の場合) または中心から最も近い縦の辺と横の辺 (ellipse の場合) に内接します。 | - | `closest-corner` | グラデーションの末端図形は、ボックスの中心から最も近い頂点に接するように大きさが調整されます。 | - | `farthest-side` | `closest-side` と同様ですが、末端図形がその中心から最も遠い辺 (または縦と横の辺) に接するように大きさが調整される点が異なります。 | - | `farthest-corner` | 既定値で、グラデーションの末端図形は、ボックスの中心から最も遠い頂点に接するように大きさが調整されます。 | - - `` を `circle` と指定した場合、大きさを明示的に [``](/ja/docs/Web/CSS/length) として与えることができ、円形の広がりの大きさを明示的に指定します。負の値は不正です。 - - `` を `ellipse` と指定するか省略した場合、大きさを二つの [``](/ja/docs/Web/CSS/length-percentage) で指定して明示的な楕円の大きさを指定することができます。 1 つ目の値は水平の広がり、 2 つ目の値は垂直の広がりです。パーセント値はグラデーションボックスの対応する長さからの相対値です。負の値は不正です。 - -- `` - - : 色経由点の {{cssxref("<color>")}} 値と、それに続く 1 つまたは 2 つの省略可能な経由位置 (グラデーション軸沿いの {{cssxref("<percentage>")}} または {{cssxref("<length>")}}) です。 percentage が `0%`、または length が `0` の場合は、グラデーションの中心を表します。 `100%` は末端図形と仮想グラデーション光線の交点を表します。その間のパーセント値はグラデーション光線における直線的な位置です。 -- `` - - : color-hint は、隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。 - -## 解説 - -

他のグラデーションと同様、放射グラデーションは[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、自然な寸法や推奨される寸法、推奨される縦横比もありません。具体的な寸法は、適用先の要素の寸法に一致します。 - -繰り返してコンテナーを埋める放射グラデーションを生成するには、代わりに {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}} 関数を使用してください。 - -`` は `` データ型に属するため、 `` が使用できるところでしか使用できません。このため、 `radial-gradient()` は {{cssxref("background-color")}} や、その他の {{cssxref("<color>")}} データ型を使用するプロパティでは動作しません。

- -### 放射グラデーションの構成 - -![](radial_gradient.png)放射グラデーションは*中心点*、*末端図形*、および二つ以上の*色経由点*で定義されます。 - -滑らかなグラデーションを生成するために、 `radial-gradient()` 関数は中央から*末端図形* (およびその先) に向けて一連の同心円の形状を描きます。図形の端は円または楕円です。 - -色経由点は、中心から右方向に水平に延びる*仮想グラデーション光線*の上に配置されます。色経由点の位置を決めるパーセント値は、図形の端とこのグラデーション光線の交点を `100%` としたときの相対値です。各形状は単色で、色は交差したグラデーション光線の色によって定義されます。 - -## 例 - -

シンプルなグラデーション

- -```html hidden -
-``` - -```css hidden -.radial-gradient { - width: 240px; - height: 120px; -} -``` - -```css -.radial-gradient { - background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%); -} -``` - -{{EmbedLiveSample('Simple_gradient', 120, 120)}} - -

中央から外れたグラデーション

- -```html hidden -
-``` - -```css hidden -.radial-gradient { - width: 240px; - height: 120px; -} -``` - -```css -.radial-gradient { - background-image: radial-gradient(farthest-corner at 40px 40px, - #f35 0%, #43e 100%); -} -``` - -{{EmbedLiveSample('Non-centered_gradient', 240, 120)}} - -### 他の radial-gradient の例 - -他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。 - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) -- 他のグラデーション関数: {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} -- {{cssxref("<image>")}} -- {{cssxref("image/image()","image()")}} -- {{cssxref("element()")}} -- {{cssxref("image/image-set()","image-set()")}} -- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/gradient/radial-gradient/index.md b/files/ja/web/css/gradient/radial-gradient/index.md new file mode 100644 index 0000000000..030750158a --- /dev/null +++ b/files/ja/web/css/gradient/radial-gradient/index.md @@ -0,0 +1,143 @@ +--- +title: radial-gradient() +slug: Web/CSS/gradient/radial-gradient +tags: + - CSS + - CSS Function + - CSS Images + - Function + - Graphics + - Layout + - Reference + - Web + - gradient +translation_of: Web/CSS/gradient/radial-gradient() +original_slug: Web/CSS/gradient/radial-gradient() +browser-compat: css.types.image.gradient.radial-gradient +--- +{{CSSRef}} + +**`radial-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、二つ以上の色の連続的な推移が原点から放射状に広がる画像を生成します。形状は円形または楕円形にになります。関数の結果は {{cssxref("<gradient>")}} データ型のオブジェクトであり、これは {{cssxref("<image>")}} の特殊形です。 + +{{EmbedInteractiveExample("pages/css/function-radial-gradient.html")}} + +## 構文 + +```css +/* コンテナーの中央にあるグラデーション、 + 赤で始まり、青へ変わり、緑で終わる */ +radial-gradient(circle at center, red 0, blue, green 100%) +``` + +放射状のグラデーションは、グラデーションの中心 (0％ の楕円の位置) と、*末端図形* (100％ の楕円) の大きさと形状を示すことで指定します。 + +## 値 + +- {{cssxref("<position>")}} + - : グラデーションの位置で、 {{cssxref("background-position")}} や {{cssxref("transform-origin")}} と同じ方法で解釈されます。指定されなかった場合、既定値は `center` です。 +- `` + - : グラデーションの末端図形です。値は `circle` (つまり、グラデーションの形状が一定の半径の円) か `ellipse` (つまり、軸に沿った楕円) のいずれかです。指定されなかった場合、既定値は `ellipse` です。 +- `` + + - : グラデーションの末端図形の大きさを決定します。省略した場合の既定値は farthest-corner です。これは明示的に指定することも、キーワードで指定することもできます。ここでのキーワード定義では、グラデーションボックスのエッジは有限の線分ではなく、両方向に無限に伸びているものと考えてください。 + + グラデーションが円でも楕円でも `` に以下のキーワードを使用することができます。 + + | キーワード | 説明 | + | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | + | `closest-side` | グラデーションの末端図形は、ボックスの中心から最も近い辺 (circle の場合) または中心から最も近い縦の辺と横の辺 (ellipse の場合) に内接します。 | + | `closest-corner` | グラデーションの末端図形は、ボックスの中心から最も近い頂点に接するように大きさが調整されます。 | + | `farthest-side` | `closest-side` と同様ですが、末端図形がその中心から最も遠い辺 (または縦と横の辺) に接するように大きさが調整される点が異なります。 | + | `farthest-corner` | 既定値で、グラデーションの末端図形は、ボックスの中心から最も遠い頂点に接するように大きさが調整されます。 | + + `` を `circle` と指定した場合、大きさを明示的に [``](/ja/docs/Web/CSS/length) として与えることができ、円形の広がりの大きさを明示的に指定します。負の値は不正です。 + + `` を `ellipse` と指定するか省略した場合、大きさを二つの [``](/ja/docs/Web/CSS/length-percentage) で指定して明示的な楕円の大きさを指定することができます。 1 つ目の値は水平の広がり、 2 つ目の値は垂直の広がりです。パーセント値はグラデーションボックスの対応する長さからの相対値です。負の値は不正です。 + +- `` + - : 色経由点の {{cssxref("<color>")}} 値と、それに続く 1 つまたは 2 つの省略可能な経由位置 (グラデーション軸沿いの {{cssxref("<percentage>")}} または {{cssxref("<length>")}}) です。 percentage が `0%`、または length が `0` の場合は、グラデーションの中心を表します。 `100%` は末端図形と仮想グラデーション光線の交点を表します。その間のパーセント値はグラデーション光線における直線的な位置です。 +- `` + - : color-hint は、隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。 + +## 解説 + +

他のグラデーションと同様、放射グラデーションは[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、自然な寸法や推奨される寸法、推奨される縦横比もありません。具体的な寸法は、適用先の要素の寸法に一致します。 + +繰り返してコンテナーを埋める放射グラデーションを生成するには、代わりに {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}} 関数を使用してください。 + +`` は `` データ型に属するため、 `` が使用できるところでしか使用できません。このため、 `radial-gradient()` は {{cssxref("background-color")}} や、その他の {{cssxref("<color>")}} データ型を使用するプロパティでは動作しません。

+ +### 放射グラデーションの構成 + +![](radial_gradient.png)放射グラデーションは*中心点*、*末端図形*、および二つ以上の*色経由点*で定義されます。 + +滑らかなグラデーションを生成するために、 `radial-gradient()` 関数は中央から*末端図形* (およびその先) に向けて一連の同心円の形状を描きます。図形の端は円または楕円です。 + +色経由点は、中心から右方向に水平に延びる*仮想グラデーション光線*の上に配置されます。色経由点の位置を決めるパーセント値は、図形の端とこのグラデーション光線の交点を `100%` としたときの相対値です。各形状は単色で、色は交差したグラデーション光線の色によって定義されます。 + +## 例 + +

シンプルなグラデーション

+ +```html hidden +
+``` + +```css hidden +.radial-gradient { + width: 240px; + height: 120px; +} +``` + +```css +.radial-gradient { + background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%); +} +``` + +{{EmbedLiveSample('Simple_gradient', 120, 120)}} + +

中央から外れたグラデーション

+ +```html hidden +
+``` + +```css hidden +.radial-gradient { + width: 240px; + height: 120px; +} +``` + +```css +.radial-gradient { + background-image: radial-gradient(farthest-corner at 40px 40px, + #f35 0%, #43e 100%); +} +``` + +{{EmbedLiveSample('Non-centered_gradient', 240, 120)}} + +### 他の radial-gradient の例 + +他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- 他のグラデーション関数: {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} +- {{cssxref("<image>")}} +- {{cssxref("image/image()","image()")}} +- {{cssxref("element()")}} +- {{cssxref("image/image-set()","image-set()")}} +- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/gradient/repeating-conic-gradient()/index.md b/files/ja/web/css/gradient/repeating-conic-gradient()/index.md deleted file mode 100644 index f9780d9829..0000000000 --- a/files/ja/web/css/gradient/repeating-conic-gradient()/index.md +++ /dev/null @@ -1,177 +0,0 @@ ---- -title: repeating-conic-gradient() -slug: Web/CSS/gradient/repeating-conic-gradient() -tags: - - CSS - - CSS Function - - CSS Images - - Function - - Graphics - - Layout - - Reference - - Web - - gradient -browser-compat: css.types.image.gradient.repeating-conic-gradient -translation_of: Web/CSS/gradient/repeating-conic-gradient() ---- -{{CSSRef}} - -**`repeating-conic-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 ([単一のグラデーション](conic-gradient())ではなく) 繰り返しのグラデーションからなる、色の遷移が (中心から[放射状に広がるのではなく](repeating-radial-gradient\(\))) 中心点の周りを回転する画像を生成します。 - -## 構文 - -```css -/* スターバースト: 青の上に青のスターブラスト: - このグラデーションは左上 4 分の 1 の位置を中心とした - 明るい青と暗い青のスターブラストで、 3 度傾いている - ため垂直線がありません。 */ -background: repeating-conic-gradient( - from 3deg at 25% 25%, - hsl(200, 100%, 50%) 0deg 15deg, - hsl(200, 100%, 60%) 10deg 30deg); -); -``` - -### 値 - -- {{CSSxRef("<angle>")}} - - : `from` キーワードに続いて角度を指定することで、時計回りのグラデーションの位置を定義します。 -- `` - - : {{cssxref("background-position")}} プロパティと同じ長さ、順番、キーワード値を使用して、グラデーションの中心の位置を定義します。省略すると、既定値は`center`、すなわちグラデーションに配置されます。 -- `` - - : 色経由点の {{CSSxRef("<color>")}} 値で、その後にオプションで 1 ～ 2 個の位置 (グラデーションの円周軸に沿った {{CSSxRef("<angle>")}}) が続きます。最後の色経由点から最初の色経由点までの角度が反復グラデーションの大きさを定義します。 -- `` - - : 隣接する色経由点の間でグラデーションがどのように進行するかを定義する補間のヒントです。長さは、 2 つの色経由点の間のどの位置でグラデーションの色が色の遷移の中間点に到達するかを定義します。省略した場合、色の遷移の中間点は 2 つの色経由点間の中間点になります。 - -> **Note:** [CSS グラデーションにおける色経由点](#gradient_with_multiple_color_stops)の描画は、 [SVG グラデーション](/ja/docs/Web/SVG/Tutorial/Gradients)と同じ規則に従います。 - -## 解説 - -反復扇形グラデーションの例にはスターバーストがあります。 `repeating-conic-gradient()` 関数の返値は {{CSSxRef("<gradient>")}} データ型のオブジェクトで、これは {{CSSxRef("<image>")}} の特殊形です。 - -最初と最後の色経由点がどちらも 0 度以上か 360 度未満になっていない場合、 conic-gradient は繰り返されません。 - -他のグラデーションと同様、扇形グラデーションは[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、自然の寸法や推奨される寸法、推奨される縦横比もありません。自身の寸法は適用先の要素の寸法、または要素の寸法以外で設定された `` の寸法に一致します。 - -`` は `` データ型に属するため、 `` が使用できるところでしか使用できません。このため、 `conic-gradient()` は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("<color>")}} データ型を使用するプロパティでは動作しません。

- -> **Note:** 反復しない扇形グラデーションを作成するには、グラデーションを 360 度の回転にするか、 {{cssxref("gradient/conic-gradient()", "conic-gradient()")}} 関数を使用するかしてください。 - -### 反復扇形グラデーションの理解 - -repeating-conic-gradient の構文は、 {{cssxref("gradient/conic-gradient()", "conic-gradient()")}} や {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}} の構文に似ています。反復しない扇形グラデーションのように、色経由点はグラデーションの円弧の周りに配置されます。反復放射グラデーションのように、反復部分の大きさは、最後の色経由点の角度から最初の色経由点を引いたものになります。 - -![反復／反復なしの扇形／放射グラデーションの色経由点の比較](repeatingconicgradient.png) - -上記のグラデーションは 3 分の 1 が青、 3 分の 1 が赤、 3 分の 1 が黄色として定義されています。 - - repeating-conic-gradient(from 0deg, red 0deg 30deg, yellow 30deg 60deg, blue 60deg 90deg); - - repeating-radial-gradient(red 0 8%, yellow 8% 16%, blue 16% 24%); - - conic-gradient(red 120deg, yellow 120deg 240deg, blue 240deg); - - radial-gradient(red 33%, yellow 33% 66%, blue 66%); - -反復グラデーションを繰り返すためには、最初と最後の色経由点を定義します。繰り返さないグラデーションと同様に、最初と最後の色経由点は、明示的に宣言されていない場合、 0 と 100% または 360deg のいずれかであると仮定されます。これらの値を既定値とした場合、反復アークは360度となるため、繰り返されません。 - -繰り返しのない扇形グラデーションと同様に、色経由点はグラデーションの中心から出ているグラデーション軸上ではなく、グラデーション円弧 (円の円周) の周りに配置されます。 `from ` が宣言されていない場合は一番上から始まり、最大と最小の色の角度の違いである角度の大きさ分だけ時計回りに進み、それを繰り返すことで、円の中心を回るように色が推移します。 - -繰り返しの扇形グラデーションは、回転角度とグラデーションの中心を指定し、さらに色経由点のリストを指定します。反復のない扇形グラデーションと同様に、反復扇形グラデーションの色経由点は {{cssxref('angle')}} で指定します。単位は、度は `deg`、グラデーションは `grad`、ラジアンは `rad`、ターンは `turn` です。円は、360 度、400 グラード、2πラジアン、1 ターンです。反復扇形グラデーションに対応しているブラウザーでは、360 度を 100% とするパーセント値も受け付けますが、これは仕様にはありません。 - -放射グラデーションと扇形グラデーションの構文は、グラデーションの中心を画像内または画像外の任意の場所に配置することができます。位置を指定する値は、 2 値の {{cssxref('background-position')}} の構文と同様です。 - -グラデーション円弧はグラデーションの円周の一部です。 0 度は北、つまり 12 時の方向です。グラデーションの色は、角度のついた色経由点、その開始点、終了点、そしてその間にある、任意の角度の色経由点ポイントによって決定されます。色の遷移は、隣接する色の色経由点の間にあるカラーヒントで変更することができます。 - -#### グラデーションのカスタマイズ - -グラデーションの円弧上に角度のついた色経由点ポイントをさらに追加することで、複数の色の間の高度なカスタマイズされた移行を行うことができます。色経由点の位置は、{{CSSxRef("<angle>")}} を使って明示的に定義することができます。色経由点の位置を指定しない場合は、その前の色経由点と後の色経由点の中間に配置されます。反復しないグラデーションと同様に、最初と最後の色経由点の角度を指定しない場合、その値は 0 度と 360 度になります。いずれの角度も指定しない場合は、非反復の円錐形グラデーションになります。最初と最後の色経由点にそれぞれ 0 度と 360 度以外の値を宣言すると、グラデーションはその値に基づいて繰り返されます。例えば、最初の色に角度を宣言せず、最後の色止めに 10% と宣言した場合、円弧は 10 回繰り返されます。むしろ、最初に宣言した色経由点が起点となり、最後の色経由点は最後に宣言した色経由点の角度となります。次の 2 つのグラデーションは等価です。 - -```css -repeating-conic-gradient(red, orange, yellow, green, blue 50%); -repeating-conic-gradient(from -45deg, red 45deg, orange, yellow, green, blue 225deg) -``` - -既定では、色はある色経由点の色から次の色経由点の色へとスムーズに移行し、色と色の中間点が色移行の中間点となります。この色遷移の中間点は、色遷移の中間点の位置を示すカラーヒントを追加することで、 2 つの色経由点間の任意の位置に移動させることができます。 - -2 つ以上の色経由点が同じ場所にある場合、その場所で宣言された最初の色と最後の色の間で硬い線になります。 - -異なる角度の単位を混在させることは可能ですが、やめておきましょう。 CSS が読みづらくなります。 - -## アクセシビリティの考慮 - -ブラウザは、背景画像に関する特別な情報を支援技術に提供しません。これは主に画面リーダーにとって重要なことで、画面リーダーはその存在を告知しないため、ユーザーに何も伝えられません。扇形グラデーションを使って円グラフや市松模様などの効果を出すことは可能ですが、 CSS 画像は代替テキストを割り当てるネイティブな方法を提供していないため、扇形グラデーションで表現された画像は画面リーダーのユーザーが認知することはできません。ページの全体的な目的を理解するために重要な情報が画像に含まれている場合は、文書内で意味的に記述する方が良いでしょう。 - -- [MDN WCAG を理解する, ガイドライン 1.1 の説明](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content) -- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) - -## 例 - -

白黒のスターブラスト

- -```css hidden -div { - width: 200px; - height: 200px; -} -``` - -```html hidden -
-``` - -```css -div { - background-image: - repeating-conic-gradient(#fff 0 9deg, #000 9deg 18deg); -} -``` - -{{EmbedLiveSample("Black_and_white_starburst", 220, 220)}} - -

中心をずらしたグラデーション

- -このグラデーションは 18 回繰り返されますが、右半分しか見えないので、 9 回の繰り返しにしか見えません。 - -```css hidden -div { - width: 200px; - height: 200px; -} -``` - -```html hidden -
-``` - -```css -div { - background: repeating-conic-gradient( - from 3deg at 25% 25%, - green, blue 2deg 5deg, green, yellow 15deg 18deg, green 20deg); -} -``` - -{{EmbedLiveSample("Off-centered_gradient", 220, 220)}} - -### その他の repeating-conic-gradient の例 - -それ以外の例は [CSS グラデーション](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。 - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) -- その他のグラデーション関数: {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}} -- {{cssxref("<image>")}} -- {{cssxref("image/image()","image()")}} -- {{cssxref("element()")}} -- {{cssxref("image/image-set()","image-set()")}} -- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/gradient/repeating-conic-gradient/index.md b/files/ja/web/css/gradient/repeating-conic-gradient/index.md new file mode 100644 index 0000000000..623549739e --- /dev/null +++ b/files/ja/web/css/gradient/repeating-conic-gradient/index.md @@ -0,0 +1,178 @@ +--- +title: repeating-conic-gradient() +slug: Web/CSS/gradient/repeating-conic-gradient +tags: + - CSS + - CSS Function + - CSS Images + - Function + - Graphics + - Layout + - Reference + - Web + - gradient +translation_of: Web/CSS/gradient/repeating-conic-gradient() +original_slug: Web/CSS/gradient/repeating-conic-gradient() +browser-compat: css.types.image.gradient.repeating-conic-gradient +--- +{{CSSRef}} + +**`repeating-conic-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 ([単一のグラデーション](conic-gradient())ではなく) 繰り返しのグラデーションからなる、色の遷移が (中心から[放射状に広がるのではなく](repeating-radial-gradient\(\))) 中心点の周りを回転する画像を生成します。 + +## 構文 + +```css +/* スターバースト: 青の上に青のスターブラスト: + このグラデーションは左上 4 分の 1 の位置を中心とした + 明るい青と暗い青のスターブラストで、 3 度傾いている + ため垂直線がありません。 */ +background: repeating-conic-gradient( + from 3deg at 25% 25%, + hsl(200, 100%, 50%) 0deg 15deg, + hsl(200, 100%, 60%) 10deg 30deg); +); +``` + +### 値 + +- {{CSSxRef("<angle>")}} + - : `from` キーワードに続いて角度を指定することで、時計回りのグラデーションの位置を定義します。 +- `` + - : {{cssxref("background-position")}} プロパティと同じ長さ、順番、キーワード値を使用して、グラデーションの中心の位置を定義します。省略すると、既定値は`center`、すなわちグラデーションに配置されます。 +- `` + - : 色経由点の {{CSSxRef("<color>")}} 値で、その後にオプションで 1 ～ 2 個の位置 (グラデーションの円周軸に沿った {{CSSxRef("<angle>")}}) が続きます。最後の色経由点から最初の色経由点までの角度が反復グラデーションの大きさを定義します。 +- `` + - : 隣接する色経由点の間でグラデーションがどのように進行するかを定義する補間のヒントです。長さは、 2 つの色経由点の間のどの位置でグラデーションの色が色の遷移の中間点に到達するかを定義します。省略した場合、色の遷移の中間点は 2 つの色経由点間の中間点になります。 + +> **Note:** [CSS グラデーションにおける色経由点](#gradient_with_multiple_color_stops)の描画は、 [SVG グラデーション](/ja/docs/Web/SVG/Tutorial/Gradients)と同じ規則に従います。 + +## 解説 + +反復扇形グラデーションの例にはスターバーストがあります。 `repeating-conic-gradient()` 関数の返値は {{CSSxRef("<gradient>")}} データ型のオブジェクトで、これは {{CSSxRef("<image>")}} の特殊形です。 + +最初と最後の色経由点がどちらも 0 度以上か 360 度未満になっていない場合、 conic-gradient は繰り返されません。 + +他のグラデーションと同様、扇形グラデーションは[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、自然の寸法や推奨される寸法、推奨される縦横比もありません。自身の寸法は適用先の要素の寸法、または要素の寸法以外で設定された `` の寸法に一致します。 + +`` は `` データ型に属するため、 `` が使用できるところでしか使用できません。このため、 `conic-gradient()` は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("<color>")}} データ型を使用するプロパティでは動作しません。

+ +> **Note:** 反復しない扇形グラデーションを作成するには、グラデーションを 360 度の回転にするか、 {{cssxref("gradient/conic-gradient()", "conic-gradient()")}} 関数を使用するかしてください。 + +### 反復扇形グラデーションの理解 + +repeating-conic-gradient の構文は、 {{cssxref("gradient/conic-gradient()", "conic-gradient()")}} や {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}} の構文に似ています。反復しない扇形グラデーションのように、色経由点はグラデーションの円弧の周りに配置されます。反復放射グラデーションのように、反復部分の大きさは、最後の色経由点の角度から最初の色経由点を引いたものになります。 + +![反復／反復なしの扇形／放射グラデーションの色経由点の比較](repeatingconicgradient.png) + +上記のグラデーションは 3 分の 1 が青、 3 分の 1 が赤、 3 分の 1 が黄色として定義されています。 + + repeating-conic-gradient(from 0deg, red 0deg 30deg, yellow 30deg 60deg, blue 60deg 90deg); + + repeating-radial-gradient(red 0 8%, yellow 8% 16%, blue 16% 24%); + + conic-gradient(red 120deg, yellow 120deg 240deg, blue 240deg); + + radial-gradient(red 33%, yellow 33% 66%, blue 66%); + +反復グラデーションを繰り返すためには、最初と最後の色経由点を定義します。繰り返さないグラデーションと同様に、最初と最後の色経由点は、明示的に宣言されていない場合、 0 と 100% または 360deg のいずれかであると仮定されます。これらの値を既定値とした場合、反復アークは360度となるため、繰り返されません。 + +繰り返しのない扇形グラデーションと同様に、色経由点はグラデーションの中心から出ているグラデーション軸上ではなく、グラデーション円弧 (円の円周) の周りに配置されます。 `from ` が宣言されていない場合は一番上から始まり、最大と最小の色の角度の違いである角度の大きさ分だけ時計回りに進み、それを繰り返すことで、円の中心を回るように色が推移します。 + +繰り返しの扇形グラデーションは、回転角度とグラデーションの中心を指定し、さらに色経由点のリストを指定します。反復のない扇形グラデーションと同様に、反復扇形グラデーションの色経由点は {{cssxref('angle')}} で指定します。単位は、度は `deg`、グラデーションは `grad`、ラジアンは `rad`、ターンは `turn` です。円は、360 度、400 グラード、2πラジアン、1 ターンです。反復扇形グラデーションに対応しているブラウザーでは、360 度を 100% とするパーセント値も受け付けますが、これは仕様にはありません。 + +放射グラデーションと扇形グラデーションの構文は、グラデーションの中心を画像内または画像外の任意の場所に配置することができます。位置を指定する値は、 2 値の {{cssxref('background-position')}} の構文と同様です。 + +グラデーション円弧はグラデーションの円周の一部です。 0 度は北、つまり 12 時の方向です。グラデーションの色は、角度のついた色経由点、その開始点、終了点、そしてその間にある、任意の角度の色経由点ポイントによって決定されます。色の遷移は、隣接する色の色経由点の間にあるカラーヒントで変更することができます。 + +#### グラデーションのカスタマイズ + +グラデーションの円弧上に角度のついた色経由点ポイントをさらに追加することで、複数の色の間の高度なカスタマイズされた移行を行うことができます。色経由点の位置は、{{CSSxRef("<angle>")}} を使って明示的に定義することができます。色経由点の位置を指定しない場合は、その前の色経由点と後の色経由点の中間に配置されます。反復しないグラデーションと同様に、最初と最後の色経由点の角度を指定しない場合、その値は 0 度と 360 度になります。いずれの角度も指定しない場合は、非反復の円錐形グラデーションになります。最初と最後の色経由点にそれぞれ 0 度と 360 度以外の値を宣言すると、グラデーションはその値に基づいて繰り返されます。例えば、最初の色に角度を宣言せず、最後の色止めに 10% と宣言した場合、円弧は 10 回繰り返されます。むしろ、最初に宣言した色経由点が起点となり、最後の色経由点は最後に宣言した色経由点の角度となります。次の 2 つのグラデーションは等価です。 + +```css +repeating-conic-gradient(red, orange, yellow, green, blue 50%); +repeating-conic-gradient(from -45deg, red 45deg, orange, yellow, green, blue 225deg) +``` + +既定では、色はある色経由点の色から次の色経由点の色へとスムーズに移行し、色と色の中間点が色移行の中間点となります。この色遷移の中間点は、色遷移の中間点の位置を示すカラーヒントを追加することで、 2 つの色経由点間の任意の位置に移動させることができます。 + +2 つ以上の色経由点が同じ場所にある場合、その場所で宣言された最初の色と最後の色の間で硬い線になります。 + +異なる角度の単位を混在させることは可能ですが、やめておきましょう。 CSS が読みづらくなります。 + +## アクセシビリティの考慮 + +ブラウザは、背景画像に関する特別な情報を支援技術に提供しません。これは主に画面リーダーにとって重要なことで、画面リーダーはその存在を告知しないため、ユーザーに何も伝えられません。扇形グラデーションを使って円グラフや市松模様などの効果を出すことは可能ですが、 CSS 画像は代替テキストを割り当てるネイティブな方法を提供していないため、扇形グラデーションで表現された画像は画面リーダーのユーザーが認知することはできません。ページの全体的な目的を理解するために重要な情報が画像に含まれている場合は、文書内で意味的に記述する方が良いでしょう。 + +- [MDN WCAG を理解する, ガイドライン 1.1 の説明](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content) +- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) + +## 例 + +

白黒のスターブラスト

+ +```css hidden +div { + width: 200px; + height: 200px; +} +``` + +```html hidden +
+``` + +```css +div { + background-image: + repeating-conic-gradient(#fff 0 9deg, #000 9deg 18deg); +} +``` + +{{EmbedLiveSample("Black_and_white_starburst", 220, 220)}} + +

中心をずらしたグラデーション

+ +このグラデーションは 18 回繰り返されますが、右半分しか見えないので、 9 回の繰り返しにしか見えません。 + +```css hidden +div { + width: 200px; + height: 200px; +} +``` + +```html hidden +
+``` + +```css +div { + background: repeating-conic-gradient( + from 3deg at 25% 25%, + green, blue 2deg 5deg, green, yellow 15deg 18deg, green 20deg); +} +``` + +{{EmbedLiveSample("Off-centered_gradient", 220, 220)}} + +### その他の repeating-conic-gradient の例 + +それ以外の例は [CSS グラデーション](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- その他のグラデーション関数: {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}} +- {{cssxref("<image>")}} +- {{cssxref("image/image()","image()")}} +- {{cssxref("element()")}} +- {{cssxref("image/image-set()","image-set()")}} +- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/gradient/repeating-linear-gradient()/index.md b/files/ja/web/css/gradient/repeating-linear-gradient()/index.md deleted file mode 100644 index de9a11c8ab..0000000000 --- a/files/ja/web/css/gradient/repeating-linear-gradient()/index.md +++ /dev/null @@ -1,149 +0,0 @@ ---- -title: repeating-linear-gradient() -slug: Web/CSS/gradient/repeating-linear-gradient() -tags: - - CSS - - CSS Function - - CSS Images - - Function - - Gradients - - Graphics - - Layout - - Reference - - Web -browser-compat: css.types.image.gradient.repeating-linear-gradient -translation_of: Web/CSS/gradient/repeating-linear-gradient() -original_slug: Web/CSS/repeating-linear-gradient() ---- -{{CSSRef}} - -**`repeating-linear-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、反復線形グラデーションによる画像を生成します。 {{cssxref("gradient/linear-gradient()", "linear-gradient()")}} と似ており、同じ引数を取りますが、両方向に無限に色経由点を繰り返してコンテナー全体を埋めます。関数の返値は {{cssxref("<gradient>")}} データ型のオブジェクトであり、これは {{cssxref("<image>")}} の特殊型です。 - -{{EmbedInteractiveExample("pages/css/function-repeating-linear-gradient.html")}} - -繰り返すグラデーションの長さは、最初の色経由点と最後の色経由点の間の距離です。最初の色に color-stop-length がない場合、 color-stop-length の既定値は 0 になります。それぞれの繰り返しにおいて、色経由点の位置は基本的な線形グラデーションの長さの倍数だけずらしたものになります。この結果、グラデーションの最初と最後の色は常に隣り合わせになります。二つが異なる色であれば、視覚的に明確な変わり目ができるでしょう。これは最初の色を最後の色として再び使用することで修正することができます。 - -他のグラデーションと同じく、線形反復グラデーションも[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、本来の寸法も優先される寸法も、優先されるアスペクト比も持たないということです。実際の寸法は、適用先の要素の寸法と一致します。 - -`` は CSS の `` データ型に所属しますので、 `` が使用できるところでのみ使用できます。このため、 `repeating-linear-gradient()` は {{Cssxref("background-color")}} や、その他の {{cssxref("<color>")}} を要求するプロパティでは動作しません。 - -## 構文 - -```css -/* 45 度方向に軸を延ばし、青で始め赤で終わり、 - 3 回繰り返す反復グラデーション */ -repeating-linear-gradient(45deg, blue, red 33.3%); - -/* 右下から左上に延び、青で始め赤で終わり、 - 20px ごとに繰り返す反復グラデーション */ -repeating-linear-gradient(to left top, blue, red 20px); - -/* 下から上に延び、青で始め、 40% から緑になり、 - 赤で終わるグラデーション。最後の色経由点が既定で - 100% なので、グラデーションは繰り返されない */ -repeating-linear-gradient(0deg, blue, green 40%, red); - -/* 5 回繰り返し、左から右に、赤で始まり、緑に変わり、 - 赤に戻るグラデーション */ -repeating-linear-gradient(to right, red 0%, green 10%, red 20%); -``` - -### 値 - -- `` - - - : グラデーション線の開始点の位置。指定する場合は、 `to` に続けて 2 つ以下のキーワードを指定します。一つは水平方向の辺 (`left` または `right`)、もう一方は垂直方向の辺 (`top` または `bottom`) です。辺を表すキーワードは順不同です。指定しない場合は、 `to bottom` が既定になります。 - - `to top`, `to bottom`, `to left`, `to right` の値は、 `0deg`, `180deg`, `270deg`, `90deg` の角度にそれぞれ対応します。他の値は角度に変換されます。 - -- {{cssxref("<angle>")}} - - : グラデーション線の方向を角度で示します。 `0deg` の値は `to top` と等価で、値が増加するとそこから時計回りに回ります。 -- `` - - : 色経由点の {{CSSxRef("<color>")}} の値であり、任意でその後に停止位置を指定します(グラデーションの軸に沿った {{CSSxRef("<percentage>")}} または {{CSSxRef("<length>")}} の位置)。 `0%` のパーセント値または `0` の長さは、グラデーションの先頭を表します。 `100%` の値は画像の寸法の 100% であり、つまりグラデーションは反復されません。 -- `` - - : color-hint は、隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。 - -> **Note:** [CSS グラデーションにおける色経由点](#gradient_with_multiple_color_stops)の描画は、 [SVG グラデーション](/ja/docs/Web/SVG/Tutorial/Gradients)と同じ規則に従います。 - -### 形式文法 - -```css -repeating-linear-gradient( [ | to ,]? ) - \---------------------------------/ \---------------/ - グラデーション線の定義 色経由点のリスト - -where = [left | right] || [top | bottom] - and = [ [, ? ]? ]#, - and = [ ]? - and = [ | ]{1,2} - and = [ | ] -``` - -## 例 - -

縞模様

- -```css hidden -body { - width: 100vw; - height: 100vh; -} -``` - -```css -body { - background-image: repeating-linear-gradient(-45deg, - transparent, - transparent 20px, - black 20px, - black 40px); - /* 複数の色経由点の位置 */ - background-image: repeating-linear-gradient(-45deg, - transparent 0 20px, - black 20px 40px); -} -``` - -{{EmbedLiveSample('Zebra_stripes', 120, 120)}} - -

10 回繰り返す水平線

- -```css hidden -body { - width: 100vw; - height: 100vh; -} -``` - -```css -body { - background-image: repeating-linear-gradient(to bottom, - rgb(26,198,204), - rgb(26,198,204) 7%, - rgb(100,100,100) 10%); -} -``` - -{{EmbedLiveSample('Ten_repeating_horizontal_bars', 120, 120)}} - -最後の色経由点が 10% であり、グラデーションが垂直なので、反復グラデーション内の各グラデーションは 10% の高さになり、 10 本の水平線に相当します。 - -> **Note:** 他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。 - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) -- 他のグラデーション関数: {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} -- {{cssxref("<image>")}} -- {{cssxref("image/image()","image()")}} -- {{cssxref("element()")}} -- {{cssxref("image/image-set()","image-set()")}} -- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/gradient/repeating-linear-gradient/index.md b/files/ja/web/css/gradient/repeating-linear-gradient/index.md new file mode 100644 index 0000000000..9ba6a864b9 --- /dev/null +++ b/files/ja/web/css/gradient/repeating-linear-gradient/index.md @@ -0,0 +1,149 @@ +--- +title: repeating-linear-gradient() +slug: Web/CSS/gradient/repeating-linear-gradient +tags: + - CSS + - CSS Function + - CSS Images + - Function + - Gradients + - Graphics + - Layout + - Reference + - Web +translation_of: Web/CSS/gradient/repeating-linear-gradient() +original_slug: Web/CSS/gradient/repeating-linear-gradient() +browser-compat: css.types.image.gradient.repeating-linear-gradient +--- +{{CSSRef}} + +**`repeating-linear-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、反復線形グラデーションによる画像を生成します。 {{cssxref("gradient/linear-gradient()", "linear-gradient()")}} と似ており、同じ引数を取りますが、両方向に無限に色経由点を繰り返してコンテナー全体を埋めます。関数の返値は {{cssxref("<gradient>")}} データ型のオブジェクトであり、これは {{cssxref("<image>")}} の特殊型です。 + +{{EmbedInteractiveExample("pages/css/function-repeating-linear-gradient.html")}} + +繰り返すグラデーションの長さは、最初の色経由点と最後の色経由点の間の距離です。最初の色に color-stop-length がない場合、 color-stop-length の既定値は 0 になります。それぞれの繰り返しにおいて、色経由点の位置は基本的な線形グラデーションの長さの倍数だけずらしたものになります。この結果、グラデーションの最初と最後の色は常に隣り合わせになります。二つが異なる色であれば、視覚的に明確な変わり目ができるでしょう。これは最初の色を最後の色として再び使用することで修正することができます。 + +他のグラデーションと同じく、線形反復グラデーションも[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、本来の寸法も優先される寸法も、優先されるアスペクト比も持たないということです。実際の寸法は、適用先の要素の寸法と一致します。 + +`` は CSS の `` データ型に所属しますので、 `` が使用できるところでのみ使用できます。このため、 `repeating-linear-gradient()` は {{Cssxref("background-color")}} や、その他の {{cssxref("<color>")}} を要求するプロパティでは動作しません。 + +## 構文 + +```css +/* 45 度方向に軸を延ばし、青で始め赤で終わり、 + 3 回繰り返す反復グラデーション */ +repeating-linear-gradient(45deg, blue, red 33.3%); + +/* 右下から左上に延び、青で始め赤で終わり、 + 20px ごとに繰り返す反復グラデーション */ +repeating-linear-gradient(to left top, blue, red 20px); + +/* 下から上に延び、青で始め、 40% から緑になり、 + 赤で終わるグラデーション。最後の色経由点が既定で + 100% なので、グラデーションは繰り返されない */ +repeating-linear-gradient(0deg, blue, green 40%, red); + +/* 5 回繰り返し、左から右に、赤で始まり、緑に変わり、 + 赤に戻るグラデーション */ +repeating-linear-gradient(to right, red 0%, green 10%, red 20%); +``` + +### 値 + +- `` + + - : グラデーション線の開始点の位置。指定する場合は、 `to` に続けて 2 つ以下のキーワードを指定します。一つは水平方向の辺 (`left` または `right`)、もう一方は垂直方向の辺 (`top` または `bottom`) です。辺を表すキーワードは順不同です。指定しない場合は、 `to bottom` が既定になります。 + + `to top`, `to bottom`, `to left`, `to right` の値は、 `0deg`, `180deg`, `270deg`, `90deg` の角度にそれぞれ対応します。他の値は角度に変換されます。 + +- {{cssxref("<angle>")}} + - : グラデーション線の方向を角度で示します。 `0deg` の値は `to top` と等価で、値が増加するとそこから時計回りに回ります。 +- `` + - : 色経由点の {{CSSxRef("<color>")}} の値であり、任意でその後に停止位置を指定します(グラデーションの軸に沿った {{CSSxRef("<percentage>")}} または {{CSSxRef("<length>")}} の位置)。 `0%` のパーセント値または `0` の長さは、グラデーションの先頭を表します。 `100%` の値は画像の寸法の 100% であり、つまりグラデーションは反復されません。 +- `` + - : color-hint は、隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。 + +> **Note:** [CSS グラデーションにおける色経由点](#gradient_with_multiple_color_stops)の描画は、 [SVG グラデーション](/ja/docs/Web/SVG/Tutorial/Gradients)と同じ規則に従います。 + +### 形式文法 + +```css +repeating-linear-gradient( [ | to ,]? ) + \---------------------------------/ \---------------/ + グラデーション線の定義 色経由点のリスト + +where = [left | right] || [top | bottom] + and = [ [, ? ]? ]#, + and = [ ]? + and = [ | ]{1,2} + and = [ | ] +``` + +## 例 + +

縞模様

+ +```css hidden +body { + width: 100vw; + height: 100vh; +} +``` + +```css +body { + background-image: repeating-linear-gradient(-45deg, + transparent, + transparent 20px, + black 20px, + black 40px); + /* 複数の色経由点の位置 */ + background-image: repeating-linear-gradient(-45deg, + transparent 0 20px, + black 20px 40px); +} +``` + +{{EmbedLiveSample('Zebra_stripes', 120, 120)}} + +

10 回繰り返す水平線

+ +```css hidden +body { + width: 100vw; + height: 100vh; +} +``` + +```css +body { + background-image: repeating-linear-gradient(to bottom, + rgb(26,198,204), + rgb(26,198,204) 7%, + rgb(100,100,100) 10%); +} +``` + +{{EmbedLiveSample('Ten_repeating_horizontal_bars', 120, 120)}} + +最後の色経由点が 10% であり、グラデーションが垂直なので、反復グラデーション内の各グラデーションは 10% の高さになり、 10 本の水平線に相当します。 + +> **Note:** 他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)を参照してください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- 他のグラデーション関数: {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} +- {{cssxref("<image>")}} +- {{cssxref("image/image()","image()")}} +- {{cssxref("element()")}} +- {{cssxref("image/image-set()","image-set()")}} +- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/gradient/repeating-radial-gradient()/index.md b/files/ja/web/css/gradient/repeating-radial-gradient()/index.md deleted file mode 100644 index 8142f54a54..0000000000 --- a/files/ja/web/css/gradient/repeating-radial-gradient()/index.md +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: repeating-radial-gradient() -slug: Web/CSS/gradient/repeating-radial-gradient() -tags: - - CSS - - CSS Function - - CSS Images - - Function - - Gradients - - Graphics - - Layout - - Reference - - Web -browser-compat: css.types.image.gradient.repeating-radial-gradient -translation_of: Web/CSS/gradient/repeating-radial-gradient() -original_slug: Web/CSS/repeating-radial-gradient() ---- -{{CSSRef}} - -**`repeating-radial-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、原点から広がり反復するグラデーションから成る画像を生成します。 {{cssxref("gradient/radial-gradient()", "radial-gradient()")}} と似ており、同じ引数を取りますが、 {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}} と同様にすべての方向に色経由点を無限に繰り返してコンテナー全体を埋めます。関数の返値は {{cssxref("<gradient>")}} データ型のオブジェクトであり、これは {{cssxref("<image>")}} の特殊型です。 - -{{EmbedInteractiveExample("pages/css/function-repeating-radial-gradient.html")}} - -それぞれの繰り返しにおいて、色経由点の位置は基本的な放射グラデーションの寸法 (最初と最後の色経由点の間の距離) の倍数だけずらしたものになります。この結果、グラデーションの最初と最後の色は常に隣り合わせになります。二つが異なる色であれば、視覚的に明確な変わり目ができるので、最初の色を最後の色として繰り返すことで緩和できます。 - -他のグラデーションと同じく、放射反復グラデーションも[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、本来の寸法も優先される寸法も、優先されるアスペクト比も持たないということです。実際の寸法は、適用先の要素の寸法と一致します。 - -`` は `` データ型に属するため、 `` が使用できるところでしか使用できません。このため、 `repeating-radial-gradient()` は {{cssxref("background-color")}} や、その他の {{cssxref("<color>")}} データ型を使用するプロパティでは動作しません。 - -## 構文 - -```css -/* コンテナーの中央からのグラデーションで、 - 赤で始まり、青に変化し、緑で終わり、 - それぞれ 30px ごとに色が繰り返される */ -repeating-radial-gradient(circle at center, red 0, blue, green 30px); - -/* 左上の角付近の楕円形のグラデーションで、 - 赤で始まり、緑に変化し、また戻り、 - 中央と右下の角の間で5回繰り返され、 - 中央と左上の角の間は1回だけ */ -repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%); -``` - -### 値 - -- {{cssxref("<position>")}} - - : グラデーションの位置で、 {{cssxref("background-position")}} や {{cssxref("transform-origin")}} と同じ方法で解釈されます。指定されなかった場合、既定値は `center` です。 -- `` - - : グラデーションの形状です。 `circle` (グラデーションの形状が一定の半径の円の意味) か `ellipse` (軸に沿った楕円の意味) のいずれかです。指定されなかった場合、既定値は `ellipse` です。 -- `` - - - : 終端の形状の大きさを指定するキーワードです。利用可能な値は次の通りです。 - - | キーワード | 説明 | - | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | - | `closest-side` | グラデーションの終端の形状は、中心から最も近いボックスの辺に (circle の場合) または中心から最も近い縦の辺と横の辺に (ellipse の場合) 内接します。 | - | `closest-corner` | グラデーションの終端の形状は、ボックスの中心から最も近い頂点に接するように大きさが調整されます。 | - | `farthest-side` | `closest-side` と同様ですが、終端の形状がその中心から最も遠い辺 (または縦と横の辺) に接するように大きさが調整される点が異なります。 | - | `farthest-corner` | グラデーションの終端の形状は、ボックスの中心から最も遠い頂点に接するように大きさが調整されます。 | - - > **Note:** この関数の初期の実装では、他のキーワード (`cover` および `contain`) をそれぞれ標準の `farthest-corner` および `closest-side` の別名として含めていました。実装によってはすでに古い形を外しているので、標準的なキーワードのみを使用してください。 - -- `` - - : 色経由点の {{cssxref("<color>")}} 値と、それに続く省略可能な経由位置 (グラデーション軸沿いの {{cssxref("<percentage>")}} または {{cssxref("<length>")}}) です。 percentage が `0%`、または length が `0` の場合は、グラデーションの中心を表します。 `100%` は終端の形状と仮想グラデーション光の交点を表します。その間のパーセント値は仮想グラデーション光における直線的な位置です。 - -### 形式文法 - -```css -repeating-radial-gradient( - [[ circle || ] [at ]? , | - [ ellipse || [ | ]{2}] [at ]? , | - [[ circle | ellipse ] || ] [at ]? , | - at , ) - \---------------------------------------------------------------/\-----------------/ - Contour, size and position of the ending shape List of color stops - -where = closest-corner | closest-side | farthest-corner | farthest-side - and = [ [, ? ]? ]#, - and = [ ]? - and = [ | ]{1,2} - and = [ | ] -``` - -## 例 - -

白と黒のグラデーション

- -```html hidden -
-``` - -```css hidden -.radial-gradient { - width: 120px; - height: 120px; -} -``` - -```css -.radial-gradient { - background: repeating-radial-gradient(black, black 5px, white 5px, white 10px); -} -``` - -{{EmbedLiveSample('Black_and_white_gradient', 120, 120)}} - -

最も遠い角

- -```html hidden -
-``` - -```css hidden -.radial-gradient { - width: 240px; - height: 120px; -} -``` - -```css -.radial-gradient { - background: repeating-radial-gradient(ellipse farthest-corner at 20% 20%, - red, black 5%, blue 5%, green 10%); - background: repeating-radial-gradient(ellipse farthest-corner at 20% 20%, - red 0 5%, green 5% 10%); -} -``` - -{{EmbedLiveSample('Farthest-corner', 120, 120)}} - -楕円のグラデーションは左上から 20% の位置が中心となり、中心と最も遠い角 (右下の角) の間で 10 回繰り返します。色経由点で複数の位置に対応しているブラウザーでは、赤と緑の縞模様の楕円が表示されます。この構文にまだ対応していないブラウザーでは、赤から黒、それから青から緑へと変化するグラデーションが表示されます。 - -> **Note:** 他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)をご覧ください。 - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) -- 他のグラデーション関数: {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} -- {{cssxref("<image>")}} -- {{cssxref("image/image()","image()")}} -- {{cssxref("element()")}} -- {{cssxref("image/image-set()","image-set()")}} -- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/gradient/repeating-radial-gradient/index.md b/files/ja/web/css/gradient/repeating-radial-gradient/index.md new file mode 100644 index 0000000000..25e24893b5 --- /dev/null +++ b/files/ja/web/css/gradient/repeating-radial-gradient/index.md @@ -0,0 +1,152 @@ +--- +title: repeating-radial-gradient() +slug: Web/CSS/gradient/repeating-radial-gradient +tags: + - CSS + - CSS Function + - CSS Images + - Function + - Gradients + - Graphics + - Layout + - Reference + - Web +translation_of: Web/CSS/gradient/repeating-radial-gradient() +original_slug: Web/CSS/gradient/repeating-radial-gradient() +browser-compat: css.types.image.gradient.repeating-radial-gradient +--- +{{CSSRef}} + +**`repeating-radial-gradient()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、原点から広がり反復するグラデーションから成る画像を生成します。 {{cssxref("gradient/radial-gradient()", "radial-gradient()")}} と似ており、同じ引数を取りますが、 {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}} と同様にすべての方向に色経由点を無限に繰り返してコンテナー全体を埋めます。関数の返値は {{cssxref("<gradient>")}} データ型のオブジェクトであり、これは {{cssxref("<image>")}} の特殊型です。 + +{{EmbedInteractiveExample("pages/css/function-repeating-radial-gradient.html")}} + +それぞれの繰り返しにおいて、色経由点の位置は基本的な放射グラデーションの寸法 (最初と最後の色経由点の間の距離) の倍数だけずらしたものになります。この結果、グラデーションの最初と最後の色は常に隣り合わせになります。二つが異なる色であれば、視覚的に明確な変わり目ができるので、最初の色を最後の色として繰り返すことで緩和できます。 + +他のグラデーションと同じく、放射反復グラデーションも[自身の寸法を持ちません](/ja/docs/Web/CSS/image#description)。つまり、本来の寸法も優先される寸法も、優先されるアスペクト比も持たないということです。実際の寸法は、適用先の要素の寸法と一致します。 + +`` は `` データ型に属するため、 `` が使用できるところでしか使用できません。このため、 `repeating-radial-gradient()` は {{cssxref("background-color")}} や、その他の {{cssxref("<color>")}} データ型を使用するプロパティでは動作しません。 + +## 構文 + +```css +/* コンテナーの中央からのグラデーションで、 + 赤で始まり、青に変化し、緑で終わり、 + それぞれ 30px ごとに色が繰り返される */ +repeating-radial-gradient(circle at center, red 0, blue, green 30px); + +/* 左上の角付近の楕円形のグラデーションで、 + 赤で始まり、緑に変化し、また戻り、 + 中央と右下の角の間で5回繰り返され、 + 中央と左上の角の間は1回だけ */ +repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%); +``` + +### 値 + +- {{cssxref("<position>")}} + - : グラデーションの位置で、 {{cssxref("background-position")}} や {{cssxref("transform-origin")}} と同じ方法で解釈されます。指定されなかった場合、既定値は `center` です。 +- `` + - : グラデーションの形状です。 `circle` (グラデーションの形状が一定の半径の円の意味) か `ellipse` (軸に沿った楕円の意味) のいずれかです。指定されなかった場合、既定値は `ellipse` です。 +- `` + + - : 終端の形状の大きさを指定するキーワードです。利用可能な値は次の通りです。 + + | キーワード | 説明 | + | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | + | `closest-side` | グラデーションの終端の形状は、中心から最も近いボックスの辺に (circle の場合) または中心から最も近い縦の辺と横の辺に (ellipse の場合) 内接します。 | + | `closest-corner` | グラデーションの終端の形状は、ボックスの中心から最も近い頂点に接するように大きさが調整されます。 | + | `farthest-side` | `closest-side` と同様ですが、終端の形状がその中心から最も遠い辺 (または縦と横の辺) に接するように大きさが調整される点が異なります。 | + | `farthest-corner` | グラデーションの終端の形状は、ボックスの中心から最も遠い頂点に接するように大きさが調整されます。 | + + > **Note:** この関数の初期の実装では、他のキーワード (`cover` および `contain`) をそれぞれ標準の `farthest-corner` および `closest-side` の別名として含めていました。実装によってはすでに古い形を外しているので、標準的なキーワードのみを使用してください。 + +- `` + - : 色経由点の {{cssxref("<color>")}} 値と、それに続く省略可能な経由位置 (グラデーション軸沿いの {{cssxref("<percentage>")}} または {{cssxref("<length>")}}) です。 percentage が `0%`、または length が `0` の場合は、グラデーションの中心を表します。 `100%` は終端の形状と仮想グラデーション光の交点を表します。その間のパーセント値は仮想グラデーション光における直線的な位置です。 + +### 形式文法 + +```css +repeating-radial-gradient( + [[ circle || ] [at ]? , | + [ ellipse || [ | ]{2}] [at ]? , | + [[ circle | ellipse ] || ] [at ]? , | + at , ) + \---------------------------------------------------------------/\-----------------/ + Contour, size and position of the ending shape List of color stops + +where = closest-corner | closest-side | farthest-corner | farthest-side + and = [ [, ? ]? ]#, + and = [ ]? + and = [ | ]{1,2} + and = [ | ] +``` + +## 例 + +

白と黒のグラデーション

+ +```html hidden +
+``` + +```css hidden +.radial-gradient { + width: 120px; + height: 120px; +} +``` + +```css +.radial-gradient { + background: repeating-radial-gradient(black, black 5px, white 5px, white 10px); +} +``` + +{{EmbedLiveSample('Black_and_white_gradient', 120, 120)}} + +

最も遠い角

+ +```html hidden +
+``` + +```css hidden +.radial-gradient { + width: 240px; + height: 120px; +} +``` + +```css +.radial-gradient { + background: repeating-radial-gradient(ellipse farthest-corner at 20% 20%, + red, black 5%, blue 5%, green 10%); + background: repeating-radial-gradient(ellipse farthest-corner at 20% 20%, + red 0 5%, green 5% 10%); +} +``` + +{{EmbedLiveSample('Farthest-corner', 120, 120)}} + +楕円のグラデーションは左上から 20% の位置が中心となり、中心と最も遠い角 (右下の角) の間で 10 回繰り返します。色経由点で複数の位置に対応しているブラウザーでは、赤と緑の縞模様の楕円が表示されます。この構文にまだ対応していないブラウザーでは、赤から黒、それから青から緑へと変化するグラデーションが表示されます。 + +> **Note:** 他の例は [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)をご覧ください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients) +- 他のグラデーション関数: {{cssxref("gradient/radial-gradient()", "radial-gradient()")}}, {{cssxref("gradient/linear-gradient()", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{cssxref("gradient/conic-gradient()", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}} +- {{cssxref("<image>")}} +- {{cssxref("image/image()","image()")}} +- {{cssxref("element()")}} +- {{cssxref("image/image-set()","image-set()")}} +- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/image/image()/index.md b/files/ja/web/css/image/image()/index.md deleted file mode 100644 index e34c87244d..0000000000 --- a/files/ja/web/css/image/image()/index.md +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: image() -slug: Web/CSS/image/image() -tags: - - CSS - - CSS 関数 - - CSS 画像 - - 関数 - - Reference - - ウェブ -browser-compat: css.types.image.image -translation_of: Web/CSS/image/image() ---- -{{CSSRef}} - -**`image()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 {{CSSxRef("<image>")}} を {{CSSxRef("url()")}} 関数と同様の様式で定義しますが、画像の書字方向を指定したり、メディアフラグメントで定義された画像の一部だけを表示したり、指定された画像がどれも描画できなかった場合の予備として単色を指定するなどの機能が追加されています。 - -> **Note:** CSS の `image()` 関数を {{DOMxRef("HTMLImageElement/Image", '`HTMLImageElement` のコンストラクターである `Image()`', '', 1)}} と混同しないでください。 - -## 構文 - -{{CSSSyntax("image()")}} - -ここで - -- `image-tags`{{Optional_Inline}} - - : 画像の書字方向、左書きならば `ltr`、右書きならば `rtl` です。 -- `image-src` {{Optional_Inline}} - - : 0 個以上の {{CSSxRef("url()")}} または {{CSSxRef("<string>")}} で、画像のソースをオプションの画像フラグメント識別子と共に指定します。 -- `color`{{Optional_Inline}} - - : 色であり、 `image-src` が見つからなかったり、対応していなかったり、宣言されていなかったりした場合の代替として使用される単色の背景色を指定します。 - -### 書字方向の認識 - -`image()` 表記の最初のオプション引数は、画像の書字方向です。この引数が含まれている場合、画像が反対の書字方向を持つ要素で使用されると、横書きモードでは画像が水平に反転します。書字方向を省略した場合は、言語の方向が変わっても画像は反転しません。 - -### 画像フラグメント - -`url()` と `image()` の大きな違いは、メディアフラグメント識別子 (開始点の x 軸と y 軸、幅と高さ) を画像ソースに追加することで、ソース画像の一部分のみを表示することができることです。引数で定義された画像の範囲は、独立した画像になります。構文は次のようになります。 - -```css -background-image: image('myimage.webp#xywh=0,20,40,60'); -``` - -要素の背景画像は、画像 _myImage.webp_ のうち、 0px, 20px の座標 (左上隅) から始まり、幅 40px、高さ 60px の部分になります。 - - -`#xywh=#,#,#,#` というメディアフラグメントの構文は、カンマで区切られた 4 つの数値を取ります。最初の 2 つの値は、作成されるボックスの始点の X および Y 座標を表します。 3 つ目の値はボックスの幅、最後の値は高さです。既定では、これらはピクセル値です。[メディア仕様書の spacial dimension definition](https://www.w3.org/TR/media-frags/#naming-space) によると、パーセント値にも対応しています。 - -```css -xywh=160,120,320,240 /* results in a 320x240 image at x=160 and y=120 */ -xywh=pixel:160,120,320,240 /* results in a 320x240 image at x=160 and y=120 */ -xywh=percent:25,25,50,50 /* results in a 50%x50% image at x=25% and y=25% */ -``` - -イメージフラグメントは、 `url()` 記法でも使用できます。 `#xywh=#,#,#,#` というメディアフラグメントの構文は「後方互換」であり、メディアフラグメントが理解できない場合は無視され、 `url()` で使用してもソースの呼び出しが壊れることはありません。ブラウザーがメディアフラグメントの表記を理解していない場合、フラグメントを無視して画像全体を表示します。 - -`image()` を理解できるブラウザーはフラグメント表記も理解できます。したがって、フラグメントが `image()` の中で理解できない場合は、その画像は無効とみなされます。 - -### 色による代替 - -`image()` で画像ソースと一緒に色が指定されていると、画像が無効で表示されない場合の代替として機能します。このような場合、`image()` 関数は、画像が含まれていないかのように描画を行い、単一色の画像を生成します。例として、白いテキストの背景に暗い色の画像を使用する場合を考えてみましょう。画像が描画されない場合、前景のテキストを読みやすくするために暗い背景色が必要になることがあります。 - -画像ソースを省略して色を含めることは有効で、色見本を作成します。背景色を宣言すると、すべての背景画像の下や後ろに配置されるのとは異なり、これは他の画像の上に (通常は半透明の) 色を配置するために使用できます。 - -色見本の寸法は、 {{CSSxRef("background-size")}} プロパティで設定できます。これは、要素全体を覆うように色を設定する `background-color` とは異なります。 `image(color)` と `background-color` の両方を配置すると、 {{CSSxRef("background-clip")}} と {{CSSxRef("background-origin")}} プロパティの影響を受けます。 - -## アクセシビリティの考慮 - -ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に画面リーダーにとって重要なことで、画面リーダーはその存在を告知しないため、ユーザーに何も伝えません。画像に、ページ全体の目的を理解するために重要な情報が含まれている場合は、文書内で意味的に記述したほうがよいでしょう。 - -- [MDN WCAG を理解する, ガイドライン 1.1 の説明](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content) -- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) - -この機能は、画像の読み込みに失敗したときに予備の色を提供することで、アクセシビリティの向上に役立ちます。この機能は、すべての背景画像に背景色を含めることで実現できますが、 CSS の `image()` 関数では、画像の読み込みに失敗したときに背景色のみを含めることができます。つまり、透過 PNG/GIF/WebP の読み込みに失敗したときに、予備の色を追加することができます。 - -## 例 - -

書字方向を意識した画像

- -```html -
  • 行頭記号が左側で右向きの矢印になります。
    • -
  • 行頭記号は同じ矢印で、左を指します。
    • - -``` - -```css -ul { - list-style-image: image(ltr 'rightarrow.png'); -} -``` - -左書きのリスト項目 (要素自体に `dir="ltr"` が設定されているもの、祖先から書字方向を継承しているもの、ページの既定値) では、画像がそのまま使用されます。 `
  • ` に `dir="rtl"` が設定されているリスト項目や、祖先から右から左への指向性を受け継いでいるリスト項目 (アラビア語やヘブライ語に設定されている文書など) では、 `transform: scalex(-1)` が設定されているかのように、箇条書きのテキストが水平方向に反転して右に表示されます。テキストも左書きで表示されます。 - -{{EmbedLiveSample("Directionally-sensitive_images", "100%", 200)}} - -

    背景画像のある範囲の表示

    - -```html -
    この上にカーソルを移動してください。どのように見えますか？
    -``` - -```css -.box:hover { - cursor: image("sprite.png#xywh=32,64,16,16"); -} -``` - -ユーザーがボックスの上にカーソルを移動させると、カーソルは x=32 と y=64 の位置から始まる 16x16 ピクセルの範囲のスプライト画像に変わります。 - -{{EmbedLiveSample("Displaying_a_section_of_the_background_image", "100%", 100)}} - -

    背景画像の上に色を配置

    - -```css hidden -.quarterlogo {height: 200px; width: 200px; border: 1px solid;} -``` - -```css -.quarterlogo { - background-image: - image(rgba(0, 0, 0, 0.25)), - url("firefox.png"); - background-size: 25%; - background-repeat: no-repeat; -} -``` - -```html - -``` - -上記の例は、 Firefox のロゴの背景画像に半透明の黒いマスクをかぶせています。 {{cssxref("background-color")}} プロパティを使用していた場合は、色はロゴ画像の上ではなく背後に表示されていたでしょう。また、コンテナー全体の背景色も同じになっていたでしょう。 `image()` と {{CSSxRef("background-size")}} プロパティを使用し、 {{CSSxRef("background-repeat")}} プロパティで画像が繰り返されないようにしたため、色見本はコンテナーの 4 分の 1 しか覆っていません。 - -{{EmbedLiveSample("Putting_color_on_top_of_a_background_image", "100%", 220)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{CSSxRef("<image>")}} -- {{CSSxRef("element()")}} -- {{CSSxRef("url()")}} -- {{CSSxRef("clip-path")}} -- {{CSSxRef("-moz-image-rect")}} -- {{CSSxRef("<gradient>")}} -- {{CSSxRef("image/image-set()")}} -- {{CSSxRef("cross-fade()")}} diff --git a/files/ja/web/css/image/image-set()/index.md b/files/ja/web/css/image/image-set()/index.md deleted file mode 100644 index 8fbb72453c..0000000000 --- a/files/ja/web/css/image/image-set()/index.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: image-set() -slug: Web/CSS/image/image-set() -tags: - - CSS - - CSS Function - - CSS-4 Images - - Function - - Reference - - Web -browser-compat: css.types.image.image-set -translation_of: Web/CSS/image/image-set() -original_slug: Web/CSS/image-set() ---- -{{cssref}} - -**`image-set()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)表記で、主に高解像度の画面において、指定されたセットから最も適切な CSS 画像をブラウザーに選択させる方法です。 - -解像度と帯域は端末やネットワークアクセスによって様々です。 `image-set()` 関数は、画像オプションのセットを提供して — それぞれが解像度の宣言に関連付けられ — ブラウザーが端末および設定にもっともふさわしいものを選択することで、ユーザーの端末にもっとも適切な解像度の画像を配信します。解像度はファイルサイズのプロキシーとして使用することができます。 — 高解像度の画面で遅いモバイル接続を使用しているユーザーエージェントは、高解像度の画面の読み込みを待つよりも、低解像度の画像を受信したほうが良いかもしれません。 - -`image-set()` はそれぞれのユーザーが必要なことを判断するのではなく、オプションを提供することができます。 - -## 構文 - -```css -image-set() = image-set( # ) -where = [ | ] and - is an -``` - -### 値 - -- `` - - : [``](/ja/docs/Web/CSS/image) は画像セット以外のあらゆる画像を指定できます。 `image-set()` 関数は他の `image-set()` 関数の中に入れ子にすることはできません。 -- `` - - : 画像への `url()` です。 -- ``{{optional_inline}} - - : [``](/ja/docs/Web/CSS/resolution) の単位には、 `x` や `dppx` (dots per pixel 単位)、dpi (dots per inch)、dpcm (dots per centimeter) があります。 `image-set()` 内の画像すべて、解像度が固有でなければなりません。 -- `type()`{{optional_inline}} - - : 有効な MIME タイプの文字列、例えば "image/jpeg" です。 - -## 例 - -### image-set() を使用して代替の background-image オプションの提供 - -この例は [`image-set()`](https://drafts.csswg.org/css-images-4/#funcdef-image-set) を使用して 2 つの代替 {{cssxref("background-image")}} オプションを提供する方法を示しています。解像度の必要性に応じて、通常版と高解像度版から選択します。 - -{{EmbedGHLiveSample("css-examples/images/image-set.html", '100%', 600)}} - -> **Note:** 上記の例では、 `-webkit` の接頭辞が付いた版を Chrome および Safari に対応させるために併用しています。 Firefox 90 では (標準のプロパティを追加していない開発者の互換性を確保するために) `-webkit-image-set()` を `image-set()` の別名として使用する対応が追加されました。 - -### image-set() を使用して別な画像形式を提供 - -次の例では `type()` 関数を使用して画像を AVIF および JPEG 形式で提供しています。ブラウザーが avif に対応している場合は、このバージョンが選択されます。それ以外の場合は jpeg バージョンを使用します。 - -{{EmbedGHLiveSample("css-examples/images/image-set-type.html", '100%', 600)}} - -#### 代替画像の提供 - -`image-set()` には内蔵のフォールバックはありません。したがって、この関数に対応していないブラウザーのための背景画像を設定するには、 `image-set()` を使用する行の前に別の宣言が必要です。 - -```css -.box { - background-image: url("large-balloons.jpg"); - background-image: image-set( - url("large-balloons.avif") type("image/avif"), - url("large-balloons.jpg") type("image/jpeg")); -} -``` - -## アクセシビリティの考慮 - -

    ブラウザーは支援技術に対して、背景画像についての特別な情報を何も提供しません。これは主に読み上げソフトにとって重要であり、読み上げソフトは背景画像が存在することをアナウンスせず、したがってユーザーには何も伝えられません。もし画像がページ全体の目的を理解するのに重要な情報を含んでいる場合は、文書中に意味的に記述するようにしてください。

    - -- [MDN WCAG を理解する, ガイドライン 1.1 の解説](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content) -- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("image")}} -- {{cssxref("image/image()", "image()")}} -- {{cssxref("element()")}} -- {{cssxref("url()")}} -- {{cssxref("<gradient>")}} -- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/image/image-set/index.md b/files/ja/web/css/image/image-set/index.md new file mode 100644 index 0000000000..309c6c1fdd --- /dev/null +++ b/files/ja/web/css/image/image-set/index.md @@ -0,0 +1,93 @@ +--- +title: image-set() +slug: Web/CSS/image/image-set +tags: + - CSS + - CSS Function + - CSS-4 Images + - Function + - Reference + - Web +translation_of: Web/CSS/image/image-set() +original_slug: Web/CSS/image/image-set() +browser-compat: css.types.image.image-set +--- +{{cssref}} + +**`image-set()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)表記で、主に高解像度の画面において、指定されたセットから最も適切な CSS 画像をブラウザーに選択させる方法です。 + +解像度と帯域は端末やネットワークアクセスによって様々です。 `image-set()` 関数は、画像オプションのセットを提供して — それぞれが解像度の宣言に関連付けられ — ブラウザーが端末および設定にもっともふさわしいものを選択することで、ユーザーの端末にもっとも適切な解像度の画像を配信します。解像度はファイルサイズのプロキシーとして使用することができます。 — 高解像度の画面で遅いモバイル接続を使用しているユーザーエージェントは、高解像度の画面の読み込みを待つよりも、低解像度の画像を受信したほうが良いかもしれません。 + +`image-set()` はそれぞれのユーザーが必要なことを判断するのではなく、オプションを提供することができます。 + +## 構文 + +```css +image-set() = image-set( # ) +where = [ | ] and + is an +``` + +### 値 + +- `` + - : [``](/ja/docs/Web/CSS/image) は画像セット以外のあらゆる画像を指定できます。 `image-set()` 関数は他の `image-set()` 関数の中に入れ子にすることはできません。 +- `` + - : 画像への `url()` です。 +- ``{{optional_inline}} + - : [``](/ja/docs/Web/CSS/resolution) の単位には、 `x` や `dppx` (dots per pixel 単位)、dpi (dots per inch)、dpcm (dots per centimeter) があります。 `image-set()` 内の画像すべて、解像度が固有でなければなりません。 +- `type()`{{optional_inline}} + - : 有効な MIME タイプの文字列、例えば "image/jpeg" です。 + +## 例 + +### image-set() を使用して代替の background-image オプションの提供 + +この例は [`image-set()`](https://drafts.csswg.org/css-images-4/#funcdef-image-set) を使用して 2 つの代替 {{cssxref("background-image")}} オプションを提供する方法を示しています。解像度の必要性に応じて、通常版と高解像度版から選択します。 + +{{EmbedGHLiveSample("css-examples/images/image-set.html", '100%', 600)}} + +> **Note:** 上記の例では、 `-webkit` の接頭辞が付いた版を Chrome および Safari に対応させるために併用しています。 Firefox 90 では (標準のプロパティを追加していない開発者の互換性を確保するために) `-webkit-image-set()` を `image-set()` の別名として使用する対応が追加されました。 + +### image-set() を使用して別な画像形式を提供 + +次の例では `type()` 関数を使用して画像を AVIF および JPEG 形式で提供しています。ブラウザーが avif に対応している場合は、このバージョンが選択されます。それ以外の場合は jpeg バージョンを使用します。 + +{{EmbedGHLiveSample("css-examples/images/image-set-type.html", '100%', 600)}} + +#### 代替画像の提供 + +`image-set()` には内蔵のフォールバックはありません。したがって、この関数に対応していないブラウザーのための背景画像を設定するには、 `image-set()` を使用する行の前に別の宣言が必要です。 + +```css +.box { + background-image: url("large-balloons.jpg"); + background-image: image-set( + url("large-balloons.avif") type("image/avif"), + url("large-balloons.jpg") type("image/jpeg")); +} +``` + +## アクセシビリティの考慮 + +

    ブラウザーは支援技術に対して、背景画像についての特別な情報を何も提供しません。これは主に読み上げソフトにとって重要であり、読み上げソフトは背景画像が存在することをアナウンスせず、したがってユーザーには何も伝えられません。もし画像がページ全体の目的を理解するのに重要な情報を含んでいる場合は、文書中に意味的に記述するようにしてください。

    + +- [MDN WCAG を理解する, ガイドライン 1.1 の解説](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content) +- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("image")}} +- {{cssxref("image/image()", "image()")}} +- {{cssxref("element()")}} +- {{cssxref("url()")}} +- {{cssxref("<gradient>")}} +- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/image/image/index.md b/files/ja/web/css/image/image/index.md new file mode 100644 index 0000000000..4f4482fc6e --- /dev/null +++ b/files/ja/web/css/image/image/index.md @@ -0,0 +1,155 @@ +--- +title: image() +slug: Web/CSS/image/image +tags: + - CSS + - CSS 関数 + - CSS 画像 + - 関数 + - Reference + - ウェブ +translation_of: Web/CSS/image/image() +original_slug: Web/CSS/image/image() +browser-compat: css.types.image.image +--- +{{CSSRef}} + +**`image()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 {{CSSxRef("<image>")}} を {{CSSxRef("url()")}} 関数と同様の様式で定義しますが、画像の書字方向を指定したり、メディアフラグメントで定義された画像の一部だけを表示したり、指定された画像がどれも描画できなかった場合の予備として単色を指定するなどの機能が追加されています。 + +> **Note:** CSS の `image()` 関数を {{DOMxRef("HTMLImageElement/Image", '`HTMLImageElement` のコンストラクターである `Image()`', '', 1)}} と混同しないでください。 + +## 構文 + +{{CSSSyntax("image()")}} + +ここで + +- `image-tags`{{Optional_Inline}} + - : 画像の書字方向、左書きならば `ltr`、右書きならば `rtl` です。 +- `image-src` {{Optional_Inline}} + - : 0 個以上の {{CSSxRef("url()")}} または {{CSSxRef("<string>")}} で、画像のソースをオプションの画像フラグメント識別子と共に指定します。 +- `color`{{Optional_Inline}} + - : 色であり、 `image-src` が見つからなかったり、対応していなかったり、宣言されていなかったりした場合の代替として使用される単色の背景色を指定します。 + +### 書字方向の認識 + +`image()` 表記の最初のオプション引数は、画像の書字方向です。この引数が含まれている場合、画像が反対の書字方向を持つ要素で使用されると、横書きモードでは画像が水平に反転します。書字方向を省略した場合は、言語の方向が変わっても画像は反転しません。 + +### 画像フラグメント + +`url()` と `image()` の大きな違いは、メディアフラグメント識別子 (開始点の x 軸と y 軸、幅と高さ) を画像ソースに追加することで、ソース画像の一部分のみを表示することができることです。引数で定義された画像の範囲は、独立した画像になります。構文は次のようになります。 + +```css +background-image: image('myimage.webp#xywh=0,20,40,60'); +``` + +要素の背景画像は、画像 _myImage.webp_ のうち、 0px, 20px の座標 (左上隅) から始まり、幅 40px、高さ 60px の部分になります。 + + +`#xywh=#,#,#,#` というメディアフラグメントの構文は、カンマで区切られた 4 つの数値を取ります。最初の 2 つの値は、作成されるボックスの始点の X および Y 座標を表します。 3 つ目の値はボックスの幅、最後の値は高さです。既定では、これらはピクセル値です。[メディア仕様書の spacial dimension definition](https://www.w3.org/TR/media-frags/#naming-space) によると、パーセント値にも対応しています。 + +```css +xywh=160,120,320,240 /* results in a 320x240 image at x=160 and y=120 */ +xywh=pixel:160,120,320,240 /* results in a 320x240 image at x=160 and y=120 */ +xywh=percent:25,25,50,50 /* results in a 50%x50% image at x=25% and y=25% */ +``` + +イメージフラグメントは、 `url()` 記法でも使用できます。 `#xywh=#,#,#,#` というメディアフラグメントの構文は「後方互換」であり、メディアフラグメントが理解できない場合は無視され、 `url()` で使用してもソースの呼び出しが壊れることはありません。ブラウザーがメディアフラグメントの表記を理解していない場合、フラグメントを無視して画像全体を表示します。 + +`image()` を理解できるブラウザーはフラグメント表記も理解できます。したがって、フラグメントが `image()` の中で理解できない場合は、その画像は無効とみなされます。 + +### 色による代替 + +`image()` で画像ソースと一緒に色が指定されていると、画像が無効で表示されない場合の代替として機能します。このような場合、`image()` 関数は、画像が含まれていないかのように描画を行い、単一色の画像を生成します。例として、白いテキストの背景に暗い色の画像を使用する場合を考えてみましょう。画像が描画されない場合、前景のテキストを読みやすくするために暗い背景色が必要になることがあります。 + +画像ソースを省略して色を含めることは有効で、色見本を作成します。背景色を宣言すると、すべての背景画像の下や後ろに配置されるのとは異なり、これは他の画像の上に (通常は半透明の) 色を配置するために使用できます。 + +色見本の寸法は、 {{CSSxRef("background-size")}} プロパティで設定できます。これは、要素全体を覆うように色を設定する `background-color` とは異なります。 `image(color)` と `background-color` の両方を配置すると、 {{CSSxRef("background-clip")}} と {{CSSxRef("background-origin")}} プロパティの影響を受けます。 + +## アクセシビリティの考慮 + +ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に画面リーダーにとって重要なことで、画面リーダーはその存在を告知しないため、ユーザーに何も伝えません。画像に、ページ全体の目的を理解するために重要な情報が含まれている場合は、文書内で意味的に記述したほうがよいでしょう。 + +- [MDN WCAG を理解する, ガイドライン 1.1 の説明](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content) +- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) + +この機能は、画像の読み込みに失敗したときに予備の色を提供することで、アクセシビリティの向上に役立ちます。この機能は、すべての背景画像に背景色を含めることで実現できますが、 CSS の `image()` 関数では、画像の読み込みに失敗したときに背景色のみを含めることができます。つまり、透過 PNG/GIF/WebP の読み込みに失敗したときに、予備の色を追加することができます。 + +## 例 + +

    書字方向を意識した画像

    + +```html +
  • 行頭記号が左側で右向きの矢印になります。
    • +
  • 行頭記号は同じ矢印で、左を指します。
    • + +``` + +```css +ul { + list-style-image: image(ltr 'rightarrow.png'); +} +``` + +左書きのリスト項目 (要素自体に `dir="ltr"` が設定されているもの、祖先から書字方向を継承しているもの、ページの既定値) では、画像がそのまま使用されます。 `
  • ` に `dir="rtl"` が設定されているリスト項目や、祖先から右から左への指向性を受け継いでいるリスト項目 (アラビア語やヘブライ語に設定されている文書など) では、 `transform: scalex(-1)` が設定されているかのように、箇条書きのテキストが水平方向に反転して右に表示されます。テキストも左書きで表示されます。 + +{{EmbedLiveSample("Directionally-sensitive_images", "100%", 200)}} + +

    背景画像のある範囲の表示

    + +```html +
    この上にカーソルを移動してください。どのように見えますか？
    +``` + +```css +.box:hover { + cursor: image("sprite.png#xywh=32,64,16,16"); +} +``` + +ユーザーがボックスの上にカーソルを移動させると、カーソルは x=32 と y=64 の位置から始まる 16x16 ピクセルの範囲のスプライト画像に変わります。 + +{{EmbedLiveSample("Displaying_a_section_of_the_background_image", "100%", 100)}} + +

    背景画像の上に色を配置

    + +```css hidden +.quarterlogo {height: 200px; width: 200px; border: 1px solid;} +``` + +```css +.quarterlogo { + background-image: + image(rgba(0, 0, 0, 0.25)), + url("firefox.png"); + background-size: 25%; + background-repeat: no-repeat; +} +``` + +```html + +``` + +上記の例は、 Firefox のロゴの背景画像に半透明の黒いマスクをかぶせています。 {{cssxref("background-color")}} プロパティを使用していた場合は、色はロゴ画像の上ではなく背後に表示されていたでしょう。また、コンテナー全体の背景色も同じになっていたでしょう。 `image()` と {{CSSxRef("background-size")}} プロパティを使用し、 {{CSSxRef("background-repeat")}} プロパティで画像が繰り返されないようにしたため、色見本はコンテナーの 4 分の 1 しか覆っていません。 + +{{EmbedLiveSample("Putting_color_on_top_of_a_background_image", "100%", 220)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{CSSxRef("<image>")}} +- {{CSSxRef("element()")}} +- {{CSSxRef("url()")}} +- {{CSSxRef("clip-path")}} +- {{CSSxRef("-moz-image-rect")}} +- {{CSSxRef("<gradient>")}} +- {{CSSxRef("image/image-set()")}} +- {{CSSxRef("cross-fade()")}} diff --git a/files/ja/web/css/image/paint()/index.md b/files/ja/web/css/image/paint()/index.md deleted file mode 100644 index b6b033151b..0000000000 --- a/files/ja/web/css/image/paint()/index.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: paint() -slug: Web/CSS/image/paint() -tags: - - CSS - - CSS 関数 - - CSS4-images - - 関数 - - Houdini - - リファレンス - - ウェブ -browser-compat: css.types.image.paint -translation_of: Web/CSS/image/paint() -original_slug: Web/CSS/paint() ---- -{{CSSRef}}{{SeeCompatTable}} - -**`paint()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 PaintWorklet で生成された {{cssxref("<image>")}} の値を定義します。 - -## 構文 - -```css -paint(workletName, parameters) -``` - -凡例 - -- _workletName_ - - : 登録された Worklet の名前です。 -- _parameters_ - - : PaintWorklet へ渡される省略可能な追加の引数です。 - -## 例 - -### 基本的な使用例 - -CSS の paint() 関数で追加の引数を渡すことができます。この例では、 2 つの引数を渡しています。リストアイテムのグループの背景画像が塗りつぶしか輪郭線だけかと、輪郭線の太さです。 - -```html hidden -
      -    
    • item 1
      • -    
    • item 2
      • -    
    • item 3
      • -    
    • item 4
      • -    
    • item 5
      • -    
    • item 6
      • -    
    • item 7
      • -    
    • item 8
      • -    
    • item 9
      • -    
    • item 10
      • -    
    • item 11
      • -    
    • item 12
      • -    
    • item 13
      • -    
    • item 14
      • -    
    • item 15
      • -    
    • item 16
      • -    
    • item 17
      • -    
    • item 18
      • -    
    • item 19
      • -    
    • item 20
      • -
    -``` - -```js hidden - CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hilite.js'); -``` - -```css -li { - --boxColor: hsla(55, 90%, 60%, 1.0); - background-image: paint(hollowHighlights, stroke, 2px); -} - -li:nth-of-type(3n) { - --boxColor: hsla(155, 90%, 60%, 1.0); - background-image: paint(hollowHighlights, filled, 3px); -} - -li:nth-of-type(3n+1) { - --boxColor: hsla(255, 90%, 60%, 1.0); - background-image: paint(hollowHighlights, stroke, 1px); -} -``` - -boxColor を定義しているセレクターブロックにカスタムプロパティを設定しました。カスタムプロパティは PaintWorklet にアクセスすることができます。 - -{{EmbedLiveSample("Examples", 300, 300)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{domxref('PaintWorklet')}} -- {{domxref('CSS Painting API')}} -- [CSS Painting API の使用](/ja/docs/Web/API/CSS_Painting_API/Guide) -- {{cssxref("<image>")}} -- {{domxref("canvas")}} diff --git a/files/ja/web/css/image/paint/index.md b/files/ja/web/css/image/paint/index.md new file mode 100644 index 0000000000..0f304f82bc --- /dev/null +++ b/files/ja/web/css/image/paint/index.md @@ -0,0 +1,103 @@ +--- +title: paint() +slug: Web/CSS/image/paint +tags: + - CSS + - CSS 関数 + - CSS4-images + - 関数 + - Houdini + - リファレンス + - ウェブ +translation_of: Web/CSS/image/paint() +original_slug: Web/CSS/image/paint() +browser-compat: css.types.image.paint +--- +{{CSSRef}}{{SeeCompatTable}} + +**`paint()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 PaintWorklet で生成された {{cssxref("<image>")}} の値を定義します。 + +## 構文 + +```css +paint(workletName, parameters) +``` + +凡例 + +- _workletName_ + - : 登録された Worklet の名前です。 +- _parameters_ + - : PaintWorklet へ渡される省略可能な追加の引数です。 + +## 例 + +### 基本的な使用例 + +CSS の paint() 関数で追加の引数を渡すことができます。この例では、 2 つの引数を渡しています。リストアイテムのグループの背景画像が塗りつぶしか輪郭線だけかと、輪郭線の太さです。 + +```html hidden +
      +    
    • item 1
      • +    
    • item 2
      • +    
    • item 3
      • +    
    • item 4
      • +    
    • item 5
      • +    
    • item 6
      • +    
    • item 7
      • +    
    • item 8
      • +    
    • item 9
      • +    
    • item 10
      • +    
    • item 11
      • +    
    • item 12
      • +    
    • item 13
      • +    
    • item 14
      • +    
    • item 15
      • +    
    • item 16
      • +    
    • item 17
      • +    
    • item 18
      • +    
    • item 19
      • +    
    • item 20
      • +
    +``` + +```js hidden + CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hilite.js'); +``` + +```css +li { + --boxColor: hsla(55, 90%, 60%, 1.0); + background-image: paint(hollowHighlights, stroke, 2px); +} + +li:nth-of-type(3n) { + --boxColor: hsla(155, 90%, 60%, 1.0); + background-image: paint(hollowHighlights, filled, 3px); +} + +li:nth-of-type(3n+1) { + --boxColor: hsla(255, 90%, 60%, 1.0); + background-image: paint(hollowHighlights, stroke, 1px); +} +``` + +boxColor を定義しているセレクターブロックにカスタムプロパティを設定しました。カスタムプロパティは PaintWorklet にアクセスすることができます。 + +{{EmbedLiveSample("Examples", 300, 300)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref('PaintWorklet')}} +- {{domxref('CSS Painting API')}} +- [CSS Painting API の使用](/ja/docs/Web/API/CSS_Painting_API/Guide) +- {{cssxref("<image>")}} +- {{domxref("canvas")}} diff --git a/files/ja/web/css/max()/index.md b/files/ja/web/css/max()/index.md deleted file mode 100644 index 1d5a961416..0000000000 --- a/files/ja/web/css/max()/index.md +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: max() -slug: Web/CSS/max() -tags: - - CSS - - CSS 関数 - - Calculate - - Compute - - 関数 - - レイアウト - - リファレンス - - ウェブ - - max -browser-compat: css.types.max -translation_of: Web/CSS/max() ---- -{{CSSRef}} - -**`max()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 CSS プロパティの値としてカンマで区切られた式のリストから最大の (最も正である) 値を設定できます。 `max()` 関数は {{CSSxRef("<length>")}}、{{CSSxRef("<frequency>")}}、{{CSSxRef("<angle>")}}、{{CSSxRef("<time>")}}、{{CSSxRef("<percentage>")}}、{{CSSxRef("<number>")}}、{{CSSxRef("<integer>")}} が使用できるところならばどこでも使用することができます。 - -{{EmbedInteractiveExample("pages/css/function-max.html")}} - -上の例では、幅が 400px 以上になりますが、ビューポートが 2000px よりも広い場合 (1vw が 20px になるため、 20vw が 400px になる場合) はより広くなります。 `max()` の値はプロパティが取りうる最小の値を提供するものとして考えてください。 - -## 構文 - -`max()` 関数は、引数としてカンマで区切った 1 つ以上の式を取り、もっとも大きい (最も正である) 式の値をプロパティに割り当てられた値として使用します。 - -式は、 (算術演算子を用いた) 数式、リテラル値、あるいは、有効な引数の型 ({{CSSxRef("<length>")}} など) に評価される {{CSSxRef("attr()", "attr()")}} などの式や、ネストされた {{CSSxRef("min()", "min()")}} や `max()` 関数を用いることができます。 - -式の各値に異なる単位を使用することができます。必要に応じて、計算順序を決めるために括弧を使用することもできます。 - -## メモ - -- 表の列、列グループ、行、行グループ、セルの幅と高さのパーセント値を含む数式は、自動レイアウト表と固定レイアウト表のどちらでも、あたかも `auto` が指定されていたかのように扱われる*可能性があります*。 -- `min()` や他の `max()` 関数を式の値として入れ子にすることが認められています。式は完全な数式なので、 `calc()` 関数自体を使わずに直接加算、減算、乗算、除算を使うことができます。 -- 式は、標準的な演算子の優先順位規則を使用して、加算 ( + )、減算 ( - )、乗算 ( * )、除算 ( / ) の各演算子を組み合わせた値にすることができます。オペランドの + と - の両側には必ず空白を入れてください。式の中のオペランドは、任意の `` 構文値を使用できます。 -- `min()` と `max()` の値を組み合わせたり、 `max()` を `clamp()` や `calc()` 関数の中で使用したりすることができます (そしてよく必要になります)。 - -### 形式文法 - -{{CSSSyntax}} - -## 例 - -

    フォントに最小値を設定する

    - -CSS 関数のもう一つの使用例は、少なくとも最小サイズを確保しながらフォントサイズを拡大していくことで、読みやすさを確保しながらレスポンシブなフォントサイズを可能にします。 - -多少の CSS を見てみましょう。 - -```css -h1 { - font-size: 2rem; -} -h1.responsive { - font-size: max(4vw, 2em, 2rem); -} -``` - -フォントサイズは最小で 2rem、ページの既定のフォントサイズの 2 倍になります。これは、それが読みやすく、アクセシビリティを確保することを保証します。 - -```html -

    このテキストは常に読みやすいですが、サイズは変わりません。

    -

    このテキストは、常に読みやすく、ある意味でレスポンシブです。

    -``` - -{{EmbedLiveSample("Setting_a_minimum_size_for_a_font", "100%", "300")}} - -`max()` 関数はプロパティに許される最小値を探るものと考えてください。 - -

    アクセシビリティの考慮

    - -`max()` を使用してテキストのサイズを制御する場合は、テキストが常に十分に読める大きさであることを確認してください。提案としては、 {{CSSxRef("min()", "min()")}} 関数を `max()` の中で入れ子にして使用し、その二番目の値として常に十分な大きさの[相対的な長さの単位](/ja/docs/Web/CSS/length#相対的な長さの単位)を持つようにします。 - -```css -small { - font-size: max(min(0.5vw, 0.5em), 1rem); -} -``` - -これにより、ページが拡大縮小されたときにテキストの大きさが拡大縮小され、最小サイズは _1rem_ になります。 - -- [MDN Understanding WCAG, Guideline 1.4 explanations](/ja/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](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html) - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{CSSxRef("calc()", "calc()")}} -- {{CSSxRef("clamp()", "clamp()")}} -- {{CSSxRef("min()", "min()")}} -- [CSS 値](/ja/docs/Learn/CSS/Building_blocks/Values_and_units) diff --git a/files/ja/web/css/max/index.md b/files/ja/web/css/max/index.md new file mode 100644 index 0000000000..5c4b31c597 --- /dev/null +++ b/files/ja/web/css/max/index.md @@ -0,0 +1,101 @@ +--- +title: max() +slug: Web/CSS/max +tags: + - CSS + - CSS 関数 + - Calculate + - Compute + - 関数 + - レイアウト + - リファレンス + - ウェブ + - max +translation_of: Web/CSS/max() +original_slug: Web/CSS/max() +browser-compat: css.types.max +--- +{{CSSRef}} + +**`max()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 CSS プロパティの値としてカンマで区切られた式のリストから最大の (最も正である) 値を設定できます。 `max()` 関数は {{CSSxRef("<length>")}}、{{CSSxRef("<frequency>")}}、{{CSSxRef("<angle>")}}、{{CSSxRef("<time>")}}、{{CSSxRef("<percentage>")}}、{{CSSxRef("<number>")}}、{{CSSxRef("<integer>")}} が使用できるところならばどこでも使用することができます。 + +{{EmbedInteractiveExample("pages/css/function-max.html")}} + +上の例では、幅が 400px 以上になりますが、ビューポートが 2000px よりも広い場合 (1vw が 20px になるため、 20vw が 400px になる場合) はより広くなります。 `max()` の値はプロパティが取りうる最小の値を提供するものとして考えてください。 + +## 構文 + +`max()` 関数は、引数としてカンマで区切った 1 つ以上の式を取り、もっとも大きい (最も正である) 式の値をプロパティに割り当てられた値として使用します。 + +式は、 (算術演算子を用いた) 数式、リテラル値、あるいは、有効な引数の型 ({{CSSxRef("<length>")}} など) に評価される {{CSSxRef("attr()", "attr()")}} などの式や、ネストされた {{CSSxRef("min()", "min()")}} や `max()` 関数を用いることができます。 + +式の各値に異なる単位を使用することができます。必要に応じて、計算順序を決めるために括弧を使用することもできます。 + +## メモ + +- 表の列、列グループ、行、行グループ、セルの幅と高さのパーセント値を含む数式は、自動レイアウト表と固定レイアウト表のどちらでも、あたかも `auto` が指定されていたかのように扱われる*可能性があります*。 +- `min()` や他の `max()` 関数を式の値として入れ子にすることが認められています。式は完全な数式なので、 `calc()` 関数自体を使わずに直接加算、減算、乗算、除算を使うことができます。 +- 式は、標準的な演算子の優先順位規則を使用して、加算 ( + )、減算 ( - )、乗算 ( * )、除算 ( / ) の各演算子を組み合わせた値にすることができます。オペランドの + と - の両側には必ず空白を入れてください。式の中のオペランドは、任意の `` 構文値を使用できます。 +- `min()` と `max()` の値を組み合わせたり、 `max()` を `clamp()` や `calc()` 関数の中で使用したりすることができます (そしてよく必要になります)。 + +### 形式文法 + +{{CSSSyntax}} + +## 例 + +

    フォントに最小値を設定する

    + +CSS 関数のもう一つの使用例は、少なくとも最小サイズを確保しながらフォントサイズを拡大していくことで、読みやすさを確保しながらレスポンシブなフォントサイズを可能にします。 + +多少の CSS を見てみましょう。 + +```css +h1 { + font-size: 2rem; +} +h1.responsive { + font-size: max(4vw, 2em, 2rem); +} +``` + +フォントサイズは最小で 2rem、ページの既定のフォントサイズの 2 倍になります。これは、それが読みやすく、アクセシビリティを確保することを保証します。 + +```html +

    このテキストは常に読みやすいですが、サイズは変わりません。

    +

    このテキストは、常に読みやすく、ある意味でレスポンシブです。

    +``` + +{{EmbedLiveSample("Setting_a_minimum_size_for_a_font", "100%", "300")}} + +`max()` 関数はプロパティに許される最小値を探るものと考えてください。 + +

    アクセシビリティの考慮

    + +`max()` を使用してテキストのサイズを制御する場合は、テキストが常に十分に読める大きさであることを確認してください。提案としては、 {{CSSxRef("min()", "min()")}} 関数を `max()` の中で入れ子にして使用し、その二番目の値として常に十分な大きさの[相対的な長さの単位](/ja/docs/Web/CSS/length#相対的な長さの単位)を持つようにします。 + +```css +small { + font-size: max(min(0.5vw, 0.5em), 1rem); +} +``` + +これにより、ページが拡大縮小されたときにテキストの大きさが拡大縮小され、最小サイズは _1rem_ になります。 + +- [MDN Understanding WCAG, Guideline 1.4 explanations](/ja/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](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html) + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{CSSxRef("calc()", "calc()")}} +- {{CSSxRef("clamp()", "clamp()")}} +- {{CSSxRef("min()", "min()")}} +- [CSS 値](/ja/docs/Learn/CSS/Building_blocks/Values_and_units) diff --git a/files/ja/web/css/min()/index.md b/files/ja/web/css/min()/index.md deleted file mode 100644 index 94f0d57623..0000000000 --- a/files/ja/web/css/min()/index.md +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: min() -slug: Web/CSS/min() -tags: - - CSS - - CSS 関数 - - Calculate - - Compute - - 関数 - - レイアウト - - リファレンス - - min -browser-compat: css.types.min -translation_of: Web/CSS/min() ---- -{{CSSRef}} - -**`min()`** は [CSS](/ja/docs/Web/CSS) 関数で、 CSS プロパティの値としてカンマで区切られた式のリストから最小の (最も負である) 値を設定できます。 `min()` 関数は {{CSSxRef("<length>")}}、{{CSSxRef("<frequency>")}},、{{CSSxRef("<angle>")}}、{{CSSxRef("<time>")}}、{{CSSxRef("<percentage>")}}、{{CSSxRef("<number>")}}、{{CSSxRef("<integer>")}} が利用できるところならばどこでも使用することができます。 - -{{EmbedInteractiveExample("pages/css/function-min.html")}} - -上の例では、幅は最大 80px ですが、ビューポートの幅が 800px 未満または em の幅が 20px 未満の場合は狭くなります。言い換えれば、最大幅は 80px です。 `min()` の値はプロパティが取りうる*最大の*値を提供するものとして考えてください。 - -## 構文 - -`min()` 関数は、引数としてカンマで区切った 1 つ以上の式を取り、もっとも小さい (最も負である) 式の値の結果を値として使用します。 - -式は ({{CSSxRef("<length>")}} などの) 有効な引数の型として評価される、 (算術演算子を使用した) 数式、リテラル値、 {{CSSxRef("attr()")}} などのその他の式にすることができます。 - -必要に応じて、式の各値に異なる単位を使用することができます。必要に応じて、計算順序を決めるために括弧を使用することもできます。 - -### メモ - -- 表の列、列グループ、行、行グループ、セルの幅と高さのパーセント値を含む数式は、自動レイアウト表と固定レイアウト表のどちらでも、あたかも `auto` が指定されていたかのように扱われる可能性があります。 -- `max()` や他の `min()` 関数を式の値として入れ子にすることが認められています。式は完全な数式なので、 `calc()` 関数自体を使わずに直接加算、減算、乗算、除算を使うことができます。 -- 式は、標準的な演算子の優先順位規則を使用して、加算 ( + )、減算 ( - )、乗算 ( * )、除算 ( / ) の各演算子を組み合わせた値にすることができます。オペランドの + と - の両側には必ず空白を入れてください。式の中のオペランドは、任意の `` 構文値を使用できます。 -- `min()` と `max()` の値を組み合わせたり、 `min()` を `clamp()` や `calc()` 関数の中で使用したりすることができます (そしてよく必要になります)。 -- 複数の制約を適用する場合は、3 つ以上の引数を与えることができます。 - -### 形式文法 - -{{CSSSyntax}} - -## アクセシビリティの考慮 - -`min()` を使用して最大フォントサイズを設定する場合、読めるようにするためにフォントが少なくとも 200% まで拡大できるようにしてください (ズーム機能などの支援技術なしで)。 - -- [MDN WCAG を理解する、ガイドライン 1.4 の解説](/ja/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](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html) - -## 例 - -

    ラベルと入力欄のために最大値を設定する

    - -CSS 関数のもう一つの使用例は、レスポンシブなフォームコントロールに最大サイズを設定します。ラベルと入力欄の幅をフォームの幅の縮小に合わせて縮小できるようにします。 - -いくらか 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; -} -``` - -ここでは、フォーム自体は、マージン、境界、パディングを含めて、親の幅の 100% になります。入力欄とラベルは、フォームのパディングまでの幅の 40% または幅 400px のどちらか小さい方になるように宣言します。言い換えれば、ラベルと入力欄の幅の最大値は 400px です。最も狭くなるのはフォームの幅の 40% であり、スマートウォッチの画面では非常に小さくなります。 - -```html -
    - - -
    -``` - -{{EmbedLiveSample("Setting_a_maximum_size_for_a_label_and_input", "100%", "110")}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{CSSxRef("calc()")}} -- {{CSSxRef("clamp()")}} -- {{CSSxRef("max()")}} -- [CSS 値](/ja/docs/Learn/CSS/Building_blocks/Values_and_units) diff --git a/files/ja/web/css/min/index.md b/files/ja/web/css/min/index.md new file mode 100644 index 0000000000..ee7f91923b --- /dev/null +++ b/files/ja/web/css/min/index.md @@ -0,0 +1,100 @@ +--- +title: min() +slug: Web/CSS/min +tags: + - CSS + - CSS 関数 + - Calculate + - Compute + - 関数 + - レイアウト + - リファレンス + - min +translation_of: Web/CSS/min() +original_slug: Web/CSS/min() +browser-compat: css.types.min +--- +{{CSSRef}} + +**`min()`** は [CSS](/ja/docs/Web/CSS) 関数で、 CSS プロパティの値としてカンマで区切られた式のリストから最小の (最も負である) 値を設定できます。 `min()` 関数は {{CSSxRef("<length>")}}、{{CSSxRef("<frequency>")}},、{{CSSxRef("<angle>")}}、{{CSSxRef("<time>")}}、{{CSSxRef("<percentage>")}}、{{CSSxRef("<number>")}}、{{CSSxRef("<integer>")}} が利用できるところならばどこでも使用することができます。 + +{{EmbedInteractiveExample("pages/css/function-min.html")}} + +上の例では、幅は最大 80px ですが、ビューポートの幅が 800px 未満または em の幅が 20px 未満の場合は狭くなります。言い換えれば、最大幅は 80px です。 `min()` の値はプロパティが取りうる*最大の*値を提供するものとして考えてください。 + +## 構文 + +`min()` 関数は、引数としてカンマで区切った 1 つ以上の式を取り、もっとも小さい (最も負である) 式の値の結果を値として使用します。 + +式は ({{CSSxRef("<length>")}} などの) 有効な引数の型として評価される、 (算術演算子を使用した) 数式、リテラル値、 {{CSSxRef("attr()")}} などのその他の式にすることができます。 + +必要に応じて、式の各値に異なる単位を使用することができます。必要に応じて、計算順序を決めるために括弧を使用することもできます。 + +### メモ + +- 表の列、列グループ、行、行グループ、セルの幅と高さのパーセント値を含む数式は、自動レイアウト表と固定レイアウト表のどちらでも、あたかも `auto` が指定されていたかのように扱われる可能性があります。 +- `max()` や他の `min()` 関数を式の値として入れ子にすることが認められています。式は完全な数式なので、 `calc()` 関数自体を使わずに直接加算、減算、乗算、除算を使うことができます。 +- 式は、標準的な演算子の優先順位規則を使用して、加算 ( + )、減算 ( - )、乗算 ( * )、除算 ( / ) の各演算子を組み合わせた値にすることができます。オペランドの + と - の両側には必ず空白を入れてください。式の中のオペランドは、任意の `` 構文値を使用できます。 +- `min()` と `max()` の値を組み合わせたり、 `min()` を `clamp()` や `calc()` 関数の中で使用したりすることができます (そしてよく必要になります)。 +- 複数の制約を適用する場合は、3 つ以上の引数を与えることができます。 + +### 形式文法 + +{{CSSSyntax}} + +## アクセシビリティの考慮 + +`min()` を使用して最大フォントサイズを設定する場合、読めるようにするためにフォントが少なくとも 200% まで拡大できるようにしてください (ズーム機能などの支援技術なしで)。 + +- [MDN WCAG を理解する、ガイドライン 1.4 の解説](/ja/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](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html) + +## 例 + +

    ラベルと入力欄のために最大値を設定する

    + +CSS 関数のもう一つの使用例は、レスポンシブなフォームコントロールに最大サイズを設定します。ラベルと入力欄の幅をフォームの幅の縮小に合わせて縮小できるようにします。 + +いくらか 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; +} +``` + +ここでは、フォーム自体は、マージン、境界、パディングを含めて、親の幅の 100% になります。入力欄とラベルは、フォームのパディングまでの幅の 40% または幅 400px のどちらか小さい方になるように宣言します。言い換えれば、ラベルと入力欄の幅の最大値は 400px です。最も狭くなるのはフォームの幅の 40% であり、スマートウォッチの画面では非常に小さくなります。 + +```html +
    + + +
    +``` + +{{EmbedLiveSample("Setting_a_maximum_size_for_a_label_and_input", "100%", "110")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{CSSxRef("calc()")}} +- {{CSSxRef("clamp()")}} +- {{CSSxRef("max()")}} +- [CSS 値](/ja/docs/Learn/CSS/Building_blocks/Values_and_units) diff --git a/files/ja/web/css/minmax()/index.md b/files/ja/web/css/minmax()/index.md deleted file mode 100644 index 6b7773ed40..0000000000 --- a/files/ja/web/css/minmax()/index.md +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: minmax() -slug: Web/CSS/minmax() -tags: - - CSS - - CSS 関数 - - CSS グリッド - - Experimental - - 関数 - - リファレンス - - ウェブ - - レイアウト -browser-compat: css.properties.grid-template-columns.minmax -translation_of: Web/CSS/minmax() ---- -{{CSSRef}} - -**`minmax()`** は [CSS](/ja/docs/Web/CSS) の関数で、寸法の範囲を _min_ 以上、 _max_ 以下で定義します。 [CSS グリッド](/ja/docs/Web/CSS/CSS_Grid_Layout)で使用されます。 - -{{EmbedInteractiveExample("pages/css/function-minmax.html")}} - -## 構文 - -```css -/* , 値 */ -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) - -/* , 値 */ -minmax(200px, 1fr) -minmax(30%, 300px) -minmax(400px, 50%) -minmax(50%, min-content) -minmax(300px, max-content) -minmax(200px, auto) - -/* , 値 */ -minmax(400px, 50%) -minmax(30%, 300px) -minmax(min-content, 200px) -minmax(max-content, 200px) -minmax(auto, 300px) -``` - -_min_ および _max_ の 2 つの引数を取る関数です。 - -どちらの引数も ``, ``, ``, またはキーワード値 `max-content`, `min-content`, `auto` のうちの一つを取ります。 - -もし _min_ が _max_ より大きい場合は無視され、 `minmax(min,max)` は _min_ として扱われます。最大値として、 {{cssxref("flex_value","<flex>")}} 値はグリッドトラックのフレックス係数を設定します。それは _min_ としては無効です。 - -### 値 - -- {{cssxref("<length>")}} - - : 負ではない寸法。 -- {{cssxref("<percentage>")}} - - : 負ではないパーセント値で、列グリッドトラックのグリッドコンテナーのインライン寸法、および行グリッドトラックのグリッドコンテナーのブロック寸法からの相対値。グリッドコンテナーの寸法がトラックの寸法に依存する場合、 `` は `auto` として扱う必要があります。{{glossary("user agent", "ユーザーエージェント")}}は、グリッドコンテナーの寸法に対するトラックの固有の寸法の貢献度を調整し、パーセント値を尊重して最小限の量だけトラックの最終的な寸法を増加させることがあります。 -- {{cssxref("<flex>")}} - - : 単位 `fr` がついた負ではない寸法で、トラックのフレックス係数を指定します。それぞれの `<flex>` による寸法のトラックは、フレックス係数の割合に従って残りの空間を配分します。 -- `max-content` - - : グリッドトラックを占めるグリッドアイテムの max-content の貢献度の最大値を表します。 -- `min-content` - - : グリッドトラックを占めるグリッドアイテムの min-content の貢献度の最大値を表します。 -- `auto` - - : 最大値としては、 `max-content` と同じです。最小値としては、グリッドトラックを占めるグリッドアイテムの ({{cssxref("min-width")}}/{{cssxref("min-height")}} で決定する) 最大の最小値を表します。 - -

    形式文法

    - -{{csssyntax}} - -

    CSS プロパティ

    - -`minmax()` 関数は次の中で使用することができます。 - -- [grid-template-columns](/ja/docs/Web/CSS/grid-template-columns) -- [grid-template-rows](/ja/docs/Web/CSS/grid-template-rows) -- [grid-auto-columns](/ja/docs/Web/CSS/grid-auto-columns) -- [grid-auto-rows](/ja/docs/Web/CSS/grid-auto-rows) - -## 例 - -### 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 -
    -
    - Item as wide as the content, but at most 300 pixels. -
    -
    - Item with flexible width but a minimum of 200 pixels. -
    -
    - Inflexible item of 150 pixels width. -
    -
    -``` - -### 結果 - -{{EmbedLiveSample("Examples", "100%", 200)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- グリッドレイアウトガイド: [グリッドレイアウトの基本概念 - minmax() によるトラックの寸法制御](/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#トラックのサイズ指定と_minmax()) -- [CSS グリッドと論理的な値と書字方向](/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Logical_Values_and_Writing_Modes) -- 動画チュートリアル: _[Introducing minmax()](https://gridbyexample.com/video/series-minmax/)_ diff --git a/files/ja/web/css/minmax/index.md b/files/ja/web/css/minmax/index.md new file mode 100644 index 0000000000..03733a7e1c --- /dev/null +++ b/files/ja/web/css/minmax/index.md @@ -0,0 +1,140 @@ +--- +title: minmax() +slug: Web/CSS/minmax +tags: + - CSS + - CSS 関数 + - CSS グリッド + - Experimental + - 関数 + - リファレンス + - ウェブ + - レイアウト +translation_of: Web/CSS/minmax() +original_slug: Web/CSS/minmax() +browser-compat: css.properties.grid-template-columns.minmax +--- +{{CSSRef}} + +**`minmax()`** は [CSS](/ja/docs/Web/CSS) の関数で、寸法の範囲を _min_ 以上、 _max_ 以下で定義します。 [CSS グリッド](/ja/docs/Web/CSS/CSS_Grid_Layout)で使用されます。 + +{{EmbedInteractiveExample("pages/css/function-minmax.html")}} + +## 構文 + +```css +/* , 値 */ +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) + +/* , 値 */ +minmax(200px, 1fr) +minmax(30%, 300px) +minmax(400px, 50%) +minmax(50%, min-content) +minmax(300px, max-content) +minmax(200px, auto) + +/* , 値 */ +minmax(400px, 50%) +minmax(30%, 300px) +minmax(min-content, 200px) +minmax(max-content, 200px) +minmax(auto, 300px) +``` + +_min_ および _max_ の 2 つの引数を取る関数です。 + +どちらの引数も ``, ``, ``, またはキーワード値 `max-content`, `min-content`, `auto` のうちの一つを取ります。 + +もし _min_ が _max_ より大きい場合は無視され、 `minmax(min,max)` は _min_ として扱われます。最大値として、 {{cssxref("flex_value","<flex>")}} 値はグリッドトラックのフレックス係数を設定します。それは _min_ としては無効です。 + +### 値 + +- {{cssxref("<length>")}} + - : 負ではない寸法。 +- {{cssxref("<percentage>")}} + - : 負ではないパーセント値で、列グリッドトラックのグリッドコンテナーのインライン寸法、および行グリッドトラックのグリッドコンテナーのブロック寸法からの相対値。グリッドコンテナーの寸法がトラックの寸法に依存する場合、 `` は `auto` として扱う必要があります。{{glossary("user agent", "ユーザーエージェント")}}は、グリッドコンテナーの寸法に対するトラックの固有の寸法の貢献度を調整し、パーセント値を尊重して最小限の量だけトラックの最終的な寸法を増加させることがあります。 +- {{cssxref("<flex>")}} + - : 単位 `fr` がついた負ではない寸法で、トラックのフレックス係数を指定します。それぞれの `<flex>` による寸法のトラックは、フレックス係数の割合に従って残りの空間を配分します。 +- `max-content` + - : グリッドトラックを占めるグリッドアイテムの max-content の貢献度の最大値を表します。 +- `min-content` + - : グリッドトラックを占めるグリッドアイテムの min-content の貢献度の最大値を表します。 +- `auto` + - : 最大値としては、 `max-content` と同じです。最小値としては、グリッドトラックを占めるグリッドアイテムの ({{cssxref("min-width")}}/{{cssxref("min-height")}} で決定する) 最大の最小値を表します。 + +

    形式文法

    + +{{csssyntax}} + +

    CSS プロパティ

    + +`minmax()` 関数は次の中で使用することができます。 + +- [grid-template-columns](/ja/docs/Web/CSS/grid-template-columns) +- [grid-template-rows](/ja/docs/Web/CSS/grid-template-rows) +- [grid-auto-columns](/ja/docs/Web/CSS/grid-auto-columns) +- [grid-auto-rows](/ja/docs/Web/CSS/grid-auto-rows) + +## 例 + +### 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 +
    +
    + Item as wide as the content, but at most 300 pixels. +
    +
    + Item with flexible width but a minimum of 200 pixels. +
    +
    + Inflexible item of 150 pixels width. +
    +
    +``` + +### 結果 + +{{EmbedLiveSample("Examples", "100%", 200)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- グリッドレイアウトガイド: [グリッドレイアウトの基本概念 - minmax() によるトラックの寸法制御](/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#トラックのサイズ指定と_minmax()) +- [CSS グリッドと論理的な値と書字方向](/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Logical_Values_and_Writing_Modes) +- 動画チュートリアル: _[Introducing minmax()](https://gridbyexample.com/video/series-minmax/)_ diff --git a/files/ja/web/css/repeat()/index.md b/files/ja/web/css/repeat()/index.md deleted file mode 100644 index 6fc208c093..0000000000 --- a/files/ja/web/css/repeat()/index.md +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: repeat() -slug: Web/CSS/repeat() -tags: - - CSS - - CSS 関数 - - CSS グリッド - - 関数 - - レイアウト - - リファレンス - - ウェブ -browser-compat: css.properties.grid-template-columns.repeat -translation_of: Web/CSS/repeat() ---- -{{CSSRef}} - -**`repeat()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、トラックリスト内での部分的な繰り返しを表し、列や行の繰り返しをよりコンパクトに書くことができます。 - -この関数は CSS グリッドのプロパティである {{cssxref("grid-template-columns")}} と {{cssxref("grid-template-rows")}} の中で使うことができます。 - -```css -/* 値 */ -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]) - -/* 値 */ -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]) - -/* 値 */ -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]) -``` - -## 構文 - -### 値 - -- {{cssxref("<length>")}} - - : 正の整数で表される長さです。 -- {{cssxref("<percentage>")}} - - : 負の数ではないパーセント値で、列グリッドトラック内のグリッドコンテナーのインライン寸法と、行グリッドトラック内のグリッドコンテナーのブロック寸法との相対的値を表します。グリッドコンテナーの寸法がトラックの寸法に依存する場合、 `` は `auto` として扱う必要があります。ユーザーエージェントは、トラックの本質的な寸法の寄与をグリッドコンテナーの寸法に調整し、トラックの最終的な寸法を、パーセント値を尊重する結果となる最小の量だけ増加させることができます。 -- {{cssxref("<flex>")}} - - : トラックのフレックス要素を明示している `fr` 単位の負ではない寸法。それぞれのフレックスサイズのトラックは、それらのフレックス要素に比例して残りの空間を配分します。 -- `max-content` - - : グリッドトラックにあるグリッドアイテムの最も大きい max-content を表します。 -- `min-content` - - : グリッドトラックにあるグリッドアイテムの最も大きい min-content を表します。 -- `auto` - - : 最大値としては、 `max-content` と同じです。最小値としては、グリッドトラックを占めるグリッドアイテムの最大最小サイズ ({{cssxref("min-width")}}/{{cssxref("min-height")}} で指定されたもの) を表します。 -- `auto-fill` - - : グリッドコンテナーが関連する軸に、定義されたまたは最大の幅を持っている場合、繰り返しの数は、グリッドコンテナーをオーバーフローさせない最大の正の数になります。各トラックは定義されているならば、最大トラック幅を調整する関数 (`grid-template-rows` または `grid-template-columns` を定義するために使用されるそれぞれ独立した値) として扱われます。それ以外の場合は、最小トラック幅を調整する関数として扱い、グリッドギャップを考慮に入れます。何回繰り返してもオーバーフローしてしまう場合は、繰り返しを 1 とする。そうでなければ、グリッドコンテナーが関連する軸に、定義された最小の寸法をもっている場合、繰り返しの数は最小の要件を満たす可能性がある最小の正の整数になります。その他の場合は、指定されたトラックリストは `1` 回のみ繰り返します。。 -- `auto-fit` - - - : `auto-fill` と同様に動作しますが、グリッドアイテムを配置した後、空の繰り返しトラックが折りたたまれる点が異なります。空のトラックとは、フロー内のグリッドアイテムが配置されていない、またはそれをまたいで配置されているものがないトラックのことです。 (これは、すべてのトラックが空の場合、すべてのトラックが折りたたまれる結果になる可能性があります。) - - 折り畳まれたトラックは、 `0px`　の固定トラックサイジング機能を1つ持っているものとして扱われ、その左右の溝も折り畳まれます。 - - 自動反復トラックの数を見つけるために、ユーザーエージェントは、ゼロによる除算を避けるために、トラックの寸法をユーザーエージェントが指定した値 (例えば `1px`) に切り下げます。 - -## 例 - -### repeat() を使用したグリッド列の指定 - -#### HTML - -```html -
    -
    - This item is 50 pixels wide. -
    -
    - Item with flexible width. -
    -
    - This item is 50 pixels wide. -
    -
    - Item with flexible width. -
    -
    - Inflexible item of 100 pixels width. -
    -
    -``` - -#### 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; -} -``` - -#### 結果 - -{{EmbedLiveSample("Specifying_grid_columns_using_repeat", "100%", 200)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- 関連する CSS プロパティ: {{cssxref("grid-template")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}} -- グリッドレイアウトガイド: [CSS グリッドでの線ベースの配置](/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid) -- グリッドレイアウトガイド: [グリッドテンプレート領域 - グリッド定義の一括指定](/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#グリッド定義の一括指定) diff --git a/files/ja/web/css/repeat/index.md b/files/ja/web/css/repeat/index.md new file mode 100644 index 0000000000..b30112c893 --- /dev/null +++ b/files/ja/web/css/repeat/index.md @@ -0,0 +1,141 @@ +--- +title: repeat() +slug: Web/CSS/repeat +tags: + - CSS + - CSS 関数 + - CSS グリッド + - 関数 + - レイアウト + - リファレンス + - ウェブ +translation_of: Web/CSS/repeat() +original_slug: Web/CSS/repeat() +browser-compat: css.properties.grid-template-columns.repeat +--- +{{CSSRef}} + +**`repeat()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、トラックリスト内での部分的な繰り返しを表し、列や行の繰り返しをよりコンパクトに書くことができます。 + +この関数は CSS グリッドのプロパティである {{cssxref("grid-template-columns")}} と {{cssxref("grid-template-rows")}} の中で使うことができます。 + +```css +/* 値 */ +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]) + +/* 値 */ +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]) + +/* 値 */ +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]) +``` + +## 構文 + +### 値 + +- {{cssxref("<length>")}} + - : 正の整数で表される長さです。 +- {{cssxref("<percentage>")}} + - : 負の数ではないパーセント値で、列グリッドトラック内のグリッドコンテナーのインライン寸法と、行グリッドトラック内のグリッドコンテナーのブロック寸法との相対的値を表します。グリッドコンテナーの寸法がトラックの寸法に依存する場合、 `` は `auto` として扱う必要があります。ユーザーエージェントは、トラックの本質的な寸法の寄与をグリッドコンテナーの寸法に調整し、トラックの最終的な寸法を、パーセント値を尊重する結果となる最小の量だけ増加させることができます。 +- {{cssxref("<flex>")}} + - : トラックのフレックス要素を明示している `fr` 単位の負ではない寸法。それぞれのフレックスサイズのトラックは、それらのフレックス要素に比例して残りの空間を配分します。 +- `max-content` + - : グリッドトラックにあるグリッドアイテムの最も大きい max-content を表します。 +- `min-content` + - : グリッドトラックにあるグリッドアイテムの最も大きい min-content を表します。 +- `auto` + - : 最大値としては、 `max-content` と同じです。最小値としては、グリッドトラックを占めるグリッドアイテムの最大最小サイズ ({{cssxref("min-width")}}/{{cssxref("min-height")}} で指定されたもの) を表します。 +- `auto-fill` + - : グリッドコンテナーが関連する軸に、定義されたまたは最大の幅を持っている場合、繰り返しの数は、グリッドコンテナーをオーバーフローさせない最大の正の数になります。各トラックは定義されているならば、最大トラック幅を調整する関数 (`grid-template-rows` または `grid-template-columns` を定義するために使用されるそれぞれ独立した値) として扱われます。それ以外の場合は、最小トラック幅を調整する関数として扱い、グリッドギャップを考慮に入れます。何回繰り返してもオーバーフローしてしまう場合は、繰り返しを 1 とする。そうでなければ、グリッドコンテナーが関連する軸に、定義された最小の寸法をもっている場合、繰り返しの数は最小の要件を満たす可能性がある最小の正の整数になります。その他の場合は、指定されたトラックリストは `1` 回のみ繰り返します。。 +- `auto-fit` + + - : `auto-fill` と同様に動作しますが、グリッドアイテムを配置した後、空の繰り返しトラックが折りたたまれる点が異なります。空のトラックとは、フロー内のグリッドアイテムが配置されていない、またはそれをまたいで配置されているものがないトラックのことです。 (これは、すべてのトラックが空の場合、すべてのトラックが折りたたまれる結果になる可能性があります。) + + 折り畳まれたトラックは、 `0px`　の固定トラックサイジング機能を1つ持っているものとして扱われ、その左右の溝も折り畳まれます。 + + 自動反復トラックの数を見つけるために、ユーザーエージェントは、ゼロによる除算を避けるために、トラックの寸法をユーザーエージェントが指定した値 (例えば `1px`) に切り下げます。 + +## 例 + +### repeat() を使用したグリッド列の指定 + +#### HTML + +```html +
    +
    + This item is 50 pixels wide. +
    +
    + Item with flexible width. +
    +
    + This item is 50 pixels wide. +
    +
    + Item with flexible width. +
    +
    + Inflexible item of 100 pixels width. +
    +
    +``` + +#### 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; +} +``` + +#### 結果 + +{{EmbedLiveSample("Specifying_grid_columns_using_repeat", "100%", 200)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 関連する CSS プロパティ: {{cssxref("grid-template")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}} +- グリッドレイアウトガイド: [CSS グリッドでの線ベースの配置](/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid) +- グリッドレイアウトガイド: [グリッドテンプレート領域 - グリッド定義の一括指定](/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#グリッド定義の一括指定) diff --git a/files/ja/web/css/symbols()/index.md b/files/ja/web/css/symbols()/index.md deleted file mode 100644 index f090a117bd..0000000000 --- a/files/ja/web/css/symbols()/index.md +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: symbols() -slug: Web/CSS/symbols() -tags: - - CSS - - CSS カウンタースタイル - - Function - - リファレンス -browser-compat: css.properties.list-style-type.symbols -translation_of: Web/CSS/symbols() ---- -{{CSSRef}} - -**`symbols()`** は CSS の関数で、カウンタースタイルをインラインで、 {{cssxref("list-style")}} のようなプロパティの値で直接定義することができます。 {{cssxref("@counter-style")}} とは異なり、 `symbols()` は*無名*です (すなわち一度しか使用できません)。 {{cssxref("@counter-style")}} よりも機能は劣りますが、より簡単でより短く書くことができます。 - -## 構文 - -```css -symbols() = symbols( ? [ | ]+ ); -``` - -`` は以下のうちの一つで指定することができます。 - -- `cyclic`: このシステムでは、与えられた値を定義された順に循環させ、最後に到達すると最初に戻ります。 -- `numeric`: このシステムでは、与えられた値を位取り記数法の連続した単位として解釈します。 -- `alphabetic`: このシステムでは、与えられた値をアルファベット記数法として解釈します。位取り記数法と似ていますが、 `0` がありません。 -- `symbolic`: このシステムでは値を循環させ、循環ごとに数を増やします（最初の循環では 1 回、 2 回目は 2 回、など）。 -- `fixed`: このシステムでは与えられた値を一度ずつ使用し、その後はアラビア数字で代替します。 - -## 例 - -### HTML - -```html -
      -
    1. One
      2. -
    2. Two
      3. -
    3. Three
      4. -
    4. Four
      5. -
    5. Five
      6. -
    -``` - -### CSS - -```css -ol { - list-style: symbols(cyclic "*" "†" "‡"); -} -``` - -### 結果 - -{{EmbedLiveSample('Examples','100%',200)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("@counter-style")}} -- {{cssxref("list-style-type")}} および対応する一括指定である {{cssxref("list-style")}} diff --git a/files/ja/web/css/symbols/index.md b/files/ja/web/css/symbols/index.md new file mode 100644 index 0000000000..c8abc9d9ec --- /dev/null +++ b/files/ja/web/css/symbols/index.md @@ -0,0 +1,68 @@ +--- +title: symbols() +slug: Web/CSS/symbols +tags: + - CSS + - CSS カウンタースタイル + - Function + - リファレンス +translation_of: Web/CSS/symbols() +original_slug: Web/CSS/symbols() +browser-compat: css.properties.list-style-type.symbols +--- +{{CSSRef}} + +**`symbols()`** は CSS の関数で、カウンタースタイルをインラインで、 {{cssxref("list-style")}} のようなプロパティの値で直接定義することができます。 {{cssxref("@counter-style")}} とは異なり、 `symbols()` は*無名*です (すなわち一度しか使用できません)。 {{cssxref("@counter-style")}} よりも機能は劣りますが、より簡単でより短く書くことができます。 + +## 構文 + +```css +symbols() = symbols( ? [ | ]+ ); +``` + +`` は以下のうちの一つで指定することができます。 + +- `cyclic`: このシステムでは、与えられた値を定義された順に循環させ、最後に到達すると最初に戻ります。 +- `numeric`: このシステムでは、与えられた値を位取り記数法の連続した単位として解釈します。 +- `alphabetic`: このシステムでは、与えられた値をアルファベット記数法として解釈します。位取り記数法と似ていますが、 `0` がありません。 +- `symbolic`: このシステムでは値を循環させ、循環ごとに数を増やします（最初の循環では 1 回、 2 回目は 2 回、など）。 +- `fixed`: このシステムでは与えられた値を一度ずつ使用し、その後はアラビア数字で代替します。 + +## 例 + +### HTML + +```html +
      +
    1. One
      2. +
    2. Two
      3. +
    3. Three
      4. +
    4. Four
      5. +
    5. Five
      6. +
    +``` + +### CSS + +```css +ol { + list-style: symbols(cyclic "*" "†" "‡"); +} +``` + +### 結果 + +{{EmbedLiveSample('Examples','100%',200)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("@counter-style")}} +- {{cssxref("list-style-type")}} および対応する一括指定である {{cssxref("list-style")}} diff --git a/files/ja/web/css/transform-function/matrix()/index.md b/files/ja/web/css/transform-function/matrix()/index.md deleted file mode 100644 index a522b300fd..0000000000 --- a/files/ja/web/css/transform-function/matrix()/index.md +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: matrix() -slug: Web/CSS/transform-function/matrix() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.matrix -translation_of: Web/CSS/transform-function/matrix() ---- -{{CSSRef}} - -**`matrix()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、二次元同次変換行列を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 - -> **Note:** `matrix(a, b, c, d, tx, ty)` は `matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)` の短縮形です。 - -## 構文 - -`matrix()` 関数は 6 つの値で指定されます。定数は内蔵されていて引数としては渡されず、その他の引数は列優先の順で記述されます。 - -```css -matrix(a, b, c, d, tx, ty) -``` - -### 値 - -- _a_ _b_ _c_ _d_ - - : {{cssxref("<number>")}} で、線形変換を記述します。 -- _tx_ _ty_ - - : {{cssxref("<number>")}} で、適用する変換を記述します。 - - - - - - - - - - - - - - - - - - - - - -
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    - a c b d - - a c tx b d ty 0 0 1 - - a c tx b d ty 0 0 1 - - a c 0 tx b d 0 ty 0 0 1 0 0 0 0 1 -
    [a b c d tx ty]
    - -値は次の関数を表します。 -`matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )` - -

    例

    - -### HTML - -```html -
    Normal
    -
    Changed
    -``` - -### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.changed { - transform: matrix(1, 2, -1, 1, 80, 80); - background-color: pink; -} -``` - -### 結果 - -{{EmbedLiveSample("Examples", 350, 350)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} -- [`matrix3d()`](/ja/docs/Web/CSS/transform-function/matrix3d()) -- [Understanding the CSS Transforms Matrix](https://dev.opera.com/articles/understanding-the-css-transforms-matrix/) diff --git a/files/ja/web/css/transform-function/matrix/index.md b/files/ja/web/css/transform-function/matrix/index.md new file mode 100644 index 0000000000..d01b1fd491 --- /dev/null +++ b/files/ja/web/css/transform-function/matrix/index.md @@ -0,0 +1,167 @@ +--- +title: matrix() +slug: Web/CSS/transform-function/matrix +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/matrix() +original_slug: Web/CSS/transform-function/matrix() +browser-compat: css.types.transform-function.matrix +--- +{{CSSRef}} + +**`matrix()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、二次元同次変換行列を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 + +> **Note:** `matrix(a, b, c, d, tx, ty)` は `matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)` の短縮形です。 + +## 構文 + +`matrix()` 関数は 6 つの値で指定されます。定数は内蔵されていて引数としては渡されず、その他の引数は列優先の順で記述されます。 + +```css +matrix(a, b, c, d, tx, ty) +``` + +### 値 + +- _a_ _b_ _c_ _d_ + - : {{cssxref("<number>")}} で、線形変換を記述します。 +- _tx_ _ty_ + - : {{cssxref("<number>")}} で、適用する変換を記述します。 + + + + + + + + + + + + + + + + + + + + + +
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    + a c b d + + a c tx b d ty 0 0 1 + + a c tx b d ty 0 0 1 + + a c 0 tx b d 0 ty 0 0 1 0 0 0 0 1 +
    [a b c d tx ty]
    + +値は次の関数を表します。 +`matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )` + +

    例

    + +### HTML + +```html +
    Normal
    +
    Changed
    +``` + +### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.changed { + transform: matrix(1, 2, -1, 1, 80, 80); + background-color: pink; +} +``` + +### 結果 + +{{EmbedLiveSample("Examples", 350, 350)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} +- [`matrix3d()`](/ja/docs/Web/CSS/transform-function/matrix3d()) +- [Understanding the CSS Transforms Matrix](https://dev.opera.com/articles/understanding-the-css-transforms-matrix/) diff --git a/files/ja/web/css/transform-function/matrix3d()/index.md b/files/ja/web/css/transform-function/matrix3d()/index.md deleted file mode 100644 index f441acebd2..0000000000 --- a/files/ja/web/css/transform-function/matrix3d()/index.md +++ /dev/null @@ -1,254 +0,0 @@ ---- -title: matrix3d() -slug: Web/CSS/transform-function/matrix3d() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.matrix3d -translation_of: Web/CSS/transform-function/matrix3d() ---- -{{CSSRef}} - -**`matrix3d()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 4x4 の三次元同次変換行列を定義します。 -結果は {{cssxref("<transform-function>")}} データ型になります。 - -## 構文 - -`matrix3d()` 関数は 16 個の値で指定します。列優先の順で記述します。 - -```css -matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) -``` - -### 値 - -- _a1_ _b1_ _c1_ _d1_ _a2_ _b2_ _c2_ _d2_ - _a3_ _b3_ _c3_ _d3_ - - : {{cssxref("<number>")}} で、線形変換を記述します。 -- _a4_ _b4_ _c4 d4_ - - : {{cssxref("<number>")}} で、適用する変換を記述します。 - - - - - - - - - - - - - - - - - -
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    - この変換は三次元空間に適用され、平面で表現することはできません。 - - 一般的な三次元[アファイン変換](https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%95%E3%82%A3%E3%83%B3%E5%86%99%E5%83%8F)は、変換が線形変換ではないので、デカルト座標行列を使用して表現することはできません。 - - a1 a2 a3 a4 b1 b2 b3 b4 c1 c2 c3 c4 d1 d2 d3 d4 -
    - -## 例 - -### つぶれる立方体の例 - -次の例は、DOM 要素と変換から作成された立方体を示しており、ポインターを置いたりフォーカスしたりすることで `matrix3d()` 変換を適用することができます。 - -#### HTML - -```html -
    - 
    1
    - 
    2
    - 
    3
    - 
    4
    - 
    5
    - 
    6
    -
    -``` - -#### CSS - -```css -#example-element { - width: 100px; - height: 100px; - transform-style: preserve-3d; - transition: transform 1.5s; - transform: rotate3d(1, 1, 1, 30deg); - margin: 50px auto; -} - -#example-element:hover, #example-element:focus { - transform: rotate3d(1, 1, 1, 30deg) matrix3d(1,0,0,0,0,1,6,0,0,0,1,0,50,100,0,1.1); -} - -.face { - display: flex; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; - position: absolute; - backface-visibility: inherit; - font-size: 60px; - color: #fff; -} - -.front { - background: rgba(90,90,90,.7); - transform: translateZ(50px); -} - -.back { - background: rgba(0,210,0,.7); - transform: rotateY(180deg) translateZ(50px); -} - -.right { - background: rgba(210,0,0,.7); - transform: rotateY(90deg) translateZ(50px); -} - -.left { - background: rgba(0,0,210,.7); - transform: rotateY(-90deg) translateZ(50px); -} - -.top { - background: rgba(210,210,0,.7); - transform: rotateX(90deg) translateZ(50px); -} - -.bottom { - background: rgba(210,0,210,.7); - transform: rotateX(-90deg) translateZ(50px); -} -``` - -#### 結果 - -{{EmbedLiveSample('Cube_squashing_example', '100%', '300px')}} - -### 行列変換と拡大縮小の例 - -もう一つの `transform3d()` の例は、変換と拡大縮小をアニメーションと組み合わせて実装したものです。 - -#### 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 -    ) -  } -} -``` - -#### 結果 - -{{EmbedLiveSample('Matrix_translation_and_scale_example', '100%', '400px')}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} -- [Understanding the CSS Transforms Matrix](https://dev.opera.com/articles/understanding-the-css-transforms-matrix/) diff --git a/files/ja/web/css/transform-function/matrix3d/index.md b/files/ja/web/css/transform-function/matrix3d/index.md new file mode 100644 index 0000000000..b3d1168891 --- /dev/null +++ b/files/ja/web/css/transform-function/matrix3d/index.md @@ -0,0 +1,255 @@ +--- +title: matrix3d() +slug: Web/CSS/transform-function/matrix3d +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/matrix3d() +original_slug: Web/CSS/transform-function/matrix3d() +browser-compat: css.types.transform-function.matrix3d +--- +{{CSSRef}} + +**`matrix3d()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、 4x4 の三次元同次変換行列を定義します。 +結果は {{cssxref("<transform-function>")}} データ型になります。 + +## 構文 + +`matrix3d()` 関数は 16 個の値で指定します。列優先の順で記述します。 + +```css +matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) +``` + +### 値 + +- _a1_ _b1_ _c1_ _d1_ _a2_ _b2_ _c2_ _d2_ + _a3_ _b3_ _c3_ _d3_ + - : {{cssxref("<number>")}} で、線形変換を記述します。 +- _a4_ _b4_ _c4 d4_ + - : {{cssxref("<number>")}} で、適用する変換を記述します。 + + + + + + + + + + + + + + + + + +
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    + この変換は三次元空間に適用され、平面で表現することはできません。 + + 一般的な三次元[アファイン変換](https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%95%E3%82%A3%E3%83%B3%E5%86%99%E5%83%8F)は、変換が線形変換ではないので、デカルト座標行列を使用して表現することはできません。 + + a1 a2 a3 a4 b1 b2 b3 b4 c1 c2 c3 c4 d1 d2 d3 d4 +
    + +## 例 + +### つぶれる立方体の例 + +次の例は、DOM 要素と変換から作成された立方体を示しており、ポインターを置いたりフォーカスしたりすることで `matrix3d()` 変換を適用することができます。 + +#### HTML + +```html +
    + 
    1
    + 
    2
    + 
    3
    + 
    4
    + 
    5
    + 
    6
    +
    +``` + +#### CSS + +```css +#example-element { + width: 100px; + height: 100px; + transform-style: preserve-3d; + transition: transform 1.5s; + transform: rotate3d(1, 1, 1, 30deg); + margin: 50px auto; +} + +#example-element:hover, #example-element:focus { + transform: rotate3d(1, 1, 1, 30deg) matrix3d(1,0,0,0,0,1,6,0,0,0,1,0,50,100,0,1.1); +} + +.face { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + position: absolute; + backface-visibility: inherit; + font-size: 60px; + color: #fff; +} + +.front { + background: rgba(90,90,90,.7); + transform: translateZ(50px); +} + +.back { + background: rgba(0,210,0,.7); + transform: rotateY(180deg) translateZ(50px); +} + +.right { + background: rgba(210,0,0,.7); + transform: rotateY(90deg) translateZ(50px); +} + +.left { + background: rgba(0,0,210,.7); + transform: rotateY(-90deg) translateZ(50px); +} + +.top { + background: rgba(210,210,0,.7); + transform: rotateX(90deg) translateZ(50px); +} + +.bottom { + background: rgba(210,0,210,.7); + transform: rotateX(-90deg) translateZ(50px); +} +``` + +#### 結果 + +{{EmbedLiveSample('Cube_squashing_example', '100%', '300px')}} + +### 行列変換と拡大縮小の例 + +もう一つの `transform3d()` の例は、変換と拡大縮小をアニメーションと組み合わせて実装したものです。 + +#### 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 +    ) +  } +} +``` + +#### 結果 + +{{EmbedLiveSample('Matrix_translation_and_scale_example', '100%', '400px')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} +- [Understanding the CSS Transforms Matrix](https://dev.opera.com/articles/understanding-the-css-transforms-matrix/) diff --git a/files/ja/web/css/transform-function/perspective()/index.md b/files/ja/web/css/transform-function/perspective()/index.md deleted file mode 100644 index 3be9e8d15f..0000000000 --- a/files/ja/web/css/transform-function/perspective()/index.md +++ /dev/null @@ -1,173 +0,0 @@ ---- -title: perspective() -slug: Web/CSS/transform-function/perspective() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.perspective -translation_of: Web/CSS/transform-function/perspective() ---- -{{CSSRef}} - -**`perspective()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、ユーザーと z=0 平面との間の距離を定義し、閲覧者からの視点は二次元のインターフェイスが三次元であったかのようになります。結果は {{cssxref("<transform-function>")}} データ型になります。 - -{{EmbedInteractiveExample("pages/css/function-perspective.html")}} - -`perspective()` 座標変換関数は {{cssxref('transform')}} 値の一部で、変形される要素に適用されます。これは {{cssxref('perspective')}} および {{cssxref('perspective-origin')}} の各プロパティが三次元空間に座標変換される子の親に付けられるのとは異なります。 - -## 構文 - -`perspective()` で使用する視点距離は、{{cssxref("<length>")}} 値でユーザーと z=0 平面との間の距離を指定するか、または `none` で指定します。 -z=0 平面とは、二次元表示ですべてが見える平面、つまり画面のことです。 -負の値は構文エラーになります。 -`1px` より小さい値 (ゼロを含む) は `1px` になります。 -値が `none` 以外の場合、 z が正の位置にある要素は大きく表示されます。また、z が負の位置にある要素は小さく表示されます。 -z 位置が `perspective` の値と同じか大きい要素は、ユーザーの背後にあるかのようになり、非表示になります。 -`perspective()` が大きいと、変形が小さいことを表します。`perspective()` の値が小さいと、変形が大きいことを表します。`perspective(none)` は無限の距離からの遠近感を表し、変形はありません。 - -```css -perspective(d) -``` - -### 値 - -- _d_ - - : {{cssxref("<length>")}} で、ユーザーと z=0 平面との間の距離を表します。 0 または負の数であった場合は、距離の変換は適用されません。 - - - - - - - - - - - - - - - - - -
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    - この変換は三次元空間に適用され、平面で表現することはできません。 - この変換は ℝ^3 では線形変換ではないので、デカルト座標行列を使用して表現することはできません。 - 1 0 0 0 0 1 0 0 0 0 1 0 0 0 − - 1 - / - d 1 -
    - -

    例

    - -### HTML - -```html -

    Without perspective:

    -
    - 
    A
    - 
    B
    - 
    C
    -
    - -

    With perspective (9cm):

    -
    - 
    A
    - 
    B
    - 
    C
    -
    - -

    With perspective (4cm):

    -
    - 
    A
    - 
    B
    - 
    C
    -
    -``` - -### 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); -} -``` - -### 結果 - -{{ EmbedLiveSample('Examples', '250', '350') }} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/perspective/index.md b/files/ja/web/css/transform-function/perspective/index.md new file mode 100644 index 0000000000..558dc25a15 --- /dev/null +++ b/files/ja/web/css/transform-function/perspective/index.md @@ -0,0 +1,174 @@ +--- +title: perspective() +slug: Web/CSS/transform-function/perspective +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/perspective() +original_slug: Web/CSS/transform-function/perspective() +browser-compat: css.types.transform-function.perspective +--- +{{CSSRef}} + +**`perspective()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、ユーザーと z=0 平面との間の距離を定義し、閲覧者からの視点は二次元のインターフェイスが三次元であったかのようになります。結果は {{cssxref("<transform-function>")}} データ型になります。 + +{{EmbedInteractiveExample("pages/css/function-perspective.html")}} + +`perspective()` 座標変換関数は {{cssxref('transform')}} 値の一部で、変形される要素に適用されます。これは {{cssxref('perspective')}} および {{cssxref('perspective-origin')}} の各プロパティが三次元空間に座標変換される子の親に付けられるのとは異なります。 + +## 構文 + +`perspective()` で使用する視点距離は、{{cssxref("<length>")}} 値でユーザーと z=0 平面との間の距離を指定するか、または `none` で指定します。 +z=0 平面とは、二次元表示ですべてが見える平面、つまり画面のことです。 +負の値は構文エラーになります。 +`1px` より小さい値 (ゼロを含む) は `1px` になります。 +値が `none` 以外の場合、 z が正の位置にある要素は大きく表示されます。また、z が負の位置にある要素は小さく表示されます。 +z 位置が `perspective` の値と同じか大きい要素は、ユーザーの背後にあるかのようになり、非表示になります。 +`perspective()` が大きいと、変形が小さいことを表します。`perspective()` の値が小さいと、変形が大きいことを表します。`perspective(none)` は無限の距離からの遠近感を表し、変形はありません。 + +```css +perspective(d) +``` + +### 値 + +- _d_ + - : {{cssxref("<length>")}} で、ユーザーと z=0 平面との間の距離を表します。 0 または負の数であった場合は、距離の変換は適用されません。 + + + + + + + + + + + + + + + + + +
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    + この変換は三次元空間に適用され、平面で表現することはできません。 + この変換は ℝ^3 では線形変換ではないので、デカルト座標行列を使用して表現することはできません。 + 1 0 0 0 0 1 0 0 0 0 1 0 0 0 − + 1 + / + d 1 +
    + +

    例

    + +### HTML + +```html +

    Without perspective:

    +
    + 
    A
    + 
    B
    + 
    C
    +
    + +

    With perspective (9cm):

    +
    + 
    A
    + 
    B
    + 
    C
    +
    + +

    With perspective (4cm):

    +
    + 
    A
    + 
    B
    + 
    C
    +
    +``` + +### 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); +} +``` + +### 結果 + +{{ EmbedLiveSample('Examples', '250', '350') }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/rotate()/index.md b/files/ja/web/css/transform-function/rotate()/index.md deleted file mode 100644 index 680dadc756..0000000000 --- a/files/ja/web/css/transform-function/rotate()/index.md +++ /dev/null @@ -1,287 +0,0 @@ ---- -title: rotate() -slug: Web/CSS/transform-function/rotate() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.rotate -translation_of: Web/CSS/transform-function/rotate() ---- -{{CSSRef}} - -**`rotate()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上の特定の点を中心に、形を崩さずに回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 - -要素が回転する中心となる特定の点 — 前述 — は、**変形原点**とも呼ばれます。既定では要素の中央ですが、 {{ cssxref("transform-origin") }} プロパティを使用して独自の変形原点を設定することができます。 - -## 構文 - -`rotate()` で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。180 度で回転したものは*点対称*と呼ばれます。 - -```css -rotate(a) -``` - -### 値 - -- _a_ - - : {{ cssxref("<angle>") }} で、回転する角度を表します。回転方向は書字方向に依存します。 - 左書きの文脈では、正の角度は時計回りの回転を、負の角度は反時計回りの回転を表します。右書きの文脈では 正の角度は反時計回りの回転を、負の角度は時計回りの回転を表します。 - - - - - - - - - - - - - - - - - - - - - -
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    - cos - ( - a - ) - - sin - ( - a - ) - sin - ( - a - ) cos - ( - a - ) - - cos - ( - a - ) - - sin - ( - a - ) 0 sin - ( - a - ) cos - ( - a - ) 0 0 0 1 - - cos - ( - a - ) - - sin - ( - a - ) 0 sin - ( - a - ) cos - ( - a - ) 0 0 0 1 - - cos - ( - a - ) - - sin - ( - a - ) 0 0 sin - ( - a - ) cos - ( - a - ) 0 0 0 0 1 0 0 0 0 1 -
    [cos(a) sin(a) -sin(a) cos(a) 0 0]
    - -## 例 - -

    基本的な例

    - -#### HTML - -```html -
    Normal
    -
    Rotated
    -``` - -#### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.rotated { - transform: rotate(45deg); /* rotateZ(45deg) と等価 */ - background-color: pink; -} -``` - -#### 結果 - -{{EmbedLiveSample("Basic_example", "auto", 180)}} - -

    回転とその他の変形の組み合わせ

    - -複数の変形を要素に適用したい場合は、変形を指定する順序に気を付けてください。例えば、平行移動前に回転すると、平行移動によって回転の軸が変わってしまいます。 - -#### HTML - -```html -
    Normal
    -
    Rotated
    -
    Rotated + Translated
    -
    Translated + Rotated
    -``` - -#### 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); -} -``` - -#### 結果 - -{{EmbedLiveSample("Combining_rotation_with_another_transformation", "auto", 320)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} -- [`rotate3d()`](/ja/docs/Web/CSS/transform-function/rotate3d()) diff --git a/files/ja/web/css/transform-function/rotate/index.md b/files/ja/web/css/transform-function/rotate/index.md new file mode 100644 index 0000000000..0cd44fab47 --- /dev/null +++ b/files/ja/web/css/transform-function/rotate/index.md @@ -0,0 +1,288 @@ +--- +title: rotate() +slug: Web/CSS/transform-function/rotate +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/rotate() +original_slug: Web/CSS/transform-function/rotate() +browser-compat: css.types.transform-function.rotate +--- +{{CSSRef}} + +**`rotate()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上の特定の点を中心に、形を崩さずに回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 + +要素が回転する中心となる特定の点 — 前述 — は、**変形原点**とも呼ばれます。既定では要素の中央ですが、 {{ cssxref("transform-origin") }} プロパティを使用して独自の変形原点を設定することができます。 + +## 構文 + +`rotate()` で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。180 度で回転したものは*点対称*と呼ばれます。 + +```css +rotate(a) +``` + +### 値 + +- _a_ + - : {{ cssxref("<angle>") }} で、回転する角度を表します。回転方向は書字方向に依存します。 + 左書きの文脈では、正の角度は時計回りの回転を、負の角度は反時計回りの回転を表します。右書きの文脈では 正の角度は反時計回りの回転を、負の角度は時計回りの回転を表します。 + + + + + + + + + + + + + + + + + + + + + +
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    + cos + ( + a + ) - + sin + ( + a + ) + sin + ( + a + ) cos + ( + a + ) + + cos + ( + a + ) - + sin + ( + a + ) 0 sin + ( + a + ) cos + ( + a + ) 0 0 0 1 + + cos + ( + a + ) - + sin + ( + a + ) 0 sin + ( + a + ) cos + ( + a + ) 0 0 0 1 + + cos + ( + a + ) - + sin + ( + a + ) 0 0 sin + ( + a + ) cos + ( + a + ) 0 0 0 0 1 0 0 0 0 1 +
    [cos(a) sin(a) -sin(a) cos(a) 0 0]
    + +## 例 + +

    基本的な例

    + +#### HTML + +```html +
    Normal
    +
    Rotated
    +``` + +#### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.rotated { + transform: rotate(45deg); /* rotateZ(45deg) と等価 */ + background-color: pink; +} +``` + +#### 結果 + +{{EmbedLiveSample("Basic_example", "auto", 180)}} + +

    回転とその他の変形の組み合わせ

    + +複数の変形を要素に適用したい場合は、変形を指定する順序に気を付けてください。例えば、平行移動前に回転すると、平行移動によって回転の軸が変わってしまいます。 + +#### HTML + +```html +
    Normal
    +
    Rotated
    +
    Rotated + Translated
    +
    Translated + Rotated
    +``` + +#### 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); +} +``` + +#### 結果 + +{{EmbedLiveSample("Combining_rotation_with_another_transformation", "auto", 320)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} +- [`rotate3d()`](/ja/docs/Web/CSS/transform-function/rotate3d()) diff --git a/files/ja/web/css/transform-function/rotate3d()/index.md b/files/ja/web/css/transform-function/rotate3d()/index.md deleted file mode 100644 index fd781800d0..0000000000 --- a/files/ja/web/css/transform-function/rotate3d()/index.md +++ /dev/null @@ -1,326 +0,0 @@ ---- -title: rotate3d() -slug: Web/CSS/transform-function/rotate3d() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.rotate3d -translation_of: Web/CSS/transform-function/rotate3d() ---- -{{CSSRef}} - -**`rotate3d()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)は、要素を三次元空間内の固定した軸を中心に、形を崩さずに回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 - -{{EmbedInteractiveExample("pages/css/rotate3d.html")}} - -三次元空間では、回転には三次元の自由度があり、これらが一緒になって単一の回転軸を表します。回転軸は \[x, y, z] ベクトルによって定義され、 ({{ cssxref("transform-origin") }} プロパティで定義される) 原点を通過します。もし、指定値として、ベクトルが*正規化*されていない場合 (すなわち、3 つの座標の 2 乗の合計が 1 ではない場合)、{{glossary("user agent", "ユーザーエージェント")}}が内部的に正規化します。正規化できないベクトル、例えば null ベクトル \[0, 0, 0] では、回転が無視されますが、 CSS プロパティ全体を無効化はしません。 - -> **Note:** 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。 - -## 構文 - -`rotate3d()` で行う回転の量は、3 つの {{cssxref("<number>")}} および 1 つの {{cssxref("<angle>")}} で指定します。 `` は回転軸を表すベクトルの X, Y, Z 座標を表します。 `` は回転角を表します。正の数の場合、回転方向は時計回りで、負の数の場合、回転方向は反時計回りになります。 - -```css -rotate3d(x, y, z, a) -``` - -### 値 - -- `x` - - : {{cssxref("<number>")}} で、回転軸を表すベクトルの X 座標を表し、 0 から 1 までの値を取ります。 -- `y` - - : {{cssxref("<number>")}} で、回転軸を表すベクトルの Y 座標を表し、 0 から 1 までの値を取ります。 -- `z` - - : {{cssxref("<number>")}} で、回転軸を表すベクトルの Z 座標を表し、 0 から 1 までの値を取ります。 -- `a` - - : {{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。 - - - - - - - - - - - - - - - - - - - -
    ℝ^2 のデカルト座標 - この変形は三次元空間に適用され、平面で表すことはできません。 -
    ℝℙ^2 の同次座標
    ℝ^3 のデカルト座標 - - 1 - + - ( - 1 - - - cos - ( - a - ) - ) - ( - x - 2 - - 1 - ) z - · - sin - ( - a - ) - + - x - y - ( - 1 - - - cos - ( - a - ) - ) - - y - · - sin - ( - a - ) - + - x - z - · - ( - 1 - - - cos - ( - a - ) - ) - - - z - · - sin - ( - a - ) - + - x - y - · - ( - 1 - - - cos - ( - a - ) - ) 1 - + - ( - 1 - - - cos - ( - a - ) - ) - ( - y2 - - - 1 - ) x - · - sin - ( - a - ) - + - y - z - · - ( - 1 - - - cos - ( - a - ) - ) - y - sin - ( - a - ) - + - xz - ( - 1 - - - cos - ( - a - ) - ) - - x - sin - ( - a - ) - + - yz - ( - 1 - - - cos - ( - a - ) - ) 1 - + - ( - 1 - - - cos - ( - a - ) - ) - ( - z2 - - - 1 - ) t 0 0 0 1 -
    ℝℙ^3 の同次座標 - -
    - -## 例 - -

    Y 軸に沿って回転

    - -#### HTML - -```html -
    Normal
    -
    Rotated
    -``` - -#### CSS - -```css -body { - perspective: 800px; -} - -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.rotated { - transform: rotate3d(0, 1, 0, 60deg); - background-color: pink; -} -``` - -#### 結果 - -{{EmbedLiveSample("Rotating_on_the_y-axis", "auto", 180)}} - -

    独自の軸に沿って回転

    - -#### HTML - -```html -
    Normal
    -
    Rotated
    -``` - -#### CSS - -```css -body { - perspective: 800px; -} - -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.rotated { - transform: rotate3d(1, 2, -1, 192deg); - background-color: pink; -} -``` - -#### 結果 - -{{EmbedLiveSample("Rotating_on_a_custom_axis", "auto", 180)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/rotate3d/index.md b/files/ja/web/css/transform-function/rotate3d/index.md new file mode 100644 index 0000000000..c747c1c27c --- /dev/null +++ b/files/ja/web/css/transform-function/rotate3d/index.md @@ -0,0 +1,327 @@ +--- +title: rotate3d() +slug: Web/CSS/transform-function/rotate3d +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/rotate3d() +original_slug: Web/CSS/transform-function/rotate3d() +browser-compat: css.types.transform-function.rotate3d +--- +{{CSSRef}} + +**`rotate3d()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)は、要素を三次元空間内の固定した軸を中心に、形を崩さずに回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 + +{{EmbedInteractiveExample("pages/css/rotate3d.html")}} + +三次元空間では、回転には三次元の自由度があり、これらが一緒になって単一の回転軸を表します。回転軸は \[x, y, z] ベクトルによって定義され、 ({{ cssxref("transform-origin") }} プロパティで定義される) 原点を通過します。もし、指定値として、ベクトルが*正規化*されていない場合 (すなわち、3 つの座標の 2 乗の合計が 1 ではない場合)、{{glossary("user agent", "ユーザーエージェント")}}が内部的に正規化します。正規化できないベクトル、例えば null ベクトル \[0, 0, 0] では、回転が無視されますが、 CSS プロパティ全体を無効化はしません。 + +> **Note:** 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。 + +## 構文 + +`rotate3d()` で行う回転の量は、3 つの {{cssxref("<number>")}} および 1 つの {{cssxref("<angle>")}} で指定します。 `` は回転軸を表すベクトルの X, Y, Z 座標を表します。 `` は回転角を表します。正の数の場合、回転方向は時計回りで、負の数の場合、回転方向は反時計回りになります。 + +```css +rotate3d(x, y, z, a) +``` + +### 値 + +- `x` + - : {{cssxref("<number>")}} で、回転軸を表すベクトルの X 座標を表し、 0 から 1 までの値を取ります。 +- `y` + - : {{cssxref("<number>")}} で、回転軸を表すベクトルの Y 座標を表し、 0 から 1 までの値を取ります。 +- `z` + - : {{cssxref("<number>")}} で、回転軸を表すベクトルの Z 座標を表し、 0 から 1 までの値を取ります。 +- `a` + - : {{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。 + + + + + + + + + + + + + + + + + + + +
    ℝ^2 のデカルト座標 + この変形は三次元空間に適用され、平面で表すことはできません。 +
    ℝℙ^2 の同次座標
    ℝ^3 のデカルト座標 + + 1 + + + ( + 1 + - + cos + ( + a + ) + ) + ( + x + 2 - + 1 + ) z + · + sin + ( + a + ) + + + x + y + ( + 1 + - + cos + ( + a + ) + ) - + y + · + sin + ( + a + ) + + + x + z + · + ( + 1 + - + cos + ( + a + ) + ) + - + z + · + sin + ( + a + ) + + + x + y + · + ( + 1 + - + cos + ( + a + ) + ) 1 + + + ( + 1 + - + cos + ( + a + ) + ) + ( + y2 + - + 1 + ) x + · + sin + ( + a + ) + + + y + z + · + ( + 1 + - + cos + ( + a + ) + ) + y + sin + ( + a + ) + + + xz + ( + 1 + - + cos + ( + a + ) + ) - + x + sin + ( + a + ) + + + yz + ( + 1 + - + cos + ( + a + ) + ) 1 + + + ( + 1 + - + cos + ( + a + ) + ) + ( + z2 + - + 1 + ) t 0 0 0 1 +
    ℝℙ^3 の同次座標 + +
    + +## 例 + +

    Y 軸に沿って回転

    + +#### HTML + +```html +
    Normal
    +
    Rotated
    +``` + +#### CSS + +```css +body { + perspective: 800px; +} + +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.rotated { + transform: rotate3d(0, 1, 0, 60deg); + background-color: pink; +} +``` + +#### 結果 + +{{EmbedLiveSample("Rotating_on_the_y-axis", "auto", 180)}} + +

    独自の軸に沿って回転

    + +#### HTML + +```html +
    Normal
    +
    Rotated
    +``` + +#### CSS + +```css +body { + perspective: 800px; +} + +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.rotated { + transform: rotate3d(1, 2, -1, 192deg); + background-color: pink; +} +``` + +#### 結果 + +{{EmbedLiveSample("Rotating_on_a_custom_axis", "auto", 180)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/rotatex()/index.md b/files/ja/web/css/transform-function/rotatex()/index.md deleted file mode 100644 index 111f7c1b0f..0000000000 --- a/files/ja/web/css/transform-function/rotatex()/index.md +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: rotateX() -slug: Web/CSS/transform-function/rotateX() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.rotateX -translation_of: Web/CSS/transform-function/rotateX() ---- -{{CSSRef}} - -**`rotateX()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素の形を変化させずに横座標 (水平軸) の周りを回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 - -{{EmbedInteractiveExample("pages/css/function-rotateX.html")}} - -回転軸は、 {{ cssxref("transform-origin") }} CSS プロパティで定義される原点を通ります。 - -> **Note:** `rotateX(a)` は `rotate3d(1, 0, 0, a)` と等価です。 - -> **Note:** 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。 - -## 構文 - -`rotateX()` で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。 - -```css -rotateX(a) -``` - -### 値 - -- `a` - - : {{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。 - - - - - - - - - - - - - - - - - -
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    - この変形は三次元空間に適用され、平面で表すことはできません。 - - 1 0 0 0 cos - ( - a - ) - - sin - ( - a - ) - 0 sin - ( - a - ) cos - ( - a - ) - - 1 0 0 0 0 cos - ( - a - ) - - sin - ( - a - ) 0 0 sin - ( - a - ) cos - ( - a - ) 0 0 0 0 1 -
    - -

    例

    - -### HTML - -```html -
    Normal
    -
    Rotated
    -``` - -### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.rotated { - transform: rotateX(45deg); - background-color: pink; -} -``` - -### 結果 - -{{EmbedLiveSample("Examples", "auto", 180)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/rotatex/index.md b/files/ja/web/css/transform-function/rotatex/index.md new file mode 100644 index 0000000000..ae003dd8d1 --- /dev/null +++ b/files/ja/web/css/transform-function/rotatex/index.md @@ -0,0 +1,177 @@ +--- +title: rotateX() +slug: Web/CSS/transform-function/rotateX +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/rotateX() +original_slug: Web/CSS/transform-function/rotateX() +browser-compat: css.types.transform-function.rotateX +--- +{{CSSRef}} + +**`rotateX()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素の形を変化させずに横座標 (水平軸) の周りを回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 + +{{EmbedInteractiveExample("pages/css/function-rotateX.html")}} + +回転軸は、 {{ cssxref("transform-origin") }} CSS プロパティで定義される原点を通ります。 + +> **Note:** `rotateX(a)` は `rotate3d(1, 0, 0, a)` と等価です。 + +> **Note:** 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。 + +## 構文 + +`rotateX()` で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。 + +```css +rotateX(a) +``` + +### 値 + +- `a` + - : {{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。 + + + + + + + + + + + + + + + + + +
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    + この変形は三次元空間に適用され、平面で表すことはできません。 + + 1 0 0 0 cos + ( + a + ) - + sin + ( + a + ) + 0 sin + ( + a + ) cos + ( + a + ) + + 1 0 0 0 0 cos + ( + a + ) - + sin + ( + a + ) 0 0 sin + ( + a + ) cos + ( + a + ) 0 0 0 0 1 +
    + +

    例

    + +### HTML + +```html +
    Normal
    +
    Rotated
    +``` + +### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.rotated { + transform: rotateX(45deg); + background-color: pink; +} +``` + +### 結果 + +{{EmbedLiveSample("Examples", "auto", 180)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/rotatey()/index.md b/files/ja/web/css/transform-function/rotatey()/index.md deleted file mode 100644 index 4ca3842ff6..0000000000 --- a/files/ja/web/css/transform-function/rotatey()/index.md +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: rotateY() -slug: Web/CSS/transform-function/rotateY() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.rotateY -translation_of: Web/CSS/transform-function/rotateY() ---- -{{CSSRef}} - -**`rotateY()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素の形を変化させずに縦座標 (垂直軸) の周りを回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 - -{{EmbedInteractiveExample("pages/css/function-rotateY.html")}} - -回転軸は、 {{ cssxref("transform-origin") }} CSS プロパティで定義される原点を通ります。 - -> **Note:** `rotateY(a)` は `rotate3d(0, 1, 0, a)` と等価です。 - -> **Note:** 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。 - -## 構文 - -`rotateY()` で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。 - -```css -rotateY(a) -``` - -### 値 - -- `a` - - : {{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。 - - - - - - - - - - - - - - - - - -
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    - この変形は三次元空間に適用され、平面で表すことはできません。 - - cos - ( - a - ) 0 sin - ( - a - ) - 0 1 0 - - sin - ( - a - ) 0 cos - ( - a - ) - - cos - ( - a - ) 0 sin - ( - a - ) 0 0 1 0 0 - - sin - ( - a - ) 0 cos - ( - a - ) 0 0 0 0 1 -
    - -

    例

    - -### HTML - -```html -
    Normal
    -
    Rotated
    -``` - -### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.rotated { - transform: rotateY(60deg); - background-color: pink; -} -``` - -### 結果 - -{{EmbedLiveSample("Examples", "auto", 180)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/rotatey/index.md b/files/ja/web/css/transform-function/rotatey/index.md new file mode 100644 index 0000000000..a039fe60a4 --- /dev/null +++ b/files/ja/web/css/transform-function/rotatey/index.md @@ -0,0 +1,177 @@ +--- +title: rotateY() +slug: Web/CSS/transform-function/rotateY +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/rotateY() +original_slug: Web/CSS/transform-function/rotateY() +browser-compat: css.types.transform-function.rotateY +--- +{{CSSRef}} + +**`rotateY()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素の形を変化させずに縦座標 (垂直軸) の周りを回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 + +{{EmbedInteractiveExample("pages/css/function-rotateY.html")}} + +回転軸は、 {{ cssxref("transform-origin") }} CSS プロパティで定義される原点を通ります。 + +> **Note:** `rotateY(a)` は `rotate3d(0, 1, 0, a)` と等価です。 + +> **Note:** 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。 + +## 構文 + +`rotateY()` で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。 + +```css +rotateY(a) +``` + +### 値 + +- `a` + - : {{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。 + + + + + + + + + + + + + + + + + +
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    + この変形は三次元空間に適用され、平面で表すことはできません。 + + cos + ( + a + ) 0 sin + ( + a + ) + 0 1 0 - + sin + ( + a + ) 0 cos + ( + a + ) + + cos + ( + a + ) 0 sin + ( + a + ) 0 0 1 0 0 - + sin + ( + a + ) 0 cos + ( + a + ) 0 0 0 0 1 +
    + +

    例

    + +### HTML + +```html +
    Normal
    +
    Rotated
    +``` + +### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.rotated { + transform: rotateY(60deg); + background-color: pink; +} +``` + +### 結果 + +{{EmbedLiveSample("Examples", "auto", 180)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/rotatez()/index.md b/files/ja/web/css/transform-function/rotatez()/index.md deleted file mode 100644 index e6bc6dffae..0000000000 --- a/files/ja/web/css/transform-function/rotatez()/index.md +++ /dev/null @@ -1,172 +0,0 @@ ---- -title: rotateZ() -slug: Web/CSS/transform-function/rotateZ() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.rotateZ -translation_of: Web/CSS/transform-function/rotateZ() ---- -{{CSSRef}} - -**`rotateZ()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素の形を変化させずに Z 軸の周りを回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 - -{{EmbedInteractiveExample("pages/css/function-rotateZ.html")}} - -回転軸は、 {{ cssxref("transform-origin") }} CSS プロパティで定義される原点を通ります。 - -> **Note:** `rotate(a)` または `rotate3d(0, 0, 1, a)` と等価です。 - -> **Note:** 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。 - -## 構文 - -`rotateZ()` で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。 - -```css -rotateZ(a) -``` - -### 値 - -- `a` - - : {{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。 - - - - - - - - - - - - - - - - - -
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    - この変形は三次元空間に適用され、平面で表すことはできません。 - - cos - ( - a - ) - - sin - ( - a - ) 0 sin - ( - a - ) cos - ( - a - ) 0 0 0 1 - - cos - ( - a - ) - - sin - ( - a - ) 0 0 sin - ( - a - ) cos - ( - a - ) 0 0 0 0 1 0 0 0 0 1 -
    - -

    例

    - -### HTML - -```html -
    Normal
    -
    Rotated
    -``` - -### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.rotated { - transform: rotateZ(45deg); - background-color: pink; -} -``` - -### 結果 - -{{EmbedLiveSample("Examples", "auto", 180)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/rotatez/index.md b/files/ja/web/css/transform-function/rotatez/index.md new file mode 100644 index 0000000000..04b880f9d2 --- /dev/null +++ b/files/ja/web/css/transform-function/rotatez/index.md @@ -0,0 +1,173 @@ +--- +title: rotateZ() +slug: Web/CSS/transform-function/rotateZ +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/rotateZ() +original_slug: Web/CSS/transform-function/rotateZ() +browser-compat: css.types.transform-function.rotateZ +--- +{{CSSRef}} + +**`rotateZ()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素の形を変化させずに Z 軸の周りを回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 + +{{EmbedInteractiveExample("pages/css/function-rotateZ.html")}} + +回転軸は、 {{ cssxref("transform-origin") }} CSS プロパティで定義される原点を通ります。 + +> **Note:** `rotate(a)` または `rotate3d(0, 0, 1, a)` と等価です。 + +> **Note:** 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。 + +## 構文 + +`rotateZ()` で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。 + +```css +rotateZ(a) +``` + +### 値 + +- `a` + - : {{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。 + + + + + + + + + + + + + + + + + +
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    + この変形は三次元空間に適用され、平面で表すことはできません。 + + cos + ( + a + ) - + sin + ( + a + ) 0 sin + ( + a + ) cos + ( + a + ) 0 0 0 1 + + cos + ( + a + ) - + sin + ( + a + ) 0 0 sin + ( + a + ) cos + ( + a + ) 0 0 0 0 1 0 0 0 0 1 +
    + +

    例

    + +### HTML + +```html +
    Normal
    +
    Rotated
    +``` + +### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.rotated { + transform: rotateZ(45deg); + background-color: pink; +} +``` + +### 結果 + +{{EmbedLiveSample("Examples", "auto", 180)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/scale()/index.md b/files/ja/web/css/transform-function/scale()/index.md deleted file mode 100644 index f81c5606b2..0000000000 --- a/files/ja/web/css/transform-function/scale()/index.md +++ /dev/null @@ -1,212 +0,0 @@ ---- -title: scale() -slug: Web/CSS/transform-function/scale() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.scale -translation_of: Web/CSS/transform-function/scale() ---- -{{CSSRef}} - -**`scale()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、二次元平面上における拡縮する変形を定義します。変倍の量がベクトルで定義されるため、水平方向と垂直方向に対して異なる変倍で大きさを変えることができます。結果は {{cssxref("<transform-function>")}} データ型になります。 - -![](scale.png) - -この変倍変形は、二次元のベクトルであることが特徴です。この座標は、それぞれの方向にどれだけ変倍を行うかを定義します。両方の座標が等しい場合、変倍は一様 (_等方的_) で、要素の形が保たれます (これは[相似変換](https://ja.wikipedia.org/wiki/%E8%A1%8C%E5%88%97%E3%81%AE%E7%9B%B8%E4%BC%BC)です)。 - -座標の値が \[-1, 1] の範囲外の場合、変倍は、その座標の方向に要素を拡大します。この範囲内の場合、変倍は、要素をその座標の方向に縮小します。負の場合、変倍は [点対称化](https://ja.wikipedia.org/wiki/点対称) と大きさの変更を行います。1 と等しい場合、変倍は何もしません。 - -> **Note:** `scale()` 関数は、二次元の変換のみに適用されます。三次元空間内での変倍を行うには、 [`scale3d()`]() 関数を使用してください。 - -## 構文 - -`scale()` 関数は、1 つまたは 2 つの値で指定され、それにより各方向に適用される変倍が表現されます。 - -```css -scale(sx) - -scale(sx, sy) -``` - -### 値 - -- `sx` - - : 変倍ベクトルの横座標を表す {{cssxref("<number>")}}。 -- `sy` - - : 変倍ベクトルの縦座標を表す {{cssxref("<number>")}}。定義されない場合、これの既定値は `sx` であり、要素の形を保つ一様な変倍となります。 - - - - - - - - - - - - - - - - - - - - - -
    ℝ^2 上のデカルト座標ℝℙ^2 上の同次座標ℝ^3 上のデカルト座標ℝℙ^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]
    - -## アクセシビリティの考慮 - -拡大や縮小のアニメーションは、特定の種類の偏頭痛を引き起こす原因になりやすいので、アクセシビリティの問題になることがあります。ウェブサイトにこのようなアニメーションを含める必要がある場合は、できればサイト全体で、ユーザーがアニメーションを止める制御ができるようしてください。 - -また、 {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} メディア特性を使用することを検討してください。これを使用して[メディアクエリー](/ja/docs/Web/CSS/Media_queries)を書けば、ユーザーがシステムの設定でアニメーションを減らすよう指定した場合にアニメーションを止めることができます。 - -詳しくは以下の文書を参照してください。 - -- [MDN WCAG の理解、ガイドライン 2.3 の解説](/ja/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) -- [Understanding Success Criterion 2.3.3 | W3C Understanding WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions) - -## 例 - -

    X と Y の大きさを一緒に変倍する

    - -#### HTML - -```html -
    Normal
    -
    Scaled
    -``` - -#### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.scaled { - transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */ - background-color: pink; -} -``` - -#### 結果 - -{{EmbedLiveSample("Scaling_the_X_and_Y_dimensions_together", "200", "200")}} - -

    X と Y の大きさを別々に変倍し、原点を平行移動させる

    - -#### HTML - -```html -
    Normal
    -
    Scaled
    -``` - -#### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.scaled { - transform: scale(2, 0.5); /* Equal to scaleX(2) scaleY(0.5) */ - transform-origin: left; - background-color: pink; -} -``` - -#### 結果 - -{{EmbedLiveSample("Scaling_X_and_Y_dimensions_separately_and_translating_the_origin", "200", "200")}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} -- {{cssxref("transform-function/scale3d()", "scale3d()")}} diff --git a/files/ja/web/css/transform-function/scale/index.md b/files/ja/web/css/transform-function/scale/index.md new file mode 100644 index 0000000000..ce639a20d1 --- /dev/null +++ b/files/ja/web/css/transform-function/scale/index.md @@ -0,0 +1,213 @@ +--- +title: scale() +slug: Web/CSS/transform-function/scale +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/scale() +original_slug: Web/CSS/transform-function/scale() +browser-compat: css.types.transform-function.scale +--- +{{CSSRef}} + +**`scale()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、二次元平面上における拡縮する変形を定義します。変倍の量がベクトルで定義されるため、水平方向と垂直方向に対して異なる変倍で大きさを変えることができます。結果は {{cssxref("<transform-function>")}} データ型になります。 + +![](scale.png) + +この変倍変形は、二次元のベクトルであることが特徴です。この座標は、それぞれの方向にどれだけ変倍を行うかを定義します。両方の座標が等しい場合、変倍は一様 (_等方的_) で、要素の形が保たれます (これは[相似変換](https://ja.wikipedia.org/wiki/%E8%A1%8C%E5%88%97%E3%81%AE%E7%9B%B8%E4%BC%BC)です)。 + +座標の値が \[-1, 1] の範囲外の場合、変倍は、その座標の方向に要素を拡大します。この範囲内の場合、変倍は、要素をその座標の方向に縮小します。負の場合、変倍は [点対称化](https://ja.wikipedia.org/wiki/点対称) と大きさの変更を行います。1 と等しい場合、変倍は何もしません。 + +> **Note:** `scale()` 関数は、二次元の変換のみに適用されます。三次元空間内での変倍を行うには、 [`scale3d()`]() 関数を使用してください。 + +## 構文 + +`scale()` 関数は、1 つまたは 2 つの値で指定され、それにより各方向に適用される変倍が表現されます。 + +```css +scale(sx) + +scale(sx, sy) +``` + +### 値 + +- `sx` + - : 変倍ベクトルの横座標を表す {{cssxref("<number>")}}。 +- `sy` + - : 変倍ベクトルの縦座標を表す {{cssxref("<number>")}}。定義されない場合、これの既定値は `sx` であり、要素の形を保つ一様な変倍となります。 + + + + + + + + + + + + + + + + + + + + + +
    ℝ^2 上のデカルト座標ℝℙ^2 上の同次座標ℝ^3 上のデカルト座標ℝℙ^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]
    + +## アクセシビリティの考慮 + +拡大や縮小のアニメーションは、特定の種類の偏頭痛を引き起こす原因になりやすいので、アクセシビリティの問題になることがあります。ウェブサイトにこのようなアニメーションを含める必要がある場合は、できればサイト全体で、ユーザーがアニメーションを止める制御ができるようしてください。 + +また、 {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} メディア特性を使用することを検討してください。これを使用して[メディアクエリー](/ja/docs/Web/CSS/Media_queries)を書けば、ユーザーがシステムの設定でアニメーションを減らすよう指定した場合にアニメーションを止めることができます。 + +詳しくは以下の文書を参照してください。 + +- [MDN WCAG の理解、ガイドライン 2.3 の解説](/ja/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) +- [Understanding Success Criterion 2.3.3 | W3C Understanding WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions) + +## 例 + +

    X と Y の大きさを一緒に変倍する

    + +#### HTML + +```html +
    Normal
    +
    Scaled
    +``` + +#### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.scaled { + transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */ + background-color: pink; +} +``` + +#### 結果 + +{{EmbedLiveSample("Scaling_the_X_and_Y_dimensions_together", "200", "200")}} + +

    X と Y の大きさを別々に変倍し、原点を平行移動させる

    + +#### HTML + +```html +
    Normal
    +
    Scaled
    +``` + +#### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.scaled { + transform: scale(2, 0.5); /* Equal to scaleX(2) scaleY(0.5) */ + transform-origin: left; + background-color: pink; +} +``` + +#### 結果 + +{{EmbedLiveSample("Scaling_X_and_Y_dimensions_separately_and_translating_the_origin", "200", "200")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} +- {{cssxref("transform-function/scale3d()", "scale3d()")}} diff --git a/files/ja/web/css/transform-function/scale3d()/index.md b/files/ja/web/css/transform-function/scale3d()/index.md deleted file mode 100644 index 8a8bec6701..0000000000 --- a/files/ja/web/css/transform-function/scale3d()/index.md +++ /dev/null @@ -1,171 +0,0 @@ ---- -title: scale3d() -slug: Web/CSS/transform-function/scale3d() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.scale3d -translation_of: Web/CSS/transform-function/scale3d() ---- -{{CSSRef}} - -**`scale3d()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、三次元空間において要素を変倍する変形を定義します。 -変倍量はベクトルで定義されるため、それぞれの次元ごとに異なる倍率で変倍することができます。結果は {{cssxref("<transform-function>")}} データ型になります。 - -{{EmbedInteractiveExample("pages/css/function-scale3d.html")}} - -この変倍変形は、三次元ののベクトルであることが特徴です。この座標は、それぞれの方向にどれだけ変倍を行うかを定義します。3 つすべての座標が等しい場合、変倍は一様 (_等方的_) で、要素の形が保たれます (これは[相似変換](https://ja.wikipedia.org/wiki/%E8%A1%8C%E5%88%97%E3%81%AE%E7%9B%B8%E4%BC%BC)です)。 - -座標の値が \[-1, 1] の範囲外の場合、変倍は、その座標の方向に要素を拡大します。この範囲内の場合、変倍は、要素をその座標の方向に縮小します。負の場合、変倍は [点対称化](https://ja.wikipedia.org/wiki/点対称) と大きさの変更を行います。1 と等しい場合、変倍は何もしません。 - -## 構文 - -`scale3d()` 関数は 3 つの値で指定され、それぞれの値はそれぞれの方向に適用される変倍率を表します。 - -```css -scale3d(sx, sy, sz) -``` - -### 値 - -- `sx` - - : {{cssxref("<number>")}} で、変倍ベクトルの横軸を表します。 -- `sy` - - : {{cssxref("<number>")}} で、変倍ベクトルの縦軸を表します。 -- `sz` - - : {{cssxref("<number>")}} で、変倍ベクトルの Z 成分を表します。 - - - - - - - - - - - - - - - - - -
    ℝ^2 上のデカルト座標ℝℙ^2 上の同次座標ℝ^3 上のデカルト座標ℝℙ^3 上の同次座標
    - この変形は三次元空間に適用され、平面で表すことはできません。 - - sx 0 0 0 sy 0 0 0 sz - - sx 0 0 0 0 sy 0 0 0 0 sz 0 0 0 0 1 -
    - -## 例 - -

    原点の変更なし

    - -#### HTML - -```html -
    Normal
    -
    Scaled
    -``` - -#### 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; -} -``` - -#### 結果 - -{{EmbedLiveSample("Without_changing_the_origin","200","200")}} - -

    変形の原点を移動

    - -#### HTML - -```html -
    Normal
    -
    Scaled
    -``` - -#### 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; -} -``` - -#### 結果 - -{{EmbedLiveSample("Translating_the_origin_of_the_transformation","200","200")}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} -- [`scaleZ()`](/ja/docs/Web/CSS/transform-function/scaleZ()) -- [`translate3d()`](/ja/docs/Web/CSS/transform-function/translate3d()) -- [`rotate3d()`](/ja/docs/Web/CSS/transform-function/rotate3d()) diff --git a/files/ja/web/css/transform-function/scale3d/index.md b/files/ja/web/css/transform-function/scale3d/index.md new file mode 100644 index 0000000000..38937f183f --- /dev/null +++ b/files/ja/web/css/transform-function/scale3d/index.md @@ -0,0 +1,172 @@ +--- +title: scale3d() +slug: Web/CSS/transform-function/scale3d +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/scale3d() +original_slug: Web/CSS/transform-function/scale3d() +browser-compat: css.types.transform-function.scale3d +--- +{{CSSRef}} + +**`scale3d()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、三次元空間において要素を変倍する変形を定義します。 +変倍量はベクトルで定義されるため、それぞれの次元ごとに異なる倍率で変倍することができます。結果は {{cssxref("<transform-function>")}} データ型になります。 + +{{EmbedInteractiveExample("pages/css/function-scale3d.html")}} + +この変倍変形は、三次元ののベクトルであることが特徴です。この座標は、それぞれの方向にどれだけ変倍を行うかを定義します。3 つすべての座標が等しい場合、変倍は一様 (_等方的_) で、要素の形が保たれます (これは[相似変換](https://ja.wikipedia.org/wiki/%E8%A1%8C%E5%88%97%E3%81%AE%E7%9B%B8%E4%BC%BC)です)。 + +座標の値が \[-1, 1] の範囲外の場合、変倍は、その座標の方向に要素を拡大します。この範囲内の場合、変倍は、要素をその座標の方向に縮小します。負の場合、変倍は [点対称化](https://ja.wikipedia.org/wiki/点対称) と大きさの変更を行います。1 と等しい場合、変倍は何もしません。 + +## 構文 + +`scale3d()` 関数は 3 つの値で指定され、それぞれの値はそれぞれの方向に適用される変倍率を表します。 + +```css +scale3d(sx, sy, sz) +``` + +### 値 + +- `sx` + - : {{cssxref("<number>")}} で、変倍ベクトルの横軸を表します。 +- `sy` + - : {{cssxref("<number>")}} で、変倍ベクトルの縦軸を表します。 +- `sz` + - : {{cssxref("<number>")}} で、変倍ベクトルの Z 成分を表します。 + + + + + + + + + + + + + + + + + +
    ℝ^2 上のデカルト座標ℝℙ^2 上の同次座標ℝ^3 上のデカルト座標ℝℙ^3 上の同次座標
    + この変形は三次元空間に適用され、平面で表すことはできません。 + + sx 0 0 0 sy 0 0 0 sz + + sx 0 0 0 0 sy 0 0 0 0 sz 0 0 0 0 1 +
    + +## 例 + +

    原点の変更なし

    + +#### HTML + +```html +
    Normal
    +
    Scaled
    +``` + +#### 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; +} +``` + +#### 結果 + +{{EmbedLiveSample("Without_changing_the_origin","200","200")}} + +

    変形の原点を移動

    + +#### HTML + +```html +
    Normal
    +
    Scaled
    +``` + +#### 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; +} +``` + +#### 結果 + +{{EmbedLiveSample("Translating_the_origin_of_the_transformation","200","200")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} +- [`scaleZ()`](/ja/docs/Web/CSS/transform-function/scaleZ()) +- [`translate3d()`](/ja/docs/Web/CSS/transform-function/translate3d()) +- [`rotate3d()`](/ja/docs/Web/CSS/transform-function/rotate3d()) diff --git a/files/ja/web/css/transform-function/scalex()/index.md b/files/ja/web/css/transform-function/scalex()/index.md deleted file mode 100644 index 231094820a..0000000000 --- a/files/ja/web/css/transform-function/scalex()/index.md +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: scaleX() -slug: Web/CSS/transform-function/scaleX() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.scaleX -translation_of: Web/CSS/transform-function/scaleX() ---- -{{CSSRef}} - -**`scaleX()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を X 軸に沿って (水平に) 変倍する変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 - -![](scalex.png) - -これは要素のそれぞれの点の横座標を一定の係数で修正しますが、係数が 1 である場合はこの関数が恒等変換になるので例外です。変倍は等方性ではなく、要素の角度は保存されません。 `scaleX(-1)` は[軸の線対称](https://en.wikipedia.org/wiki/Axial_symmetry)を定義し、垂直軸は ({{cssxref("transform-origin")}} プロパティの指定通りに) 原点を通過します。 - -> **Note:** `scaleX(sx)` は `scale(sx, 1)` または `scale3d(sx, 1, 1)` と等価です。 - -## 構文 - -```css -scaleX(s) -``` - -### 値 - -- `s` - - : {{cssxref("<number>")}} で、要素のそれぞれの点の横座標に適用される変倍率を表します。 - - - - - - - - - - - - - - - - - - - - - -
    ℝ^2 上のデカルト座標ℝℙ^2 上の同次座標ℝ^3 上のデカルト座標ℝℙ^3 上の同次座標
    - s 0 0 1 - - s 0 0 0 1 0 0 0 1 - - s 0 0 0 1 0 0 0 1 - - s 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 -
    [s 0 0 1 0 0]
    - -

    例

    - -### HTML - -```html -
    Normal
    -
    Scaled
    -``` - -### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.scaled { - transform: scaleX(0.6); - background-color: pink; -} -``` - -### 結果 - -{{EmbedLiveSample("Examples","200","200")}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- [`scaleY()`]() -- [`scaleZ()`]() -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} -- {{cssxref("transform-origin")}} diff --git a/files/ja/web/css/transform-function/scalex/index.md b/files/ja/web/css/transform-function/scalex/index.md new file mode 100644 index 0000000000..c1652028ce --- /dev/null +++ b/files/ja/web/css/transform-function/scalex/index.md @@ -0,0 +1,165 @@ +--- +title: scaleX() +slug: Web/CSS/transform-function/scaleX +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/scaleX() +original_slug: Web/CSS/transform-function/scaleX() +browser-compat: css.types.transform-function.scaleX +--- +{{CSSRef}} + +**`scaleX()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を X 軸に沿って (水平に) 変倍する変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 + +![](scalex.png) + +これは要素のそれぞれの点の横座標を一定の係数で修正しますが、係数が 1 である場合はこの関数が恒等変換になるので例外です。変倍は等方性ではなく、要素の角度は保存されません。 `scaleX(-1)` は[軸の線対称](https://en.wikipedia.org/wiki/Axial_symmetry)を定義し、垂直軸は ({{cssxref("transform-origin")}} プロパティの指定通りに) 原点を通過します。 + +> **Note:** `scaleX(sx)` は `scale(sx, 1)` または `scale3d(sx, 1, 1)` と等価です。 + +## 構文 + +```css +scaleX(s) +``` + +### 値 + +- `s` + - : {{cssxref("<number>")}} で、要素のそれぞれの点の横座標に適用される変倍率を表します。 + + + + + + + + + + + + + + + + + + + + + +
    ℝ^2 上のデカルト座標ℝℙ^2 上の同次座標ℝ^3 上のデカルト座標ℝℙ^3 上の同次座標
    + s 0 0 1 + + s 0 0 0 1 0 0 0 1 + + s 0 0 0 1 0 0 0 1 + + s 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 +
    [s 0 0 1 0 0]
    + +

    例

    + +### HTML + +```html +
    Normal
    +
    Scaled
    +``` + +### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.scaled { + transform: scaleX(0.6); + background-color: pink; +} +``` + +### 結果 + +{{EmbedLiveSample("Examples","200","200")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [`scaleY()`]() +- [`scaleZ()`]() +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} +- {{cssxref("transform-origin")}} diff --git a/files/ja/web/css/transform-function/scaley()/index.md b/files/ja/web/css/transform-function/scaley()/index.md deleted file mode 100644 index 14ffbff444..0000000000 --- a/files/ja/web/css/transform-function/scaley()/index.md +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: scaleY() -slug: Web/CSS/transform-function/scaleY() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.scaleY -translation_of: Web/CSS/transform-function/scaleY() ---- -{{CSSRef}} - -**`scaleY()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を Y 軸に沿って (垂直に) 変倍する変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 - -![](scaley.png) - -これは要素のそれぞれの点の横座標を一定の係数で修正しますが、係数が 1 である場合はこの関数が恒等変換になるので例外です。変倍は等方性ではなく、要素の角度は保存されません。 `scaleY(-1)` は[軸の線対称](https://en.wikipedia.org/wiki/Axial_symmetry)を定義し、水平軸は ({{cssxref("transform-origin")}} プロパティの指定通りに) 原点を通過します。 - -> **Note:** `scaleY(sy)` は `scale(1, sy)` または `scale3d(1, sy, 1)` と等価です。 -> -> `transform: rotateX(180deg);`  === `transform: scaleY(-1);` - -## 構文 - -```css -scaleY(s) -``` - -### 値 - -- `s` - - : {{cssxref("<number>")}} で、要素のそれぞれの点の縦座標に適用する変倍係数を表します。 - - - - - - - - - - - - - - - - - - - - - -
    ℝ^2 上のデカルト座標ℝℙ^2 上の同次座標ℝ^3 上のデカルト座標ℝℙ^3 上の同次座標
    - 1 0 0 s - - 1 0 0 0 s 0 0 0 1 - - 1 0 0 0 s 0 0 0 1 - - 1 0 0 0 0 s 0 0 0 0 1 0 0 0 0 1 -
    [1 0 0 s 0 0]
    - -

    例

    - -### HTML - -```html -
    Normal
    -
    Scaled
    -``` - -### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.scaled { - transform: scaleY(0.6); - background-color: pink; -} -``` - -### 結果 - -{{EmbedLiveSample("Examples", 200, 200)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- [`scaleX()`]() -- [`scaleZ()`]() -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} -- {{cssxref("transform-origin")}} diff --git a/files/ja/web/css/transform-function/scaley/index.md b/files/ja/web/css/transform-function/scaley/index.md new file mode 100644 index 0000000000..6228d6b18e --- /dev/null +++ b/files/ja/web/css/transform-function/scaley/index.md @@ -0,0 +1,167 @@ +--- +title: scaleY() +slug: Web/CSS/transform-function/scaleY +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/scaleY() +original_slug: Web/CSS/transform-function/scaleY() +browser-compat: css.types.transform-function.scaleY +--- +{{CSSRef}} + +**`scaleY()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を Y 軸に沿って (垂直に) 変倍する変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 + +![](scaley.png) + +これは要素のそれぞれの点の横座標を一定の係数で修正しますが、係数が 1 である場合はこの関数が恒等変換になるので例外です。変倍は等方性ではなく、要素の角度は保存されません。 `scaleY(-1)` は[軸の線対称](https://en.wikipedia.org/wiki/Axial_symmetry)を定義し、水平軸は ({{cssxref("transform-origin")}} プロパティの指定通りに) 原点を通過します。 + +> **Note:** `scaleY(sy)` は `scale(1, sy)` または `scale3d(1, sy, 1)` と等価です。 +> +> `transform: rotateX(180deg);`  === `transform: scaleY(-1);` + +## 構文 + +```css +scaleY(s) +``` + +### 値 + +- `s` + - : {{cssxref("<number>")}} で、要素のそれぞれの点の縦座標に適用する変倍係数を表します。 + + + + + + + + + + + + + + + + + + + + + +
    ℝ^2 上のデカルト座標ℝℙ^2 上の同次座標ℝ^3 上のデカルト座標ℝℙ^3 上の同次座標
    + 1 0 0 s + + 1 0 0 0 s 0 0 0 1 + + 1 0 0 0 s 0 0 0 1 + + 1 0 0 0 0 s 0 0 0 0 1 0 0 0 0 1 +
    [1 0 0 s 0 0]
    + +

    例

    + +### HTML + +```html +
    Normal
    +
    Scaled
    +``` + +### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.scaled { + transform: scaleY(0.6); + background-color: pink; +} +``` + +### 結果 + +{{EmbedLiveSample("Examples", 200, 200)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [`scaleX()`]() +- [`scaleZ()`]() +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} +- {{cssxref("transform-origin")}} diff --git a/files/ja/web/css/transform-function/scalez()/index.md b/files/ja/web/css/transform-function/scalez()/index.md deleted file mode 100644 index ed78c98b18..0000000000 --- a/files/ja/web/css/transform-function/scalez()/index.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: scaleZ() -slug: Web/CSS/transform-function/scaleZ() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.scaleZ ---- -{{CSSRef}} - -**`scaleZ()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を Z 軸に沿って変倍する変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 - -{{EmbedInteractiveExample("pages/css/function-scaleZ.html")}} - -これは要素のそれぞれの点の Z 座標を一定の係数で修正しますが、係数が 1 である場合はこの関数が恒等変換になるので例外です。変倍は等方性ではなく、要素の角度は保存されません。 `scaleZ(-1)` は[軸の線対称](https://en.wikipedia.org/wiki/Axial_symmetry)を定義し、Z 軸は ({{cssxref("transform-origin")}} プロパティの指定通りに) 原点を通過します。 - -上記のデモでは、[`perspective: 550px;`](/ja/docs/Web/CSS/perspective) (三次元空間を作るため) と [`transform-style: preserve-3d;`](/ja/docs/Web/CSS/transform-style) (立方体の 6 つの面である子を三次元空間に配置) を立方体に設定しました。 - -> **Note:** `scaleZ(sz)` は `scale3d(1, 1, sz)` と等価です。 - -## 構文 - -```css -scaleZ(s) -``` - -### 値 - -- `s` - - : {{cssxref("<number>")}} で、要素のそれぞれの点の Z 座標に適用される変倍率を表します。 - - - - - - - - - - - - - - - - - -
    ℝ^2 上のデカルト座標ℝℙ^2 上の同次座標ℝ^3 上のデカルト座標ℝℙ^3 上の同次座標
    - この変形は三次元空間に適用され、平面で表すことはできません。 - - 1 0 0 0 1 0 0 0 s - - 1 0 0 0 0 1 0 0 0 0 s 0 0 0 0 1 -
    - -

    例

    - -### HTML - -```html -
    Normal
    -
    Translated
    -
    Scaled
    -``` - -### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.perspective { - /* 三次元空間を生成するために視点を含める */ - transform: perspective(400px) translateZ(-100px); - background-color: limegreen; -} - -.scaled-translated { - /* 三次元空間を生成するために視点を含める */ - transform: perspective(400px) scaleZ(2) translateZ(-100px); - background-color: pink; -} -``` - -### 結果 - -{{EmbedLiveSample("Examples", 200, 300)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- [`scaleX()`](/ja/docs/Web/CSS/transform-function/scaleX()) -- [`scaleY()`](/ja/docs/Web/CSS/transform-function/scaleY()) -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} -- {{cssxref("transform-origin")}} diff --git a/files/ja/web/css/transform-function/scalez/index.md b/files/ja/web/css/transform-function/scalez/index.md new file mode 100644 index 0000000000..b81aa36b4f --- /dev/null +++ b/files/ja/web/css/transform-function/scalez/index.md @@ -0,0 +1,143 @@ +--- +title: scaleZ() +slug: Web/CSS/transform-function/scaleZ +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +original_slug: Web/CSS/transform-function/scaleZ() +browser-compat: css.types.transform-function.scaleZ +--- +{{CSSRef}} + +**`scaleZ()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を Z 軸に沿って変倍する変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 + +{{EmbedInteractiveExample("pages/css/function-scaleZ.html")}} + +これは要素のそれぞれの点の Z 座標を一定の係数で修正しますが、係数が 1 である場合はこの関数が恒等変換になるので例外です。変倍は等方性ではなく、要素の角度は保存されません。 `scaleZ(-1)` は[軸の線対称](https://en.wikipedia.org/wiki/Axial_symmetry)を定義し、Z 軸は ({{cssxref("transform-origin")}} プロパティの指定通りに) 原点を通過します。 + +上記のデモでは、[`perspective: 550px;`](/ja/docs/Web/CSS/perspective) (三次元空間を作るため) と [`transform-style: preserve-3d;`](/ja/docs/Web/CSS/transform-style) (立方体の 6 つの面である子を三次元空間に配置) を立方体に設定しました。 + +> **Note:** `scaleZ(sz)` は `scale3d(1, 1, sz)` と等価です。 + +## 構文 + +```css +scaleZ(s) +``` + +### 値 + +- `s` + - : {{cssxref("<number>")}} で、要素のそれぞれの点の Z 座標に適用される変倍率を表します。 + + + + + + + + + + + + + + + + + +
    ℝ^2 上のデカルト座標ℝℙ^2 上の同次座標ℝ^3 上のデカルト座標ℝℙ^3 上の同次座標
    + この変形は三次元空間に適用され、平面で表すことはできません。 + + 1 0 0 0 1 0 0 0 s + + 1 0 0 0 0 1 0 0 0 0 s 0 0 0 0 1 +
    + +

    例

    + +### HTML + +```html +
    Normal
    +
    Translated
    +
    Scaled
    +``` + +### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.perspective { + /* 三次元空間を生成するために視点を含める */ + transform: perspective(400px) translateZ(-100px); + background-color: limegreen; +} + +.scaled-translated { + /* 三次元空間を生成するために視点を含める */ + transform: perspective(400px) scaleZ(2) translateZ(-100px); + background-color: pink; +} +``` + +### 結果 + +{{EmbedLiveSample("Examples", 200, 300)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [`scaleX()`](/ja/docs/Web/CSS/transform-function/scaleX()) +- [`scaleY()`](/ja/docs/Web/CSS/transform-function/scaleY()) +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} +- {{cssxref("transform-origin")}} diff --git a/files/ja/web/css/transform-function/skew()/index.md b/files/ja/web/css/transform-function/skew()/index.md deleted file mode 100644 index 826a6e12fc..0000000000 --- a/files/ja/web/css/transform-function/skew()/index.md +++ /dev/null @@ -1,244 +0,0 @@ ---- -title: skew() -slug: Web/CSS/transform-function/skew() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.skew -translation_of: Web/CSS/transform-function/skew() ---- -{{CSSRef}} - -**`skew()`** は [CSS](/ja/docs/Web/CSS) [関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上でゆがめる変換を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 - -{{EmbedInteractiveExample("pages/css/function-skew.html")}} - -この変換はシアー変形 ({{interwiki('wikipedia', 'せん断写像')}}) で、要素内のそれぞれの点を水平および垂直方向に指定された角度でゆがませます。要素のそれぞれの角を掴んで、一定の角度に沿って引っ張ったような効果があります。 - -それぞれの点の座標は、指定された角度と原点からの距離に比例した値によって変更されます。よって、原点から遠くなるにしたがって、加えられる値が大きくなります。 - -## 構文 - -`skew()` 関数は 1 つまたは 2 つの値を指定し、それぞれの軸に適用されるゆがみの量を表します。1 つだけ値を設定した場合は X 軸に使用され、 Y 軸方向の変形は行いません。 - -```css -skew(ax) - -skew(ax, ay) -``` - -### 値 - -- `ax` - - : {{cssxref("<angle>")}} で、 X 軸 (横座標) 方向にゆがめるのに使用する角度を表します。 -- `ay` - - : {{cssxref("<angle>")}} で、 Y 軸 (縦座標) 方向にゆがめるのに使用する角度を表します。定義されていない場合、既定値は `0` となり、水平方向にのみゆがめます。 - - - - - - - - - - - - - - - - - - - - - -
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    - 1 tan - ( - ax - ) - tan - ( - ay - ) 1 - - 1 tan - ( - ax - ) 0 tan - ( - ay - ) 1 0 0 0 1 - - 1 tan - ( - ax - ) 0 tan - ( - ay - ) 1 0 0 0 1 - - 1 tan - ( - ax - ) 0 0 tan - ( - ay - ) 1 0 0 0 0 1 0 0 0 0 1 -
    [1 tan(ay) tan(ax) 1 0 0]
    - -## 例 - -

    X 軸のみの変形

    - -#### HTML - -```html -
    Normal
    -
    Skewed
    -``` - -#### CSS - -```css -body { - margin: 20px; -} - -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.skewed { - transform: skew(10deg); /* Equal to skewX(10deg) */ - background-color: pink; -} -``` - -#### 結果 - -{{EmbedLiveSample("Skewing_on_the_x-axis_only", 200, 200)}} - -

    両方の軸の変形

    - -#### HTML - -```html -
    Normal
    -
    Skewed
    -``` - -#### CSS - -```css -body { - margin: 20px; -} - -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.skewed { - transform: skew(10deg, 10deg); - background-color: pink; -} -``` - -#### 結果 - -{{EmbedLiveSample("Skewing_on_both_axes", 200, 200)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} -- [skewX()](/ja/docs/Web/CSS/transform-function/skewX()) -- [skewY()](/ja/docs/Web/CSS/transform-function/skewY()) diff --git a/files/ja/web/css/transform-function/skew/index.md b/files/ja/web/css/transform-function/skew/index.md new file mode 100644 index 0000000000..9c6abb22a0 --- /dev/null +++ b/files/ja/web/css/transform-function/skew/index.md @@ -0,0 +1,245 @@ +--- +title: skew() +slug: Web/CSS/transform-function/skew +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/skew() +original_slug: Web/CSS/transform-function/skew() +browser-compat: css.types.transform-function.skew +--- +{{CSSRef}} + +**`skew()`** は [CSS](/ja/docs/Web/CSS) [関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上でゆがめる変換を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 + +{{EmbedInteractiveExample("pages/css/function-skew.html")}} + +この変換はシアー変形 ({{interwiki('wikipedia', 'せん断写像')}}) で、要素内のそれぞれの点を水平および垂直方向に指定された角度でゆがませます。要素のそれぞれの角を掴んで、一定の角度に沿って引っ張ったような効果があります。 + +それぞれの点の座標は、指定された角度と原点からの距離に比例した値によって変更されます。よって、原点から遠くなるにしたがって、加えられる値が大きくなります。 + +## 構文 + +`skew()` 関数は 1 つまたは 2 つの値を指定し、それぞれの軸に適用されるゆがみの量を表します。1 つだけ値を設定した場合は X 軸に使用され、 Y 軸方向の変形は行いません。 + +```css +skew(ax) + +skew(ax, ay) +``` + +### 値 + +- `ax` + - : {{cssxref("<angle>")}} で、 X 軸 (横座標) 方向にゆがめるのに使用する角度を表します。 +- `ay` + - : {{cssxref("<angle>")}} で、 Y 軸 (縦座標) 方向にゆがめるのに使用する角度を表します。定義されていない場合、既定値は `0` となり、水平方向にのみゆがめます。 + + + + + + + + + + + + + + + + + + + + + +
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    + 1 tan + ( + ax + ) + tan + ( + ay + ) 1 + + 1 tan + ( + ax + ) 0 tan + ( + ay + ) 1 0 0 0 1 + + 1 tan + ( + ax + ) 0 tan + ( + ay + ) 1 0 0 0 1 + + 1 tan + ( + ax + ) 0 0 tan + ( + ay + ) 1 0 0 0 0 1 0 0 0 0 1 +
    [1 tan(ay) tan(ax) 1 0 0]
    + +## 例 + +

    X 軸のみの変形

    + +#### HTML + +```html +
    Normal
    +
    Skewed
    +``` + +#### CSS + +```css +body { + margin: 20px; +} + +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.skewed { + transform: skew(10deg); /* Equal to skewX(10deg) */ + background-color: pink; +} +``` + +#### 結果 + +{{EmbedLiveSample("Skewing_on_the_x-axis_only", 200, 200)}} + +

    両方の軸の変形

    + +#### HTML + +```html +
    Normal
    +
    Skewed
    +``` + +#### CSS + +```css +body { + margin: 20px; +} + +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.skewed { + transform: skew(10deg, 10deg); + background-color: pink; +} +``` + +#### 結果 + +{{EmbedLiveSample("Skewing_on_both_axes", 200, 200)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} +- [skewX()](/ja/docs/Web/CSS/transform-function/skewX()) +- [skewY()](/ja/docs/Web/CSS/transform-function/skewY()) diff --git a/files/ja/web/css/transform-function/skewx()/index.md b/files/ja/web/css/transform-function/skewx()/index.md deleted file mode 100644 index 353c7dd058..0000000000 --- a/files/ja/web/css/transform-function/skewx()/index.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -title: skewX() -slug: Web/CSS/transform-function/skewX() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.skewX -translation_of: Web/CSS/transform-function/skewX() ---- -{{CSSRef}} - -**`skewX()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上で水平方向にゆがめる変換を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 - -{{EmbedInteractiveExample("pages/css/function-skewX.html")}} - -この変換はシアー変形 ({{interwiki('wikipedia', 'せん断写像')}}) で、要素内のそれぞれの点を水平方向に指定された角度でゆがませます。それぞれの点の横座標は、指定された角度と原点からの距離に比例した値によって変更されます。よって、原点から遠くなるにしたがって、加えられる値が大きくなります。 - -> **Note:** `skewX(a)` は `skew(a)` と等価です。 - -## 構文 - -```css -skewX(a) -``` - -### 値 - -- `a` - - : {{cssxref("<angle>")}} で、横座標方向にゆがめるのに使用する角度を表します。 - - - - - - - - - - - - - - - - - - - - - -
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    - 1 tan - ( - a - ) - 0 1 - - 1 tan - ( - a - ) 0 0 1 0 0 0 1 - - 1 tan - ( - a - ) 0 0 1 0 0 0 1 - - 1 tan - ( - a - ) 0 0 0 1 0 0 0 0 1 0 0 0 0 1 -
    [1 0 tan(a) 1 0 0]
    - -

    例

    - -### HTML - -```html -
    Normal
    -
    Skewed
    -``` - -### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.skewed { - transform: skewX(10deg); /* skew(10deg) と同じ */ - background-color: pink; -} -``` - -### 結果 - -{{EmbedLiveSample("Examples", 200, 200)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/skewx/index.md b/files/ja/web/css/transform-function/skewx/index.md new file mode 100644 index 0000000000..aa774cbd9a --- /dev/null +++ b/files/ja/web/css/transform-function/skewx/index.md @@ -0,0 +1,183 @@ +--- +title: skewX() +slug: Web/CSS/transform-function/skewX +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/skewX() +original_slug: Web/CSS/transform-function/skewX() +browser-compat: css.types.transform-function.skewX +--- +{{CSSRef}} + +**`skewX()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上で水平方向にゆがめる変換を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 + +{{EmbedInteractiveExample("pages/css/function-skewX.html")}} + +この変換はシアー変形 ({{interwiki('wikipedia', 'せん断写像')}}) で、要素内のそれぞれの点を水平方向に指定された角度でゆがませます。それぞれの点の横座標は、指定された角度と原点からの距離に比例した値によって変更されます。よって、原点から遠くなるにしたがって、加えられる値が大きくなります。 + +> **Note:** `skewX(a)` は `skew(a)` と等価です。 + +## 構文 + +```css +skewX(a) +``` + +### 値 + +- `a` + - : {{cssxref("<angle>")}} で、横座標方向にゆがめるのに使用する角度を表します。 + + + + + + + + + + + + + + + + + + + + + +
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    + 1 tan + ( + a + ) + 0 1 + + 1 tan + ( + a + ) 0 0 1 0 0 0 1 + + 1 tan + ( + a + ) 0 0 1 0 0 0 1 + + 1 tan + ( + a + ) 0 0 0 1 0 0 0 0 1 0 0 0 0 1 +
    [1 0 tan(a) 1 0 0]
    + +

    例

    + +### HTML + +```html +
    Normal
    +
    Skewed
    +``` + +### CSS + +```css +div { + width: 80px; + height: 80px; + background-color: skyblue; +} + +.skewed { + transform: skewX(10deg); /* skew(10deg) と同じ */ + background-color: pink; +} +``` + +### 結果 + +{{EmbedLiveSample("Examples", 200, 200)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/skewy()/index.md b/files/ja/web/css/transform-function/skewy()/index.md deleted file mode 100644 index 07a978b3f5..0000000000 --- a/files/ja/web/css/transform-function/skewy()/index.md +++ /dev/null @@ -1,177 +0,0 @@ ---- -title: skewY() -slug: Web/CSS/transform-function/skewY() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.skewY -translation_of: Web/CSS/transform-function/skewY() ---- -{{CSSRef}} - -**`skewY()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上で垂直方向にゆがめる変換を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。 - -{{EmbedInteractiveExample("pages/css/function-skewY.html")}} - -この変換はシアー変形 ({{interwiki('wikipedia', 'せん断写像')}}) で、要素内のそれぞれの点を垂直方向に指定された角度でゆがませます。それぞれの点の縦座標は、指定された角度と原点からの距離に比例した値によって変更されます。よって、原点から遠くなるにしたがって、加えられる値が大きくなります。 - -## 構文 - -```css -skewY(a) -``` - -### 値 - -- `a` - - : {{cssxref("<angle>")}} で、縦座標方向にゆがめるのに使用する角度を表します。 - - - - - - - - - - - - - - - - - - - - - -
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    - 1 0 tan - ( - a - ) 1 - - 1 0 0 tan - ( - a - ) 1 0 0 0 1 - - 1 0 0 tan - ( - a - ) 1 0 0 0 1 - - 1 0 0 0 tan - ( - a - ) 1 0 0 0 0 1 0 0 0 0 1 -
    [1 tan(a) 0 1 0 0]
    - -

    例

    - -### HTML - -```html -
    Normal
    -
    Skewed
    -``` - -### CSS - -```css -div { - width: 80px; - height: 80px; - background-color: skyblue; -} - -.skewed { - transform: skewY(40deg); - background-color: pink; -} -``` - -### 結果 - -{{EmbedLiveSample("Examples", 200, 200)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/translate()/index.md b/files/ja/web/css/transform-function/translate()/index.md deleted file mode 100644 index e3b28bdc1a..0000000000 --- a/files/ja/web/css/transform-function/translate()/index.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -title: translate() -slug: Web/CSS/transform-function/translate() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.translate -translation_of: Web/CSS/transform-function/translate() ---- -{{CSSRef}} - -**`translate()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を水平方向や垂直方向で再配置します。結果は {{cssxref("<transform-function>")}} データ型になります。 - -![](translate.png) - -この変換は、二次元ベクトルであることが特徴です。それぞれの方向にどれだけ要素が移動するかの座標を定義します。 - -## 構文 - -```css -/* 単一の 値 */ -transform: translate(200px); -transform: translate(50%); - -/* 二つの 値 */ -transform: translate(100px, 200px); -transform: translate(100px, 50%); -transform: translate(30%, 200px); -transform: translate(30%, 50%); -``` - -### 値 - -- 単一の `` values - - : この値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} で、変換ベクトルの横軸 (水平方向、X 座標) を表します。変換ベクトルの縦軸 (垂直方向、Y 座標) は `0` に設定されます。例えば、 `translate(2)` は `translate(2, 0)` と等価です。パーセント値の場合は、 {{cssxref("transform-box")}} で定義される参照ボックスの幅からの相対値です。 -- 二つの `` 値 - - : この値は 2 つの {{cssxref("<length>")}} または {{cssxref("<percentage>")}} 値で、変換ベクトルの横軸 (水平方向、X 座標) と縦軸 (垂直方向、Y 座標) を表します。1 つ目にパーセント値が使用された場合は、 {{cssxref("transform-box")}} で定義された参照ボックスの幅からの相対値で、2 つ目にパーセント値が使用された場合は、高さからの相対値です。 - - - - - - - - - - - - - - - - - - - - - -
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    -

    - ℝ^2 では線形変換ではないので、デカルト座標の行列で表すことはできない。 -

    -     		- 1 0 tx 0 1 ty 0 0 1 - - 1 0 tx 0 1 ty 0 0 1 - - 1 0 0 tx 0 1 0 ty 0 0 1 0 0 0 0 1 -
    [1 0 0 1 tx ty]
    - -### 形式文法 - -```css -translate({{cssxref("<length-percentage>")}} , {{cssxref("<length-percentage>")}}?) -``` - -## 例 - -

    単一軸を使用した変形

    - -#### HTML - -```html -
    Static
    -
    Moved
    -
    Static
    -``` - -#### CSS - -```css -div { - width: 60px; - height: 60px; - background-color: skyblue; -} - -.moved { - transform: translate(10px); /* translateX(10px) または translate(10px, 0) と同じ */ - background-color: pink; -} -``` - -#### 結果 - -{{EmbedLiveSample("Using_a_single-axis_translation", 250, 250)}} - -

    Y 軸と X 軸の変換の組み合わせ

    - -#### HTML - -```html -
    Static
    -
    Moved
    -
    Static
    -``` - -#### CSS - -```css -div { - width: 60px; - height: 60px; - background-color: skyblue; -} - -.moved { - transform: translate(10px, 10px); - background-color: pink; -} -``` - -#### 結果 - -{{EmbedLiveSample("Combining_y-axis_and_x-axis_translation", 250, 250)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/translate/index.md b/files/ja/web/css/transform-function/translate/index.md new file mode 100644 index 0000000000..0af964a8c0 --- /dev/null +++ b/files/ja/web/css/transform-function/translate/index.md @@ -0,0 +1,200 @@ +--- +title: translate() +slug: Web/CSS/transform-function/translate +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/translate() +original_slug: Web/CSS/transform-function/translate() +browser-compat: css.types.transform-function.translate +--- +{{CSSRef}} + +**`translate()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を水平方向や垂直方向で再配置します。結果は {{cssxref("<transform-function>")}} データ型になります。 + +![](translate.png) + +この変換は、二次元ベクトルであることが特徴です。それぞれの方向にどれだけ要素が移動するかの座標を定義します。 + +## 構文 + +```css +/* 単一の 値 */ +transform: translate(200px); +transform: translate(50%); + +/* 二つの 値 */ +transform: translate(100px, 200px); +transform: translate(100px, 50%); +transform: translate(30%, 200px); +transform: translate(30%, 50%); +``` + +### 値 + +- 単一の `` values + - : この値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} で、変換ベクトルの横軸 (水平方向、X 座標) を表します。変換ベクトルの縦軸 (垂直方向、Y 座標) は `0` に設定されます。例えば、 `translate(2)` は `translate(2, 0)` と等価です。パーセント値の場合は、 {{cssxref("transform-box")}} で定義される参照ボックスの幅からの相対値です。 +- 二つの `` 値 + - : この値は 2 つの {{cssxref("<length>")}} または {{cssxref("<percentage>")}} 値で、変換ベクトルの横軸 (水平方向、X 座標) と縦軸 (垂直方向、Y 座標) を表します。1 つ目にパーセント値が使用された場合は、 {{cssxref("transform-box")}} で定義された参照ボックスの幅からの相対値で、2 つ目にパーセント値が使用された場合は、高さからの相対値です。 + + + + + + + + + + + + + + + + + + + + + +
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    +

    + ℝ^2 では線形変換ではないので、デカルト座標の行列で表すことはできない。 +

    +     		+ 1 0 tx 0 1 ty 0 0 1 + + 1 0 tx 0 1 ty 0 0 1 + + 1 0 0 tx 0 1 0 ty 0 0 1 0 0 0 0 1 +
    [1 0 0 1 tx ty]
    + +### 形式文法 + +```css +translate({{cssxref("<length-percentage>")}} , {{cssxref("<length-percentage>")}}?) +``` + +## 例 + +

    単一軸を使用した変形

    + +#### HTML + +```html +
    Static
    +
    Moved
    +
    Static
    +``` + +#### CSS + +```css +div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: translate(10px); /* translateX(10px) または translate(10px, 0) と同じ */ + background-color: pink; +} +``` + +#### 結果 + +{{EmbedLiveSample("Using_a_single-axis_translation", 250, 250)}} + +

    Y 軸と X 軸の変換の組み合わせ

    + +#### HTML + +```html +
    Static
    +
    Moved
    +
    Static
    +``` + +#### CSS + +```css +div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: translate(10px, 10px); + background-color: pink; +} +``` + +#### 結果 + +{{EmbedLiveSample("Combining_y-axis_and_x-axis_translation", 250, 250)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/translate3d()/index.md b/files/ja/web/css/transform-function/translate3d()/index.md deleted file mode 100644 index 0d614fbd1a..0000000000 --- a/files/ja/web/css/transform-function/translate3d()/index.md +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: translate3d() -slug: Web/CSS/transform-function/translate3d() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.translate3d -translation_of: Web/CSS/transform-function/translate3d() ---- -{{CSSRef}} - -**`translate3d()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を三次元空間内で再配置します。返値は {{cssxref("<transform-function>")}} データ型です。 - -{{EmbedInteractiveExample("pages/css/function-translate3d.html")}} - -この変換は三次元ベクトルであることが特徴です。座標は要素がそれぞれの方向にどれだけ移動するかを定義します。 - -## 構文 - -```css -translate3d(tx, ty, tz) -``` - -### 値 - -- `tx` - - : 変換ベクトルの横座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。 -- `ty` - - : 変換ベクトルの縦座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。 -- `tz` - - : 変換ベクトルの z 成分を表す {{cssxref("<length>")}} です。 {{cssxref("<percentage>")}} 値は指定できません。この場合、これを含む座標変換は無効とされます。 - - - - - - - - - - - - - - - - - -
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    -

    - ℝ^2 では線形変換ではないので、デカルト座標の行列で表すことはできない。 -

    -     		- ℝ^3 では線形変換ではないので、デカルト座標の行列で表すことはできない。 - - 1 0 0 tx 0 1 0 ty 0 0 1 tz 0 0 0 1 -
    - -## 例 - -

    単一軸の座標変換の使用

    - -#### HTML - -```html -
    Static
    -
    Moved
    -
    Static
    -``` - -#### CSS - -```css -div { - width: 60px; - height: 60px; - background-color: skyblue; -} - -.moved { - /* Equivalent to perspective(500px) translateX(10px) */ - transform: perspective(500px) translate3d(10px, 0, 0px); - background-color: pink; -} -``` - -#### 結果 - -{{EmbedLiveSample("Using_a_single_axis_translation", 250, 250)}} - -

    z 軸と x 軸を組み合わせた座標変換

    - -#### HTML - -```html -
    Static
    -
    Moved
    -
    Static
    -``` - -#### CSS - -```css -div { - width: 60px; - height: 60px; - background-color: skyblue; -} - -.moved { - transform: perspective(500px) translate3d(10px, 0, 100px); - background-color: pink; -} -``` - -#### 結果 - -{{EmbedLiveSample("Combining_z-axis_and_x-axis_translation", 250, 250)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/translate3d/index.md b/files/ja/web/css/transform-function/translate3d/index.md new file mode 100644 index 0000000000..26bd0785b4 --- /dev/null +++ b/files/ja/web/css/transform-function/translate3d/index.md @@ -0,0 +1,153 @@ +--- +title: translate3d() +slug: Web/CSS/transform-function/translate3d +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/translate3d() +original_slug: Web/CSS/transform-function/translate3d() +browser-compat: css.types.transform-function.translate3d +--- +{{CSSRef}} + +**`translate3d()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を三次元空間内で再配置します。返値は {{cssxref("<transform-function>")}} データ型です。 + +{{EmbedInteractiveExample("pages/css/function-translate3d.html")}} + +この変換は三次元ベクトルであることが特徴です。座標は要素がそれぞれの方向にどれだけ移動するかを定義します。 + +## 構文 + +```css +translate3d(tx, ty, tz) +``` + +### 値 + +- `tx` + - : 変換ベクトルの横座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。 +- `ty` + - : 変換ベクトルの縦座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。 +- `tz` + - : 変換ベクトルの z 成分を表す {{cssxref("<length>")}} です。 {{cssxref("<percentage>")}} 値は指定できません。この場合、これを含む座標変換は無効とされます。 + + + + + + + + + + + + + + + + + +
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    +

    + ℝ^2 では線形変換ではないので、デカルト座標の行列で表すことはできない。 +

    +     		+ ℝ^3 では線形変換ではないので、デカルト座標の行列で表すことはできない。 + + 1 0 0 tx 0 1 0 ty 0 0 1 tz 0 0 0 1 +
    + +## 例 + +

    単一軸の座標変換の使用

    + +#### HTML + +```html +
    Static
    +
    Moved
    +
    Static
    +``` + +#### CSS + +```css +div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + /* Equivalent to perspective(500px) translateX(10px) */ + transform: perspective(500px) translate3d(10px, 0, 0px); + background-color: pink; +} +``` + +#### 結果 + +{{EmbedLiveSample("Using_a_single_axis_translation", 250, 250)}} + +

    z 軸と x 軸を組み合わせた座標変換

    + +#### HTML + +```html +
    Static
    +
    Moved
    +
    Static
    +``` + +#### CSS + +```css +div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: perspective(500px) translate3d(10px, 0, 100px); + background-color: pink; +} +``` + +#### 結果 + +{{EmbedLiveSample("Combining_z-axis_and_x-axis_translation", 250, 250)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/translatex()/index.md b/files/ja/web/css/transform-function/translatex()/index.md deleted file mode 100644 index 1d0797b735..0000000000 --- a/files/ja/web/css/transform-function/translatex()/index.md +++ /dev/null @@ -1,163 +0,0 @@ ---- -title: translateX() -slug: Web/CSS/transform-function/translateX() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.translateX -translation_of: Web/CSS/transform-function/translateX() -original_slug: Web/CSS/transform-function/translateX ---- -{{CSSRef}} - -**`translateX()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上の水平方向で再配置します。結果は {{cssxref("<transform-function>")}} データ型になります。 - -![](transform-functions-translatex_2.png) - -> **Note:** `translateX(tx)` は `translate(tx, 0)` または `translate3d(tx, 0, 0)` と等価です。 - -## 構文 - -```css -/* values */ -transform: translateX(200px); -transform: translateX(50%); -``` - -### 値 - -- `` - - : 変換ベクトルの横座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。パーセント値は {{cssxref("transform-box")}} プロパティで定義される参照ボックスの幅からの相対値です。 - - - - - - - - - - - - - - - - - - - - - -
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    -

    - ℝ^2 では線形変換ではないので、デカルト座標の行列で表すことはできない。 -

    -     		- 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]
    - -### 形式文法 - -```css -translateX({{cssxref("<length-percentage>")}}) -``` - -

    例

    - -### HTML - -```html -
    Static
    -
    Moved
    -
    Static
    -``` - -### CSS - -```css -div { - width: 60px; - height: 60px; - background-color: skyblue; -} - -.moved { - transform: translateX(10px); /* translate(10px) と等価 */ - background-color: pink; -} -``` - -### 結果 - -{{EmbedLiveSample("Examples", 250, 250)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- [`translate()`](/ja/docs/Web/CSS/transform-function/translate()) -- [`translateY()`](/ja/docs/Web/CSS/transform-function/translateY()) -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/translatex/index.md b/files/ja/web/css/transform-function/translatex/index.md new file mode 100644 index 0000000000..011503864b --- /dev/null +++ b/files/ja/web/css/transform-function/translatex/index.md @@ -0,0 +1,163 @@ +--- +title: translateX() +slug: Web/CSS/transform-function/translateX +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/translateX() +original_slug: Web/CSS/transform-function/translateX() +browser-compat: css.types.transform-function.translateX +--- +{{CSSRef}} + +**`translateX()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上の水平方向で再配置します。結果は {{cssxref("<transform-function>")}} データ型になります。 + +![](transform-functions-translatex_2.png) + +> **Note:** `translateX(tx)` は `translate(tx, 0)` または `translate3d(tx, 0, 0)` と等価です。 + +## 構文 + +```css +/* values */ +transform: translateX(200px); +transform: translateX(50%); +``` + +### 値 + +- `` + - : 変換ベクトルの横座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。パーセント値は {{cssxref("transform-box")}} プロパティで定義される参照ボックスの幅からの相対値です。 + + + + + + + + + + + + + + + + + + + + + +
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    +

    + ℝ^2 では線形変換ではないので、デカルト座標の行列で表すことはできない。 +

    +     		+ 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]
    + +### 形式文法 + +```css +translateX({{cssxref("<length-percentage>")}}) +``` + +

    例

    + +### HTML + +```html +
    Static
    +
    Moved
    +
    Static
    +``` + +### CSS + +```css +div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: translateX(10px); /* translate(10px) と等価 */ + background-color: pink; +} +``` + +### 結果 + +{{EmbedLiveSample("Examples", 250, 250)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [`translate()`](/ja/docs/Web/CSS/transform-function/translate()) +- [`translateY()`](/ja/docs/Web/CSS/transform-function/translateY()) +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/translatey()/index.md b/files/ja/web/css/transform-function/translatey()/index.md deleted file mode 100644 index ef8f624a29..0000000000 --- a/files/ja/web/css/transform-function/translatey()/index.md +++ /dev/null @@ -1,174 +0,0 @@ ---- -title: translateY() -slug: Web/CSS/transform-function/translateY() -tags: - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.translateY -translation_of: Web/CSS/transform-function/translateY() ---- -{{CSSRef}} - -**`translateX()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上の水平方向で再配置します。結果は {{cssxref("<transform-function>")}} データ型になります。 - -![](translatey.png) - -> **Note:** `translateY(ty)` は `translate(0, ty)` または `translate3d(0, ty, 0)` と等価です。 - -## 構文 - -```css -/* 値 */ -transform: translateY(200px); -transform: translateY(50%); -``` - -### 値 - -- `` - - : 変換ベクトルの縦座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。パーセント値は {{cssxref("transform-box")}} プロパティで定義される参照ボックスの幅からの相対値です。 - - - - - - - - - - - - - - - - - - - - - -
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    -

    - ℝ^2 では線形変換ではないので、デカルト座標の行列で表すことはできない。 -

    -     		- 1 - 0 - 0 0 - 1 - t 0 - 0 - 1 - - 1 - 0 - 0 0 - 1 - t 0 - 0 - 1 - - 1 - 0 - 0 - 0 0 - 1 - 0 - t 0 - 0 - 1 - 0 0 - 0 - 0 - 1 -
    [1 0 0 1 0 t]
    - -### 形式文法 - -```css -translateY({{cssxref("<length-percentage>")}}) -``` - -

    例

    - -### HTML - -```html -
    Static
    -
    Moved
    -
    Static
    -``` - -### CSS - -```css -div { - width: 60px; - height: 60px; - background-color: skyblue; -} - -.moved { - transform: translateY(10px); - background-color: pink; -} -``` - -### 結果 - -{{EmbedLiveSample("Examples", 250, 250)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/translatey/index.md b/files/ja/web/css/transform-function/translatey/index.md new file mode 100644 index 0000000000..6f49e8dacf --- /dev/null +++ b/files/ja/web/css/transform-function/translatey/index.md @@ -0,0 +1,175 @@ +--- +title: translateY() +slug: Web/CSS/transform-function/translateY +tags: + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/translateY() +original_slug: Web/CSS/transform-function/translateY() +browser-compat: css.types.transform-function.translateY +--- +{{CSSRef}} + +**`translateX()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素を二次元平面上の水平方向で再配置します。結果は {{cssxref("<transform-function>")}} データ型になります。 + +![](translatey.png) + +> **Note:** `translateY(ty)` は `translate(0, ty)` または `translate3d(0, ty, 0)` と等価です。 + +## 構文 + +```css +/* 値 */ +transform: translateY(200px); +transform: translateY(50%); +``` + +### 値 + +- `` + - : 変換ベクトルの縦座標を表す {{cssxref("<length>")}} または {{cssxref("<percentage>")}} です。パーセント値は {{cssxref("transform-box")}} プロパティで定義される参照ボックスの幅からの相対値です。 + + + + + + + + + + + + + + + + + + + + + +
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    +

    + ℝ^2 では線形変換ではないので、デカルト座標の行列で表すことはできない。 +

    +     		+ 1 + 0 + 0 0 + 1 + t 0 + 0 + 1 + + 1 + 0 + 0 0 + 1 + t 0 + 0 + 1 + + 1 + 0 + 0 + 0 0 + 1 + 0 + t 0 + 0 + 1 + 0 0 + 0 + 0 + 1 +
    [1 0 0 1 0 t]
    + +### 形式文法 + +```css +translateY({{cssxref("<length-percentage>")}}) +``` + +

    例

    + +### HTML + +```html +
    Static
    +
    Moved
    +
    Static
    +``` + +### CSS + +```css +div { + width: 60px; + height: 60px; + background-color: skyblue; +} + +.moved { + transform: translateY(10px); + background-color: pink; +} +``` + +### 結果 + +{{EmbedLiveSample("Examples", 250, 250)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/translatez()/index.md b/files/ja/web/css/transform-function/translatez()/index.md deleted file mode 100644 index 400c67a02f..0000000000 --- a/files/ja/web/css/transform-function/translatez()/index.md +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: translateZ() -slug: Web/CSS/transform-function/translateZ() -tags: - - 3D - - CSS - - CSS 関数 - - CSS 座標変換 - - 関数 - - リファレンス -browser-compat: css.types.transform-function.translateZ -translation_of: Web/CSS/transform-function/translateZ() ---- -{{CSSRef}} - -**`translateZ()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、三次元空間の z 軸に沿って、すなわち閲覧者に近づいたり遠ざかったりするように要素を移動させます。その結果は {{cssxref("<transform-function>")}} データ型となります。 - -{{EmbedInteractiveExample("pages/css/function-translateZ.html")}} - -この変換は、 {{cssxref("<length>")}} によって定義され、要素または要素がどれだけ内側または外側に移動するかを指定します。 - -上記のデモでは、[`perspective: 550px;`](/ja/docs/Web/CSS/perspective) (三次元空間を作るため) と [`transform-style: preserve-3d;`](/ja/docs/Web/CSS/transform-style) (立方体の 6 つの面である子を三次元空間に配置) を立方体に設定しました。 - -> **Note:** `translateZ(tz)` は、`translate3d(0, 0, tz)` と等価です。 - -## 構文 - -```css -translateZ(tz) -``` - -### 値 - -- `tz` - - : 変換ベクトルの z 成分を表す{{cssxref("<length>")}}。正の値では要素が閲覧者に向かって移動し、負の値で移動すると遠ざかります。 - - - - - - - - - - - - - - - - - -
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    - この変換は 3 次元空間に適用されます。平面上では表現できません。 - - この変換は ℝ^3 の線形変換ではなく、デカルト座標系の行列では表現できません。 - - 1 0 0 0 0 1 0 0 0 0 1 t 0 0 0 1 -
    - -

    例

    - -この例では、2 つのボックスが作成されます。1 つはページ上で通常の位置に配置され、座標変換されることはありません。もう一つは、遠近法を適用して三次元空間を作り、ユーザーの方に移動させます。 - -### HTML - -```html -
    Static
    -
    Moved
    -``` - -### CSS - -```css -div { - position: relative; - width: 60px; - height: 60px; - left: 100px; - background-color: skyblue; -} - -.moved { - transform: perspective(500px) translateZ(200px); - background-color: pink; -} -``` - -ここで重要なのは "moved" というクラスで、その機能を見てみましょう。まず、 -[`perspective()`](/ja/docs/Web/CSS/transform-function/perspective()) 関数は、 z=0 の位置にある平面 (要するに画面の表面) の相対位置に閲覧者を位置付けます。 `500px` という値は、ユーザーが z=0 にある画像の 500 ピクセル「前」にいることを意味します。 - -次に、`translateZ()` 関数は、要素を画面からユーザーの方に「外向きに」200 ピクセル移動します。 これは、二次元のディスプレイ上で見たときに要素を大きく見せる、または VR ヘッドセットや他の三次元ディスプレイ機器を使用して見たときに要素をより近く見せるという効果があります。 - -なお、 `perspective()` の値が `translateZ()` の値よりも小さい場合、例えば `transform: perspective(200px) translateZ(300px);` の場合、変換された要素はユーザーのビューポートよりも手前にあるため、表示されません。 perspective と translateZ の値の差が小さければ小さいほど、ユーザーは要素に近づき、変換された要素は大きく見えます。 - -### 結果 - -{{EmbedLiveSample("Examples", 250, 250)}} - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("transform")}} -- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/transform-function/translatez/index.md b/files/ja/web/css/transform-function/translatez/index.md new file mode 100644 index 0000000000..e0a1df5c9d --- /dev/null +++ b/files/ja/web/css/transform-function/translatez/index.md @@ -0,0 +1,130 @@ +--- +title: translateZ() +slug: Web/CSS/transform-function/translateZ +tags: + - 3D + - CSS + - CSS 関数 + - CSS 座標変換 + - 関数 + - リファレンス +translation_of: Web/CSS/transform-function/translateZ() +original_slug: Web/CSS/transform-function/translateZ() +browser-compat: css.types.transform-function.translateZ +--- +{{CSSRef}} + +**`translateZ()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、三次元空間の z 軸に沿って、すなわち閲覧者に近づいたり遠ざかったりするように要素を移動させます。その結果は {{cssxref("<transform-function>")}} データ型となります。 + +{{EmbedInteractiveExample("pages/css/function-translateZ.html")}} + +この変換は、 {{cssxref("<length>")}} によって定義され、要素または要素がどれだけ内側または外側に移動するかを指定します。 + +上記のデモでは、[`perspective: 550px;`](/ja/docs/Web/CSS/perspective) (三次元空間を作るため) と [`transform-style: preserve-3d;`](/ja/docs/Web/CSS/transform-style) (立方体の 6 つの面である子を三次元空間に配置) を立方体に設定しました。 + +> **Note:** `translateZ(tz)` は、`translate3d(0, 0, tz)` と等価です。 + +## 構文 + +```css +translateZ(tz) +``` + +### 値 + +- `tz` + - : 変換ベクトルの z 成分を表す{{cssxref("<length>")}}。正の値では要素が閲覧者に向かって移動し、負の値で移動すると遠ざかります。 + + + + + + + + + + + + + + + + + +
    ℝ^2 のデカルト座標ℝℙ^2 の同次座標ℝ^3 のデカルト座標ℝℙ^3 の同次座標
    + この変換は 3 次元空間に適用されます。平面上では表現できません。 + + この変換は ℝ^3 の線形変換ではなく、デカルト座標系の行列では表現できません。 + + 1 0 0 0 0 1 0 0 0 0 1 t 0 0 0 1 +
    + +

    例

    + +この例では、2 つのボックスが作成されます。1 つはページ上で通常の位置に配置され、座標変換されることはありません。もう一つは、遠近法を適用して三次元空間を作り、ユーザーの方に移動させます。 + +### HTML + +```html +
    Static
    +
    Moved
    +``` + +### CSS + +```css +div { + position: relative; + width: 60px; + height: 60px; + left: 100px; + background-color: skyblue; +} + +.moved { + transform: perspective(500px) translateZ(200px); + background-color: pink; +} +``` + +ここで重要なのは "moved" というクラスで、その機能を見てみましょう。まず、 +[`perspective()`](/ja/docs/Web/CSS/transform-function/perspective()) 関数は、 z=0 の位置にある平面 (要するに画面の表面) の相対位置に閲覧者を位置付けます。 `500px` という値は、ユーザーが z=0 にある画像の 500 ピクセル「前」にいることを意味します。 + +次に、`translateZ()` 関数は、要素を画面からユーザーの方に「外向きに」200 ピクセル移動します。 これは、二次元のディスプレイ上で見たときに要素を大きく見せる、または VR ヘッドセットや他の三次元ディスプレイ機器を使用して見たときに要素をより近く見せるという効果があります。 + +なお、 `perspective()` の値が `translateZ()` の値よりも小さい場合、例えば `transform: perspective(200px) translateZ(300px);` の場合、変換された要素はユーザーのビューポートよりも手前にあるため、表示されません。 perspective と translateZ の値の差が小さければ小さいほど、ユーザーは要素に近づき、変換された要素は大きく見えます。 + +### 結果 + +{{EmbedLiveSample("Examples", 250, 250)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("transform")}} +- {{cssxref("<transform-function>")}} diff --git a/files/ja/web/css/url()/index.md b/files/ja/web/css/url()/index.md deleted file mode 100644 index 18c2e4c095..0000000000 --- a/files/ja/web/css/url()/index.md +++ /dev/null @@ -1,191 +0,0 @@ ---- -title: url() -slug: Web/CSS/url() -tags: - - CSS - - CSS 関数 - - 関数 - - レイアウト - - リファレンス - - ウェブ - - url() -browser-compat: css.types.url -translation_of: Web/CSS/url() ---- -{{CSSRef}} - -**`url()`** は [CSS](/ja/docs/Web/CSS) 関数で、ファイルを含めるために使用します。引数は絶対 URL、相対 URL、 データ URI の何れかです **`url()`** 関数は {{cssxref('attr()')}} 関数のように、他の CSS 関数に引数として渡すことができます。値を使用するプロパティに応じて、求められるリソースは画像、フォント、スタイルシートの何れかになります。`url()` 関数表記は `` データ型の値になります。 - -> **Note:** {{Glossary("URI")}} と {{Glossary("URL")}} との間には違いがあります。 URI は単純にリソースを識別します。 URL は URI の一種で、リソースの*場所*を記述します。 URI はリソースの URL または名前 ({{Glossary("URN")}}) であることがあります。 -> -> CSS Level 1 では、 `url()` 関数記法は真に URL のみを記述していました。 CSS Level 2 では、 `url()` の定義はあらゆる URI、 URL または URN のどちらかを記述するように拡張されました。ややこしいことに、これは `url()` を CSS の `` データ型の生成のために使用することができることを意味していました。この変更は紛らわしいばかりでなく、議論になりやすく、 URN が実際の CSS で使用されることはほぼあり得ないため不必要でした。混乱を軽減するために、 CSS Level 3 ではより狭い初めの定義まで戻りました。現在では、 `url()` は真に `` のみを記述します。 - -```css -/* 単純な使い方 */ -url(https://example.com/images/myImg.jpg); -url(data:image/png;base64,iRxVB0…); -url(myFont.woff); -url(#IDofSVGpath); - -/* 関連するプロパティ */ -background-image: url("star.gif"); -list-style-image: url('../images/bullet.jpg'); -content: url("pdficon.jpg"); -cursor: url(mycursor.cur); -border-image-source: url(/media/diamonds.png); -src: url('fantasticfont.woff'); -offset-path: url(#path); -mask-image: url("masks.svg#mask1"); - -/* 代替付きのプロパティ */ -cursor: url(pointer.cur), pointer; - -/* 関連する一括指定プロパティ */ -background: url('star.gif') bottom right repeat-x blue; -border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space; - -/* 他の 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)); - -/* 一括指定ではない複数の値の一部として */ -content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); - -/* アットルール */ -@document url("https://www.example.com/") { ... } {{Experimental_Inline}} -@import url("https://www.example.com/style.css"); -@namespace url(http://www.w3.org/1999/xhtml); -``` - -相対 URL が使用された場合は、スタイルシートの URL からの相対となります (ウェブページの URL からではありません)。 - -**`url()`** 関数は {{cssxref('background')}}, {{cssxref('background-image')}}, {{cssxref('border')}}, {{cssxref('border-image')}}, {{cssxref('border-image-source')}}, {{cssxref('content')}}, {{cssxref('cursor')}}, {{cssxref('filter')}}, {{cssxref('list-style')}}, {{cssxref('list-style-image')}}, {{cssxref('mask')}}, {{cssxref('mask-image')}}, {{cssxref('offset-path')}}, -[@font-face](/ja/docs/Web/CSS/@font-face) ブロック内での [src](/ja/docs/Web/CSS/@font-face/src), [@counter-style/symbol](/ja/docs/Web/CSS/@counter-style/symbols) の値として使用することができます。 - -## 構文 - -### 値 - -- `` - - - : URL まだは SVG 図形の ID を指定することができる文字列です。 - - - \ - - - : 含まれるウェブリソースへの相対アドレス、絶対アドレス、ポインターのURL、またはデータ URI であり、任意で単一引用符または二重引用符を使用することができます。URL に括弧、空白、引用符が含まれている場合で、これらの文字がエスケープされていないか、アドレスに 0x7e 以上の制御文字が含まれている場合、引用符は必須です。二重引用符は二重引用符の中に入れることはできず、単一引用符はエスケープされない限り単一引用符の中に入れることはできません。以下のものはすべて有効であり、同等です。 - - ```css - : url("https://example.com/image.png") - : url('https://example.com/image.png') - : url(https://example.com/image.png) - ``` - - URL を引用符なしで書く場合は、バックスラッシュを (`\`) を URL に含まれる括弧、ホワイトスペース文字、単一引用符 (`'`)、二重引用符 (`"`) の前に使用してください。 - - - パス - - : [SVG 図形](/ja/docs/Web/SVG/Tutorial/Basic_Shapes)の ID への参照 -- `circle`, `ellipse`, `line`, `path`, `polygon`, `polyline`, `rect` -- パスとして図形の形状を使用します。 - -- `` {{Experimental_Inline}} - - : 将来的に `url()` 関数は、 URL 文字列の意味を変更する修飾子、識別子、関数記法の指定に対応するかもしれません。これはまだ対応されておらず、仕様書では完全には定義されていません。 - -## 形式文法 - -```css -url( * ) -``` - -

    例

    - -

    background プロパティで使用される URL

    - - .topbanner { - background: url("topbanner.png") #00D no-repeat fixed; - } - -

    リストの先頭記号として使用される画像を読み込む URL

    - - ul { - list-style: square url(http://www.example.com/redball.png); - } - -

    content プロパティの使用

    - -#### HTML - -```html -
      -
    • Item 1
      • -
    • Item 2
      • -
    • Item 3
      • -
    -``` - -#### CSS - -```css -li::after { - content: ' - ' url(star.gif); -} -``` - -#### 結果 - -{{EmbedLiveSample("Usage_in_the_content_property", "100%", 110)}} - -

    data-uri の使用

    - -#### 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"); -} -``` - -{{EmbedLiveSample("Using_a_data-uri", "100%", 50)}} - -

    フィルターでの使用

    - -URL がフィルターへのパスとして使用される場合、 URL は以下のどちらかでなければなりません。 - -1. SVG ファイルへのパスに、追加されるフィルターの ID が付いたもの。 -2. SVG がページ内にある場合は、フィルターの ID。 - - - - .blur { -   filter: url(my-file.svg#svg-blur); /* フィルターとして使用する SVG ファイルの URL */ - } - - .inline-blur { - filter: url(#svg-blur); /* HTML ページに埋め込まれた SVG の ID */ - } - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("<gradient>")}} -- {{cssxref("element()")}} -- {{cssxref("image/image()", "image()")}} -- {{cssxref("image/image-set()", "image-set()")}} -- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/url/index.md b/files/ja/web/css/url/index.md new file mode 100644 index 0000000000..e5dc1075b9 --- /dev/null +++ b/files/ja/web/css/url/index.md @@ -0,0 +1,192 @@ +--- +title: url() +slug: Web/CSS/url +tags: + - CSS + - CSS 関数 + - 関数 + - レイアウト + - リファレンス + - ウェブ + - url() +translation_of: Web/CSS/url() +original_slug: Web/CSS/url() +browser-compat: css.types.url +--- +{{CSSRef}} + +**`url()`** は [CSS](/ja/docs/Web/CSS) 関数で、ファイルを含めるために使用します。引数は絶対 URL、相対 URL、 データ URI の何れかです **`url()`** 関数は {{cssxref('attr()')}} 関数のように、他の CSS 関数に引数として渡すことができます。値を使用するプロパティに応じて、求められるリソースは画像、フォント、スタイルシートの何れかになります。`url()` 関数表記は `` データ型の値になります。 + +> **Note:** {{Glossary("URI")}} と {{Glossary("URL")}} との間には違いがあります。 URI は単純にリソースを識別します。 URL は URI の一種で、リソースの*場所*を記述します。 URI はリソースの URL または名前 ({{Glossary("URN")}}) であることがあります。 +> +> CSS Level 1 では、 `url()` 関数記法は真に URL のみを記述していました。 CSS Level 2 では、 `url()` の定義はあらゆる URI、 URL または URN のどちらかを記述するように拡張されました。ややこしいことに、これは `url()` を CSS の `` データ型の生成のために使用することができることを意味していました。この変更は紛らわしいばかりでなく、議論になりやすく、 URN が実際の CSS で使用されることはほぼあり得ないため不必要でした。混乱を軽減するために、 CSS Level 3 ではより狭い初めの定義まで戻りました。現在では、 `url()` は真に `` のみを記述します。 + +```css +/* 単純な使い方 */ +url(https://example.com/images/myImg.jpg); +url(data:image/png;base64,iRxVB0…); +url(myFont.woff); +url(#IDofSVGpath); + +/* 関連するプロパティ */ +background-image: url("star.gif"); +list-style-image: url('../images/bullet.jpg'); +content: url("pdficon.jpg"); +cursor: url(mycursor.cur); +border-image-source: url(/media/diamonds.png); +src: url('fantasticfont.woff'); +offset-path: url(#path); +mask-image: url("masks.svg#mask1"); + +/* 代替付きのプロパティ */ +cursor: url(pointer.cur), pointer; + +/* 関連する一括指定プロパティ */ +background: url('star.gif') bottom right repeat-x blue; +border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space; + +/* 他の 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)); + +/* 一括指定ではない複数の値の一部として */ +content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); + +/* アットルール */ +@document url("https://www.example.com/") { ... } {{Experimental_Inline}} +@import url("https://www.example.com/style.css"); +@namespace url(http://www.w3.org/1999/xhtml); +``` + +相対 URL が使用された場合は、スタイルシートの URL からの相対となります (ウェブページの URL からではありません)。 + +**`url()`** 関数は {{cssxref('background')}}, {{cssxref('background-image')}}, {{cssxref('border')}}, {{cssxref('border-image')}}, {{cssxref('border-image-source')}}, {{cssxref('content')}}, {{cssxref('cursor')}}, {{cssxref('filter')}}, {{cssxref('list-style')}}, {{cssxref('list-style-image')}}, {{cssxref('mask')}}, {{cssxref('mask-image')}}, {{cssxref('offset-path')}}, +[@font-face](/ja/docs/Web/CSS/@font-face) ブロック内での [src](/ja/docs/Web/CSS/@font-face/src), [@counter-style/symbol](/ja/docs/Web/CSS/@counter-style/symbols) の値として使用することができます。 + +## 構文 + +### 値 + +- `` + + - : URL まだは SVG 図形の ID を指定することができる文字列です。 + + - \ + + - : 含まれるウェブリソースへの相対アドレス、絶対アドレス、ポインターのURL、またはデータ URI であり、任意で単一引用符または二重引用符を使用することができます。URL に括弧、空白、引用符が含まれている場合で、これらの文字がエスケープされていないか、アドレスに 0x7e 以上の制御文字が含まれている場合、引用符は必須です。二重引用符は二重引用符の中に入れることはできず、単一引用符はエスケープされない限り単一引用符の中に入れることはできません。以下のものはすべて有効であり、同等です。 + + ```css + : url("https://example.com/image.png") + : url('https://example.com/image.png') + : url(https://example.com/image.png) + ``` + + URL を引用符なしで書く場合は、バックスラッシュを (`\`) を URL に含まれる括弧、ホワイトスペース文字、単一引用符 (`'`)、二重引用符 (`"`) の前に使用してください。 + + - パス + - : [SVG 図形](/ja/docs/Web/SVG/Tutorial/Basic_Shapes)の ID への参照 -- `circle`, `ellipse`, `line`, `path`, `polygon`, `polyline`, `rect` -- パスとして図形の形状を使用します。 + +- `` {{Experimental_Inline}} + - : 将来的に `url()` 関数は、 URL 文字列の意味を変更する修飾子、識別子、関数記法の指定に対応するかもしれません。これはまだ対応されておらず、仕様書では完全には定義されていません。 + +## 形式文法 + +```css +url( * ) +``` + +

    例

    + +

    background プロパティで使用される URL

    + + .topbanner { + background: url("topbanner.png") #00D no-repeat fixed; + } + +

    リストの先頭記号として使用される画像を読み込む URL

    + + ul { + list-style: square url(http://www.example.com/redball.png); + } + +

    content プロパティの使用

    + +#### HTML + +```html +
      +
    • Item 1
      • +
    • Item 2
      • +
    • Item 3
      • +
    +``` + +#### CSS + +```css +li::after { + content: ' - ' url(star.gif); +} +``` + +#### 結果 + +{{EmbedLiveSample("Usage_in_the_content_property", "100%", 110)}} + +

    data-uri の使用

    + +#### 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"); +} +``` + +{{EmbedLiveSample("Using_a_data-uri", "100%", 50)}} + +

    フィルターでの使用

    + +URL がフィルターへのパスとして使用される場合、 URL は以下のどちらかでなければなりません。 + +1. SVG ファイルへのパスに、追加されるフィルターの ID が付いたもの。 +2. SVG がページ内にある場合は、フィルターの ID。 + + + + .blur { +   filter: url(my-file.svg#svg-blur); /* フィルターとして使用する SVG ファイルの URL */ + } + + .inline-blur { + filter: url(#svg-blur); /* HTML ページに埋め込まれた SVG の ID */ + } + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("<gradient>")}} +- {{cssxref("element()")}} +- {{cssxref("image/image()", "image()")}} +- {{cssxref("image/image-set()", "image-set()")}} +- {{cssxref("cross-fade()")}} diff --git a/files/ja/web/css/var()/index.md b/files/ja/web/css/var()/index.md deleted file mode 100644 index e108fb58d7..0000000000 --- a/files/ja/web/css/var()/index.md +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: var() -slug: Web/CSS/var() -tags: - - CSS - - CSS カスタムプロパティ - - CSS 変数 - - CSS 関数 - - 実験的 - - 関数 - - リファレンス - - 変数 - - var - - var() -browser-compat: css.properties.custom-property.var -translation_of: Web/CSS/var() ---- -{{CSSRef}} - -[CSS](/ja/docs/Web/CSS) の **`var()`** 関数は、他のプロパティの値の一部に代わって[カスタムプロパティ](/ja/docs/Web/CSS/--*) (「CSS 変数」と呼ばれることもあります) の値を挿入できます。 - -{{EmbedInteractiveExample("pages/css/var.html")}} - -`var()` 関数は、プロパティ名、セレクター、またはプロパティ値以外のところでは使用できません。 (使用してしまうと、無効な構文が生成されるか、もしくはその変数に接続していない値が生成されてしまいます。) - -## 構文 - -関数の最初の引数は、置換されるカスタムプロパティの名前です。関数のオプションの 2 番目の引数は、代替値として機能します。最初の引数で参照されるカスタムプロパティが無効な場合、関数は2番目の値を使用します。 - -{{csssyntax}} - -> **Note:** 代替の構文は、カスタムプロパティの構文と同様にカンマを使用できます。たとえば `var(--foo, red, blue)` では、 `red, blue` を代替として定義します。つまり、最初のカンマから関数の最後にかけてのすべてが、代替値と見なされます。 - -### 値 - -- `` - - : カスタムプロパティの名前で、 2 つのハイフンで始まる識別子で表されます。カスタムプロパティは、作成者とユーザーだけが使用できます。 CSS はここに提示されているものを超えて意味を与えません。 -- `` - - : カスタムプロパティの代替値。カスタムプロパティが使用されているコンテキストが無効な場合に使用されます。この値には、改行、不等式の閉じ括弧、つまり `)`, `]`, `}`, トップレベルのセミコロン、感嘆符などの特別な意味を持つ文字を除く任意の文字を含めることができます。 - -## 例 - -### :root に設定されたカスタムプロパティの使用 - -```css -:root { - --main-bg-color: pink; -} - -body { - background-color: var(--main-bg-color); -} -``` - -### プロパティが設定されていなかったときに使用するための代替値つきのカスタムプロパティ - -```css -/* 代替 */ -/* コンポーネント内のスタイル: */ -.component .header { - color: var(--header-color, blue); /* header-color という変数は設定されていないため、代替値である blue がセットされます */ -} - -.component .text { - color: var(--text-color, black); -} - -/* より規模の大きなアプリケーションのスタイルでは */ -.component { - --text-color: #080; -} -``` - -## 仕様書 - -{{Specifications}} - -## ブラウザーの互換性 - -{{Compat}} - -## 関連情報 - -- {{cssxref("env()","env(…)")}} – ユーザーエージェントによって制御される読み取り専用環境変数 -- [CSS 変数の利用](/ja/docs/Web/CSS/Using_CSS_custom_properties) diff --git a/files/ja/web/css/var/index.md b/files/ja/web/css/var/index.md new file mode 100644 index 0000000000..264ebce855 --- /dev/null +++ b/files/ja/web/css/var/index.md @@ -0,0 +1,86 @@ +--- +title: var() +slug: Web/CSS/var +tags: + - CSS + - CSS カスタムプロパティ + - CSS 変数 + - CSS 関数 + - 実験的 + - 関数 + - リファレンス + - 変数 + - var + - var() +translation_of: Web/CSS/var() +original_slug: Web/CSS/var() +browser-compat: css.properties.custom-property.var +--- +{{CSSRef}} + +[CSS](/ja/docs/Web/CSS) の **`var()`** 関数は、他のプロパティの値の一部に代わって[カスタムプロパティ](/ja/docs/Web/CSS/--*) (「CSS 変数」と呼ばれることもあります) の値を挿入できます。 + +{{EmbedInteractiveExample("pages/css/var.html")}} + +`var()` 関数は、プロパティ名、セレクター、またはプロパティ値以外のところでは使用できません。 (使用してしまうと、無効な構文が生成されるか、もしくはその変数に接続していない値が生成されてしまいます。) + +## 構文 + +関数の最初の引数は、置換されるカスタムプロパティの名前です。関数のオプションの 2 番目の引数は、代替値として機能します。最初の引数で参照されるカスタムプロパティが無効な場合、関数は2番目の値を使用します。 + +{{csssyntax}} + +> **Note:** 代替の構文は、カスタムプロパティの構文と同様にカンマを使用できます。たとえば `var(--foo, red, blue)` では、 `red, blue` を代替として定義します。つまり、最初のカンマから関数の最後にかけてのすべてが、代替値と見なされます。 + +### 値 + +- `` + - : カスタムプロパティの名前で、 2 つのハイフンで始まる識別子で表されます。カスタムプロパティは、作成者とユーザーだけが使用できます。 CSS はここに提示されているものを超えて意味を与えません。 +- `` + - : カスタムプロパティの代替値。カスタムプロパティが使用されているコンテキストが無効な場合に使用されます。この値には、改行、不等式の閉じ括弧、つまり `)`, `]`, `}`, トップレベルのセミコロン、感嘆符などの特別な意味を持つ文字を除く任意の文字を含めることができます。 + +## 例 + +### :root に設定されたカスタムプロパティの使用 + +```css +:root { + --main-bg-color: pink; +} + +body { + background-color: var(--main-bg-color); +} +``` + +### プロパティが設定されていなかったときに使用するための代替値つきのカスタムプロパティ + +```css +/* 代替 */ +/* コンポーネント内のスタイル: */ +.component .header { + color: var(--header-color, blue); /* header-color という変数は設定されていないため、代替値である blue がセットされます */ +} + +.component .text { + color: var(--text-color, black); +} + +/* より規模の大きなアプリケーションのスタイルでは */ +.component { + --text-color: #080; +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("env()","env(…)")}} – ユーザーエージェントによって制御される読み取り専用環境変数 +- [CSS 変数の利用](/ja/docs/Web/CSS/Using_CSS_custom_properties) diff --git a/files/ko/_redirects.txt b/files/ko/_redirects.txt index b1c41121da..404c68ea80 100644 --- a/files/ko/_redirects.txt +++ b/files/ko/_redirects.txt @@ -573,16 +573,16 @@ /ko/docs/Web/CSS/Using_CSS_animations /ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations /ko/docs/Web/CSS/Using_CSS_transforms /ko/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms /ko/docs/Web/CSS/Using_CSS_variables /ko/docs/Web/CSS/Using_CSS_custom_properties -/ko/docs/Web/CSS/calc /ko/docs/Web/CSS/calc() +/ko/docs/Web/CSS/calc() /ko/docs/Web/CSS/calc /ko/docs/Web/CSS/currentcolor /ko/docs/Web/CSS/color_value#currentColor_키워드 /ko/docs/Web/CSS/cursor/Using_URL_values_for_the_cursor_property /ko/docs/Web/CSS/cursor -/ko/docs/Web/CSS/filter-function/blur /ko/docs/Web/CSS/filter-function/blur() -/ko/docs/Web/CSS/filter-function/brightness /ko/docs/Web/CSS/filter-function/brightness() -/ko/docs/Web/CSS/filter-function/contrast /ko/docs/Web/CSS/filter-function/contrast() -/ko/docs/Web/CSS/transform-function/matrix /ko/docs/Web/CSS/transform-function/matrix() -/ko/docs/Web/CSS/transform-function/scaleX /ko/docs/Web/CSS/transform-function/scaleX() -/ko/docs/Web/CSS/url /ko/docs/Web/CSS/url() -/ko/docs/Web/CSS/var /ko/docs/Web/CSS/var() +/ko/docs/Web/CSS/filter-function/blur() /ko/docs/Web/CSS/filter-function/blur +/ko/docs/Web/CSS/filter-function/brightness() /ko/docs/Web/CSS/filter-function/brightness +/ko/docs/Web/CSS/filter-function/contrast() /ko/docs/Web/CSS/filter-function/contrast +/ko/docs/Web/CSS/transform-function/matrix() /ko/docs/Web/CSS/transform-function/matrix +/ko/docs/Web/CSS/transform-function/scaleX() /ko/docs/Web/CSS/transform-function/scaleX +/ko/docs/Web/CSS/url() /ko/docs/Web/CSS/url +/ko/docs/Web/CSS/var() /ko/docs/Web/CSS/var /ko/docs/Web/CSS/시작하기 /en-US/docs/Learn/CSS/First_steps /ko/docs/Web/CSS/시작하기/CSS_동작_원리 /en-US/docs/Learn/CSS/First_steps/How_CSS_works /ko/docs/Web/CSS/시작하기/CSS란 /en-US/docs/Learn/CSS/First_steps/How_CSS_works diff --git a/files/ko/_wikihistory.json b/files/ko/_wikihistory.json index 651d51c35f..da77488cde 100644 --- a/files/ko/_wikihistory.json +++ b/files/ko/_wikihistory.json @@ -9047,7 +9047,7 @@ "dochoul" ] }, - "Web/CSS/calc()": { + "Web/CSS/calc": { "modified": "2020-11-04T09:08:57.096Z", "contributors": [ "chrisdavidmills", @@ -9142,21 +9142,21 @@ "alattalatta" ] }, - "Web/CSS/filter-function/blur()": { + "Web/CSS/filter-function/blur": { "modified": "2020-11-05T09:45:44.250Z", "contributors": [ "chrisdavidmills", "alattalatta" ] }, - "Web/CSS/filter-function/brightness()": { + "Web/CSS/filter-function/brightness": { "modified": "2020-11-05T09:57:22.993Z", "contributors": [ "chrisdavidmills", "alattalatta" ] }, - "Web/CSS/filter-function/contrast()": { + "Web/CSS/filter-function/contrast": { "modified": "2020-11-09T07:21:09.691Z", "contributors": [ "chrisdavidmills", @@ -9659,14 +9659,14 @@ "Sebastianz" ] }, - "Web/CSS/transform-function/matrix()": { + "Web/CSS/transform-function/matrix": { "modified": "2020-11-16T08:59:50.359Z", "contributors": [ "chrisdavidmills", "DeadIntegral" ] }, - "Web/CSS/transform-function/scaleX()": { + "Web/CSS/transform-function/scaleX": { "modified": "2020-11-30T10:20:51.450Z", "contributors": [ "chrisdavidmills", @@ -9692,7 +9692,7 @@ "Netaras" ] }, - "Web/CSS/url()": { + "Web/CSS/url": { "modified": "2020-10-15T22:10:55.121Z", "contributors": [ "alattalatta" @@ -9711,7 +9711,7 @@ "alattalatta" ] }, - "Web/CSS/var()": { + "Web/CSS/var": { "modified": "2020-11-04T09:10:36.975Z", "contributors": [ "chrisdavidmills", diff --git a/files/ko/web/css/calc()/index.html b/files/ko/web/css/calc()/index.html deleted file mode 100644 index 91da816390..0000000000 --- a/files/ko/web/css/calc()/index.html +++ /dev/null @@ -1,160 +0,0 @@ ---- -title: calc() -slug: Web/CSS/calc() -tags: - - CSS - - CSS Function - - Layout - - Reference - - Web -translation_of: Web/CSS/calc() ---- -
    {{CSSRef}}
    - -

    calc() CSS 함수를 사용하면 CSS 속성의 값으로 계산식을 지정할 수 있습니다. {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<percentage>")}}, {{cssxref("<number>")}}, 또는 {{cssxref("<integer>")}}를 받는 속성의 값으로 사용할 수 있습니다.

    - -

    구문

    - -
    /* property: calc(expression) */
-width: calc(100% - 80px);
-
    - -

    calc() 함수는 매개변수로 표현식 하나를 받고, 표현식의 결과가 최종 값이 됩니다. 표현식은 단순 계산식은 무엇이든 가능하며, 표준 연산자 우선순위를 따릅니다.

    - -
    -
    +
    -
    덧셈.
    -
    -
    -
    뺄셈.
    -
    *
    -
    곱셈. 하나 이상의 피연산자가 {{cssxref("<number>")}}여야 합니다.
    -
    /
    -
    나눗셈. 오른쪽 피연산자는 {{cssxref("<number>")}}여야 합니다.
    -
    - -

    피연산자로는 {{cssxref("<length>")}} 구문의 아무 값이나 사용할 수 있고, 원한다면 서로 다른 단위끼리도 계산할 수 있습니다. 괄호를 사용해서 연산 순서를 바꿀 수도 있습니다.

    - -

    참고

    - -
      -
    • 0으로 나누면 HTML 구문분석기에서 오류가 발생합니다.
      • -
    • +와 - 연산자는 좌우에 공백이 있어야 합니다. calc(50% -8px)은 백분율 값과 음수 길로 해석하여 유효하지 않지만, calc(50% - 8px)은 백분율과 길이의 뺄셈으로 해석합니다. 마찬가지로, calc(8px + -50%)는 길이와 음의 백분율간의 덧셈으로 처리합니다.
      • -
    • *와 / 연산자는 좌우 공백을 요구하지 않지만, 그래도 추가하는 편이 일관성을 유지하기에 좋습니다.
      • -
    • 표의 행, 열, 행/열 그룹, 자동이나 고정 레이아웃 칸에서 백분율을 포함한 수학식을 너비나 높이로 사용하면 auto 키워드를 사용한 것과 동일하게 처리합니다.
      • -
    • calc() 함수를 중첩해서 사용하면 내부의 calc()는 단순한 괄호로 간주합니다.
      • -
    - -

    형식 구문

    - -{{csssyntax}} - -

    예제

    - -

    요소를 화면에 여백과 함께 배치하기

    - -

    calc()를 이용하면 고정된 너비의 여백을 가진 요소를 쉽게 배치할 수 있습니다. 다음 예제에서는 화면을 가로지르면서 창의 좌우 모서리와 간격이 40픽셀인 배너를 생성합니다.

    - -
    .banner {
-  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;
-}
    - -
    <div class="banner">이건 현수막입니다!</div>
    - -

    {{EmbedLiveSample('요소를_화면에_여백과_함께_배치하기', 'auto', '60')}}

    - -

    입력 양식 요소를 컨테이너 크기에 자동으로 맞추기

    - -

    calc()의 다른 용도는 입력 양식의 필드가 적절한 여백을 갖추면서도 컨테이너 모서리 바깥으로 빠져나가지 않도록 설정하는 것입니다.

    - -

    다음 CSS 코드를 살펴보세요.

    - -
    input {
-  padding: 2px;
-  display: block;
-  width: calc(100% - 1em);
-}
-
-#formbox {
-  width: calc(100% / 6);
-  border: 1px solid black;
-  padding: 4px;
-}
    - -

    위 코드에서, 폼 스스로는 창에서 사용 가능한 공간의 1/6을 차지합니다. 그 후, 입력 필드가 적절한 크기를 가질 수 컨테이너 너비에서 1em 뺀 만큼을 calc()로 지정했습니다. 이제 HTML에 CSS를 적용해보겠습니다.

    - -
    <form>
-  <div id="formBox">
-    <label>뭔가 입력해 보세요.</label>
-    <input type="text">
-  </div>
-</form>
-
    - -

    {{EmbedLiveSample('입력_양식_요소를_컨테이너_크기에_자동으로_맞추기', '100%', '80')}}

    - -

    CSS 변수와 중첩 calc()

    - -

    CSS 변수도 calc()와 같이 사용할 수 있습니다. 다음 코드를 살펴보세요.

    - -
    .foo {
-  --widthA: 100px;
-  --widthB: calc(var(--widthA) / 2);
-  --widthC: calc(var(--widthB) / 2);
-  width: var(--widthC);
-}
    - -

    모든 변수를 펼치면 widthC의 값은 calc( calc( 100px / 2) / 2)가 됩니다. 그 후 .foo의 너비 속성으로 지정될 때, 모든 중첩 calc()는 깊이에 관계 없이 단순한 괄호로 바뀌므로 width 속성의 값은 calc( ( 100px / 2) / 2), 즉 25px이 됩니다. 요약하자면 calc() 안의 calc()는 그냥 괄호와 같습니다.

    - -

    접근성 고려사항

    - -

    calc()를 사용해 글씨 크기를 조절할땐 아래 코드처럼 피연산자 중 하나로 꼭 상대길이 단위를 사용해주세요.

    - -
    h1 {
-  font-size: calc(1.5rem + 3vw);
-}
    - -

    이제 페이지를 확대해도 글씨 크기의 비율이 적절히 유지됩니다.

    - - - -

    명세

    - - - - - - - - - - - - - - - - -
    명세상태비고
    {{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}{{Spec2('CSS3 Values')}}최초로 정의됨.
    - -

    브라우저 호환성

    - - - -

    {{Compat("css.types.calc")}}

    - -

    같이 보기

    - - diff --git a/files/ko/web/css/calc/index.html b/files/ko/web/css/calc/index.html new file mode 100644 index 0000000000..1cb83e6f7a --- /dev/null +++ b/files/ko/web/css/calc/index.html @@ -0,0 +1,161 @@ +--- +title: calc() +slug: Web/CSS/calc +tags: + - CSS + - CSS Function + - Layout + - Reference + - Web +translation_of: Web/CSS/calc() +original_slug: Web/CSS/calc() +--- +
    {{CSSRef}}
    + +

    calc() CSS 함수를 사용하면 CSS 속성의 값으로 계산식을 지정할 수 있습니다. {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<percentage>")}}, {{cssxref("<number>")}}, 또는 {{cssxref("<integer>")}}를 받는 속성의 값으로 사용할 수 있습니다.

    + +

    구문

    + +
    /* property: calc(expression) */
+width: calc(100% - 80px);
+
    + +

    calc() 함수는 매개변수로 표현식 하나를 받고, 표현식의 결과가 최종 값이 됩니다. 표현식은 단순 계산식은 무엇이든 가능하며, 표준 연산자 우선순위를 따릅니다.

    + +
    +
    +
    +
    덧셈.
    +
    -
    +
    뺄셈.
    +
    *
    +
    곱셈. 하나 이상의 피연산자가 {{cssxref("<number>")}}여야 합니다.
    +
    /
    +
    나눗셈. 오른쪽 피연산자는 {{cssxref("<number>")}}여야 합니다.
    +
    + +

    피연산자로는 {{cssxref("<length>")}} 구문의 아무 값이나 사용할 수 있고, 원한다면 서로 다른 단위끼리도 계산할 수 있습니다. 괄호를 사용해서 연산 순서를 바꿀 수도 있습니다.

    + +

    참고

    + +
      +
    • 0으로 나누면 HTML 구문분석기에서 오류가 발생합니다.
      • +
    • +와 - 연산자는 좌우에 공백이 있어야 합니다. calc(50% -8px)은 백분율 값과 음수 길로 해석하여 유효하지 않지만, calc(50% - 8px)은 백분율과 길이의 뺄셈으로 해석합니다. 마찬가지로, calc(8px + -50%)는 길이와 음의 백분율간의 덧셈으로 처리합니다.
      • +
    • *와 / 연산자는 좌우 공백을 요구하지 않지만, 그래도 추가하는 편이 일관성을 유지하기에 좋습니다.
      • +
    • 표의 행, 열, 행/열 그룹, 자동이나 고정 레이아웃 칸에서 백분율을 포함한 수학식을 너비나 높이로 사용하면 auto 키워드를 사용한 것과 동일하게 처리합니다.
      • +
    • calc() 함수를 중첩해서 사용하면 내부의 calc()는 단순한 괄호로 간주합니다.
      • +
    + +

    형식 구문

    + +{{csssyntax}} + +

    예제

    + +

    요소를 화면에 여백과 함께 배치하기

    + +

    calc()를 이용하면 고정된 너비의 여백을 가진 요소를 쉽게 배치할 수 있습니다. 다음 예제에서는 화면을 가로지르면서 창의 좌우 모서리와 간격이 40픽셀인 배너를 생성합니다.

    + +
    .banner {
+  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;
+}
    + +
    <div class="banner">이건 현수막입니다!</div>
    + +

    {{EmbedLiveSample('요소를_화면에_여백과_함께_배치하기', 'auto', '60')}}

    + +

    입력 양식 요소를 컨테이너 크기에 자동으로 맞추기

    + +

    calc()의 다른 용도는 입력 양식의 필드가 적절한 여백을 갖추면서도 컨테이너 모서리 바깥으로 빠져나가지 않도록 설정하는 것입니다.

    + +

    다음 CSS 코드를 살펴보세요.

    + +
    input {
+  padding: 2px;
+  display: block;
+  width: calc(100% - 1em);
+}
+
+#formbox {
+  width: calc(100% / 6);
+  border: 1px solid black;
+  padding: 4px;
+}
    + +

    위 코드에서, 폼 스스로는 창에서 사용 가능한 공간의 1/6을 차지합니다. 그 후, 입력 필드가 적절한 크기를 가질 수 컨테이너 너비에서 1em 뺀 만큼을 calc()로 지정했습니다. 이제 HTML에 CSS를 적용해보겠습니다.

    + +
    <form>
+  <div id="formBox">
+    <label>뭔가 입력해 보세요.</label>
+    <input type="text">
+  </div>
+</form>
+
    + +

    {{EmbedLiveSample('입력_양식_요소를_컨테이너_크기에_자동으로_맞추기', '100%', '80')}}

    + +

    CSS 변수와 중첩 calc()

    + +

    CSS 변수도 calc()와 같이 사용할 수 있습니다. 다음 코드를 살펴보세요.

    + +
    .foo {
+  --widthA: 100px;
+  --widthB: calc(var(--widthA) / 2);
+  --widthC: calc(var(--widthB) / 2);
+  width: var(--widthC);
+}
    + +

    모든 변수를 펼치면 widthC의 값은 calc( calc( 100px / 2) / 2)가 됩니다. 그 후 .foo의 너비 속성으로 지정될 때, 모든 중첩 calc()는 깊이에 관계 없이 단순한 괄호로 바뀌므로 width 속성의 값은 calc( ( 100px / 2) / 2), 즉 25px이 됩니다. 요약하자면 calc() 안의 calc()는 그냥 괄호와 같습니다.

    + +

    접근성 고려사항

    + +

    calc()를 사용해 글씨 크기를 조절할땐 아래 코드처럼 피연산자 중 하나로 꼭 상대길이 단위를 사용해주세요.

    + +
    h1 {
+  font-size: calc(1.5rem + 3vw);
+}
    + +

    이제 페이지를 확대해도 글씨 크기의 비율이 적절히 유지됩니다.

    + + + +

    명세

    + + + + + + + + + + + + + + + + +
    명세상태비고
    {{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}{{Spec2('CSS3 Values')}}최초로 정의됨.
    + +

    브라우저 호환성

    + + + +

    {{Compat("css.types.calc")}}

    + +

    같이 보기

    + + diff --git a/files/ko/web/css/filter-function/blur()/index.html b/files/ko/web/css/filter-function/blur()/index.html deleted file mode 100644 index e995c42c68..0000000000 --- a/files/ko/web/css/filter-function/blur()/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: blur() -slug: Web/CSS/filter-function/blur() -tags: - - CSS - - CSS Function - - Filter Effects - - Reference -translation_of: Web/CSS/filter-function/blur() ---- -
    {{cssref}}
    - -

    blur() CSS 함수는 주어진 이미지에 가우시안 블러를 적용합니다. 반환 값은 {{cssxref("<filter-function>")}}입니다.

    - -
    {{EmbedInteractiveExample("pages/css/function-blur.html")}}
    - - - -

    구문

    - -
    blur(radius)
    - -

    매개변수

    - -
    -
    radius
    -
    {{cssxref("<length>")}}로 지정한 블러 효과의 지름. 가우시안 함수의 표준 편차, 즉 화면에 보이는 픽셀의 색상이 어느 범위까지 섞일지를 지정합니다. 따라서 큰 값은 이미지를 더 흐리게 만듭니다. 0은 주어진 입력 결과를 그대로 반환합니다. 보간 시, 누락 값은 0입니다.
    -
    - -

    예제

    - -
    blur(0)        /* 변화 없음 */
-blur(8px)      /* 8px 블러 */
-blur(1.17rem)  /* 1.17rem 블러 */
    - -

    같이 보기

    - -
      -
    • {{cssxref("<filter-function>")}}
      • -
    diff --git a/files/ko/web/css/filter-function/blur/index.html b/files/ko/web/css/filter-function/blur/index.html new file mode 100644 index 0000000000..3059e5331a --- /dev/null +++ b/files/ko/web/css/filter-function/blur/index.html @@ -0,0 +1,41 @@ +--- +title: blur() +slug: Web/CSS/filter-function/blur +tags: + - CSS + - CSS Function + - Filter Effects + - Reference +translation_of: Web/CSS/filter-function/blur() +original_slug: Web/CSS/filter-function/blur() +--- +
    {{cssref}}
    + +

    blur() CSS 함수는 주어진 이미지에 가우시안 블러를 적용합니다. 반환 값은 {{cssxref("<filter-function>")}}입니다.

    + +
    {{EmbedInteractiveExample("pages/css/function-blur.html")}}
    + + + +

    구문

    + +
    blur(radius)
    + +

    매개변수

    + +
    +
    radius
    +
    {{cssxref("<length>")}}로 지정한 블러 효과의 지름. 가우시안 함수의 표준 편차, 즉 화면에 보이는 픽셀의 색상이 어느 범위까지 섞일지를 지정합니다. 따라서 큰 값은 이미지를 더 흐리게 만듭니다. 0은 주어진 입력 결과를 그대로 반환합니다. 보간 시, 누락 값은 0입니다.
    +
    + +

    예제

    + +
    blur(0)        /* 변화 없음 */
+blur(8px)      /* 8px 블러 */
+blur(1.17rem)  /* 1.17rem 블러 */
    + +

    같이 보기

    + +
      +
    • {{cssxref("<filter-function>")}}
      • +
    diff --git a/files/ko/web/css/filter-function/brightness()/index.html b/files/ko/web/css/filter-function/brightness()/index.html deleted file mode 100644 index 1fe4b03327..0000000000 --- a/files/ko/web/css/filter-function/brightness()/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: brightness() -slug: Web/CSS/filter-function/brightness() -tags: - - CSS - - CSS Function - - Filter Effects - - Reference -translation_of: Web/CSS/filter-function/brightness() ---- -
    {{cssref}}
    - -

    brightness() CSS 함수는 주어진 이미지에 선형 계수를 적용해 더 밝거나 어둡게 만듭니다. 반환 값은 {{cssxref("<filter-function>")}}입니다.

    - -
    {{EmbedInteractiveExample("pages/css/function-brightness.html")}}
    - - - -

    구문

    - -
    brightness(amount)
    - -

    매개변수

    - -
    -
    amount
    -
    {{cssxref("<number>")}} 또는 {{cssxref("<percentage>")}}로 지정한, 결과물의 밝기. 100% 미만의 값은 이미지를 어둡게 만들고, 100%를 초과하는 값은 밝게 합니다. 0%는 이미지를 완전한 검은색으로 바꾸고 100%는 주어진 입력 이미지를 그대로 반환합니다. 보간 시, 누락 값은 1입니다.
    -
    - -

    예제

    - -
    brightness(0%)   /* 완전한 검정 */
-brightness(0.4)  /* 40% 밝기 */
-brightness(1)    /* 변화 없음 */
-brightness(200%) /* 두 배 밝기 */
    - -

    같이 보기

    - -
      -
    • {{cssxref("<filter-function>")}}
      • -
    diff --git a/files/ko/web/css/filter-function/brightness/index.html b/files/ko/web/css/filter-function/brightness/index.html new file mode 100644 index 0000000000..8bee4e3d91 --- /dev/null +++ b/files/ko/web/css/filter-function/brightness/index.html @@ -0,0 +1,42 @@ +--- +title: brightness() +slug: Web/CSS/filter-function/brightness +tags: + - CSS + - CSS Function + - Filter Effects + - Reference +translation_of: Web/CSS/filter-function/brightness() +original_slug: Web/CSS/filter-function/brightness() +--- +
    {{cssref}}
    + +

    brightness() CSS 함수는 주어진 이미지에 선형 계수를 적용해 더 밝거나 어둡게 만듭니다. 반환 값은 {{cssxref("<filter-function>")}}입니다.

    + +
    {{EmbedInteractiveExample("pages/css/function-brightness.html")}}
    + + + +

    구문

    + +
    brightness(amount)
    + +

    매개변수

    + +
    +
    amount
    +
    {{cssxref("<number>")}} 또는 {{cssxref("<percentage>")}}로 지정한, 결과물의 밝기. 100% 미만의 값은 이미지를 어둡게 만들고, 100%를 초과하는 값은 밝게 합니다. 0%는 이미지를 완전한 검은색으로 바꾸고 100%는 주어진 입력 이미지를 그대로 반환합니다. 보간 시, 누락 값은 1입니다.
    +
    + +

    예제

    + +
    brightness(0%)   /* 완전한 검정 */
+brightness(0.4)  /* 40% 밝기 */
+brightness(1)    /* 변화 없음 */
+brightness(200%) /* 두 배 밝기 */
    + +

    같이 보기

    + +
      +
    • {{cssxref("<filter-function>")}}
      • +
    diff --git a/files/ko/web/css/filter-function/contrast()/index.html b/files/ko/web/css/filter-function/contrast()/index.html deleted file mode 100644 index 19828a4bbb..0000000000 --- a/files/ko/web/css/filter-function/contrast()/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: contrast() -slug: Web/CSS/filter-function/contrast() -tags: - - CSS - - CSS Function - - Filter Effects - - Reference -translation_of: Web/CSS/filter-function/contrast() ---- -
    {{cssref}}
    - -

    contrast() CSS 함수는 주어진 이미지의 대비를 조절합니다. 반환 값은 {{cssxref("<filter-function>")}}입니다.

    - -
    {{EmbedInteractiveExample("pages/css/function-contrast.html")}}
    - - - -

    구문

    - -
    contrast(amount)
    - -

    매개변수

    - -
    -
    amount
    -
    {{cssxref("<number>")}} 또는 {{cssxref("<percentage>")}}로 지정한, 결과물의 대비. 100% 미만의 값은 이미지의 대비를 낮추고, 100%를 초과하는 값은 높입니다. 0%는 이미지를 완전히 회색으로 바꾸고 100%는 입력 이미지를 그대로 반환합니다. 보간 시, 누락 값은 1입니다.
    -
    - -

    예제

    - -
    contrast(0)     /* 완전히 회색 */
-contrast(65%)   /* 대비 65% */
-contrast(1)     /* 변화 없음 */
-contrast(200%)  /* 대비 두 배 */
    - -

    같이 보기

    - -
      -
    • {{cssxref("<filter-function>")}}
      • -
    diff --git a/files/ko/web/css/filter-function/contrast/index.html b/files/ko/web/css/filter-function/contrast/index.html new file mode 100644 index 0000000000..4680ba884e --- /dev/null +++ b/files/ko/web/css/filter-function/contrast/index.html @@ -0,0 +1,42 @@ +--- +title: contrast() +slug: Web/CSS/filter-function/contrast +tags: + - CSS + - CSS Function + - Filter Effects + - Reference +translation_of: Web/CSS/filter-function/contrast() +original_slug: Web/CSS/filter-function/contrast() +--- +
    {{cssref}}
    + +

    contrast() CSS 함수는 주어진 이미지의 대비를 조절합니다. 반환 값은 {{cssxref("<filter-function>")}}입니다.

    + +
    {{EmbedInteractiveExample("pages/css/function-contrast.html")}}
    + + + +

    구문

    + +
    contrast(amount)
    + +

    매개변수

    + +
    +
    amount
    +
    {{cssxref("<number>")}} 또는 {{cssxref("<percentage>")}}로 지정한, 결과물의 대비. 100% 미만의 값은 이미지의 대비를 낮추고, 100%를 초과하는 값은 높입니다. 0%는 이미지를 완전히 회색으로 바꾸고 100%는 입력 이미지를 그대로 반환합니다. 보간 시, 누락 값은 1입니다.
    +
    + +

    예제

    + +
    contrast(0)     /* 완전히 회색 */
+contrast(65%)   /* 대비 65% */
+contrast(1)     /* 변화 없음 */
+contrast(200%)  /* 대비 두 배 */
    + +

    같이 보기

    + +
      +
    • {{cssxref("<filter-function>")}}
      • +
    diff --git a/files/ko/web/css/transform-function/matrix()/index.html b/files/ko/web/css/transform-function/matrix()/index.html deleted file mode 100644 index cf9940c92a..0000000000 --- a/files/ko/web/css/transform-function/matrix()/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: matrix() -slug: Web/CSS/transform-function/matrix() -translation_of: Web/CSS/transform-function/matrix() ---- -
    {{CSSRef}}
    - -

    matrix() CSS 함수는 2D 변형 동차 행렬을 선언합니다. 결과는 {{cssxref("<transform-function>")}} 데이터 타입입니다.

    - -
    -

    주의: matrix(a, b, c, d, tx, ty) 는 matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1) 를 짧게 쓴 것입니다.

    -
    - -

    Syntax

    - -

    matrix() 함수는 6개의 값을 지정합니다. 상수 값은 묵시적이며, 매개변수(parameter)로 전달하지 않습니다. 다른 매개 변수는 column-major 순서로 설명됩니다.

    - -
    주의: 파이어폭스 16까지, Gecko(엔진) tx, ty 에{{cssxref("<length>")}} 값을 허용했습니다.
    - -
    matrix(a, b, c, d, tx, ty)
-
    - -

    Values

    - -
    -
    a b c d
    -
    {{cssxref("<number>")}}는 선형 변환(linear transformation)을 설명합니다.
    -
    tx ty
    -
    {{cssxref("<number>")}}는 적용 할 이동(translation)을 설명합니다.
    -
    - - - - - - - - - - - - - - - - - - - - - -
    Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
    ac bd actxbdty001 actxbdty001 ac0txbd0ty00100001
    [a b c d tx ty]
    - -

    Examples

    - -

    HTML

    - -
    <div>Normal</div>
-<div class="changed">Changed</div>
    - -

    CSS

    - -
    div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.changed {
-  transform: matrix(1, 2, -1, 1, 80, 80);
-  background-color: pink;
-}
    - -

    Result

    - -

    {{EmbedLiveSample("Examples", 350, 350)}}

    - -

    Browser compatibility

    - -

    호환성 정보는 <transform-function> 데이터 타입을 확인하세요.

    - -

    See also

    - - diff --git a/files/ko/web/css/transform-function/matrix/index.html b/files/ko/web/css/transform-function/matrix/index.html new file mode 100644 index 0000000000..20bcd6ef75 --- /dev/null +++ b/files/ko/web/css/transform-function/matrix/index.html @@ -0,0 +1,90 @@ +--- +title: matrix() +slug: Web/CSS/transform-function/matrix +translation_of: Web/CSS/transform-function/matrix() +original_slug: Web/CSS/transform-function/matrix() +--- +
    {{CSSRef}}
    + +

    matrix() CSS 함수는 2D 변형 동차 행렬을 선언합니다. 결과는 {{cssxref("<transform-function>")}} 데이터 타입입니다.

    + +
    +

    주의: matrix(a, b, c, d, tx, ty) 는 matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1) 를 짧게 쓴 것입니다.

    +
    + +

    Syntax

    + +

    matrix() 함수는 6개의 값을 지정합니다. 상수 값은 묵시적이며, 매개변수(parameter)로 전달하지 않습니다. 다른 매개 변수는 column-major 순서로 설명됩니다.

    + +
    주의: 파이어폭스 16까지, Gecko(엔진) tx, ty 에{{cssxref("<length>")}} 값을 허용했습니다.
    + +
    matrix(a, b, c, d, tx, ty)
+
    + +

    Values

    + +
    +
    a b c d
    +
    {{cssxref("<number>")}}는 선형 변환(linear transformation)을 설명합니다.
    +
    tx ty
    +
    {{cssxref("<number>")}}는 적용 할 이동(translation)을 설명합니다.
    +
    + + + + + + + + + + + + + + + + + + + + + +
    Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
    ac bd actxbdty001 actxbdty001 ac0txbd0ty00100001
    [a b c d tx ty]
    + +

    Examples

    + +

    HTML

    + +
    <div>Normal</div>
+<div class="changed">Changed</div>
    + +

    CSS

    + +
    div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.changed {
+  transform: matrix(1, 2, -1, 1, 80, 80);
+  background-color: pink;
+}
    + +

    Result

    + +

    {{EmbedLiveSample("Examples", 350, 350)}}

    + +

    Browser compatibility

    + +

    호환성 정보는 <transform-function> 데이터 타입을 확인하세요.

    + +

    See also

    + + diff --git a/files/ko/web/css/transform-function/scalex()/index.html b/files/ko/web/css/transform-function/scalex()/index.html deleted file mode 100644 index 7ef38655fe..0000000000 --- a/files/ko/web/css/transform-function/scalex()/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: scaleX() -slug: Web/CSS/transform-function/scaleX() -translation_of: Web/CSS/transform-function/scaleX() ---- -
    {{CSSRef}}
    - -

    CSS 함수인 scaleX() x 축을 따라 (수평방향)으로 요소의 크기를 조절하는 변형을 정의합니다. 결과는  {{cssxref("<transform-function>")}}  데이터 타입 입니다.

    - -

    - -

    스케일 팩터가 1 인 경우를 제외하고 상수 요소로 각 엘리먼트 위치의 가로 좌표를 수정합니다, 이 경우 함수는 항등 변환입니다.스케일링은 등방성이 아니며, 엘리먼트의 각도는 보존되지 않습니다.scaleX(-1) 은 원점을 지나는 수직축이 있는 대칭축을 의미합니다  ( {{cssxref("transform-origin")}} 속성의해 지정되어집니다).

    - -
    -

    Note: scaleX(sx) 는 scale(sx, 1) 또는  scale3d(sx, 1, 1) 와 같습니다.

    -
    - -

    Syntax

    - -
    scaleX(s)
-
    - -

    Values

    - -
    -
    s
    -
    요소의 각 위치의 횡좌표에 적용 할 스케일링 펙터를 나타내는 {{cssxref("<number>")}} 입니다.
    -
    - - - - - - - - - - - - - - - - - - - - - -
    Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
    s0 01 s00010001 s00010001 s000010000100001
    [s 0 0 1 0 0]
    - -

    Examples

    - -

    HTML

    - -
    <div>Normal</div>
-<div class="scaled">Scaled</div>
    - -

    CSS

    - -
    div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.scaled {
-  transform: scaleX(0.6);
-  background-color: pink;
-}
-
    - -

    Result

    - -

    {{EmbedLiveSample("Examples","200","200")}}

    - -

    Specifications

    - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName("CSS3 Transforms", "#funcdef-transform-scalex", "scaleX()")}}{{Spec2("CSS3 Transforms")}}Initial definition
    - -

    See also

    - -
      -
    • {{cssxref("transform")}}
      • -
    • {{cssxref("<transform-function>")}}
      • -
    diff --git a/files/ko/web/css/transform-function/scalex/index.html b/files/ko/web/css/transform-function/scalex/index.html new file mode 100644 index 0000000000..19343ddcda --- /dev/null +++ b/files/ko/web/css/transform-function/scalex/index.html @@ -0,0 +1,102 @@ +--- +title: scaleX() +slug: Web/CSS/transform-function/scaleX +translation_of: Web/CSS/transform-function/scaleX() +original_slug: Web/CSS/transform-function/scaleX() +--- +
    {{CSSRef}}
    + +

    CSS 함수인 scaleX() x 축을 따라 (수평방향)으로 요소의 크기를 조절하는 변형을 정의합니다. 결과는  {{cssxref("<transform-function>")}}  데이터 타입 입니다.

    + +

    + +

    스케일 팩터가 1 인 경우를 제외하고 상수 요소로 각 엘리먼트 위치의 가로 좌표를 수정합니다, 이 경우 함수는 항등 변환입니다.스케일링은 등방성이 아니며, 엘리먼트의 각도는 보존되지 않습니다.scaleX(-1) 은 원점을 지나는 수직축이 있는 대칭축을 의미합니다  ( {{cssxref("transform-origin")}} 속성의해 지정되어집니다).

    + +
    +

    Note: scaleX(sx) 는 scale(sx, 1) 또는  scale3d(sx, 1, 1) 와 같습니다.

    +
    + +

    Syntax

    + +
    scaleX(s)
+
    + +

    Values

    + +
    +
    s
    +
    요소의 각 위치의 횡좌표에 적용 할 스케일링 펙터를 나타내는 {{cssxref("<number>")}} 입니다.
    +
    + + + + + + + + + + + + + + + + + + + + + +
    Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
    s0 01 s00010001 s00010001 s000010000100001
    [s 0 0 1 0 0]
    + +

    Examples

    + +

    HTML

    + +
    <div>Normal</div>
+<div class="scaled">Scaled</div>
    + +

    CSS

    + +
    div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.scaled {
+  transform: scaleX(0.6);
+  background-color: pink;
+}
+
    + +

    Result

    + +

    {{EmbedLiveSample("Examples","200","200")}}

    + +

    Specifications

    + + + + + + + + + + + + + + + + +
    SpecificationStatusComment
    {{SpecName("CSS3 Transforms", "#funcdef-transform-scalex", "scaleX()")}}{{Spec2("CSS3 Transforms")}}Initial definition
    + +

    See also

    + +
      +
    • {{cssxref("transform")}}
      • +
    • {{cssxref("<transform-function>")}}
      • +
    diff --git a/files/ko/web/css/url()/index.html b/files/ko/web/css/url()/index.html deleted file mode 100644 index 204eb3329d..0000000000 --- a/files/ko/web/css/url()/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: -slug: Web/CSS/url() -tags: - - CSS - - CSS Data Type - - Layout - - Reference -translation_of: Web/CSS/url() -translation_of_original: Web/CSS/url -original_slug: Web/CSS/url ---- -
    {{ CssRef() }}
    - -

    <url> CSS 자료형은 이미지나 글꼴 등 리소스를 가리키는 문자열을 나타냅니다. URL은 {{ Cssxref("background-image") }}, {{ Cssxref("cursor") }}, {{ cssxref("list-style") }} 등 다양한 속성에서 사용할 수 있습니다.

    - -
    -

    URI와 URL URI와 URL은 다릅니다. URI는 단순히 리소스의 식별자입니다. URL은 URI의 종류 중 하나로, 리소스의 위치를 표현합니다. URI는 URL일 수도 있고, 리소스의 이름(URN)일 수도 있습니다.

    - -

    CSS Level 1의 url() 함수형 표기법은 순수 URL을 나타낼 때만 사용했고, CSS Level 2에서 범위가 늘어나 URL이나 URN 등 어떤 URI도 사용할 수 있도록 바뀌었습니다. 이로써 url()을 사용해 <uri> CSS 자료형을 표현할 수 있었는데, 이상한 방식인데다 실제 CSS에서 URN은 거의 사용하지 않았으므로 불필요하다고 생각할만한 점이었습니다. CSS3에서는 혼란을 잠재우기 위해 초기의 더 좁은 정의로 돌아갔기 때문에 이제 url()은 <url>만을 나타낼 수 있습니다.

    -
    - -

    구문

    - -

    <url> 자료형은 url() 함수형 표기법을 사용해 설정합니다. 따옴표는 선택사항으로 작은따옴표, 큰따옴표 둘 다 사용할 수 있습니다. 상대 URL도 사용할 수 있으며, 웹페이지의 URL이 아닌 스타일시트의 URL을 기준으로 사용합니다.

    - -
    <a_css_property>: url("http://mysite.example.com/mycursor.png")
-<a_css_property>: url('http://mysite.example.com/mycursor.png')
-<a_css_property>: url(http://mysite.example.com/mycursor.png)
-
    - -
    -

    참고: Firefox 15부터, 0x7e을 초과하는 제어 문자는 URL을 따옴표로 둘러싸야 유요합니다. 자세한 내용은 {{Bug(752230)}}을 참고하세요.

    -
    - -

    예제

    - -
    .topbanner {
-  background: url("topbanner.png") #00D no-repeat fixed;
-}
-
    - -
    ul {
-  list-style: square url(http://www.example.com/redball.png);
-}
-
    - -

    명세

    - - - - - - - - - - - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{ SpecName('CSS3 Values', '#urls', '<url>') }}{{ Spec2('CSS3 Values') }}No significant change from CSS Level 2 (Revision 1).
    {{ Specname('CSS2.1', 'syndata.html#uri', '<uri>') }}{{ Spec2('CSS2.1') }}No significant change from CSS Level 1.
    {{ SpecName('CSS1', '#url', '<url>') }}{{ Spec2('CSS1') }}Initial definition.
    - -

    브라우저 호환성

    - - - -

    {{Compat("css.types.url")}}

    diff --git a/files/ko/web/css/url/index.html b/files/ko/web/css/url/index.html new file mode 100644 index 0000000000..f33bd31291 --- /dev/null +++ b/files/ko/web/css/url/index.html @@ -0,0 +1,81 @@ +--- +title: +slug: Web/CSS/url +tags: + - CSS + - CSS Data Type + - Layout + - Reference +translation_of: Web/CSS/url() +translation_of_original: Web/CSS/url +original_slug: Web/CSS/url() +--- +
    {{ CssRef() }}
    + +

    <url> CSS 자료형은 이미지나 글꼴 등 리소스를 가리키는 문자열을 나타냅니다. URL은 {{ Cssxref("background-image") }}, {{ Cssxref("cursor") }}, {{ cssxref("list-style") }} 등 다양한 속성에서 사용할 수 있습니다.

    + +
    +

    URI와 URL URI와 URL은 다릅니다. URI는 단순히 리소스의 식별자입니다. URL은 URI의 종류 중 하나로, 리소스의 위치를 표현합니다. URI는 URL일 수도 있고, 리소스의 이름(URN)일 수도 있습니다.

    + +

    CSS Level 1의 url() 함수형 표기법은 순수 URL을 나타낼 때만 사용했고, CSS Level 2에서 범위가 늘어나 URL이나 URN 등 어떤 URI도 사용할 수 있도록 바뀌었습니다. 이로써 url()을 사용해 <uri> CSS 자료형을 표현할 수 있었는데, 이상한 방식인데다 실제 CSS에서 URN은 거의 사용하지 않았으므로 불필요하다고 생각할만한 점이었습니다. CSS3에서는 혼란을 잠재우기 위해 초기의 더 좁은 정의로 돌아갔기 때문에 이제 url()은 <url>만을 나타낼 수 있습니다.

    +
    + +

    구문

    + +

    <url> 자료형은 url() 함수형 표기법을 사용해 설정합니다. 따옴표는 선택사항으로 작은따옴표, 큰따옴표 둘 다 사용할 수 있습니다. 상대 URL도 사용할 수 있으며, 웹페이지의 URL이 아닌 스타일시트의 URL을 기준으로 사용합니다.

    + +
    <a_css_property>: url("http://mysite.example.com/mycursor.png")
+<a_css_property>: url('http://mysite.example.com/mycursor.png')
+<a_css_property>: url(http://mysite.example.com/mycursor.png)
+
    + +
    +

    참고: Firefox 15부터, 0x7e을 초과하는 제어 문자는 URL을 따옴표로 둘러싸야 유요합니다. 자세한 내용은 {{Bug(752230)}}을 참고하세요.

    +
    + +

    예제

    + +
    .topbanner {
+  background: url("topbanner.png") #00D no-repeat fixed;
+}
+
    + +
    ul {
+  list-style: square url(http://www.example.com/redball.png);
+}
+
    + +

    명세

    + + + + + + + + + + + + + + + + + + + + + + + + + + +
    SpecificationStatusComment
    {{ SpecName('CSS3 Values', '#urls', '<url>') }}{{ Spec2('CSS3 Values') }}No significant change from CSS Level 2 (Revision 1).
    {{ Specname('CSS2.1', 'syndata.html#uri', '<uri>') }}{{ Spec2('CSS2.1') }}No significant change from CSS Level 1.
    {{ SpecName('CSS1', '#url', '<url>') }}{{ Spec2('CSS1') }}Initial definition.
    + +

    브라우저 호환성

    + + + +

    {{Compat("css.types.url")}}

    diff --git a/files/ko/web/css/var()/index.html b/files/ko/web/css/var()/index.html deleted file mode 100644 index a4f904b4e2..0000000000 --- a/files/ko/web/css/var()/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: var() -slug: Web/CSS/var() -tags: - - CSS - - CSS Custom Properties - - CSS Function - - CSS Variable - - CSS 변수 - - Experimental - - Reference -translation_of: Web/CSS/var() ---- -
    {{CSSRef}}
    - -

    CSS var() 함수는 사용자 지정 속성, 또는 "CSS 변수"의 값을 다른 속성의 값으로 지정할 때 사용합니다.

    - -
    var(--header-color, blue);
    - -

    var() 함수는 값이 아닌 속성 이름, 선택자 등 다른 곳에 사용할 수 없습니다. 시도할 경우 유효하지 않은 구문이 되거나, 변수와 관계없는 값이 됩니다.

    - -

    구문

    - -

    첫 번째 인수는 값을 가져올 사용자 지정 속성의 이름입니다. 선택적으로 제공할 수 있는 두 번째 인수는 대체값으로, 대상 사용자 지정 속성이 유효하지 않은 경우 대신 사용합니다.

    - -{{csssyntax}} - -
    -

    참고: 대체값 구문은 사용자 지정 속성 구문과 동일하게 쉼표를 허용합니다. 그러므로 var(--foo, red, blue)의 대체값은 쉼표까지 포함한 red, blue입니다. 말하자면 첫 번째 쉼표의 뒤쪽은 모두 대체값이 되는 것입니다.

    -
    - -

    값

    - -
    -
    <custom-property-name>
    -
    두 개의 대시로 시작하는, 사용자 지정 속성의 이름을 나타내는 식별자.
    -
    <declaration-value>
    -
    현재 맥락에서, 주어진 사용자 지정 속성이 유효하지 않으면 대신 사용할 대체값. 새 줄, 짝 없이 닫는 괄호(), ], }) 세미콜론, 느낌표 등 특별한 의미를 가진 문자를 제외한 모든 문자를 사용할 수 있습니다.
    -
    - -

    예제

    - -
    :root {
-  --main-bg-color: pink;
-}
-
-body {
-  background-color: var(--main-bg-color);
-}
-
    - -
    /* Fallback */
-/* In the component’s style: */
-.component .header {
-  color: var(--header-color, blue); /* header-color isn’t set, and so remains blue, the fallback value */
-}
-
-.component .text {
-  color: var(--text-color, black);
-}
-
-/* In the larger application’s style: */
-.component {
-  --text-color: #080;
-}
-
    - -

    명세

    - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName('CSS3 Variables', '#using-variables', 'var()')}}{{Spec2('CSS3 Variables')}}Initial definition
    - -

    브라우저 호환성

    - - - -

    {{Compat("css.properties.custom-property.var")}}

    - -

    같이 보기

    - -
      -
    • {{cssxref("env","env(…)")}} – 사용자 에이전트가 통제하는 읽기 전용 환경 변수.
      • -
    • CSS 변수 사용하기
      • -
    diff --git a/files/ko/web/css/var/index.html b/files/ko/web/css/var/index.html new file mode 100644 index 0000000000..42c7c04984 --- /dev/null +++ b/files/ko/web/css/var/index.html @@ -0,0 +1,99 @@ +--- +title: var() +slug: Web/CSS/var +tags: + - CSS + - CSS Custom Properties + - CSS Function + - CSS Variable + - CSS 변수 + - Experimental + - Reference +translation_of: Web/CSS/var() +original_slug: Web/CSS/var() +--- +
    {{CSSRef}}
    + +

    CSS var() 함수는 사용자 지정 속성, 또는 "CSS 변수"의 값을 다른 속성의 값으로 지정할 때 사용합니다.

    + +
    var(--header-color, blue);
    + +

    var() 함수는 값이 아닌 속성 이름, 선택자 등 다른 곳에 사용할 수 없습니다. 시도할 경우 유효하지 않은 구문이 되거나, 변수와 관계없는 값이 됩니다.

    + +

    구문

    + +

    첫 번째 인수는 값을 가져올 사용자 지정 속성의 이름입니다. 선택적으로 제공할 수 있는 두 번째 인수는 대체값으로, 대상 사용자 지정 속성이 유효하지 않은 경우 대신 사용합니다.

    + +{{csssyntax}} + +
    +

    참고: 대체값 구문은 사용자 지정 속성 구문과 동일하게 쉼표를 허용합니다. 그러므로 var(--foo, red, blue)의 대체값은 쉼표까지 포함한 red, blue입니다. 말하자면 첫 번째 쉼표의 뒤쪽은 모두 대체값이 되는 것입니다.

    +
    + +

    값

    + +
    +
    <custom-property-name>
    +
    두 개의 대시로 시작하는, 사용자 지정 속성의 이름을 나타내는 식별자.
    +
    <declaration-value>
    +
    현재 맥락에서, 주어진 사용자 지정 속성이 유효하지 않으면 대신 사용할 대체값. 새 줄, 짝 없이 닫는 괄호(), ], }) 세미콜론, 느낌표 등 특별한 의미를 가진 문자를 제외한 모든 문자를 사용할 수 있습니다.
    +
    + +

    예제

    + +
    :root {
+  --main-bg-color: pink;
+}
+
+body {
+  background-color: var(--main-bg-color);
+}
+
    + +
    /* Fallback */
+/* In the component’s style: */
+.component .header {
+  color: var(--header-color, blue); /* header-color isn’t set, and so remains blue, the fallback value */
+}
+
+.component .text {
+  color: var(--text-color, black);
+}
+
+/* In the larger application’s style: */
+.component {
+  --text-color: #080;
+}
+
    + +

    명세

    + + + + + + + + + + + + + + + + +
    SpecificationStatusComment
    {{SpecName('CSS3 Variables', '#using-variables', 'var()')}}{{Spec2('CSS3 Variables')}}Initial definition
    + +

    브라우저 호환성

    + + + +

    {{Compat("css.properties.custom-property.var")}}

    + +

    같이 보기

    + +
      +
    • {{cssxref("env","env(…)")}} – 사용자 에이전트가 통제하는 읽기 전용 환경 변수.
      • +
    • CSS 변수 사용하기
      • +
    diff --git a/files/pl/_redirects.txt b/files/pl/_redirects.txt index b203ed26ff..78ab0c3ac3 100644 --- a/files/pl/_redirects.txt +++ b/files/pl/_redirects.txt @@ -1580,7 +1580,7 @@ /pl/docs/Web/CSS/Uzycie_zmiennych_CSS /pl/docs/Web/CSS/Using_CSS_custom_properties /pl/docs/Web/CSS/Wartość_początkowa /pl/docs/Web/CSS/initial_value /pl/docs/Web/CSS/cursor/Użycie_wartości_URL_dla_własności_cursor /pl/docs/conflicting/Web/CSS/cursor -/pl/docs/Web/CSS/transform-function/matrix /pl/docs/Web/CSS/transform-function/matrix() +/pl/docs/Web/CSS/transform-function/matrix() /pl/docs/Web/CSS/transform-function/matrix /pl/docs/Web/Dostępność /pl/docs/Web/Accessibility /pl/docs/Web/Dostępność/An_overview_of_accessible_web_applications_and_widgets /pl/docs/Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets /pl/docs/Web/Events/drag /pl/docs/Web/API/Document/drag_event diff --git a/files/pl/_wikihistory.json b/files/pl/_wikihistory.json index 4d24c22b32..5e1aae2d79 100644 --- a/files/pl/_wikihistory.json +++ b/files/pl/_wikihistory.json @@ -5167,7 +5167,7 @@ "draccicgeb" ] }, - "Web/CSS/transform-function/matrix()": { + "Web/CSS/transform-function/matrix": { "modified": "2020-11-16T09:00:02.174Z", "contributors": [ "chrisdavidmills", diff --git a/files/pl/web/css/transform-function/matrix()/index.html b/files/pl/web/css/transform-function/matrix()/index.html deleted file mode 100644 index 85a951052a..0000000000 --- a/files/pl/web/css/transform-function/matrix()/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: matrix() -slug: Web/CSS/transform-function/matrix() -tags: - - CSS - - Funkcje CSS - - Referencje - - Transformacje CSS - - wymagaPrzykładu -translation_of: Web/CSS/transform-function/matrix() ---- -
    {{CSSRef}}
    - -

    CSS-owa funkcja matrix() określa jednolitą macierz (matrix) transformacji 2D i składa się z sześciu określonych wartości. Wartości stałe tych macierzy są implementowane oraz nie działają jak parametry; pozostałe parametry są opisywane w porządku głównej kolumny.

    - -

    matrix(a, b, c, d, tx, ty) to shorthand dla matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1).

    - -
    Adnotacja: Od Firefoxa 16, Gecko akceptuje wartośc {{cssxref("<length>")}} dla tx oraz ty.
    - -

    Składnia

    - -
    matrix(a, b, c, d, tx, ty)
-
    - -

    Wartości

    - -
    -
    a b c d
    -
    {{cssxref("<number>")}} opisują transformacje linearne.
    -
    tx ty
    -
    {{cssxref("<number>")}} opisują transformacje do zastosowania.
    -
    - - - - - - - - - - - - - - - - - - - - - -
    Współrzędne kartezjańskie na ℝ2Współrzędne jednorodne na ℝℙ2Współrzędne kartezjańskie na ℝ3Współrzędne jednorodne na ℝℙ3
    ac bd actxbdty001 actxbdty001 ac0txbd0ty00100001
    [a b c d tx ty]
    - -

    Przykłady

    - -

    TBD

    diff --git a/files/pl/web/css/transform-function/matrix/index.html b/files/pl/web/css/transform-function/matrix/index.html new file mode 100644 index 0000000000..fc253969b5 --- /dev/null +++ b/files/pl/web/css/transform-function/matrix/index.html @@ -0,0 +1,59 @@ +--- +title: matrix() +slug: Web/CSS/transform-function/matrix +tags: + - CSS + - Funkcje CSS + - Referencje + - Transformacje CSS + - wymagaPrzykładu +translation_of: Web/CSS/transform-function/matrix() +original_slug: Web/CSS/transform-function/matrix() +--- +
    {{CSSRef}}
    + +

    CSS-owa funkcja matrix() określa jednolitą macierz (matrix) transformacji 2D i składa się z sześciu określonych wartości. Wartości stałe tych macierzy są implementowane oraz nie działają jak parametry; pozostałe parametry są opisywane w porządku głównej kolumny.

    + +

    matrix(a, b, c, d, tx, ty) to shorthand dla matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1).

    + +
    Adnotacja: Od Firefoxa 16, Gecko akceptuje wartośc {{cssxref("<length>")}} dla tx oraz ty.
    + +

    Składnia

    + +
    matrix(a, b, c, d, tx, ty)
+
    + +

    Wartości

    + +
    +
    a b c d
    +
    {{cssxref("<number>")}} opisują transformacje linearne.
    +
    tx ty
    +
    {{cssxref("<number>")}} opisują transformacje do zastosowania.
    +
    + + + + + + + + + + + + + + + + + + + + + +
    Współrzędne kartezjańskie na ℝ2Współrzędne jednorodne na ℝℙ2Współrzędne kartezjańskie na ℝ3Współrzędne jednorodne na ℝℙ3
    ac bd actxbdty001 actxbdty001 ac0txbd0ty00100001
    [a b c d tx ty]
    + +

    Przykłady

    + +

    TBD

    diff --git a/files/pt-br/_redirects.txt b/files/pt-br/_redirects.txt index 19211a793a..c0c179cf43 100644 --- a/files/pt-br/_redirects.txt +++ b/files/pt-br/_redirects.txt @@ -620,28 +620,28 @@ /pt-BR/docs/Web/CSS/Valor_atual /pt-BR/docs/Web/CSS/actual_value /pt-BR/docs/Web/CSS/Valor_resolvido /pt-BR/docs/Web/CSS/resolved_value /pt-BR/docs/Web/CSS/Valor_usado /pt-BR/docs/Web/CSS/used_value -/pt-BR/docs/Web/CSS/attr /pt-BR/docs/Web/CSS/attr() +/pt-BR/docs/Web/CSS/attr() /pt-BR/docs/Web/CSS/attr /pt-BR/docs/Web/CSS/box_model /pt-BR/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model -/pt-BR/docs/Web/CSS/calc /pt-BR/docs/Web/CSS/calc() -/pt-BR/docs/Web/CSS/element /pt-BR/docs/Web/CSS/element() -/pt-BR/docs/Web/CSS/env /pt-BR/docs/Web/CSS/env() -/pt-BR/docs/Web/CSS/filter-function/grayscale /pt-BR/docs/Web/CSS/filter-function/grayscale() -/pt-BR/docs/Web/CSS/filter-function/opacity /pt-BR/docs/Web/CSS/filter-function/opacity() -/pt-BR/docs/Web/CSS/filter-function/sepia /pt-BR/docs/Web/CSS/filter-function/sepia() +/pt-BR/docs/Web/CSS/calc() /pt-BR/docs/Web/CSS/calc +/pt-BR/docs/Web/CSS/element() /pt-BR/docs/Web/CSS/element +/pt-BR/docs/Web/CSS/env() /pt-BR/docs/Web/CSS/env +/pt-BR/docs/Web/CSS/filter-function/grayscale() /pt-BR/docs/Web/CSS/filter-function/grayscale +/pt-BR/docs/Web/CSS/filter-function/opacity() /pt-BR/docs/Web/CSS/filter-function/opacity +/pt-BR/docs/Web/CSS/filter-function/sepia() /pt-BR/docs/Web/CSS/filter-function/sepia /pt-BR/docs/Web/CSS/hifens /pt-BR/docs/Web/CSS/hyphens /pt-BR/docs/Web/CSS/imagem /pt-BR/docs/Web/CSS/image /pt-BR/docs/Web/CSS/máscara /pt-BR/docs/Web/CSS/mask /pt-BR/docs/Web/CSS/sintaxe /pt-BR/docs/Web/CSS/Syntax -/pt-BR/docs/Web/CSS/transform-function/matrix /pt-BR/docs/Web/CSS/transform-function/matrix() -/pt-BR/docs/Web/CSS/transform-function/perspective /pt-BR/docs/Web/CSS/transform-function/perspective() -/pt-BR/docs/Web/CSS/transform-function/rotate /pt-BR/docs/Web/CSS/transform-function/rotate() -/pt-BR/docs/Web/CSS/transform-function/rotate3d /pt-BR/docs/Web/CSS/transform-function/rotate3d() -/pt-BR/docs/Web/CSS/transform-function/scale /pt-BR/docs/Web/CSS/transform-function/scale() -/pt-BR/docs/Web/CSS/transform-function/translate /pt-BR/docs/Web/CSS/transform-function/translate() +/pt-BR/docs/Web/CSS/transform-function/matrix() /pt-BR/docs/Web/CSS/transform-function/matrix +/pt-BR/docs/Web/CSS/transform-function/perspective() /pt-BR/docs/Web/CSS/transform-function/perspective +/pt-BR/docs/Web/CSS/transform-function/rotate() /pt-BR/docs/Web/CSS/transform-function/rotate +/pt-BR/docs/Web/CSS/transform-function/rotate3d() /pt-BR/docs/Web/CSS/transform-function/rotate3d +/pt-BR/docs/Web/CSS/transform-function/scale() /pt-BR/docs/Web/CSS/transform-function/scale +/pt-BR/docs/Web/CSS/transform-function/translate() /pt-BR/docs/Web/CSS/transform-function/translate /pt-BR/docs/Web/CSS/valor_computado /pt-BR/docs/Web/CSS/computed_value /pt-BR/docs/Web/CSS/valor_espeficifco /pt-BR/docs/Web/CSS/specified_value /pt-BR/docs/Web/CSS/valor_inicial /pt-BR/docs/Web/CSS/initial_value -/pt-BR/docs/Web/CSS/var /pt-BR/docs/Web/CSS/var() +/pt-BR/docs/Web/CSS/var() /pt-BR/docs/Web/CSS/var /pt-BR/docs/Web/CSS/word-wrap /pt-BR/docs/Web/CSS/overflow-wrap /pt-BR/docs/Web/Demos_of_open_web_technologies /pt-BR/docs/Web/Demos /pt-BR/docs/Web/Events/DOMContentLoaded /pt-BR/docs/Web/API/Window/DOMContentLoaded_event diff --git a/files/pt-br/_wikihistory.json b/files/pt-br/_wikihistory.json index 034ab18fb7..76360d901c 100644 --- a/files/pt-br/_wikihistory.json +++ b/files/pt-br/_wikihistory.json @@ -8027,7 +8027,7 @@ "daliannyvieira" ] }, - "Web/CSS/attr()": { + "Web/CSS/attr": { "modified": "2020-11-04T08:51:55.092Z", "contributors": [ "chrisdavidmills", @@ -8173,7 +8173,7 @@ "renatobalbino" ] }, - "Web/CSS/calc()": { + "Web/CSS/calc": { "modified": "2020-11-04T09:08:50.767Z", "contributors": [ "chrisdavidmills", @@ -8283,14 +8283,14 @@ "brasmon8351" ] }, - "Web/CSS/element()": { + "Web/CSS/element": { "modified": "2020-11-10T11:06:23.872Z", "contributors": [ "chrisdavidmills", "JonatasAmaral" ] }, - "Web/CSS/env()": { + "Web/CSS/env": { "modified": "2020-11-10T11:11:50.127Z", "contributors": [ "chrisdavidmills", @@ -8303,21 +8303,21 @@ "mfluehr" ] }, - "Web/CSS/filter-function/grayscale()": { + "Web/CSS/filter-function/grayscale": { "modified": "2020-11-10T11:19:23.773Z", "contributors": [ "chrisdavidmills", "BrunaGil" ] }, - "Web/CSS/filter-function/opacity()": { + "Web/CSS/filter-function/opacity": { "modified": "2020-11-16T09:08:08.691Z", "contributors": [ "chrisdavidmills", "larimaza" ] }, - "Web/CSS/filter-function/sepia()": { + "Web/CSS/filter-function/sepia": { "modified": "2020-11-30T10:24:47.934Z", "contributors": [ "chrisdavidmills", @@ -8754,42 +8754,42 @@ "mfluehr" ] }, - "Web/CSS/transform-function/matrix()": { + "Web/CSS/transform-function/matrix": { "modified": "2020-11-16T09:00:13.847Z", "contributors": [ "chrisdavidmills", "MarcosNakamine" ] }, - "Web/CSS/transform-function/perspective()": { + "Web/CSS/transform-function/perspective": { "modified": "2020-11-16T09:10:49.924Z", "contributors": [ "chrisdavidmills", "larimaza" ] }, - "Web/CSS/transform-function/rotate()": { + "Web/CSS/transform-function/rotate": { "modified": "2020-11-19T16:06:09.849Z", "contributors": [ "chrisdavidmills", "YurePereira" ] }, - "Web/CSS/transform-function/rotate3d()": { + "Web/CSS/transform-function/rotate3d": { "modified": "2020-11-19T16:07:35.157Z", "contributors": [ "chrisdavidmills", "larimaza" ] }, - "Web/CSS/transform-function/scale()": { + "Web/CSS/transform-function/scale": { "modified": "2020-11-30T10:15:54.148Z", "contributors": [ "chrisdavidmills", "larimaza" ] }, - "Web/CSS/transform-function/translate()": { + "Web/CSS/transform-function/translate": { "modified": "2020-11-30T10:30:42.247Z", "contributors": [ "chrisdavidmills", @@ -8830,7 +8830,7 @@ "Fernandolrs" ] }, - "Web/CSS/var()": { + "Web/CSS/var": { "modified": "2020-11-04T09:10:42.127Z", "contributors": [ "chrisdavidmills", diff --git a/files/pt-br/web/css/attr()/index.html b/files/pt-br/web/css/attr()/index.html deleted file mode 100644 index c5a2139b50..0000000000 --- a/files/pt-br/web/css/attr()/index.html +++ /dev/null @@ -1,213 +0,0 @@ ---- -title: attr -slug: Web/CSS/attr() -tags: - - CSS - - Esquema - - Função CSS - - Internet - - Laioute - - Rede - - Referencia - - Web -translation_of: Web/CSS/attr() ---- -
    {{CSSRef}}
    - -

    A função attr() do CSS  é utilizada para se obter o valor de um determinado atributo do elemento selecionado e usá-lo na folha de estilo. Também pode ser utilizado em pseudo-elementos, nesse caso o valor do atributo no pseudo-elemento do elemento original é retornado.

    - -
    /* Uso Simples */
-attr(data-count);
-attr(title);
-
-/* Com o tipo */
-attr(src url);
-attr(data-count number);
-attr(data-width px);
-
-/* Com fallback */
-attr(data-count number, 0);
-attr(src url, '');
-attr(data-width px, inherit);
-attr(data-something, 'default');
-
    - -
    -

    Nota: A função attr() pode ser utilizada com qualquer propriedade CSS, mas o suporte para propriedades que não sejam {{cssxref("content")}} é experimental.

    -
    - -

    Sintaxe

    - -

    Valores

    - -
    -
    nome-do-atributo
    -
    É o nome do atributo HTML do elemento referenciado no CSS.
    -
    <tipo-ou-unidade> {{experimental_inline}}
    -
    É uma palavra-chave representando tanto o tipo quanto o valor do atributo, ou sua unidade, assim como no HTML alguns atributos tem unidades implícitas. Se o uso de <tipo-ou-unidade> como um valor para determinado atributo for inválido, a expressão attr() será inválida também. Se omitida, o padrão será string. A lista de valores válidos é: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Palavra-chaveTipo AssociadoComentárioValor Padrão
    string{{cssxref("<string>")}}O valor do atributo é tratado como um CSS {{cssxref("<string>")}}. NÃO será reparado, e em particular os caracteres usados .An empty string.
    cor {{experimental_inline}}{{cssxref("<color>")}}O valor do atributo é analisado como hash (3- ou 6-valores hash) ou a palavra-chave. Precisa ser um valor {{cssxref("<string>")}} CSS válido.
    - Os espaços do lead e trail são retirados.    		corAtual
    url {{experimental_inline}}{{cssxref("<url>")}}The attribute value is parsed as a string that is used inside a CSS url()function.
    - Relative URL are resolved relatively to the original document, not relatively to the style sheet.
    - Leading and trailing spaces are stripped.    		The url about:invalid that points to a non-existent document with a generic error condition.
    integer {{experimental_inline}}{{cssxref("<integer>")}}The attribute value is parsed as a CSS {{cssxref("<integer>")}}. If it is not valid, that is not an integer or out of the range accepted by the CSS property, the default value is used.
    - Leading and trailing spaces are stripped.    		0, or, if 0 is not a valid value for the property, the property's minimum value.
    number {{experimental_inline}}{{cssxref("<number>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
    - Leading and trailing spaces are stripped.    		0, or, if 0 is not a valid value for the property, the property's minimum value.
    length {{experimental_inline}}{{cssxref("<length>")}}The attribute value is parsed as a CSS {{cssxref("<length>")}} dimension, that is including the unit (e.g. 12.5em). If it is not valid, that is not a length or out of the range accepted by the CSS property, the default value is used.
    - If the given unit is a relative length, attr()computes it to an absolute length.
    - Leading and trailing spaces are stripped.    		0, or, if 0 is not a valid value for the property, the property's minimum value.
    em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, or pc {{experimental_inline}}{{cssxref("<length>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as a {{cssxref("<length>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
    - If the given unit is a relative length, attr()computes it to an absolute length.
    - Leading and trailing spaces are stripped.    		0, or, if 0 is not a valid value for the property, the property's minimum value.
    angle {{experimental_inline}}{{cssxref("<angle>")}}The attribute value is parsed as a CSS {{cssxref("<angle>")}} dimension, that is including the unit (e.g. 30.5deg). If it is not valid, that is not an angle or out of the range accepted by the CSS property, the default value is used.
    - Leading and trailing spaces are stripped.    		0deg, or, if 0deg is not a valid value for the property, the property's minimum value.
    deg, grad, rad {{experimental_inline}}{{cssxref("<angle>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as an {{cssxref("<angle>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
    - Leading and trailing spaces are stripped.    		0deg, or, if 0deg is not a valid value for the property, the property's minimum value.
    time {{experimental_inline}}{{cssxref("<time>")}}The attribute value is parsed as a CSS {{cssxref("<time>")}} dimension, that is including the unit (e.g. 30.5ms). If it is not valid, that is not a time or out of the range accepted by the CSS property, the default value is used.
    - Leading and trailing spaces are stripped.    		0s, or, if 0s is not a valid value for the property, the property's minimum value.
    s, ms {{experimental_inline}}{{cssxref("<time>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as an{{cssxref("<time>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
    - Leading and trailing spaces are stripped.    		0s, or, if 0s is not a valid value for the property, the property's minimum value.
    frequency {{experimental_inline}}{{cssxref("<frequency>")}}The attribute value is parsed as a CSS {{cssxref("<frequency>")}} dimension, that is including the unit (e.g. 30.5kHz). If it is not valid, that is not a frequency or out of the range accepted by the CSS property, the default value is used.0Hz, or, if 0Hz is not a valid value for the property, the property's minimum value.
    Hz, kHz {{experimental_inline}}{{cssxref("<frequency>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as a {{cssxref("<frequency>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
    - Leading and trailing spaces are stripped.    		0Hz, or, if 0Hz is not a valid value for the property, the property's minimum value.
    % {{experimental_inline}}{{cssxref("<percentage>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as a {{cssxref("<percentage>")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
    - If the given value is used as a length, attr()computes it to an absolute length.
    - Leading and trailing spaces are stripped.    		0%, or, if 0% is not a valid value for the property, the property's minimum value.
    -
    -
    <fallback> {{experimental_inline}}
    -
    The value to be used if the associated attribute is missing or contains an invalid value. The fallback value must be valid where attr() is used, even if it is not used, and must not contain another attr() expression. If attr() is not the sole component value of a property, its <fallback> value must be of the type defined by <type-or-unit>. If not set, CSS will use the default value defined for each <type-or-unit>.
    -
    - -

    Sintaxe formal

    - -{{csssyntax}} - -

    Exemplos

    - -

    HTML

    - -
    <p data-foo="hello">world</p>
-
    - -

    CSS

    - -
    p::before {
-  content: attr(data-foo) " ";
-}
-
    - -

    Resultado

    - -

    {{EmbedLiveSample("Examples")}}

    - -

    Especificações

    - - - - - - - - - - - - - - - - - - - - - -
    EspecificaçãoStatusComentário
    {{SpecName('CSS3 Values', '#attr-notation', 'attr()')}}{{Spec2('CSS3 Values')}}Added two optional parameters; can be used on all properties; may return other values than {{cssxref("<string>")}}. These changes are experimental and may be dropped during the CR phase if browser support is too small.
    {{SpecName('CSS2.1', 'generate.html#x18', 'attr()')}}{{Spec2('CSS2.1')}}Limited to the {{cssxref("content")}} property; always return a {{cssxref("<string>")}}.
    - -

    Compatibilidade com navegadores

    - -

    {{Compat("css.types.attr")}}

    diff --git a/files/pt-br/web/css/attr/index.html b/files/pt-br/web/css/attr/index.html new file mode 100644 index 0000000000..43ac460a6f --- /dev/null +++ b/files/pt-br/web/css/attr/index.html @@ -0,0 +1,214 @@ +--- +title: attr +slug: Web/CSS/attr +tags: + - CSS + - Esquema + - Função CSS + - Internet + - Laioute + - Rede + - Referencia + - Web +translation_of: Web/CSS/attr() +original_slug: Web/CSS/attr() +--- +
    {{CSSRef}}
    + +

    A função attr() do CSS  é utilizada para se obter o valor de um determinado atributo do elemento selecionado e usá-lo na folha de estilo. Também pode ser utilizado em pseudo-elementos, nesse caso o valor do atributo no pseudo-elemento do elemento original é retornado.

    + +
    /* Uso Simples */
+attr(data-count);
+attr(title);
+
+/* Com o tipo */
+attr(src url);
+attr(data-count number);
+attr(data-width px);
+
+/* Com fallback */
+attr(data-count number, 0);
+attr(src url, '');
+attr(data-width px, inherit);
+attr(data-something, 'default');
+
    + +
    +

    Nota: A função attr() pode ser utilizada com qualquer propriedade CSS, mas o suporte para propriedades que não sejam {{cssxref("content")}} é experimental.

    +
    + +

    Sintaxe

    + +

    Valores

    + +
    +
    nome-do-atributo
    +
    É o nome do atributo HTML do elemento referenciado no CSS.
    +
    <tipo-ou-unidade> {{experimental_inline}}
    +
    É uma palavra-chave representando tanto o tipo quanto o valor do atributo, ou sua unidade, assim como no HTML alguns atributos tem unidades implícitas. Se o uso de <tipo-ou-unidade> como um valor para determinado atributo for inválido, a expressão attr() será inválida também. Se omitida, o padrão será string. A lista de valores válidos é: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Palavra-chaveTipo AssociadoComentárioValor Padrão
    string{{cssxref("<string>")}}O valor do atributo é tratado como um CSS {{cssxref("<string>")}}. NÃO será reparado, e em particular os caracteres usados .An empty string.
    cor {{experimental_inline}}{{cssxref("<color>")}}O valor do atributo é analisado como hash (3- ou 6-valores hash) ou a palavra-chave. Precisa ser um valor {{cssxref("<string>")}} CSS válido.
    + Os espaços do lead e trail são retirados.    		corAtual
    url {{experimental_inline}}{{cssxref("<url>")}}The attribute value is parsed as a string that is used inside a CSS url()function.
    + Relative URL are resolved relatively to the original document, not relatively to the style sheet.
    + Leading and trailing spaces are stripped.    		The url about:invalid that points to a non-existent document with a generic error condition.
    integer {{experimental_inline}}{{cssxref("<integer>")}}The attribute value is parsed as a CSS {{cssxref("<integer>")}}. If it is not valid, that is not an integer or out of the range accepted by the CSS property, the default value is used.
    + Leading and trailing spaces are stripped.    		0, or, if 0 is not a valid value for the property, the property's minimum value.
    number {{experimental_inline}}{{cssxref("<number>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
    + Leading and trailing spaces are stripped.    		0, or, if 0 is not a valid value for the property, the property's minimum value.
    length {{experimental_inline}}{{cssxref("<length>")}}The attribute value is parsed as a CSS {{cssxref("<length>")}} dimension, that is including the unit (e.g. 12.5em). If it is not valid, that is not a length or out of the range accepted by the CSS property, the default value is used.
    + If the given unit is a relative length, attr()computes it to an absolute length.
    + Leading and trailing spaces are stripped.    		0, or, if 0 is not a valid value for the property, the property's minimum value.
    em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, or pc {{experimental_inline}}{{cssxref("<length>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as a {{cssxref("<length>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
    + If the given unit is a relative length, attr()computes it to an absolute length.
    + Leading and trailing spaces are stripped.    		0, or, if 0 is not a valid value for the property, the property's minimum value.
    angle {{experimental_inline}}{{cssxref("<angle>")}}The attribute value is parsed as a CSS {{cssxref("<angle>")}} dimension, that is including the unit (e.g. 30.5deg). If it is not valid, that is not an angle or out of the range accepted by the CSS property, the default value is used.
    + Leading and trailing spaces are stripped.    		0deg, or, if 0deg is not a valid value for the property, the property's minimum value.
    deg, grad, rad {{experimental_inline}}{{cssxref("<angle>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as an {{cssxref("<angle>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
    + Leading and trailing spaces are stripped.    		0deg, or, if 0deg is not a valid value for the property, the property's minimum value.
    time {{experimental_inline}}{{cssxref("<time>")}}The attribute value is parsed as a CSS {{cssxref("<time>")}} dimension, that is including the unit (e.g. 30.5ms). If it is not valid, that is not a time or out of the range accepted by the CSS property, the default value is used.
    + Leading and trailing spaces are stripped.    		0s, or, if 0s is not a valid value for the property, the property's minimum value.
    s, ms {{experimental_inline}}{{cssxref("<time>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as an{{cssxref("<time>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
    + Leading and trailing spaces are stripped.    		0s, or, if 0s is not a valid value for the property, the property's minimum value.
    frequency {{experimental_inline}}{{cssxref("<frequency>")}}The attribute value is parsed as a CSS {{cssxref("<frequency>")}} dimension, that is including the unit (e.g. 30.5kHz). If it is not valid, that is not a frequency or out of the range accepted by the CSS property, the default value is used.0Hz, or, if 0Hz is not a valid value for the property, the property's minimum value.
    Hz, kHz {{experimental_inline}}{{cssxref("<frequency>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as a {{cssxref("<frequency>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
    + Leading and trailing spaces are stripped.    		0Hz, or, if 0Hz is not a valid value for the property, the property's minimum value.
    % {{experimental_inline}}{{cssxref("<percentage>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as a {{cssxref("<percentage>")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
    + If the given value is used as a length, attr()computes it to an absolute length.
    + Leading and trailing spaces are stripped.    		0%, or, if 0% is not a valid value for the property, the property's minimum value.
    +
    +
    <fallback> {{experimental_inline}}
    +
    The value to be used if the associated attribute is missing or contains an invalid value. The fallback value must be valid where attr() is used, even if it is not used, and must not contain another attr() expression. If attr() is not the sole component value of a property, its <fallback> value must be of the type defined by <type-or-unit>. If not set, CSS will use the default value defined for each <type-or-unit>.
    +
    + +

    Sintaxe formal

    + +{{csssyntax}} + +

    Exemplos

    + +

    HTML

    + +
    <p data-foo="hello">world</p>
+
    + +

    CSS

    + +
    p::before {
+  content: attr(data-foo) " ";
+}
+
    + +

    Resultado

    + +

    {{EmbedLiveSample("Examples")}}

    + +

    Especificações

    + + + + + + + + + + + + + + + + + + + + + +
    EspecificaçãoStatusComentário
    {{SpecName('CSS3 Values', '#attr-notation', 'attr()')}}{{Spec2('CSS3 Values')}}Added two optional parameters; can be used on all properties; may return other values than {{cssxref("<string>")}}. These changes are experimental and may be dropped during the CR phase if browser support is too small.
    {{SpecName('CSS2.1', 'generate.html#x18', 'attr()')}}{{Spec2('CSS2.1')}}Limited to the {{cssxref("content")}} property; always return a {{cssxref("<string>")}}.
    + +

    Compatibilidade com navegadores

    + +

    {{Compat("css.types.attr")}}

    diff --git a/files/pt-br/web/css/calc()/index.html b/files/pt-br/web/css/calc()/index.html deleted file mode 100644 index 7687481952..0000000000 --- a/files/pt-br/web/css/calc()/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: calc() -slug: Web/CSS/calc() -tags: - - CSS - - Calculate - - Função - - Função CSS - - Layout - - Web - - calc -translation_of: Web/CSS/calc() ---- -
    {{CSSRef}}
    - -

    A função  calc() CSS permite você executar cálculos quando especificar os valores de propriedades no CSS. Pode ser utilizada em qualquer lugar , como  {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<percentage>")}}, {{cssxref("<number>")}}, e {{cssxref("<integer>")}} é permitido.

    - -
    /* propriedade: calc(expressão) */
-width: calc(100% - 80px);
-
    - -

    Syntax

    - -

    A função  calc() recebe uma simples expressão como parâmetro e o resultado desta expressão é utilizado como valor. Pode ser uma simples expressão, combinando os seguintes operadores, utilizando padrão operator precedence rules:

    - -
    -
    +
    -
    Adição.
    -
    -
    -
    Subtração.
    -
    *
    -
    Multiplicação. Pelo menos um dos argumentos deve ser um {{cssxref("<number>")}}.
    -
    /
    -
    Divisão. O operador da direita deve ser um {{cssxref("<number>")}}.
    -
    - -

    Os operandos na expressão podem ser qualquer valor de sintaxe {{cssxref ("<length>")}}. Você pode usar unidades diferentes para cada valor em sua expressão, se desejar. Você também pode usar parênteses para estabelecer a ordem de computação quando necessário.

    - -

    Notas

    - -
      -
    • Divisão por 0 (zero) resulta em um erro gerado pelo HTML parser.
      • -
    • Os operadores + e - devem estar cercados por espaço em branco. Por exemplo, calc (50% -8px) será analisado como uma porcentagem seguida por um comprimento negativo - uma expressão inválida — enquanto calc (50% - 8px) é uma porcentagem seguida por um operador de subtração e um comprimento. Da mesma forma, calc (8px + -50%) é tratado como um comprimento seguido por um operador de adição e uma porcentagem negativa.
      • -
    • Os operadores * e / não requerem espaço em branco, mas adicioná-lo para consistência é permitido e recomendado.
      • -
    • Expressões matemáticas envolvendo porcentagens de larguras e alturas em colunas de tabela, grupos de coluna de tabela, linhas de tabela, grupos de linhas de tabela e células de tabela em tabelas de layout automáticas e fixas podem ser tratadas como se auto tivesse sido especificado.
      • -
    • É permitido aninhar funções calc (), em cujo caso as internas são tratadas como parênteses simples.
      • -
    - -

    Formal syntax

    - -{{csssyntax}} - -

    Exemplos

    - -

    Posicionando um objeto na tela usando margin

    - -

    calc() torna mais fácil posicionar um objeto com uma margem definida. Nesse exemplo, o CSS cria um banner que se estende pela janela, com um espaço de 40px entre os dois lados do banner e das bordas da janela:

    - -
    .banner {
-  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;
-}
-
    - -
    <div class="banner">This is a banner!</div>
    - -

    {{EmbedLiveSample('Positioning_an_object_on_screen_with_a_margin', 'auto', '60')}}

    - -

    Dimensionar campos de formulário automaticamente para caber em seu contêiner

    - -

    Outro caso para calc() é ajudar a garantir que os campos do formulário caibam no espaço disponível, sem expandir para além da borda do seu contêiner, enquanto mantém uma margem apropriada.

    - -

    Veja-mos no CSS:

    - -
    input {
-  padding: 2px;
-  display: block;
-  width: calc(100% - 1em);
-}
-
-#formbox {
-  width: calc(100% / 6);
-  border: 1px solid black;
-  padding: 4px;
-}
-
    - -

    Aqui, o próprio formulário é estabelecido para utilizar 1/6 da largura da janela disponível. Então, para garantir que os campos de entrada mantenham um tamanho apropriado, utilizamos calc() novamente para estabelecer que eles devem ter a largura de seu contêiner menos 1em. Então, o seguinte HTML utiliza este CSS:

    - -
    <form>
-  <div id="formbox">
-  <label>Type something:</label>
-  <input type="text">
-  </div>
-</form>
-
    - -

    {{EmbedLiveSample('Automatically_sizing_form_fields_to_fit_their_container', '700', '80')}}

    - -

    calc( ) inserido em variáveis de CSS

    - -

    Você também pode utilizar calc() com variáveis de CSS. Considere o seguinte código:

    - -
    .foo {
-  --widthA: 100px;
-  --widthB: calc(var(--widthA) / 2);
-  --widthC: calc(var(--widthB) / 2);
-  width: var(--widthC);
-}
    - -

    Depois que todas as variáveis forem expandidas, o valor de widthC será calc( calc( 100px / 2) / 2), então quando for atribuído à propriedade de largura .foo, todos os calc() internos (não importa o quão profundamente atribuídos) serão nivelados para apenas parênteses, de modo que o valor da propriedade width será eventualmente calc( ( 100px / 2) / 2), i.e. 25px. Resumindo: um calc() dentro de um calc() é idêntico à parênteses.

    - -

    Questões de acessibilidade

    - -

    Quando calc() é usado para controlar o tamanho do texto, certifique-se de que um dos valores inclui uma unidade de comprimento relativo, por exemplo:

    - -
    h1 {
-  font-size: calc(1.5rem + 3vw);
-}
    - -

    Isso garante que o tamanho do texto será redimensionado se a página for ampliada.

    - - - -

    Especificações

    - - - - - - - - - - - - - - - - -
    EspecificaçãoStatusComentário
    {{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}{{Spec2('CSS3 Values')}}Definição inicial
    - -

    Compatibilidade com navegadores

    - -

    {{Compat("css.types.calc")}}

    - -

    Veja também

    - - diff --git a/files/pt-br/web/css/calc/index.html b/files/pt-br/web/css/calc/index.html new file mode 100644 index 0000000000..5cd94f3dec --- /dev/null +++ b/files/pt-br/web/css/calc/index.html @@ -0,0 +1,163 @@ +--- +title: calc() +slug: Web/CSS/calc +tags: + - CSS + - Calculate + - Função + - Função CSS + - Layout + - Web + - calc +translation_of: Web/CSS/calc() +original_slug: Web/CSS/calc() +--- +
    {{CSSRef}}
    + +

    A função  calc() CSS permite você executar cálculos quando especificar os valores de propriedades no CSS. Pode ser utilizada em qualquer lugar , como  {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<percentage>")}}, {{cssxref("<number>")}}, e {{cssxref("<integer>")}} é permitido.

    + +
    /* propriedade: calc(expressão) */
+width: calc(100% - 80px);
+
    + +

    Syntax

    + +

    A função  calc() recebe uma simples expressão como parâmetro e o resultado desta expressão é utilizado como valor. Pode ser uma simples expressão, combinando os seguintes operadores, utilizando padrão operator precedence rules:

    + +
    +
    +
    +
    Adição.
    +
    -
    +
    Subtração.
    +
    *
    +
    Multiplicação. Pelo menos um dos argumentos deve ser um {{cssxref("<number>")}}.
    +
    /
    +
    Divisão. O operador da direita deve ser um {{cssxref("<number>")}}.
    +
    + +

    Os operandos na expressão podem ser qualquer valor de sintaxe {{cssxref ("<length>")}}. Você pode usar unidades diferentes para cada valor em sua expressão, se desejar. Você também pode usar parênteses para estabelecer a ordem de computação quando necessário.

    + +

    Notas

    + +
      +
    • Divisão por 0 (zero) resulta em um erro gerado pelo HTML parser.
      • +
    • Os operadores + e - devem estar cercados por espaço em branco. Por exemplo, calc (50% -8px) será analisado como uma porcentagem seguida por um comprimento negativo - uma expressão inválida — enquanto calc (50% - 8px) é uma porcentagem seguida por um operador de subtração e um comprimento. Da mesma forma, calc (8px + -50%) é tratado como um comprimento seguido por um operador de adição e uma porcentagem negativa.
      • +
    • Os operadores * e / não requerem espaço em branco, mas adicioná-lo para consistência é permitido e recomendado.
      • +
    • Expressões matemáticas envolvendo porcentagens de larguras e alturas em colunas de tabela, grupos de coluna de tabela, linhas de tabela, grupos de linhas de tabela e células de tabela em tabelas de layout automáticas e fixas podem ser tratadas como se auto tivesse sido especificado.
      • +
    • É permitido aninhar funções calc (), em cujo caso as internas são tratadas como parênteses simples.
      • +
    + +

    Formal syntax

    + +{{csssyntax}} + +

    Exemplos

    + +

    Posicionando um objeto na tela usando margin

    + +

    calc() torna mais fácil posicionar um objeto com uma margem definida. Nesse exemplo, o CSS cria um banner que se estende pela janela, com um espaço de 40px entre os dois lados do banner e das bordas da janela:

    + +
    .banner {
+  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;
+}
+
    + +
    <div class="banner">This is a banner!</div>
    + +

    {{EmbedLiveSample('Positioning_an_object_on_screen_with_a_margin', 'auto', '60')}}

    + +

    Dimensionar campos de formulário automaticamente para caber em seu contêiner

    + +

    Outro caso para calc() é ajudar a garantir que os campos do formulário caibam no espaço disponível, sem expandir para além da borda do seu contêiner, enquanto mantém uma margem apropriada.

    + +

    Veja-mos no CSS:

    + +
    input {
+  padding: 2px;
+  display: block;
+  width: calc(100% - 1em);
+}
+
+#formbox {
+  width: calc(100% / 6);
+  border: 1px solid black;
+  padding: 4px;
+}
+
    + +

    Aqui, o próprio formulário é estabelecido para utilizar 1/6 da largura da janela disponível. Então, para garantir que os campos de entrada mantenham um tamanho apropriado, utilizamos calc() novamente para estabelecer que eles devem ter a largura de seu contêiner menos 1em. Então, o seguinte HTML utiliza este CSS:

    + +
    <form>
+  <div id="formbox">
+  <label>Type something:</label>
+  <input type="text">
+  </div>
+</form>
+
    + +

    {{EmbedLiveSample('Automatically_sizing_form_fields_to_fit_their_container', '700', '80')}}

    + +

    calc( ) inserido em variáveis de CSS

    + +

    Você também pode utilizar calc() com variáveis de CSS. Considere o seguinte código:

    + +
    .foo {
+  --widthA: 100px;
+  --widthB: calc(var(--widthA) / 2);
+  --widthC: calc(var(--widthB) / 2);
+  width: var(--widthC);
+}
    + +

    Depois que todas as variáveis forem expandidas, o valor de widthC será calc( calc( 100px / 2) / 2), então quando for atribuído à propriedade de largura .foo, todos os calc() internos (não importa o quão profundamente atribuídos) serão nivelados para apenas parênteses, de modo que o valor da propriedade width será eventualmente calc( ( 100px / 2) / 2), i.e. 25px. Resumindo: um calc() dentro de um calc() é idêntico à parênteses.

    + +

    Questões de acessibilidade

    + +

    Quando calc() é usado para controlar o tamanho do texto, certifique-se de que um dos valores inclui uma unidade de comprimento relativo, por exemplo:

    + +
    h1 {
+  font-size: calc(1.5rem + 3vw);
+}
    + +

    Isso garante que o tamanho do texto será redimensionado se a página for ampliada.

    + + + +

    Especificações

    + + + + + + + + + + + + + + + + +
    EspecificaçãoStatusComentário
    {{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}{{Spec2('CSS3 Values')}}Definição inicial
    + +

    Compatibilidade com navegadores

    + +

    {{Compat("css.types.calc")}}

    + +

    Veja também

    + + diff --git a/files/pt-br/web/css/element()/index.html b/files/pt-br/web/css/element()/index.html deleted file mode 100644 index f52f5eb6e7..0000000000 --- a/files/pt-br/web/css/element()/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: element -slug: Web/CSS/element() -tags: - - Background - - CSS - - CSS4-images - - Função CSS - - Layout - - Web -translation_of: Web/CSS/element() ---- -
    {{CSSRef}}{{SeeCompatTable}}
    - -

    A função CSS element() define uma {{cssxref("<image>")}} gerada de um elemento HTML qualquer. Essa imagem é dinamica, significando que se o elemento HTML for mudado, a propriedade CSS usando este valor será atualizada automaticamente.

    - -

    Um cenario particularmente util para usar esta função seria colocar uma imagem em um elemento {{HTMLElement("canvas")}}, e então usar-lo como um background.

    - -

    Em navegadores Gecko, você pode usar o metodo não padronizado {{domxref("document.mozSetImageElement()")}} para mudar o elemento sendo usado como background por um elemento de background selecionado por CSS.

    - -

    Sintaxe

    - -
    element( id )
    - -

    Onde:

    - -
    -
    id
    -
    É o ID de um elemento para usar como background, especificado usando o atributo HTML #id no elemento.
    -
    - -

    Exemplos

    - -

    Esses exemplos podem ser vistos em tempo real em versões do Firefox que suportam -moz-element().

    - -

    Um exemplo de alguma maneira real

    - -

    Esse exemplo usa uma {{HTMLElement("div")}} escondida como background. O elemento de background tem um gradiente, mas tambem um texto que é usado como parte do background.

    - -
    <div style="width:400px; height:400px; background:-moz-element(#myBackground1) no-repeat;">
-  <p>This box uses the element with the #myBackground1 ID as its background!</p>
-</div>
-
-<div style="overflow:hidden; height:0;">
-  <div id="myBackground1" style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);">
-  <p style="transform-origin:0 0; transform: rotate(45deg); color:white;">This text is part of the background. Cool, huh?</p>
-  </div>
-</div>
    - -

    A {{HTMLElement("div")}} com ID "myBackground1" é usada como background, mantendo o paragrafo "This box uses the element with the #myBackground1 ID as its background!".

    - -

    example1.png

    - -

    Um exemplo ainda mais bizarro

    - -

    Esse exemplo usa um elemento {{HTMLElement("button")}} se repetindo como background. Isso mostra que você pode usar qualquer elemento como background, mas não mostra necessariamente boas praticas de design.

    - -
    <div style="width:400px; height:100px; background:-moz-element(#myBackground2);">
-</div>
-
-<div style="overflow:hidden; height:0;">
-  <button id="myBackground2" type="button">Evil button!</button>
-</div>
-
    - -

    example2.png

    - -

    Especificações

    - - - - - - - - - - - - - - - - -
    EspecificaçãoEstatusComentário
    {{SpecName('CSS4 Images', '#element-notation', 'Using Elements as Images: the element() notation')}}{{Spec2('CSS4 Images')}}Actualmente adiado para o CSS4.
    - -

    Compatibilidade dos navegadores

    - -

     

    - - - -

    {{Compat("css.types.image.element")}}

    - -

     

    - -

    Veja tambem

    - -
      -
    • {{domxref("document.mozSetImageElement()")}}
      • -
    diff --git a/files/pt-br/web/css/element/index.html b/files/pt-br/web/css/element/index.html new file mode 100644 index 0000000000..92ba0fc502 --- /dev/null +++ b/files/pt-br/web/css/element/index.html @@ -0,0 +1,102 @@ +--- +title: element +slug: Web/CSS/element +tags: + - Background + - CSS + - CSS4-images + - Função CSS + - Layout + - Web +translation_of: Web/CSS/element() +original_slug: Web/CSS/element() +--- +
    {{CSSRef}}{{SeeCompatTable}}
    + +

    A função CSS element() define uma {{cssxref("<image>")}} gerada de um elemento HTML qualquer. Essa imagem é dinamica, significando que se o elemento HTML for mudado, a propriedade CSS usando este valor será atualizada automaticamente.

    + +

    Um cenario particularmente util para usar esta função seria colocar uma imagem em um elemento {{HTMLElement("canvas")}}, e então usar-lo como um background.

    + +

    Em navegadores Gecko, você pode usar o metodo não padronizado {{domxref("document.mozSetImageElement()")}} para mudar o elemento sendo usado como background por um elemento de background selecionado por CSS.

    + +

    Sintaxe

    + +
    element( id )
    + +

    Onde:

    + +
    +
    id
    +
    É o ID de um elemento para usar como background, especificado usando o atributo HTML #id no elemento.
    +
    + +

    Exemplos

    + +

    Esses exemplos podem ser vistos em tempo real em versões do Firefox que suportam -moz-element().

    + +

    Um exemplo de alguma maneira real

    + +

    Esse exemplo usa uma {{HTMLElement("div")}} escondida como background. O elemento de background tem um gradiente, mas tambem um texto que é usado como parte do background.

    + +
    <div style="width:400px; height:400px; background:-moz-element(#myBackground1) no-repeat;">
+  <p>This box uses the element with the #myBackground1 ID as its background!</p>
+</div>
+
+<div style="overflow:hidden; height:0;">
+  <div id="myBackground1" style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);">
+  <p style="transform-origin:0 0; transform: rotate(45deg); color:white;">This text is part of the background. Cool, huh?</p>
+  </div>
+</div>
    + +

    A {{HTMLElement("div")}} com ID "myBackground1" é usada como background, mantendo o paragrafo "This box uses the element with the #myBackground1 ID as its background!".

    + +

    example1.png

    + +

    Um exemplo ainda mais bizarro

    + +

    Esse exemplo usa um elemento {{HTMLElement("button")}} se repetindo como background. Isso mostra que você pode usar qualquer elemento como background, mas não mostra necessariamente boas praticas de design.

    + +
    <div style="width:400px; height:100px; background:-moz-element(#myBackground2);">
+</div>
+
+<div style="overflow:hidden; height:0;">
+  <button id="myBackground2" type="button">Evil button!</button>
+</div>
+
    + +

    example2.png

    + +

    Especificações

    + + + + + + + + + + + + + + + + +
    EspecificaçãoEstatusComentário
    {{SpecName('CSS4 Images', '#element-notation', 'Using Elements as Images: the element() notation')}}{{Spec2('CSS4 Images')}}Actualmente adiado para o CSS4.
    + +

    Compatibilidade dos navegadores

    + +

     

    + + + +

    {{Compat("css.types.image.element")}}

    + +

     

    + +

    Veja tambem

    + +
      +
    • {{domxref("document.mozSetImageElement()")}}
      • +
    diff --git a/files/pt-br/web/css/env()/index.html b/files/pt-br/web/css/env()/index.html deleted file mode 100644 index bcd3a0a009..0000000000 --- a/files/pt-br/web/css/env()/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: env() -slug: Web/CSS/env() -tags: - - CSS - - CSS Function - - CSS Variables - - Draft - - Reference - - Variables - - env - - env() -translation_of: Web/CSS/env() ---- -
    {{CSSRef}}
    - -

    A função CSS env() pode ser usada para inserir o valor de uma variável de ambiente definida pelo agente do usuário em seu CSS, de uma maneira semelhante à função {{cssxref("var")}} e propriedades personalizadas. A diferença é que, além de serem definidas pelo agente do usuário em vez de serem definidas pelo usuário, as variáveis de ambiente têm escopo global para um documento, enquanto as propriedades personalizadas têm um escopo para o(s) elemento(s) no(s) qual(is) é/são declarado(s).

    - -
    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);
-}
    - -

    Além disso, ao contrário das propriedades personalizadas, que não podem ser usadas fora do escopo das declarações, a função env() pode ser usada em qualquer parte do valor de uma propriedade ou em qualquer parte de um descriptor (por exemplo, regras Media). À medida que a especificação evolui, essa também pode ser usada em outros lugares, como em seletores.

    - -

    Originalmente fornecido pelo navegador iOS para permitir que os desenvolvedores coloquem seu conteúdo em uma safe area (área segura) na janela de visualização, os valores de safe-area-inset-* definidos na especificação podem ser usados para ajudar a garantir que o conteúdo seja visível até mesmo para usuários que usam uma tela não retangular.

    - -

    Sintaxe

    - -
    /* Usando os quatro valores de inserção safe area sem valores de fallback */
-env(safe-area-inset-top);
-env(safe-area-inset-right);
-env(safe-area-inset-bottom);
-env(safe-area-inset-left);
-
-/* Usando-os com valores de fallback */
-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);
-
    - -

    Valores

    - -
    -
    safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left
    -
    As variáveis safe-area-inset-* são quatro variáveis de ambiente que definem um retângulo por seus valores de inserção: top, right, bottom e left a partir da borda da janela de visualização, no qual é seguro colocar o conteúdo sem o risco de ser cortado pela forma de um visor não retangular. Para janelas de visualização retangulares, como o monitor de um laptop comum, seu valor é igual a zero. Para telas não retangulares - como um visor de um relógio redondo - os quatro valores definidos pelo agente do usuário formam um retângulo de modo que todo o conteúdo dentro do retângulo seja visível.
    -
    - -
    -

    Nota: Ao contrário de outras propriedades CSS, os nomes de propriedades definidos pelo agente do usuário fazem distinção entre maiúsculas e minúsculas.

    -
    - -

    Sintaxe formal

    - -{{cssSyntax}} - -

    Exemplos

    - -

    O exemplo abaixo faz uso do segundo parâmetro opcional de env(), que permite fornecer um valor de fallback caso a variável de ambiente não esteja disponível.

    - -
    <p>
- Se a função <code>env()</code> é suportada em seu navegador,
- o texto deste parágrafo deverá estar na borda <i>top</i>, <i>right</i> e <i>bottom</i>,
- ter 50px de preenchimento entre a borda e o texto. O CSS é equivalente
- ao preenchimento: <code>padding: 0 0 0 50px</code>,
- porque, ao contrário de outras propriedades CSS, os nomes de
- propriedades do agente do usuário diferenciam letras maiúsculas de
- minúsculas.
-</p>
    - -
    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);
-}
    - -

    {{EmbedLiveSample("Exemplos")}}

    - -

    Exemplo com valores

    - -
    padding: env(safe-area-inset-bottom, 50px); /* zero para todos agentes do usuário que são retangulares*/
-padding: env(Safe-area-inset-bottom, 50px); /* 50px porque as propriedades do agente do usuário diferenciam maiúsculas de minúsculas */
-padding: env(x, 50px 20px); /* como se estivesse preenchendo: '50px 20px' que foram definidos, porque x não é uma variável de ambiente válida */
-padding: env(x, 50px, 20px); /* ignorado '50px, 20px' porque não é um valor de preenchimento válido e x não é uma variável de ambiente válida */
-
    - -

    A sintaxe fallback, como de propriedades customizadas, permite vírgulas. Mas se o valor da propriedade não suportar vírgulas, o valor não é válido.

    - -
    -

    Nota: As propriedades do agente do usuário não são redefinidas pela propriedade all.

    -
    - -

    Especificações

    - - - - - - - - - - - - - - - - -
    EspecificaçãoStatusComentário
    {{SpecName("CSS3 Environment Variables", "#env-function", "env()")}}{{Spec2("CSS3 Environment Variables")}}Definição inicial.
    - -

    Compatibilidade com navegadores

    - -

    {{Compat("css.properties.custom-property.env")}}

    - -

    Veja também

    - - diff --git a/files/pt-br/web/css/env/index.html b/files/pt-br/web/css/env/index.html new file mode 100644 index 0000000000..f7cd36b8e9 --- /dev/null +++ b/files/pt-br/web/css/env/index.html @@ -0,0 +1,133 @@ +--- +title: env() +slug: Web/CSS/env +tags: + - CSS + - CSS Function + - CSS Variables + - Draft + - Reference + - Variables + - env + - env() +translation_of: Web/CSS/env() +original_slug: Web/CSS/env() +--- +
    {{CSSRef}}
    + +

    A função CSS env() pode ser usada para inserir o valor de uma variável de ambiente definida pelo agente do usuário em seu CSS, de uma maneira semelhante à função {{cssxref("var")}} e propriedades personalizadas. A diferença é que, além de serem definidas pelo agente do usuário em vez de serem definidas pelo usuário, as variáveis de ambiente têm escopo global para um documento, enquanto as propriedades personalizadas têm um escopo para o(s) elemento(s) no(s) qual(is) é/são declarado(s).

    + +
    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);
+}
    + +

    Além disso, ao contrário das propriedades personalizadas, que não podem ser usadas fora do escopo das declarações, a função env() pode ser usada em qualquer parte do valor de uma propriedade ou em qualquer parte de um descriptor (por exemplo, regras Media). À medida que a especificação evolui, essa também pode ser usada em outros lugares, como em seletores.

    + +

    Originalmente fornecido pelo navegador iOS para permitir que os desenvolvedores coloquem seu conteúdo em uma safe area (área segura) na janela de visualização, os valores de safe-area-inset-* definidos na especificação podem ser usados para ajudar a garantir que o conteúdo seja visível até mesmo para usuários que usam uma tela não retangular.

    + +

    Sintaxe

    + +
    /* Usando os quatro valores de inserção safe area sem valores de fallback */
+env(safe-area-inset-top);
+env(safe-area-inset-right);
+env(safe-area-inset-bottom);
+env(safe-area-inset-left);
+
+/* Usando-os com valores de fallback */
+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);
+
    + +

    Valores

    + +
    +
    safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left
    +
    As variáveis safe-area-inset-* são quatro variáveis de ambiente que definem um retângulo por seus valores de inserção: top, right, bottom e left a partir da borda da janela de visualização, no qual é seguro colocar o conteúdo sem o risco de ser cortado pela forma de um visor não retangular. Para janelas de visualização retangulares, como o monitor de um laptop comum, seu valor é igual a zero. Para telas não retangulares - como um visor de um relógio redondo - os quatro valores definidos pelo agente do usuário formam um retângulo de modo que todo o conteúdo dentro do retângulo seja visível.
    +
    + +
    +

    Nota: Ao contrário de outras propriedades CSS, os nomes de propriedades definidos pelo agente do usuário fazem distinção entre maiúsculas e minúsculas.

    +
    + +

    Sintaxe formal

    + +{{cssSyntax}} + +

    Exemplos

    + +

    O exemplo abaixo faz uso do segundo parâmetro opcional de env(), que permite fornecer um valor de fallback caso a variável de ambiente não esteja disponível.

    + +
    <p>
+ Se a função <code>env()</code> é suportada em seu navegador,
+ o texto deste parágrafo deverá estar na borda <i>top</i>, <i>right</i> e <i>bottom</i>,
+ ter 50px de preenchimento entre a borda e o texto. O CSS é equivalente
+ ao preenchimento: <code>padding: 0 0 0 50px</code>,
+ porque, ao contrário de outras propriedades CSS, os nomes de
+ propriedades do agente do usuário diferenciam letras maiúsculas de
+ minúsculas.
+</p>
    + +
    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);
+}
    + +

    {{EmbedLiveSample("Exemplos")}}

    + +

    Exemplo com valores

    + +
    padding: env(safe-area-inset-bottom, 50px); /* zero para todos agentes do usuário que são retangulares*/
+padding: env(Safe-area-inset-bottom, 50px); /* 50px porque as propriedades do agente do usuário diferenciam maiúsculas de minúsculas */
+padding: env(x, 50px 20px); /* como se estivesse preenchendo: '50px 20px' que foram definidos, porque x não é uma variável de ambiente válida */
+padding: env(x, 50px, 20px); /* ignorado '50px, 20px' porque não é um valor de preenchimento válido e x não é uma variável de ambiente válida */
+
    + +

    A sintaxe fallback, como de propriedades customizadas, permite vírgulas. Mas se o valor da propriedade não suportar vírgulas, o valor não é válido.

    + +
    +

    Nota: As propriedades do agente do usuário não são redefinidas pela propriedade all.

    +
    + +

    Especificações

    + + + + + + + + + + + + + + + + +
    EspecificaçãoStatusComentário
    {{SpecName("CSS3 Environment Variables", "#env-function", "env()")}}{{Spec2("CSS3 Environment Variables")}}Definição inicial.
    + +

    Compatibilidade com navegadores

    + +

    {{Compat("css.properties.custom-property.env")}}

    + +

    Veja também

    + + diff --git a/files/pt-br/web/css/filter-function/grayscale()/index.html b/files/pt-br/web/css/filter-function/grayscale()/index.html deleted file mode 100644 index b495a0dbbf..0000000000 --- a/files/pt-br/web/css/filter-function/grayscale()/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: grayscale() -slug: Web/CSS/filter-function/grayscale() -tags: - - CSS - - Efeito filtro - - Filtros - - Função CSS - - Referencia -translation_of: Web/CSS/filter-function/grayscale() ---- -
    {{cssref}}
    - -

    O grayscale() é uma função do CSS que modifica a imagem adicionada para as cores branco e preto . Esse resultado é um efeito "filtro". {{cssxref("<filter-function>")}}.

    - -
    {{EmbedInteractiveExample("pages/css/function-grayscale.html")}}
    - - - -

    Sintaxe

    - -
    grayscale(quantidade)
    - -

    Parâmetros

    - -
    -
    quantidade
    -
    A quantia da conversão é especificada em {{cssxref ("<number>")}} (número) ou {{cssxref ("<percentage>")}} (porcentagem). Um valor de 100% indica que a cor está compeltamente dentro da escala de cinza. Um valor de 0% não altera as cores da imagem, que permanecerá igual a original. Valores entre 0% e 100% são multiplicadores lineares no efeito cinza, modificando a escala de cores conforme a quantidade determinada. A quantia em número é equivalente a em porcentagem.
    -
    - -
    grayscale(0)     /* Não afeta a imagem */
-grayscale(.7)    /* .7 => 70% de branco&preto */
-grayscale(100%)  /* Completamente em branco&preto */
    - -

    Veja também 

    - -
      -
    • {{cssxref("<filter-function>")}}
      • -
    diff --git a/files/pt-br/web/css/filter-function/grayscale/index.html b/files/pt-br/web/css/filter-function/grayscale/index.html new file mode 100644 index 0000000000..9886e5fe7d --- /dev/null +++ b/files/pt-br/web/css/filter-function/grayscale/index.html @@ -0,0 +1,40 @@ +--- +title: grayscale() +slug: Web/CSS/filter-function/grayscale +tags: + - CSS + - Efeito filtro + - Filtros + - Função CSS + - Referencia +translation_of: Web/CSS/filter-function/grayscale() +original_slug: Web/CSS/filter-function/grayscale() +--- +
    {{cssref}}
    + +

    O grayscale() é uma função do CSS que modifica a imagem adicionada para as cores branco e preto . Esse resultado é um efeito "filtro". {{cssxref("<filter-function>")}}.

    + +
    {{EmbedInteractiveExample("pages/css/function-grayscale.html")}}
    + + + +

    Sintaxe

    + +
    grayscale(quantidade)
    + +

    Parâmetros

    + +
    +
    quantidade
    +
    A quantia da conversão é especificada em {{cssxref ("<number>")}} (número) ou {{cssxref ("<percentage>")}} (porcentagem). Um valor de 100% indica que a cor está compeltamente dentro da escala de cinza. Um valor de 0% não altera as cores da imagem, que permanecerá igual a original. Valores entre 0% e 100% são multiplicadores lineares no efeito cinza, modificando a escala de cores conforme a quantidade determinada. A quantia em número é equivalente a em porcentagem.
    +
    + +
    grayscale(0)     /* Não afeta a imagem */
+grayscale(.7)    /* .7 => 70% de branco&preto */
+grayscale(100%)  /* Completamente em branco&preto */
    + +

    Veja também 

    + +
      +
    • {{cssxref("<filter-function>")}}
      • +
    diff --git a/files/pt-br/web/css/filter-function/opacity()/index.html b/files/pt-br/web/css/filter-function/opacity()/index.html deleted file mode 100644 index 8e41945429..0000000000 --- a/files/pt-br/web/css/filter-function/opacity()/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: opacity() -slug: Web/CSS/filter-function/opacity() -tags: - - Efeitos de Filtro - - Função CSS - - Referencia -translation_of: Web/CSS/filter-function/opacity() ---- -
    {{cssref}}
    - -

    A função CSS opacity() aplica transparência às amostras na imagem inputada. Seu resultado é uma {{cssxref("<filter-function>")}}.

    - -
    -

    Nota: Essa função é similar à propriedade {{Cssxref("opacity")}} mais estabelecida. A diferença é que com filtros, alguns browsers fornecem aceleração de hardware para uma melhor performance.

    -
    - -

    Sintaxe

    - -
    opacity(amount)
    - -

    Parâmetros

    - -
    -
    amount
    -
    A quantidade de conversão, especificada com um {{cssxref("<number>")}} ou uma {{cssxref("<percentage>")}}. Um valor de 0% é completamente transparente, enquanto que um valor de 100% mantém o input inalterado. Valores entre 0% e 100% são multiplicadores lineares do efeito. O valor de lacuna para interpolação é 1.
    -
    - -

    Exemplos

    - -
    opacity(0%)   /* Completamente transparente */
-opacity(50%)  /* 50% transparente */
-opacity(1)    /* Nenhum efeito */
    - -

    Ver também

    - -
      -
    • {{cssxref("<filter-function>")}}
      • -
    • Propriedade CSS {{cssxref("opacity")}}
      • -
    diff --git a/files/pt-br/web/css/filter-function/opacity/index.html b/files/pt-br/web/css/filter-function/opacity/index.html new file mode 100644 index 0000000000..b2e0103647 --- /dev/null +++ b/files/pt-br/web/css/filter-function/opacity/index.html @@ -0,0 +1,41 @@ +--- +title: opacity() +slug: Web/CSS/filter-function/opacity +tags: + - Efeitos de Filtro + - Função CSS + - Referencia +translation_of: Web/CSS/filter-function/opacity() +original_slug: Web/CSS/filter-function/opacity() +--- +
    {{cssref}}
    + +

    A função CSS opacity() aplica transparência às amostras na imagem inputada. Seu resultado é uma {{cssxref("<filter-function>")}}.

    + +
    +

    Nota: Essa função é similar à propriedade {{Cssxref("opacity")}} mais estabelecida. A diferença é que com filtros, alguns browsers fornecem aceleração de hardware para uma melhor performance.

    +
    + +

    Sintaxe

    + +
    opacity(amount)
    + +

    Parâmetros

    + +
    +
    amount
    +
    A quantidade de conversão, especificada com um {{cssxref("<number>")}} ou uma {{cssxref("<percentage>")}}. Um valor de 0% é completamente transparente, enquanto que um valor de 100% mantém o input inalterado. Valores entre 0% e 100% são multiplicadores lineares do efeito. O valor de lacuna para interpolação é 1.
    +
    + +

    Exemplos

    + +
    opacity(0%)   /* Completamente transparente */
+opacity(50%)  /* 50% transparente */
+opacity(1)    /* Nenhum efeito */
    + +

    Ver também

    + +
      +
    • {{cssxref("<filter-function>")}}
      • +
    • Propriedade CSS {{cssxref("opacity")}}
      • +
    diff --git a/files/pt-br/web/css/filter-function/sepia()/index.html b/files/pt-br/web/css/filter-function/sepia()/index.html deleted file mode 100644 index 0ad03c1c1f..0000000000 --- a/files/pt-br/web/css/filter-function/sepia()/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: sepia() -slug: Web/CSS/filter-function/sepia() -tags: - - Efeitos de Filtro - - Função CSS - - Referencia -translation_of: Web/CSS/filter-function/sepia() ---- -
    {{cssref}}
    - -

    A função CSS sepia() converte a imagem inputada em sépia, dando uma aparência mais amarelada/marrom e quente. Seu resultado é uma {{cssxref("<filter-function>")}}.

    - -

    Sintaxe

    - -
    sepia(amount)
    - -

    Parâmetros

    - -
    -
    amount
    -
    A quantidade de conversão, especificada por um {{cssxref("<number>")}} ou uma {{cssxref("<percentage>")}}. Um valor de 100% é completamente sépia, enquanto que um valor de 0% mantém o input inalterado. Valores entre 0% e 100% são multiplicadores lineares do efeito. O valor de lacuna para interpolação é 0.
    -
    - -

    Exemplos

    - -
    sepia(0)     /* Sem efeito */
-sepia(.65)   /* 65% sépia */
-sepia(100%)  /* Completamente sépia */
    - -

    Ver também

    - -
      -
    • {{cssxref("<filter-function>")}}
      • -
    diff --git a/files/pt-br/web/css/filter-function/sepia/index.html b/files/pt-br/web/css/filter-function/sepia/index.html new file mode 100644 index 0000000000..dd7b7cd2f7 --- /dev/null +++ b/files/pt-br/web/css/filter-function/sepia/index.html @@ -0,0 +1,36 @@ +--- +title: sepia() +slug: Web/CSS/filter-function/sepia +tags: + - Efeitos de Filtro + - Função CSS + - Referencia +translation_of: Web/CSS/filter-function/sepia() +original_slug: Web/CSS/filter-function/sepia() +--- +
    {{cssref}}
    + +

    A função CSS sepia() converte a imagem inputada em sépia, dando uma aparência mais amarelada/marrom e quente. Seu resultado é uma {{cssxref("<filter-function>")}}.

    + +

    Sintaxe

    + +
    sepia(amount)
    + +

    Parâmetros

    + +
    +
    amount
    +
    A quantidade de conversão, especificada por um {{cssxref("<number>")}} ou uma {{cssxref("<percentage>")}}. Um valor de 100% é completamente sépia, enquanto que um valor de 0% mantém o input inalterado. Valores entre 0% e 100% são multiplicadores lineares do efeito. O valor de lacuna para interpolação é 0.
    +
    + +

    Exemplos

    + +
    sepia(0)     /* Sem efeito */
+sepia(.65)   /* 65% sépia */
+sepia(100%)  /* Completamente sépia */
    + +

    Ver também

    + +
      +
    • {{cssxref("<filter-function>")}}
      • +
    diff --git a/files/pt-br/web/css/transform-function/matrix()/index.html b/files/pt-br/web/css/transform-function/matrix()/index.html deleted file mode 100644 index c8cfc7a643..0000000000 --- a/files/pt-br/web/css/transform-function/matrix()/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: matrix() -slug: Web/CSS/transform-function/matrix() -translation_of: Web/CSS/transform-function/matrix() ---- -
    {{CSSRef}}
    - -

    A função CSS matrix() define uma matriz de transformação 2D homogênea. Isso resulta em um dado do tipo {{cssxref("<transform-function>")}} .

    - -
    -

    Note: matrix(a, b, c, d, tx, ty) is a shorthand for matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1).

    -
    - -

    Syntax

    - -

    The matrix() function is specified with six values. The constant values are implied and not passed as parameters; the other parameters are described in the column-major order.

    - -
    Note: Until Firefox 16, Gecko accepted a {{cssxref("<length>")}} value for tx and ty.
    - -
    matrix(a, b, c, d, tx, ty)
-
    - -

    Values

    - -
    -
    a b c d
    -
    Are {{cssxref("<number>")}}s describing the linear transformation.
    -
    tx ty
    -
    Are {{cssxref("<number>")}}s describing the translation to apply.
    -
    - - - - - - - - - - - - - - - - - - - - - -
    Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
    ac bd actxbdty001 actxbdty001 ac0txbd0ty00100001
    [a b c d tx ty]
    - -

    The values represent the following functions:
    - matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )

    - -

    Examples

    - -

    HTML

    - -
    <div>Normal</div>
-<div class="changed">Changed</div>
    - -

    CSS

    - -
    div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.changed {
-  transform: matrix(1, 2, -1, 1, 80, 80);
-  background-color: pink;
-}
    - -

    Result

    - -

    {{EmbedLiveSample("Examples", 350, 350)}}

    - -

    Specifications

    - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName("CSS3 Transforms", "#funcdef-transform-matrix", "matrix()")}}{{Spec2("CSS3 Transforms")}}Initial definition
    - -

    Compatibilidade com navegadores

    - -

    Please see the <transform-function> data type for compatibility info.

    - -

    See also

    - - diff --git a/files/pt-br/web/css/transform-function/matrix/index.html b/files/pt-br/web/css/transform-function/matrix/index.html new file mode 100644 index 0000000000..8b21cf7b37 --- /dev/null +++ b/files/pt-br/web/css/transform-function/matrix/index.html @@ -0,0 +1,112 @@ +--- +title: matrix() +slug: Web/CSS/transform-function/matrix +translation_of: Web/CSS/transform-function/matrix() +original_slug: Web/CSS/transform-function/matrix() +--- +
    {{CSSRef}}
    + +

    A função CSS matrix() define uma matriz de transformação 2D homogênea. Isso resulta em um dado do tipo {{cssxref("<transform-function>")}} .

    + +
    +

    Note: matrix(a, b, c, d, tx, ty) is a shorthand for matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1).

    +
    + +

    Syntax

    + +

    The matrix() function is specified with six values. The constant values are implied and not passed as parameters; the other parameters are described in the column-major order.

    + +
    Note: Until Firefox 16, Gecko accepted a {{cssxref("<length>")}} value for tx and ty.
    + +
    matrix(a, b, c, d, tx, ty)
+
    + +

    Values

    + +
    +
    a b c d
    +
    Are {{cssxref("<number>")}}s describing the linear transformation.
    +
    tx ty
    +
    Are {{cssxref("<number>")}}s describing the translation to apply.
    +
    + + + + + + + + + + + + + + + + + + + + + +
    Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
    ac bd actxbdty001 actxbdty001 ac0txbd0ty00100001
    [a b c d tx ty]
    + +

    The values represent the following functions:
    + matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )

    + +

    Examples

    + +

    HTML

    + +
    <div>Normal</div>
+<div class="changed">Changed</div>
    + +

    CSS

    + +
    div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.changed {
+  transform: matrix(1, 2, -1, 1, 80, 80);
+  background-color: pink;
+}
    + +

    Result

    + +

    {{EmbedLiveSample("Examples", 350, 350)}}

    + +

    Specifications

    + + + + + + + + + + + + + + + + +
    SpecificationStatusComment
    {{SpecName("CSS3 Transforms", "#funcdef-transform-matrix", "matrix()")}}{{Spec2("CSS3 Transforms")}}Initial definition
    + +

    Compatibilidade com navegadores

    + +

    Please see the <transform-function> data type for compatibility info.

    + +

    See also

    + + diff --git a/files/pt-br/web/css/transform-function/perspective()/index.html b/files/pt-br/web/css/transform-function/perspective()/index.html deleted file mode 100644 index 314e1bc86c..0000000000 --- a/files/pt-br/web/css/transform-function/perspective()/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: perspective() -slug: Web/CSS/transform-function/perspective() -tags: - - Função CSS - - Referencia - - Transformações CSS -translation_of: Web/CSS/transform-function/perspective() ---- -
    {{CSSRef}}
    - -

    A função CSS perspective() define uma transformação que configura a distância entre o usuário e o plano z=0. Seu resultado é um dado do tipo {{cssxref("<transform-function>")}}.

    - -

    Sintaxe

    - -

    A distância de perspectiva usada porperspective() é especificada por um valor {{cssxref("<length>")}}, que representa a distância entre o usuário e o plano z=0. Um valor positivo faz o elemento parecer mais perto do usuário, e um valor negativo o faz parecer mais longe.

    - -
    perspective(d)
-
    - -

    Valores

    - -
    -
    d
    -
    É um {{cssxref("<length>")}} representando a distância do usuário até o plano z=0. Se for 0 ou um valor negativo, nenhuma transformação de perspectiva é aplicada.
    -
    - - - - - - - - - - - - - - - - - -
    Coordenadas cartesianas em ℝ2Coordenadas homogêneas em ℝℙ2Coordenadas cartesianas em ℝ3Coordenadas homogêneas em ℝℙ3
    -

    Essa transformação se aplica ao espaço 3D e não pode ser representada no plano.

    -     		Essa não é uma transformação linear em ℝ3, e não pode ser representada usando uma matriz de coordenadas cartesianas. 10000100001000−1/d1
    - -

    Exemplos

    - -

    HTML

    - -
    <p>Sem perspectiva:</p>
-<div class="no-perspective-box">
-  <div class="face front">A</div>
-  <div class="face top">B</div>
-  <div class="face left">C</div>
-</div>
-
-<p>Com perspectiva (7.5cm):</p>
-<div class="perspective-box">
-  <div class="face front">A</div>
-  <div class="face top">B</div>
-  <div class="face left">C</div>
-</div>
-
    - -

    CSS

    - -
    .face {
-  position: absolute;
-  width: 100px;
-  height: 100px;
-  line-height: 100px;
-  font-size: 100px;
-  text-align: center;
-}
-
-.no-perspective-box {
-  width: 100px;
-  height: 100px;
-  transform-style: preserve-3d;
-  transform: rotateX(-15deg) rotateY(15deg);
-  margin-left: 100px;
-}
-
-.perspective-box {
-  width: 100px;
-  height: 100px;
-  transform-style: preserve-3d;
-  transform: perspective(7.5cm) rotateX(-15deg) rotateY(15deg);
-  margin-left: 100px;
-}
-
-.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);
-}
-
    - -

    Resultado

    - -

    {{ EmbedLiveSample('Examples', '250', '350') }}

    - -

    Compatibilidade com navegadores

    - -

    Veja o tipo de dado <transform-function> para informações de compatibilidade.

    - -

    Ver também

    - -
      -
    • {{cssxref("transform")}}
      • -
    • {{cssxref("<transform-function>")}}
      • -
    diff --git a/files/pt-br/web/css/transform-function/perspective/index.html b/files/pt-br/web/css/transform-function/perspective/index.html new file mode 100644 index 0000000000..05b62476e6 --- /dev/null +++ b/files/pt-br/web/css/transform-function/perspective/index.html @@ -0,0 +1,124 @@ +--- +title: perspective() +slug: Web/CSS/transform-function/perspective +tags: + - Função CSS + - Referencia + - Transformações CSS +translation_of: Web/CSS/transform-function/perspective() +original_slug: Web/CSS/transform-function/perspective() +--- +
    {{CSSRef}}
    + +

    A função CSS perspective() define uma transformação que configura a distância entre o usuário e o plano z=0. Seu resultado é um dado do tipo {{cssxref("<transform-function>")}}.

    + +

    Sintaxe

    + +

    A distância de perspectiva usada porperspective() é especificada por um valor {{cssxref("<length>")}}, que representa a distância entre o usuário e o plano z=0. Um valor positivo faz o elemento parecer mais perto do usuário, e um valor negativo o faz parecer mais longe.

    + +
    perspective(d)
+
    + +

    Valores

    + +
    +
    d
    +
    É um {{cssxref("<length>")}} representando a distância do usuário até o plano z=0. Se for 0 ou um valor negativo, nenhuma transformação de perspectiva é aplicada.
    +
    + + + + + + + + + + + + + + + + + +
    Coordenadas cartesianas em ℝ2Coordenadas homogêneas em ℝℙ2Coordenadas cartesianas em ℝ3Coordenadas homogêneas em ℝℙ3
    +

    Essa transformação se aplica ao espaço 3D e não pode ser representada no plano.

    +     		Essa não é uma transformação linear em ℝ3, e não pode ser representada usando uma matriz de coordenadas cartesianas. 10000100001000−1/d1
    + +

    Exemplos

    + +

    HTML

    + +
    <p>Sem perspectiva:</p>
+<div class="no-perspective-box">
+  <div class="face front">A</div>
+  <div class="face top">B</div>
+  <div class="face left">C</div>
+</div>
+
+<p>Com perspectiva (7.5cm):</p>
+<div class="perspective-box">
+  <div class="face front">A</div>
+  <div class="face top">B</div>
+  <div class="face left">C</div>
+</div>
+
    + +

    CSS

    + +
    .face {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  line-height: 100px;
+  font-size: 100px;
+  text-align: center;
+}
+
+.no-perspective-box {
+  width: 100px;
+  height: 100px;
+  transform-style: preserve-3d;
+  transform: rotateX(-15deg) rotateY(15deg);
+  margin-left: 100px;
+}
+
+.perspective-box {
+  width: 100px;
+  height: 100px;
+  transform-style: preserve-3d;
+  transform: perspective(7.5cm) rotateX(-15deg) rotateY(15deg);
+  margin-left: 100px;
+}
+
+.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);
+}
+
    + +

    Resultado

    + +

    {{ EmbedLiveSample('Examples', '250', '350') }}

    + +

    Compatibilidade com navegadores

    + +

    Veja o tipo de dado <transform-function> para informações de compatibilidade.

    + +

    Ver também

    + +
      +
    • {{cssxref("transform")}}
      • +
    • {{cssxref("<transform-function>")}}
      • +
    diff --git a/files/pt-br/web/css/transform-function/rotate()/index.html b/files/pt-br/web/css/transform-function/rotate()/index.html deleted file mode 100644 index 5f7b4270d0..0000000000 --- a/files/pt-br/web/css/transform-function/rotate()/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: rotate() -slug: Web/CSS/transform-function/rotate() -translation_of: Web/CSS/transform-function/rotate() ---- -

    {{CSSRef}}

    - -

    A função CSS rotate() define uma transformação que gira um elemento em torno de um ponto fixo no plano 2D, sem deformá-lo. O resultado é um tipo de dados {{cssxref("<transform-function>")}}.

    - -

    - -

    O eixo de rotação passa por uma origem, definido pela propriedade CSS {{ cssxref("transform-origin") }}.

    - -

    Sintaxe

    - -

    A quantidade de rotação criada por rotate() é especificado por um {{cssxref("<angle>")}}. Se positivo, o movimento será no sentido horário; Se negativo, ela será no sentido anti-horário. Uma rotação de 180° é chamada de point reflection (reflexão do ponto).

    - -
    rotate(a)
-
    - -

    Valores

    - -
    -
    a
    -
    É um {{ cssxref("<angle>") }} representando o ângulo da rotação. Um ângulo positivo indica uma rotação no sentido horário, um ângulo negativo no sentido anti-horário.
    -
    - - - - - - - - - - - - - - - - - - - - - -
    Coordenadas cartesianas em ℝ2Coordenadas homogêneas em ℝℙ2Coordenadas cartesianas em ℝ3Coordenadas homogêneas em ℝℙ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]
    - -

    Exemplos

    - -

    HTML

    - -
    <div>Normal</div>
-<div class="rotated">Rotated</div>
    - -

    CSS

    - -
    div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.rotated {
-  transform: rotate(45deg); /* Equal to rotateZ(45deg) */
-  background-color: pink;
-}
-
    - -

    Resultado

    - -

    {{EmbedLiveSample("Examples", "auto", 180)}}

    - -

    Compatibilidade do navegador

    - -

    Por favor, veja o tipo de dados <transform-function> para informações de compatibilidade.

    - -

    Veja também

    - -
      -
    • {{cssxref("transform")}}
      • -
    • {{cssxref("<transform-function>")}}
      • -
    • rotate3d()
      • -
    diff --git a/files/pt-br/web/css/transform-function/rotate/index.html b/files/pt-br/web/css/transform-function/rotate/index.html new file mode 100644 index 0000000000..f4cebf0340 --- /dev/null +++ b/files/pt-br/web/css/transform-function/rotate/index.html @@ -0,0 +1,86 @@ +--- +title: rotate() +slug: Web/CSS/transform-function/rotate +translation_of: Web/CSS/transform-function/rotate() +original_slug: Web/CSS/transform-function/rotate() +--- +

    {{CSSRef}}

    + +

    A função CSS rotate() define uma transformação que gira um elemento em torno de um ponto fixo no plano 2D, sem deformá-lo. O resultado é um tipo de dados {{cssxref("<transform-function>")}}.

    + +

    + +

    O eixo de rotação passa por uma origem, definido pela propriedade CSS {{ cssxref("transform-origin") }}.

    + +

    Sintaxe

    + +

    A quantidade de rotação criada por rotate() é especificado por um {{cssxref("<angle>")}}. Se positivo, o movimento será no sentido horário; Se negativo, ela será no sentido anti-horário. Uma rotação de 180° é chamada de point reflection (reflexão do ponto).

    + +
    rotate(a)
+
    + +

    Valores

    + +
    +
    a
    +
    É um {{ cssxref("<angle>") }} representando o ângulo da rotação. Um ângulo positivo indica uma rotação no sentido horário, um ângulo negativo no sentido anti-horário.
    +
    + + + + + + + + + + + + + + + + + + + + + +
    Coordenadas cartesianas em ℝ2Coordenadas homogêneas em ℝℙ2Coordenadas cartesianas em ℝ3Coordenadas homogêneas em ℝℙ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]
    + +

    Exemplos

    + +

    HTML

    + +
    <div>Normal</div>
+<div class="rotated">Rotated</div>
    + +

    CSS

    + +
    div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate(45deg); /* Equal to rotateZ(45deg) */
+  background-color: pink;
+}
+
    + +

    Resultado

    + +

    {{EmbedLiveSample("Examples", "auto", 180)}}

    + +

    Compatibilidade do navegador

    + +

    Por favor, veja o tipo de dados <transform-function> para informações de compatibilidade.

    + +

    Veja também

    + +
      +
    • {{cssxref("transform")}}
      • +
    • {{cssxref("<transform-function>")}}
      • +
    • rotate3d()
      • +
    diff --git a/files/pt-br/web/css/transform-function/rotate3d()/index.html b/files/pt-br/web/css/transform-function/rotate3d()/index.html deleted file mode 100644 index 28b53b4ecc..0000000000 --- a/files/pt-br/web/css/transform-function/rotate3d()/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: rotate3d() -slug: Web/CSS/transform-function/rotate3d() -tags: - - Função CSS - - Referencia - - Transformações CSS -translation_of: Web/CSS/transform-function/rotate3d() ---- -
    {{CSSRef}}
    - -

    A função CSS rotate3d() define uma transformação que gira um elemento em torno de um eixo fixo no espaço 3D, sem deformá-lo. Seu resultado é um dado do tipo {{cssxref("<transform-function>")}}.

    - -

    No espaço 3D, rotações têm três graus de liberdade que, juntos, descrevem um único eixo de rotação. O eixo de rotação é definido por um vetor [x, y, z] e passado pela origem (como definido pela propriedade {{ cssxref("transform-origin") }}). Se, como especificado, o vetor não for normalizado (isto é, se a soma dos quadrados das suas três coordenadas não for 1), o {{glossary("user agent")}} irá normalizá-lo internamente. Um vetor não-normalizável, como o vetor nulo [0, 0, 0], fará com que a rotação seja ignorada, mas sem invalidar toda a propriedade CSS.

    - -
    Nota: Diferente de rotações no plano 2D, a composição de rotações 3D normalmente não é comutativa. Em outras palavras, a ordem na qual as rotações são aplicadas impacta o resultado.
    - -

    Sintaxe

    - -

    A quantidade de rotação criada por rotate3d() é especificada por três {{cssxref("<number>")}} e um {{cssxref("<angle>")}}. Os <number> representam as coordenadas x, y e z do vetor, denotando o eixo de rotação. O <angle> representa o ângulo de rotação; se positivo, o movimento será no sentido horário; se negativo, será no sentido anti-horário.

    - -
    rotate3d(x, y, z, a)
-
    - -

    Valores

    - -
    -
    x
    -
    É um {{cssxref("<number>")}} descrevendo a coordenada x do vetor denotando o eixo de rotação que pode ser entre 0 e 1.
    -
    y
    -
    É um {{cssxref("<number>")}} descrevendo a coordenada y do vetor denotando o eixo de rotação que pode ser entre 0 e 1.
    -
    z
    -
    É um {{cssxref("<number>")}} descrevendo a coordenada z do vetor denotando o eixo de rotação que pode ser entre 0 e 1.
    -
    a
    -
    É um {{ cssxref("<angle>") }} representando o ângulo de rotação. Um ângulo positivo denota uma rotação no sentido horário, e um negativo no sentido anti-horário.
    -
    - - - - - - - - - - - - - - - - - - - -
    Coordenadas cartesianas em ℝ2Essa transformação se aplica ao plano 3D e não pode ser representada em um plano.
    Coordenadas homogêneas em ℝℙ2
    Coordenadas cartesianas em ℝ3 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
    Coordenadas homogêneas em ℝℙ3
    - -

    Exemplos

    - -

    Rotacionando no eixo y

    - -

    HTML

    - -
    <div>Normal</div>
-<div class="rotated">Rotacionado</div>
    - -

    CSS

    - -
    body {
-  perspective: 800px;
-}
-
-div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.rotated {
-  transform: rotate3d(0, 1, 0, 60deg);
-  background-color: pink;
-}
-
    - -

    Resultado

    - -

    {{EmbedLiveSample("Rotating_on_the_y-axis", "auto", 180)}}

    - -

    Rotacionando em um eixo customizado

    - -

    HTML

    - -
    <div>Normal</div>
-<div class="rotated">Rotacionado</div>
    - -

    CSS

    - -
    body {
-  perspective: 800px;
-}
-
-div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.rotated {
-  transform: rotate3d(1, 2, -1, 192deg);
-  background-color: pink;
-}
-
    - -

    Resultado

    - -

    {{EmbedLiveSample("Rotating_on_a_custom_axis", "auto", 180)}}

    - -

    Compatibilidade com navegadores

    - -

    Veja o tipo de dado <transform-function> para informações de compatibilidade.

    - -

    Ver também

    - -
      -
    • {{cssxref("transform")}}
      • -
    • {{cssxref("<transform-function>")}}
      • -
    diff --git a/files/pt-br/web/css/transform-function/rotate3d/index.html b/files/pt-br/web/css/transform-function/rotate3d/index.html new file mode 100644 index 0000000000..7f5dd81c3a --- /dev/null +++ b/files/pt-br/web/css/transform-function/rotate3d/index.html @@ -0,0 +1,128 @@ +--- +title: rotate3d() +slug: Web/CSS/transform-function/rotate3d +tags: + - Função CSS + - Referencia + - Transformações CSS +translation_of: Web/CSS/transform-function/rotate3d() +original_slug: Web/CSS/transform-function/rotate3d() +--- +
    {{CSSRef}}
    + +

    A função CSS rotate3d() define uma transformação que gira um elemento em torno de um eixo fixo no espaço 3D, sem deformá-lo. Seu resultado é um dado do tipo {{cssxref("<transform-function>")}}.

    + +

    No espaço 3D, rotações têm três graus de liberdade que, juntos, descrevem um único eixo de rotação. O eixo de rotação é definido por um vetor [x, y, z] e passado pela origem (como definido pela propriedade {{ cssxref("transform-origin") }}). Se, como especificado, o vetor não for normalizado (isto é, se a soma dos quadrados das suas três coordenadas não for 1), o {{glossary("user agent")}} irá normalizá-lo internamente. Um vetor não-normalizável, como o vetor nulo [0, 0, 0], fará com que a rotação seja ignorada, mas sem invalidar toda a propriedade CSS.

    + +
    Nota: Diferente de rotações no plano 2D, a composição de rotações 3D normalmente não é comutativa. Em outras palavras, a ordem na qual as rotações são aplicadas impacta o resultado.
    + +

    Sintaxe

    + +

    A quantidade de rotação criada por rotate3d() é especificada por três {{cssxref("<number>")}} e um {{cssxref("<angle>")}}. Os <number> representam as coordenadas x, y e z do vetor, denotando o eixo de rotação. O <angle> representa o ângulo de rotação; se positivo, o movimento será no sentido horário; se negativo, será no sentido anti-horário.

    + +
    rotate3d(x, y, z, a)
+
    + +

    Valores

    + +
    +
    x
    +
    É um {{cssxref("<number>")}} descrevendo a coordenada x do vetor denotando o eixo de rotação que pode ser entre 0 e 1.
    +
    y
    +
    É um {{cssxref("<number>")}} descrevendo a coordenada y do vetor denotando o eixo de rotação que pode ser entre 0 e 1.
    +
    z
    +
    É um {{cssxref("<number>")}} descrevendo a coordenada z do vetor denotando o eixo de rotação que pode ser entre 0 e 1.
    +
    a
    +
    É um {{ cssxref("<angle>") }} representando o ângulo de rotação. Um ângulo positivo denota uma rotação no sentido horário, e um negativo no sentido anti-horário.
    +
    + + + + + + + + + + + + + + + + + + + +
    Coordenadas cartesianas em ℝ2Essa transformação se aplica ao plano 3D e não pode ser representada em um plano.
    Coordenadas homogêneas em ℝℙ2
    Coordenadas cartesianas em ℝ3 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
    Coordenadas homogêneas em ℝℙ3
    + +

    Exemplos

    + +

    Rotacionando no eixo y

    + +

    HTML

    + +
    <div>Normal</div>
+<div class="rotated">Rotacionado</div>
    + +

    CSS

    + +
    body {
+  perspective: 800px;
+}
+
+div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate3d(0, 1, 0, 60deg);
+  background-color: pink;
+}
+
    + +

    Resultado

    + +

    {{EmbedLiveSample("Rotating_on_the_y-axis", "auto", 180)}}

    + +

    Rotacionando em um eixo customizado

    + +

    HTML

    + +
    <div>Normal</div>
+<div class="rotated">Rotacionado</div>
    + +

    CSS

    + +
    body {
+  perspective: 800px;
+}
+
+div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate3d(1, 2, -1, 192deg);
+  background-color: pink;
+}
+
    + +

    Resultado

    + +

    {{EmbedLiveSample("Rotating_on_a_custom_axis", "auto", 180)}}

    + +

    Compatibilidade com navegadores

    + +

    Veja o tipo de dado <transform-function> para informações de compatibilidade.

    + +

    Ver também

    + +
      +
    • {{cssxref("transform")}}
      • +
    • {{cssxref("<transform-function>")}}
      • +
    diff --git a/files/pt-br/web/css/transform-function/scale()/index.html b/files/pt-br/web/css/transform-function/scale()/index.html deleted file mode 100644 index c249bd6931..0000000000 --- a/files/pt-br/web/css/transform-function/scale()/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: scale() -slug: Web/CSS/transform-function/scale() -tags: - - Função CSS - - Referencia - - Transformações CSS -translation_of: Web/CSS/transform-function/scale() ---- -
    {{CSSRef}}
    - -

    A função CSS scale() define uma transformação que redimensiona um elemento no plano 2D. Como o redimensionamento é definido por um vetor, ele pode transformar as dimensões verticais e horizontais em escalas diferentes. Seu resultado é um dado do tipo {{cssxref("<transform-function>")}}.

    - -

    - -

    Essa transformação de redimensionamento é caracterizada por um vetor bidimensional. Suas coordenadas definem o quanto cada direção deve ser redimensionada. Se as duas coordenadas forem iguais, o redimensionamento é uniforme (isotrópico) e a proporção do elemento é preservada (isto é uma transformação homotética).

    - -

    Quando o valor de uma coordenada está fora do alcance [-1, 1], o elemento cresce ao longo daquela dimensão; quando está dentro, ele encolhe. Se for negativo, o resultado é um ponto de reflexão naquela dimensão. O valor 1 não tem efeito.

    - -
    Nota: A função scale() apenas redimensiona em 2D Para redimensionar em 3D, use scale3d() ao invés.
    - -

    Sintaxe

    - -

    A função scale() é especificada com um ou dois valores, que representam a quantidade de redimensionamento a ser aplicada em cada direção.

    - -
    scale(sx)
-
-scale(sx, sy)
-
    - -

    Valores

    - -
    -
    sx
    -
    Um {{cssxref("<number>")}} representando a abscissa do vetor de redimensionamento.
    -
    sy
    -
    Um {{cssxref("<number>")}} representando a ordenada do vetor de redimensionamento. Se não for definida, seu valor padrão ésx, resultando em um redimensionamento uniforme que preserva a proporção do elemento.
    -
    - - - - - - - - - - - - - - - - - - - - - -
    Coordenadas cartesianas em ℝ2Coordenadas homogêneas em ℝℙ2Coordenadas cartesianas em ℝ3Coordenadas homogêneas em ℝℙ3
    sx0 0sy sx000sy0001 sx000sy0001 sx0000sy0000100001
    [sx 0 0 sy 0 0]
    - -

    Exemplos

    - -

    Redimensionando as dimensões X e Y juntas

    - -

    HTML

    - -
    <div>Normal</div>
-<div class="scaled">Redimensionado</div>
    - -

    CSS

    - -
    div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.scaled {
-  transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
-  background-color: pink;
-}
-
    - -

    Resultado

    - -

    {{EmbedLiveSample("Scaling_the_X_and_Y_dimensions_together", "200", "200")}}

    - -

    Redimensionando dimensões X e Y separadamente e transladando a origem

    - -

    HTML

    - -
    <div>Normal</div>
-<div class="scaled">Redimensionado</div>
    - -

    CSS

    - -
    div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.scaled {
-  transform: scale(2, 0.5); /* Igual a scaleX(2) scaleY(0.5) */
-  transform-origin: left;
-  background-color: pink;
-}
-
    - -

    Resultado

    - -

    {{EmbedLiveSample("Scaling_X_and_Y_dimensions_separately_and_translating_the_origin", "200", "200")}}

    - -

    Compatibilidade com navegadores

    - -

    Veja o dado do tipo <transform-function> para informações de compatibilidade.

    - -

    Ver também

    - -
      -
    • {{cssxref("transform")}}
      • -
    • {{cssxref("<transform-function>")}}
      • -
    • scale3d()
      • -
    diff --git a/files/pt-br/web/css/transform-function/scale/index.html b/files/pt-br/web/css/transform-function/scale/index.html new file mode 100644 index 0000000000..3e18a2e3c6 --- /dev/null +++ b/files/pt-br/web/css/transform-function/scale/index.html @@ -0,0 +1,126 @@ +--- +title: scale() +slug: Web/CSS/transform-function/scale +tags: + - Função CSS + - Referencia + - Transformações CSS +translation_of: Web/CSS/transform-function/scale() +original_slug: Web/CSS/transform-function/scale() +--- +
    {{CSSRef}}
    + +

    A função CSS scale() define uma transformação que redimensiona um elemento no plano 2D. Como o redimensionamento é definido por um vetor, ele pode transformar as dimensões verticais e horizontais em escalas diferentes. Seu resultado é um dado do tipo {{cssxref("<transform-function>")}}.

    + +

    + +

    Essa transformação de redimensionamento é caracterizada por um vetor bidimensional. Suas coordenadas definem o quanto cada direção deve ser redimensionada. Se as duas coordenadas forem iguais, o redimensionamento é uniforme (isotrópico) e a proporção do elemento é preservada (isto é uma transformação homotética).

    + +

    Quando o valor de uma coordenada está fora do alcance [-1, 1], o elemento cresce ao longo daquela dimensão; quando está dentro, ele encolhe. Se for negativo, o resultado é um ponto de reflexão naquela dimensão. O valor 1 não tem efeito.

    + +
    Nota: A função scale() apenas redimensiona em 2D Para redimensionar em 3D, use scale3d() ao invés.
    + +

    Sintaxe

    + +

    A função scale() é especificada com um ou dois valores, que representam a quantidade de redimensionamento a ser aplicada em cada direção.

    + +
    scale(sx)
+
+scale(sx, sy)
+
    + +

    Valores

    + +
    +
    sx
    +
    Um {{cssxref("<number>")}} representando a abscissa do vetor de redimensionamento.
    +
    sy
    +
    Um {{cssxref("<number>")}} representando a ordenada do vetor de redimensionamento. Se não for definida, seu valor padrão ésx, resultando em um redimensionamento uniforme que preserva a proporção do elemento.
    +
    + + + + + + + + + + + + + + + + + + + + + +
    Coordenadas cartesianas em ℝ2Coordenadas homogêneas em ℝℙ2Coordenadas cartesianas em ℝ3Coordenadas homogêneas em ℝℙ3
    sx0 0sy sx000sy0001 sx000sy0001 sx0000sy0000100001
    [sx 0 0 sy 0 0]
    + +

    Exemplos

    + +

    Redimensionando as dimensões X e Y juntas

    + +

    HTML

    + +
    <div>Normal</div>
+<div class="scaled">Redimensionado</div>
    + +

    CSS

    + +
    div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.scaled {
+  transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
+  background-color: pink;
+}
+
    + +

    Resultado

    + +

    {{EmbedLiveSample("Scaling_the_X_and_Y_dimensions_together", "200", "200")}}

    + +

    Redimensionando dimensões X e Y separadamente e transladando a origem

    + +

    HTML

    + +
    <div>Normal</div>
+<div class="scaled">Redimensionado</div>
    + +

    CSS

    + +
    div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.scaled {
+  transform: scale(2, 0.5); /* Igual a scaleX(2) scaleY(0.5) */
+  transform-origin: left;
+  background-color: pink;
+}
+
    + +

    Resultado

    + +

    {{EmbedLiveSample("Scaling_X_and_Y_dimensions_separately_and_translating_the_origin", "200", "200")}}

    + +

    Compatibilidade com navegadores

    + +

    Veja o dado do tipo <transform-function> para informações de compatibilidade.

    + +

    Ver também

    + +
      +
    • {{cssxref("transform")}}
      • +
    • {{cssxref("<transform-function>")}}
      • +
    • scale3d()
      • +
    diff --git a/files/pt-br/web/css/transform-function/translate()/index.html b/files/pt-br/web/css/transform-function/translate()/index.html deleted file mode 100644 index 3a0374d2fe..0000000000 --- a/files/pt-br/web/css/transform-function/translate()/index.html +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: translate() -slug: Web/CSS/transform-function/translate() -tags: - - CSS - - Função CSS - - Referencia - - Transformações CSS -translation_of: Web/CSS/transform-function/translate() ---- -
    {{CSSRef}}
    - -

    A função CSS translate() reposiciona um elemento na direção horizontal e/ou vertical. O seu resultado é um tipo de dado {{cssxref("<transform-function>")}}.

    - -

    - -

    Esta transformação é caracterizada por um vetor bidimensional. Suas coordenadas definem o quanto o elemento se move em cada direção.

    - -

    Sintaxe

    - -
    /* Valores <length-percentage> únicos */
-transform: translate(200px);
-transform: translate(50%);
-
-/* Valores <length-percentage> duplos */
-transform: translate(100px, 200px);
-transform: translate(100px, 50%);
-transform: translate(30%, 200px);
-transform: translate(30%, 50%);
-
    - -

    Valores

    - -
    -
    Valores <length-percentage> únicos
    -
    Este valor é um {{cssxref("length")}} ou {{cssxref("percentage")}} representando a abcissa (horizontal, coordenada x) do vetor de translação. A ordenada (vertical, coordenada y) do vetor de translação será definida como 0. Por exemplo, translate(2) é equivalente a translate(2, 0). Um valor percentual refere-se à largura da caixa de referência definida pela propriedade {{cssxref("transform-box")}}.
    -
    Valores <length-percentage> duplos
    -
    Este valor descreve dois {{cssxref("length")}} ou valores {{cssxref("percentage")}} representando tanto a abcissa (coordenada x) quanto a ordenada (coordenada y) do vetor de translação. Uma porcentagem como primeiro valor refere-se à largura, como segunda parte da altura da caixa de referência definida pela propedade {{cssxref("transform-box")}}.
    -
    - - - - - - - - - - - - - - - - - - - - - -
    Coordenadas cartesianas em ℝ2Coordenadas homogêneas emℝℙ2Coordenadas cartesianas em ℝ3Coordenadas homogêneas em ℝℙ3
    -

    Uma translação não é uma transformação linear em ℝ2 e não pode ser representada usando uma matriz de coordenadas cartesianas.

    -     		10tx01ty001 10tx01ty001 100tx010ty00100001
    [1 0 0 1 tx ty]
    - -

    Sintaxe formal

    - -
    translate({{cssxref("length-percentage")}} , {{cssxref("length-percentage")}}?)
-
    - -

    Exemplos

    - -

    Usando uma conversão de eixo único

    - -

    HTML

    - -
    <div>Estático</div>
-<div class="moved">Movido</div>
-<div>Estático</div>
    - -

    CSS

    - -
    div {
-  width: 60px;
-  height: 60px;
-  background-color: skyblue;
-}
-
-.moved {
-  transform: translate(10px); /* Igual a: translateX(10px) ou translate(10px, 0) */
-  background-color: pink;
-}
-
    - -

    Resultado

    - -

    {{EmbedLiveSample("Using_a_single-axis_translation", 250, 250)}}

    - -

    Combinando a translação do eixo y e do eixo x

    - -

    HTML

    - -
    <div>Estático</div>
-<div class="moved">Movido</div>
-<div>Estático</div>
    - -

    CSS

    - -
    div {
-  width: 60px;
-  height: 60px;
-  background-color: skyblue;
-}
-
-.moved {
-  transform: translate(10px, 10px);
-  background-color: pink;
-}
-
    - -

    Resultado

    - -

    {{EmbedLiveSample("Combining_y-axis_and_x-axis_translation", 250, 250)}}

    - -

    Especificações

    - - - - - - - - - - - - - - - - -
    EspecificaçõesEstadoComentário
    {{SpecName('CSS3 Transforms', '#funcdef-transform-translate', 'translate()')}}{{Spec2('CSS3 Transforms')}}Definição inicial
    - -

    Compatibilidade com navegadores

    - -

    Verifique o tipo de dado <transform-function> para informações de compatibilidade.

    - -

    Veja também

    - -
      -
    • {{cssxref("transform")}}
      • -
    • {{cssxref("<transform-function>")}}
      • -
    diff --git a/files/pt-br/web/css/transform-function/translate/index.html b/files/pt-br/web/css/transform-function/translate/index.html new file mode 100644 index 0000000000..8dd01bc26a --- /dev/null +++ b/files/pt-br/web/css/transform-function/translate/index.html @@ -0,0 +1,153 @@ +--- +title: translate() +slug: Web/CSS/transform-function/translate +tags: + - CSS + - Função CSS + - Referencia + - Transformações CSS +translation_of: Web/CSS/transform-function/translate() +original_slug: Web/CSS/transform-function/translate() +--- +
    {{CSSRef}}
    + +

    A função CSS translate() reposiciona um elemento na direção horizontal e/ou vertical. O seu resultado é um tipo de dado {{cssxref("<transform-function>")}}.

    + +

    + +

    Esta transformação é caracterizada por um vetor bidimensional. Suas coordenadas definem o quanto o elemento se move em cada direção.

    + +

    Sintaxe

    + +
    /* Valores <length-percentage> únicos */
+transform: translate(200px);
+transform: translate(50%);
+
+/* Valores <length-percentage> duplos */
+transform: translate(100px, 200px);
+transform: translate(100px, 50%);
+transform: translate(30%, 200px);
+transform: translate(30%, 50%);
+
    + +

    Valores

    + +
    +
    Valores <length-percentage> únicos
    +
    Este valor é um {{cssxref("length")}} ou {{cssxref("percentage")}} representando a abcissa (horizontal, coordenada x) do vetor de translação. A ordenada (vertical, coordenada y) do vetor de translação será definida como 0. Por exemplo, translate(2) é equivalente a translate(2, 0). Um valor percentual refere-se à largura da caixa de referência definida pela propriedade {{cssxref("transform-box")}}.
    +
    Valores <length-percentage> duplos
    +
    Este valor descreve dois {{cssxref("length")}} ou valores {{cssxref("percentage")}} representando tanto a abcissa (coordenada x) quanto a ordenada (coordenada y) do vetor de translação. Uma porcentagem como primeiro valor refere-se à largura, como segunda parte da altura da caixa de referência definida pela propedade {{cssxref("transform-box")}}.
    +
    + + + + + + + + + + + + + + + + + + + + + +
    Coordenadas cartesianas em ℝ2Coordenadas homogêneas emℝℙ2Coordenadas cartesianas em ℝ3Coordenadas homogêneas em ℝℙ3
    +

    Uma translação não é uma transformação linear em ℝ2 e não pode ser representada usando uma matriz de coordenadas cartesianas.

    +     		10tx01ty001 10tx01ty001 100tx010ty00100001
    [1 0 0 1 tx ty]
    + +

    Sintaxe formal

    + +
    translate({{cssxref("length-percentage")}} , {{cssxref("length-percentage")}}?)
+
    + +

    Exemplos

    + +

    Usando uma conversão de eixo único

    + +

    HTML

    + +
    <div>Estático</div>
+<div class="moved">Movido</div>
+<div>Estático</div>
    + +

    CSS

    + +
    div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: translate(10px); /* Igual a: translateX(10px) ou translate(10px, 0) */
+  background-color: pink;
+}
+
    + +

    Resultado

    + +

    {{EmbedLiveSample("Using_a_single-axis_translation", 250, 250)}}

    + +

    Combinando a translação do eixo y e do eixo x

    + +

    HTML

    + +
    <div>Estático</div>
+<div class="moved">Movido</div>
+<div>Estático</div>
    + +

    CSS

    + +
    div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: translate(10px, 10px);
+  background-color: pink;
+}
+
    + +

    Resultado

    + +

    {{EmbedLiveSample("Combining_y-axis_and_x-axis_translation", 250, 250)}}

    + +

    Especificações

    + + + + + + + + + + + + + + + + +
    EspecificaçõesEstadoComentário
    {{SpecName('CSS3 Transforms', '#funcdef-transform-translate', 'translate()')}}{{Spec2('CSS3 Transforms')}}Definição inicial
    + +

    Compatibilidade com navegadores

    + +

    Verifique o tipo de dado <transform-function> para informações de compatibilidade.

    + +

    Veja também

    + +
      +
    • {{cssxref("transform")}}
      • +
    • {{cssxref("<transform-function>")}}
      • +
    diff --git a/files/pt-br/web/css/var()/index.html b/files/pt-br/web/css/var()/index.html deleted file mode 100644 index 1d7ba91663..0000000000 --- a/files/pt-br/web/css/var()/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: var() -slug: Web/CSS/var() -translation_of: Web/CSS/var() ---- -
    {{CSSRef}}
    - -

    A função CSS  var() pode ser usada para inserir o valor de uma custom property (propriedade personalizada) substituindo qualquer parte do valor de outra propriedade.

    - -
    var(--header-color, blue);
    - -

    A função var() não pode ser usada em nomes de propriedades, seletores ou qualquer outra coisa além de valores de propriedades. (Isso geralmente produz sintaxe inválida, ou então um valor cujo significado não tem conexão com a variável.)

    - -

    Sintaxe

    - -

    O primeiro argumento da função é o nome da propriedade personalizada a ser substituída. O segundo argumento opcional da função serve como valor alternativo. Se a propriedade personalizada referenciada pelo primeiro argumento for inválida, a função usará o segundo valor.

    - -{{csssyntax}} - -
    -

    Nota: A sintaxe do argumento alternativo, assim como as propriedades personalizadas, permite o uso de vírgulas. Por exemplo, var(--foo, red, blue) define como argumento alternativo red, blue; isto é, qualquer coisa entre a primeira vírgula e o fim da função é considerado como valor do como argumento alternativo.

    -
    - -

    Valores

    - -
    -
    <custom-property-name>
    -
    O nome da propriedade personalizada referenciada é representada por um identificador que começa com dois traços. As propriedades personalizadas são exclusivamente para uso por autores e usuários; O CSS nunca lhes dará um significado além do que é apresentado aqui.
    -
    <declaration-value>
    -
    O valor do argumento alternativo é usado caso a propriedade personalizada seja inválida no contexto utilizado. Este valor pode conter qualquer caractere, exceto alguns caracteres com significado especial como novas linhas, colchetes de fechamento perdidos, ex.), ], ou }, ponto e vírgula de primeiro nível, ou sinais de exclamação.
    -
    - -

    Exemplos

    - -
    :root {
-  --main-bg-color: pink;
-}
-
-body {
-  background-color: var(--main-bg-color);
-}
-
    - -
    /* Argumento alternativo */
-/* No estilo de componente: */
-.component .header {
-  color: var(--header-color, blue);
-}
-
-.component .text {
-  color: var(--text-color, black);
-}
-
-/* No estilo de grandes aplicações: */
-.component {
-  --text-color: #080; /* header-color não está definido e, desse modo, permanece azul, o valor do argumento alternativo */
-}
-
    - -

    Especificações

    - - - - - - - - - - - - - - - - -
    EspecificaçãoStatusComentário
    {{SpecName('CSS3 Variables', '#using-variables', 'var()')}}{{Spec2('CSS3 Variables')}}Definição inicial
    - -

    Compatibilidade com navegadores

    - -

    {{CompatibilityTable}}

    - -
    - - - - - - - - - - - - - - - - - - - - - -
    RecursoChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
    Suporte básico48[1]
    - 49    		15063[2]{{CompatGeckoDesktop("29")}}[3]
    - {{CompatGeckoDesktop("31")}}    		{{CompatNo}}369.3[4]
    -
    - -
    - - - - - - - - - - - - - - - - - - - -
    RecursoAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
    Suporte básico50{{CompatGeckoDesktop("29")}}{{CompatNo}}379.3[3]
    -
    - -

    [1] No Chrome 48 este recurso é habilitado na configuração "Experimental Web Platform features" em chrome://flags.

    - -

    [2] Veja Edge Platform Status e 15063 Build Release Notes (2017-03-20).

    - -

    [3] Esse recurso é implementado com base na preferência layout.css.variables.enabled, cujo padrão é false e usando a antiga sintaxe var-variablename no Gecko 29. A partir do Gecko 31 esta preferência é habiliitada por padrão e a nova --variablename sintaxe é utilizada. A partir do Gecko 55, a preferência layout.css.variables.enabled foi removida completamente, assim o recurso está habilitado permanentemente e não pode ser desabilitado.

    - -

    [4] Veja {{webkitbug(19660)}}.

    - -

    Veja também

    - - diff --git a/files/pt-br/web/css/var/index.html b/files/pt-br/web/css/var/index.html new file mode 100644 index 0000000000..5334f20671 --- /dev/null +++ b/files/pt-br/web/css/var/index.html @@ -0,0 +1,146 @@ +--- +title: var() +slug: Web/CSS/var +translation_of: Web/CSS/var() +original_slug: Web/CSS/var() +--- +
    {{CSSRef}}
    + +

    A função CSS  var() pode ser usada para inserir o valor de uma custom property (propriedade personalizada) substituindo qualquer parte do valor de outra propriedade.

    + +
    var(--header-color, blue);
    + +

    A função var() não pode ser usada em nomes de propriedades, seletores ou qualquer outra coisa além de valores de propriedades. (Isso geralmente produz sintaxe inválida, ou então um valor cujo significado não tem conexão com a variável.)

    + +

    Sintaxe

    + +

    O primeiro argumento da função é o nome da propriedade personalizada a ser substituída. O segundo argumento opcional da função serve como valor alternativo. Se a propriedade personalizada referenciada pelo primeiro argumento for inválida, a função usará o segundo valor.

    + +{{csssyntax}} + +
    +

    Nota: A sintaxe do argumento alternativo, assim como as propriedades personalizadas, permite o uso de vírgulas. Por exemplo, var(--foo, red, blue) define como argumento alternativo red, blue; isto é, qualquer coisa entre a primeira vírgula e o fim da função é considerado como valor do como argumento alternativo.

    +
    + +

    Valores

    + +
    +
    <custom-property-name>
    +
    O nome da propriedade personalizada referenciada é representada por um identificador que começa com dois traços. As propriedades personalizadas são exclusivamente para uso por autores e usuários; O CSS nunca lhes dará um significado além do que é apresentado aqui.
    +
    <declaration-value>
    +
    O valor do argumento alternativo é usado caso a propriedade personalizada seja inválida no contexto utilizado. Este valor pode conter qualquer caractere, exceto alguns caracteres com significado especial como novas linhas, colchetes de fechamento perdidos, ex.), ], ou }, ponto e vírgula de primeiro nível, ou sinais de exclamação.
    +
    + +

    Exemplos

    + +
    :root {
+  --main-bg-color: pink;
+}
+
+body {
+  background-color: var(--main-bg-color);
+}
+
    + +
    /* Argumento alternativo */
+/* No estilo de componente: */
+.component .header {
+  color: var(--header-color, blue);
+}
+
+.component .text {
+  color: var(--text-color, black);
+}
+
+/* No estilo de grandes aplicações: */
+.component {
+  --text-color: #080; /* header-color não está definido e, desse modo, permanece azul, o valor do argumento alternativo */
+}
+
    + +

    Especificações

    + + + + + + + + + + + + + + + + +
    EspecificaçãoStatusComentário
    {{SpecName('CSS3 Variables', '#using-variables', 'var()')}}{{Spec2('CSS3 Variables')}}Definição inicial
    + +

    Compatibilidade com navegadores

    + +

    {{CompatibilityTable}}

    + +
    + + + + + + + + + + + + + + + + + + + + + +
    RecursoChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
    Suporte básico48[1]
    + 49    		15063[2]{{CompatGeckoDesktop("29")}}[3]
    + {{CompatGeckoDesktop("31")}}    		{{CompatNo}}369.3[4]
    +
    + +
    + + + + + + + + + + + + + + + + + + + +
    RecursoAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
    Suporte básico50{{CompatGeckoDesktop("29")}}{{CompatNo}}379.3[3]
    +
    + +

    [1] No Chrome 48 este recurso é habilitado na configuração "Experimental Web Platform features" em chrome://flags.

    + +

    [2] Veja Edge Platform Status e 15063 Build Release Notes (2017-03-20).

    + +

    [3] Esse recurso é implementado com base na preferência layout.css.variables.enabled, cujo padrão é false e usando a antiga sintaxe var-variablename no Gecko 29. A partir do Gecko 31 esta preferência é habiliitada por padrão e a nova --variablename sintaxe é utilizada. A partir do Gecko 55, a preferência layout.css.variables.enabled foi removida completamente, assim o recurso está habilitado permanentemente e não pode ser desabilitado.

    + +

    [4] Veja {{webkitbug(19660)}}.

    + +

    Veja também

    + + diff --git a/files/ru/_redirects.txt b/files/ru/_redirects.txt index dbf6990fb3..1a6ce3d310 100644 --- a/files/ru/_redirects.txt +++ b/files/ru/_redirects.txt @@ -415,6 +415,7 @@ /ru/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video /ru/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video /ru/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/buffering_seeking_time_ranges /ru/docs/Web/Guide/Audio_and_video_delivery/buffering_seeking_time_ranges /ru/docs/Web/CSS/:blank /ru/docs/Web/CSS/:-moz-only-whitespace +/ru/docs/Web/CSS/:host() /ru/docs/Web/CSS/:host_function /ru/docs/Web/CSS/Adjacent_sibling_selectors /ru/docs/Web/CSS/Adjacent_sibling_combinator /ru/docs/Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy /ru/docs/Web/CSS/CSS_Animations/Using_CSS_animations /ru/docs/Web/CSS/CSS_Background_and_Borders /ru/docs/Web/CSS/CSS_Backgrounds_and_Borders @@ -445,16 +446,18 @@ /ru/docs/Web/CSS/Media_Queries/Тестирование_медиа_запросы /ru/docs/Web/CSS/Media_Queries/Testing_media_queries /ru/docs/Web/CSS/Reference/background-blend-mode /ru/docs/Web/CSS/background-blend-mode /ru/docs/Web/CSS/Using_CSS_variables /ru/docs/Web/CSS/Using_CSS_custom_properties -/ru/docs/Web/CSS/attr /ru/docs/Web/CSS/attr() +/ru/docs/Web/CSS/attr() /ru/docs/Web/CSS/attr /ru/docs/Web/CSS/box_model /ru/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model -/ru/docs/Web/CSS/calc /ru/docs/Web/CSS/calc() -/ru/docs/Web/CSS/clamp /ru/docs/Web/CSS/clamp() -/ru/docs/Web/CSS/filter-function/blur /ru/docs/Web/CSS/filter-function/blur() -/ru/docs/Web/CSS/minmax /ru/docs/Web/CSS/minmax() -/ru/docs/Web/CSS/transform-function/rotate /ru/docs/Web/CSS/transform-function/rotate() -/ru/docs/Web/CSS/transform-function/rotate3d /ru/docs/Web/CSS/transform-function/rotate3d() -/ru/docs/Web/CSS/transform-function/scale3d /ru/docs/Web/CSS/transform-function/scale3d() -/ru/docs/Web/CSS/transform-function/skew /ru/docs/Web/CSS/transform-function/skew() +/ru/docs/Web/CSS/calc() /ru/docs/Web/CSS/calc +/ru/docs/Web/CSS/clamp() /ru/docs/Web/CSS/clamp +/ru/docs/Web/CSS/filter-function/blur() /ru/docs/Web/CSS/filter-function/blur +/ru/docs/Web/CSS/minmax() /ru/docs/Web/CSS/minmax +/ru/docs/Web/CSS/transform-function/rotate() /ru/docs/Web/CSS/transform-function/rotate +/ru/docs/Web/CSS/transform-function/rotate3d() /ru/docs/Web/CSS/transform-function/rotate3d +/ru/docs/Web/CSS/transform-function/scale3d() /ru/docs/Web/CSS/transform-function/scale3d +/ru/docs/Web/CSS/transform-function/skew() /ru/docs/Web/CSS/transform-function/skew +/ru/docs/Web/CSS/url() /ru/docs/Web/CSS/url +/ru/docs/Web/CSS/var() /ru/docs/Web/CSS/var /ru/docs/Web/CSS/Действительное_значение /ru/docs/Web/CSS/actual_value /ru/docs/Web/CSS/Замещаемый_элемент /ru/docs/Web/CSS/Replaced_element /ru/docs/Web/CSS/Псевдо-классы /ru/docs/Web/CSS/Pseudo-classes diff --git a/files/ru/_wikihistory.json b/files/ru/_wikihistory.json index 74e40ecc51..13b60a071c 100644 --- a/files/ru/_wikihistory.json +++ b/files/ru/_wikihistory.json @@ -12258,7 +12258,7 @@ "corocoto" ] }, - "Web/CSS/:host()": { + "Web/CSS/:host_function": { "modified": "2020-10-15T22:34:25.488Z", "contributors": [ "DianaLoiko" @@ -13449,7 +13449,7 @@ "opereverzeva" ] }, - "Web/CSS/attr()": { + "Web/CSS/attr": { "modified": "2020-11-04T08:52:00.007Z", "contributors": [ "chrisdavidmills", @@ -13706,7 +13706,7 @@ "Sergey.Vdovareize" ] }, - "Web/CSS/calc()": { + "Web/CSS/calc": { "modified": "2020-11-04T09:08:45.108Z", "contributors": [ "chrisdavidmills", @@ -13726,7 +13726,7 @@ "ukarim" ] }, - "Web/CSS/clamp()": { + "Web/CSS/clamp": { "modified": "2020-11-05T09:58:41.585Z", "contributors": [ "chrisdavidmills", @@ -13864,7 +13864,7 @@ "opereverzeva" ] }, - "Web/CSS/filter-function/blur()": { + "Web/CSS/filter-function/blur": { "modified": "2020-11-05T09:45:49.226Z", "contributors": [ "chrisdavidmills", @@ -14300,7 +14300,7 @@ "Kikubaaqudgha" ] }, - "Web/CSS/minmax()": { + "Web/CSS/minmax": { "modified": "2020-11-16T09:06:31.536Z", "contributors": [ "chrisdavidmills", @@ -14614,7 +14614,7 @@ "mfluehr" ] }, - "Web/CSS/transform-function/rotate()": { + "Web/CSS/transform-function/rotate": { "modified": "2020-11-19T16:06:20.905Z", "contributors": [ "chrisdavidmills", @@ -14622,21 +14622,21 @@ "bad4iz" ] }, - "Web/CSS/transform-function/rotate3d()": { + "Web/CSS/transform-function/rotate3d": { "modified": "2020-11-19T16:07:43.767Z", "contributors": [ "chrisdavidmills", "gorbatova" ] }, - "Web/CSS/transform-function/scale3d()": { + "Web/CSS/transform-function/scale3d": { "modified": "2020-11-30T10:19:29.644Z", "contributors": [ "chrisdavidmills", "bad4iz" ] }, - "Web/CSS/transform-function/skew()": { + "Web/CSS/transform-function/skew": { "modified": "2020-11-30T10:26:05.313Z", "contributors": [ "chrisdavidmills", @@ -14667,7 +14667,7 @@ "delfin211" ] }, - "Web/CSS/url()": { + "Web/CSS/url": { "modified": "2020-10-15T22:33:29.454Z", "contributors": [ "toylievallanur1" diff --git a/files/ru/web/css/_colon_host()/index.html b/files/ru/web/css/_colon_host()/index.html deleted file mode 100644 index 11f23a222e..0000000000 --- a/files/ru/web/css/_colon_host()/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: ':host()' -slug: 'Web/CSS/:host()' -translation_of: 'Web/CSS/:host()' ---- -
    {{CSSRef}}
    - - - -

    CSS функция-псевдокласс  :host() выбирает shadow хоста (носителя) shadow DOM-a, который содержит CSS, используемый внутри (так что вы можете выбрать пользовательский элемент изнутри его shadow DOM) — но только если селектор, переданный как параметр функции, соответствует shadow хосту.

    - -

    Самый очевидный способ использовать его — поставить некоторый класс только на определённые экземпляры пользовательских элементов, а затем передать соответствующий классовый селектор как аргумент функции. Вы не можете использовать псевдокласс c селектором наследника, чтобы выбрать только экземпляры пользовательского элемента, которые находятся внутри определённого предка. Это работа {{CSSxRef(":host-context()")}}.

    - -
    -

    Примечание: Псевдокласс не имеет эффекта вне shadow DOM.

    -
    - -
    /* Выбирает хоста shadow root, только
-  если он соответствует аргументу селектора */
-:host(.special-custom-element) {
-  font-weight: bold;
-}
-
    - -

    Синтаксис

    - -{{CSSSyntax}} - -

    Примеры

    - -

    Селективная стилизация shadow хостов

    - -

    Следующие ниже фрагменты взяты из нашего примера host-selectors (также смотрите вживую).

    - -

    В этом примере у нас есть простой пользовательский элемент — <context-span> — который мы оборачиваем вокруг текста:

    - -
    <h1>Host selectors <a href="#"><context-span>example</context-span></a></h1>
    - -

    Внутри конструктора элемента мы создаём элементы style и span, заполняем span контентом пользовательского элемента и заполняем элемент style CSS-правилами:

    - -
    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; }';
    - -

    Правило :host(.footer) { color : red; } стилизует все экземпляры элемента <context-span> (shadow хост в данном случае) в документе, которые имеют класс footer — мы использовали его, чтобы дать экземплярам элемента внутри {{htmlelement("footer")}} особый цвет.

    - -

    Спецификации

    - -{{Specifications}} - -

    Поддержка браузерами

    - -

    {{Compat}}

    - -

    Смотрите также

    - - diff --git a/files/ru/web/css/_colon_host_function/index.html b/files/ru/web/css/_colon_host_function/index.html new file mode 100644 index 0000000000..b23c69d180 --- /dev/null +++ b/files/ru/web/css/_colon_host_function/index.html @@ -0,0 +1,73 @@ +--- +title: ':host()' +slug: Web/CSS/:host_function +translation_of: Web/CSS/:host() +original_slug: Web/CSS/:host() +--- +
    {{CSSRef}}
    + + + +

    CSS функция-псевдокласс  :host() выбирает shadow хоста (носителя) shadow DOM-a, который содержит CSS, используемый внутри (так что вы можете выбрать пользовательский элемент изнутри его shadow DOM) — но только если селектор, переданный как параметр функции, соответствует shadow хосту.

    + +

    Самый очевидный способ использовать его — поставить некоторый класс только на определённые экземпляры пользовательских элементов, а затем передать соответствующий классовый селектор как аргумент функции. Вы не можете использовать псевдокласс c селектором наследника, чтобы выбрать только экземпляры пользовательского элемента, которые находятся внутри определённого предка. Это работа {{CSSxRef(":host-context()")}}.

    + +
    +

    Примечание: Псевдокласс не имеет эффекта вне shadow DOM.

    +
    + +
    /* Выбирает хоста shadow root, только
+  если он соответствует аргументу селектора */
+:host(.special-custom-element) {
+  font-weight: bold;
+}
+
    + +

    Синтаксис

    + +{{CSSSyntax}} + +

    Примеры

    + +

    Селективная стилизация shadow хостов

    + +

    Следующие ниже фрагменты взяты из нашего примера host-selectors (также смотрите вживую).

    + +

    В этом примере у нас есть простой пользовательский элемент — <context-span> — который мы оборачиваем вокруг текста:

    + +
    <h1>Host selectors <a href="#"><context-span>example</context-span></a></h1>
    + +

    Внутри конструктора элемента мы создаём элементы style и span, заполняем span контентом пользовательского элемента и заполняем элемент style CSS-правилами:

    + +
    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; }';
    + +

    Правило :host(.footer) { color : red; } стилизует все экземпляры элемента <context-span> (shadow хост в данном случае) в документе, которые имеют класс footer — мы использовали его, чтобы дать экземплярам элемента внутри {{htmlelement("footer")}} особый цвет.

    + +

    Спецификации

    + +{{Specifications}} + +

    Поддержка браузерами

    + +

    {{Compat}}

    + +

    Смотрите также

    + + diff --git a/files/ru/web/css/attr()/index.html b/files/ru/web/css/attr()/index.html deleted file mode 100644 index 6b4f90bec1..0000000000 --- a/files/ru/web/css/attr()/index.html +++ /dev/null @@ -1,182 +0,0 @@ ---- -title: attr -slug: Web/CSS/attr() -translation_of: Web/CSS/attr() ---- -
    {{CSSRef}}
    - -

    Описание

    - -

    С помощью функции CSS attr() можно извлекать значение атрибута выбранного элемента и использовать это значение в таблице стилей. Функция работает и с псевдо-элементами. В этом случае возвращается значение атрибута элемента, для которого формируется псевдо-элемент.

    - -

    Функцию attr() можно использовать с любым свойством CSS, но поддержка иных свойств, кроме {{cssxref("content")}}, является экспериментальной.

    - -

    Синтаксис

    - -
    /* Пример простого использования */
-attr(data-count);
-attr(title);
-
-/* С типом */
-attr(src url);
-attr(data-count number);
-attr(data-width px);
-
-/* с фоллбэком */
-attr(data-count number, 0);
-attr(src url, '');
-attr(data-width px, inherit);
-attr(data-something, 'default');
-
    - -

    Значения

    - -
    -
    attribute-name
    -
    Название атрибута элемента HTML, на который ссылаемся в CSS.
    -
    <type-or-unit> {{Experimental_Inline}}
    -
    -
    Является ключевым словом, представляющим либо тип значения атрибута, либо его единицу, так как в HTML некоторые атрибуты имеют неявные единицы. Если использование <type-or-unit> в качестве значения для данного атрибута недопустимо, выражение attr() также будет недопустимым. Если этот параметр опущен, по умолчанию используется string . Список допустимых значений:
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Ключевое словоТипКомментарийЗначение по умолчанию
    string{{cssxref("<string>")}}The attribute value is treated as a CSS {{cssxref("<string>")}}.  It is NOT reparsed, and in particular the characters are used as-is instead of CSS escapes being turned into different characters.An empty string
    color {{experimental_inline}}{{cssxref("<color>")}}The attribute value is parsed as a hash (3- or 6-value hash) or a keyword. It must be a valid CSS {{cssxref("<string>")}} value.
    - Leading and trailing spaces are stripped.    		currentColor
    url {{experimental_inline}}{{cssxref("<url>")}}The attribute value is parsed as a string that is used inside a CSS url()function.
    - Relative URL are resolved relatively to the original document, not relatively to the style sheet.
    - Leading and trailing spaces are stripped.    		The url about:invalid that points to a non-existent document with a generic error condition.
    integer {{experimental_inline}}{{cssxref("<integer>")}}The attribute value is parsed as a CSS {{cssxref("<integer>")}}. If it is not valid, that is not an integer or out of the range accepted by the CSS property, the default value is used.
    - Leading and trailing spaces are stripped.    		0, or, if 0 is not a valid value for the property, the property's minimum value.
    number {{experimental_inline}}{{cssxref("<number>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
    - Leading and trailing spaces are stripped.    		0, or, if 0 is not a valid value for the property, the property's minimum value.
    length {{experimental_inline}}{{cssxref("<length>")}}The attribute value is parsed as a CSS {{cssxref("<length>")}} dimension, that is including the unit (e.g. 12.5em). If it is not valid, that is not a length or out of the range accepted by the CSS property, the default value is used.
    - If the given unit is a relative length, attr()computes it to an absolute length.
    - Leading and trailing spaces are stripped.    		0, or, if 0 is not a valid value for the property, the property's minimum value.
    em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, or pc {{experimental_inline}}{{cssxref("<length>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as a {{cssxref("<length>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
    - If the given unit is a relative length, attr()computes it to an absolute length.
    - Leading and trailing spaces are stripped.    		0, or, if 0 is not a valid value for the property, the property's minimum value.
    angle {{experimental_inline}}{{cssxref("<angle>")}}The attribute value is parsed as a CSS {{cssxref("<angle>")}} dimension, that is including the unit (e.g. 30.5deg). If it is not valid, that is not an angle or out of the range accepted by the CSS property, the default value is used.
    - Leading and trailing spaces are stripped.    		0deg, or, if 0deg is not a valid value for the property, the property's minimum value.
    deg, grad, rad {{experimental_inline}}{{cssxref("<angle>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as an {{cssxref("<angle>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
    - Leading and trailing spaces are stripped.    		0deg, or, if 0deg is not a valid value for the property, the property's minimum value.
    time {{experimental_inline}}{{cssxref("<time>")}}The attribute value is parsed as a CSS {{cssxref("<time>")}} dimension, that is including the unit (e.g. 30.5ms). If it is not valid, that is not a time or out of the range accepted by the CSS property, the default value is used.
    - Leading and trailing spaces are stripped.    		0s, or, if 0s is not a valid value for the property, the property's minimum value.
    s, ms {{experimental_inline}}{{cssxref("<time>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as an{{cssxref("<time>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
    - Leading and trailing spaces are stripped.    		0s, or, if 0s is not a valid value for the property, the property's minimum value.
    frequency {{experimental_inline}}{{cssxref("<frequency>")}}The attribute value is parsed as a CSS {{cssxref("<frequency>")}} dimension, that is including the unit (e.g. 30.5kHz). If it is not valid, that is not a frequency or out of the range accepted by the CSS property, the default value is used.0Hz, or, if 0Hz is not a valid value for the property, the property's minimum value.
    Hz, kHz {{experimental_inline}}{{cssxref("<frequency>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as a {{cssxref("<frequency>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
    - Leading and trailing spaces are stripped.    		0Hz, or, if 0Hz is not a valid value for the property, the property's minimum value.
    % {{experimental_inline}}{{cssxref("<percentage>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as a {{cssxref("<percentage>")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
    - If the given value is used as a length, attr()computes it to an absolute length.
    - Leading and trailing spaces are stripped.    		0%, or, if 0% is not a valid value for the property, the property's minimum value.
    -
    -
    <fallback> {{experimental_inline}}
    -
    The value to be used if the associated attribute is missing or contains an invalid value. The fallback value must be valid where attr() is used, even if it is not used, and must not contain another attr() expression. If attr() is not the sole component value of a property, its <fallback> value must be of the type defined by <type-or-unit>. If not set, CSS will use the default value defined for each <type-or-unit>.
    -
    - -

    Формальный синтаксис

    - -{{csssyntax}} - -

    Пример

    - -
    p::before {
-  content: attr(data-foo) " ";
-}
-
    - -
    <p data-foo="hello">world</p>
-
    - -

    Результат

    - -

    {{EmbedLiveSample("Пример", '100%', '80')}}

    - -

    Спецификации

    - -{{Specifications}} - -

    Совместимость с браузерами

    - -

    {{Compat}}

    diff --git a/files/ru/web/css/attr/index.html b/files/ru/web/css/attr/index.html new file mode 100644 index 0000000000..485551b114 --- /dev/null +++ b/files/ru/web/css/attr/index.html @@ -0,0 +1,183 @@ +--- +title: attr +slug: Web/CSS/attr +translation_of: Web/CSS/attr() +original_slug: Web/CSS/attr() +--- +
    {{CSSRef}}
    + +

    Описание

    + +

    С помощью функции CSS attr() можно извлекать значение атрибута выбранного элемента и использовать это значение в таблице стилей. Функция работает и с псевдо-элементами. В этом случае возвращается значение атрибута элемента, для которого формируется псевдо-элемент.

    + +

    Функцию attr() можно использовать с любым свойством CSS, но поддержка иных свойств, кроме {{cssxref("content")}}, является экспериментальной.

    + +

    Синтаксис

    + +
    /* Пример простого использования */
+attr(data-count);
+attr(title);
+
+/* С типом */
+attr(src url);
+attr(data-count number);
+attr(data-width px);
+
+/* с фоллбэком */
+attr(data-count number, 0);
+attr(src url, '');
+attr(data-width px, inherit);
+attr(data-something, 'default');
+
    + +

    Значения

    + +
    +
    attribute-name
    +
    Название атрибута элемента HTML, на который ссылаемся в CSS.
    +
    <type-or-unit> {{Experimental_Inline}}
    +
    +
    Является ключевым словом, представляющим либо тип значения атрибута, либо его единицу, так как в HTML некоторые атрибуты имеют неявные единицы. Если использование <type-or-unit> в качестве значения для данного атрибута недопустимо, выражение attr() также будет недопустимым. Если этот параметр опущен, по умолчанию используется string . Список допустимых значений:
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Ключевое словоТипКомментарийЗначение по умолчанию
    string{{cssxref("<string>")}}The attribute value is treated as a CSS {{cssxref("<string>")}}.  It is NOT reparsed, and in particular the characters are used as-is instead of CSS escapes being turned into different characters.An empty string
    color {{experimental_inline}}{{cssxref("<color>")}}The attribute value is parsed as a hash (3- or 6-value hash) or a keyword. It must be a valid CSS {{cssxref("<string>")}} value.
    + Leading and trailing spaces are stripped.    		currentColor
    url {{experimental_inline}}{{cssxref("<url>")}}The attribute value is parsed as a string that is used inside a CSS url()function.
    + Relative URL are resolved relatively to the original document, not relatively to the style sheet.
    + Leading and trailing spaces are stripped.    		The url about:invalid that points to a non-existent document with a generic error condition.
    integer {{experimental_inline}}{{cssxref("<integer>")}}The attribute value is parsed as a CSS {{cssxref("<integer>")}}. If it is not valid, that is not an integer or out of the range accepted by the CSS property, the default value is used.
    + Leading and trailing spaces are stripped.    		0, or, if 0 is not a valid value for the property, the property's minimum value.
    number {{experimental_inline}}{{cssxref("<number>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
    + Leading and trailing spaces are stripped.    		0, or, if 0 is not a valid value for the property, the property's minimum value.
    length {{experimental_inline}}{{cssxref("<length>")}}The attribute value is parsed as a CSS {{cssxref("<length>")}} dimension, that is including the unit (e.g. 12.5em). If it is not valid, that is not a length or out of the range accepted by the CSS property, the default value is used.
    + If the given unit is a relative length, attr()computes it to an absolute length.
    + Leading and trailing spaces are stripped.    		0, or, if 0 is not a valid value for the property, the property's minimum value.
    em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, or pc {{experimental_inline}}{{cssxref("<length>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as a {{cssxref("<length>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
    + If the given unit is a relative length, attr()computes it to an absolute length.
    + Leading and trailing spaces are stripped.    		0, or, if 0 is not a valid value for the property, the property's minimum value.
    angle {{experimental_inline}}{{cssxref("<angle>")}}The attribute value is parsed as a CSS {{cssxref("<angle>")}} dimension, that is including the unit (e.g. 30.5deg). If it is not valid, that is not an angle or out of the range accepted by the CSS property, the default value is used.
    + Leading and trailing spaces are stripped.    		0deg, or, if 0deg is not a valid value for the property, the property's minimum value.
    deg, grad, rad {{experimental_inline}}{{cssxref("<angle>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as an {{cssxref("<angle>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
    + Leading and trailing spaces are stripped.    		0deg, or, if 0deg is not a valid value for the property, the property's minimum value.
    time {{experimental_inline}}{{cssxref("<time>")}}The attribute value is parsed as a CSS {{cssxref("<time>")}} dimension, that is including the unit (e.g. 30.5ms). If it is not valid, that is not a time or out of the range accepted by the CSS property, the default value is used.
    + Leading and trailing spaces are stripped.    		0s, or, if 0s is not a valid value for the property, the property's minimum value.
    s, ms {{experimental_inline}}{{cssxref("<time>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as an{{cssxref("<time>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
    + Leading and trailing spaces are stripped.    		0s, or, if 0s is not a valid value for the property, the property's minimum value.
    frequency {{experimental_inline}}{{cssxref("<frequency>")}}The attribute value is parsed as a CSS {{cssxref("<frequency>")}} dimension, that is including the unit (e.g. 30.5kHz). If it is not valid, that is not a frequency or out of the range accepted by the CSS property, the default value is used.0Hz, or, if 0Hz is not a valid value for the property, the property's minimum value.
    Hz, kHz {{experimental_inline}}{{cssxref("<frequency>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as a {{cssxref("<frequency>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
    + Leading and trailing spaces are stripped.    		0Hz, or, if 0Hz is not a valid value for the property, the property's minimum value.
    % {{experimental_inline}}{{cssxref("<percentage>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as a {{cssxref("<percentage>")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
    + If the given value is used as a length, attr()computes it to an absolute length.
    + Leading and trailing spaces are stripped.    		0%, or, if 0% is not a valid value for the property, the property's minimum value.
    +
    +
    <fallback> {{experimental_inline}}
    +
    The value to be used if the associated attribute is missing or contains an invalid value. The fallback value must be valid where attr() is used, even if it is not used, and must not contain another attr() expression. If attr() is not the sole component value of a property, its <fallback> value must be of the type defined by <type-or-unit>. If not set, CSS will use the default value defined for each <type-or-unit>.
    +
    + +

    Формальный синтаксис

    + +{{csssyntax}} + +

    Пример

    + +
    p::before {
+  content: attr(data-foo) " ";
+}
+
    + +
    <p data-foo="hello">world</p>
+
    + +

    Результат

    + +

    {{EmbedLiveSample("Пример", '100%', '80')}}

    + +

    Спецификации

    + +{{Specifications}} + +

    Совместимость с браузерами

    + +

    {{Compat}}

    diff --git a/files/ru/web/css/calc()/index.html b/files/ru/web/css/calc()/index.html deleted file mode 100644 index 66fce5a331..0000000000 --- a/files/ru/web/css/calc()/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: Функция calc() -slug: Web/CSS/calc() -tags: - - css calc -translation_of: Web/CSS/calc() ---- -
    {{CSSRef}}
    - -

    calc() - это функция CSS, которая даёт возможность рассчитать значения свойств CSS во время их определения. Она может быть использована везде, где применимы {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<number>")}}, или {{cssxref("<integer>")}}.

    - -

    {{EmbedInteractiveExample("pages/css/function-calc.html")}}

    - -

    Синтаксис

    - -

    Функция calc() принимает в качестве параметра математическое выражение, результат вычисления которого можно использовать как значение CSS-свойства. Выражение может включать операторы +, -, *, / с использованием стандартных правил приоритета операторов:

    - -
    -
    +
    -
    Сложение
    -
    -
    -
    Вычитание.
    -
    *
    -
    Умножение. По крайней мере хоть один из сомножителей должен быть {{cssxref("<number>")}}.
    -
    /
    -
    Деление. Делитель должен быть  {{cssxref("<number>")}}.
    -
    - -

    Операнды в expression могут быть различными выражениями {{cssxref("<length>")}}. Если пожелаете, то можете использовать разные единицы измерения для каждого из операндов. Вы также можете использовать скобки, чтобы указать порядок вычисления.

    - -
    Внимание: Деление на ноль выдаст ошибку при парсинге HTML.
    - -
    Note: Операторы + и - всегда должны быть по обеим сторонам отделены пробелом. Выражение calc(50% -8px) будет интерпретировано как величина в процентах и следующее за ним отрицательное число в пикселях (не верное выражение), в то время как calc(50% - 8px) - правильное выражение, будет интерпретировано как вычитание из процентов длины в пикселях.
    -Операторы * и / не требуют отделения от операндов знаком пробела, но это не запрещено и даже приветствуется.
    - -
    -
    - -

    Формальный синтаксис

    - -
    calc(expression)
    - -

    Примеры

    - -

    Позиционирование объекта в окне с помощью отступа

    - -

    calc() делает простым позиционирование объекта с помощью отступа. В этом примере создаётся баннер занимающий в ширину все окно с отступами по краям в 40px. 

    - -
    .banner {
-  position: absolute;
-  left: 5%;                 /* для браузеров не поддерживающих calc() */
-  left: calc(40px);
-  width: 90%;               /* для браузеров не поддерживающих calc() */
-  width: calc(100% - 80px);
-  border: solid black 1px;
-  box-shadow: 1px 2px;
-  background-color: yellow;
-  padding: 6px;
-  text-align: center;
-}
-
    - -
    <div class="banner">Это баннер!</div>
    - -

    {{ EmbedLiveSample('Позиционирование_объекта_в_окне_с_помощью_отступа', '100%', '60') }}

    - -

    Автоматическое изменение размера формы ввода для соответствия размеру контейнера

    - -

    В следующем случае calc() помогает обеспечить не выпадание полей формы за края блока, задав отступ.

    - -

    Давайте посмотрим некоторый код CSS:

    - -
    input {
-  padding: 2px;
-  display: block;
-  width: 98%;               /* для браузеров, не поддерживающих calc() */
-  width: calc(100% - 1em);
-}
-
-#formbox {
-  width: 130px;             /* для браузеров, не поддерживающих calc() */
-  width: calc(100% / 6);
-  border: 1px solid black;
-  padding: 4px;
-}
-
    - -

    Здесь ширина формы становится 1/6 от ширины окна. Затем, чтобы задать  размер полей, мы вновь используем функцию calc(), которая вычитает 1em из ширины блока. Теперь применим этот CSS к следующему HTML-коду:

    - -
    <form>
-  <div id="formbox">
-  <label>Type something:</label>
-  <input type="text">
-  </div>
-</form>
-
    - -

    {{ EmbedLiveSample('Автоматическое_изменение_размера_формы_ввода_для_соответствия_размеру_контейнера', '100%', '80') }}

    - -

    Вложенный calc() с CSS переменными

    - -

    Вы также можете использовать calc() с CSS переменными. Рассмотрим пример кода:

    - -
    .foo {
-  --widthA: 100px;
-  --widthB: calc(var(--widthA) / 2);
-  --widthC: calc(var(--widthB) / 2);
-  width: var(--widthC);
-}
    - - - -

    Спецификации

    - -{{Specifications}} - -

    Поддержка браузерами

    - -

    {{Compat}}

    - -

    Смотрите также

    - - diff --git a/files/ru/web/css/calc/index.html b/files/ru/web/css/calc/index.html new file mode 100644 index 0000000000..36e0040f27 --- /dev/null +++ b/files/ru/web/css/calc/index.html @@ -0,0 +1,126 @@ +--- +title: Функция calc() +slug: Web/CSS/calc +tags: + - css calc +translation_of: Web/CSS/calc() +original_slug: Web/CSS/calc() +--- +
    {{CSSRef}}
    + +

    calc() - это функция CSS, которая даёт возможность рассчитать значения свойств CSS во время их определения. Она может быть использована везде, где применимы {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<number>")}}, или {{cssxref("<integer>")}}.

    + +

    {{EmbedInteractiveExample("pages/css/function-calc.html")}}

    + +

    Синтаксис

    + +

    Функция calc() принимает в качестве параметра математическое выражение, результат вычисления которого можно использовать как значение CSS-свойства. Выражение может включать операторы +, -, *, / с использованием стандартных правил приоритета операторов:

    + +
    +
    +
    +
    Сложение
    +
    -
    +
    Вычитание.
    +
    *
    +
    Умножение. По крайней мере хоть один из сомножителей должен быть {{cssxref("<number>")}}.
    +
    /
    +
    Деление. Делитель должен быть  {{cssxref("<number>")}}.
    +
    + +

    Операнды в expression могут быть различными выражениями {{cssxref("<length>")}}. Если пожелаете, то можете использовать разные единицы измерения для каждого из операндов. Вы также можете использовать скобки, чтобы указать порядок вычисления.

    + +
    Внимание: Деление на ноль выдаст ошибку при парсинге HTML.
    + +
    Note: Операторы + и - всегда должны быть по обеим сторонам отделены пробелом. Выражение calc(50% -8px) будет интерпретировано как величина в процентах и следующее за ним отрицательное число в пикселях (не верное выражение), в то время как calc(50% - 8px) - правильное выражение, будет интерпретировано как вычитание из процентов длины в пикселях.
    +Операторы * и / не требуют отделения от операндов знаком пробела, но это не запрещено и даже приветствуется.
    + +
    +
    + +

    Формальный синтаксис

    + +
    calc(expression)
    + +

    Примеры

    + +

    Позиционирование объекта в окне с помощью отступа

    + +

    calc() делает простым позиционирование объекта с помощью отступа. В этом примере создаётся баннер занимающий в ширину все окно с отступами по краям в 40px. 

    + +
    .banner {
+  position: absolute;
+  left: 5%;                 /* для браузеров не поддерживающих calc() */
+  left: calc(40px);
+  width: 90%;               /* для браузеров не поддерживающих calc() */
+  width: calc(100% - 80px);
+  border: solid black 1px;
+  box-shadow: 1px 2px;
+  background-color: yellow;
+  padding: 6px;
+  text-align: center;
+}
+
    + +
    <div class="banner">Это баннер!</div>
    + +

    {{ EmbedLiveSample('Позиционирование_объекта_в_окне_с_помощью_отступа', '100%', '60') }}

    + +

    Автоматическое изменение размера формы ввода для соответствия размеру контейнера

    + +

    В следующем случае calc() помогает обеспечить не выпадание полей формы за края блока, задав отступ.

    + +

    Давайте посмотрим некоторый код CSS:

    + +
    input {
+  padding: 2px;
+  display: block;
+  width: 98%;               /* для браузеров, не поддерживающих calc() */
+  width: calc(100% - 1em);
+}
+
+#formbox {
+  width: 130px;             /* для браузеров, не поддерживающих calc() */
+  width: calc(100% / 6);
+  border: 1px solid black;
+  padding: 4px;
+}
+
    + +

    Здесь ширина формы становится 1/6 от ширины окна. Затем, чтобы задать  размер полей, мы вновь используем функцию calc(), которая вычитает 1em из ширины блока. Теперь применим этот CSS к следующему HTML-коду:

    + +
    <form>
+  <div id="formbox">
+  <label>Type something:</label>
+  <input type="text">
+  </div>
+</form>
+
    + +

    {{ EmbedLiveSample('Автоматическое_изменение_размера_формы_ввода_для_соответствия_размеру_контейнера', '100%', '80') }}

    + +

    Вложенный calc() с CSS переменными

    + +

    Вы также можете использовать calc() с CSS переменными. Рассмотрим пример кода:

    + +
    .foo {
+  --widthA: 100px;
+  --widthB: calc(var(--widthA) / 2);
+  --widthC: calc(var(--widthB) / 2);
+  width: var(--widthC);
+}
    + + + +

    Спецификации

    + +{{Specifications}} + +

    Поддержка браузерами

    + +

    {{Compat}}

    + +

    Смотрите также

    + + diff --git a/files/ru/web/css/clamp()/index.html b/files/ru/web/css/clamp()/index.html deleted file mode 100644 index ffbaec8175..0000000000 --- a/files/ru/web/css/clamp()/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: clamp() -slug: Web/CSS/clamp() -translation_of: Web/CSS/clamp() ---- -
    {{CSSRef}}
    - -

    CSS-функция clamp() задаёт значение в диапазоне между указанными нижней и верхней границами. Функция принимает три аргумента: минимальное значение, предпочитаемое значение и максимально допустимое. Может использоваться везде, где допускается применение {{CSSxRef("<length>")}}, {{CSSxRef("<frequency>")}}, {{CSSxRef("<angle>")}}, {{CSSxRef("<time>")}}, {{CSSxRef("<percentage>")}}, {{CSSxRef("<number>")}}, или {{CSSxRef("<integer>")}}.

    - -

    clamp(MIN, VAL, MAX) вычисляется как {{CSSxRef("max", "max")}}(MIN, {{CSSxRef("min", "min")}}(VAL, MAX))

    - -
    /* свойство: clamp(expression{3}) */
-width: clamp(10px, 4em, 80px);
    - -

    В примере выше ширина будет не меньше 10px и не больше 80px. Но если размер одного "em" будет находиться в диапазоне от 2.5px до 20px (в сумме от 10px до 80px), то ширина будет равняться этим 4em.

    - -

    Давайте предположим, что в примере выше 1em равен 16px:

    - -
    width: clamp(10px, 4em, 80px);
-/* если 1em = 16px, 4em = (16px * 4) = 64px */
-width: clamp(10px, 64px, 80px);
-/* clamp(MIN, VAL, MAX) вычисляется как max(MIN, min(VAL, MAX))) */
-width: max(10px, min(64px, 80px))
-width: max(10px, 64px);
-width: 64px;
    - -

    Синтаксис

    - -

    Функция clamp() принимает в качестве аргументов три разделённых запятой выражения, указываемых в порядке: минимальное значение, предпочитаемое значение, максимальное значение.

    - -

    Минимальное значение – наименьшее значение, являющееся нижней границей диапазона допустимых значений. Если "предпочитаемое" значение меньше "минимального", будет использоваться именно "минимальное".

    - -

    Предпочитаемое значение – это выражение, чей результат будет использовать до тех пор, пока будет оставаться в пределах допустимого диапазона значений.

    - -

    Максимальное значение – наибольшее значение, которое будет устанавливаться, если предпочитаемое будет превышать верхнюю границу допустимого диапазона.

    - -

    Передаваемые значения могут быть математическими функциями (более подробно смотрите на {{CSSxRef("calc")}}), точными значениями, или другими выражениями, такими как {{CSSxRef("attr", "attr()")}}, результатом которых является допустимый тип аргумента (как например {{CSSxRef("<length>")}}), или вложенные {{CSSxRef("min")}} и {{CSSxRef("max")}} функции. Для математических выражений можно использовать сложение, вычитание, умножение и деление без использования функции calc(). Также, можно использовать круглые скобки, чтобы задать порядок вычисление.

    - -

    Можно использовать разные единицы измерения для каждого значения в выражении и разные единицы измерения в любой математической функции, .являющейся частью любого из аргументов.

    - -

    Примечания

    - -
      -
    • Математические выражения, включающие в себя проценты для ширины и высоты колонок таблицы, групп колонок таблицы, строк таблицы, групп строк таблицы и ячеек таблицы и при значении "auto" и при значении "fixed" свойства "table-layout" могут обрабатываться как если бы было задано значение auto.
      • -
    • Допускается вкладывать функции max() и min() в качестве значений выражений, в этом случае внутренние обрабатываются как простые скобки. Выражения являются полностью математическими выражениями, поэтому вы можете использовать сложения, вычитание, умножение и деление без использования самой функции calc().
      • -
    • Выражение может быть значениями, объединяющими операторы сложения (+), вычитания (-), умножения (*) и деления (/) с использованием стандартных правил приоритета операторов. Не забудьте поставить пробелы с каждой стороны от операндов + и -. Операнды в выражении могут иметь любое значение синтаксиса {{CSSxRef ("<length>")}}. Вы можете использовать разные единицы для каждого значения в своём выражении. Вы также можете использовать круглые скобки, чтобы установить порядок вычислений, когда это необходимо.
      • -
    • Часто вам может понадобиться использовать {{CSSxRef ("min")}} и {{CSSxRef ("max")}} в функции clamp ().
      • -
    - -

    Formal syntax

    - -{{CSSSyntax}} - -

    Примеры

    - -

    Установка минимального и максимального размера шрифта

    - -

    clamp() позволяет вам установить размер шрифта, который изменяется в зависимости от ширины области видимости, но не уменьшается ниже и не увеличивается выше заданного размера. Она имеет тот же эффект, что и в Fluid Typography, но в одну строку и без использования медиавыражений.

    - -
    p { font-size: clamp(1rem, 2.5vw, 1.5rem); }
-
    - -
    <p>
-If 2.5vw is less than 1rem, the font-size will be 1rem.
-If 2.5vw is greater than 1.5rem, the font-size will be 1.5rem.
-Otherwise, it will be 2.5vw.
-</p>
-
    - -

    {{EmbedLiveSample("Установка_минимального_и_максимального_размера_шрифта", "100%", "300")}}

    - -

    Accessibility concerns

    - -

    TBD

    - -

    Specifications

    - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName("CSS4 Values", "#calc-notation", "clamp()")}}{{Spec2('CSS4 Values')}}Initial definition.
    - -

    Browser compatibility

    - - - -

    {{Compat}}

    - -

    See also

    - -
      -
    • {{CSSxRef("calc")}}
      • -
    • {{CSSxRef("max")}}
      • -
    • {{CSSxRef("min")}}
      • -
    • CSS Values
      • -
    diff --git a/files/ru/web/css/clamp/index.html b/files/ru/web/css/clamp/index.html new file mode 100644 index 0000000000..93a1805c60 --- /dev/null +++ b/files/ru/web/css/clamp/index.html @@ -0,0 +1,109 @@ +--- +title: clamp() +slug: Web/CSS/clamp +translation_of: Web/CSS/clamp() +original_slug: Web/CSS/clamp() +--- +
    {{CSSRef}}
    + +

    CSS-функция clamp() задаёт значение в диапазоне между указанными нижней и верхней границами. Функция принимает три аргумента: минимальное значение, предпочитаемое значение и максимально допустимое. Может использоваться везде, где допускается применение {{CSSxRef("<length>")}}, {{CSSxRef("<frequency>")}}, {{CSSxRef("<angle>")}}, {{CSSxRef("<time>")}}, {{CSSxRef("<percentage>")}}, {{CSSxRef("<number>")}}, или {{CSSxRef("<integer>")}}.

    + +

    clamp(MIN, VAL, MAX) вычисляется как {{CSSxRef("max", "max")}}(MIN, {{CSSxRef("min", "min")}}(VAL, MAX))

    + +
    /* свойство: clamp(expression{3}) */
+width: clamp(10px, 4em, 80px);
    + +

    В примере выше ширина будет не меньше 10px и не больше 80px. Но если размер одного "em" будет находиться в диапазоне от 2.5px до 20px (в сумме от 10px до 80px), то ширина будет равняться этим 4em.

    + +

    Давайте предположим, что в примере выше 1em равен 16px:

    + +
    width: clamp(10px, 4em, 80px);
+/* если 1em = 16px, 4em = (16px * 4) = 64px */
+width: clamp(10px, 64px, 80px);
+/* clamp(MIN, VAL, MAX) вычисляется как max(MIN, min(VAL, MAX))) */
+width: max(10px, min(64px, 80px))
+width: max(10px, 64px);
+width: 64px;
    + +

    Синтаксис

    + +

    Функция clamp() принимает в качестве аргументов три разделённых запятой выражения, указываемых в порядке: минимальное значение, предпочитаемое значение, максимальное значение.

    + +

    Минимальное значение – наименьшее значение, являющееся нижней границей диапазона допустимых значений. Если "предпочитаемое" значение меньше "минимального", будет использоваться именно "минимальное".

    + +

    Предпочитаемое значение – это выражение, чей результат будет использовать до тех пор, пока будет оставаться в пределах допустимого диапазона значений.

    + +

    Максимальное значение – наибольшее значение, которое будет устанавливаться, если предпочитаемое будет превышать верхнюю границу допустимого диапазона.

    + +

    Передаваемые значения могут быть математическими функциями (более подробно смотрите на {{CSSxRef("calc")}}), точными значениями, или другими выражениями, такими как {{CSSxRef("attr", "attr()")}}, результатом которых является допустимый тип аргумента (как например {{CSSxRef("<length>")}}), или вложенные {{CSSxRef("min")}} и {{CSSxRef("max")}} функции. Для математических выражений можно использовать сложение, вычитание, умножение и деление без использования функции calc(). Также, можно использовать круглые скобки, чтобы задать порядок вычисление.

    + +

    Можно использовать разные единицы измерения для каждого значения в выражении и разные единицы измерения в любой математической функции, .являющейся частью любого из аргументов.

    + +

    Примечания

    + +
      +
    • Математические выражения, включающие в себя проценты для ширины и высоты колонок таблицы, групп колонок таблицы, строк таблицы, групп строк таблицы и ячеек таблицы и при значении "auto" и при значении "fixed" свойства "table-layout" могут обрабатываться как если бы было задано значение auto.
      • +
    • Допускается вкладывать функции max() и min() в качестве значений выражений, в этом случае внутренние обрабатываются как простые скобки. Выражения являются полностью математическими выражениями, поэтому вы можете использовать сложения, вычитание, умножение и деление без использования самой функции calc().
      • +
    • Выражение может быть значениями, объединяющими операторы сложения (+), вычитания (-), умножения (*) и деления (/) с использованием стандартных правил приоритета операторов. Не забудьте поставить пробелы с каждой стороны от операндов + и -. Операнды в выражении могут иметь любое значение синтаксиса {{CSSxRef ("<length>")}}. Вы можете использовать разные единицы для каждого значения в своём выражении. Вы также можете использовать круглые скобки, чтобы установить порядок вычислений, когда это необходимо.
      • +
    • Часто вам может понадобиться использовать {{CSSxRef ("min")}} и {{CSSxRef ("max")}} в функции clamp ().
      • +
    + +

    Formal syntax

    + +{{CSSSyntax}} + +

    Примеры

    + +

    Установка минимального и максимального размера шрифта

    + +

    clamp() позволяет вам установить размер шрифта, который изменяется в зависимости от ширины области видимости, но не уменьшается ниже и не увеличивается выше заданного размера. Она имеет тот же эффект, что и в Fluid Typography, но в одну строку и без использования медиавыражений.

    + +
    p { font-size: clamp(1rem, 2.5vw, 1.5rem); }
+
    + +
    <p>
+If 2.5vw is less than 1rem, the font-size will be 1rem.
+If 2.5vw is greater than 1.5rem, the font-size will be 1.5rem.
+Otherwise, it will be 2.5vw.
+</p>
+
    + +

    {{EmbedLiveSample("Установка_минимального_и_максимального_размера_шрифта", "100%", "300")}}

    + +

    Accessibility concerns

    + +

    TBD

    + +

    Specifications

    + + + + + + + + + + + + + + + + +
    SpecificationStatusComment
    {{SpecName("CSS4 Values", "#calc-notation", "clamp()")}}{{Spec2('CSS4 Values')}}Initial definition.
    + +

    Browser compatibility

    + + + +

    {{Compat}}

    + +

    See also

    + +
      +
    • {{CSSxRef("calc")}}
      • +
    • {{CSSxRef("max")}}
      • +
    • {{CSSxRef("min")}}
      • +
    • CSS Values
      • +
    diff --git a/files/ru/web/css/filter-function/blur()/index.html b/files/ru/web/css/filter-function/blur()/index.html deleted file mode 100644 index c2df200b45..0000000000 --- a/files/ru/web/css/filter-function/blur()/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: blur() -slug: Web/CSS/filter-function/blur() -translation_of: Web/CSS/filter-function/blur() ---- -
    {{cssref}}
    - -

    Функция CSS blur() применяет размытие по Гауссу к входному изображению. Его результатом является {{cssxref("<filter-function>")}}.

    - -
    {{EmbedInteractiveExample("pages/css/function-blur.html")}}
    - - - -

    Синтаксис

    - -
    blur(radius)
    - -

    Параметры

    - -
    -
    radius
    -
    Радиус размытия, выраженный в {{cssxref("<length>")}}. Он определяет отклонение от стандартной функции Гаусса, то есть как много пикселей на экране смешиваются друг с другом. Таким образом, большее значение даст большее размытие. Значение 0 оставит изображение без изменений.
    -
    - -

    Пример

    - -
    blur(0)        /* Без эффекта */
-blur(8px)      /* Размытие с радиусом 8px */
-blur(1.17rem)  /* Размытие с радиусом 1.17rem */
    - -

    Смотрите также

    - -
      -
    • {{cssxref("<filter-function>")}}
      • -
    • {{cssxref("filter-function/brightness", "brightness()")}}
      • -
    • {{cssxref("filter-function/contrast", "contrast()")}}
      • -
    • {{cssxref("filter-function/drop-shadow", "drop-shadow()")}}
      • -
    • {{cssxref("filter-function/grayscale", "grayscale()")}}
      • -
    • {{cssxref("filter-function/hue-rotate", "hue-rotate()")}}
      • -
    • {{cssxref("filter-function/invert", "invert()")}}
      • -
    • {{cssxref("filter-function/opacity", "opacity()")}}
      • -
    • {{cssxref("filter-function/saturate", "saturate()")}}
      • -
    • {{cssxref("filter-function/sepia", "sepia()")}}
      • -
    diff --git a/files/ru/web/css/filter-function/blur/index.html b/files/ru/web/css/filter-function/blur/index.html new file mode 100644 index 0000000000..14977d610d --- /dev/null +++ b/files/ru/web/css/filter-function/blur/index.html @@ -0,0 +1,45 @@ +--- +title: blur() +slug: Web/CSS/filter-function/blur +translation_of: Web/CSS/filter-function/blur() +original_slug: Web/CSS/filter-function/blur() +--- +
    {{cssref}}
    + +

    Функция CSS blur() применяет размытие по Гауссу к входному изображению. Его результатом является {{cssxref("<filter-function>")}}.

    + +
    {{EmbedInteractiveExample("pages/css/function-blur.html")}}
    + + + +

    Синтаксис

    + +
    blur(radius)
    + +

    Параметры

    + +
    +
    radius
    +
    Радиус размытия, выраженный в {{cssxref("<length>")}}. Он определяет отклонение от стандартной функции Гаусса, то есть как много пикселей на экране смешиваются друг с другом. Таким образом, большее значение даст большее размытие. Значение 0 оставит изображение без изменений.
    +
    + +

    Пример

    + +
    blur(0)        /* Без эффекта */
+blur(8px)      /* Размытие с радиусом 8px */
+blur(1.17rem)  /* Размытие с радиусом 1.17rem */
    + +

    Смотрите также

    + +
      +
    • {{cssxref("<filter-function>")}}
      • +
    • {{cssxref("filter-function/brightness", "brightness()")}}
      • +
    • {{cssxref("filter-function/contrast", "contrast()")}}
      • +
    • {{cssxref("filter-function/drop-shadow", "drop-shadow()")}}
      • +
    • {{cssxref("filter-function/grayscale", "grayscale()")}}
      • +
    • {{cssxref("filter-function/hue-rotate", "hue-rotate()")}}
      • +
    • {{cssxref("filter-function/invert", "invert()")}}
      • +
    • {{cssxref("filter-function/opacity", "opacity()")}}
      • +
    • {{cssxref("filter-function/saturate", "saturate()")}}
      • +
    • {{cssxref("filter-function/sepia", "sepia()")}}
      • +
    diff --git a/files/ru/web/css/minmax()/index.html b/files/ru/web/css/minmax()/index.html deleted file mode 100644 index 94b983fd69..0000000000 --- a/files/ru/web/css/minmax()/index.html +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: minmax() -slug: Web/CSS/minmax() -translation_of: Web/CSS/minmax() ---- -

    minmax() это CSS функция, определяющая диапазон размеров, который больше или равен min и меньше или равен max. Используется в CSS Grids.

    - -
    /* <inflexible-breadth>, <track-breadth> values */
-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)
-
-/* <fixed-breadth>, <track-breadth> values */
-minmax(200px, 1fr)
-minmax(30%, 300px)
-minmax(400px, 50%)
-minmax(50%, min-content)
-minmax(300px, max-content)
-minmax(200px, auto)
-
-/* <inflexible-breadth>, <fixed-breadth> values */
-minmax(400px, 50%)
-minmax(30%, 300px)
-minmax(min-content, 200px)
-minmax(max-content, 200px)
-minmax(auto, 300px)
-
    - -

    Синтаксис

    - -

    Функция принимает два параметра, min и max.

    - -

    Каждый параметр может быть значением <length>, либо <percentage>, либо <flex>, или одним из ключевых слов max-content, min-content, или auto.

    - -

    Если max < min, то max игнорируется и minmax(min,max) обрабатывается как min. As a maximum, a {{cssxref("flex_value","<flex>")}} value sets the flex factor of a grid track; it is invalid as a minimum.

    - -

    Значения

    - -
    -
    {{cssxref("<length>")}}
    -
    A non-negative length.
    -
    {{cssxref("<percentage>")}}
    -
    A non-negative percentage relative to the inline size of the grid container in column grid tracks, and the block size of the grid container in row grid tracks. If the size of the grid container depends on the size of its tracks, then the <percentage> must be treated as auto. The {{glossary("user agent")}} may adjust the intrinsic size contributions of the track to the size of the grid container and increase the final size of the track by the minimum amount that would result in honoring the percentage.
    -
    {{cssxref("<flex>")}}
    -
    A non-negative dimension with the unit fr specifying the track’s flex factor. Each <flex>-sized track takes a share of the remaining space in proportion to its flex factor.
    -
    max-content
    -
    Represents the largest max-content contribution of the grid items occupying the grid track.
    -
    min-content
    -
    Represents the largest min-content contribution of the grid items occupying the grid track.
    -
    auto
    -
    As a maximum, identical to max-content. As a minimum it represents the largest minimum size (as specified by {{cssxref("min-width")}}/{{cssxref("min-height")}}) of the grid items occupying the grid track.
    -
    - -

    Формальный синтаксис

    - -{{csssyntax}} - -

    Пример

    - -

    CSS

    - -
    #container {
-  display: grid;
-  grid-template-columns: minmax(max-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

    - -
    <div id="container">
-  <div>
-    Item as wide as the content,<br/>
-    but at most 300 pixels.
-  </div>
-  <div>
-    Item with flexible width but a minimum of 200 pixels.
-  </div>
-  <div>
-    Inflexible item of 150 pixels width.
-  </div>
-</div>
    - -

    Результат

    - -

    {{EmbedLiveSample("Пример", "100%", 200)}}

    - -

    Спецификации

    - -{{Specifications}} - -

    Browser compatibility

    - - - -

    {{Compat}}

    - -

    Смотрите также

    - - - - diff --git a/files/ru/web/css/minmax/index.html b/files/ru/web/css/minmax/index.html new file mode 100644 index 0000000000..db3e5bf264 --- /dev/null +++ b/files/ru/web/css/minmax/index.html @@ -0,0 +1,177 @@ +--- +title: minmax() +slug: Web/CSS/minmax +translation_of: Web/CSS/minmax() +original_slug: Web/CSS/minmax() +--- +

    minmax() это CSS функция, определяющая диапазон размеров, который больше или равен min и меньше или равен max. Используется в CSS Grids.

    + +
    /* <inflexible-breadth>, <track-breadth> values */
+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)
+
+/* <fixed-breadth>, <track-breadth> values */
+minmax(200px, 1fr)
+minmax(30%, 300px)
+minmax(400px, 50%)
+minmax(50%, min-content)
+minmax(300px, max-content)
+minmax(200px, auto)
+
+/* <inflexible-breadth>, <fixed-breadth> values */
+minmax(400px, 50%)
+minmax(30%, 300px)
+minmax(min-content, 200px)
+minmax(max-content, 200px)
+minmax(auto, 300px)
+
    + +

    Синтаксис

    + +

    Функция принимает два параметра, min и max.

    + +

    Каждый параметр может быть значением <length>, либо <percentage>, либо <flex>, или одним из ключевых слов max-content, min-content, или auto.

    + +

    Если max < min, то max игнорируется и minmax(min,max) обрабатывается как min. As a maximum, a {{cssxref("flex_value","<flex>")}} value sets the flex factor of a grid track; it is invalid as a minimum.

    + +

    Значения

    + +
    +
    {{cssxref("<length>")}}
    +
    A non-negative length.
    +
    {{cssxref("<percentage>")}}
    +
    A non-negative percentage relative to the inline size of the grid container in column grid tracks, and the block size of the grid container in row grid tracks. If the size of the grid container depends on the size of its tracks, then the <percentage> must be treated as auto. The {{glossary("user agent")}} may adjust the intrinsic size contributions of the track to the size of the grid container and increase the final size of the track by the minimum amount that would result in honoring the percentage.
    +
    {{cssxref("<flex>")}}
    +
    A non-negative dimension with the unit fr specifying the track’s flex factor. Each <flex>-sized track takes a share of the remaining space in proportion to its flex factor.
    +
    max-content
    +
    Represents the largest max-content contribution of the grid items occupying the grid track.
    +
    min-content
    +
    Represents the largest min-content contribution of the grid items occupying the grid track.
    +
    auto
    +
    As a maximum, identical to max-content. As a minimum it represents the largest minimum size (as specified by {{cssxref("min-width")}}/{{cssxref("min-height")}}) of the grid items occupying the grid track.
    +
    + +

    Формальный синтаксис

    + +{{csssyntax}} + +

    Пример

    + +

    CSS

    + +
    #container {
+  display: grid;
+  grid-template-columns: minmax(max-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

    + +
    <div id="container">
+  <div>
+    Item as wide as the content,<br/>
+    but at most 300 pixels.
+  </div>
+  <div>
+    Item with flexible width but a minimum of 200 pixels.
+  </div>
+  <div>
+    Inflexible item of 150 pixels width.
+  </div>
+</div>
    + +

    Результат

    + +

    {{EmbedLiveSample("Пример", "100%", 200)}}

    + +

    Спецификации

    + +{{Specifications}} + +

    Browser compatibility

    + + + +

    {{Compat}}

    + +

    Смотрите также

    + + + + diff --git a/files/ru/web/css/transform-function/rotate()/index.html b/files/ru/web/css/transform-function/rotate()/index.html deleted file mode 100644 index eddac712aa..0000000000 --- a/files/ru/web/css/transform-function/rotate()/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: rotate() -slug: Web/CSS/transform-function/rotate() -tags: - - CSS - - CSS трансформация - - CSS функция - - Reference - - Rotate - - transform -translation_of: Web/CSS/transform-function/rotate() ---- -
    {{CSSRef}}
    - -

    Функция CSS rotate () определяет преобразование, которое перемещает элемент вокруг неподвижной точки (как определено свойством {{Cssxref ("transform-origin")}}, не деформируя его. Количество движения определяется заданным углом; если положительно, движение будет по часовой стрелке, если оно отрицательное, оно будет против часовой стрелки. Вращение на 180 ° называется точечным отражением.

    - -

    - -

    Синтаксис

    - -
    rotate(a)
-
    - -

    Значения

    - -
    -
    a
    -
    Является {{ cssxref("<angle>") }}, представляющим угол поворота. Положительный угол обозначает вращение по часовой стрелке, а отрицательный - против часовой стрелки.
    -
    - - - - - - - - - - - - - - - - - - - - - -
    Декартовы координаты на ℝ2Однородные координаты на ℝℙ2Декартовы координаты на ℝ3Однородные координаты на ℝℙ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]
    - -

    Примеры

    - -

    Базовый пример

    - -

    HTML

    - -
    <div>Normal</div>
-<div class="rotated">Rotated</div>
    - -

    CSS

    - -
    div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.rotated {
-  transform: rotate(45deg); /* Equal to rotateZ(45deg) */
-  background-color: pink;
-}
    - -

    Result

    - -

    {{EmbedLiveSample("Базовый_пример", "auto", 180)}}

    - -

    Объединение вращения с другим преобразованием

    - -

    Если вы хотите применить к элементу несколько преобразований, будьте осторожны с порядком, в котором вы указываете свои преобразования. Например, если вы вращаете перед сдвигом, сдвиг произойдёт относительно новой оси вращения!

    - -

    HTML

    - -
    <div>Normal</div>
-<div class="rotate">Rotated</div>
-<div class="rotate-translate">Rotated + Translated</div>
-<div class="translate-rotate">Translated + Rotated</div>
-
    - -

    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);
-}
-
    - -

    Result

    - -

    {{EmbedLiveSample("Объединение_вращения_с_другим_преобразованием", "auto", 320)}}

    - -

    Спецификации

    - -{{Specifications}} - -

    Поддержка браузерами

    - -

    {{Compat}}

    - -

    Смотрите также

    - -
      -
    • {{cssxref("transform")}}
      • -
    • {{cssxref("transform-function")}}
      • -
    • {{cssxref("transform-function/rotate3d", "rotate3d()")}}
      • -
    diff --git a/files/ru/web/css/transform-function/rotate/index.html b/files/ru/web/css/transform-function/rotate/index.html new file mode 100644 index 0000000000..57f781c4ff --- /dev/null +++ b/files/ru/web/css/transform-function/rotate/index.html @@ -0,0 +1,138 @@ +--- +title: rotate() +slug: Web/CSS/transform-function/rotate +tags: + - CSS + - CSS трансформация + - CSS функция + - Reference + - Rotate + - transform +translation_of: Web/CSS/transform-function/rotate() +original_slug: Web/CSS/transform-function/rotate() +--- +
    {{CSSRef}}
    + +

    Функция CSS rotate () определяет преобразование, которое перемещает элемент вокруг неподвижной точки (как определено свойством {{Cssxref ("transform-origin")}}, не деформируя его. Количество движения определяется заданным углом; если положительно, движение будет по часовой стрелке, если оно отрицательное, оно будет против часовой стрелки. Вращение на 180 ° называется точечным отражением.

    + +

    + +

    Синтаксис

    + +
    rotate(a)
+
    + +

    Значения

    + +
    +
    a
    +
    Является {{ cssxref("<angle>") }}, представляющим угол поворота. Положительный угол обозначает вращение по часовой стрелке, а отрицательный - против часовой стрелки.
    +
    + + + + + + + + + + + + + + + + + + + + + +
    Декартовы координаты на ℝ2Однородные координаты на ℝℙ2Декартовы координаты на ℝ3Однородные координаты на ℝℙ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]
    + +

    Примеры

    + +

    Базовый пример

    + +

    HTML

    + +
    <div>Normal</div>
+<div class="rotated">Rotated</div>
    + +

    CSS

    + +
    div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate(45deg); /* Equal to rotateZ(45deg) */
+  background-color: pink;
+}
    + +

    Result

    + +

    {{EmbedLiveSample("Базовый_пример", "auto", 180)}}

    + +

    Объединение вращения с другим преобразованием

    + +

    Если вы хотите применить к элементу несколько преобразований, будьте осторожны с порядком, в котором вы указываете свои преобразования. Например, если вы вращаете перед сдвигом, сдвиг произойдёт относительно новой оси вращения!

    + +

    HTML

    + +
    <div>Normal</div>
+<div class="rotate">Rotated</div>
+<div class="rotate-translate">Rotated + Translated</div>
+<div class="translate-rotate">Translated + Rotated</div>
+
    + +

    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);
+}
+
    + +

    Result

    + +

    {{EmbedLiveSample("Объединение_вращения_с_другим_преобразованием", "auto", 320)}}

    + +

    Спецификации

    + +{{Specifications}} + +

    Поддержка браузерами

    + +

    {{Compat}}

    + +

    Смотрите также

    + +
      +
    • {{cssxref("transform")}}
      • +
    • {{cssxref("transform-function")}}
      • +
    • {{cssxref("transform-function/rotate3d", "rotate3d()")}}
      • +
    diff --git a/files/ru/web/css/transform-function/rotate3d()/index.html b/files/ru/web/css/transform-function/rotate3d()/index.html deleted file mode 100644 index cb26bcd71f..0000000000 --- a/files/ru/web/css/transform-function/rotate3d()/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: rotate3d() -slug: Web/CSS/transform-function/rotate3d() -tags: - - CSS -translation_of: Web/CSS/transform-function/rotate3d() ---- -
    {{CSSRef}}
    - -
    Функция CSS rotate3d() трансформирует элемент без деформации, вращая его в трёхмерном пространстве вокруг зафиксированной оси. Её результатом является тип {{cssxref ("<transform-function>")}}.
    - -
     
    - -
    {{EmbedInteractiveExample("pages/css/rotate3d.html")}}
    - - - -

    In 3D space, rotations have three degrees of liberty, which together describe a single axis of rotation. The axis of rotation is defined by an [x, y, z] vector and pass by the origin (as defined by the {{ cssxref("transform-origin") }} property). If, as specified, the vector is not normalized (i.e., if the sum of the square of its three coordinates is not 1), the {{glossary("user agent")}} will normalize it internally. A non-normalizable vector, such as the null vector, [0, 0, 0], will cause the rotation to be ignored, but without invaliding the whole CSS property.

    - -
    Note: Unlike rotations in the 2D plane, the composition of 3D rotations is usually not commutative. In other words, the order in which the rotations are applied impacts the result.
    - -

    Syntax

    - -

    The amount of rotation created by rotate3d() is specified by three {{cssxref("<number>")}}s and one {{cssxref("<angle>")}}. The <number>s represent the x-, y-, and z-coordinates of the vector denoting the axis of rotation. The <angle> represents the angle of rotation; if positive, the movement will be clockwise; if negative, it will be counter-clockwise.

    - -
    rotate3d(x, y, z, a)
-
    - -

    Values

    - -
    -
    x
    -
    Is a {{cssxref("<number>")}} describing the x-coordinate of the vector denoting the axis of rotation which could between 0 and 1.
    -
    y
    -
    Is a {{cssxref("<number>")}} describing the y-coordinate of the vector denoting the axis of rotation which could between 0 and 1.
    -
    z
    -
    Is a {{cssxref("<number>")}} describing the z-coordinate of the vector denoting the axis of rotation which could between 0 and 1.
    -
    a
    -
    Is an {{ cssxref("<angle>") }} representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.
    -
    - - - - - - - - - - - - - - - - - - - -
    Cartesian coordinates on ℝ2This transformation applies to the 3D space and can't be represented on the plane.
    Homogeneous coordinates on ℝℙ2
    Cartesian coordinates on ℝ3 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
    Homogeneous coordinates on ℝℙ3
    - -

    Examples

    - -

    Rotating on the y-axis

    - -

    HTML

    - -
    <div>Normal</div>
-<div class="rotated">Rotated</div>
    - -

    CSS

    - -
    body {
-  perspective: 800px;
-}
-
-div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.rotated {
-  transform: rotate3d(0, 1, 0, 60deg);
-  background-color: pink;
-}
-
    - -

    Result

    - -

    {{EmbedLiveSample("Rotating_on_the_y-axis", "auto", 180)}}

    - -

    Rotating on a custom axis

    - -

    HTML

    - -
    <div>Normal</div>
-<div class="rotated">Rotated</div>
    - -

    CSS

    - -
    body {
-  perspective: 800px;
-}
-
-div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.rotated {
-  transform: rotate3d(1, 2, -1, 192deg);
-  background-color: pink;
-}
-
    - -

    Result

    - -

    {{EmbedLiveSample("Rotating_on_a_custom_axis", "auto", 180)}}

    - -

    Browser compatibility

    - -

    Please see the <transform-function> data type for compatibility info.

    - -

    See also

    - -
      -
    • {{cssxref("transform")}}
      • -
    • {{cssxref("<transform-function>")}}
      • -
    diff --git a/files/ru/web/css/transform-function/rotate3d/index.html b/files/ru/web/css/transform-function/rotate3d/index.html new file mode 100644 index 0000000000..2e4a5ed91e --- /dev/null +++ b/files/ru/web/css/transform-function/rotate3d/index.html @@ -0,0 +1,132 @@ +--- +title: rotate3d() +slug: Web/CSS/transform-function/rotate3d +tags: + - CSS +translation_of: Web/CSS/transform-function/rotate3d() +original_slug: Web/CSS/transform-function/rotate3d() +--- +
    {{CSSRef}}
    + +
    Функция CSS rotate3d() трансформирует элемент без деформации, вращая его в трёхмерном пространстве вокруг зафиксированной оси. Её результатом является тип {{cssxref ("<transform-function>")}}.
    + +
     
    + +
    {{EmbedInteractiveExample("pages/css/rotate3d.html")}}
    + + + +

    In 3D space, rotations have three degrees of liberty, which together describe a single axis of rotation. The axis of rotation is defined by an [x, y, z] vector and pass by the origin (as defined by the {{ cssxref("transform-origin") }} property). If, as specified, the vector is not normalized (i.e., if the sum of the square of its three coordinates is not 1), the {{glossary("user agent")}} will normalize it internally. A non-normalizable vector, such as the null vector, [0, 0, 0], will cause the rotation to be ignored, but without invaliding the whole CSS property.

    + +
    Note: Unlike rotations in the 2D plane, the composition of 3D rotations is usually not commutative. In other words, the order in which the rotations are applied impacts the result.
    + +

    Syntax

    + +

    The amount of rotation created by rotate3d() is specified by three {{cssxref("<number>")}}s and one {{cssxref("<angle>")}}. The <number>s represent the x-, y-, and z-coordinates of the vector denoting the axis of rotation. The <angle> represents the angle of rotation; if positive, the movement will be clockwise; if negative, it will be counter-clockwise.

    + +
    rotate3d(x, y, z, a)
+
    + +

    Values

    + +
    +
    x
    +
    Is a {{cssxref("<number>")}} describing the x-coordinate of the vector denoting the axis of rotation which could between 0 and 1.
    +
    y
    +
    Is a {{cssxref("<number>")}} describing the y-coordinate of the vector denoting the axis of rotation which could between 0 and 1.
    +
    z
    +
    Is a {{cssxref("<number>")}} describing the z-coordinate of the vector denoting the axis of rotation which could between 0 and 1.
    +
    a
    +
    Is an {{ cssxref("<angle>") }} representing the angle of the rotation. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one.
    +
    + + + + + + + + + + + + + + + + + + + +
    Cartesian coordinates on ℝ2This transformation applies to the 3D space and can't be represented on the plane.
    Homogeneous coordinates on ℝℙ2
    Cartesian coordinates on ℝ3 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
    Homogeneous coordinates on ℝℙ3
    + +

    Examples

    + +

    Rotating on the y-axis

    + +

    HTML

    + +
    <div>Normal</div>
+<div class="rotated">Rotated</div>
    + +

    CSS

    + +
    body {
+  perspective: 800px;
+}
+
+div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate3d(0, 1, 0, 60deg);
+  background-color: pink;
+}
+
    + +

    Result

    + +

    {{EmbedLiveSample("Rotating_on_the_y-axis", "auto", 180)}}

    + +

    Rotating on a custom axis

    + +

    HTML

    + +
    <div>Normal</div>
+<div class="rotated">Rotated</div>
    + +

    CSS

    + +
    body {
+  perspective: 800px;
+}
+
+div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate3d(1, 2, -1, 192deg);
+  background-color: pink;
+}
+
    + +

    Result

    + +

    {{EmbedLiveSample("Rotating_on_a_custom_axis", "auto", 180)}}

    + +

    Browser compatibility

    + +

    Please see the <transform-function> data type for compatibility info.

    + +

    See also

    + +
      +
    • {{cssxref("transform")}}
      • +
    • {{cssxref("<transform-function>")}}
      • +
    diff --git a/files/ru/web/css/transform-function/scale3d()/index.html b/files/ru/web/css/transform-function/scale3d()/index.html deleted file mode 100644 index e66adb526b..0000000000 --- a/files/ru/web/css/transform-function/scale3d()/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: scale3d() -slug: Web/CSS/transform-function/scale3d() -translation_of: Web/CSS/transform-function/scale3d() ---- -
    {{CSSRef}}
    - -

    scale3d() CSS функция изменяет размер элемента. Благодаря величине масштабирования определённой вектором, может изменять различные размеры в разных масштабах.

    - -

    Это преобразование характеризуется вектором, координаты которого определяют, сколько масштабирования выполняется в каждом направлении. Если все три координаты вектора равны, масштабирование равномерно или изотропно, а форма элемента сохраняется. В этом случае функция масштабирования определяет гомотетическое преобразование.

    - -

    Когда вне диапазона [-1, 1], масштабирование увеличивает элемент в направлении координаты; Когда внутри диапазона он сжимает элемент в этом направлении. При равном 1 он ничего не делает, а когда отрицательный, он выполняет точечное отражение и модификацию размера.

    - -

    Синтаксис

    - -
    scale3d(sx, sy, sz)
-
    - -

    Значения

    - -
    -
    sx
    -
    Является  {{cssxref("<number>")}} , представляющим абсцисс вектора масштабирования.
    -
    sy
    -
    Является  {{cssxref("<number>")}} , представляющим ординату вектора масштабирования.
    -
    sz
    -
    Является  {{cssxref("<number>")}}, представляющим z-компонент масштабирующего вектора.
    -
    - - - - - - - - - - - - - - - - - -
    Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
    Это преобразование применяется к пространству 3D и не может быть представлено на плоскости. sx000sy000sz sx0000sy0000sz00001
    - -

    Примеры

    - -

    Without changing the origin

    - -

    HTML

    - -
    <p>foo</p>
-<p class="transformed">bar</p>
    - -

    CSS

    - -
    p {
-  width: 50px;
-  height: 50px;
-  background-color: teal;
-}
-
-.transformed {
-  transform: perspective(500px) scale3d(0.8, 2, 0.2) translateZ(100px);
-  background-color: blue;
-}
-
    - -

    Result

    - -

    {{EmbedLiveSample("Without_changing_the_origin","100%","200")}}

    - -

    Translating the origin of the transformation

    - -

    HTML

    - -
    <p>foo</p>
-<p class="transformed">bar</p>
    - -

    CSS

    - -
    p {
-  width: 50px;
-  height: 50px;
-  background-color: teal;
-}
-
-.transformed {
-  transform: scale3d(2, 3, 0);
-  transform-origin: center;
-  background-color: blue;
-}
-
    - -

    Result

    - -

    {{EmbedLiveSample("Translating_the_origin_of_the_transformation","100%","200")}}

    diff --git a/files/ru/web/css/transform-function/scale3d/index.html b/files/ru/web/css/transform-function/scale3d/index.html new file mode 100644 index 0000000000..81db8c79b9 --- /dev/null +++ b/files/ru/web/css/transform-function/scale3d/index.html @@ -0,0 +1,100 @@ +--- +title: scale3d() +slug: Web/CSS/transform-function/scale3d +translation_of: Web/CSS/transform-function/scale3d() +original_slug: Web/CSS/transform-function/scale3d() +--- +
    {{CSSRef}}
    + +

    scale3d() CSS функция изменяет размер элемента. Благодаря величине масштабирования определённой вектором, может изменять различные размеры в разных масштабах.

    + +

    Это преобразование характеризуется вектором, координаты которого определяют, сколько масштабирования выполняется в каждом направлении. Если все три координаты вектора равны, масштабирование равномерно или изотропно, а форма элемента сохраняется. В этом случае функция масштабирования определяет гомотетическое преобразование.

    + +

    Когда вне диапазона [-1, 1], масштабирование увеличивает элемент в направлении координаты; Когда внутри диапазона он сжимает элемент в этом направлении. При равном 1 он ничего не делает, а когда отрицательный, он выполняет точечное отражение и модификацию размера.

    + +

    Синтаксис

    + +
    scale3d(sx, sy, sz)
+
    + +

    Значения

    + +
    +
    sx
    +
    Является  {{cssxref("<number>")}} , представляющим абсцисс вектора масштабирования.
    +
    sy
    +
    Является  {{cssxref("<number>")}} , представляющим ординату вектора масштабирования.
    +
    sz
    +
    Является  {{cssxref("<number>")}}, представляющим z-компонент масштабирующего вектора.
    +
    + + + + + + + + + + + + + + + + + +
    Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
    Это преобразование применяется к пространству 3D и не может быть представлено на плоскости. sx000sy000sz sx0000sy0000sz00001
    + +

    Примеры

    + +

    Without changing the origin

    + +

    HTML

    + +
    <p>foo</p>
+<p class="transformed">bar</p>
    + +

    CSS

    + +
    p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformed {
+  transform: perspective(500px) scale3d(0.8, 2, 0.2) translateZ(100px);
+  background-color: blue;
+}
+
    + +

    Result

    + +

    {{EmbedLiveSample("Without_changing_the_origin","100%","200")}}

    + +

    Translating the origin of the transformation

    + +

    HTML

    + +
    <p>foo</p>
+<p class="transformed">bar</p>
    + +

    CSS

    + +
    p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformed {
+  transform: scale3d(2, 3, 0);
+  transform-origin: center;
+  background-color: blue;
+}
+
    + +

    Result

    + +

    {{EmbedLiveSample("Translating_the_origin_of_the_transformation","100%","200")}}

    diff --git a/files/ru/web/css/transform-function/skew()/index.html b/files/ru/web/css/transform-function/skew()/index.html deleted file mode 100644 index a9f6da3ac3..0000000000 --- a/files/ru/web/css/transform-function/skew()/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: skew() -slug: Web/CSS/transform-function/skew() -translation_of: Web/CSS/transform-function/skew() ---- -
    {{CSSRef}}
    - -

    CSS функция skew() трансформирует элемент, наклоняя его в 2D-пространстве.

    - -
    {{EmbedInteractiveExample("pages/css/function-skew.html")}}
    - - - -

    Данная трансформация является линейным преобразованием векторного пространства (трансвекция или shear mapping), которое деформирует каждую точку элемента на определённый угол по горизонтали или вертикали. Координаты каждой точки изменяются на величину, пропорциональную указанному углу и расстоянию до точки, относительно которой выполняется трансформация (origin); таким образом, чем больше расстояние до смещаемой точки элемента, тем больше она будет смещена по горизонтали или вертикали.

    - -

    Синтаксис

    - -

    Функция skew() задаётся одним или двумя значениями которые отображают наклон в каждом из направлений.

    - -
    skew(ax)
-
-skew(ax, ay)
-
    - -

    Значения

    - -
    -
    ax
    -
    Указывается значение {{cssxref("<angle>")}}, которое является углом наклона вдоль оси X.
    -
    ay
    -
    Указывается значение {{cssxref("<angle>")}}, которое является углом наклона вдоль оси Y. Если данное значение не задано, то по умолчанию оно равно 0. В этом случае вертикального наклона не будет, а будет только горизонтальный.
    -
    - - - - - - - - - - - - - - - - - - - - - -
    Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ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]
    - -

    Примеры

    - -

    Используя только наклон по оси x

    - -

    HTML

    - -
    <div>Обычный</div>
-<div class="skewed">Наклонённый</div>
    - -

    CSS

    - -
    div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.skewed {
-  transform: skew(10deg); /* Equal to skewX(10deg) */
-  background-color: pink;
-}
-
    - -

    Result

    - -

    {{EmbedLiveSample("Используя_только_наклон_по_оси_x", 200, 200)}}

    - -

    Используя два угла

    - -

    HTML

    - -
    <div>Обычный</div>
-<div class="skewed">Наклонённый</div>
    - -

    CSS

    - -
    div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.skewed {
-  transform: skew(10deg, 10deg);
-  background-color: pink;
-}
-
    - -

    Результат

    - -

    {{EmbedLiveSample("Используя_два_угла", 200, 200)}}

    - -

    Поддержка браузеров

    - -

    Please see the <transform-function> data type for compatibility info.

    - -

    Смотрите также

    - -
      -
    • {{cssxref("transform")}}
      • -
    • {{cssxref("<transform-function>")}}
      • -
    diff --git a/files/ru/web/css/transform-function/skew/index.html b/files/ru/web/css/transform-function/skew/index.html new file mode 100644 index 0000000000..613fd6e8a8 --- /dev/null +++ b/files/ru/web/css/transform-function/skew/index.html @@ -0,0 +1,118 @@ +--- +title: skew() +slug: Web/CSS/transform-function/skew +translation_of: Web/CSS/transform-function/skew() +original_slug: Web/CSS/transform-function/skew() +--- +
    {{CSSRef}}
    + +

    CSS функция skew() трансформирует элемент, наклоняя его в 2D-пространстве.

    + +
    {{EmbedInteractiveExample("pages/css/function-skew.html")}}
    + + + +

    Данная трансформация является линейным преобразованием векторного пространства (трансвекция или shear mapping), которое деформирует каждую точку элемента на определённый угол по горизонтали или вертикали. Координаты каждой точки изменяются на величину, пропорциональную указанному углу и расстоянию до точки, относительно которой выполняется трансформация (origin); таким образом, чем больше расстояние до смещаемой точки элемента, тем больше она будет смещена по горизонтали или вертикали.

    + +

    Синтаксис

    + +

    Функция skew() задаётся одним или двумя значениями которые отображают наклон в каждом из направлений.

    + +
    skew(ax)
+
+skew(ax, ay)
+
    + +

    Значения

    + +
    +
    ax
    +
    Указывается значение {{cssxref("<angle>")}}, которое является углом наклона вдоль оси X.
    +
    ay
    +
    Указывается значение {{cssxref("<angle>")}}, которое является углом наклона вдоль оси Y. Если данное значение не задано, то по умолчанию оно равно 0. В этом случае вертикального наклона не будет, а будет только горизонтальный.
    +
    + + + + + + + + + + + + + + + + + + + + + +
    Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ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]
    + +

    Примеры

    + +

    Используя только наклон по оси x

    + +

    HTML

    + +
    <div>Обычный</div>
+<div class="skewed">Наклонённый</div>
    + +

    CSS

    + +
    div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.skewed {
+  transform: skew(10deg); /* Equal to skewX(10deg) */
+  background-color: pink;
+}
+
    + +

    Result

    + +

    {{EmbedLiveSample("Используя_только_наклон_по_оси_x", 200, 200)}}

    + +

    Используя два угла

    + +

    HTML

    + +
    <div>Обычный</div>
+<div class="skewed">Наклонённый</div>
    + +

    CSS

    + +
    div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.skewed {
+  transform: skew(10deg, 10deg);
+  background-color: pink;
+}
+
    + +

    Результат

    + +

    {{EmbedLiveSample("Используя_два_угла", 200, 200)}}

    + +

    Поддержка браузеров

    + +

    Please see the <transform-function> data type for compatibility info.

    + +

    Смотрите также

    + +
      +
    • {{cssxref("transform")}}
      • +
    • {{cssxref("<transform-function>")}}
      • +
    diff --git a/files/ru/web/css/url()/index.html b/files/ru/web/css/url()/index.html deleted file mode 100644 index 568e69a873..0000000000 --- a/files/ru/web/css/url()/index.html +++ /dev/null @@ -1,171 +0,0 @@ ---- -title: url() -slug: Web/CSS/url() -translation_of: Web/CSS/url() ---- -
    {{CSSRef}}
    - -

    The url() CSS function is used to include a file. The parameter is an absolute URL, a relative URL, or a data URI. The url() function can be passed as a parameter of another CSS functions, like the {{cssxref('attr()')}} function. Depending on the property for which it is a value, the resource sought can be an image, font, or a stylesheet. The url() functional notation is the value for the <url> data type.

    - -
    /* Simple usage */
-url(https://example.com/images/myImg.jpg);
-url(data:image/png;base64,iRxVB0…);
-url(myFont.woff);
-url(#IDofSVGpath);
-
-/* associated properties */
-background-image: url("https://mdn.mozillademos.org/files/16761/star.gif");
-list-style-image: url('../images/bullet.jpg');
-content: url("pdficon.jpg");
-cursor: url(mycursor.cur);
-border-image-source: url(/media/diamonds.png);
-src: url('fantasticfont.woff');
-offset-path: url(#path);
-mask-image: url("masks.svg#mask1");
-
-/* Properties with fallbacks */
-cursor: url(pointer.cur), pointer;
-
-/* Associated short-hand properties */
-background: url('https://mdn.mozillademos.org/files/16761/star.gif') bottom right repeat-x blue;
-border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space;
-
-/* As a parameter in another CSS function */
-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);
-
-/* as part of a non-shorthand multiple value */
-content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg);
-
-/* at-rules */
-@document url("https://www.example.com/") { ... } {{Experimental_Inline}}
-@import url("https://www.example.com/style.css");
-@namespace url(http://www.w3.org/1999/xhtml);
-
    - -

    Relative URLs, if used, are relative to the URL of the stylesheet (not to the URL of the web page).

    - -

    The url() function can be included as a value for {{cssxref('background')}}, {{cssxref('background-image')}}, {{cssxref('list-style')}}, {{cssxref('list-style-image')}}, {{cssxref('content')}}, {{cssxref('cursor')}}, {{cssxref('border')}}, {{cssxref('border-image')}}, {{cssxref('border-image-source')}}, {{cssxref('mask')}}, {{cssxref('mask-image')}}, src as part of a @font-face block, and @counter-style/symbol

    - -

    In CSS Level 1, the url() functional notation described only true URLs. In CSS Level 2, the definition of url() was extended to describe any URI, including URNs. CSS Values and Units Level 3 returned to the narrower, initial definition. Now, url() denotes only true <url>s.

    - -

    Syntax

    - -

    Values

    - -
    -
    <string>
    -
    -
    -
    <url>
    -
    A url, which is a relative or absolute address, or pointer, to the web resource to be included, or a data uri, optionally in single or double quotes. Quotes are required if the URL includes parentheses, whitespace, or quotes, unless these characters are escaped, or if the address includes control characters above 0x7e. Double quotes cannot occur inside double quotes and single quotes cannot occur inside single quotes unless escaped. The following are all valid and equivalent: - 
    <css_property>: url("https://example.com/image.png")
-<css_property>: url('https://example.com/image.png')
-<css_property>: url(https://example.com/image.png)
    -
    -
    path
    -
    References the ID of an SVG shape -- circle, ellipse, line, path, polygon, polyline, or rect -- using the shape's geometry as the path.
    -
    -
    -
    <url-modifier> {{Experimental_Inline}}
    -
    In the future, the url() function may support specifying a modifier, an identifier or a functional notation, which alters the meaning of the URL string.This is not supported and not fully defined in the specification.
    -
    - -

    Formal syntax

    - -
    url( <string> <url-modifier>* )
    - -

    Examples

    - -

    content property

    - -

    HTML

    - -
    <ul>
-  <li>Item 1</li>
-  <li>Item 2</li>
-  <li>Item 3</li>
-</ul>
    - -

    CSS

    - -
    li::after {
-  content: ' - ' url(https://mdn.mozillademos.org/files/16761/star.gif);
-}
    - -

    Result

    - -

    {{EmbedLiveSample("content_property", "100%", 50)}}

    - -

    data-uri

    - -
    -

    HTML

    - -
    <div class="background"></div>
    - -

    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");
-}
    -
    - -

    {{EmbedLiveSample("data-uri", "100%", 50)}}

    - -

    Specifications

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName('CSS4 Values', '#urls', 'url()')}}{{Spec2('CSS4 Values')}}
    {{SpecName('CSS3 Values', '#urls', 'url()')}}{{Spec2('CSS3 Values')}}No significant change from CSS Level 2 (Revision 1).
    {{Specname('CSS2.1', 'syndata.html#uri', 'uri()')}}{{Spec2('CSS2.1')}}No significant change from CSS Level 1.
    {{SpecName('CSS1', '#url', 'url()')}}{{Spec2('CSS1')}}Initial definition.
    - -

    Browser compatibility

    - - - -
    {{Compat}}
    - -

    See also

    - -
      -
    • {{cssxref("<gradient>")}}
      • -
    • {{cssxref("element()")}}
      • -
    • {{cssxref("_image","image()")}}
      • -
    • {{cssxref ("набор изображений", "набор изображений ()")}}
      • -
    • {{cssxref ("плавное затухание")}}
      • -
    diff --git a/files/ru/web/css/url/index.html b/files/ru/web/css/url/index.html new file mode 100644 index 0000000000..f28bab3c9c --- /dev/null +++ b/files/ru/web/css/url/index.html @@ -0,0 +1,172 @@ +--- +title: url() +slug: Web/CSS/url +translation_of: Web/CSS/url() +original_slug: Web/CSS/url() +--- +
    {{CSSRef}}
    + +

    The url() CSS function is used to include a file. The parameter is an absolute URL, a relative URL, or a data URI. The url() function can be passed as a parameter of another CSS functions, like the {{cssxref('attr()')}} function. Depending on the property for which it is a value, the resource sought can be an image, font, or a stylesheet. The url() functional notation is the value for the <url> data type.

    + +
    /* Simple usage */
+url(https://example.com/images/myImg.jpg);
+url(data:image/png;base64,iRxVB0…);
+url(myFont.woff);
+url(#IDofSVGpath);
+
+/* associated properties */
+background-image: url("https://mdn.mozillademos.org/files/16761/star.gif");
+list-style-image: url('../images/bullet.jpg');
+content: url("pdficon.jpg");
+cursor: url(mycursor.cur);
+border-image-source: url(/media/diamonds.png);
+src: url('fantasticfont.woff');
+offset-path: url(#path);
+mask-image: url("masks.svg#mask1");
+
+/* Properties with fallbacks */
+cursor: url(pointer.cur), pointer;
+
+/* Associated short-hand properties */
+background: url('https://mdn.mozillademos.org/files/16761/star.gif') bottom right repeat-x blue;
+border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space;
+
+/* As a parameter in another CSS function */
+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);
+
+/* as part of a non-shorthand multiple value */
+content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg);
+
+/* at-rules */
+@document url("https://www.example.com/") { ... } {{Experimental_Inline}}
+@import url("https://www.example.com/style.css");
+@namespace url(http://www.w3.org/1999/xhtml);
+
    + +

    Relative URLs, if used, are relative to the URL of the stylesheet (not to the URL of the web page).

    + +

    The url() function can be included as a value for {{cssxref('background')}}, {{cssxref('background-image')}}, {{cssxref('list-style')}}, {{cssxref('list-style-image')}}, {{cssxref('content')}}, {{cssxref('cursor')}}, {{cssxref('border')}}, {{cssxref('border-image')}}, {{cssxref('border-image-source')}}, {{cssxref('mask')}}, {{cssxref('mask-image')}}, src as part of a @font-face block, and @counter-style/symbol

    + +

    In CSS Level 1, the url() functional notation described only true URLs. In CSS Level 2, the definition of url() was extended to describe any URI, including URNs. CSS Values and Units Level 3 returned to the narrower, initial definition. Now, url() denotes only true <url>s.

    + +

    Syntax

    + +

    Values

    + +
    +
    <string>
    +
    +
    +
    <url>
    +
    A url, which is a relative or absolute address, or pointer, to the web resource to be included, or a data uri, optionally in single or double quotes. Quotes are required if the URL includes parentheses, whitespace, or quotes, unless these characters are escaped, or if the address includes control characters above 0x7e. Double quotes cannot occur inside double quotes and single quotes cannot occur inside single quotes unless escaped. The following are all valid and equivalent: + 
    <css_property>: url("https://example.com/image.png")
+<css_property>: url('https://example.com/image.png')
+<css_property>: url(https://example.com/image.png)
    +
    +
    path
    +
    References the ID of an SVG shape -- circle, ellipse, line, path, polygon, polyline, or rect -- using the shape's geometry as the path.
    +
    +
    +
    <url-modifier> {{Experimental_Inline}}
    +
    In the future, the url() function may support specifying a modifier, an identifier or a functional notation, which alters the meaning of the URL string.This is not supported and not fully defined in the specification.
    +
    + +

    Formal syntax

    + +
    url( <string> <url-modifier>* )
    + +

    Examples

    + +

    content property

    + +

    HTML

    + +
    <ul>
+  <li>Item 1</li>
+  <li>Item 2</li>
+  <li>Item 3</li>
+</ul>
    + +

    CSS

    + +
    li::after {
+  content: ' - ' url(https://mdn.mozillademos.org/files/16761/star.gif);
+}
    + +

    Result

    + +

    {{EmbedLiveSample("content_property", "100%", 50)}}

    + +

    data-uri

    + +
    +

    HTML

    + +
    <div class="background"></div>
    + +

    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");
+}
    +
    + +

    {{EmbedLiveSample("data-uri", "100%", 50)}}

    + +

    Specifications

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    SpecificationStatusComment
    {{SpecName('CSS4 Values', '#urls', 'url()')}}{{Spec2('CSS4 Values')}}
    {{SpecName('CSS3 Values', '#urls', 'url()')}}{{Spec2('CSS3 Values')}}No significant change from CSS Level 2 (Revision 1).
    {{Specname('CSS2.1', 'syndata.html#uri', 'uri()')}}{{Spec2('CSS2.1')}}No significant change from CSS Level 1.
    {{SpecName('CSS1', '#url', 'url()')}}{{Spec2('CSS1')}}Initial definition.
    + +

    Browser compatibility

    + + + +
    {{Compat}}
    + +

    See also

    + +
      +
    • {{cssxref("<gradient>")}}
      • +
    • {{cssxref("element()")}}
      • +
    • {{cssxref("_image","image()")}}
      • +
    • {{cssxref ("набор изображений", "набор изображений ()")}}
      • +
    • {{cssxref ("плавное затухание")}}
      • +
    diff --git a/files/ru/web/css/var()/index.md b/files/ru/web/css/var()/index.md deleted file mode 100644 index a5ee137b10..0000000000 --- a/files/ru/web/css/var()/index.md +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: var() -slug: Web/CSS/var() -tags: - - CSS - - CSS Custom Properties - - CSS Function - - CSS Variables - - Experimental - - Function - - Reference - - Variables - - var - - var() -browser-compat: css.properties.custom-property.var ---- -{{CSSRef}} - -[Функция](/ru/docs/Web/CSS/CSS_Functions) [CSS](/ru/docs/Web/CSS) **`var()`** используется для вставки значения [кастомного свойства](/ru/docs/Web/CSS/--*) (также известного как "CSS-переменная") в другое свойство. - -{{EmbedInteractiveExample("pages/css/var.html")}} - -Функцию `var()` нельзя использовать в именах свойств, селекторах или где-либо ещё, кроме как в качестве значений для свойств. - -## Синтаксис - -Функции в качестве первого аргумента обязательно нужно передать имя кастомного свойства, значение которого нужно получить. Необязательный второй аргумент функции используется в качестве резервного значения. Если кастомное свойство, указанное в первом аргументе, оказалось недоступным, функция вернёт второе значение. - -{{csssyntax}} - -> **Примечание:** синтаксис резервного значения, как и синтаксис кастомного свойств, допускает использование запятых. Например, `var(--foo, red, blue)` задаёт резервное значение `red, blue`; таким образом всё, что находится между первой запятой и закрывающей скобкой, считается резервным значением. - -### Значения - -- `` - - : Имя кастомного свойства, начинающиеся с двух дефисов. Кастомные свойства предназначены исключительно для разработчиков и пользователей; CSS никак не влияет на них. -- `` - - : Резервное значение кастомного свойства. Используется в случае, если кастомное свойство не определено или не может быть использовано в текущем контексте. Резервное значение может содержать любой символ, кроме некоторых спецсимволов, вроде символа новой строки, непарных закрывающих скобок (т.е. `)`, `]`, или `}`), точку с запятой или восклицательный знак. - -## Примеры - -### Использование кастомного свойства, определенного внутри :root - -```css -:root { - --main-bg-color: pink; -} - -body { - background-color: var(--main-bg-color); -} -``` - -### Кастомные свойства с резервным значением, когда свойство не было установлено - -```css -/* Резервное значение */ -/* Стили для элементов компонента: */ -.component .header { - color: var(--header-color, blue); /* header-color не существует, поэтому используется blue */ -} - -.component .text { - color: var(--text-color, black); -} - -/* Стили для самого компонента: */ -.component { - --text-color: #080; -} -``` - -## Спецификации - -{{Specifications}} - -## Поддержка браузерами - -{{Compat}} - -## Смотрите также - -- {{cssxref("env()","env(…)")}} – доступные только для чтения переменные среды, контролируемые браузером -- [Использование CSS-переменных](/ru/docs/Web/CSS/Using_CSS_custom_properties) diff --git a/files/ru/web/css/var/index.md b/files/ru/web/css/var/index.md new file mode 100644 index 0000000000..a1d35cd619 --- /dev/null +++ b/files/ru/web/css/var/index.md @@ -0,0 +1,85 @@ +--- +title: var() +slug: Web/CSS/var +tags: + - CSS + - CSS Custom Properties + - CSS Function + - CSS Variables + - Experimental + - Function + - Reference + - Variables + - var + - var() +original_slug: Web/CSS/var() +browser-compat: css.properties.custom-property.var +--- +{{CSSRef}} + +[Функция](/ru/docs/Web/CSS/CSS_Functions) [CSS](/ru/docs/Web/CSS) **`var()`** используется для вставки значения [кастомного свойства](/ru/docs/Web/CSS/--*) (также известного как "CSS-переменная") в другое свойство. + +{{EmbedInteractiveExample("pages/css/var.html")}} + +Функцию `var()` нельзя использовать в именах свойств, селекторах или где-либо ещё, кроме как в качестве значений для свойств. + +## Синтаксис + +Функции в качестве первого аргумента обязательно нужно передать имя кастомного свойства, значение которого нужно получить. Необязательный второй аргумент функции используется в качестве резервного значения. Если кастомное свойство, указанное в первом аргументе, оказалось недоступным, функция вернёт второе значение. + +{{csssyntax}} + +> **Примечание:** синтаксис резервного значения, как и синтаксис кастомного свойств, допускает использование запятых. Например, `var(--foo, red, blue)` задаёт резервное значение `red, blue`; таким образом всё, что находится между первой запятой и закрывающей скобкой, считается резервным значением. + +### Значения + +- `` + - : Имя кастомного свойства, начинающиеся с двух дефисов. Кастомные свойства предназначены исключительно для разработчиков и пользователей; CSS никак не влияет на них. +- `` + - : Резервное значение кастомного свойства. Используется в случае, если кастомное свойство не определено или не может быть использовано в текущем контексте. Резервное значение может содержать любой символ, кроме некоторых спецсимволов, вроде символа новой строки, непарных закрывающих скобок (т.е. `)`, `]`, или `}`), точку с запятой или восклицательный знак. + +## Примеры + +### Использование кастомного свойства, определенного внутри :root + +```css +:root { + --main-bg-color: pink; +} + +body { + background-color: var(--main-bg-color); +} +``` + +### Кастомные свойства с резервным значением, когда свойство не было установлено + +```css +/* Резервное значение */ +/* Стили для элементов компонента: */ +.component .header { + color: var(--header-color, blue); /* header-color не существует, поэтому используется blue */ +} + +.component .text { + color: var(--text-color, black); +} + +/* Стили для самого компонента: */ +.component { + --text-color: #080; +} +``` + +## Спецификации + +{{Specifications}} + +## Поддержка браузерами + +{{Compat}} + +## Смотрите также + +- {{cssxref("env()","env(…)")}} – доступные только для чтения переменные среды, контролируемые браузером +- [Использование CSS-переменных](/ru/docs/Web/CSS/Using_CSS_custom_properties) diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt index 5a4c050b16..6590cb09ce 100644 --- a/files/zh-cn/_redirects.txt +++ b/files/zh-cn/_redirects.txt @@ -63,7 +63,7 @@ /zh-CN/docs/CSS/animation-duration /zh-CN/docs/Web/CSS/animation-duration /zh-CN/docs/CSS/animation-fill-mode /zh-CN/docs/Web/CSS/animation-fill-mode /zh-CN/docs/CSS/animation-name /zh-CN/docs/Web/CSS/animation-name -/zh-CN/docs/CSS/attr /zh-CN/docs/Web/CSS/attr() +/zh-CN/docs/CSS/attr /zh-CN/docs/Web/CSS/attr /zh-CN/docs/CSS/background /zh-CN/docs/Web/CSS/background /zh-CN/docs/CSS/background-attachment /zh-CN/docs/Web/CSS/background-attachment /zh-CN/docs/CSS/background-clip /zh-CN/docs/Web/CSS/background-clip @@ -79,7 +79,7 @@ /zh-CN/docs/CSS/box-shadow /zh-CN/docs/Web/CSS/box-shadow /zh-CN/docs/CSS/box-sizing /zh-CN/docs/Web/CSS/box-sizing /zh-CN/docs/CSS/box_model /zh-CN/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model -/zh-CN/docs/CSS/calc /zh-CN/docs/Web/CSS/calc() +/zh-CN/docs/CSS/calc /zh-CN/docs/Web/CSS/calc /zh-CN/docs/CSS/clip /zh-CN/docs/Web/CSS/clip /zh-CN/docs/CSS/cursor /zh-CN/docs/Web/CSS/cursor /zh-CN/docs/CSS/cursor/url /zh-CN/docs/conflicting/Web/CSS/cursor @@ -1757,6 +1757,7 @@ /zh-CN/docs/Web/CSS/边框分割 /zh-CN/docs/Web/CSS/border-collapse /zh-CN/docs/Web/CSS/-moz-appearance /zh-CN/docs/Web/CSS/appearance /zh-CN/docs/Web/CSS/:blank空白伪类 /zh-CN/docs/Web/CSS/:blank +/zh-CN/docs/Web/CSS/:host() /zh-CN/docs/Web/CSS/:host_function /zh-CN/docs/Web/CSS/:matches /zh-CN/docs/Web/CSS/:is /zh-CN/docs/Web/CSS/Adjacent_sibling_selectors /zh-CN/docs/Web/CSS/Adjacent_sibling_combinator /zh-CN/docs/Web/CSS/All_About_The_Containing_Block /zh-CN/docs/Web/CSS/Containing_block @@ -1800,46 +1801,52 @@ /zh-CN/docs/Web/CSS/Understanding_z-index/Stacking_without_z-index /zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index /zh-CN/docs/Web/CSS/Understanding_z-index/The_stacking_context /zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context /zh-CN/docs/Web/CSS/Using_CSS_variables /zh-CN/docs/Web/CSS/Using_CSS_custom_properties -/zh-CN/docs/Web/CSS/attr /zh-CN/docs/Web/CSS/attr() +/zh-CN/docs/Web/CSS/attr() /zh-CN/docs/Web/CSS/attr /zh-CN/docs/Web/CSS/box_model /zh-CN/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model -/zh-CN/docs/Web/CSS/calc /zh-CN/docs/Web/CSS/calc() -/zh-CN/docs/Web/CSS/clamp /zh-CN/docs/Web/CSS/clamp() -/zh-CN/docs/Web/CSS/counter /zh-CN/docs/Web/CSS/counter() -/zh-CN/docs/Web/CSS/counters /zh-CN/docs/Web/CSS/counters() +/zh-CN/docs/Web/CSS/calc() /zh-CN/docs/Web/CSS/calc +/zh-CN/docs/Web/CSS/clamp() /zh-CN/docs/Web/CSS/clamp +/zh-CN/docs/Web/CSS/counter() /zh-CN/docs/Web/CSS/counter +/zh-CN/docs/Web/CSS/counters() /zh-CN/docs/Web/CSS/counters /zh-CN/docs/Web/CSS/cursor/url /zh-CN/docs/conflicting/Web/CSS/cursor -/zh-CN/docs/Web/CSS/element /zh-CN/docs/Web/CSS/element() -/zh-CN/docs/Web/CSS/env /zh-CN/docs/Web/CSS/env() -/zh-CN/docs/Web/CSS/filter-function/blur /zh-CN/docs/Web/CSS/filter-function/blur() -/zh-CN/docs/Web/CSS/filter-function/brightness /zh-CN/docs/Web/CSS/filter-function/brightness() -/zh-CN/docs/Web/CSS/filter-function/contrast /zh-CN/docs/Web/CSS/filter-function/contrast() -/zh-CN/docs/Web/CSS/filter-function/drop-shadow /zh-CN/docs/Web/CSS/filter-function/drop-shadow() -/zh-CN/docs/Web/CSS/filter-function/grayscale /zh-CN/docs/Web/CSS/filter-function/grayscale() -/zh-CN/docs/Web/CSS/filter-function/opacity /zh-CN/docs/Web/CSS/filter-function/opacity() +/zh-CN/docs/Web/CSS/element() /zh-CN/docs/Web/CSS/element +/zh-CN/docs/Web/CSS/env() /zh-CN/docs/Web/CSS/env +/zh-CN/docs/Web/CSS/filter-function/blur() /zh-CN/docs/Web/CSS/filter-function/blur +/zh-CN/docs/Web/CSS/filter-function/brightness() /zh-CN/docs/Web/CSS/filter-function/brightness +/zh-CN/docs/Web/CSS/filter-function/contrast() /zh-CN/docs/Web/CSS/filter-function/contrast +/zh-CN/docs/Web/CSS/filter-function/drop-shadow() /zh-CN/docs/Web/CSS/filter-function/drop-shadow +/zh-CN/docs/Web/CSS/filter-function/grayscale() /zh-CN/docs/Web/CSS/filter-function/grayscale +/zh-CN/docs/Web/CSS/filter-function/opacity() /zh-CN/docs/Web/CSS/filter-function/opacity /zh-CN/docs/Web/CSS/filter滤镜 /zh-CN/docs/Web/CSS/filter +/zh-CN/docs/Web/CSS/gradient/linear-gradient() /zh-CN/docs/Web/CSS/gradient/linear-gradient +/zh-CN/docs/Web/CSS/gradient/radial-gradient() /zh-CN/docs/Web/CSS/gradient/radial-gradient +/zh-CN/docs/Web/CSS/gradient/repeating-linear-gradient() /zh-CN/docs/Web/CSS/gradient/repeating-linear-gradient +/zh-CN/docs/Web/CSS/gradient/repeating-radial-gradient() /zh-CN/docs/Web/CSS/gradient/repeating-radial-gradient /zh-CN/docs/Web/CSS/margin_collapsing /zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing -/zh-CN/docs/Web/CSS/max /zh-CN/docs/Web/CSS/max() -/zh-CN/docs/Web/CSS/min /zh-CN/docs/Web/CSS/min() -/zh-CN/docs/Web/CSS/minmax /zh-CN/docs/Web/CSS/minmax() -/zh-CN/docs/Web/CSS/repeat /zh-CN/docs/Web/CSS/repeat() -/zh-CN/docs/Web/CSS/transform-function/matrix /zh-CN/docs/Web/CSS/transform-function/matrix() -/zh-CN/docs/Web/CSS/transform-function/matrix3d /zh-CN/docs/Web/CSS/transform-function/matrix3d() -/zh-CN/docs/Web/CSS/transform-function/perspective /zh-CN/docs/Web/CSS/transform-function/perspective() -/zh-CN/docs/Web/CSS/transform-function/rotate /zh-CN/docs/Web/CSS/transform-function/rotate() -/zh-CN/docs/Web/CSS/transform-function/rotate3d /zh-CN/docs/Web/CSS/transform-function/rotate3d() -/zh-CN/docs/Web/CSS/transform-function/rotateX /zh-CN/docs/Web/CSS/transform-function/rotateX() -/zh-CN/docs/Web/CSS/transform-function/rotateY /zh-CN/docs/Web/CSS/transform-function/rotateY() -/zh-CN/docs/Web/CSS/transform-function/rotateZ /zh-CN/docs/Web/CSS/transform-function/rotateZ() -/zh-CN/docs/Web/CSS/transform-function/scale /zh-CN/docs/Web/CSS/transform-function/scale() -/zh-CN/docs/Web/CSS/transform-function/scaleX /zh-CN/docs/Web/CSS/transform-function/scaleX() -/zh-CN/docs/Web/CSS/transform-function/scaleY /zh-CN/docs/Web/CSS/transform-function/scaleY() -/zh-CN/docs/Web/CSS/transform-function/skew /zh-CN/docs/Web/CSS/transform-function/skew() -/zh-CN/docs/Web/CSS/transform-function/skewX /zh-CN/docs/Web/CSS/transform-function/skewX() -/zh-CN/docs/Web/CSS/transform-function/skewY /zh-CN/docs/Web/CSS/transform-function/skewY() -/zh-CN/docs/Web/CSS/transform-function/translate /zh-CN/docs/Web/CSS/transform-function/translate() -/zh-CN/docs/Web/CSS/transform-function/translate3d /zh-CN/docs/Web/CSS/transform-function/translate3d() -/zh-CN/docs/Web/CSS/transform-function/translateY /zh-CN/docs/Web/CSS/transform-function/translateY() -/zh-CN/docs/Web/CSS/url /zh-CN/docs/Web/CSS/url() -/zh-CN/docs/Web/CSS/var /zh-CN/docs/Web/CSS/var() +/zh-CN/docs/Web/CSS/max() /zh-CN/docs/Web/CSS/max +/zh-CN/docs/Web/CSS/min() /zh-CN/docs/Web/CSS/min +/zh-CN/docs/Web/CSS/minmax() /zh-CN/docs/Web/CSS/minmax +/zh-CN/docs/Web/CSS/repeat() /zh-CN/docs/Web/CSS/repeat +/zh-CN/docs/Web/CSS/transform-function/matrix() /zh-CN/docs/Web/CSS/transform-function/matrix +/zh-CN/docs/Web/CSS/transform-function/matrix3d() /zh-CN/docs/Web/CSS/transform-function/matrix3d +/zh-CN/docs/Web/CSS/transform-function/perspective() /zh-CN/docs/Web/CSS/transform-function/perspective +/zh-CN/docs/Web/CSS/transform-function/rotate() /zh-CN/docs/Web/CSS/transform-function/rotate +/zh-CN/docs/Web/CSS/transform-function/rotate3d() /zh-CN/docs/Web/CSS/transform-function/rotate3d +/zh-CN/docs/Web/CSS/transform-function/rotateX() /zh-CN/docs/Web/CSS/transform-function/rotateX +/zh-CN/docs/Web/CSS/transform-function/rotateY() /zh-CN/docs/Web/CSS/transform-function/rotateY +/zh-CN/docs/Web/CSS/transform-function/rotateZ() /zh-CN/docs/Web/CSS/transform-function/rotateZ +/zh-CN/docs/Web/CSS/transform-function/scale() /zh-CN/docs/Web/CSS/transform-function/scale +/zh-CN/docs/Web/CSS/transform-function/scaleX() /zh-CN/docs/Web/CSS/transform-function/scaleX +/zh-CN/docs/Web/CSS/transform-function/scaleY() /zh-CN/docs/Web/CSS/transform-function/scaleY +/zh-CN/docs/Web/CSS/transform-function/skew() /zh-CN/docs/Web/CSS/transform-function/skew +/zh-CN/docs/Web/CSS/transform-function/skewX() /zh-CN/docs/Web/CSS/transform-function/skewX +/zh-CN/docs/Web/CSS/transform-function/skewY /zh-CN/docs/conflicting/Web/CSS/transform-function/skewX +/zh-CN/docs/Web/CSS/transform-function/skewY() /zh-CN/docs/conflicting/Web/CSS/transform-function/skewX +/zh-CN/docs/Web/CSS/transform-function/translate() /zh-CN/docs/Web/CSS/transform-function/translate +/zh-CN/docs/Web/CSS/transform-function/translate3d() /zh-CN/docs/Web/CSS/transform-function/translate3d +/zh-CN/docs/Web/CSS/transform-function/translateX() /zh-CN/docs/Web/CSS/transform-function/translateX +/zh-CN/docs/Web/CSS/transform-function/translateY() /zh-CN/docs/Web/CSS/transform-function/translateY +/zh-CN/docs/Web/CSS/url() /zh-CN/docs/Web/CSS/url +/zh-CN/docs/Web/CSS/var() /zh-CN/docs/Web/CSS/var /zh-CN/docs/Web/CSS/word-wrap /zh-CN/docs/Web/CSS/overflow-wrap /zh-CN/docs/Web/CSS/偏移 /zh-CN/docs/Web/CSS/offset /zh-CN/docs/Web/CSS/动画 /zh-CN/docs/Web/CSS/animation diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json index 54f83cc3f3..e0f33667df 100644 --- a/files/zh-cn/_wikihistory.json +++ b/files/zh-cn/_wikihistory.json @@ -25143,7 +25143,13 @@ "zhangchen" ] }, - "Web/CSS/:host()": { + "Web/CSS/:host-context()": { + "modified": "2020-10-15T22:22:18.002Z", + "contributors": [ + "jhjocelyn" + ] + }, + "Web/CSS/:host_function": { "modified": "2020-10-15T22:16:54.122Z", "contributors": [ "karma2014", @@ -25151,12 +25157,6 @@ "764777472" ] }, - "Web/CSS/:host-context()": { - "modified": "2020-10-15T22:22:18.002Z", - "contributors": [ - "jhjocelyn" - ] - }, "Web/CSS/:hover": { "modified": "2019-03-23T23:09:30.132Z", "contributors": [ @@ -27243,7 +27243,7 @@ "jcplus" ] }, - "Web/CSS/attr()": { + "Web/CSS/attr": { "modified": "2020-11-04T08:52:10.558Z", "contributors": [ "chrisdavidmills", @@ -27872,7 +27872,7 @@ "SheltonDong" ] }, - "Web/CSS/calc()": { + "Web/CSS/calc": { "modified": "2020-11-04T09:08:38.821Z", "contributors": [ "chrisdavidmills", @@ -27910,7 +27910,7 @@ "ziyunfei" ] }, - "Web/CSS/clamp()": { + "Web/CSS/clamp": { "modified": "2020-11-05T09:58:52.297Z", "contributors": [ "chrisdavidmills", @@ -28112,7 +28112,7 @@ "Darrel.Hsu" ] }, - "Web/CSS/counter()": { + "Web/CSS/counter": { "modified": "2020-11-09T07:18:40.908Z", "contributors": [ "chrisdavidmills", @@ -28139,7 +28139,7 @@ "FredWe" ] }, - "Web/CSS/counters()": { + "Web/CSS/counters": { "modified": "2020-11-09T07:19:47.276Z", "contributors": [ "chrisdavidmills", @@ -28246,7 +28246,7 @@ "ran" ] }, - "Web/CSS/element()": { + "Web/CSS/element": { "modified": "2020-11-10T11:07:35.733Z", "contributors": [ "chrisdavidmills", @@ -28262,7 +28262,7 @@ "alongite" ] }, - "Web/CSS/env()": { + "Web/CSS/env": { "modified": "2020-11-10T11:12:04.536Z", "contributors": [ "chrisdavidmills", @@ -28294,7 +28294,7 @@ "mfluehr" ] }, - "Web/CSS/filter-function/blur()": { + "Web/CSS/filter-function/blur": { "modified": "2020-11-05T09:45:54.071Z", "contributors": [ "chrisdavidmills", @@ -28302,7 +28302,7 @@ "cheetooo" ] }, - "Web/CSS/filter-function/brightness()": { + "Web/CSS/filter-function/brightness": { "modified": "2020-11-05T09:57:28.957Z", "contributors": [ "chrisdavidmills", @@ -28310,14 +28310,14 @@ "cheetooo" ] }, - "Web/CSS/filter-function/contrast()": { + "Web/CSS/filter-function/contrast": { "modified": "2020-11-09T07:21:22.300Z", "contributors": [ "chrisdavidmills", "shirlay-Chang" ] }, - "Web/CSS/filter-function/drop-shadow()": { + "Web/CSS/filter-function/drop-shadow": { "modified": "2020-11-10T10:59:15.589Z", "contributors": [ "chrisdavidmills", @@ -28325,7 +28325,7 @@ "deajax" ] }, - "Web/CSS/filter-function/grayscale()": { + "Web/CSS/filter-function/grayscale": { "modified": "2020-11-10T11:21:16.375Z", "contributors": [ "chrisdavidmills", @@ -28333,7 +28333,7 @@ "MichealXie" ] }, - "Web/CSS/filter-function/opacity()": { + "Web/CSS/filter-function/opacity": { "modified": "2020-11-16T09:08:21.720Z", "contributors": [ "chrisdavidmills", @@ -29177,7 +29177,7 @@ "smilewalker" ] }, - "Web/CSS/max()": { + "Web/CSS/max": { "modified": "2020-11-16T09:03:04.400Z", "contributors": [ "chrisdavidmills", @@ -29199,7 +29199,7 @@ "monsuns" ] }, - "Web/CSS/min()": { + "Web/CSS/min": { "modified": "2020-11-16T09:04:41.929Z", "contributors": [ "chrisdavidmills", @@ -29226,7 +29226,7 @@ "sunnylost" ] }, - "Web/CSS/minmax()": { + "Web/CSS/minmax": { "modified": "2020-11-16T09:06:57.403Z", "contributors": [ "chrisdavidmills", @@ -29637,7 +29637,7 @@ "BKHK" ] }, - "Web/CSS/repeat()": { + "Web/CSS/repeat": { "modified": "2020-11-18T14:44:47.276Z", "contributors": [ "chrisdavidmills", @@ -30064,7 +30064,7 @@ "FredWe" ] }, - "Web/CSS/transform-function/matrix()": { + "Web/CSS/transform-function/matrix": { "modified": "2020-11-16T09:00:25.677Z", "contributors": [ "chrisdavidmills", @@ -30077,21 +30077,21 @@ "tonnylyz" ] }, - "Web/CSS/transform-function/matrix3d()": { + "Web/CSS/transform-function/matrix3d": { "modified": "2020-11-16T09:01:45.264Z", "contributors": [ "chrisdavidmills", "mdn_idealist" ] }, - "Web/CSS/transform-function/perspective()": { + "Web/CSS/transform-function/perspective": { "modified": "2020-11-16T09:11:13.696Z", "contributors": [ "chrisdavidmills", "eeeeeeeason" ] }, - "Web/CSS/transform-function/rotate()": { + "Web/CSS/transform-function/rotate": { "modified": "2020-11-19T16:06:30.046Z", "contributors": [ "chrisdavidmills", @@ -30101,7 +30101,7 @@ "FlowingRiver" ] }, - "Web/CSS/transform-function/rotate3d()": { + "Web/CSS/transform-function/rotate3d": { "modified": "2020-11-19T16:07:52.729Z", "contributors": [ "chrisdavidmills", @@ -30113,28 +30113,28 @@ "Serifx" ] }, - "Web/CSS/transform-function/rotateX()": { + "Web/CSS/transform-function/rotateX": { "modified": "2020-11-19T16:09:23.631Z", "contributors": [ "chrisdavidmills", "CharCat" ] }, - "Web/CSS/transform-function/rotateY()": { + "Web/CSS/transform-function/rotateY": { "modified": "2020-11-19T16:10:17.879Z", "contributors": [ "chrisdavidmills", "CharCat" ] }, - "Web/CSS/transform-function/rotateZ()": { + "Web/CSS/transform-function/rotateZ": { "modified": "2020-11-30T10:07:54.353Z", "contributors": [ "chrisdavidmills", "CharCat" ] }, - "Web/CSS/transform-function/scale()": { + "Web/CSS/transform-function/scale": { "modified": "2020-11-30T10:16:03.265Z", "contributors": [ "chrisdavidmills", @@ -30142,21 +30142,21 @@ "Jack-Q" ] }, - "Web/CSS/transform-function/scaleX()": { + "Web/CSS/transform-function/scaleX": { "modified": "2020-11-30T10:21:00.840Z", "contributors": [ "chrisdavidmills", "xgqfrms-GitHub" ] }, - "Web/CSS/transform-function/scaleY()": { + "Web/CSS/transform-function/scaleY": { "modified": "2020-11-30T10:22:06.571Z", "contributors": [ "chrisdavidmills", "xgqfrms" ] }, - "Web/CSS/transform-function/skew()": { + "Web/CSS/transform-function/skew": { "modified": "2020-11-30T10:26:15.757Z", "contributors": [ "chrisdavidmills", @@ -30165,29 +30165,21 @@ "fr1ee" ] }, - "Web/CSS/transform-function/skewX()": { + "Web/CSS/transform-function/skewX": { "modified": "2020-11-30T10:27:30.549Z", "contributors": [ "chrisdavidmills", "CharCat" ] }, - "Web/CSS/transform-function/skewY()": { - "modified": "2020-11-30T10:28:32.252Z", - "contributors": [ - "chrisdavidmills", - "CharCat", - "Kuichen" - ] - }, - "Web/CSS/transform-function/translate()": { + "Web/CSS/transform-function/translate": { "modified": "2020-11-30T10:30:52.319Z", "contributors": [ "chrisdavidmills", "jiang-hr" ] }, - "Web/CSS/transform-function/translate3d()": { + "Web/CSS/transform-function/translate3d": { "modified": "2020-11-30T12:59:28.646Z", "contributors": [ "chrisdavidmills", @@ -30198,7 +30190,7 @@ "zxk7516" ] }, - "Web/CSS/transform-function/translateY()": { + "Web/CSS/transform-function/translateY": { "modified": "2020-11-30T13:01:20.573Z", "contributors": [ "chrisdavidmills", @@ -30308,7 +30300,7 @@ "LiNengNeng" ] }, - "Web/CSS/url()": { + "Web/CSS/url": { "modified": "2019-03-23T22:25:44.664Z", "contributors": [ "zhyupe" @@ -30336,7 +30328,7 @@ "MrFish" ] }, - "Web/CSS/var()": { + "Web/CSS/var": { "modified": "2020-11-04T09:10:48.035Z", "contributors": [ "chrisdavidmills", @@ -47514,6 +47506,14 @@ "ziyunfei" ] }, + "conflicting/Web/CSS/transform-function/skewX": { + "modified": "2020-11-30T10:28:32.252Z", + "contributors": [ + "chrisdavidmills", + "CharCat", + "Kuichen" + ] + }, "conflicting/Web/Guide": { "modified": "2019-03-24T00:05:29.399Z", "contributors": [ diff --git a/files/zh-cn/conflicting/web/css/transform-function/skewx/index.html b/files/zh-cn/conflicting/web/css/transform-function/skewx/index.html new file mode 100644 index 0000000000..96448a9d02 --- /dev/null +++ b/files/zh-cn/conflicting/web/css/transform-function/skewx/index.html @@ -0,0 +1,131 @@ +--- +title: skewY() +slug: conflicting/Web/CSS/transform-function/skewX +translation_of: Web/CSS/transform-function/skewY() +original_slug: Web/CSS/transform-function/skewY() +--- +
    +

    {{CSSRef}}

    + +

    skewY() 函数定义了一个转换，该转换将元素倾斜到二维平面上的垂直方向。它的结果是一个{{cssxref("<transform-function>")}}数据类型。

    + +

    {{EmbedInteractiveExample("pages/css/function-skewY.html")}}

    + +

    这种转换是一种剪切映射(横切)，它在水平和垂直方向上将单元内的每个点扭曲一定的角度。每个点的坐标根据指定的角度以及到原点的距离，进行成比例的值调整；因此，一个点离原点越远，其增加的值就越大。

    +
    + +

    语法

    + +
    skewY(a)
+
    + +

    参数值

    + +
    +
    a
    +
    + +
    +
    a 是一个 {{cssxref("<angle>")}}，表示元素沿纵坐标扭曲的角度。
    +
    + + + + + + + + + + + + + + + + + + + + + +
    实坐标系 ℝ2齐次坐标系ℝℙ2实坐标系 ℝ3齐次坐标系ℝℙ3
    +

    1           0

    + +

    tan(ax)  1

    +     		+

    1                0     0

    + +

    tan(ax)      1     0

    + +

    0                 0    1 

    +     		+

    1             0        0

    + +

    tan(ax)   1        0

    + +

    0              0       1

    +     		+

    1            0  0  0

    + +

    tan(ax) 1   0  0

    + +

    0            0  1  0

    + +

    0            0  0  1

    +
    [1 tan(a) 0 1 0 0]
    + +

    示例

    + +

    HTML

    + +
    <p>foo</p>
+<p class="transformed">bar</p>
    + +

    CSS

    + +
    p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformed {
+  transform: skewY(40deg);
+  background-color: blue;
+}
+
    + +

    结果

    + +

    {{EmbedLiveSample("示例","100%","250")}}

    + +

    规范

    + + + + + + + + + + + + + + + + +
    SpecificationStatusComment
    {{SpecName("CSS3 Transforms", "#funcdef-transform-skewy", "skewY()")}}{{Spec2("CSS3 Transforms")}}Initial definition
    + +

    浏览器兼容

    + +

    有关兼容性信息，请参阅 <transform-function> 的数据类型。

    + +

    另请参阅

    + +
      +
    • {{cssxref("transform")}}
      • +
    • {{cssxref("<transform-function>")}}
      • +
    diff --git a/files/zh-cn/web/css/_colon_host()/index.html b/files/zh-cn/web/css/_colon_host()/index.html deleted file mode 100644 index 5b67042ed0..0000000000 --- a/files/zh-cn/web/css/_colon_host()/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: ':host()' -slug: 'Web/CSS/:host()' -tags: - - ':host()' - - CSS - - Layout - - Pseudo-class - - RTeference - - Web -translation_of: 'Web/CSS/:host()' ---- -
    {{seecompattable}}{{CSSRef}} 
    - -
    CSS 伪类函数 :host() 选择包含使用这段 CSS 的 Shadow DOM 的影子宿主（这样就可以从 Shadow DOM 中选择包括它的自定义元素）——但前提是该函数的参数与选择的阴影宿主相匹配。
    - -

    最简单的用法是仅将类名放在某些自定义元素实例上，然后将相关的类选择器作为函数参数包含在内。不能将它与后代选择器表达式一起使用，以仅选择特定祖先内部的自定义元素的实例。这是 {{cssxref(":host-context()")}} 的作用。

    - -
    -

    注意：在shadow DOM之外使用时，这没有任何效果。

    -
    - -
    /* 选择阴影根元素，仅当它与选择器参数匹配 */
- :host(.special-custom-element) {
-   font-weight: bold;
- }
    - -

    句法

    - -{{csssyntax}} - -

    例子

    - - - -

    以下片段取自我们的宿主选择器示例（也可以观看在线演示）。

    - -

    在这个例子中，有一个简单的自定义元素 <context-span> 可以用它包裹文本：

    - -
    <h1>Host selectors <a href="#"><context-span>example</context-span></a></h1>
    - -

    在元素的构造函数中，创建style和span元素，填充span自定义元素的内容，并style使用一些 CSS 规则填充元素：

    - -
    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; }';
    - -

    :host(.footer) { color : red; } 规则为文档中所有在其上设置了 footer 类的<context-span> 元素实例（此实例中的影子宿主）设置样式——使用它来为 {{htmlelement("footer")}} 中的元素提供实例一种特殊的颜色。

    - -

    产品规格

    - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{ SpecName('CSS Scope', '#host-selector', ':host()') }}{{ Spec2('CSS Scope') }}Initial definition.
    - -

    浏览器兼容性

    - -

    {{Compat("css.selectors.hostfunction")}}

    - -

    也可以看看

    - -
      -
    • Web components
      • -
    • {{cssxref(":host-context()")}}
      • -
    • {{cssxref(":host")}}
      • -
    diff --git a/files/zh-cn/web/css/_colon_host_function/index.html b/files/zh-cn/web/css/_colon_host_function/index.html new file mode 100644 index 0000000000..034de46da5 --- /dev/null +++ b/files/zh-cn/web/css/_colon_host_function/index.html @@ -0,0 +1,91 @@ +--- +title: ':host()' +slug: Web/CSS/:host_function +tags: + - ':host()' + - CSS + - Layout + - Pseudo-class + - RTeference + - Web +translation_of: Web/CSS/:host() +original_slug: Web/CSS/:host() +--- +
    {{seecompattable}}{{CSSRef}} 
    + +
    CSS 伪类函数 :host() 选择包含使用这段 CSS 的 Shadow DOM 的影子宿主（这样就可以从 Shadow DOM 中选择包括它的自定义元素）——但前提是该函数的参数与选择的阴影宿主相匹配。
    + +

    最简单的用法是仅将类名放在某些自定义元素实例上，然后将相关的类选择器作为函数参数包含在内。不能将它与后代选择器表达式一起使用，以仅选择特定祖先内部的自定义元素的实例。这是 {{cssxref(":host-context()")}} 的作用。

    + +
    +

    注意：在shadow DOM之外使用时，这没有任何效果。

    +
    + +
    /* 选择阴影根元素，仅当它与选择器参数匹配 */
+ :host(.special-custom-element) {
+   font-weight: bold;
+ }
    + +

    句法

    + +{{csssyntax}} + +

    例子

    + + + +

    以下片段取自我们的宿主选择器示例（也可以观看在线演示）。

    + +

    在这个例子中，有一个简单的自定义元素 <context-span> 可以用它包裹文本：

    + +
    <h1>Host selectors <a href="#"><context-span>example</context-span></a></h1>
    + +

    在元素的构造函数中，创建style和span元素，填充span自定义元素的内容，并style使用一些 CSS 规则填充元素：

    + +
    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; }';
    + +

    :host(.footer) { color : red; } 规则为文档中所有在其上设置了 footer 类的<context-span> 元素实例（此实例中的影子宿主）设置样式——使用它来为 {{htmlelement("footer")}} 中的元素提供实例一种特殊的颜色。

    + +

    产品规格

    + + + + + + + + + + + + + + + + +
    SpecificationStatusComment
    {{ SpecName('CSS Scope', '#host-selector', ':host()') }}{{ Spec2('CSS Scope') }}Initial definition.
    + +

    浏览器兼容性

    + +

    {{Compat("css.selectors.hostfunction")}}

    + +

    也可以看看

    + +
      +
    • Web components
      • +
    • {{cssxref(":host-context()")}}
      • +
    • {{cssxref(":host")}}
      • +
    diff --git a/files/zh-cn/web/css/attr()/index.html b/files/zh-cn/web/css/attr()/index.html deleted file mode 100644 index 57df054434..0000000000 --- a/files/zh-cn/web/css/attr()/index.html +++ /dev/null @@ -1,303 +0,0 @@ ---- -title: attr -slug: Web/CSS/attr() -tags: - - CSS - - CSS Function - - attr Function -translation_of: Web/CSS/attr() ---- -
    -
    {{ CSSRef() }}
    -
    - -

    概述

    - -
    -

    注意:  attr() 理论上能用于所有的CSS属性但目前支持的仅有伪元素的 {{CSSxRef("content")}} 属性，其他的属性和高级特性目前是实验性的

    - -

    译者注：如果发现浏览器兼容表里attr()的高级用法依旧没有良好的支持的话，本文大部分内容都是纸上谈兵

    -
    - -

    CSS表达式 attr() 用来获取选择到的元素的某一HTML属性值，并用于其样式。它也可以用于伪元素，属性值采用伪元素所依附的元素。

    - -

    attr() 表达式可以用于任何CSS属性。 {{ experimental_inline() }}

    - -

    用法

    - -
    语法: attr( attribute-name <type-or-unit>? [, <fallback> ]? )
-
    - -

    解释

    - -
    -
    attribute-name
    -
    是CSS所引用的HTML属性名称。
    -
    <type-or-unit>
    -
    表示所引用的属性值的单位。如果该单位相对于所引用的属性值不合法，那么attr()表达式也不合法。若省略，则默认值为string。其合法值包括： - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    关键字类型备注默认值
    string{{cssxref("<string>")}}属性值将被解析为 {{cssxref("<string>")}}空字符串
    color {{ experimental_inline() }}{{cssxref("<color>")}}属性值将被解析为#xxx、#xxxxxx或关键字的形式，且必须为合法CSS {{cssxref("<string>")}} 值。
    - 前缀与后缀空格将被截掉。    		当前颜色
    url {{ experimental_inline() }}{{ cssxref("<uri>") }}属性值将被解析为可用于url()函数的字符串。
    - 相对URL是根据HTML文档的路径解析，而不是样式文件所在的路径。
    - 前缀与后缀空格将被截掉。    		URL about:invalid，表示资源不存在。
    integer {{ experimental_inline() }}{{cssxref("<integer>")}}属性值将被解析为CSS {{cssxref("<integer>")}}。若不是合法值（不是整数或超出CSS属性规定的数字范围），则使用默认值。
    - 前缀与后缀空格将被截掉。    		0，或该属性允许的最小值（如果0是不合法的值）。
    number {{ experimental_inline() }}{{cssxref("<number>")}}属性值将被解析为CSS {{cssxref("<number>")}}。 若不是合法值（不是数字或超出CSS属性规定的数字范围），则使用默认值。
    - 前缀与后缀空格将被截掉。    		0，或该属性允许的最小值（如果0是不合法的值）。
    length {{ experimental_inline() }}{{cssxref("<length>")}}属性值将被解析为CSS {{cssxref("<length>")}}，带单位，比如 12.5em。 若不是合法值（不是长度值或超出CSS属性规定的范围），则使用默认值。
    - 若属性值是一个相对长度， attr()会将其计算为绝对长度。
    - 前缀与后缀空格将被截掉。    		0，或该属性允许的最小值（如果0是不合法的值）。
    em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, or pc {{ experimental_inline() }}{{cssxref("<length>")}} -

    属性值将被解析为CSS {{cssxref("<number>")}}，不带单位，如 12.5，并被解释为带有所规定单位的 {{cssxref("<length>")}} 值。若不是合法值（不是长度值或超出CSS属性规定的范围），则使用默认值。
    - 若属性值是一个相对长度， attr()会将其计算为绝对长度。
    - 前缀与后缀空格将被截掉。

    -     		0，或该属性允许的最小值（如果0是不合法的值）。
    angle {{ experimental_inline() }}{{ cssxref("<angle>") }}属性值将被解析为CSS {{ cssxref("<angle>") }}，带单位，如30.5deg。若不是合法值（不是角度值或超出CSS属性规定的范围），则使用默认值。
    - 前缀与后缀空格将被截掉。    		0deg，或该属性允许的最小值（如果0deg是不合法的值）。
    deg, grad, rad {{ experimental_inline() }}{{ cssxref("<angle>") }}属性值将被解析为CSS {{cssxref("<number>")}}，不带单位，如12.5)，并被解释为带有所规定单位的 {{ cssxref("<angle>") }} 值。若不是合法值（不是角度值或超出CSS属性规定的范围），则使用默认值。
    - 前缀与后缀空格将被截掉。    		0deg，或该属性允许的最小值（如果0deg是不合法的值）。
    time {{ experimental_inline() }}{{cssxref("<time>")}}属性值将被解析为CSS {{cssxref("<time>")}}，带单位，如30.5ms。若不是合法值（不是时间值或超出CSS属性规定的范围），则使用默认值。
    - 前缀与后缀空格将被截掉。    		0s，或该属性允许的最小值（如果0s是不合法的值）。
    s, ms {{ experimental_inline() }}{{cssxref("<time>")}}属性值将被解析为CSS {{cssxref("<time>")}}，不带单位，如30.5，并被解释为带有所规定单位的 {{cssxref("<time>")}} 值。。若不是合法值（不是时间值或超出CSS属性规定的范围），则使用默认值。
    - 前缀与后缀空格将被截掉。    		0s，或该属性允许的最小值（如果0s是不合法的值）。
    frequency {{ experimental_inline() }}{{cssxref("<frequency>")}}属性值将被解析为CSS {{cssxref("<frequency>")}}，带单位，如12.5kHz)。若不是合法值（不是频率值或超出CSS属性规定的范围），则使用默认值。
    - 前缀与后缀空格将被截掉。    		0Hz，或该属性允许的最小值（如果0Hz是不合法的值）。
    Hz, kHz {{ experimental_inline() }}{{cssxref("<frequency>")}}属性值将被解析为CSS {{cssxref("<frequency>")}}，不带单位，如12.5)，并被解释为带有所规定单位的{{cssxref("<frequency>")}}值。若不是合法值（不是频率值或超出CSS属性规定的范围），则使用默认值。
    - 前缀与后缀空格将被截掉。    		0Hz，或该属性允许的最小值（如果0Hz是不合法的值）。
    % {{ experimental_inline() }}{{cssxref("<percentage>")}}属性值将被解析为CSS {{cssxref("<number>")}}，不带单位，如12.5)，并被解释为带有所规定单位的 {{cssxref("<percentage>")}}值。若不是合法值（不是数字或超出CSS属性规定的范围），则使用默认值。
    - 若属性值用作长度，attr()将其计算为绝对长度。
    - 前缀与后缀空格将被截掉。    		0%，或该属性允许的最小值（如果0%是不合法的值）。
    -
    -
    <fallback>
    -
    如果HTML元素缺少所规定的属性值或属性值不合法，则使用fallback值。该值必须合法，且不能包含另一个attr()表达式。如果attr()不是所在CSS属性值的唯一值，其<fallback>值必须为<type-or-unit>所指定的类型，否则CSS会使用相应<type-or-unit>定义的默认值（见上表）。
    -
    - -

    示例

    - -
    p:before {
-    content:attr(data-foo) " ";
-}
-
    - -
    <p data-foo="hello">world</p>
-
    - -

    结果

    - -

    hello world

    - - - -

    示例1

    - -

    HTML

    - -
    <p data-foo="hello">world</p>
    - -

    CSS

    - -
    [data-foo]::before {
-  content: attr(data-foo) " ";
-}
    - -

    Result

    - -

    {{EmbedLiveSample("示例1", "100%", 50)}}

    - - - -

    示例2

    - -

    {{SeeCompatTable}}

    - -

    HTML

    - -
    <div class="background" data-background="lime">颜色应该是红色而不是绿色因为浏览器并不支持attr()的高级用法</div>
    - -

    CSS

    - -
    .background {
-  height: 100vh;
-}
    - -
    .background {
-  background-color: red;
-}
-
-.background[data-background] {
-  background-color: attr(data-background color, red);
-}
    - -

    {{EmbedLiveSample("示例2", "100%", 50)}}

    - - - - - -

    规范

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    No changes.
    {{SpecName("CSS3 Values", "#attr-notation", "attr()")}}{{Spec2("CSS3 Values")}} -

    Added two optional parameters;
    - can be used on all properties;
    - may return values other than {{CSSxRef("<string>")}}.

    - These changes are experimental and may be dropped during the CR phase if browser support is too small.
    {{SpecName("CSS2.1", "generate.html#x18", "attr()")}}{{Spec2("CSS2.1")}}Limited to the {{CSSxRef("content")}} property;
    - always returns a {{CSSxRef("<string>")}}.
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    规范状态备注
    {{SpecName("CSS4 Values", "#attr-notation", "attr()")}}{{Spec2("CSS4 Values")}}无变化
    {{ SpecName('CSS3 Values', '#attr', 'attr()') }}{{ Spec2('CSS3 Values') }}增加两个可选参数；且可以用于所有属性；且可以返回除{{cssxref("<string>")}}之外的其他类型。这些改变是实验性质的{{ experimental_inline() }}，且如果浏览器支持不足，可能在CR阶段被丢弃。
    {{ SpecName('CSS2.1', 'generate.html#x18', 'attr()') }}{{ Spec2('CSS2.1') }}限制用在 {{ cssxref("content") }} 属性；且必须返回{{cssxref("<string>")}}}。
    - -

    浏览器兼容性

    - -

    {{Compat("css.types.attr")}}

    - -

    参见

    - - diff --git a/files/zh-cn/web/css/attr/index.html b/files/zh-cn/web/css/attr/index.html new file mode 100644 index 0000000000..1391a4e599 --- /dev/null +++ b/files/zh-cn/web/css/attr/index.html @@ -0,0 +1,304 @@ +--- +title: attr +slug: Web/CSS/attr +tags: + - CSS + - CSS Function + - attr Function +translation_of: Web/CSS/attr() +original_slug: Web/CSS/attr() +--- +
    +
    {{ CSSRef() }}
    +
    + +

    概述

    + +
    +

    注意:  attr() 理论上能用于所有的CSS属性但目前支持的仅有伪元素的 {{CSSxRef("content")}} 属性，其他的属性和高级特性目前是实验性的

    + +

    译者注：如果发现浏览器兼容表里attr()的高级用法依旧没有良好的支持的话，本文大部分内容都是纸上谈兵

    +
    + +

    CSS表达式 attr() 用来获取选择到的元素的某一HTML属性值，并用于其样式。它也可以用于伪元素，属性值采用伪元素所依附的元素。

    + +

    attr() 表达式可以用于任何CSS属性。 {{ experimental_inline() }}

    + +

    用法

    + +
    语法: attr( attribute-name <type-or-unit>? [, <fallback> ]? )
+
    + +

    解释

    + +
    +
    attribute-name
    +
    是CSS所引用的HTML属性名称。
    +
    <type-or-unit>
    +
    表示所引用的属性值的单位。如果该单位相对于所引用的属性值不合法，那么attr()表达式也不合法。若省略，则默认值为string。其合法值包括： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    关键字类型备注默认值
    string{{cssxref("<string>")}}属性值将被解析为 {{cssxref("<string>")}}空字符串
    color {{ experimental_inline() }}{{cssxref("<color>")}}属性值将被解析为#xxx、#xxxxxx或关键字的形式，且必须为合法CSS {{cssxref("<string>")}} 值。
    + 前缀与后缀空格将被截掉。    		当前颜色
    url {{ experimental_inline() }}{{ cssxref("<uri>") }}属性值将被解析为可用于url()函数的字符串。
    + 相对URL是根据HTML文档的路径解析，而不是样式文件所在的路径。
    + 前缀与后缀空格将被截掉。    		URL about:invalid，表示资源不存在。
    integer {{ experimental_inline() }}{{cssxref("<integer>")}}属性值将被解析为CSS {{cssxref("<integer>")}}。若不是合法值（不是整数或超出CSS属性规定的数字范围），则使用默认值。
    + 前缀与后缀空格将被截掉。    		0，或该属性允许的最小值（如果0是不合法的值）。
    number {{ experimental_inline() }}{{cssxref("<number>")}}属性值将被解析为CSS {{cssxref("<number>")}}。 若不是合法值（不是数字或超出CSS属性规定的数字范围），则使用默认值。
    + 前缀与后缀空格将被截掉。    		0，或该属性允许的最小值（如果0是不合法的值）。
    length {{ experimental_inline() }}{{cssxref("<length>")}}属性值将被解析为CSS {{cssxref("<length>")}}，带单位，比如 12.5em。 若不是合法值（不是长度值或超出CSS属性规定的范围），则使用默认值。
    + 若属性值是一个相对长度， attr()会将其计算为绝对长度。
    + 前缀与后缀空格将被截掉。    		0，或该属性允许的最小值（如果0是不合法的值）。
    em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, or pc {{ experimental_inline() }}{{cssxref("<length>")}} +

    属性值将被解析为CSS {{cssxref("<number>")}}，不带单位，如 12.5，并被解释为带有所规定单位的 {{cssxref("<length>")}} 值。若不是合法值（不是长度值或超出CSS属性规定的范围），则使用默认值。
    + 若属性值是一个相对长度， attr()会将其计算为绝对长度。
    + 前缀与后缀空格将被截掉。

    +     		0，或该属性允许的最小值（如果0是不合法的值）。
    angle {{ experimental_inline() }}{{ cssxref("<angle>") }}属性值将被解析为CSS {{ cssxref("<angle>") }}，带单位，如30.5deg。若不是合法值（不是角度值或超出CSS属性规定的范围），则使用默认值。
    + 前缀与后缀空格将被截掉。    		0deg，或该属性允许的最小值（如果0deg是不合法的值）。
    deg, grad, rad {{ experimental_inline() }}{{ cssxref("<angle>") }}属性值将被解析为CSS {{cssxref("<number>")}}，不带单位，如12.5)，并被解释为带有所规定单位的 {{ cssxref("<angle>") }} 值。若不是合法值（不是角度值或超出CSS属性规定的范围），则使用默认值。
    + 前缀与后缀空格将被截掉。    		0deg，或该属性允许的最小值（如果0deg是不合法的值）。
    time {{ experimental_inline() }}{{cssxref("<time>")}}属性值将被解析为CSS {{cssxref("<time>")}}，带单位，如30.5ms。若不是合法值（不是时间值或超出CSS属性规定的范围），则使用默认值。
    + 前缀与后缀空格将被截掉。    		0s，或该属性允许的最小值（如果0s是不合法的值）。
    s, ms {{ experimental_inline() }}{{cssxref("<time>")}}属性值将被解析为CSS {{cssxref("<time>")}}，不带单位，如30.5，并被解释为带有所规定单位的 {{cssxref("<time>")}} 值。。若不是合法值（不是时间值或超出CSS属性规定的范围），则使用默认值。
    + 前缀与后缀空格将被截掉。    		0s，或该属性允许的最小值（如果0s是不合法的值）。
    frequency {{ experimental_inline() }}{{cssxref("<frequency>")}}属性值将被解析为CSS {{cssxref("<frequency>")}}，带单位，如12.5kHz)。若不是合法值（不是频率值或超出CSS属性规定的范围），则使用默认值。
    + 前缀与后缀空格将被截掉。    		0Hz，或该属性允许的最小值（如果0Hz是不合法的值）。
    Hz, kHz {{ experimental_inline() }}{{cssxref("<frequency>")}}属性值将被解析为CSS {{cssxref("<frequency>")}}，不带单位，如12.5)，并被解释为带有所规定单位的{{cssxref("<frequency>")}}值。若不是合法值（不是频率值或超出CSS属性规定的范围），则使用默认值。
    + 前缀与后缀空格将被截掉。    		0Hz，或该属性允许的最小值（如果0Hz是不合法的值）。
    % {{ experimental_inline() }}{{cssxref("<percentage>")}}属性值将被解析为CSS {{cssxref("<number>")}}，不带单位，如12.5)，并被解释为带有所规定单位的 {{cssxref("<percentage>")}}值。若不是合法值（不是数字或超出CSS属性规定的范围），则使用默认值。
    + 若属性值用作长度，attr()将其计算为绝对长度。
    + 前缀与后缀空格将被截掉。    		0%，或该属性允许的最小值（如果0%是不合法的值）。
    +
    +
    <fallback>
    +
    如果HTML元素缺少所规定的属性值或属性值不合法，则使用fallback值。该值必须合法，且不能包含另一个attr()表达式。如果attr()不是所在CSS属性值的唯一值，其<fallback>值必须为<type-or-unit>所指定的类型，否则CSS会使用相应<type-or-unit>定义的默认值（见上表）。
    +
    + +

    示例

    + +
    p:before {
+    content:attr(data-foo) " ";
+}
+
    + +
    <p data-foo="hello">world</p>
+
    + +

    结果

    + +

    hello world

    + + + +

    示例1

    + +

    HTML

    + +
    <p data-foo="hello">world</p>
    + +

    CSS

    + +
    [data-foo]::before {
+  content: attr(data-foo) " ";
+}
    + +

    Result

    + +

    {{EmbedLiveSample("示例1", "100%", 50)}}

    + + + +

    示例2

    + +

    {{SeeCompatTable}}

    + +

    HTML

    + +
    <div class="background" data-background="lime">颜色应该是红色而不是绿色因为浏览器并不支持attr()的高级用法</div>
    + +

    CSS

    + +
    .background {
+  height: 100vh;
+}
    + +
    .background {
+  background-color: red;
+}
+
+.background[data-background] {
+  background-color: attr(data-background color, red);
+}
    + +

    {{EmbedLiveSample("示例2", "100%", 50)}}

    + + + + + +

    规范

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    SpecificationStatusComment
    No changes.
    {{SpecName("CSS3 Values", "#attr-notation", "attr()")}}{{Spec2("CSS3 Values")}} +

    Added two optional parameters;
    + can be used on all properties;
    + may return values other than {{CSSxRef("<string>")}}.

    + These changes are experimental and may be dropped during the CR phase if browser support is too small.
    {{SpecName("CSS2.1", "generate.html#x18", "attr()")}}{{Spec2("CSS2.1")}}Limited to the {{CSSxRef("content")}} property;
    + always returns a {{CSSxRef("<string>")}}.
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    规范状态备注
    {{SpecName("CSS4 Values", "#attr-notation", "attr()")}}{{Spec2("CSS4 Values")}}无变化
    {{ SpecName('CSS3 Values', '#attr', 'attr()') }}{{ Spec2('CSS3 Values') }}增加两个可选参数；且可以用于所有属性；且可以返回除{{cssxref("<string>")}}之外的其他类型。这些改变是实验性质的{{ experimental_inline() }}，且如果浏览器支持不足，可能在CR阶段被丢弃。
    {{ SpecName('CSS2.1', 'generate.html#x18', 'attr()') }}{{ Spec2('CSS2.1') }}限制用在 {{ cssxref("content") }} 属性；且必须返回{{cssxref("<string>")}}}。
    + +

    浏览器兼容性

    + +

    {{Compat("css.types.attr")}}

    + +

    参见

    + + diff --git a/files/zh-cn/web/css/calc()/index.html b/files/zh-cn/web/css/calc()/index.html deleted file mode 100644 index 767e67f0c7..0000000000 --- a/files/zh-cn/web/css/calc()/index.html +++ /dev/null @@ -1,163 +0,0 @@ ---- -title: calc() -slug: Web/CSS/calc() -tags: - - CSS - - CSS Function - - CSS 函数 - - CSS3 - - Calculate - - Layout - - calc -translation_of: Web/CSS/calc() ---- -
    {{CSSRef}}
    - -

    calc() 此 CSS 函数允许在声明 CSS 属性值时执行一些计算。它可以用在如下场合：{{cssxref("<length>")}}、{{cssxref("<frequency>")}}, {{cssxref("<angle>")}}、{{cssxref("<time>")}}、{{cssxref("<percentage>")}}、{{cssxref("<number>")}}、或 {{cssxref("<integer>")}}。

    - -

    语法

    - -
    /* property: calc(expression) */
-width: calc(100% - 80px);
    - -

    此 calc()函数用一个表达式作为它的参数，用这个表达式的结果作为值。这个表达式可以是任何如下操作符的组合，采用标准操作符处理法则的简单表达式。

    - -
    -
    +
    -
    加法。
    -
    -
    -
    减法。
    -
    *
    -
    乘法，乘数中至少有一个是 {{cssxref("<number>")}}。
    -
    /
    -
    除法，除数（/ 右面的数）必须是 {{cssxref("<number>")}}。
    -
    - -

    表达式中的运算对象可以使用任意 {{cssxref("<length>")}} 值。如果你愿意，你可以在一个表达式中混用这类值的不同单位。在需要时，你还可以使用小括号来建立计算顺序。

    - -

    备注

    - -
      -
    • + 和 - 运算符的两边必须要有空白字符。比如，calc(50% -8px) 会被解析成为一个无效的表达式，解析结果是：一个百分比 后跟一个负数长度值。而加有空白字符的、有效的表达式 calc(8px + -50%) 会被解析成为：一个长度 后跟一个加号 再跟一个负百分比。
      • -
    • * 和 / 这两个运算符前后不需要空白字符，但如果考虑到统一性，仍然推荐加上空白符。
      • -
    • 用 0 作除数会使 HTML 解析器抛出异常。
      • -
    • 涉及自动布局和固定布局的表格中的表列、表列组、表行、表行组和表单元格的宽度和高度百分比的数学表达式，auto 可视为已指定。
      • -
    • calc() 函数支持嵌套，但支持的方式是：把被嵌套的 calc() 函数全当成普通的括号。（译者注：所以，函数内直接用括号就好了。）
      • -
    - -

    形式化语法

    - -{{csssyntax}} - -

    例子

    - -

    使用指定的外边距定位一个对象

    - -

    使用 calc() 可以很容易的为一个对象设置一个左右两边相等的外边距。在这个例子中，使用 CSS 创建了一个横跨整个窗口的 banner，该 banner 左右两边各有一个距离窗口边缘 40 像素的间距：

    - -
    .banner {
-  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;
-}
-
    - -
    <div class="banner">This is a banner!</div>
    - -

    {{EmbedLiveSample('使用指定的外边距定位一个对象', '100%', '60')}}

    - -

    自动调整表单域的大小以适应其容器的大小

    - -

    calc() 的另外一个用例是用来确保一个表单域的大小适合当前的可用空间，而不会在保持合适的外边距的同时，因挤压超出其容器的边缘。

    - -

    看一下下面的CSS：

    - -
    input {
-  padding: 2px;
-  display: block;
-  width: calc(100% - 1em);
-}
-
-#formbox {
-  width: calc(100% / 6);
-  border: 1px solid black;
-  padding: 4px;
-}
-
    - -

    这个例子中，form 元素自身使用了窗口可用宽度的 1/6，然后，为了让 form 元素内部的 input 元素保持合适的大小，我们再一次使用了 calc()，让它的宽度为其容器的宽度减 1em。下面的 HTML 使用了上面的 CSS：

    - -
    <form>
-  <div id="formbox">
-  <label>Type something:</label>
-  <input type="text">
-  </div>
-</form>
-
    - -
    {{EmbedLiveSample('自动调整表单域的大小以适应其容器的大小', '100%', '80')}}
    - -

    使用 CSS 变量嵌套使用 calc()

    - -

    我们来看一下下面的代码：

    - -
    .foo {
-  --widthA: 100px;
-  --widthB: calc(var(--widthA) / 2);
-  --widthC: calc(var(--widthB) / 2);
-  width: var(--widthC);
-}
    - -

    在所有的变量都被展开后，widthC 的值就会变成 calc( calc( 100px / 2) / 2)，然后，当它被赋值给 .foo 的 width 属性时，所有内部的这些 calc()（无论嵌套的有多深）都将会直接被扁平化为一个括号（原文：be flattened to just parentheses），所以这个 width 属性的值就直接相当于 calc( ( 100px / 2) / 2) 了，或者说就变成 25px 了。 简而言之：一个 calc() 里面的 calc() 就仅仅相当于是一个括号。

    - -

    无障碍相关考量

    - -

    当 calc() 被用于控制文本的长度时，确保值中包含一个相对长度单位，例如：

    - -
    h1 {
-  font-size: calc(1.5rem + 3vw);
-}
    - -

    这可以保证文本的大小会跟随页面一同缩放。

    - - - -

    规范

    - - - - - - - - - - - - - - - - -
    规范状态备注
    {{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}{{Spec2('CSS3 Values')}}初步定义
    - -

    浏览器兼容性

    - - - -
    {{Compat("css.types.calc")}}
    - -

    也可以看看

    - - diff --git a/files/zh-cn/web/css/calc/index.html b/files/zh-cn/web/css/calc/index.html new file mode 100644 index 0000000000..99372f7cef --- /dev/null +++ b/files/zh-cn/web/css/calc/index.html @@ -0,0 +1,164 @@ +--- +title: calc() +slug: Web/CSS/calc +tags: + - CSS + - CSS Function + - CSS 函数 + - CSS3 + - Calculate + - Layout + - calc +translation_of: Web/CSS/calc() +original_slug: Web/CSS/calc() +--- +
    {{CSSRef}}
    + +

    calc() 此 CSS 函数允许在声明 CSS 属性值时执行一些计算。它可以用在如下场合：{{cssxref("<length>")}}、{{cssxref("<frequency>")}}, {{cssxref("<angle>")}}、{{cssxref("<time>")}}、{{cssxref("<percentage>")}}、{{cssxref("<number>")}}、或 {{cssxref("<integer>")}}。

    + +

    语法

    + +
    /* property: calc(expression) */
+width: calc(100% - 80px);
    + +

    此 calc()函数用一个表达式作为它的参数，用这个表达式的结果作为值。这个表达式可以是任何如下操作符的组合，采用标准操作符处理法则的简单表达式。

    + +
    +
    +
    +
    加法。
    +
    -
    +
    减法。
    +
    *
    +
    乘法，乘数中至少有一个是 {{cssxref("<number>")}}。
    +
    /
    +
    除法，除数（/ 右面的数）必须是 {{cssxref("<number>")}}。
    +
    + +

    表达式中的运算对象可以使用任意 {{cssxref("<length>")}} 值。如果你愿意，你可以在一个表达式中混用这类值的不同单位。在需要时，你还可以使用小括号来建立计算顺序。

    + +

    备注

    + +
      +
    • + 和 - 运算符的两边必须要有空白字符。比如，calc(50% -8px) 会被解析成为一个无效的表达式，解析结果是：一个百分比 后跟一个负数长度值。而加有空白字符的、有效的表达式 calc(8px + -50%) 会被解析成为：一个长度 后跟一个加号 再跟一个负百分比。
      • +
    • * 和 / 这两个运算符前后不需要空白字符，但如果考虑到统一性，仍然推荐加上空白符。
      • +
    • 用 0 作除数会使 HTML 解析器抛出异常。
      • +
    • 涉及自动布局和固定布局的表格中的表列、表列组、表行、表行组和表单元格的宽度和高度百分比的数学表达式，auto 可视为已指定。
      • +
    • calc() 函数支持嵌套，但支持的方式是：把被嵌套的 calc() 函数全当成普通的括号。（译者注：所以，函数内直接用括号就好了。）
      • +
    + +

    形式化语法

    + +{{csssyntax}} + +

    例子

    + +

    使用指定的外边距定位一个对象

    + +

    使用 calc() 可以很容易的为一个对象设置一个左右两边相等的外边距。在这个例子中，使用 CSS 创建了一个横跨整个窗口的 banner，该 banner 左右两边各有一个距离窗口边缘 40 像素的间距：

    + +
    .banner {
+  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;
+}
+
    + +
    <div class="banner">This is a banner!</div>
    + +

    {{EmbedLiveSample('使用指定的外边距定位一个对象', '100%', '60')}}

    + +

    自动调整表单域的大小以适应其容器的大小

    + +

    calc() 的另外一个用例是用来确保一个表单域的大小适合当前的可用空间，而不会在保持合适的外边距的同时，因挤压超出其容器的边缘。

    + +

    看一下下面的CSS：

    + +
    input {
+  padding: 2px;
+  display: block;
+  width: calc(100% - 1em);
+}
+
+#formbox {
+  width: calc(100% / 6);
+  border: 1px solid black;
+  padding: 4px;
+}
+
    + +

    这个例子中，form 元素自身使用了窗口可用宽度的 1/6，然后，为了让 form 元素内部的 input 元素保持合适的大小，我们再一次使用了 calc()，让它的宽度为其容器的宽度减 1em。下面的 HTML 使用了上面的 CSS：

    + +
    <form>
+  <div id="formbox">
+  <label>Type something:</label>
+  <input type="text">
+  </div>
+</form>
+
    + +
    {{EmbedLiveSample('自动调整表单域的大小以适应其容器的大小', '100%', '80')}}
    + +

    使用 CSS 变量嵌套使用 calc()

    + +

    我们来看一下下面的代码：

    + +
    .foo {
+  --widthA: 100px;
+  --widthB: calc(var(--widthA) / 2);
+  --widthC: calc(var(--widthB) / 2);
+  width: var(--widthC);
+}
    + +

    在所有的变量都被展开后，widthC 的值就会变成 calc( calc( 100px / 2) / 2)，然后，当它被赋值给 .foo 的 width 属性时，所有内部的这些 calc()（无论嵌套的有多深）都将会直接被扁平化为一个括号（原文：be flattened to just parentheses），所以这个 width 属性的值就直接相当于 calc( ( 100px / 2) / 2) 了，或者说就变成 25px 了。 简而言之：一个 calc() 里面的 calc() 就仅仅相当于是一个括号。

    + +

    无障碍相关考量

    + +

    当 calc() 被用于控制文本的长度时，确保值中包含一个相对长度单位，例如：

    + +
    h1 {
+  font-size: calc(1.5rem + 3vw);
+}
    + +

    这可以保证文本的大小会跟随页面一同缩放。

    + + + +

    规范

    + + + + + + + + + + + + + + + + +
    规范状态备注
    {{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}{{Spec2('CSS3 Values')}}初步定义
    + +

    浏览器兼容性

    + + + +
    {{Compat("css.types.calc")}}
    + +

    也可以看看

    + + diff --git a/files/zh-cn/web/css/clamp()/index.html b/files/zh-cn/web/css/clamp()/index.html deleted file mode 100644 index fd293c2620..0000000000 --- a/files/zh-cn/web/css/clamp()/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: clamp() -slug: Web/CSS/clamp() -translation_of: Web/CSS/clamp() ---- -
    {{CSSRef}}
    - - - -

    clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。 clamp() 被用在 {{CSSxRef("<length>")}}、{{CSSxRef("<frequency>")}}、{{CSSxRef("<angle>")}}、{{CSSxRef("<time>")}}、{{CSSxRef("<percentage>")}}、{{CSSxRef("<number>")}}、{{CSSxRef("<integer>")}} 中都是被允许的。

    - -

    clamp(MIN, VAL, MAX) 其实就是表示 {{CSSxRef("max", "max")}}(MIN, {{CSSxRef("min", "min")}}(VAL, MAX))

    - -
    {{EmbedInteractiveExample("pages/css/function-clamp.html")}}
    - - - -

    示例中 clamp() 用来设置随窗口大小改变的字体大小，但是无论窗口怎么改变，字体大小不会小于设置的最小值，也不会超过设置的最大值。这个效果和 Fluid Typography 一致，但只用了一行代码，且不需要媒体查询语句。

    - -

    语法

    - -

    clamp() 函数接收三个用逗号分隔的表达式作为参数，按最小值、首选值、最大值的顺序排列。

    - -

    当首选值比最小值要小时，则使用最小值。

    - -

    当首选值介于最小值和最大值之间时，用首选值。

    - -

    当首选值比最大值要大时，则使用最大值。

    - -

    这个表达式可以是数学函数(参看 {{CSSxRef("calc")}} )、字面量或其它计算为有效的参数类型 (如{{CSSxRef("<length>")}}) 表达式，如 {{CSSxRef("attr", "attr()")}}，或嵌套的 {{CSSxRef("min")}} 和 {{CSSxRef("max")}} 。作为数学表达式，你可以使用加减乘除运算而无需使用 calc() 函数。你也可以用括号来确定计算顺序。

    - -

    表达式中的每一个值都可以用不同的单位。

    - -

    注意

    - -
      -
    • 在自动和固定布局表格中，涉及到列、列组、行、行组、单元格的宽度和高度中如果有百分比数学表达式，也许会被视为指定了 auto 。
      • -
    • 允许设置表达式的值为 max() 和 min() 。这些表达式是数学表达式，所以你可以进行加减乘除运算。
      • -
    • 表达式可以是使用标准运算符优先规则组合  + 、- 、* 、/ 等运算符的值，确保在 + 、- 两侧各有一个空格。表达式中的操作数可以是 {{CSSxRef("<length>")}} 语法值。你可以给每一个值设置不同的单位。你还可以用括号来确定计算顺序。
      • -
    • Oftentimes you will want to use {{CSSxRef("min")}} and {{CSSxRef("max")}} within a clamp() function.你可能经常会在 clamp() 中使用 {{CSSxRef("min")}} 和 {{CSSxRef("max")}} 。
      • -
    - -

    形式语法

    - -{{CSSSyntax}} - -

    示例

    - -

    min, max, and clamp comparison

    - -

    这个示例中，我们用 min()、max() 和 clamp() 实现一个简单的响应式效果。

    - -

    <body> 元素的 width 设置为 min(1000px, calc(70% + 100px))。其含义是宽度设置为  1000px，当 calc(70% + 100px) 比  1000px 小时，宽度为 calc(70% + 100px) 。 min() 允许你设置一个上限值。

    - -

     <p> 元素的 font-size 设置为 max(1.2rem, 1.2vw)。其含义是 font-size 是 1.2rem，当计算出 1.2vw 比 1.2rem 大时，则 font-size 为  1.2vw 。 max() 允许你设置一个下限值。

    - -

    <h1> 元素的 font-size 设置为 clamp(1.8rem, 2.5vw, 2.8rem).。其含义是 font-size 为 1.8rem，当计算出 2.5vw 比 1.8rem  大时，font-size 为 2.5vw，同时，当 2.5vw 计算出来的值比 2.8rem 大时，font-size 为 2.8rem。clamp() 允许你设置一个上限值和下限值。

    - -

    感兴趣可以在 GitHub 上查看源码

    - -

    HTML

    - -
    <h1>Simple responsive test</h1>
-<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In orci orci, eleifend id risus nec, mattis rutrum velit. Suspendisse fringilla egestas erat eu convallis. Phasellus eu velit ut magna dapibus elementum cursus at ligula. Ut tempus varius nibh, nec auctor sapien iaculis sit amet. Fusce iaculis, libero quis elementum viverra, nulla ante accumsan lectus, sit amet convallis lacus ipsum vel est. Curabitur et urna non est consectetur pulvinar vel id risus. Ut vestibulum, sem in semper aliquet, felis arcu euismod sapien, ac imperdiet massa nisl quis sem. Vestibulum ac elementum felis, in tempor velit. Pellentesque purus ex, mattis at ornare quis, porta condimentum mi. Donec vestibulum ligula vel nulla blandit, quis euismod nulla vestibulum. Suspendisse potenti. Nunc neque mauris, tempor sed facilisis at, ultrices eget nulla. Pellentesque convallis ante nec augue porttitor, id tempus ante luctus.</p>
-
-<p>Integer rutrum sollicitudin tellus, quis cursus nulla scelerisque nec. Nunc eu facilisis lorem. Maecenas faucibus sapien eleifend, semper tellus at, pharetra quam. Cras feugiat vulputate tortor at rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam non felis quis sem lobortis sodales vel id libero. Phasellus sit amet placerat lorem. </p>
    - -

    CSS

    - -
    html {
-  font-family: sans-serif;
-}
-
-body {
-  margin: 0 auto;
-  width: min(1000px, calc(70% + 100px));
-}
-
-h1 {
-  letter-spacing: 2px;
-  font-size: clamp(1.8rem, 2.5vw, 2.8rem);
-}
-
-p {
-  line-height: 1.5;
-  font-size: max(1.2rem, 1.2vw);
-}
    - -

    规范

    - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName("CSS4 Values", "#calc-notation", "clamp()")}}{{Spec2('CSS4 Values')}}Initial definition.
    - -

    浏览器兼容性

    - - - -

    {{Compat("css.types.clamp")}}

    - -

    继续阅读

    - -
      -
    • {{CSSxRef("calc")}}
      • -
    • {{CSSxRef("max")}}
      • -
    • {{CSSxRef("min")}}
      • -
    • CSS Values
      • -
    diff --git a/files/zh-cn/web/css/clamp/index.html b/files/zh-cn/web/css/clamp/index.html new file mode 100644 index 0000000000..cdf0f6b212 --- /dev/null +++ b/files/zh-cn/web/css/clamp/index.html @@ -0,0 +1,122 @@ +--- +title: clamp() +slug: Web/CSS/clamp +translation_of: Web/CSS/clamp() +original_slug: Web/CSS/clamp() +--- +
    {{CSSRef}}
    + + + +

    clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。 clamp() 被用在 {{CSSxRef("<length>")}}、{{CSSxRef("<frequency>")}}、{{CSSxRef("<angle>")}}、{{CSSxRef("<time>")}}、{{CSSxRef("<percentage>")}}、{{CSSxRef("<number>")}}、{{CSSxRef("<integer>")}} 中都是被允许的。

    + +

    clamp(MIN, VAL, MAX) 其实就是表示 {{CSSxRef("max", "max")}}(MIN, {{CSSxRef("min", "min")}}(VAL, MAX))

    + +
    {{EmbedInteractiveExample("pages/css/function-clamp.html")}}
    + + + +

    示例中 clamp() 用来设置随窗口大小改变的字体大小，但是无论窗口怎么改变，字体大小不会小于设置的最小值，也不会超过设置的最大值。这个效果和 Fluid Typography 一致，但只用了一行代码，且不需要媒体查询语句。

    + +

    语法

    + +

    clamp() 函数接收三个用逗号分隔的表达式作为参数，按最小值、首选值、最大值的顺序排列。

    + +

    当首选值比最小值要小时，则使用最小值。

    + +

    当首选值介于最小值和最大值之间时，用首选值。

    + +

    当首选值比最大值要大时，则使用最大值。

    + +

    这个表达式可以是数学函数(参看 {{CSSxRef("calc")}} )、字面量或其它计算为有效的参数类型 (如{{CSSxRef("<length>")}}) 表达式，如 {{CSSxRef("attr", "attr()")}}，或嵌套的 {{CSSxRef("min")}} 和 {{CSSxRef("max")}} 。作为数学表达式，你可以使用加减乘除运算而无需使用 calc() 函数。你也可以用括号来确定计算顺序。

    + +

    表达式中的每一个值都可以用不同的单位。

    + +

    注意

    + +
      +
    • 在自动和固定布局表格中，涉及到列、列组、行、行组、单元格的宽度和高度中如果有百分比数学表达式，也许会被视为指定了 auto 。
      • +
    • 允许设置表达式的值为 max() 和 min() 。这些表达式是数学表达式，所以你可以进行加减乘除运算。
      • +
    • 表达式可以是使用标准运算符优先规则组合  + 、- 、* 、/ 等运算符的值，确保在 + 、- 两侧各有一个空格。表达式中的操作数可以是 {{CSSxRef("<length>")}} 语法值。你可以给每一个值设置不同的单位。你还可以用括号来确定计算顺序。
      • +
    • Oftentimes you will want to use {{CSSxRef("min")}} and {{CSSxRef("max")}} within a clamp() function.你可能经常会在 clamp() 中使用 {{CSSxRef("min")}} 和 {{CSSxRef("max")}} 。
      • +
    + +

    形式语法

    + +{{CSSSyntax}} + +

    示例

    + +

    min, max, and clamp comparison

    + +

    这个示例中，我们用 min()、max() 和 clamp() 实现一个简单的响应式效果。

    + +

    <body> 元素的 width 设置为 min(1000px, calc(70% + 100px))。其含义是宽度设置为  1000px，当 calc(70% + 100px) 比  1000px 小时，宽度为 calc(70% + 100px) 。 min() 允许你设置一个上限值。

    + +

     <p> 元素的 font-size 设置为 max(1.2rem, 1.2vw)。其含义是 font-size 是 1.2rem，当计算出 1.2vw 比 1.2rem 大时，则 font-size 为  1.2vw 。 max() 允许你设置一个下限值。

    + +

    <h1> 元素的 font-size 设置为 clamp(1.8rem, 2.5vw, 2.8rem).。其含义是 font-size 为 1.8rem，当计算出 2.5vw 比 1.8rem  大时，font-size 为 2.5vw，同时，当 2.5vw 计算出来的值比 2.8rem 大时，font-size 为 2.8rem。clamp() 允许你设置一个上限值和下限值。

    + +

    感兴趣可以在 GitHub 上查看源码

    + +

    HTML

    + +
    <h1>Simple responsive test</h1>
+<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In orci orci, eleifend id risus nec, mattis rutrum velit. Suspendisse fringilla egestas erat eu convallis. Phasellus eu velit ut magna dapibus elementum cursus at ligula. Ut tempus varius nibh, nec auctor sapien iaculis sit amet. Fusce iaculis, libero quis elementum viverra, nulla ante accumsan lectus, sit amet convallis lacus ipsum vel est. Curabitur et urna non est consectetur pulvinar vel id risus. Ut vestibulum, sem in semper aliquet, felis arcu euismod sapien, ac imperdiet massa nisl quis sem. Vestibulum ac elementum felis, in tempor velit. Pellentesque purus ex, mattis at ornare quis, porta condimentum mi. Donec vestibulum ligula vel nulla blandit, quis euismod nulla vestibulum. Suspendisse potenti. Nunc neque mauris, tempor sed facilisis at, ultrices eget nulla. Pellentesque convallis ante nec augue porttitor, id tempus ante luctus.</p>
+
+<p>Integer rutrum sollicitudin tellus, quis cursus nulla scelerisque nec. Nunc eu facilisis lorem. Maecenas faucibus sapien eleifend, semper tellus at, pharetra quam. Cras feugiat vulputate tortor at rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam non felis quis sem lobortis sodales vel id libero. Phasellus sit amet placerat lorem. </p>
    + +

    CSS

    + +
    html {
+  font-family: sans-serif;
+}
+
+body {
+  margin: 0 auto;
+  width: min(1000px, calc(70% + 100px));
+}
+
+h1 {
+  letter-spacing: 2px;
+  font-size: clamp(1.8rem, 2.5vw, 2.8rem);
+}
+
+p {
+  line-height: 1.5;
+  font-size: max(1.2rem, 1.2vw);
+}
    + +

    规范

    + + + + + + + + + + + + + + + + +
    SpecificationStatusComment
    {{SpecName("CSS4 Values", "#calc-notation", "clamp()")}}{{Spec2('CSS4 Values')}}Initial definition.
    + +

    浏览器兼容性

    + + + +

    {{Compat("css.types.clamp")}}

    + +

    继续阅读

    + +
      +
    • {{CSSxRef("calc")}}
      • +
    • {{CSSxRef("max")}}
      • +
    • {{CSSxRef("min")}}
      • +
    • CSS Values
      • +
    diff --git a/files/zh-cn/web/css/counter()/index.html b/files/zh-cn/web/css/counter()/index.html deleted file mode 100644 index e8cfc3ce91..0000000000 --- a/files/zh-cn/web/css/counter()/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: counter() -slug: Web/CSS/counter() -tags: - - CSS - - CSS函数 - - CSS计数器 -translation_of: Web/CSS/counter() ---- -
    {{CSSRef}}
    - -
    CSS 函数 counter()，返回一个代表计数器的当前值的字符串。它通常和伪元素搭配使用，但是理论上可以在支持<string>值的任何地方使用。
    - -
    /* 简单使用 */
-counter(计数器名称);
-
-/* 更改计数器显示 */
-counter(countername, upper-roman)
    - -

    一个计数器本身没有可见的效果，而是通过counter()函数（和counters()函数）返回开发人员定义的字符串（或图像） 从而使计数器拥有很棒的作用。

    - -
    -

    注释：counter()函数可以与任何CSS属性一起使用，但是对"content"以外的属性的支持是试验性的，对type-or-unit参数的支持很少。

    - -

    在使用此功能之前，请仔细检查浏览器兼容性表。

    -
    - -

    语法

    - -

    值

    - -
    -
    <custom-ident> 自定义标识
    -
    一个标识计数器的名称，区分大小写，并且与{{cssxref("counter-reset")}}和{{cssxref("counter-increment")}}中的“名称”相同。名称不能以两个破折号开头，并且不能为none, unset, initial, 或 inherit。
    -
    <counter-style> 计数器样式
    -
    计数器样式名称或 symbols() 函数，其中计数器样式名称是数字，字母或符号的简单预定义计数器样式，复杂的东亚或埃塞俄比亚长手预定义计数器样式，或其他预定义计数器样式。如果省略，则计数器样式默认为十进制。
    -
    - -

    正式语法

    - -
    counter( <custom-ident>, <counter-style>? )
-
-where
-<counter-style> = <counter-style-name> | symbols()
-
-where
-<counter-style-name> = <custom-ident>
    - -

    示例

    - - -

    default value compared to upper Roman

    - -

    HTML

    - -
    <ol>
-  <li></li>
-  <li></li>
-  <li></li>
-</ol>
    - -

    CSS

    - -
    ol {
-  counter-reset: listCounter;
-}
-li {
-  counter-increment: listCounter;
-}
-li::after {
-  content: "[" counter(listCounter) "] == ["
-               counter(listCounter, upper-roman) "]";
-}
    - -

    结果

    - -

    {{EmbedLiveSample("default_value_compared_to_upper_Roman", "100%", 150)}}

    - -

    decimal-leading-zero compared to lower-alpha

    - -

    HTML

    - -
    <ol>
-  <li></li>
-  <li></li>
-  <li></li>
-</ol>
    - -

    CSS

    - -
    ol {
-  counter-reset: count;
-}
-li {
-  counter-increment: count;
-}
-li::after {
-  content: "[" counter(count, decimal-leading-zero) "] == ["
-               counter(count, lower-alpha) "]";
-}
    - -

    结果

    - -

    {{EmbedLiveSample("decimal-leading-zero_compared_to_lower-alpha", "100%", 150)}}

    - -

    Specifications

    - - - - - - - - - - - - - - - - - - - - - -
    Specification状态注释
    {{SpecName("CSS3 Lists", "#counter-functions", "CSS Counters")}}{{Spec2("CSS3 Lists")}}No change
    {{SpecName("CSS2.1", "generate.html#counter-styles", "CSS Counters")}}{{Spec2("CSS2.1")}}Initial definition
    - -

    浏览器兼容性

    - - - -

    {{Compat("css.types.counter")}}

    - -

    另请参阅

    - -
      -
    • 使用CSS计数器
      • -
    • {{cssxref("counter-reset")}}
      • -
    • {{cssxref("counter-set")}}
      • -
    • {{cssxref("counter-increment")}}
      • -
    • {{cssxref("@counter-style")}}
      • -
    • CSS counters() 函数
      • -
    diff --git a/files/zh-cn/web/css/counter/index.html b/files/zh-cn/web/css/counter/index.html new file mode 100644 index 0000000000..ecdb339151 --- /dev/null +++ b/files/zh-cn/web/css/counter/index.html @@ -0,0 +1,146 @@ +--- +title: counter() +slug: Web/CSS/counter +tags: + - CSS + - CSS函数 + - CSS计数器 +translation_of: Web/CSS/counter() +original_slug: Web/CSS/counter() +--- +
    {{CSSRef}}
    + +
    CSS 函数 counter()，返回一个代表计数器的当前值的字符串。它通常和伪元素搭配使用，但是理论上可以在支持<string>值的任何地方使用。
    + +
    /* 简单使用 */
+counter(计数器名称);
+
+/* 更改计数器显示 */
+counter(countername, upper-roman)
    + +

    一个计数器本身没有可见的效果，而是通过counter()函数（和counters()函数）返回开发人员定义的字符串（或图像） 从而使计数器拥有很棒的作用。

    + +
    +

    注释：counter()函数可以与任何CSS属性一起使用，但是对"content"以外的属性的支持是试验性的，对type-or-unit参数的支持很少。

    + +

    在使用此功能之前，请仔细检查浏览器兼容性表。

    +
    + +

    语法

    + +

    值

    + +
    +
    <custom-ident> 自定义标识
    +
    一个标识计数器的名称，区分大小写，并且与{{cssxref("counter-reset")}}和{{cssxref("counter-increment")}}中的“名称”相同。名称不能以两个破折号开头，并且不能为none, unset, initial, 或 inherit。
    +
    <counter-style> 计数器样式
    +
    计数器样式名称或 symbols() 函数，其中计数器样式名称是数字，字母或符号的简单预定义计数器样式，复杂的东亚或埃塞俄比亚长手预定义计数器样式，或其他预定义计数器样式。如果省略，则计数器样式默认为十进制。
    +
    + +

    正式语法

    + +
    counter( <custom-ident>, <counter-style>? )
+
+where
+<counter-style> = <counter-style-name> | symbols()
+
+where
+<counter-style-name> = <custom-ident>
    + +

    示例

    + + +

    default value compared to upper Roman

    + +

    HTML

    + +
    <ol>
+  <li></li>
+  <li></li>
+  <li></li>
+</ol>
    + +

    CSS

    + +
    ol {
+  counter-reset: listCounter;
+}
+li {
+  counter-increment: listCounter;
+}
+li::after {
+  content: "[" counter(listCounter) "] == ["
+               counter(listCounter, upper-roman) "]";
+}
    + +

    结果

    + +

    {{EmbedLiveSample("default_value_compared_to_upper_Roman", "100%", 150)}}

    + +

    decimal-leading-zero compared to lower-alpha

    + +

    HTML

    + +
    <ol>
+  <li></li>
+  <li></li>
+  <li></li>
+</ol>
    + +

    CSS

    + +
    ol {
+  counter-reset: count;
+}
+li {
+  counter-increment: count;
+}
+li::after {
+  content: "[" counter(count, decimal-leading-zero) "] == ["
+               counter(count, lower-alpha) "]";
+}
    + +

    结果

    + +

    {{EmbedLiveSample("decimal-leading-zero_compared_to_lower-alpha", "100%", 150)}}

    + +

    Specifications

    + + + + + + + + + + + + + + + + + + + + + +
    Specification状态注释
    {{SpecName("CSS3 Lists", "#counter-functions", "CSS Counters")}}{{Spec2("CSS3 Lists")}}No change
    {{SpecName("CSS2.1", "generate.html#counter-styles", "CSS Counters")}}{{Spec2("CSS2.1")}}Initial definition
    + +

    浏览器兼容性

    + + + +

    {{Compat("css.types.counter")}}

    + +

    另请参阅

    + +
      +
    • 使用CSS计数器
      • +
    • {{cssxref("counter-reset")}}
      • +
    • {{cssxref("counter-set")}}
      • +
    • {{cssxref("counter-increment")}}
      • +
    • {{cssxref("@counter-style")}}
      • +
    • CSS counters() 函数
      • +
    diff --git a/files/zh-cn/web/css/counters()/index.html b/files/zh-cn/web/css/counters()/index.html deleted file mode 100644 index c758a6a3ad..0000000000 --- a/files/zh-cn/web/css/counters()/index.html +++ /dev/null @@ -1,188 +0,0 @@ ---- -title: counters() -slug: Web/CSS/counters() -tags: - - CSS - - CSS函数 - - CSS计数器 -translation_of: Web/CSS/counters() ---- -
    {{CSSRef}}
    - -

    CSS 函数  counters() 是一个嵌套计数器，返回表示指定计数器当前值的连接字符串。counters() 函数有两种形式：counters(name, string) 或 counters(name, string, style)。它通常和伪元素搭配使用，但是理论上可以在支持<string>值的任何地方使用。生成的文本是具有给定名称的所有计数器的值，从最外层到最内层，之间由指定字符串分隔。计数器以指示的样式呈现，如果未指定样式，则默认为十进制。

    - -
    /* Simple usage  - style defaults to decimal */
-counters(countername, '-');
-
-/* changing the counter display */
-counters(countername, '.', upper-roman)
    - -

    一个计数器本身没有可见的效果，而是通过counter()函数（和counters()函数）返回开发人员定义的字符串（或图像） 从而使计数器拥有很棒的作用。

    - -
    -

    Note: counter() 函数可以与任何CSS属性一起使用，但是对"content"以外的属性的支持是试验性的，对type-or-unit参数的支持很少。

    - -

    在使用此功能之前，请仔细检查浏览器兼容性表 。

    -
    - -

    Syntax

    - -

    Values

    - -
    -
    <custom-ident> 自定义标识
    -
    一个标识计数器的名称，区分大小写，并且与counter-reset和counter-increment中的“名称”相同。名称不能以两个破折号开头，并且不能为none, unset, initial, 或 inherit。
    -
    <counter-style> 计数器样式
    -
    计数器样式名称或 symbols() 函数，其中计数器样式名称是数字，字母或符号的简单预定义计数器样式，复杂的东亚或埃塞俄比亚长手预定义计数器样式，或其他预定义计数器样式。如果省略，则计数器样式默认为十进制。
    -
    <string> 字符串
    -
    任意数量的文本字符。非拉丁字符必须使用其Unicode转义序列进行编码：例如，\ 000A9表示版权符号。
    -
    - -

    Formal syntax

    - -
    counters( <custom-ident>, <string>, <counter-style>? )
-
-where
-<counter-style> = <counter-style-name> | symbols()
-
-where
-<counter-style-name> = <custom-ident>
    - -

    Examples

    - -

    default value compared to upper Roman

    - -

    HTML

    - -
    <ol>
-  <li>
-     <ol>
-        <li></li>
-        <li></li>
-        <li></li>
-      </ol>
-  </li>
-  <li></li>
-  <li></li>
-  <li>
-     <ol>
-        <li></li>
-        <li>
-           <ol>
-              <li></li>
-              <li></li>
-              <li></li>
-           </ol>
-        </li>
-      </ol>
-  </li>
-</ol>
    - -

    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) ;
-}
    - -

    Result

    - -

    {{EmbedLiveSample("default_value_compared_to_upper_Roman", "100%", 150)}}

    - -

    decimal-leading-zero compared to lower-alpha

    - -

    HTML

    - -
    <ol>
-  <li>
-     <ol>
-        <li></li>
-        <li></li>
-        <li></li>
-      </ol>
-  </li>
-  <li></li>
-  <li></li>
-  <li>
-     <ol>
-        <li></li>
-        <li>
-           <ol>
-              <li></li>
-              <li></li>
-              <li></li>
-           </ol>
-        </li>
-      </ol>
-  </li>
-</ol>
    - -

    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);
-}
    - -

    Result

    - -

    {{EmbedLiveSample("decimal-leading-zero_compared_to_lower-alpha", "100%", 150)}}

    - -

    Specifications

    - - - - - - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName("CSS3 Lists", "#counter-functions", "CSS Counters")}}{{Spec2("CSS3 Lists")}}No change
    {{SpecName("CSS2.1", "generate.html#counter-styles", "CSS Counters")}}{{Spec2("CSS2.1")}}Initial definition
    - -

    Browser compatibility

    - - - -

    {{Compat("css.types.counters")}}

    - -

    See also

    - -
      -
    • Using CSS Counters
      • -
    • {{cssxref("counter-set")}}
      • -
    • {{cssxref("counter-reset")}}
      • -
    • {{cssxref("counter-increment")}}
      • -
    • {{cssxref("@counter-style")}}
      • -
    • CSS counter() function
      • -
    • {{cssxref("::marker")}}
      • -
    diff --git a/files/zh-cn/web/css/counters/index.html b/files/zh-cn/web/css/counters/index.html new file mode 100644 index 0000000000..30662705ca --- /dev/null +++ b/files/zh-cn/web/css/counters/index.html @@ -0,0 +1,189 @@ +--- +title: counters() +slug: Web/CSS/counters +tags: + - CSS + - CSS函数 + - CSS计数器 +translation_of: Web/CSS/counters() +original_slug: Web/CSS/counters() +--- +
    {{CSSRef}}
    + +

    CSS 函数  counters() 是一个嵌套计数器，返回表示指定计数器当前值的连接字符串。counters() 函数有两种形式：counters(name, string) 或 counters(name, string, style)。它通常和伪元素搭配使用，但是理论上可以在支持<string>值的任何地方使用。生成的文本是具有给定名称的所有计数器的值，从最外层到最内层，之间由指定字符串分隔。计数器以指示的样式呈现，如果未指定样式，则默认为十进制。

    + +
    /* Simple usage  - style defaults to decimal */
+counters(countername, '-');
+
+/* changing the counter display */
+counters(countername, '.', upper-roman)
    + +

    一个计数器本身没有可见的效果，而是通过counter()函数（和counters()函数）返回开发人员定义的字符串（或图像） 从而使计数器拥有很棒的作用。

    + +
    +

    Note: counter() 函数可以与任何CSS属性一起使用，但是对"content"以外的属性的支持是试验性的，对type-or-unit参数的支持很少。

    + +

    在使用此功能之前，请仔细检查浏览器兼容性表 。

    +
    + +

    Syntax

    + +

    Values

    + +
    +
    <custom-ident> 自定义标识
    +
    一个标识计数器的名称，区分大小写，并且与counter-reset和counter-increment中的“名称”相同。名称不能以两个破折号开头，并且不能为none, unset, initial, 或 inherit。
    +
    <counter-style> 计数器样式
    +
    计数器样式名称或 symbols() 函数，其中计数器样式名称是数字，字母或符号的简单预定义计数器样式，复杂的东亚或埃塞俄比亚长手预定义计数器样式，或其他预定义计数器样式。如果省略，则计数器样式默认为十进制。
    +
    <string> 字符串
    +
    任意数量的文本字符。非拉丁字符必须使用其Unicode转义序列进行编码：例如，\ 000A9表示版权符号。
    +
    + +

    Formal syntax

    + +
    counters( <custom-ident>, <string>, <counter-style>? )
+
+where
+<counter-style> = <counter-style-name> | symbols()
+
+where
+<counter-style-name> = <custom-ident>
    + +

    Examples

    + +

    default value compared to upper Roman

    + +

    HTML

    + +
    <ol>
+  <li>
+     <ol>
+        <li></li>
+        <li></li>
+        <li></li>
+      </ol>
+  </li>
+  <li></li>
+  <li></li>
+  <li>
+     <ol>
+        <li></li>
+        <li>
+           <ol>
+              <li></li>
+              <li></li>
+              <li></li>
+           </ol>
+        </li>
+      </ol>
+  </li>
+</ol>
    + +

    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) ;
+}
    + +

    Result

    + +

    {{EmbedLiveSample("default_value_compared_to_upper_Roman", "100%", 150)}}

    + +

    decimal-leading-zero compared to lower-alpha

    + +

    HTML

    + +
    <ol>
+  <li>
+     <ol>
+        <li></li>
+        <li></li>
+        <li></li>
+      </ol>
+  </li>
+  <li></li>
+  <li></li>
+  <li>
+     <ol>
+        <li></li>
+        <li>
+           <ol>
+              <li></li>
+              <li></li>
+              <li></li>
+           </ol>
+        </li>
+      </ol>
+  </li>
+</ol>
    + +

    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);
+}
    + +

    Result

    + +

    {{EmbedLiveSample("decimal-leading-zero_compared_to_lower-alpha", "100%", 150)}}

    + +

    Specifications

    + + + + + + + + + + + + + + + + + + + + + +
    SpecificationStatusComment
    {{SpecName("CSS3 Lists", "#counter-functions", "CSS Counters")}}{{Spec2("CSS3 Lists")}}No change
    {{SpecName("CSS2.1", "generate.html#counter-styles", "CSS Counters")}}{{Spec2("CSS2.1")}}Initial definition
    + +

    Browser compatibility

    + + + +

    {{Compat("css.types.counters")}}

    + +

    See also

    + +
      +
    • Using CSS Counters
      • +
    • {{cssxref("counter-set")}}
      • +
    • {{cssxref("counter-reset")}}
      • +
    • {{cssxref("counter-increment")}}
      • +
    • {{cssxref("@counter-style")}}
      • +
    • CSS counter() function
      • +
    • {{cssxref("::marker")}}
      • +
    diff --git a/files/zh-cn/web/css/element()/index.html b/files/zh-cn/web/css/element()/index.html deleted file mode 100644 index 57873c6e7d..0000000000 --- a/files/zh-cn/web/css/element()/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: element -slug: Web/CSS/element() -tags: - - CSS - - CSS Function - - Layout - - Web - - 参考 - - 布局 -translation_of: Web/CSS/element() ---- -
    {{CSSRef}}{{SeeCompatTable}}
    - -

    CSS 函数 element() 定义了一个从任意的 HTML 元素中生成的图像 {{cssxref("<image>")}} 值。该图像值是实时的，这意味着如果被指定的 HTML 元素被更改，the CSS properties using the resulting value are automatically updated.

    - -

    一个特别实用的应用场景是，在某个 HTML {{HTMLElement("canvas")}} 元素中渲染图像，然后将其用作背景。

    - -

    在使用 Gecko 渲染引擎的浏览器中，可以使用非标准的 {{domxref("document.mozSetImageElement()")}} 方法，将某个元素指定为其他元素的背景图像。

    - -

    语法

    - -
    element(id)
    - -

    其中：

    - -
    -
    id
    -
    The ID of an element to use as the background, specified using the HTML attribute #id on the element.
    -
    - -

    示例

    - -

    在支持 -moz-element() 的 Firefox 中，可以实地考察这些例子。

    - -

    一个比较现实的例子

    - -

    这个例子将文档中另一个隐藏的 {{HTMLElement("div")}} 元素作为背景。被隐藏的元素本身使用了渐变背景，也包含了一些文字，渐变背景和文字都成为了第一个元素的背景。

    - -
    <div style="width:400px; height:400px; background:-moz-element(#myBackground1) no-repeat;">
-  <p>This box uses the element with the #myBackground1 ID as its background!</p>
-</div>
-
-<div style="overflow:hidden; height:0;">
-  <div id="myBackground1" style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);">
-  <p style="transform-origin:0 0; transform: rotate(45deg); color:white;">This text is part of the background. Cool, huh?</p>
-  </div>
-</div>
    - -

    The {{HTMLElement("div")}} element with the ID "myBackground1" is used as the background for the content including the paragraph "This box uses the element with the #myBackground1 ID as its background!".

    - -

    example1.png

    - -

    一个有点怪怪的例子

    - -

    This example uses a hidden {{HTMLElement("button")}} element in a repeating pattern as its background. This demonstrates that you can use arbitrary elements as background, but doesn't necessarily demonstrate good design practices.

    - -
    <div style="width:400px; height:100px; background:-moz-element(#myBackground2);">
-</div>
-
-<div style="overflow:hidden; height:0;">
-  <button id="myBackground2" type="button">Evil button!</button>
-</div>
-
    - -

    example2.png

    - -

    规范

    - - - - - - - - - - - - - - - - -
    规范状态备注
    {{SpecName('CSS4 Images', '#element-notation', 'Using Elements as Images: the element() notation')}}{{Spec2('CSS4 Images')}}Deferred from CSS3 Images.
    - -

    浏览器兼容性

    - - - -

    {{Compat("css.types.image.element")}}

    - -

    参见

    - -
      -
    • {{cssxref("_image", "image()")}}
      • -
    • {{cssxref("image-set", "image-set()")}}
      • -
    • {{cssxref("<image>")}}
      • -
    • {{cssxref("<gradient>")}}
      • -
    • {{cssxref("element()")}}
      • -
    • {{cssxref("cross-fade")}}
      • -
    • {{domxref("document.mozSetImageElement()")}}
      • -
    diff --git a/files/zh-cn/web/css/element/index.html b/files/zh-cn/web/css/element/index.html new file mode 100644 index 0000000000..70a8b5c5f3 --- /dev/null +++ b/files/zh-cn/web/css/element/index.html @@ -0,0 +1,104 @@ +--- +title: element +slug: Web/CSS/element +tags: + - CSS + - CSS Function + - Layout + - Web + - 参考 + - 布局 +translation_of: Web/CSS/element() +original_slug: Web/CSS/element() +--- +
    {{CSSRef}}{{SeeCompatTable}}
    + +

    CSS 函数 element() 定义了一个从任意的 HTML 元素中生成的图像 {{cssxref("<image>")}} 值。该图像值是实时的，这意味着如果被指定的 HTML 元素被更改，the CSS properties using the resulting value are automatically updated.

    + +

    一个特别实用的应用场景是，在某个 HTML {{HTMLElement("canvas")}} 元素中渲染图像，然后将其用作背景。

    + +

    在使用 Gecko 渲染引擎的浏览器中，可以使用非标准的 {{domxref("document.mozSetImageElement()")}} 方法，将某个元素指定为其他元素的背景图像。

    + +

    语法

    + +
    element(id)
    + +

    其中：

    + +
    +
    id
    +
    The ID of an element to use as the background, specified using the HTML attribute #id on the element.
    +
    + +

    示例

    + +

    在支持 -moz-element() 的 Firefox 中，可以实地考察这些例子。

    + +

    一个比较现实的例子

    + +

    这个例子将文档中另一个隐藏的 {{HTMLElement("div")}} 元素作为背景。被隐藏的元素本身使用了渐变背景，也包含了一些文字，渐变背景和文字都成为了第一个元素的背景。

    + +
    <div style="width:400px; height:400px; background:-moz-element(#myBackground1) no-repeat;">
+  <p>This box uses the element with the #myBackground1 ID as its background!</p>
+</div>
+
+<div style="overflow:hidden; height:0;">
+  <div id="myBackground1" style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);">
+  <p style="transform-origin:0 0; transform: rotate(45deg); color:white;">This text is part of the background. Cool, huh?</p>
+  </div>
+</div>
    + +

    The {{HTMLElement("div")}} element with the ID "myBackground1" is used as the background for the content including the paragraph "This box uses the element with the #myBackground1 ID as its background!".

    + +

    example1.png

    + +

    一个有点怪怪的例子

    + +

    This example uses a hidden {{HTMLElement("button")}} element in a repeating pattern as its background. This demonstrates that you can use arbitrary elements as background, but doesn't necessarily demonstrate good design practices.

    + +
    <div style="width:400px; height:100px; background:-moz-element(#myBackground2);">
+</div>
+
+<div style="overflow:hidden; height:0;">
+  <button id="myBackground2" type="button">Evil button!</button>
+</div>
+
    + +

    example2.png

    + +

    规范

    + + + + + + + + + + + + + + + + +
    规范状态备注
    {{SpecName('CSS4 Images', '#element-notation', 'Using Elements as Images: the element() notation')}}{{Spec2('CSS4 Images')}}Deferred from CSS3 Images.
    + +

    浏览器兼容性

    + + + +

    {{Compat("css.types.image.element")}}

    + +

    参见

    + +
      +
    • {{cssxref("_image", "image()")}}
      • +
    • {{cssxref("image-set", "image-set()")}}
      • +
    • {{cssxref("<image>")}}
      • +
    • {{cssxref("<gradient>")}}
      • +
    • {{cssxref("element()")}}
      • +
    • {{cssxref("cross-fade")}}
      • +
    • {{domxref("document.mozSetImageElement()")}}
      • +
    diff --git a/files/zh-cn/web/css/env()/index.html b/files/zh-cn/web/css/env()/index.html deleted file mode 100644 index 60f45d0e97..0000000000 --- a/files/zh-cn/web/css/env()/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: env() -slug: Web/CSS/env() -tags: - - CSS - - env - - env() - - iPhoneX -translation_of: Web/CSS/env() ---- -
    {{CSSRef}}
    - -
     env() CSS 函数以类似于 {{cssxref("var")}} 函数和 custom properties 的方式将用户代理定义的环境变量值插入你的 CSS 中。区别在于，环境变量除了由用户代理定义而不是由用户定义外，还被全局作用在文档中，而自定义属性则限定在声明它们的元素中。
    - - - -
    为了告诉浏览器使用屏幕上所有的可用空间，并以此使用env()变量，我们需要添加一个新的视口元值：
    - -
    -
    <meta name="viewport" content="... viewport-fit=cover">
    -
    - -
    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);
-}
    - -

    另外，与自定义属性不同，自定义属性不能在声明之外使用，而env()函数可以代替属性值或描述符的任何部分（例如，在 媒体查询的规则 中）。 随着规范的发展，它也可能在像是 选择器 等其他地方使用。

    - -

    最初由iOS浏览器提供，用于允许开发人员将其内容放置在视口的安全区域中，该规范中定义的safe-area-inset-* 值可用于确保内容即使在非矩形的视区中也可以完全显示。

    - -

    语法

    - -
    /* Using the four safe area inset values with no fallback values */
-env(safe-area-inset-top);
-env(safe-area-inset-right);
-env(safe-area-inset-bottom);
-env(safe-area-inset-left);
-
-/* Using them with fallback values */
-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);
-
    - -

    Values

    - -
    -
    safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left
    -
    safe-area-inset-*由四个定义了视口边缘内矩形的 top, right, bottom 和 left 的环境变量组成，这样可以安全地放入内容，而不会有被非矩形的显示切断的风险。对于矩形视口，例如普通的笔记本电脑显示器，其值等于零。 对于非矩形显示器（如圆形表盘，iPhoneX屏幕），在用户代理设置的四个值形成的矩形内，所有内容均可见。
    -
    - -

    注意: 不同于其他的 CSS 属性，用户代理定义的属性名字对大小写敏感。

    - -

    Formal syntax

    - -{{CSSSyntax}} - -

    Examples

    - -

    下面的示例使用env()的第二个可选参数，如果环境变量不可用，该参数可让您设置备用值

    - -
    <p>
-  If the <code>env()</code> function is supported in your browser,
-  this paragraph’s text will have 50px of padding between it and
-  the left border — but not the top, right and bottom.
-  This is because the accompanying CSS is the equivalent of
-  <code>padding: 0 0 0 50px</code>, because, unlike other CSS
-  properties, user agent property names are case-sensitive.
-</p>
    - -
    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);
-}
    - -

    {{EmbedLiveSample("Examples")}}

    - -

    Example values

    - -
    padding: env(safe-area-inset-bottom, 50px); /* zero for all rectangular user agents */
-padding: env(Safe-area-inset-bottom, 50px); /* 50px because UA properties are case sensitive */
-padding: env(x, 50px 20px); /* as if padding: '50px 20px' were set because x is not a valid environment variable */
-padding: env(x, 50px, 20px); /* ignored because '50px, 20px' is not a valid padding value and x is not a valid environment variable */
-
    - -

    向下兼容的语法和自定义属性一样，允许使用逗号。但是如果属性值不支持逗号，则该值无效。

    - -

    Note: User agent properties are not reset by the all property.

    - -

    Specifications

    - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName("CSS3 Environment Variables", "#env-function", "env()")}}{{Spec2("CSS3 Environment Variables")}}Initial definition.
    - -

    Browser compatibility

    - - - -

    {{Compat("css.properties.custom-property.env")}}

    - -

    See also

    - - diff --git a/files/zh-cn/web/css/env/index.html b/files/zh-cn/web/css/env/index.html new file mode 100644 index 0000000000..c8983fb967 --- /dev/null +++ b/files/zh-cn/web/css/env/index.html @@ -0,0 +1,134 @@ +--- +title: env() +slug: Web/CSS/env +tags: + - CSS + - env + - env() + - iPhoneX +translation_of: Web/CSS/env() +original_slug: Web/CSS/env() +--- +
    {{CSSRef}}
    + +
     env() CSS 函数以类似于 {{cssxref("var")}} 函数和 custom properties 的方式将用户代理定义的环境变量值插入你的 CSS 中。区别在于，环境变量除了由用户代理定义而不是由用户定义外，还被全局作用在文档中，而自定义属性则限定在声明它们的元素中。
    + + + +
    为了告诉浏览器使用屏幕上所有的可用空间，并以此使用env()变量，我们需要添加一个新的视口元值：
    + +
    +
    <meta name="viewport" content="... viewport-fit=cover">
    +
    + +
    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);
+}
    + +

    另外，与自定义属性不同，自定义属性不能在声明之外使用，而env()函数可以代替属性值或描述符的任何部分（例如，在 媒体查询的规则 中）。 随着规范的发展，它也可能在像是 选择器 等其他地方使用。

    + +

    最初由iOS浏览器提供，用于允许开发人员将其内容放置在视口的安全区域中，该规范中定义的safe-area-inset-* 值可用于确保内容即使在非矩形的视区中也可以完全显示。

    + +

    语法

    + +
    /* Using the four safe area inset values with no fallback values */
+env(safe-area-inset-top);
+env(safe-area-inset-right);
+env(safe-area-inset-bottom);
+env(safe-area-inset-left);
+
+/* Using them with fallback values */
+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);
+
    + +

    Values

    + +
    +
    safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left
    +
    safe-area-inset-*由四个定义了视口边缘内矩形的 top, right, bottom 和 left 的环境变量组成，这样可以安全地放入内容，而不会有被非矩形的显示切断的风险。对于矩形视口，例如普通的笔记本电脑显示器，其值等于零。 对于非矩形显示器（如圆形表盘，iPhoneX屏幕），在用户代理设置的四个值形成的矩形内，所有内容均可见。
    +
    + +

    注意: 不同于其他的 CSS 属性，用户代理定义的属性名字对大小写敏感。

    + +

    Formal syntax

    + +{{CSSSyntax}} + +

    Examples

    + +

    下面的示例使用env()的第二个可选参数，如果环境变量不可用，该参数可让您设置备用值

    + +
    <p>
+  If the <code>env()</code> function is supported in your browser,
+  this paragraph’s text will have 50px of padding between it and
+  the left border — but not the top, right and bottom.
+  This is because the accompanying CSS is the equivalent of
+  <code>padding: 0 0 0 50px</code>, because, unlike other CSS
+  properties, user agent property names are case-sensitive.
+</p>
    + +
    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);
+}
    + +

    {{EmbedLiveSample("Examples")}}

    + +

    Example values

    + +
    padding: env(safe-area-inset-bottom, 50px); /* zero for all rectangular user agents */
+padding: env(Safe-area-inset-bottom, 50px); /* 50px because UA properties are case sensitive */
+padding: env(x, 50px 20px); /* as if padding: '50px 20px' were set because x is not a valid environment variable */
+padding: env(x, 50px, 20px); /* ignored because '50px, 20px' is not a valid padding value and x is not a valid environment variable */
+
    + +

    向下兼容的语法和自定义属性一样，允许使用逗号。但是如果属性值不支持逗号，则该值无效。

    + +

    Note: User agent properties are not reset by the all property.

    + +

    Specifications

    + + + + + + + + + + + + + + + + +
    SpecificationStatusComment
    {{SpecName("CSS3 Environment Variables", "#env-function", "env()")}}{{Spec2("CSS3 Environment Variables")}}Initial definition.
    + +

    Browser compatibility

    + + + +

    {{Compat("css.properties.custom-property.env")}}

    + +

    See also

    + + diff --git a/files/zh-cn/web/css/filter-function/blur()/index.html b/files/zh-cn/web/css/filter-function/blur()/index.html deleted file mode 100644 index 693f0a5bbe..0000000000 --- a/files/zh-cn/web/css/filter-function/blur()/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: blur() -slug: Web/CSS/filter-function/blur() -tags: - - CSS - - CSS Function - - Filter Effects - - Reference -translation_of: Web/CSS/filter-function/blur() ---- -
    {{cssref}}
    - -

    blur() CSS 方法将高斯模糊应用于输出图片. 结果为 {{cssxref("<filter-function>")}}.

    - -
    {{EmbedInteractiveExample("pages/css/function-blur.html")}}
    - - - -

    语法

    - -
    blur(radius)
    - -

    值

    - -
    -
    radius
    -
    模糊的半径，值为{{cssxref("<length>")}}。 它定义了高斯函数的标准偏差值，即屏幕上有多少像素相互融合; 因此，较大的值会产生更多模糊。 值为0会使输入保持不变。 该值为空则为0。
    -
    - -

    示例

    - -
    blur(0)        /* No effect */
-blur(8px)      /* Blur with 8px radius */
-blur(1.17rem)  /* Blur with 1.17rem radius */
    - -

    参见

    - -
      -
    • {{cssxref("<filter-function>")}}
      • -
    • {{cssxref("filter-function/brightness", "brightness()")}}
      • -
    • {{cssxref("filter-function/contrast", "contrast()")}}
      • -
    • {{cssxref("filter-function/drop-shadow", "drop-shadow()")}}
      • -
    • {{cssxref("filter-function/grayscale", "grayscale()")}}
      • -
    • {{cssxref("filter-function/hue-rotate", "hue-rotate()")}}​​​​​​​
      • -
    • {{cssxref("filter-function/invert", "invert()")}}
      • -
    • {{cssxref("filter-function/opacity", "opacity()")}}
      • -
    • {{cssxref("filter-function/saturate", "saturate()")}}
      • -
    • {{cssxref("filter-function/sepia", "sepia()")}}
      • -
    diff --git a/files/zh-cn/web/css/filter-function/blur/index.html b/files/zh-cn/web/css/filter-function/blur/index.html new file mode 100644 index 0000000000..16db8075c1 --- /dev/null +++ b/files/zh-cn/web/css/filter-function/blur/index.html @@ -0,0 +1,50 @@ +--- +title: blur() +slug: Web/CSS/filter-function/blur +tags: + - CSS + - CSS Function + - Filter Effects + - Reference +translation_of: Web/CSS/filter-function/blur() +original_slug: Web/CSS/filter-function/blur() +--- +
    {{cssref}}
    + +

    blur() CSS 方法将高斯模糊应用于输出图片. 结果为 {{cssxref("<filter-function>")}}.

    + +
    {{EmbedInteractiveExample("pages/css/function-blur.html")}}
    + + + +

    语法

    + +
    blur(radius)
    + +

    值

    + +
    +
    radius
    +
    模糊的半径，值为{{cssxref("<length>")}}。 它定义了高斯函数的标准偏差值，即屏幕上有多少像素相互融合; 因此，较大的值会产生更多模糊。 值为0会使输入保持不变。 该值为空则为0。
    +
    + +

    示例

    + +
    blur(0)        /* No effect */
+blur(8px)      /* Blur with 8px radius */
+blur(1.17rem)  /* Blur with 1.17rem radius */
    + +

    参见

    + +
      +
    • {{cssxref("<filter-function>")}}
      • +
    • {{cssxref("filter-function/brightness", "brightness()")}}
      • +
    • {{cssxref("filter-function/contrast", "contrast()")}}
      • +
    • {{cssxref("filter-function/drop-shadow", "drop-shadow()")}}
      • +
    • {{cssxref("filter-function/grayscale", "grayscale()")}}
      • +
    • {{cssxref("filter-function/hue-rotate", "hue-rotate()")}}​​​​​​​
      • +
    • {{cssxref("filter-function/invert", "invert()")}}
      • +
    • {{cssxref("filter-function/opacity", "opacity()")}}
      • +
    • {{cssxref("filter-function/saturate", "saturate()")}}
      • +
    • {{cssxref("filter-function/sepia", "sepia()")}}
      • +
    diff --git a/files/zh-cn/web/css/filter-function/brightness()/index.html b/files/zh-cn/web/css/filter-function/brightness()/index.html deleted file mode 100644 index f7ec2f77d5..0000000000 --- a/files/zh-cn/web/css/filter-function/brightness()/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: brightness() -slug: Web/CSS/filter-function/brightness() -translation_of: Web/CSS/filter-function/brightness() ---- -
    {{cssref}}
    - -

    brightness() CSS函数将线性乘数应用于输入图像，使其看起来更亮或更暗。 结果是一个{{cssxref("<filter-function>")}}.

    - -
    {{EmbedInteractiveExample("pages/css/function-brightness.html")}}
    - - - -

    语法

    - -
    brightness(amount)
    - -

    值

    - -
    -
    amount
    -
    输出的亮度值取决于{{cssxref("<number>")}}或{{cssxref("<percentage>")}}的大小. 低于100% 的值会使图片变暗, 超过100%的值将会使其变亮.当值为0%时将会创建一个全黑的图像, 当值为100%时不会有任何变化. 该值为空时默认为1.
    -
    - -

    例子

    - -
    brightness(0%)   /* 全黑 */
-brightness(0.4)  /* 40% 亮度 */
-brightness(1)    /* 无效果 */
-brightness(200%) /* 两倍亮度 */
    - -

    参见

    - -
      -
    • {{cssxref("<filter-function>")}}
      • -
    diff --git a/files/zh-cn/web/css/filter-function/brightness/index.html b/files/zh-cn/web/css/filter-function/brightness/index.html new file mode 100644 index 0000000000..2ef73de214 --- /dev/null +++ b/files/zh-cn/web/css/filter-function/brightness/index.html @@ -0,0 +1,37 @@ +--- +title: brightness() +slug: Web/CSS/filter-function/brightness +translation_of: Web/CSS/filter-function/brightness() +original_slug: Web/CSS/filter-function/brightness() +--- +
    {{cssref}}
    + +

    brightness() CSS函数将线性乘数应用于输入图像，使其看起来更亮或更暗。 结果是一个{{cssxref("<filter-function>")}}.

    + +
    {{EmbedInteractiveExample("pages/css/function-brightness.html")}}
    + + + +

    语法

    + +
    brightness(amount)
    + +

    值

    + +
    +
    amount
    +
    输出的亮度值取决于{{cssxref("<number>")}}或{{cssxref("<percentage>")}}的大小. 低于100% 的值会使图片变暗, 超过100%的值将会使其变亮.当值为0%时将会创建一个全黑的图像, 当值为100%时不会有任何变化. 该值为空时默认为1.
    +
    + +

    例子

    + +
    brightness(0%)   /* 全黑 */
+brightness(0.4)  /* 40% 亮度 */
+brightness(1)    /* 无效果 */
+brightness(200%) /* 两倍亮度 */
    + +

    参见

    + +
      +
    • {{cssxref("<filter-function>")}}
      • +
    diff --git a/files/zh-cn/web/css/filter-function/contrast()/index.html b/files/zh-cn/web/css/filter-function/contrast()/index.html deleted file mode 100644 index e03364015d..0000000000 --- a/files/zh-cn/web/css/filter-function/contrast()/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: contrast() -slug: Web/CSS/filter-function/contrast() -translation_of: Web/CSS/filter-function/contrast() ---- -
    {{cssref}}
    - -

    contrast() CSS 函数调整输入图像的对比度. 结果是一个 {{cssxref("<filter-function>")}}.

    - -
    {{EmbedInteractiveExample("pages/css/function-contrast.html")}}
    - - - -

    语法

    - -
    contrast(amount)
    - -

    参数

    - -
    -
    amount
    -
    输出的对比度取决于 {{cssxref("<number>")}}或者{{cssxref("<percentage>")}}的大小. 低于 100%  的值会降低对比度, 高于 100% 的值会增加对比度. 值为 0% 将创建完全灰色的图像, 值为 100% 时不会有任何变化. 该值为空时默认为 1.
    -
    - -

    例子

    - -
    contrast(0)     /* 完全灰色 */
-contrast(65%)   /* 65% 对比度 */
-contrast(1)     /* 无效果 */
-contrast(200%)  /* 两倍对比度 */
    - -

    参见

    - -
      -
    • {{cssxref("<filter-function>")}}
      • -
    • {{cssxref("filter-function/blur", "blur()")}}
      • -
    • {{cssxref("filter-function/brightness", "brightness()")}}
      • -
    • {{cssxref("filter-function/drop-shadow", "drop-shadow()")}}
      • -
    • {{cssxref("filter-function/grayscale", "grayscale()")}}
      • -
    • {{cssxref("filter-function/hue-rotate", "hue-rotate()")}}
      • -
    • {{cssxref("filter-function/invert", "invert()")}}
      • -
    • {{cssxref("filter-function/opacity", "opacity()")}}
      • -
    • {{cssxref("filter-function/saturate", "saturate()")}}
      • -
    • {{cssxref("filter-function/sepia", "sepia()")}}
      • -
    diff --git a/files/zh-cn/web/css/filter-function/contrast/index.html b/files/zh-cn/web/css/filter-function/contrast/index.html new file mode 100644 index 0000000000..b1f92f421f --- /dev/null +++ b/files/zh-cn/web/css/filter-function/contrast/index.html @@ -0,0 +1,46 @@ +--- +title: contrast() +slug: Web/CSS/filter-function/contrast +translation_of: Web/CSS/filter-function/contrast() +original_slug: Web/CSS/filter-function/contrast() +--- +
    {{cssref}}
    + +

    contrast() CSS 函数调整输入图像的对比度. 结果是一个 {{cssxref("<filter-function>")}}.

    + +
    {{EmbedInteractiveExample("pages/css/function-contrast.html")}}
    + + + +

    语法

    + +
    contrast(amount)
    + +

    参数

    + +
    +
    amount
    +
    输出的对比度取决于 {{cssxref("<number>")}}或者{{cssxref("<percentage>")}}的大小. 低于 100%  的值会降低对比度, 高于 100% 的值会增加对比度. 值为 0% 将创建完全灰色的图像, 值为 100% 时不会有任何变化. 该值为空时默认为 1.
    +
    + +

    例子

    + +
    contrast(0)     /* 完全灰色 */
+contrast(65%)   /* 65% 对比度 */
+contrast(1)     /* 无效果 */
+contrast(200%)  /* 两倍对比度 */
    + +

    参见

    + +
      +
    • {{cssxref("<filter-function>")}}
      • +
    • {{cssxref("filter-function/blur", "blur()")}}
      • +
    • {{cssxref("filter-function/brightness", "brightness()")}}
      • +
    • {{cssxref("filter-function/drop-shadow", "drop-shadow()")}}
      • +
    • {{cssxref("filter-function/grayscale", "grayscale()")}}
      • +
    • {{cssxref("filter-function/hue-rotate", "hue-rotate()")}}
      • +
    • {{cssxref("filter-function/invert", "invert()")}}
      • +
    • {{cssxref("filter-function/opacity", "opacity()")}}
      • +
    • {{cssxref("filter-function/saturate", "saturate()")}}
      • +
    • {{cssxref("filter-function/sepia", "sepia()")}}
      • +
    diff --git a/files/zh-cn/web/css/filter-function/drop-shadow()/index.html b/files/zh-cn/web/css/filter-function/drop-shadow()/index.html deleted file mode 100644 index 7875c9932f..0000000000 --- a/files/zh-cn/web/css/filter-function/drop-shadow()/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: drop-shadow() -slug: Web/CSS/filter-function/drop-shadow() -translation_of: Web/CSS/filter-function/drop-shadow() ---- -
    {{cssref}}
    - -

    The drop-shadow() CSS function applies a drop shadow effect to the input image. Its result is a {{cssxref("<filter-function>")}}.

    - -
    {{EmbedInteractiveExample("pages/css/function-drop-shadow.html")}}
    - - - -

    投影实际上是输入图像的alpha蒙版的一个模糊的、偏移的版本，用特定的颜色绘制并合成在图像下面。

    - -
    -

    注意: 这个函数有点类似于 {{Cssxref("box-shadow")}} 属性.  box-shadow 属性在元素的整个框后面创建一个矩形阴影, 而 drop-shadow() 过滤器则是创建一个符合图像本身形状(alpha通道)的阴影。

    -
    - -

    Syntax

    - -
    drop-shadow(offset-x offset-y blur-radius spread-radius color)
    - -

    The drop-shadow() function accepts a parameter of type <shadow> (defined in the {{cssxref("box-shadow")}} property), with the exception that the inset keyword is not allowed.

    - -

    Parameters

    - -
    -
    offset-x offset-y (required)
    -
    offset-x指定水平距离，其中负值将阴影放置到元素的左侧。offset-y指定垂直距离，其中负值将阴影置于元素之上。如果两个值都为 0，则阴影直接放置在元素后面。
    -
    blur-radius (optional)
    -
    阴影的模糊半径，指定为 {{cssxref("<length>")}}。值越大，阴影就越大，也越模糊。如果未指定，则默认为 0，从而产生清晰、不模糊的边缘。不允许有负值。
    -
    spread-radius (optional)
    -
    阴影的扩展半径，指定为 {{cssxref("<length>")}}. 正的值会导致阴影扩大和变大，而负的值会导致阴影缩小。如果未指定，则默认为0，阴影的大小将与输入图像相同。
    -
    -
    大多数浏览器不支持这个参数;如果使用，效果将不会呈现。截止2020年10,14日,Chrome  v.85.0.4183.121（正式版本）,Microsoft Edge Beta  v85.0.564.63(64位), Firefox v.85.0.564.63 暂未支持
    -
    -
    color (optional)
    -
    阴影的颜色，指定为 {{cssxref("<color>")}}。如果未指定，则使用 {{cssxref("color")}} 属性的值。
    -
    - -

    Examples

    - -
    /* Black shadow with 10px blur */
-drop-shadow(16px 16px 10px black)
-
-/* Reddish shadow with 1rem blur and .3rem spread */
-/* WARNING: not generally supported by browsers */
-drop-shadow(.5rem .5rem 1rem .3rem #e23)
    - -

    See also

    - -
      -
    • {{cssxref("<filter-function>")}}
      • -
    • CSS {{cssxref("box-shadow")}} property
      • -
    • {{cssxref("filter-function/blur", "blur()")}}
      • -
    • {{cssxref("filter-function/brightness", "brightness()")}}
      • -
    • {{cssxref("filter-function/contrast", "contrast()")}}
      • -
    • {{cssxref("filter-function/grayscale", "grayscale()")}}
      • -
    • {{cssxref("filter-function/hue-rotate", "hue-rotate()")}}
      • -
    • {{cssxref("filter-function/invert", "invert()")}}
      • -
    • {{cssxref("filter-function/opacity", "opacity()")}}
      • -
    • {{cssxref("filter-function/saturate", "saturate()")}}
      • -
    • {{cssxref("filter-function/sepia", "sepia()")}}
      • -
    diff --git a/files/zh-cn/web/css/filter-function/drop-shadow/index.html b/files/zh-cn/web/css/filter-function/drop-shadow/index.html new file mode 100644 index 0000000000..6d43817560 --- /dev/null +++ b/files/zh-cn/web/css/filter-function/drop-shadow/index.html @@ -0,0 +1,66 @@ +--- +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() +--- +
    {{cssref}}
    + +

    The drop-shadow() CSS function applies a drop shadow effect to the input image. Its result is a {{cssxref("<filter-function>")}}.

    + +
    {{EmbedInteractiveExample("pages/css/function-drop-shadow.html")}}
    + + + +

    投影实际上是输入图像的alpha蒙版的一个模糊的、偏移的版本，用特定的颜色绘制并合成在图像下面。

    + +
    +

    注意: 这个函数有点类似于 {{Cssxref("box-shadow")}} 属性.  box-shadow 属性在元素的整个框后面创建一个矩形阴影, 而 drop-shadow() 过滤器则是创建一个符合图像本身形状(alpha通道)的阴影。

    +
    + +

    Syntax

    + +
    drop-shadow(offset-x offset-y blur-radius spread-radius color)
    + +

    The drop-shadow() function accepts a parameter of type <shadow> (defined in the {{cssxref("box-shadow")}} property), with the exception that the inset keyword is not allowed.

    + +

    Parameters

    + +
    +
    offset-x offset-y (required)
    +
    offset-x指定水平距离，其中负值将阴影放置到元素的左侧。offset-y指定垂直距离，其中负值将阴影置于元素之上。如果两个值都为 0，则阴影直接放置在元素后面。
    +
    blur-radius (optional)
    +
    阴影的模糊半径，指定为 {{cssxref("<length>")}}。值越大，阴影就越大，也越模糊。如果未指定，则默认为 0，从而产生清晰、不模糊的边缘。不允许有负值。
    +
    spread-radius (optional)
    +
    阴影的扩展半径，指定为 {{cssxref("<length>")}}. 正的值会导致阴影扩大和变大，而负的值会导致阴影缩小。如果未指定，则默认为0，阴影的大小将与输入图像相同。
    +
    +
    大多数浏览器不支持这个参数;如果使用，效果将不会呈现。截止2020年10,14日,Chrome  v.85.0.4183.121（正式版本）,Microsoft Edge Beta  v85.0.564.63(64位), Firefox v.85.0.564.63 暂未支持
    +
    +
    color (optional)
    +
    阴影的颜色，指定为 {{cssxref("<color>")}}。如果未指定，则使用 {{cssxref("color")}} 属性的值。
    +
    + +

    Examples

    + +
    /* Black shadow with 10px blur */
+drop-shadow(16px 16px 10px black)
+
+/* Reddish shadow with 1rem blur and .3rem spread */
+/* WARNING: not generally supported by browsers */
+drop-shadow(.5rem .5rem 1rem .3rem #e23)
    + +

    See also

    + +
      +
    • {{cssxref("<filter-function>")}}
      • +
    • CSS {{cssxref("box-shadow")}} property
      • +
    • {{cssxref("filter-function/blur", "blur()")}}
      • +
    • {{cssxref("filter-function/brightness", "brightness()")}}
      • +
    • {{cssxref("filter-function/contrast", "contrast()")}}
      • +
    • {{cssxref("filter-function/grayscale", "grayscale()")}}
      • +
    • {{cssxref("filter-function/hue-rotate", "hue-rotate()")}}
      • +
    • {{cssxref("filter-function/invert", "invert()")}}
      • +
    • {{cssxref("filter-function/opacity", "opacity()")}}
      • +
    • {{cssxref("filter-function/saturate", "saturate()")}}
      • +
    • {{cssxref("filter-function/sepia", "sepia()")}}
      • +
    diff --git a/files/zh-cn/web/css/filter-function/grayscale()/index.html b/files/zh-cn/web/css/filter-function/grayscale()/index.html deleted file mode 100644 index 6f7793c6b0..0000000000 --- a/files/zh-cn/web/css/filter-function/grayscale()/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: grayscale() -slug: Web/CSS/filter-function/grayscale() -translation_of: Web/CSS/filter-function/grayscale() ---- -
    {{cssref}}
    - -

    grayscale() : 对图片进行灰度转换, 它是 {{cssxref("<filter-function>")}} 的子属性.

    - -
    {{EmbedInteractiveExample("pages/css/function-grayscale.html")}}
    - - - -

    语法

    - -
    grayscale(amount)
    - -

    参数

    - -
    -
    amount
    -
    转换值的大小, 可以是{{cssxref("<number>")}} 或 {{cssxref("<percentage>")}}. 当值为100%时, 灰度最大. 0%时与原图没有区别. 0% 到 100% 之间的值会使灰度线性变化. amount 为空时使用值为1.
    -
    - -

    例子

    - -
    grayscale(0)     /* 无效果 */
-grayscale(.7)    /* 70% 灰度 */
-grayscale(100%)  /* 灰度最大 */
    - -

    更多

    - -
      -
    • {{cssxref("<filter-function>")}}
      • -
    diff --git a/files/zh-cn/web/css/filter-function/grayscale/index.html b/files/zh-cn/web/css/filter-function/grayscale/index.html new file mode 100644 index 0000000000..da30a13478 --- /dev/null +++ b/files/zh-cn/web/css/filter-function/grayscale/index.html @@ -0,0 +1,36 @@ +--- +title: grayscale() +slug: Web/CSS/filter-function/grayscale +translation_of: Web/CSS/filter-function/grayscale() +original_slug: Web/CSS/filter-function/grayscale() +--- +
    {{cssref}}
    + +

    grayscale() : 对图片进行灰度转换, 它是 {{cssxref("<filter-function>")}} 的子属性.

    + +
    {{EmbedInteractiveExample("pages/css/function-grayscale.html")}}
    + + + +

    语法

    + +
    grayscale(amount)
    + +

    参数

    + +
    +
    amount
    +
    转换值的大小, 可以是{{cssxref("<number>")}} 或 {{cssxref("<percentage>")}}. 当值为100%时, 灰度最大. 0%时与原图没有区别. 0% 到 100% 之间的值会使灰度线性变化. amount 为空时使用值为1.
    +
    + +

    例子

    + +
    grayscale(0)     /* 无效果 */
+grayscale(.7)    /* 70% 灰度 */
+grayscale(100%)  /* 灰度最大 */
    + +

    更多

    + +
      +
    • {{cssxref("<filter-function>")}}
      • +
    diff --git a/files/zh-cn/web/css/filter-function/opacity()/index.html b/files/zh-cn/web/css/filter-function/opacity()/index.html deleted file mode 100644 index 877b0dcf4e..0000000000 --- a/files/zh-cn/web/css/filter-function/opacity()/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: opacity() -slug: Web/CSS/filter-function/opacity() -translation_of: Web/CSS/filter-function/opacity() ---- -
    {{cssref}}
    - -

    The opacity() CSS 函数在输入的图片实例上应用透明度属性，它的结果是一个 {{cssxref("<filter-function>")}}.

    - -
    {{EmbedInteractiveExample("pages/css/function-opacity.html")}}
    - - - -
    -

    Note: 这个函数与其他既有的{{Cssxref("opacity")}}属性类似，区别在于有了filters，有些浏览器会提供硬件加速以获取更好的性能表现。

    -
    - -

    语法

    - -
    opacity(amount)
    - -

    参数

    - -
    -
    amount
    -
    转化的数值，要求是一个 {{cssxref("<number>")}} 或一个 {{cssxref("<percentage>")}}（百分比）。值为 0% 是完全透明的,值为100%会保留原来的效果。值在0%与100%之间效果为线性变化的，参数的最小差值为1。
    -
    - -

    Examples

    - -
    opacity(0%)   /* 完全透明*/
-opacity(50%)  /* 50% 透明 */
-opacity(1)    /* 无效果 */
    - -

    See also

    - -
      -
    • {{cssxref("<filter-function>")}}
      • -
    • CSS {{cssxref("opacity")}} property
      • -
    diff --git a/files/zh-cn/web/css/filter-function/opacity/index.html b/files/zh-cn/web/css/filter-function/opacity/index.html new file mode 100644 index 0000000000..df97b35a57 --- /dev/null +++ b/files/zh-cn/web/css/filter-function/opacity/index.html @@ -0,0 +1,41 @@ +--- +title: opacity() +slug: Web/CSS/filter-function/opacity +translation_of: Web/CSS/filter-function/opacity() +original_slug: Web/CSS/filter-function/opacity() +--- +
    {{cssref}}
    + +

    The opacity() CSS 函数在输入的图片实例上应用透明度属性，它的结果是一个 {{cssxref("<filter-function>")}}.

    + +
    {{EmbedInteractiveExample("pages/css/function-opacity.html")}}
    + + + +
    +

    Note: 这个函数与其他既有的{{Cssxref("opacity")}}属性类似，区别在于有了filters，有些浏览器会提供硬件加速以获取更好的性能表现。

    +
    + +

    语法

    + +
    opacity(amount)
    + +

    参数

    + +
    +
    amount
    +
    转化的数值，要求是一个 {{cssxref("<number>")}} 或一个 {{cssxref("<percentage>")}}（百分比）。值为 0% 是完全透明的,值为100%会保留原来的效果。值在0%与100%之间效果为线性变化的，参数的最小差值为1。
    +
    + +

    Examples

    + +
    opacity(0%)   /* 完全透明*/
+opacity(50%)  /* 50% 透明 */
+opacity(1)    /* 无效果 */
    + +

    See also

    + +
      +
    • {{cssxref("<filter-function>")}}
      • +
    • CSS {{cssxref("opacity")}} property
      • +
    diff --git a/files/zh-cn/web/css/gradient/linear-gradient()/index.html b/files/zh-cn/web/css/gradient/linear-gradient()/index.html deleted file mode 100644 index 670d14976a..0000000000 --- a/files/zh-cn/web/css/gradient/linear-gradient()/index.html +++ /dev/null @@ -1,281 +0,0 @@ ---- -title: linear-gradient() -slug: Web/CSS/gradient/linear-gradient() -translation_of: Web/CSS/gradient/linear-gradient() -tags: - - CSS - - CSS Function - - CSS Images - - Function - - Graphics - - Layout - - Reference - - Web - - gradient -browser-compat: css.types.image.gradient.linear-gradient - ---- -

    {{CSSRef}}

    - -

    CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于{{cssxref("<gradient>")}}数据类型，是一种特别的{{cssxref("<image>")}}数据类型。

    - -
    /* 渐变轴为45度，从蓝色渐变到红色 */
-linear-gradient(45deg, blue, red);
-
-/* 从右下到左上、从蓝色渐变到红色 */
-linear-gradient(to left top, blue, red);
-
-/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
-linear-gradient(0deg, blue, green 40%, red);
    - -
    {{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}}  
    - -

    如同其他gradient函数一般，linear-gradient() 函数没有内在尺寸；即，它不具备固有的或首选的尺寸，也不具备首选的比率。该函数的具体尺寸将与其适用的元素尺寸匹配。

    - -
    提示：利用{{cssxref("repeating-linear-gradient")}}函数可以实现线形重复渐变效果。
    - -
    提示：由于<gradient>数据类型系<image>的子数据类型，<gradient>只能被用于<image>可以使用的地方。因此，linear-gradient() 并不适用于{{Cssxref("background-color")}}以及类似的使用 {{cssxref("<color>")}}数据类型的属性中。
    - -

    线形渐变的构成

    - -

    线性渐变由一个轴 (梯度线) 定义，其上的每个点具有两种或多种的颜色，且轴上的每个点都具有独立的颜色。为了构建出平滑的渐变，linear-gradient() 函数构建一系列垂直于渐变线的着色线，每一条着色线的颜色则取决于与之垂直相交的渐变线上的色点

    - -

    linear-gradient.png渐变线由包含渐变图形的容器的中心点和一个角度来定义的。渐变线上的颜色值是由不同的点来定义，包括起始点，终点，以及两者之间的可选的中间点（中间点可以有多个）。

    - -

    起始点是渐变线上代表起始颜色值的点。起始点由渐变线和过容器顶点的垂直线之间的交叉点来定义。（垂直线跟渐变线在同一象限内）

    - -

    同样的，终点是渐变线上代表最终颜色值的点。终点也是由渐变线和从最近的顶点发出的垂直线之间的交叉点定义的，然而从起始点的对称点来定义终点是更容易理解的一种方式，因为终点是起点关于容器的中心点的反射点。

    - -

    关于起点和终点的稍微有些复杂的定义导致了一个有趣的性质，有时候被叫做不可思议的顶点效应：起点附近的点具有跟起点相同的颜色值，终点附近的点具有跟终点相同的颜色值。

    - -

    不仅仅只有起点和终点的颜色值可以指定。通过提供额外的颜色中间点，Web开发者可以构建在起始颜色值和终点颜色值之间的自定义更强的过渡效果，另外还可以提供多种颜色值的渐变线。

    - -

    当颜色中间点的位置被隐式定义，它被放置在位于它之前的点和位于它之后的点之间的中间位置处。利用{{cssxref("<length>")}}或者{{cssxref("<percentage>")}}数据类型可以显示定义一个位置。

    - -
    linear-gradient(red, orange, yellow, green, blue);
-linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);看看
-
    - -

    默认情况下，从一个颜色的终止点平滑的过渡到另一个颜色的终止点，颜色之间的中点是两个颜色颜色转换的中点。你可以将中点移动到这两个颜色之间的任意位置，方法是在两个颜色之间添加未标记的 %，以指示颜色的中转位置。下面的示例是从起始点到10%的位置标记红色，从90%到结束标记蓝色。在10%到90%之间，颜色从红色过渡到蓝色，然而过渡的中点是在30%的标记上，而不是在没有30%中转点的情况下会默认为50%。

    - -
    linear-gradient(red 10%, 30%, blue 90%);
    - -

    如果两个或多个颜色终止在同一位置，则在该位置声明的第一个颜色和最后一个颜色之间的过渡将是一条生硬线。

    - -

    颜色终止列表中颜色的终止点应该是依次递增的。如果后面的颜色终止点小于前面颜色的终止点则后面的会被覆盖，从而创建一个硬转换。下面的变化是从红色到黄色在40%的位置，然后过渡从黄色到蓝色终止于65%的位置处。

    - -
    linear-gradient(red 40%, yellow 30%, blue 65%);
    - -

    允许颜色多个颜色终止位置。通过在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%);
    - -

    默认情况下，如果不带0%终止的颜色，则在该点声明的第一个颜色。类似地，最后一种颜色将持续到100%标记，或者如果在最后一个没有声明长度，则在100%标记处。

    - -

    语法

    - -

    值

    - -
    -
    <side-or-corner>
    -
    描述渐变线的起始点位置。它包含to和两个关键词：第一个指出水平位置left or right，第二个指出垂直位置top or bottom。关键词的先后顺序无影响，且都是可选的。
    - to top, to bottom, to left 和 to right这些值会被转换成角度0度、180度、270度和90度。其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。渐变线的结束点与其起点中心对称。
    -
    <angle>
    -
    用角度值指定渐变的方向（或角度）。角度顺时针增加。 
    -
    <linear-color-stop>
    -
    由一个{{cssxref("<color>")}}值组成，并且跟随着一个可选的终点位置（可以是一个百分比值或者是沿着渐变轴的{{cssxref("<length>")}}）。CSS渐变的颜色渲染采取了与SVG相同的规则。
    -
    - -
    -
    <color-hint>
    -
    - -

    颜色中转点是一个插值提示，它定义了在相邻颜色之间渐变如何进行。长度定义了在两种颜色之间的哪个点停止渐变颜色应该达到颜色过渡的中点。如果省略，颜色转换的中点是两个颜色停止之间的中点。 

    - -
    -
    -
    提示：渲染颜色中间点的规则 color stops in CSS gradients与一致 SVG gradients。
    - -

    正式语法

    - - 
    linear-gradient(
-  [ <angle> | to <side-or-corner> ,]? <color-stop-list> )
-  \---------------------------------/ \----------------------------/
-    Definition of the gradient line        List of color stops
-
-where <side-or-corner> = [ left | right ] || [ top | bottom ]
-  and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
-  and <linear-color-stop> = <color> [ <color-stop-length> ]?
-  and <color-stop-length> = [ <percentage> | <length> ]{1,2}
-  and <color-hint> = [ <percentage> | <length> ]
-
    -
    -
    - -

    语法历史

    - -

    linear-gradient的语法由2008年实施的first Apple proposal发展而来。

    - -
    -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
-
    - -

    在最初语法中，使用同样的语法实现线性渐变和径向渐变。但这两种渐变所需要的参数有所不同，导致了需要增加第一个参数来区分两种渐变。如果再增加渐变类型，这样的处理方式会变得更加复杂。比如锥形渐变，需要用到函数和不规范的CSS值。W3C并未收到相关草案。

    - -

    一个替代语法在2009年由Mozilla提出并实现。这个语法需要两个CSS函数，一个用来做线性渐变，另一个用于径向渐变。然而，这个语法并没有被发布产品实现。有人提出了第三种语法，它将线性渐变的语法简化为：

    - -
    -moz-linear-gradient([ [ [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
-
    - -

    新的语法不需要to()、from()和color-stop()函数，所以这些函数被丢弃。而top/bottom与left/right的顺序也被标记为不重要，所以Mozilla移除了必需首先定义top/bottom的限制。

    - -

    新的语法仍然有一个缺点：它只允许水平和垂直渐变。在多次变更解决了方向限制的问题之后，它被增加到CSS Images Values and Content Replacement Level 3 draft in 2011-02-17。

    - -
      -
    • 原生支持{{ cssxref("<angle>") }}允许任何方向的渐变
      • -
    • 定义magic corner算法，允许使用简便的方式定义端点的颜色，从而简化了开发者的工作
      • -
    - -

    在预乘颜色空间里定义过渡色，从而可以防止在使用不同透明度颜色的情况下出现违和的灰色。在未舍弃原生语法的情况下，带前缀的版本被Webkit和Trident（IE）实现。

    - -
    linear-gradient( [ [ {{cssxref("<angle>")}} | [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
-
    - -

    {{ cssxref("<angle>") }}属性的添加导致了一些混乱，它应当指向终点方向，但是这些关键字却通常指起始方向。在related W3C CSSWG thread可以查看一些讨论。在一项新的语法中，这个问题被修正。它仍然使用方向关键字，但是在关键字之前增加关键字 to 。这项语法被添加到CSS Images Values and Content Replacement Level 3 draft in 2011-09-08。

    - -
    linear-gradient([ [ [ {{cssxref("<angle>")}} | to [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
-
    - -

    以上应当是最终语法。

    - -

    在带前缀的变体和不带前缀的提案之间仍然存在一项语义的分歧。最终Apple的提案显示，带前缀的语法都使用极坐标定义{{ cssxref("<angle>") }}参数，导致了0deg指向东方。为了与CSS的其他部分保持一致，标准将0deg指向北方。为了防止使用前缀版本属性的站点不至于崩溃，它们保持原始的角度定义（0deg指向东方）。在使用不带前缀版本的时候将会切换到正确的规格。在这种不兼容的情况下，Gecko给所有语法都加上前缀，不带前缀且没有to关键词的语法会被丢弃。

    - -

    范例

    - -

    例 45度渐变

    - -

    可以为渐变轴某个位置指定某个颜色，这些位置可被称为“颜色中间点（color-stops）”。颜色会从一个颜色中间点平滑过渡到下一个。在渐变范围内，每个颜色都表现为一条垂直于渐变轴的直线。在下图中，渐变轴从左上角出发并且呈45度。渐变轴上定义了红色和蓝色两个颜色中间点。

    - -
    <div style="width: 200px; height: 200px;"></div>
    - -
    div {
-  background: linear-gradient(45deg, red, blue);
-}
    - -

    {{EmbedLiveSample("45度渐变",120,120)}}

    - -

    从60％的梯度线开始的渐变

    - -

    有时候我们不希望一开始就出现渐变，可以从中间某个地方开始最好。为了实现这个效果，可以在你希望渐变梯度开始的地方，加上一个同样色值的颜色中间点。

    - -
    <div style="width: 200px; height: 200px;"></div>
    - -
    div {
-  background: linear-gradient(135deg, red, red 60%, blue);
-}
    - -

    Result:

    - -

    {{EmbedLiveSample("从60％的梯度线开始的渐变")}}

    - -

    具有多个颜色停止的渐变

    - -

    如果第一个颜色中间点没有 <length> 或 <percentage>属性,那么它默认为0%。如果最后一个颜色中间点没有 <length> 或者 <percentage>属性, 则默认为100%。如果一个既不是起始也不是终止的颜色中间点，没有被明确声明位置，那么这个颜色就会从前后两个颜色的中间位置开始。

    - -

    颜色中间点必须按照顺序声明。给起始和终止的颜色中间值赋值后，如果一个颜色中间点的位置比任何一个颜色中间点的位置都要小，那它的位置会按照离它最近的一个颜色中间点来计算。

    - -
    <div>A rainbow made from a gradient</div>
    - -
    div {
-  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
-}
    - -

    Result:

    - -

    {{EmbedLiveSample("具有多个颜色停止的渐变")}}

    - -

    包含多个颜色中间点的渐变

    - -

    如果第一个颜色中间点没有定义长度或百分比，它将包含缺省值0。如果最后一个颜色中间点没有定义长度或百分比，它将包含缺省值100%。如果中间的颜色中间点没定义长度或百分比，那么它将被设定为前后两站的平均值。

    - -

    颜色中间点必须被按顺序定义。第一个和最后一个被分配为默认值之后，如果一个颜色中间点的位置比前一个小，那么将会被设定成与前一个相同的值。

    - -
    使用渐变制作彩虹
    - -
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
-
    - -

    线性重复渐变

    - -

    线性渐变目前不能实现重复渐变。默认情况下，渐变会撑满它被定义的元素。这项功能可以参考{{ Cssxref("repeating-linear-gradient") }}。

    - -

    使用透明度

    - -
    <div>线性与透明度</div>
    - -
    div {
-  background: linear-gradient(to bottom right, red, rgba(0,0,0,0));
-}
    - -

    Result:

    - -

    {{EmbedLiveSample("使用透明度")}}

    - -

    如果所有点和长度都使用固定单位（而不是相对于background-size的值指定的百分比或关键字），则渐变背景不受 {{Cssxref("background-size")}} 的影响。

    - -

    跨浏览器实施渐变

    - -

    这里包含了所有前缀的渐变设置。

    - -
    .grad {
-  background-color: #F07575; /* 不支持渐变的浏览器回退方案 */
-  background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* 支持 Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
-  background-image:    -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* 支持 Firefox (3.6 to 15) */
-  background-image:      -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* 支持旧 Opera (11.1 to 12.0) */
-  background-image:         linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* 标准语法; 需要最新版本 */
-}
-
    - -

    -moz-前缀的规则用于兼容Fx 3.6 to Fx 15的火狐浏览器。 -webkit-前缀的规则用于兼容在Android 4.3以前版本、iOS 6.1以前版本、Safari 6。当使用带前缀的规则时，不要加“to”关键字。

    - -
    -

    Notes：如果将<body>标签的background-image属性设置为线性渐变linear-gradient，除非您还设置文档根标签（例如<html>标签）的min-height属性，否则渐变不会填充浏览器屏幕到100％。

    -
    - -

    规范

    - - - - - - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()')}}{{Spec2('CSS3 Images')}}Initial definition
    {{SpecName('CSS4 Images', '#color-stop-syntax', 'Gradient Color-Stops')}}{{Spec2('CSS4 Images')}}Add Interpolation hints
    - -

    浏览器兼容性

    - -{{Compat("css.types.image.gradient.linear-gradient")}} - -

    了解更多

    - - diff --git a/files/zh-cn/web/css/gradient/linear-gradient/index.html b/files/zh-cn/web/css/gradient/linear-gradient/index.html new file mode 100644 index 0000000000..4636a644cd --- /dev/null +++ b/files/zh-cn/web/css/gradient/linear-gradient/index.html @@ -0,0 +1,281 @@ +--- +title: linear-gradient() +slug: Web/CSS/gradient/linear-gradient +tags: + - CSS + - CSS Function + - CSS Images + - Function + - Graphics + - Layout + - Reference + - Web + - gradient +translation_of: Web/CSS/gradient/linear-gradient() +original_slug: Web/CSS/gradient/linear-gradient() +browser-compat: css.types.image.gradient.linear-gradient +--- +

    {{CSSRef}}

    + +

    CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于{{cssxref("<gradient>")}}数据类型，是一种特别的{{cssxref("<image>")}}数据类型。

    + +
    /* 渐变轴为45度，从蓝色渐变到红色 */
+linear-gradient(45deg, blue, red);
+
+/* 从右下到左上、从蓝色渐变到红色 */
+linear-gradient(to left top, blue, red);
+
+/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
+linear-gradient(0deg, blue, green 40%, red);
    + +
    {{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}}  
    + +

    如同其他gradient函数一般，linear-gradient() 函数没有内在尺寸；即，它不具备固有的或首选的尺寸，也不具备首选的比率。该函数的具体尺寸将与其适用的元素尺寸匹配。

    + +
    提示：利用{{cssxref("repeating-linear-gradient")}}函数可以实现线形重复渐变效果。
    + +
    提示：由于<gradient>数据类型系<image>的子数据类型，<gradient>只能被用于<image>可以使用的地方。因此，linear-gradient() 并不适用于{{Cssxref("background-color")}}以及类似的使用 {{cssxref("<color>")}}数据类型的属性中。
    + +

    线形渐变的构成

    + +

    线性渐变由一个轴 (梯度线) 定义，其上的每个点具有两种或多种的颜色，且轴上的每个点都具有独立的颜色。为了构建出平滑的渐变，linear-gradient() 函数构建一系列垂直于渐变线的着色线，每一条着色线的颜色则取决于与之垂直相交的渐变线上的色点

    + +

    linear-gradient.png渐变线由包含渐变图形的容器的中心点和一个角度来定义的。渐变线上的颜色值是由不同的点来定义，包括起始点，终点，以及两者之间的可选的中间点（中间点可以有多个）。

    + +

    起始点是渐变线上代表起始颜色值的点。起始点由渐变线和过容器顶点的垂直线之间的交叉点来定义。（垂直线跟渐变线在同一象限内）

    + +

    同样的，终点是渐变线上代表最终颜色值的点。终点也是由渐变线和从最近的顶点发出的垂直线之间的交叉点定义的，然而从起始点的对称点来定义终点是更容易理解的一种方式，因为终点是起点关于容器的中心点的反射点。

    + +

    关于起点和终点的稍微有些复杂的定义导致了一个有趣的性质，有时候被叫做不可思议的顶点效应：起点附近的点具有跟起点相同的颜色值，终点附近的点具有跟终点相同的颜色值。

    + +

    不仅仅只有起点和终点的颜色值可以指定。通过提供额外的颜色中间点，Web开发者可以构建在起始颜色值和终点颜色值之间的自定义更强的过渡效果，另外还可以提供多种颜色值的渐变线。

    + +

    当颜色中间点的位置被隐式定义，它被放置在位于它之前的点和位于它之后的点之间的中间位置处。利用{{cssxref("<length>")}}或者{{cssxref("<percentage>")}}数据类型可以显示定义一个位置。

    + +
    linear-gradient(red, orange, yellow, green, blue);
+linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);看看
+
    + +

    默认情况下，从一个颜色的终止点平滑的过渡到另一个颜色的终止点，颜色之间的中点是两个颜色颜色转换的中点。你可以将中点移动到这两个颜色之间的任意位置，方法是在两个颜色之间添加未标记的 %，以指示颜色的中转位置。下面的示例是从起始点到10%的位置标记红色，从90%到结束标记蓝色。在10%到90%之间，颜色从红色过渡到蓝色，然而过渡的中点是在30%的标记上，而不是在没有30%中转点的情况下会默认为50%。

    + +
    linear-gradient(red 10%, 30%, blue 90%);
    + +

    如果两个或多个颜色终止在同一位置，则在该位置声明的第一个颜色和最后一个颜色之间的过渡将是一条生硬线。

    + +

    颜色终止列表中颜色的终止点应该是依次递增的。如果后面的颜色终止点小于前面颜色的终止点则后面的会被覆盖，从而创建一个硬转换。下面的变化是从红色到黄色在40%的位置，然后过渡从黄色到蓝色终止于65%的位置处。

    + +
    linear-gradient(red 40%, yellow 30%, blue 65%);
    + +

    允许颜色多个颜色终止位置。通过在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%);
    + +

    默认情况下，如果不带0%终止的颜色，则在该点声明的第一个颜色。类似地，最后一种颜色将持续到100%标记，或者如果在最后一个没有声明长度，则在100%标记处。

    + +

    语法

    + +

    值

    + +
    +
    <side-or-corner>
    +
    描述渐变线的起始点位置。它包含to和两个关键词：第一个指出水平位置left or right，第二个指出垂直位置top or bottom。关键词的先后顺序无影响，且都是可选的。
    + to top, to bottom, to left 和 to right这些值会被转换成角度0度、180度、270度和90度。其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。渐变线的结束点与其起点中心对称。
    +
    <angle>
    +
    用角度值指定渐变的方向（或角度）。角度顺时针增加。 
    +
    <linear-color-stop>
    +
    由一个{{cssxref("<color>")}}值组成，并且跟随着一个可选的终点位置（可以是一个百分比值或者是沿着渐变轴的{{cssxref("<length>")}}）。CSS渐变的颜色渲染采取了与SVG相同的规则。
    +
    + +
    +
    <color-hint>
    +
    + +

    颜色中转点是一个插值提示，它定义了在相邻颜色之间渐变如何进行。长度定义了在两种颜色之间的哪个点停止渐变颜色应该达到颜色过渡的中点。如果省略，颜色转换的中点是两个颜色停止之间的中点。 

    + +
    +
    +
    提示：渲染颜色中间点的规则 color stops in CSS gradients与一致 SVG gradients。
    + +

    正式语法

    + + 
    linear-gradient(
+  [ <angle> | to <side-or-corner> ,]? <color-stop-list> )
+  \---------------------------------/ \----------------------------/
+    Definition of the gradient line        List of color stops
+
+where <side-or-corner> = [ left | right ] || [ top | bottom ]
+  and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
+  and <linear-color-stop> = <color> [ <color-stop-length> ]?
+  and <color-stop-length> = [ <percentage> | <length> ]{1,2}
+  and <color-hint> = [ <percentage> | <length> ]
+
    +
    +
    + +

    语法历史

    + +

    linear-gradient的语法由2008年实施的first Apple proposal发展而来。

    + +
    -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
+
    + +

    在最初语法中，使用同样的语法实现线性渐变和径向渐变。但这两种渐变所需要的参数有所不同，导致了需要增加第一个参数来区分两种渐变。如果再增加渐变类型，这样的处理方式会变得更加复杂。比如锥形渐变，需要用到函数和不规范的CSS值。W3C并未收到相关草案。

    + +

    一个替代语法在2009年由Mozilla提出并实现。这个语法需要两个CSS函数，一个用来做线性渐变，另一个用于径向渐变。然而，这个语法并没有被发布产品实现。有人提出了第三种语法，它将线性渐变的语法简化为：

    + +
    -moz-linear-gradient([ [ [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
+
    + +

    新的语法不需要to()、from()和color-stop()函数，所以这些函数被丢弃。而top/bottom与left/right的顺序也被标记为不重要，所以Mozilla移除了必需首先定义top/bottom的限制。

    + +

    新的语法仍然有一个缺点：它只允许水平和垂直渐变。在多次变更解决了方向限制的问题之后，它被增加到CSS Images Values and Content Replacement Level 3 draft in 2011-02-17。

    + +
      +
    • 原生支持{{ cssxref("<angle>") }}允许任何方向的渐变
      • +
    • 定义magic corner算法，允许使用简便的方式定义端点的颜色，从而简化了开发者的工作
      • +
    + +

    在预乘颜色空间里定义过渡色，从而可以防止在使用不同透明度颜色的情况下出现违和的灰色。在未舍弃原生语法的情况下，带前缀的版本被Webkit和Trident（IE）实现。

    + +
    linear-gradient( [ [ {{cssxref("<angle>")}} | [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
+
    + +

    {{ cssxref("<angle>") }}属性的添加导致了一些混乱，它应当指向终点方向，但是这些关键字却通常指起始方向。在related W3C CSSWG thread可以查看一些讨论。在一项新的语法中，这个问题被修正。它仍然使用方向关键字，但是在关键字之前增加关键字 to 。这项语法被添加到CSS Images Values and Content Replacement Level 3 draft in 2011-09-08。

    + +
    linear-gradient([ [ [ {{cssxref("<angle>")}} | to [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
+
    + +

    以上应当是最终语法。

    + +

    在带前缀的变体和不带前缀的提案之间仍然存在一项语义的分歧。最终Apple的提案显示，带前缀的语法都使用极坐标定义{{ cssxref("<angle>") }}参数，导致了0deg指向东方。为了与CSS的其他部分保持一致，标准将0deg指向北方。为了防止使用前缀版本属性的站点不至于崩溃，它们保持原始的角度定义（0deg指向东方）。在使用不带前缀版本的时候将会切换到正确的规格。在这种不兼容的情况下，Gecko给所有语法都加上前缀，不带前缀且没有to关键词的语法会被丢弃。

    + +

    范例

    + +

    例 45度渐变

    + +

    可以为渐变轴某个位置指定某个颜色，这些位置可被称为“颜色中间点（color-stops）”。颜色会从一个颜色中间点平滑过渡到下一个。在渐变范围内，每个颜色都表现为一条垂直于渐变轴的直线。在下图中，渐变轴从左上角出发并且呈45度。渐变轴上定义了红色和蓝色两个颜色中间点。

    + +
    <div style="width: 200px; height: 200px;"></div>
    + +
    div {
+  background: linear-gradient(45deg, red, blue);
+}
    + +

    {{EmbedLiveSample("45度渐变",120,120)}}

    + +

    从60％的梯度线开始的渐变

    + +

    有时候我们不希望一开始就出现渐变，可以从中间某个地方开始最好。为了实现这个效果，可以在你希望渐变梯度开始的地方，加上一个同样色值的颜色中间点。

    + +
    <div style="width: 200px; height: 200px;"></div>
    + +
    div {
+  background: linear-gradient(135deg, red, red 60%, blue);
+}
    + +

    Result:

    + +

    {{EmbedLiveSample("从60％的梯度线开始的渐变")}}

    + +

    具有多个颜色停止的渐变

    + +

    如果第一个颜色中间点没有 <length> 或 <percentage>属性,那么它默认为0%。如果最后一个颜色中间点没有 <length> 或者 <percentage>属性, 则默认为100%。如果一个既不是起始也不是终止的颜色中间点，没有被明确声明位置，那么这个颜色就会从前后两个颜色的中间位置开始。

    + +

    颜色中间点必须按照顺序声明。给起始和终止的颜色中间值赋值后，如果一个颜色中间点的位置比任何一个颜色中间点的位置都要小，那它的位置会按照离它最近的一个颜色中间点来计算。

    + +
    <div>A rainbow made from a gradient</div>
    + +
    div {
+  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+}
    + +

    Result:

    + +

    {{EmbedLiveSample("具有多个颜色停止的渐变")}}

    + +

    包含多个颜色中间点的渐变

    + +

    如果第一个颜色中间点没有定义长度或百分比，它将包含缺省值0。如果最后一个颜色中间点没有定义长度或百分比，它将包含缺省值100%。如果中间的颜色中间点没定义长度或百分比，那么它将被设定为前后两站的平均值。

    + +

    颜色中间点必须被按顺序定义。第一个和最后一个被分配为默认值之后，如果一个颜色中间点的位置比前一个小，那么将会被设定成与前一个相同的值。

    + +
    使用渐变制作彩虹
    + +
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+
    + +

    线性重复渐变

    + +

    线性渐变目前不能实现重复渐变。默认情况下，渐变会撑满它被定义的元素。这项功能可以参考{{ Cssxref("repeating-linear-gradient") }}。

    + +

    使用透明度

    + +
    <div>线性与透明度</div>
    + +
    div {
+  background: linear-gradient(to bottom right, red, rgba(0,0,0,0));
+}
    + +

    Result:

    + +

    {{EmbedLiveSample("使用透明度")}}

    + +

    如果所有点和长度都使用固定单位（而不是相对于background-size的值指定的百分比或关键字），则渐变背景不受 {{Cssxref("background-size")}} 的影响。

    + +

    跨浏览器实施渐变

    + +

    这里包含了所有前缀的渐变设置。

    + +
    .grad {
+  background-color: #F07575; /* 不支持渐变的浏览器回退方案 */
+  background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* 支持 Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
+  background-image:    -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* 支持 Firefox (3.6 to 15) */
+  background-image:      -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* 支持旧 Opera (11.1 to 12.0) */
+  background-image:         linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* 标准语法; 需要最新版本 */
+}
+
    + +

    -moz-前缀的规则用于兼容Fx 3.6 to Fx 15的火狐浏览器。 -webkit-前缀的规则用于兼容在Android 4.3以前版本、iOS 6.1以前版本、Safari 6。当使用带前缀的规则时，不要加“to”关键字。

    + +
    +

    Notes：如果将<body>标签的background-image属性设置为线性渐变linear-gradient，除非您还设置文档根标签（例如<html>标签）的min-height属性，否则渐变不会填充浏览器屏幕到100％。

    +
    + +

    规范

    + + + + + + + + + + + + + + + + + + + + + +
    SpecificationStatusComment
    {{SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()')}}{{Spec2('CSS3 Images')}}Initial definition
    {{SpecName('CSS4 Images', '#color-stop-syntax', 'Gradient Color-Stops')}}{{Spec2('CSS4 Images')}}Add Interpolation hints
    + +

    浏览器兼容性

    + +{{Compat("css.types.image.gradient.linear-gradient")}} + +

    了解更多

    + + diff --git a/files/zh-cn/web/css/gradient/radial-gradient()/index.html b/files/zh-cn/web/css/gradient/radial-gradient()/index.html deleted file mode 100644 index cc5a4c79cd..0000000000 --- a/files/zh-cn/web/css/gradient/radial-gradient()/index.html +++ /dev/null @@ -1,196 +0,0 @@ ---- -title: radial-gradient() -slug: Web/CSS/gradient/radial-gradient() -translation_of: Web/CSS/gradient/radial-gradient() -tags: - - CSS - - CSS Function - - CSS Images - - Function - - Graphics - - Layout - - Reference - - Web - - gradient -browser-compat: css.types.image.gradient.radial-gradient ---- -

    {{CSSRef}}

    - -

    radial-gradient() CSS函数创建了一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成。它的形状可以是圆形（circle）或椭圆形（ellipse）。这个方法得到的是一个CSS{{cssxref("<gradient>")}}数据类型的对象，其是 {{cssxref("<image>")}} 的一种。

    - -

    {{EmbedInteractiveExample("pages/css/function-radial-gradient.html")}}

    - -

    与其它渐变相同，径向渐变是一个不固定尺寸的图像，即，它没有首选的大小，也没有首选的比例。具体大小将由它所应用的元素的大小决定。

    - -

    如要创建重复的径向渐变来填充容器，请使用CSS的{{ Cssxref("repeating-radial-gradient") }} 方法。

    - -

    因为 <gradient> 属于 <image> 类型，所以它可以用于任何适用于 <image> 的地方。正是因为这样，radial-gradient() 不能用于 {{Cssxref("background-color")}} 和其他属性比如 {{cssxref("<color>")}} 数据类型。

    - -

    radial gradient 的组成

    - -

    径向渐变(Radial gradients)由其中心点、边缘形状轮廓、两个或多个色值结束点（color stops）定义而成。  

    - -

    为了创建平滑的渐变，径向渐变函数绘制了一系列从中心点放射到边缘形状（甚至可能超出范围）的同心轮廓。边缘形状可以是圆形（circle）或椭圆形（ellipse）。

    - -

    色彩结束点位于虚拟渐变射线（Virtual gradient ray）上，该渐变射线从中心点水平向右延伸。 基于百分比的色彩结束位置是相对于边缘形状和此渐变射线之间的交点（代表100％）。 每个形状都是一种单色，并由其相交的渐变射线上的颜色确定。

    - -

    语法

    - -
    /* A gradient at the center of its container,
-   starting red, changing to blue, and finishing green */
-radial-gradient(circle at center, red 0, blue, green 100%)
    - -

    值

    - -
    -
    {{cssxref("<position>")}}
    -
    {{ cssxref("<position>") }}与{{ Cssxref("background-position") }}或者{{ Cssxref("transform-origin") }}类似。如缺省，默认为中心点。
    -
    <shape>
    -
    渐变的形状。圆形（渐变的形状是一个半径不变的正圆）或椭圆形（轴对称椭圆）。默认值为椭圆。
    -
    <size>
    -
    渐变的尺寸大小。包含的值见下表。
    -
    <color-stop>
    -
    表示某个确定位置的固定色值，包含一个{{cssxref("<color>")}}值加上可选的位置值（相对虚拟渐变射线的{{cssxref("<percentage>")}}或者{{cssxref("<length>")}}长度值）。 百分比值0%，或者长度值0，表示渐变中心点；百分比值100%表示渐变射线与边缘形状相交的点。 其间的百分比值线性对应渐变射线上的点。
    -
    <extent-keyword>
    -
    关键字用于描述边缘轮廓的具体位置。以下为关键字常量：
    -
    - - - - - - - - - - - - - - - - - - - - - - - -
    常量描述
    closest-side渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）。
    closest-corner渐变的边缘形状与容器距离渐变中心点最近的一个角相交。
    farthest-side与closest-side相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。
    farthest-corner渐变的边缘形状与容器距离渐变中心点最远的一个角相交。
    - -
    -

    注意：该函数的早期实现还包含其他关键字（ cover 和 contain），分别相当于标准关键字 farthest-corner 和 closest-side 。但因为在某些实现中丢弃了这些旧的关键字，所以请仅使用标准关键字。

    -
    -
    -
    <linear-color-stop>
    -
    A color-stop's {{cssxref("<color>")}} value, followed by an one or two optional stop positions (either a {{cssxref("<percentage>")}} or a {{cssxref("<length>")}} along the gradient's axis). A percentage of 0%, or a length of 0, represents the center of the gradient; the value 100% represents the intersection of the ending shape with the virtual gradient ray. Percentage values in between are linearly positioned on the gradient ray. Including two stop positions is equivalent to declaring two color stops with the same color at the two positions.
    -
    <color-hint>
    -
    Th color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.
    -
    -

    Formal syntax

    - - 
    radial-gradient(
-  [ [ circle || <length> ]                         [ at <position> ]? , |
-    [ ellipse || [ <length> | <percentage> ]{2} ]  [ at <position> ]? , |
-    [ [ circle | ellipse ] || <extent-keyword> ] [at <position> ]? , |
-    at <position> ,
-  ]?
-  <color-stop-list> [ , <color-stop-list> ]+
-)
-where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
-   and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
-   and <linear-color-stop> = <color> [ <color-stop-length> ]?
-   and <color-stop-length> = [ <percentage> | <length> ]{1,2}
-   and <color-hint> = [ <percentage> | <length> ]
-
    - -
    -

    Note that negative <length>'s are not allowed, however browsers had implemented negative lengths which are now being removed. See the Firefox site compat note.

    -
    -
    -
    - -

    示例

    - -

    Simple gradient

    - - - -
    .radial-gradient {
-  background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
-}
    - -

    {{EmbedLiveSample('Simple_gradient', 120, 120)}}

    - -

    Non-centered gradient

    - - - -
    .radial-gradient {
-  background-image: radial-gradient(farthest-corner at 40px 40px,
-      #f35 0%, #43e 100%);
-}
    - -

    {{EmbedLiveSample('Non-centered_gradient', 240, 120)}}

    - -
    -

    Note: Please see Using CSS gradients for more examples.

    -
    - -

    规范

    - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()')}}{{Spec2('CSS3 Images')}}Initial definition.
    - -

    浏览器兼容性

    - - - -
    {{Compat("css.types.image.gradient.radial-gradient")}}
    - -

    Quantum CSS notes

    - -

    Gecko used to have a long-standing bug whereby radial gradients like radial-gradient(circle gold,red) would work, even though they shouldn't because of the missing comma between circle and gold. Also, {{cssxref("calc")}} expressions were rejected — causing the value to be invalid — when used as the radius component of a radial-gradient() function ({{bug(1376019)}}). Firefox's new parallel CSS engine (also known as Quantum CSS or Stylo, released in Firefox 57) fixed these bugs.

    - -

    另见

    - -
      -
    • Using CSS gradients
      • -
    • Other gradient functions: {{cssxref("repeating-radial-gradient")}}, {{cssxref("linear-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-conic-gradient")}}
      • -
    • {{cssxref("<image>")}}
      • -
    • {{cssxref("_image","image()")}}
      • -
    • {{cssxref("element()")}}
      • -
    • {{cssxref("image-set","image-set()")}}
      • -
    • {{cssxref("cross-fade")}}
      • -
    diff --git a/files/zh-cn/web/css/gradient/radial-gradient/index.html b/files/zh-cn/web/css/gradient/radial-gradient/index.html new file mode 100644 index 0000000000..8a739eb511 --- /dev/null +++ b/files/zh-cn/web/css/gradient/radial-gradient/index.html @@ -0,0 +1,197 @@ +--- +title: radial-gradient() +slug: Web/CSS/gradient/radial-gradient +tags: + - CSS + - CSS Function + - CSS Images + - Function + - Graphics + - Layout + - Reference + - Web + - gradient +translation_of: Web/CSS/gradient/radial-gradient() +original_slug: Web/CSS/gradient/radial-gradient() +browser-compat: css.types.image.gradient.radial-gradient +--- +

    {{CSSRef}}

    + +

    radial-gradient() CSS函数创建了一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成。它的形状可以是圆形（circle）或椭圆形（ellipse）。这个方法得到的是一个CSS{{cssxref("<gradient>")}}数据类型的对象，其是 {{cssxref("<image>")}} 的一种。

    + +

    {{EmbedInteractiveExample("pages/css/function-radial-gradient.html")}}

    + +

    与其它渐变相同，径向渐变是一个不固定尺寸的图像，即，它没有首选的大小，也没有首选的比例。具体大小将由它所应用的元素的大小决定。

    + +

    如要创建重复的径向渐变来填充容器，请使用CSS的{{ Cssxref("repeating-radial-gradient") }} 方法。

    + +

    因为 <gradient> 属于 <image> 类型，所以它可以用于任何适用于 <image> 的地方。正是因为这样，radial-gradient() 不能用于 {{Cssxref("background-color")}} 和其他属性比如 {{cssxref("<color>")}} 数据类型。

    + +

    radial gradient 的组成

    + +

    径向渐变(Radial gradients)由其中心点、边缘形状轮廓、两个或多个色值结束点（color stops）定义而成。  

    + +

    为了创建平滑的渐变，径向渐变函数绘制了一系列从中心点放射到边缘形状（甚至可能超出范围）的同心轮廓。边缘形状可以是圆形（circle）或椭圆形（ellipse）。

    + +

    色彩结束点位于虚拟渐变射线（Virtual gradient ray）上，该渐变射线从中心点水平向右延伸。 基于百分比的色彩结束位置是相对于边缘形状和此渐变射线之间的交点（代表100％）。 每个形状都是一种单色，并由其相交的渐变射线上的颜色确定。

    + +

    语法

    + +
    /* A gradient at the center of its container,
+   starting red, changing to blue, and finishing green */
+radial-gradient(circle at center, red 0, blue, green 100%)
    + +

    值

    + +
    +
    {{cssxref("<position>")}}
    +
    {{ cssxref("<position>") }}与{{ Cssxref("background-position") }}或者{{ Cssxref("transform-origin") }}类似。如缺省，默认为中心点。
    +
    <shape>
    +
    渐变的形状。圆形（渐变的形状是一个半径不变的正圆）或椭圆形（轴对称椭圆）。默认值为椭圆。
    +
    <size>
    +
    渐变的尺寸大小。包含的值见下表。
    +
    <color-stop>
    +
    表示某个确定位置的固定色值，包含一个{{cssxref("<color>")}}值加上可选的位置值（相对虚拟渐变射线的{{cssxref("<percentage>")}}或者{{cssxref("<length>")}}长度值）。 百分比值0%，或者长度值0，表示渐变中心点；百分比值100%表示渐变射线与边缘形状相交的点。 其间的百分比值线性对应渐变射线上的点。
    +
    <extent-keyword>
    +
    关键字用于描述边缘轮廓的具体位置。以下为关键字常量：
    +
    + + + + + + + + + + + + + + + + + + + + + + + +
    常量描述
    closest-side渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）。
    closest-corner渐变的边缘形状与容器距离渐变中心点最近的一个角相交。
    farthest-side与closest-side相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。
    farthest-corner渐变的边缘形状与容器距离渐变中心点最远的一个角相交。
    + +
    +

    注意：该函数的早期实现还包含其他关键字（ cover 和 contain），分别相当于标准关键字 farthest-corner 和 closest-side 。但因为在某些实现中丢弃了这些旧的关键字，所以请仅使用标准关键字。

    +
    +
    +
    <linear-color-stop>
    +
    A color-stop's {{cssxref("<color>")}} value, followed by an one or two optional stop positions (either a {{cssxref("<percentage>")}} or a {{cssxref("<length>")}} along the gradient's axis). A percentage of 0%, or a length of 0, represents the center of the gradient; the value 100% represents the intersection of the ending shape with the virtual gradient ray. Percentage values in between are linearly positioned on the gradient ray. Including two stop positions is equivalent to declaring two color stops with the same color at the two positions.
    +
    <color-hint>
    +
    Th color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.
    +
    +

    Formal syntax

    + + 
    radial-gradient(
+  [ [ circle || <length> ]                         [ at <position> ]? , |
+    [ ellipse || [ <length> | <percentage> ]{2} ]  [ at <position> ]? , |
+    [ [ circle | ellipse ] || <extent-keyword> ] [at <position> ]? , |
+    at <position> ,
+  ]?
+  <color-stop-list> [ , <color-stop-list> ]+
+)
+where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
+   and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
+   and <linear-color-stop> = <color> [ <color-stop-length> ]?
+   and <color-stop-length> = [ <percentage> | <length> ]{1,2}
+   and <color-hint> = [ <percentage> | <length> ]
+
    + +
    +

    Note that negative <length>'s are not allowed, however browsers had implemented negative lengths which are now being removed. See the Firefox site compat note.

    +
    +
    +
    + +

    示例

    + +

    Simple gradient

    + + + +
    .radial-gradient {
+  background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
+}
    + +

    {{EmbedLiveSample('Simple_gradient', 120, 120)}}

    + +

    Non-centered gradient

    + + + +
    .radial-gradient {
+  background-image: radial-gradient(farthest-corner at 40px 40px,
+      #f35 0%, #43e 100%);
+}
    + +

    {{EmbedLiveSample('Non-centered_gradient', 240, 120)}}

    + +
    +

    Note: Please see Using CSS gradients for more examples.

    +
    + +

    规范

    + + + + + + + + + + + + + + + + +
    SpecificationStatusComment
    {{SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()')}}{{Spec2('CSS3 Images')}}Initial definition.
    + +

    浏览器兼容性

    + + + +
    {{Compat("css.types.image.gradient.radial-gradient")}}
    + +

    Quantum CSS notes

    + +

    Gecko used to have a long-standing bug whereby radial gradients like radial-gradient(circle gold,red) would work, even though they shouldn't because of the missing comma between circle and gold. Also, {{cssxref("calc")}} expressions were rejected — causing the value to be invalid — when used as the radius component of a radial-gradient() function ({{bug(1376019)}}). Firefox's new parallel CSS engine (also known as Quantum CSS or Stylo, released in Firefox 57) fixed these bugs.

    + +

    另见

    + +
      +
    • Using CSS gradients
      • +
    • Other gradient functions: {{cssxref("repeating-radial-gradient")}}, {{cssxref("linear-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-conic-gradient")}}
      • +
    • {{cssxref("<image>")}}
      • +
    • {{cssxref("_image","image()")}}
      • +
    • {{cssxref("element()")}}
      • +
    • {{cssxref("image-set","image-set()")}}
      • +
    • {{cssxref("cross-fade")}}
      • +
    diff --git a/files/zh-cn/web/css/gradient/repeating-linear-gradient()/index.html b/files/zh-cn/web/css/gradient/repeating-linear-gradient()/index.html deleted file mode 100644 index 007a1eb361..0000000000 --- a/files/zh-cn/web/css/gradient/repeating-linear-gradient()/index.html +++ /dev/null @@ -1,170 +0,0 @@ ---- -title: repeating-linear-gradient() -slug: Web/CSS/gradient/repeating-linear-gradient() -translation_of: Web/CSS/gradient/repeating-linear-gradient() -tags: - - CSS - - CSS Function - - CSS Images - - Function - - Gradients - - Graphics - - Layout - - Reference - - Web -browser-compat: css.types.image.gradient.repeating-linear-gradient ---- -
    {{CSSRef}}
    - -

    CSS函数 repeating-linear-gradient() 创建一个由重复线性渐变组成的{{cssxref("<image>")}}， 这是一个类似 {{cssxref("linear-gradient")}} 的函数，并且采用相同的参数，但是它会在所有方向上重复渐变以覆盖其整个容器. 这个函数的结果是一个{{cssxref("<gradient>")}} 数据类型的对象, 这是一个特殊的{{cssxref("<image>")}}类型。

    - -
    /* 一个倾斜45度的重复线性渐变,
-   从蓝色开始渐变到红色 */
-repeating-linear-gradient(45deg, blue, red);
-
-/* 一个从右下角到左上角的重复线性渐变,
-   从蓝色开始渐变到红色 */
-repeating-linear-gradient(to left top, blue, red);
-
-/* 一个由下至上的重复线性渐变,
-   从蓝色开始，40%后变绿，
-   最后渐变到红色 */
-repeating-linear-gradient(0deg, blue, green 40%, red);
-
    - -

     

    - -

    每次重复时，色标位置的偏移量都是基准渐变长度（最后一个色标和第一个之间的距离）的倍数。因此，最后色标的色值应该与第一个色标的色值保持一致；如果不一致的话，会导致非常突兀的渐变效果。

    - -

    与其他渐变一样，线形重复渐变没有提供 固定的尺寸；即, 它没有原始尺寸或首选尺寸，也没有首选的比列。它将自适应于对应元素的尺寸。

    - -
    -

    提示： 因为 <gradient> 属于<image> 数据类型，所以只能在可以使用 <image>的地方使用它们。因此repeating-linear-gradient() 不适用于{{Cssxref("background-color")}}以及使用 {{cssxref("<color>")}} 数据类型的地方。

    -
    - -

    语法

    - -

    值

    - -
    -
    <side-or-corner>
    -
    描述渐变线的起始点位置。它包含两个关键词：第一个指出垂直位置left or right，第二个指出水平位置top or bottom。关键词的先后顺序无影响，且都是可选的。
    -

    - to top, to bottom, to left 和 to right这些值会被转换成角度0度、180度、270度和90度。其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。渐变线的结束点与其起点中心对称。
    -
    {{cssxref("<angle>")}}
    -
    用角度值指定渐变的方向（或角度）。角度顺时针增加。 
    -
    <color-stop>
    -
    由一个{{cssxref("<color>")}}值组成，并且跟随着一个可选的终点位置（可以是一个{{cssxref("<percentage>")}}或者是沿着渐变轴的{{cssxref("<length>")}}）。CSS渐变的颜色渲染采取了与SVG相同的规则。
    -
    -
    -

    提示：渲染颜色中间点的规则CSS渐变中的色标 与SVG渐变一致.

    -
    -
    -
    - -

    形式语法

    - -
    repeating-linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
-                            \---------------------------------/ \----------------------------/
-                              渐变轴的定义                                色标列表
-
-where <side-or-corner> = [left | right] || [top | bottom]
-   and <color-stop>     = <color> [ <percentage> | <length> ]?
-
    - -

    示例

    - -
    -
    #grad1 {
-  background-image: repeating-linear-gradient(180deg,
-      rgb(26,198,204),
-      rgb(26,198,204) 7%,
-      rgb(100,100,100) 10%);
-}
-
-#grad2 {
-  background-image: repeating-linear-gradient(-45deg,
-      transparent,
-      transparent 25px,
-      rgba(255,255,255,1) 25px,
-      rgba(255,255,255,1) 50px);
-}
-
    - -
    <ol>
-  <li>Repeating horizontal bars
-    <div id="grad1"></div>
-  </li>
-  <li>Zebra stripes
-    <div id="grad2"></div>
-  </li>
-</ol>
    -
    - - - -

    {{EmbedLiveSample('Example_hidden', '300px', '300px', '')}}

    - -

    规格

    - - - - - - - - - - - - - - - - -
    规格状态备注
    {{SpecName('CSS3 Images', '#repeating-gradients', 'repeating-linear-gradient()')}}{{Spec2('CSS3 Images')}}Initial definition.
    - -

    浏览器兼容性

    - -{{Compat("css.types.image.gradient.repeating-linear-gradient")}} - -

    了解更多

    - -
      -
    • 使用CSS渐变
      • -
    • 其他渐变方法: {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-radial-gradient")}}
      • -
    diff --git a/files/zh-cn/web/css/gradient/repeating-linear-gradient/index.html b/files/zh-cn/web/css/gradient/repeating-linear-gradient/index.html new file mode 100644 index 0000000000..b9e09acb59 --- /dev/null +++ b/files/zh-cn/web/css/gradient/repeating-linear-gradient/index.html @@ -0,0 +1,171 @@ +--- +title: repeating-linear-gradient() +slug: Web/CSS/gradient/repeating-linear-gradient +tags: + - CSS + - CSS Function + - CSS Images + - Function + - Gradients + - Graphics + - Layout + - Reference + - Web +translation_of: Web/CSS/gradient/repeating-linear-gradient() +original_slug: Web/CSS/gradient/repeating-linear-gradient() +browser-compat: css.types.image.gradient.repeating-linear-gradient +--- +
    {{CSSRef}}
    + +

    CSS函数 repeating-linear-gradient() 创建一个由重复线性渐变组成的{{cssxref("<image>")}}， 这是一个类似 {{cssxref("linear-gradient")}} 的函数，并且采用相同的参数，但是它会在所有方向上重复渐变以覆盖其整个容器. 这个函数的结果是一个{{cssxref("<gradient>")}} 数据类型的对象, 这是一个特殊的{{cssxref("<image>")}}类型。

    + +
    /* 一个倾斜45度的重复线性渐变,
+   从蓝色开始渐变到红色 */
+repeating-linear-gradient(45deg, blue, red);
+
+/* 一个从右下角到左上角的重复线性渐变,
+   从蓝色开始渐变到红色 */
+repeating-linear-gradient(to left top, blue, red);
+
+/* 一个由下至上的重复线性渐变,
+   从蓝色开始，40%后变绿，
+   最后渐变到红色 */
+repeating-linear-gradient(0deg, blue, green 40%, red);
+
    + +

     

    + +

    每次重复时，色标位置的偏移量都是基准渐变长度（最后一个色标和第一个之间的距离）的倍数。因此，最后色标的色值应该与第一个色标的色值保持一致；如果不一致的话，会导致非常突兀的渐变效果。

    + +

    与其他渐变一样，线形重复渐变没有提供 固定的尺寸；即, 它没有原始尺寸或首选尺寸，也没有首选的比列。它将自适应于对应元素的尺寸。

    + +
    +

    提示： 因为 <gradient> 属于<image> 数据类型，所以只能在可以使用 <image>的地方使用它们。因此repeating-linear-gradient() 不适用于{{Cssxref("background-color")}}以及使用 {{cssxref("<color>")}} 数据类型的地方。

    +
    + +

    语法

    + +

    值

    + +
    +
    <side-or-corner>
    +
    描述渐变线的起始点位置。它包含两个关键词：第一个指出垂直位置left or right，第二个指出水平位置top or bottom。关键词的先后顺序无影响，且都是可选的。
    +

    + to top, to bottom, to left 和 to right这些值会被转换成角度0度、180度、270度和90度。其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。渐变线的结束点与其起点中心对称。
    +
    {{cssxref("<angle>")}}
    +
    用角度值指定渐变的方向（或角度）。角度顺时针增加。 
    +
    <color-stop>
    +
    由一个{{cssxref("<color>")}}值组成，并且跟随着一个可选的终点位置（可以是一个{{cssxref("<percentage>")}}或者是沿着渐变轴的{{cssxref("<length>")}}）。CSS渐变的颜色渲染采取了与SVG相同的规则。
    +
    +
    +

    提示：渲染颜色中间点的规则CSS渐变中的色标 与SVG渐变一致.

    +
    +
    +
    + +

    形式语法

    + +
    repeating-linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
+                            \---------------------------------/ \----------------------------/
+                              渐变轴的定义                                色标列表
+
+where <side-or-corner> = [left | right] || [top | bottom]
+   and <color-stop>     = <color> [ <percentage> | <length> ]?
+
    + +

    示例

    + +
    +
    #grad1 {
+  background-image: repeating-linear-gradient(180deg,
+      rgb(26,198,204),
+      rgb(26,198,204) 7%,
+      rgb(100,100,100) 10%);
+}
+
+#grad2 {
+  background-image: repeating-linear-gradient(-45deg,
+      transparent,
+      transparent 25px,
+      rgba(255,255,255,1) 25px,
+      rgba(255,255,255,1) 50px);
+}
+
    + +
    <ol>
+  <li>Repeating horizontal bars
+    <div id="grad1"></div>
+  </li>
+  <li>Zebra stripes
+    <div id="grad2"></div>
+  </li>
+</ol>
    +
    + + + +

    {{EmbedLiveSample('Example_hidden', '300px', '300px', '')}}

    + +

    规格

    + + + + + + + + + + + + + + + + +
    规格状态备注
    {{SpecName('CSS3 Images', '#repeating-gradients', 'repeating-linear-gradient()')}}{{Spec2('CSS3 Images')}}Initial definition.
    + +

    浏览器兼容性

    + +{{Compat("css.types.image.gradient.repeating-linear-gradient")}} + +

    了解更多

    + +
      +
    • 使用CSS渐变
      • +
    • 其他渐变方法: {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-radial-gradient")}}
      • +
    diff --git a/files/zh-cn/web/css/gradient/repeating-radial-gradient()/index.html b/files/zh-cn/web/css/gradient/repeating-radial-gradient()/index.html deleted file mode 100644 index f3ac84767e..0000000000 --- a/files/zh-cn/web/css/gradient/repeating-radial-gradient()/index.html +++ /dev/null @@ -1,181 +0,0 @@ ---- -title: repeating-radial-gradient() -slug: Web/CSS/gradient/repeating-radial-gradient() -translation_of: Web/CSS/gradient/repeating-radial-gradient() -tags: - - CSS - - CSS Function - - CSS Images - - Function - - Gradients - - Graphics - - Layout - - Reference - - Web -browser-compat: css.types.image.gradient.repeating-radial-gradient ---- -
    {{CSSRef}}
    - -

    CSS函数repeating-radial-gradient() 创建一个从原点辐射的重复渐变组成的{{cssxref("<image>")}} 。它类似于{{cssxref("radial-gradient")}} 并且采用相同的参数，但是它会在所有方向上重复颜色，以覆盖其整个容器。函数的结果是  {{cssxref("<gradient>")}} 数据类型的对象， 是一种特殊的{{cssxref("<image>")}}类型。

    - -
    /* 一个从容器中心点开始的重复渐变,
-   从红色开始，渐变到蓝色，再渐变到绿色 */
-repeating-radial-gradient(circle at center, red 0, blue, green 30px);
-
    - -

    每次重复时，色标位置的偏移量都是基准渐变长度（最后一个色标和第一个之间的距离）的倍数。因此，最后色标的色值应该与第一个色标的色值保持一致；如果不一致的话，会导致非常突兀的渐变效果。

    - -

    与其他渐变一样，线形重复渐变没有提供固定的尺寸； 即, 它没有原始尺寸或首选尺寸，也没有首选的比列。它将自适应于对应元素的尺寸。

    - -
    -

    提示： 因为 <gradient> 属于<image> 数据类型，所以只能在可以使用 <image>的地方使用它们。因此repeating-linear-gradient() 不适用于{{Cssxref("background-color")}} 以及使用{{cssxref("<color>")}} 数据类型的地方。

    -
    - -

    语法

    - -

    值

    - -
    -
    {{cssxref("<position>")}}
    -
    position与 {{cssxref("background-position")}} 或者 {{cssxref("transform-origin")}}类似。默认值为 center.
    -
    {{cssxref("<angle>")}}
    -
    渐变轴的角度。角度顺时针增加，默认值为0deg。
    -
    {{cssxref("<shape>")}}
    -
    渐变的形状。圆形（渐变的形状是一个半径不变的正圆）或椭圆形（轴对称椭圆）。默认值为椭圆。默认值为椭圆形，即 ellipse。
    -
    <extent-keyword>
    -
    关键字用于描述边缘轮廓的具体位置。以下为关键字常量：
    -
    - - - - - - - - - - - - - - - - - - - - - - - -
    KeywordDescription
    closest-side渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）。
    closest-corner渐变的边缘形状与容器距离渐变中心点最近的一个角相交。
    farthest-side与 closest-side相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。
    farthest-corner渐变的边缘形状与容器距离渐变中心点最远的一个角相交。
    - -
    -

    提示: 早期的草案中还包含其他关键字(cover and contain) ，分别相当于标准关键字 farthest-corner 和 closest-side,。但因为在某些实现中丢弃了这些旧的关键字，所以请仅使用标准关键字。

    -
    -
    -
    <color-stop>
    -
    表示某个确定位置的固定色值，包含一个<color>值加上可选的位置值（相对虚拟渐变射线的<percentage>或者<length>长度值）。 百分比值0%，或者长度值0，表示渐变中心点；百分比值100%表示渐变射线与边缘形状相交的点。 其间的百分比值线性对应渐变射线上的点。
    -
    - -

    形式语法

    - -
    repeating-radial-gradient(
-       [[ circle  || <length> ]                     [at <position>]? , |
-        [ ellipse || [<length> | <percentage> ]{2}] [at <position>]? , |
-        [[ circle | ellipse ] || <extent-keyword> ] [at <position>]? , |
-                                                     at <position>   ,    <color-stop> [ , <color-stop> ]+ )
-        \---------------------------------------------------------------/\--------------------------------/
-                  定义轮廓、尺寸和结束形状的位置                                    色标列表
-
-where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
-  and <color-stop> = <color> [ <percentage> | <length> ]?
    - -

    示例

    - -

    径向渐变沿着一条轴线进行渲染。在每个轴线的端点处可以指定一个半径。可以想象为创建了两个“圆”，每个圆的中心位置用点指定，大小由半径值指定。渐变从内圆的圆周向外延伸到外圆的圆周。

    - -

    黑白相间的渐变

    - - -
    div {
-  display: block;
-  width: 50%;
-  height: 80px;
-  border-color: #000000;
-  padding: 10px;
-}
-#grad1 {
-  background: -webkit-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
-  background: -moz-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
-  background: -ms-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
-  background: -o-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
-  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
-  text-shadow: 1px 1px 0pt black;
-  color: white;
-  border: 1px solid black;
-  height:5.5em;
-}
-
    - -

    {{EmbedLiveSample('Black_and_white_gradient', '300px', '120px', '')}}

    - -
    background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
    - -

    Farthest-corner渐变

    - - -
    div {
-  display: block;
-  width: 50%;
-  height: 80px;
-  border-radius: 10px;
-  border-color: #000000;
-  padding: 10px;
-}
-#grad1 {
-  background: -webkit-repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
-  background: -moz-repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
-  background: -ms-repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
-  background: -o-repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
-  background: repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
-  text-shadow: 1px 1px 0pt blue;
-  color: white;
-  border: 1px solid black;
-  height:5.5em;
-}
-
    - -

    {{EmbedLiveSample('Farthest-corner', '300px', '120px', '')}}

    - -
    background: repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
    - -

    规格

    - - - - - - - - - - - - - - - - -
    规格状态备注
    {{SpecName('CSS3 Images', '#repeating-gradients', 'repeating-radial-gradient()')}}{{Spec2('CSS3 Images')}}Initial definition.
    - -

    浏览器兼容性

    - -{{Compat("css.types.image.gradient.repeating-radial-gradient")}} - -

    参阅：

    - -
      -
    • 使用渐变
      • -
    • 其他渐变方法: {{cssxref("radial-gradient")}}, {{cssxref("linear-gradient")}}, {{cssxref("repeating-linear-gradient")}}
      • -
    diff --git a/files/zh-cn/web/css/gradient/repeating-radial-gradient/index.html b/files/zh-cn/web/css/gradient/repeating-radial-gradient/index.html new file mode 100644 index 0000000000..13e90c5381 --- /dev/null +++ b/files/zh-cn/web/css/gradient/repeating-radial-gradient/index.html @@ -0,0 +1,182 @@ +--- +title: repeating-radial-gradient() +slug: Web/CSS/gradient/repeating-radial-gradient +tags: + - CSS + - CSS Function + - CSS Images + - Function + - Gradients + - Graphics + - Layout + - Reference + - Web +translation_of: Web/CSS/gradient/repeating-radial-gradient() +original_slug: Web/CSS/gradient/repeating-radial-gradient() +browser-compat: css.types.image.gradient.repeating-radial-gradient +--- +
    {{CSSRef}}
    + +

    CSS函数repeating-radial-gradient() 创建一个从原点辐射的重复渐变组成的{{cssxref("<image>")}} 。它类似于{{cssxref("radial-gradient")}} 并且采用相同的参数，但是它会在所有方向上重复颜色，以覆盖其整个容器。函数的结果是  {{cssxref("<gradient>")}} 数据类型的对象， 是一种特殊的{{cssxref("<image>")}}类型。

    + +
    /* 一个从容器中心点开始的重复渐变,
+   从红色开始，渐变到蓝色，再渐变到绿色 */
+repeating-radial-gradient(circle at center, red 0, blue, green 30px);
+
    + +

    每次重复时，色标位置的偏移量都是基准渐变长度（最后一个色标和第一个之间的距离）的倍数。因此，最后色标的色值应该与第一个色标的色值保持一致；如果不一致的话，会导致非常突兀的渐变效果。

    + +

    与其他渐变一样，线形重复渐变没有提供固定的尺寸； 即, 它没有原始尺寸或首选尺寸，也没有首选的比列。它将自适应于对应元素的尺寸。

    + +
    +

    提示： 因为 <gradient> 属于<image> 数据类型，所以只能在可以使用 <image>的地方使用它们。因此repeating-linear-gradient() 不适用于{{Cssxref("background-color")}} 以及使用{{cssxref("<color>")}} 数据类型的地方。

    +
    + +

    语法

    + +

    值

    + +
    +
    {{cssxref("<position>")}}
    +
    position与 {{cssxref("background-position")}} 或者 {{cssxref("transform-origin")}}类似。默认值为 center.
    +
    {{cssxref("<angle>")}}
    +
    渐变轴的角度。角度顺时针增加，默认值为0deg。
    +
    {{cssxref("<shape>")}}
    +
    渐变的形状。圆形（渐变的形状是一个半径不变的正圆）或椭圆形（轴对称椭圆）。默认值为椭圆。默认值为椭圆形，即 ellipse。
    +
    <extent-keyword>
    +
    关键字用于描述边缘轮廓的具体位置。以下为关键字常量：
    +
    + + + + + + + + + + + + + + + + + + + + + + + +
    KeywordDescription
    closest-side渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）。
    closest-corner渐变的边缘形状与容器距离渐变中心点最近的一个角相交。
    farthest-side与 closest-side相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。
    farthest-corner渐变的边缘形状与容器距离渐变中心点最远的一个角相交。
    + +
    +

    提示: 早期的草案中还包含其他关键字(cover and contain) ，分别相当于标准关键字 farthest-corner 和 closest-side,。但因为在某些实现中丢弃了这些旧的关键字，所以请仅使用标准关键字。

    +
    +
    +
    <color-stop>
    +
    表示某个确定位置的固定色值，包含一个<color>值加上可选的位置值（相对虚拟渐变射线的<percentage>或者<length>长度值）。 百分比值0%，或者长度值0，表示渐变中心点；百分比值100%表示渐变射线与边缘形状相交的点。 其间的百分比值线性对应渐变射线上的点。
    +
    + +

    形式语法

    + +
    repeating-radial-gradient(
+       [[ circle  || <length> ]                     [at <position>]? , |
+        [ ellipse || [<length> | <percentage> ]{2}] [at <position>]? , |
+        [[ circle | ellipse ] || <extent-keyword> ] [at <position>]? , |
+                                                     at <position>   ,    <color-stop> [ , <color-stop> ]+ )
+        \---------------------------------------------------------------/\--------------------------------/
+                  定义轮廓、尺寸和结束形状的位置                                    色标列表
+
+where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
+  and <color-stop> = <color> [ <percentage> | <length> ]?
    + +

    示例

    + +

    径向渐变沿着一条轴线进行渲染。在每个轴线的端点处可以指定一个半径。可以想象为创建了两个“圆”，每个圆的中心位置用点指定，大小由半径值指定。渐变从内圆的圆周向外延伸到外圆的圆周。

    + +

    黑白相间的渐变

    + + +
    div {
+  display: block;
+  width: 50%;
+  height: 80px;
+  border-color: #000000;
+  padding: 10px;
+}
+#grad1 {
+  background: -webkit-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
+  background: -moz-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
+  background: -ms-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
+  background: -o-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
+  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
+  text-shadow: 1px 1px 0pt black;
+  color: white;
+  border: 1px solid black;
+  height:5.5em;
+}
+
    + +

    {{EmbedLiveSample('Black_and_white_gradient', '300px', '120px', '')}}

    + +
    background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
    + +

    Farthest-corner渐变

    + + +
    div {
+  display: block;
+  width: 50%;
+  height: 80px;
+  border-radius: 10px;
+  border-color: #000000;
+  padding: 10px;
+}
+#grad1 {
+  background: -webkit-repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
+  background: -moz-repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
+  background: -ms-repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
+  background: -o-repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
+  background: repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
+  text-shadow: 1px 1px 0pt blue;
+  color: white;
+  border: 1px solid black;
+  height:5.5em;
+}
+
    + +

    {{EmbedLiveSample('Farthest-corner', '300px', '120px', '')}}

    + +
    background: repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
    + +

    规格

    + + + + + + + + + + + + + + + + +
    规格状态备注
    {{SpecName('CSS3 Images', '#repeating-gradients', 'repeating-radial-gradient()')}}{{Spec2('CSS3 Images')}}Initial definition.
    + +

    浏览器兼容性

    + +{{Compat("css.types.image.gradient.repeating-radial-gradient")}} + +

    参阅：

    + +
      +
    • 使用渐变
      • +
    • 其他渐变方法: {{cssxref("radial-gradient")}}, {{cssxref("linear-gradient")}}, {{cssxref("repeating-linear-gradient")}}
      • +
    diff --git a/files/zh-cn/web/css/max()/index.html b/files/zh-cn/web/css/max()/index.html deleted file mode 100644 index c5d3f3de89..0000000000 --- a/files/zh-cn/web/css/max()/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: max() -slug: Web/CSS/max() -translation_of: Web/CSS/max() ---- -
    {{CSSRef}}
    - -

    max() 这个CSS函数让你可以从一个逗号分隔的表达式列表中选择最大（正方向）的值作为属性的值 . max() 可以用于以下场合 {{CSSxRef("<length>")}}, {{CSSxRef("<frequency>")}}, {{CSSxRef("<angle>")}}, {{CSSxRef("<time>")}}, {{CSSxRef("<percentage>")}}, {{CSSxRef("<number>")}}, 或 {{CSSxRef("<integer>")}} 。

    - -
    /* property: max(expression [, expression]) */
-width: max(10vw, 4em, 80px);
-
    - -

    在上面这个例子中，宽度最小会是80px，除非视图宽度大于800px或者是一个em比20px宽。简单来说，最小宽度是80px。你也可以认为max()的值提供了一个属性最小可能的值。

    - -

    语法

    - -

    max() 方法接受一个或多个用逗号分隔的表达式作为他的参数，数值最大的表达式的值将会作为指定的属性的值。

    - -

    表达式可以是数学运算 (可在 {{CSSxRef("calc", "calc()")}} 了解更多信息), 直接数值, 或者是其他表达式，例如attr()，这将会计算成一个合法的参数类型（例如 {{CSSxRef("<length>")}}），也可以是嵌套的  {{CSSxRef("min", "min()")}} 和 max() 函数.

    - -

    你可以使用你的表达式中分别使用不同的单位。需要时，你也可以使用小括号来设定运算顺序。

    - -

    备注

    - -
      -
    • Math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables may be treated as if auto had been specified.
      • -
    • It is permitted to nest min() and other max() functions as expression values. The expressions are full math expressions, so you can use direct addition, subtraction, multiplication and division without using the calc() function itself.
      • -
    • The expression can be values combining the addition ( + ), subtraction ( - ), multiplication ( * ) and division ( / ) operators, using standard operator precedence rules. Make sure to put a space on each side of the + and - operands. The operands in the expression may be any <length> syntax value. 
      • -
    • Oftentimes you will want to combine min() and max() values, or use max() within a clamp() or calc() function.
      • -
    - -

    Formal syntax

    - -{{CSSSyntax}} - -

    例子

    - -

    使图片保持一个最小的尺寸

    - -

    max() makes it easy to set a minimum width for an image. In this example, the CSS creates a logo that stretches half way across the window on larger devices, but does not not exceed 300px on wider devices, without the use of media queries:

    - -
    .logo {
-  width: max(50vw, 300px);
-}
-
    - -
    <img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo">
    - -

    {{EmbedLiveSample("Making_images_at_least_a_minimum_size", "100%", "60")}}

    - -

    In this example, the logo will be at least 300px wide, but wider if the viewport grows above 600px, at which point it will grow as the viewport grows, always being 50% of the width of the viewport.

    - -

    为字体设定一个最小字号

    - -

    Another use case for CSS functions is allow a font size to grow while ensuring it is at least a mimum size, enabling responsive font sizes while ensuring legibility.

    - -

    Let's look at some CSS:

    - -
    h1 {
-  font-size: 2rem;
-}
-h1.responsive {
-  font-size: max(4vw, 2em, 2rem);
-}
-
    - -

    The font-size will at minimum be 2rems, or twice the default size of font for the page. This ensure it is legible and ensures accessibility

    - -
    <h1>This text is always legible, but doesn't change size</h1>
-<h1 class="responsive">This text is always legible, and is responsive, to a point</h1>
-
    - -

    {{EmbedLiveSample("Setting_a_minimum_size_for_a_font", "100%", "300")}}

    - -

    Think of the max() function as finding the minimum value allowed for a property.

    - -

    无障碍

    - -

    When max() is used for controlling text size, make sure the text is always large enough to read. A suggestion is to use the {{CSSxRef("min", "min()")}} function nested within a max() that has as its second value a relative length unit that is always large enough to read. For example:

    - -
    small {
-  font-size: max(min(0.5vw, 0.5em), 1rem);
-}
    - -

    This ensures a minimum size of 1rem, with a text size that scales if the page is zoomed.

    - -

    规范

    - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName("CSS4 Values", "#calc-notation", "max()")}}{{Spec2("CSS4 Values")}}Initial definition
    - -

    浏览器兼容性

    - - - -

    {{Compat("css.types.max")}}

    - -

    也可以看看

    - -
      -
    • {{CSSxRef("calc", "calc()")}}
      • -
    • {{CSSxRef("clamp", "clamp()")}}
      • -
    • {{CSSxRef("min", "min()")}}
      • -
    • CSS Values
      • -
    diff --git a/files/zh-cn/web/css/max/index.html b/files/zh-cn/web/css/max/index.html new file mode 100644 index 0000000000..6d36661025 --- /dev/null +++ b/files/zh-cn/web/css/max/index.html @@ -0,0 +1,121 @@ +--- +title: max() +slug: Web/CSS/max +translation_of: Web/CSS/max() +original_slug: Web/CSS/max() +--- +
    {{CSSRef}}
    + +

    max() 这个CSS函数让你可以从一个逗号分隔的表达式列表中选择最大（正方向）的值作为属性的值 . max() 可以用于以下场合 {{CSSxRef("<length>")}}, {{CSSxRef("<frequency>")}}, {{CSSxRef("<angle>")}}, {{CSSxRef("<time>")}}, {{CSSxRef("<percentage>")}}, {{CSSxRef("<number>")}}, 或 {{CSSxRef("<integer>")}} 。

    + +
    /* property: max(expression [, expression]) */
+width: max(10vw, 4em, 80px);
+
    + +

    在上面这个例子中，宽度最小会是80px，除非视图宽度大于800px或者是一个em比20px宽。简单来说，最小宽度是80px。你也可以认为max()的值提供了一个属性最小可能的值。

    + +

    语法

    + +

    max() 方法接受一个或多个用逗号分隔的表达式作为他的参数，数值最大的表达式的值将会作为指定的属性的值。

    + +

    表达式可以是数学运算 (可在 {{CSSxRef("calc", "calc()")}} 了解更多信息), 直接数值, 或者是其他表达式，例如attr()，这将会计算成一个合法的参数类型（例如 {{CSSxRef("<length>")}}），也可以是嵌套的  {{CSSxRef("min", "min()")}} 和 max() 函数.

    + +

    你可以使用你的表达式中分别使用不同的单位。需要时，你也可以使用小括号来设定运算顺序。

    + +

    备注

    + +
      +
    • Math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables may be treated as if auto had been specified.
      • +
    • It is permitted to nest min() and other max() functions as expression values. The expressions are full math expressions, so you can use direct addition, subtraction, multiplication and division without using the calc() function itself.
      • +
    • The expression can be values combining the addition ( + ), subtraction ( - ), multiplication ( * ) and division ( / ) operators, using standard operator precedence rules. Make sure to put a space on each side of the + and - operands. The operands in the expression may be any <length> syntax value. 
      • +
    • Oftentimes you will want to combine min() and max() values, or use max() within a clamp() or calc() function.
      • +
    + +

    Formal syntax

    + +{{CSSSyntax}} + +

    例子

    + +

    使图片保持一个最小的尺寸

    + +

    max() makes it easy to set a minimum width for an image. In this example, the CSS creates a logo that stretches half way across the window on larger devices, but does not not exceed 300px on wider devices, without the use of media queries:

    + +
    .logo {
+  width: max(50vw, 300px);
+}
+
    + +
    <img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo">
    + +

    {{EmbedLiveSample("Making_images_at_least_a_minimum_size", "100%", "60")}}

    + +

    In this example, the logo will be at least 300px wide, but wider if the viewport grows above 600px, at which point it will grow as the viewport grows, always being 50% of the width of the viewport.

    + +

    为字体设定一个最小字号

    + +

    Another use case for CSS functions is allow a font size to grow while ensuring it is at least a mimum size, enabling responsive font sizes while ensuring legibility.

    + +

    Let's look at some CSS:

    + +
    h1 {
+  font-size: 2rem;
+}
+h1.responsive {
+  font-size: max(4vw, 2em, 2rem);
+}
+
    + +

    The font-size will at minimum be 2rems, or twice the default size of font for the page. This ensure it is legible and ensures accessibility

    + +
    <h1>This text is always legible, but doesn't change size</h1>
+<h1 class="responsive">This text is always legible, and is responsive, to a point</h1>
+
    + +

    {{EmbedLiveSample("Setting_a_minimum_size_for_a_font", "100%", "300")}}

    + +

    Think of the max() function as finding the minimum value allowed for a property.

    + +

    无障碍

    + +

    When max() is used for controlling text size, make sure the text is always large enough to read. A suggestion is to use the {{CSSxRef("min", "min()")}} function nested within a max() that has as its second value a relative length unit that is always large enough to read. For example:

    + +
    small {
+  font-size: max(min(0.5vw, 0.5em), 1rem);
+}
    + +

    This ensures a minimum size of 1rem, with a text size that scales if the page is zoomed.

    + +

    规范

    + + + + + + + + + + + + + + + + +
    SpecificationStatusComment
    {{SpecName("CSS4 Values", "#calc-notation", "max()")}}{{Spec2("CSS4 Values")}}Initial definition
    + +

    浏览器兼容性

    + + + +

    {{Compat("css.types.max")}}

    + +

    也可以看看

    + +
      +
    • {{CSSxRef("calc", "calc()")}}
      • +
    • {{CSSxRef("clamp", "clamp()")}}
      • +
    • {{CSSxRef("min", "min()")}}
      • +
    • CSS Values
      • +
    diff --git a/files/zh-cn/web/css/min()/index.html b/files/zh-cn/web/css/min()/index.html deleted file mode 100644 index 7ce2caed4f..0000000000 --- a/files/zh-cn/web/css/min()/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: min() -slug: Web/CSS/min() -translation_of: Web/CSS/min() ---- -

    {{CSSRef}}

    - -

    min() CSS 方法允许你从逗号分隔符表达式中选择一个最小值作为 CSS 的属性值。min() 方法可以用于以下任何属性中 {{CSSxRef("<length>")}}, {{CSSxRef("<frequency>")}}, {{CSSxRef("<angle>")}}, {{CSSxRef("<time>")}}, {{CSSxRef("<percentage>")}},{{CSSxRef("<number>")}}, 或者 {{CSSxRef("<integer>")}}。

    - -
    /* property: min(expression [, expression]) */
-width: min(1vw, 4em, 80px);
    - -

    在上面的例子中，宽度最多是80px。如果视口的宽度小于800px，或者一个em的宽度小于20px，则会更窄。换句话说，最大宽度是80px，

    - -

    语法

    - -

    min() 方法拥有一个或多个逗号分隔符表达式作为参数，表达式的值中最小的值作为参数值。表达式可以是数学函数 (查看 {{CSSxRef("calc", "calc()")}} 了解更多), 字面量，或者其他表达式，比如 {{CSSxRef("attr", "attr()")}}, 可以求得有效值的的类型 (比如 {{CSSxRef("<length>")}})。如果你愿意，你甚至可以在表达式中给每个值一个不同的单位。并且在需要的地方只用圆括号改变计算优先级。

    - -

    注意

    - -
      -
    • Math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables may be treated as if auto had been specified.max
      • -
    • It is permitted to nest max() and other min() functions as expression values. The expressions are full math expressions, so you can use direct addition, subtraction, multiplication and division without using the calc() function itself.
      • -
    • The expression can be values combining the addition ( + ), subtraction ( - ), multiplication ( * ) and division ( / ) operators, using standard operator precedence rules. Make sure to put a space on each side of the + and - operands. The operands in the expression may be any <length> syntax value. You can use different units for each value in your expression. You may also use parentheses to establish computation order when needed.
      • -
    • Oftentimes you will want to comine min() and max() values, or use min() within a clamp() or calc() function.
      • -
    • You can provide more than two arguments, if you have multiple constraints to apply.
      • -
    - -

    Formal syntax

    - -{{CSSSyntax}} - -

    Examples

    - -

    Growing images to a maximum size

    - -

    min() 让我们在设置图像的最大宽度时更简单。在下面这个例子中，在小型设备上宽度拉伸为window的一半，但在大型设备上，不超过300px，不使用媒体查询：

    - -
    .logo {
-  width: min(50vw, 300px);
-}
-
    - -
    <img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo">
    - -

    {{EmbedLiveSample("Growing_images_to_a_maximum_size", "100%", "60")}}

    - -

    在这个例子中，除非视口比 600px 更窄，否则logo的宽会被设置为 300px，到时候，它会随着视口的缩小而缩小，而且总是视口宽度的50%。

    - -

    给 label 和 input 设置最大值

    - -

    CSS方法的另一个用途时设置响应式组件（form）的最大尺寸：让 label 和 input 的宽度随着组件的缩小而缩小。

    - -

    看下面的样式：

    - -
    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;
-}
-
    - -

    这里，form 的 margin，border，padding 总是它父元素的宽度的100%。我们声明 input 和 label 的宽度比form的40%还小或者400px宽，只要取决于哪一个最小。换句话说，input 和 label 的最大宽度就是400px，最窄就是form的40%。因此看起来会显得很小。

    - -
    <form>
-  <label>Type something:</label>
-  <input type="text">
-</form>
-
    - -

    {{EmbedLiveSample("Setting_a_maximum_size_for_an_label_and_input", "100%", "80")}}

    - -

    Think of the min() function as finding the maximum value allowed for a property.

    - -

    无障碍问题

    - -

    当min() 用于控制文本大小时，要保证文本足够大以便于阅读。建议把 min() 方法嵌入到 {{CSSxRef("max", "max()")}} 中， relative length unit 这样就可以便于阅读，比如：

    - -
    small {
-  font-size: max(min(0.5vw, 0.5em), 1rem);
-}
    - -

    这用于保证最小值是1rem，这样在页面缩放时文本也会缩放。

    - - - -

    说明

    - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName("CSS4 Values", "#calc-notation", "min()")}}{{Spec2("CSS4 Values")}}Initial definition.
    - -

    Browser compatibility

    - - - -

    {{Compat("css.types.min")}}

    - -

    See also

    - -
      -
    • {{CSSxRef("calc", "calc()")}}
      • -
    • {{CSSxRef("clamp", "clamp()")}}
      • -
    • {{CSSxRef("max", "max()")}}
      • -
    • CSS Values
      • -
    diff --git a/files/zh-cn/web/css/min/index.html b/files/zh-cn/web/css/min/index.html new file mode 100644 index 0000000000..446746e09b --- /dev/null +++ b/files/zh-cn/web/css/min/index.html @@ -0,0 +1,131 @@ +--- +title: min() +slug: Web/CSS/min +translation_of: Web/CSS/min() +original_slug: Web/CSS/min() +--- +

    {{CSSRef}}

    + +

    min() CSS 方法允许你从逗号分隔符表达式中选择一个最小值作为 CSS 的属性值。min() 方法可以用于以下任何属性中 {{CSSxRef("<length>")}}, {{CSSxRef("<frequency>")}}, {{CSSxRef("<angle>")}}, {{CSSxRef("<time>")}}, {{CSSxRef("<percentage>")}},{{CSSxRef("<number>")}}, 或者 {{CSSxRef("<integer>")}}。

    + +
    /* property: min(expression [, expression]) */
+width: min(1vw, 4em, 80px);
    + +

    在上面的例子中，宽度最多是80px。如果视口的宽度小于800px，或者一个em的宽度小于20px，则会更窄。换句话说，最大宽度是80px，

    + +

    语法

    + +

    min() 方法拥有一个或多个逗号分隔符表达式作为参数，表达式的值中最小的值作为参数值。表达式可以是数学函数 (查看 {{CSSxRef("calc", "calc()")}} 了解更多), 字面量，或者其他表达式，比如 {{CSSxRef("attr", "attr()")}}, 可以求得有效值的的类型 (比如 {{CSSxRef("<length>")}})。如果你愿意，你甚至可以在表达式中给每个值一个不同的单位。并且在需要的地方只用圆括号改变计算优先级。

    + +

    注意

    + +
      +
    • Math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables may be treated as if auto had been specified.max
      • +
    • It is permitted to nest max() and other min() functions as expression values. The expressions are full math expressions, so you can use direct addition, subtraction, multiplication and division without using the calc() function itself.
      • +
    • The expression can be values combining the addition ( + ), subtraction ( - ), multiplication ( * ) and division ( / ) operators, using standard operator precedence rules. Make sure to put a space on each side of the + and - operands. The operands in the expression may be any <length> syntax value. You can use different units for each value in your expression. You may also use parentheses to establish computation order when needed.
      • +
    • Oftentimes you will want to comine min() and max() values, or use min() within a clamp() or calc() function.
      • +
    • You can provide more than two arguments, if you have multiple constraints to apply.
      • +
    + +

    Formal syntax

    + +{{CSSSyntax}} + +

    Examples

    + +

    Growing images to a maximum size

    + +

    min() 让我们在设置图像的最大宽度时更简单。在下面这个例子中，在小型设备上宽度拉伸为window的一半，但在大型设备上，不超过300px，不使用媒体查询：

    + +
    .logo {
+  width: min(50vw, 300px);
+}
+
    + +
    <img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo">
    + +

    {{EmbedLiveSample("Growing_images_to_a_maximum_size", "100%", "60")}}

    + +

    在这个例子中，除非视口比 600px 更窄，否则logo的宽会被设置为 300px，到时候，它会随着视口的缩小而缩小，而且总是视口宽度的50%。

    + +

    给 label 和 input 设置最大值

    + +

    CSS方法的另一个用途时设置响应式组件（form）的最大尺寸：让 label 和 input 的宽度随着组件的缩小而缩小。

    + +

    看下面的样式：

    + +
    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;
+}
+
    + +

    这里，form 的 margin，border，padding 总是它父元素的宽度的100%。我们声明 input 和 label 的宽度比form的40%还小或者400px宽，只要取决于哪一个最小。换句话说，input 和 label 的最大宽度就是400px，最窄就是form的40%。因此看起来会显得很小。

    + +
    <form>
+  <label>Type something:</label>
+  <input type="text">
+</form>
+
    + +

    {{EmbedLiveSample("Setting_a_maximum_size_for_an_label_and_input", "100%", "80")}}

    + +

    Think of the min() function as finding the maximum value allowed for a property.

    + +

    无障碍问题

    + +

    当min() 用于控制文本大小时，要保证文本足够大以便于阅读。建议把 min() 方法嵌入到 {{CSSxRef("max", "max()")}} 中， relative length unit 这样就可以便于阅读，比如：

    + +
    small {
+  font-size: max(min(0.5vw, 0.5em), 1rem);
+}
    + +

    这用于保证最小值是1rem，这样在页面缩放时文本也会缩放。

    + + + +

    说明

    + + + + + + + + + + + + + + + + +
    SpecificationStatusComment
    {{SpecName("CSS4 Values", "#calc-notation", "min()")}}{{Spec2("CSS4 Values")}}Initial definition.
    + +

    Browser compatibility

    + + + +

    {{Compat("css.types.min")}}

    + +

    See also

    + +
      +
    • {{CSSxRef("calc", "calc()")}}
      • +
    • {{CSSxRef("clamp", "clamp()")}}
      • +
    • {{CSSxRef("max", "max()")}}
      • +
    • CSS Values
      • +
    diff --git a/files/zh-cn/web/css/minmax()/index.html b/files/zh-cn/web/css/minmax()/index.html deleted file mode 100644 index 4509e35f5d..0000000000 --- a/files/zh-cn/web/css/minmax()/index.html +++ /dev/null @@ -1,198 +0,0 @@ ---- -title: minmax() -slug: Web/CSS/minmax() -tags: - - CSS - - CSS函数 - - CSS网格 - - Web - - 参考 - - 实验 - - 布局 -translation_of: Web/CSS/minmax() ---- -

    CSS函数minmax()定义了一个长宽范围的闭区间， 它与CSS网格布局一起使用。

    - -
    /* <inflexible-breadth>, <track-breadth> values */
-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)
-
-/* <fixed-breadth>, <track-breadth> values */
-minmax(200px, 1fr)
-minmax(30%, 300px)
-minmax(400px, 50%)
-minmax(50%, min-content)
-minmax(300px, max-content)
-minmax(200px, auto)
-
-/* <inflexible-breadth>, <fixed-breadth> values */
-minmax(400px, 50%)
-minmax(30%, 300px)
-minmax(min-content, 200px)
-minmax(max-content, 200px)
-minmax(auto, 300px)
-
    - -

    语法

    - -

    此函数包含两个参数，最小值 和 最大值.

    - -

    每个参数分别是<length>、<percentage>、<flex>的一种，或者是max-content、min-content、或auto之一。

    - -

    如果 最大值 < 最小值，则最大值被忽略并且minmax(最小值,最大值)被看成最小值。{{cssxref("flex_value","<flex>")}} 值作为最大值时设置网格轨道的弹性系数；作为最小值时无效。

    - -

    取值

    - -
    -
    {{cssxref("<length>")}}
    -
    非负长度。
    -
    {{cssxref("<percentage>")}}
    -
    相对于列轨道中网格容器的内联大小的非负百分比，以及行轨道中网格容器的块长宽。 如果网格容器的长宽取决于其轴的长宽，则<percentage> 必须取值为auto。{{glossary("user agent")}} 可将轨道的内部长宽贡献调整为网格容器的长宽，并按将导致百分比达到的最小值来增加轨道的最终长宽。
    -
    {{cssxref("<flex>")}}
    -
    单位为fr的非负维度，指定轨道弹性布局的系数值。每个<flex>长度的轨道都以其系数值比例均分剩余空间。
    -
    max-content
    -
    表示网格的轨道长度自适应内容最大的那个单元格。
    -
    min-content
    -
    表示网格的轨道长度自适应内容最小的那个单元格。
    -
    auto
    -
    作为最大值时，等价于 max-content。作为最小值时，它表示轨道中单元格最小长宽 (由{{cssxref("min-width")}}/{{cssxref("min-height")}})的最大值。
    -
    - -

    正式语法

    - -{{csssyntax}} - -

    示例

    -
    -

    CSS

    - -
    #container {
-  display: grid;
-  grid-template-columns: minmax(max-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

    - -
    <div id="container">
-  <div>
-    Item as wide as the content,<br/>
-    but at most 300 pixels.
-  </div>
-  <div>
-    Item with flexible width but a minimum of 200 pixels.
-  </div>
-  <div>
-    Inflexible item of 150 pixels width.
-  </div>
-</div>
    -
    -

    Result

    - -

    {{EmbedLiveSample("example", "100%", 200)}}

    - -

    规范

    - - - - - - - - - - - - - - - - -
    规范状态备注
    {{SpecName("CSS Grid", "#valdef-grid-template-columns-minmax", "minmax()")}}{{Spec2("CSS Grid")}}初始定义
    - -

    浏览器兼容性

    - -

    {{Compat("css.properties.grid-template-columns.minmax")}}

    - -

    参考

    - - - - diff --git a/files/zh-cn/web/css/minmax/index.html b/files/zh-cn/web/css/minmax/index.html new file mode 100644 index 0000000000..221c997184 --- /dev/null +++ b/files/zh-cn/web/css/minmax/index.html @@ -0,0 +1,199 @@ +--- +title: minmax() +slug: Web/CSS/minmax +tags: + - CSS + - CSS函数 + - CSS网格 + - Web + - 参考 + - 实验 + - 布局 +translation_of: Web/CSS/minmax() +original_slug: Web/CSS/minmax() +--- +

    CSS函数minmax()定义了一个长宽范围的闭区间， 它与CSS网格布局一起使用。

    + +
    /* <inflexible-breadth>, <track-breadth> values */
+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)
+
+/* <fixed-breadth>, <track-breadth> values */
+minmax(200px, 1fr)
+minmax(30%, 300px)
+minmax(400px, 50%)
+minmax(50%, min-content)
+minmax(300px, max-content)
+minmax(200px, auto)
+
+/* <inflexible-breadth>, <fixed-breadth> values */
+minmax(400px, 50%)
+minmax(30%, 300px)
+minmax(min-content, 200px)
+minmax(max-content, 200px)
+minmax(auto, 300px)
+
    + +

    语法

    + +

    此函数包含两个参数，最小值 和 最大值.

    + +

    每个参数分别是<length>、<percentage>、<flex>的一种，或者是max-content、min-content、或auto之一。

    + +

    如果 最大值 < 最小值，则最大值被忽略并且minmax(最小值,最大值)被看成最小值。{{cssxref("flex_value","<flex>")}} 值作为最大值时设置网格轨道的弹性系数；作为最小值时无效。

    + +

    取值

    + +
    +
    {{cssxref("<length>")}}
    +
    非负长度。
    +
    {{cssxref("<percentage>")}}
    +
    相对于列轨道中网格容器的内联大小的非负百分比，以及行轨道中网格容器的块长宽。 如果网格容器的长宽取决于其轴的长宽，则<percentage> 必须取值为auto。{{glossary("user agent")}} 可将轨道的内部长宽贡献调整为网格容器的长宽，并按将导致百分比达到的最小值来增加轨道的最终长宽。
    +
    {{cssxref("<flex>")}}
    +
    单位为fr的非负维度，指定轨道弹性布局的系数值。每个<flex>长度的轨道都以其系数值比例均分剩余空间。
    +
    max-content
    +
    表示网格的轨道长度自适应内容最大的那个单元格。
    +
    min-content
    +
    表示网格的轨道长度自适应内容最小的那个单元格。
    +
    auto
    +
    作为最大值时，等价于 max-content。作为最小值时，它表示轨道中单元格最小长宽 (由{{cssxref("min-width")}}/{{cssxref("min-height")}})的最大值。
    +
    + +

    正式语法

    + +{{csssyntax}} + +

    示例

    +
    +

    CSS

    + +
    #container {
+  display: grid;
+  grid-template-columns: minmax(max-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

    + +
    <div id="container">
+  <div>
+    Item as wide as the content,<br/>
+    but at most 300 pixels.
+  </div>
+  <div>
+    Item with flexible width but a minimum of 200 pixels.
+  </div>
+  <div>
+    Inflexible item of 150 pixels width.
+  </div>
+</div>
    +
    +

    Result

    + +

    {{EmbedLiveSample("example", "100%", 200)}}

    + +

    规范

    + + + + + + + + + + + + + + + + +
    规范状态备注
    {{SpecName("CSS Grid", "#valdef-grid-template-columns-minmax", "minmax()")}}{{Spec2("CSS Grid")}}初始定义
    + +

    浏览器兼容性

    + +

    {{Compat("css.properties.grid-template-columns.minmax")}}

    + +

    参考

    + + + + diff --git a/files/zh-cn/web/css/repeat()/index.html b/files/zh-cn/web/css/repeat()/index.html deleted file mode 100644 index e47a350e45..0000000000 --- a/files/zh-cn/web/css/repeat()/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: repeat() -slug: Web/CSS/repeat() -tags: - - CSS Grid - - Layout - - Repeat -translation_of: Web/CSS/repeat() ---- -
    {{cssref}}
    - -

    CSS repeat() 函数表示轨道列表的重复片段，允许以更紧凑的形式写入大量显示重复模式的列或行。

    - -

    该函数可以用于 CSS Grid 属性中 {{cssxref("grid-template-columns")}} 和 {{cssxref("grid-template-rows")}}.

    - -
    /* <track-repeat> values */
-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])
-
-/* <auto-repeat> values */
-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])
-
-/* <fixed-repeat> values */
-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])
-
    - -

    语法

    - -

    取值

    - -
    -
    {{cssxref("<length>")}}
    -
    正整数长度。
    -
    {{cssxref("<percentage>")}}
    -
    相对于列网格轨道中网格容器的行内大小以及行网格轨道中网格容器的块大小的非负百分比。如果网格容器的大小取决于它的轨道大小，那么 <percentage> 必须被视为 auto. 用户代理（user-agent）可以将轨道的固有大小贡献调整为网格容器的大小，将轨道的最终大小增加到可以遵守该百分比的最小数量。
    -
    {{cssxref("<flex>")}}
    -
    带有 fr 单位的非负尺寸指定轨道的弹性系数。任何被 <flex> 指定大小的轨道会根据其弹性系数按比例分配剩余空间。
    -
    max-content
    -
    代表占据网格轨道的网格项目所分配的最大内容区域的最大值。
    -
    min-content
    -
    代表占据网格轨道的网格项目所分配的最小内容区域的最小值。
    -
    auto
    -
    作为最大值，等同于 max-content。作为最小值，它代表占据网格轨道的网格项目的最小尺寸的最大值 （如同{{cssxref("min-width")}}/{{cssxref("min-height")}}所指定的)）。
    -
    auto-fill
    -
    如果网格容器在相关轴上具有确定的大小或最大大小，则重复次数是最大可能的正整数，不会导致网格溢出其网格容器。如果定义了，将每个轨道视为其最大轨道尺寸大小函数 ( grid-template-rows 或 grid-template-columns用于定义的每个独立值。 否则，作为最小轨道尺寸函数，将网格间隙加入计算. 如果重复次数过多，那么重复值是 1 。否则，如果网格容器在相关轴上具有确定的最小尺寸，重复次数是满足该最低要求的可能的最小正整数。 否则，指定的轨道列表仅重复一次。
    -
    auto-fit
    -
    -

    行为与 auto-fill 相同，除了放置网格项目后，所有空的重复轨道都将折叠。空轨道是指没有流入网格或跨越网格的网格项目。（如果所有轨道都为空，则可能导致所有轨道被折叠。）

    - -

    折叠的轨道被视为具有单个固定轨道大小函数为 0px，两侧的槽都折叠了。

    - -

    为了找到自动重复的轨道数，用户代理将轨道大小限制为用户代理指定的值（例如 1px），以避免被零除。

    -
    -
    - -

    例子

    - -

    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

    - -
    <div id="container">
-  <div>
-    This item is 50 pixels wide.
-  </div>
-  <div>
-    Item with flexible width.
-  </div>
-  <div>
-    This item is 50 pixels wide.
-  </div>
-  <div>
-    Item with flexible width.
-  </div>
-  <div>
-    Inflexible item of 100 pixels width.
-  </div>
-</div>
    - -

    结果

    - -

    {{EmbedLiveSample("Example", "100%", 200)}}

    - -

    规范

    - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName("CSS Grid", "#funcdef-repeat", "repeat()")}}{{Spec2("CSS Grid")}}Initial definition
    - -

    Browser compatibility

    - - - -

    {{Compat("css.properties.grid-template-columns.repeat")}}

    diff --git a/files/zh-cn/web/css/repeat/index.html b/files/zh-cn/web/css/repeat/index.html new file mode 100644 index 0000000000..30248d6736 --- /dev/null +++ b/files/zh-cn/web/css/repeat/index.html @@ -0,0 +1,144 @@ +--- +title: repeat() +slug: Web/CSS/repeat +tags: + - CSS Grid + - Layout + - Repeat +translation_of: Web/CSS/repeat() +original_slug: Web/CSS/repeat() +--- +
    {{cssref}}
    + +

    CSS repeat() 函数表示轨道列表的重复片段，允许以更紧凑的形式写入大量显示重复模式的列或行。

    + +

    该函数可以用于 CSS Grid 属性中 {{cssxref("grid-template-columns")}} 和 {{cssxref("grid-template-rows")}}.

    + +
    /* <track-repeat> values */
+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])
+
+/* <auto-repeat> values */
+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])
+
+/* <fixed-repeat> values */
+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])
+
    + +

    语法

    + +

    取值

    + +
    +
    {{cssxref("<length>")}}
    +
    正整数长度。
    +
    {{cssxref("<percentage>")}}
    +
    相对于列网格轨道中网格容器的行内大小以及行网格轨道中网格容器的块大小的非负百分比。如果网格容器的大小取决于它的轨道大小，那么 <percentage> 必须被视为 auto. 用户代理（user-agent）可以将轨道的固有大小贡献调整为网格容器的大小，将轨道的最终大小增加到可以遵守该百分比的最小数量。
    +
    {{cssxref("<flex>")}}
    +
    带有 fr 单位的非负尺寸指定轨道的弹性系数。任何被 <flex> 指定大小的轨道会根据其弹性系数按比例分配剩余空间。
    +
    max-content
    +
    代表占据网格轨道的网格项目所分配的最大内容区域的最大值。
    +
    min-content
    +
    代表占据网格轨道的网格项目所分配的最小内容区域的最小值。
    +
    auto
    +
    作为最大值，等同于 max-content。作为最小值，它代表占据网格轨道的网格项目的最小尺寸的最大值 （如同{{cssxref("min-width")}}/{{cssxref("min-height")}}所指定的)）。
    +
    auto-fill
    +
    如果网格容器在相关轴上具有确定的大小或最大大小，则重复次数是最大可能的正整数，不会导致网格溢出其网格容器。如果定义了，将每个轨道视为其最大轨道尺寸大小函数 ( grid-template-rows 或 grid-template-columns用于定义的每个独立值。 否则，作为最小轨道尺寸函数，将网格间隙加入计算. 如果重复次数过多，那么重复值是 1 。否则，如果网格容器在相关轴上具有确定的最小尺寸，重复次数是满足该最低要求的可能的最小正整数。 否则，指定的轨道列表仅重复一次。
    +
    auto-fit
    +
    +

    行为与 auto-fill 相同，除了放置网格项目后，所有空的重复轨道都将折叠。空轨道是指没有流入网格或跨越网格的网格项目。（如果所有轨道都为空，则可能导致所有轨道被折叠。）

    + +

    折叠的轨道被视为具有单个固定轨道大小函数为 0px，两侧的槽都折叠了。

    + +

    为了找到自动重复的轨道数，用户代理将轨道大小限制为用户代理指定的值（例如 1px），以避免被零除。

    +
    +
    + +

    例子

    + +

    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

    + +
    <div id="container">
+  <div>
+    This item is 50 pixels wide.
+  </div>
+  <div>
+    Item with flexible width.
+  </div>
+  <div>
+    This item is 50 pixels wide.
+  </div>
+  <div>
+    Item with flexible width.
+  </div>
+  <div>
+    Inflexible item of 100 pixels width.
+  </div>
+</div>
    + +

    结果

    + +

    {{EmbedLiveSample("Example", "100%", 200)}}

    + +

    规范

    + + + + + + + + + + + + + + + + +
    SpecificationStatusComment
    {{SpecName("CSS Grid", "#funcdef-repeat", "repeat()")}}{{Spec2("CSS Grid")}}Initial definition
    + +

    Browser compatibility

    + + + +

    {{Compat("css.properties.grid-template-columns.repeat")}}

    diff --git a/files/zh-cn/web/css/transform-function/matrix()/index.html b/files/zh-cn/web/css/transform-function/matrix()/index.html deleted file mode 100644 index 85c5d7bc8e..0000000000 --- a/files/zh-cn/web/css/transform-function/matrix()/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: matrix() -slug: Web/CSS/transform-function/matrix() -translation_of: Web/CSS/transform-function/matrix() ---- -

    CSS函数 matrix() 指定了一个由指定的 6 个值组成的 2D 变换矩阵。这种矩阵的常量值是隐含的，而不是由参数传递的；其他的参数是以列优先的顺序描述的。

    - -

    matrix(a, b, c, d, tx, ty) 是 matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1) 的简写。

    - -
    注意: 直到 Firefox 16, Gecko 才接受对于 tx 和 ty 的 {{cssxref("<length>")}} 值.
    - -

    语法

    - -
    matrix(a, b, c, d, tx, ty)
-
    - -

    参数值

    - -
    -
    a b c d
    -
    描述线性变换的 {{cssxref("<number>")}} 。
    -
    tx ty
    -
    描述如何应用这个变换的 {{cssxref("<number>")}} 。
    -
    - - - - - - - - - - - - - - - - - - - - - -
    ℝ2 下的笛卡尔坐标ℝℙ2  下齐次坐标ℝ3下的笛卡尔坐标ℝℙ3下的齐次坐标
    ac bd -


    - a  c  tx
    - b  d  ty
    - 0  0  1

    -     		a  c  tx
    - b  d  ty
    - 0  0  1     		ac0txbd0ty00100001
    [a b c d tx ty]
    - -

    这些值表示以下函数:

    - -

    matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )

    - -

    示例

    - -

    HTML

    - -
    <div>Normal</div>
-<div class="changed">Changed</div>
-
    - -

    CSS

    - -
    div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.changed {
-  transform: matrix(1, 2, -1, 1, 80, 80);
-  background-color: pink;
-}
-
-
    - -

    结果

    - -

    请看英文版案例 /zh-CN/docs/Web/CSS/transform-function/matrix#Result

    diff --git a/files/zh-cn/web/css/transform-function/matrix/index.html b/files/zh-cn/web/css/transform-function/matrix/index.html new file mode 100644 index 0000000000..7f5f8f8e62 --- /dev/null +++ b/files/zh-cn/web/css/transform-function/matrix/index.html @@ -0,0 +1,85 @@ +--- +title: matrix() +slug: Web/CSS/transform-function/matrix +translation_of: Web/CSS/transform-function/matrix() +original_slug: Web/CSS/transform-function/matrix() +--- +

    CSS函数 matrix() 指定了一个由指定的 6 个值组成的 2D 变换矩阵。这种矩阵的常量值是隐含的，而不是由参数传递的；其他的参数是以列优先的顺序描述的。

    + +

    matrix(a, b, c, d, tx, ty) 是 matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1) 的简写。

    + +
    注意: 直到 Firefox 16, Gecko 才接受对于 tx 和 ty 的 {{cssxref("<length>")}} 值.
    + +

    语法

    + +
    matrix(a, b, c, d, tx, ty)
+
    + +

    参数值

    + +
    +
    a b c d
    +
    描述线性变换的 {{cssxref("<number>")}} 。
    +
    tx ty
    +
    描述如何应用这个变换的 {{cssxref("<number>")}} 。
    +
    + + + + + + + + + + + + + + + + + + + + + +
    ℝ2 下的笛卡尔坐标ℝℙ2  下齐次坐标ℝ3下的笛卡尔坐标ℝℙ3下的齐次坐标
    ac bd +


    + a  c  tx
    + b  d  ty
    + 0  0  1

    +     		a  c  tx
    + b  d  ty
    + 0  0  1     		ac0txbd0ty00100001
    [a b c d tx ty]
    + +

    这些值表示以下函数:

    + +

    matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )

    + +

    示例

    + +

    HTML

    + +
    <div>Normal</div>
+<div class="changed">Changed</div>
+
    + +

    CSS

    + +
    div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.changed {
+  transform: matrix(1, 2, -1, 1, 80, 80);
+  background-color: pink;
+}
+
+
    + +

    结果

    + +

    请看英文版案例 /zh-CN/docs/Web/CSS/transform-function/matrix#Result

    diff --git a/files/zh-cn/web/css/transform-function/matrix3d()/index.html b/files/zh-cn/web/css/transform-function/matrix3d()/index.html deleted file mode 100644 index 2b25617047..0000000000 --- a/files/zh-cn/web/css/transform-function/matrix3d()/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: matrix3d() -slug: Web/CSS/transform-function/matrix3d() -translation_of: Web/CSS/transform-function/matrix3d() ---- -
    {{CSSRef}}
    - -

    CSS 函数 matrix3d() 以4x4齐次矩阵的形式定义一个3D转换。其结果是一个 {{cssxref("<transform-function>")}} 数据类型。

    - -

    语法

    - -

    matrix3d() 函数由16个参数指定. 这些参数以列为主的顺序进行描述。

    - -
    matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
    - -

    Values

    - -
    -
    a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3
    -
    Are {{cssxref("<number>")}}s describing the linear transformation.
    -
    a4 b4 c4 d4
    -
    Are {{cssxref("<number>")}}s describing the translation to apply.
    -
    - -
    Note: Until Firefox 16, Gecko accepted a {{cssxref("<length>")}} value for a4, b4 and c4.
    - - - - - - - - - - - - - - - - - -
    Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
    This transformation applies to the 3D space and can't be represented on the plane.A generic 3D affine transformation can't be represented using a Cartesian-coordinate matrix, as translations are not linear transformations.a1a2a3a4b1b2b3b4c1c2c3c4d1d2d3d4
    - -

    Matrix translation and scale example

    - -

    HTML

    - -
    <div class="foo">
-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?
-</div>
-
    - -

    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
-    )
-  }
-}
    - -

    Result

    - -
    {{EmbedLiveSample('Matrix_translation_and_scale_example', '100%', '400px')}}
    - -

    Specifications

    - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName("CSS Transforms 2", "#funcdef-matrix3d", "matrix3d()")}}{{Spec2("CSS Transforms 2")}}Initial definition
    - -

    Browser compatibility

    - -

    Please see the <transform-function> data type for compatibility info.

    - -

    See also

    - - diff --git a/files/zh-cn/web/css/transform-function/matrix3d/index.html b/files/zh-cn/web/css/transform-function/matrix3d/index.html new file mode 100644 index 0000000000..5308863ae8 --- /dev/null +++ b/files/zh-cn/web/css/transform-function/matrix3d/index.html @@ -0,0 +1,154 @@ +--- +title: matrix3d() +slug: Web/CSS/transform-function/matrix3d +translation_of: Web/CSS/transform-function/matrix3d() +original_slug: Web/CSS/transform-function/matrix3d() +--- +
    {{CSSRef}}
    + +

    CSS 函数 matrix3d() 以4x4齐次矩阵的形式定义一个3D转换。其结果是一个 {{cssxref("<transform-function>")}} 数据类型。

    + +

    语法

    + +

    matrix3d() 函数由16个参数指定. 这些参数以列为主的顺序进行描述。

    + +
    matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
    + +

    Values

    + +
    +
    a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3
    +
    Are {{cssxref("<number>")}}s describing the linear transformation.
    +
    a4 b4 c4 d4
    +
    Are {{cssxref("<number>")}}s describing the translation to apply.
    +
    + +
    Note: Until Firefox 16, Gecko accepted a {{cssxref("<length>")}} value for a4, b4 and c4.
    + + + + + + + + + + + + + + + + + +
    Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
    This transformation applies to the 3D space and can't be represented on the plane.A generic 3D affine transformation can't be represented using a Cartesian-coordinate matrix, as translations are not linear transformations.a1a2a3a4b1b2b3b4c1c2c3c4d1d2d3d4
    + +

    Matrix translation and scale example

    + +

    HTML

    + +
    <div class="foo">
+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?
+</div>
+
    + +

    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
+    )
+  }
+}
    + +

    Result

    + +
    {{EmbedLiveSample('Matrix_translation_and_scale_example', '100%', '400px')}}
    + +

    Specifications

    + + + + + + + + + + + + + + + + +
    SpecificationStatusComment
    {{SpecName("CSS Transforms 2", "#funcdef-matrix3d", "matrix3d()")}}{{Spec2("CSS Transforms 2")}}Initial definition
    + +

    Browser compatibility

    + +

    Please see the <transform-function> data type for compatibility info.

    + +

    See also

    + + diff --git a/files/zh-cn/web/css/transform-function/perspective()/index.html b/files/zh-cn/web/css/transform-function/perspective()/index.html deleted file mode 100644 index 833023d9c3..0000000000 --- a/files/zh-cn/web/css/transform-function/perspective()/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: perspective() -slug: Web/CSS/transform-function/perspective() -translation_of: Web/CSS/transform-function/perspective() ---- -
    {{CSSRef}}
    - -
    透视函数定义了到z=0的坐标轴，使用者能够得到3D定位元素的透视，每个3D元素在Z轴的位置大于零意味着离使用者更近，因此会变得更大，同理当元素Z周小于零时会变得ge
    - -

    T更小，变化的幅度决定于属性值的变化大小 

    - -

    语法

    - -
    perspective(l)
-
    - -

    参数

    - -
    -
    l
    -
    这个{{cssxref("<length>")}} 得到的是距离0坐标的距离. 被用作提供一个透视渐变属性给某个元素. 如果这个值是0或者不合法的值，将不会产生透视的变化.
    -
    - - - - - - - - - - - - - - - - - -
    Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
    -

    这个属性变化提供了一个3D空间，并且不会变成平面类型

    -     		A perspective is not a linear transform in ℝ3 and cannot be represented using a matrix in the Cartesian coordinates system. 10000100001000−1/d1
    - -

    Examples

    - -

    TBD

    diff --git a/files/zh-cn/web/css/transform-function/perspective/index.html b/files/zh-cn/web/css/transform-function/perspective/index.html new file mode 100644 index 0000000000..56d6762b9e --- /dev/null +++ b/files/zh-cn/web/css/transform-function/perspective/index.html @@ -0,0 +1,47 @@ +--- +title: perspective() +slug: Web/CSS/transform-function/perspective +translation_of: Web/CSS/transform-function/perspective() +original_slug: Web/CSS/transform-function/perspective() +--- +
    {{CSSRef}}
    + +
    透视函数定义了到z=0的坐标轴，使用者能够得到3D定位元素的透视，每个3D元素在Z轴的位置大于零意味着离使用者更近，因此会变得更大，同理当元素Z周小于零时会变得ge
    + +

    T更小，变化的幅度决定于属性值的变化大小 

    + +

    语法

    + +
    perspective(l)
+
    + +

    参数

    + +
    +
    l
    +
    这个{{cssxref("<length>")}} 得到的是距离0坐标的距离. 被用作提供一个透视渐变属性给某个元素. 如果这个值是0或者不合法的值，将不会产生透视的变化.
    +
    + + + + + + + + + + + + + + + + + +
    Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
    +

    这个属性变化提供了一个3D空间，并且不会变成平面类型

    +     		A perspective is not a linear transform in ℝ3 and cannot be represented using a matrix in the Cartesian coordinates system. 10000100001000−1/d1
    + +

    Examples

    + +

    TBD

    diff --git a/files/zh-cn/web/css/transform-function/rotate()/index.html b/files/zh-cn/web/css/transform-function/rotate()/index.html deleted file mode 100644 index e7e5807e55..0000000000 --- a/files/zh-cn/web/css/transform-function/rotate()/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: rotate() -slug: Web/CSS/transform-function/rotate() -tags: - - CSS - - CSS函数 - - CSS变换 -translation_of: Web/CSS/transform-function/rotate() ---- -
    {{CSSRef}}
    - -
    CSS的rotate()函数定义了一种将元素围绕一个定点（由{{ Cssxref("transform-origin") }}属性指定）旋转而不变形的转换。指定的角度定义了旋转的量度。若角度为正，则顺时针方向旋转，否则逆时针方向旋转。旋转180°也被称为点反射。
    - - - -

    元素旋转的固定点 - 如上所述 - 也称为变换原点。这默认为元素的中心，但你可以使用{{ cssxref("transform-origin") }}属性设置自己的自定义变换原点。

    - -

    语法

    - -

    {{cssxref("<angle>")}} 指定了 rotate() 的旋转程度。参数为正时，顺时针旋转；参数为负时，逆时针旋转。180° 旋转称为点反演。

    - -
    rotate(a)
-
    - -

    值

    - -
    -
    a
    -
    是一种{{ cssxref("<angle>") }}，表示旋转的角度。 正角度表示了顺时针的旋转，负角度表示逆时针的旋转。
    -
    - - - - - - - - - - - - - - - - - - - - - -
    -

    笛卡尔坐标系 on ℝ2

    -     		齐次坐标系　on ℝℙ2笛卡尔坐标系 on ℝ3齐次坐标系 on ℝℙ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]
    - -

    示例

    - -

    HTML

    - -
    <div>Normal</div>
-<div class="rotated">Rotated</div>
    - -

    CSS

    - -
    div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.rotated {
-  transform: rotate(45deg); /* Equal to rotateZ(45deg) */
-  background-color: pink;
-}
    - -

    结果

    - -

    {{EmbedLiveSample("示例","100%","200")}}

    - -

    浏览器兼容

    - -

    有关兼容性信息，请参阅<transform-function>数据类型。

    - -

    参见

    - -
      -
    • {{cssxref("transform")}}
      • -
    • {{cssxref("<transform-function>")}}
      • -
    • rotate3d()
      • -
    diff --git a/files/zh-cn/web/css/transform-function/rotate/index.html b/files/zh-cn/web/css/transform-function/rotate/index.html new file mode 100644 index 0000000000..c176ecc3f2 --- /dev/null +++ b/files/zh-cn/web/css/transform-function/rotate/index.html @@ -0,0 +1,91 @@ +--- +title: rotate() +slug: Web/CSS/transform-function/rotate +tags: + - CSS + - CSS函数 + - CSS变换 +translation_of: Web/CSS/transform-function/rotate() +original_slug: Web/CSS/transform-function/rotate() +--- +
    {{CSSRef}}
    + +
    CSS的rotate()函数定义了一种将元素围绕一个定点（由{{ Cssxref("transform-origin") }}属性指定）旋转而不变形的转换。指定的角度定义了旋转的量度。若角度为正，则顺时针方向旋转，否则逆时针方向旋转。旋转180°也被称为点反射。
    + + + +

    元素旋转的固定点 - 如上所述 - 也称为变换原点。这默认为元素的中心，但你可以使用{{ cssxref("transform-origin") }}属性设置自己的自定义变换原点。

    + +

    语法

    + +

    {{cssxref("<angle>")}} 指定了 rotate() 的旋转程度。参数为正时，顺时针旋转；参数为负时，逆时针旋转。180° 旋转称为点反演。

    + +
    rotate(a)
+
    + +

    值

    + +
    +
    a
    +
    是一种{{ cssxref("<angle>") }}，表示旋转的角度。 正角度表示了顺时针的旋转，负角度表示逆时针的旋转。
    +
    + + + + + + + + + + + + + + + + + + + + + +
    +

    笛卡尔坐标系 on ℝ2

    +     		齐次坐标系　on ℝℙ2笛卡尔坐标系 on ℝ3齐次坐标系 on ℝℙ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]
    + +

    示例

    + +

    HTML

    + +
    <div>Normal</div>
+<div class="rotated">Rotated</div>
    + +

    CSS

    + +
    div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate(45deg); /* Equal to rotateZ(45deg) */
+  background-color: pink;
+}
    + +

    结果

    + +

    {{EmbedLiveSample("示例","100%","200")}}

    + +

    浏览器兼容

    + +

    有关兼容性信息，请参阅<transform-function>数据类型。

    + +

    参见

    + +
      +
    • {{cssxref("transform")}}
      • +
    • {{cssxref("<transform-function>")}}
      • +
    • rotate3d()
      • +
    diff --git a/files/zh-cn/web/css/transform-function/rotate3d()/index.html b/files/zh-cn/web/css/transform-function/rotate3d()/index.html deleted file mode 100644 index f9e046f02b..0000000000 --- a/files/zh-cn/web/css/transform-function/rotate3d()/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: rotate3d() -slug: Web/CSS/transform-function/rotate3d() -tags: - - 3D - - CSS - - CSS Transforms -translation_of: Web/CSS/transform-function/rotate3d() ---- -
    {{CSSRef}}
    - -

    rotate3d() CSS函数定义一个变换，它将元素围绕固定轴移动而不使其变形。运动量由指定的角度定义; 如果为正，运动将为顺时针，如果为负，则为逆时针。

    - -
    {{EmbedInteractiveExample("pages/css/rotate3d.html")}}
    - - - -

    在3D空间之中，旋转有3个自由维度，描述了旋转轴。旋转轴由一组 [x, y, z] 矢量定义，并且通过变换源点传递（即通过 {{ cssxref("transform-origin") }} CSS 属性定义）。如果这些矢量被赋予非标准值，即3个坐标值的平方和不等于1时，它将会被内部隐式标准化。非标准矢量，例如空值和 [0, 0, 0]，将会使旋转不起作用，但是不影响整个CSS属性的其他效果（译者注：如transform中的多项变换）。

    - -
    与平面旋转相反的是，3D旋转的组合通常是不可交换的；这意味着定义旋转规则的值的顺序是严格控制的。
    - -

    语法

    - -
    rotate3d(x, y, z, a)
-
    - -

    值

    - -
    -
    x
    -
     {{cssxref("<number>")}} 类型，可以是0到1之间的数值，表示旋转轴X坐标方向的矢量。
    -
    y
    -
    {{cssxref("<number>")}} 类型， 可以是0到1之间的数值，表示旋转轴Y坐标方向的矢量。
    -
    z
    -
    {{cssxref("<number>")}} 类型， 可以是0到1之间的数值，表示旋转轴Z坐标方向的矢量。
    -
    a
    -
     {{ cssxref("<angle>") }} 类型，表示旋转角度。正的角度值表示顺时针旋转，负值表示逆时针旋转。
    -
    - - - - - - - - - - - - - - - - - - - -
    在ℝ2上的笛卡尔坐标这种变换应用于3D空间，不可用于平面空间
    在ℝℙ2上的齐次坐标
    在ℝ3上的笛卡尔坐标 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
    在ℝℙ3上的齐次坐标
    - -

    示例

    - -

    绕Y轴旋转

    - -

    HTML

    - -
    <div>Normal</div>
-<div class="rotated">Rotated</div>
    - -

    CSS

    - -
    body {
-  perspective: 800px;
-}
-
-div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.rotated {
-  transform: rotate3d(0, 1, 0, 60deg);
-  background-color: pink;
-}
    - -

    效果

    - -

    {{EmbedLiveSample("绕Y轴旋转","100%","200")}}

    - -

    围绕自定义轴旋转

    - -

    HTML

    - -
    <div>Normal</div>
-<div class="rotated">Rotated</div>
    - -

    CSS

    - -
    body {
-  perspective: 800px;
-}
-
-div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.rotated {
-  transform: rotate3d(1, 2, -1, 192deg);
-  background-color: pink;
-}
    - -

    效果

    - -

    {{EmbedLiveSample("围绕自定义轴旋转","100%","200")}}

    - -

    浏览器兼容

    - -

    有关兼容性信息，请参阅<transform-function> 数据类型。

    - -

    参见

    - -
      -
    • {{cssxref("transform")}}
      • -
    • {{cssxref("<transform-function>")}}
      • -
    diff --git a/files/zh-cn/web/css/transform-function/rotate3d/index.html b/files/zh-cn/web/css/transform-function/rotate3d/index.html new file mode 100644 index 0000000000..1dab01c6aa --- /dev/null +++ b/files/zh-cn/web/css/transform-function/rotate3d/index.html @@ -0,0 +1,128 @@ +--- +title: rotate3d() +slug: Web/CSS/transform-function/rotate3d +tags: + - 3D + - CSS + - CSS Transforms +translation_of: Web/CSS/transform-function/rotate3d() +original_slug: Web/CSS/transform-function/rotate3d() +--- +
    {{CSSRef}}
    + +

    rotate3d() CSS函数定义一个变换，它将元素围绕固定轴移动而不使其变形。运动量由指定的角度定义; 如果为正，运动将为顺时针，如果为负，则为逆时针。

    + +
    {{EmbedInteractiveExample("pages/css/rotate3d.html")}}
    + + + +

    在3D空间之中，旋转有3个自由维度，描述了旋转轴。旋转轴由一组 [x, y, z] 矢量定义，并且通过变换源点传递（即通过 {{ cssxref("transform-origin") }} CSS 属性定义）。如果这些矢量被赋予非标准值，即3个坐标值的平方和不等于1时，它将会被内部隐式标准化。非标准矢量，例如空值和 [0, 0, 0]，将会使旋转不起作用，但是不影响整个CSS属性的其他效果（译者注：如transform中的多项变换）。

    + +
    与平面旋转相反的是，3D旋转的组合通常是不可交换的；这意味着定义旋转规则的值的顺序是严格控制的。
    + +

    语法

    + +
    rotate3d(x, y, z, a)
+
    + +

    值

    + +
    +
    x
    +
     {{cssxref("<number>")}} 类型，可以是0到1之间的数值，表示旋转轴X坐标方向的矢量。
    +
    y
    +
    {{cssxref("<number>")}} 类型， 可以是0到1之间的数值，表示旋转轴Y坐标方向的矢量。
    +
    z
    +
    {{cssxref("<number>")}} 类型， 可以是0到1之间的数值，表示旋转轴Z坐标方向的矢量。
    +
    a
    +
     {{ cssxref("<angle>") }} 类型，表示旋转角度。正的角度值表示顺时针旋转，负值表示逆时针旋转。
    +
    + + + + + + + + + + + + + + + + + + + +
    在ℝ2上的笛卡尔坐标这种变换应用于3D空间，不可用于平面空间
    在ℝℙ2上的齐次坐标
    在ℝ3上的笛卡尔坐标 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
    在ℝℙ3上的齐次坐标
    + +

    示例

    + +

    绕Y轴旋转

    + +

    HTML

    + +
    <div>Normal</div>
+<div class="rotated">Rotated</div>
    + +

    CSS

    + +
    body {
+  perspective: 800px;
+}
+
+div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate3d(0, 1, 0, 60deg);
+  background-color: pink;
+}
    + +

    效果

    + +

    {{EmbedLiveSample("绕Y轴旋转","100%","200")}}

    + +

    围绕自定义轴旋转

    + +

    HTML

    + +
    <div>Normal</div>
+<div class="rotated">Rotated</div>
    + +

    CSS

    + +
    body {
+  perspective: 800px;
+}
+
+div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate3d(1, 2, -1, 192deg);
+  background-color: pink;
+}
    + +

    效果

    + +

    {{EmbedLiveSample("围绕自定义轴旋转","100%","200")}}

    + +

    浏览器兼容

    + +

    有关兼容性信息，请参阅<transform-function> 数据类型。

    + +

    参见

    + +
      +
    • {{cssxref("transform")}}
      • +
    • {{cssxref("<transform-function>")}}
      • +
    diff --git a/files/zh-cn/web/css/transform-function/rotatex()/index.html b/files/zh-cn/web/css/transform-function/rotatex()/index.html deleted file mode 100644 index eda2306e00..0000000000 --- a/files/zh-cn/web/css/transform-function/rotatex()/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: rotateX() -slug: Web/CSS/transform-function/rotateX() -translation_of: Web/CSS/transform-function/rotateX() ---- -
    {{CSSRef}}
    - -

    rotateX() 函数定义了一个转换，它可以让一个元素围绕横坐标(水平轴)旋转，而不会对其进行变形。它的结果是一个{{cssxref("<transform-function>")}}数据类型。

    - -
    {{EmbedInteractiveExample("pages/css/function-rotateX.html")}}
    - - - -

    旋转轴围绕原点旋转，而这个原点通过{{cssxref("transform-origin")}} 属性来定义。

    - -
    -

    注意: rotateX(a) 相当于 rotate3d(1, 0, 0, a).

    -
    - -
    注意: 与二维平面上的旋转不同，三维旋转的组合通常是不可交换的。换句话说，三维旋转的应用顺序，将会影响最终结果。
    - -

    语法

    - -

    rotateX() 引起的旋转量由{{cssxref("<angle>")}}指定。如果为正，则顺时针方向移动；如果为负，则逆时针方向移动。

    - -
    rotateX(a)
-
    - -

    参数值

    - -
    -
    a
    -
    a 是一个{{cssxref("<angle>")}} ，表示旋转的角度。正数角度表示顺时针旋转，负数则表示逆时针旋转。
    -
    - - - - - - - - - - - - - - - - - -
    笛卡儿坐标 ℝ2齐次坐标 ℝℙ2笛卡儿坐标 ℝ3齐次坐标 ℝℙ3
    This transformation applies to the 3D space and can't be represented on the plane. 1000cos(a)-sin(a)0sin(a)cos(a) 10000cos(a)-sin(a)00sin(a)cos(a)00001
    - -

    示例

    - -

    HTML

    - -
    <div>Normal</div>
-<div class="rotated">Rotated</div>
    - -

    CSS

    - -
    div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.rotated {
-  transform: rotateX(45deg);
-  background-color: pink;
-}
-
    - -

    结果

    - -

    {{EmbedLiveSample("示例", "auto", 180)}}

    - -

    规范

    - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName("CSS Transforms 2", "#funcdef-rotatex", "rotateX()")}}{{Spec2("CSS Transforms 2")}}Initial definition
    - -

    浏览器兼容

    - -

    有关兼容性信息，请参阅 <transform-function> 的数据类型。

    - -

    另请参阅

    - -
      -
    • {{cssxref("transform")}}
      • -
    • {{cssxref("<transform-function>")}}
      • -
    diff --git a/files/zh-cn/web/css/transform-function/rotatex/index.html b/files/zh-cn/web/css/transform-function/rotatex/index.html new file mode 100644 index 0000000000..f534ced0bf --- /dev/null +++ b/files/zh-cn/web/css/transform-function/rotatex/index.html @@ -0,0 +1,108 @@ +--- +title: rotateX() +slug: Web/CSS/transform-function/rotateX +translation_of: Web/CSS/transform-function/rotateX() +original_slug: Web/CSS/transform-function/rotateX() +--- +
    {{CSSRef}}
    + +

    rotateX() 函数定义了一个转换，它可以让一个元素围绕横坐标(水平轴)旋转，而不会对其进行变形。它的结果是一个{{cssxref("<transform-function>")}}数据类型。

    + +
    {{EmbedInteractiveExample("pages/css/function-rotateX.html")}}
    + + + +

    旋转轴围绕原点旋转，而这个原点通过{{cssxref("transform-origin")}} 属性来定义。

    + +
    +

    注意: rotateX(a) 相当于 rotate3d(1, 0, 0, a).

    +
    + +
    注意: 与二维平面上的旋转不同，三维旋转的组合通常是不可交换的。换句话说，三维旋转的应用顺序，将会影响最终结果。
    + +

    语法

    + +

    rotateX() 引起的旋转量由{{cssxref("<angle>")}}指定。如果为正，则顺时针方向移动；如果为负，则逆时针方向移动。

    + +
    rotateX(a)
+
    + +

    参数值

    + +
    +
    a
    +
    a 是一个{{cssxref("<angle>")}} ，表示旋转的角度。正数角度表示顺时针旋转，负数则表示逆时针旋转。
    +
    + + + + + + + + + + + + + + + + + +
    笛卡儿坐标 ℝ2齐次坐标 ℝℙ2笛卡儿坐标 ℝ3齐次坐标 ℝℙ3
    This transformation applies to the 3D space and can't be represented on the plane. 1000cos(a)-sin(a)0sin(a)cos(a) 10000cos(a)-sin(a)00sin(a)cos(a)00001
    + +

    示例

    + +

    HTML

    + +
    <div>Normal</div>
+<div class="rotated">Rotated</div>
    + +

    CSS

    + +
    div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotateX(45deg);
+  background-color: pink;
+}
+
    + +

    结果

    + +

    {{EmbedLiveSample("示例", "auto", 180)}}

    + +

    规范

    + + + + + + + + + + + + + + + + +
    SpecificationStatusComment
    {{SpecName("CSS Transforms 2", "#funcdef-rotatex", "rotateX()")}}{{Spec2("CSS Transforms 2")}}Initial definition
    + +

    浏览器兼容

    + +

    有关兼容性信息，请参阅 <transform-function> 的数据类型。

    + +

    另请参阅

    + +
      +
    • {{cssxref("transform")}}
      • +
    • {{cssxref("<transform-function>")}}
      • +
    diff --git a/files/zh-cn/web/css/transform-function/rotatey()/index.html b/files/zh-cn/web/css/transform-function/rotatey()/index.html deleted file mode 100644 index b051527444..0000000000 --- a/files/zh-cn/web/css/transform-function/rotatey()/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: rotateY() -slug: Web/CSS/transform-function/rotateY() -translation_of: Web/CSS/transform-function/rotateY() ---- -
    {{CSSRef}}
    - -

    rotateY()  函数定义了一个转换，它可以让一个元素围绕纵坐标(垂直轴)旋转，而不会对其进行变形。它的结果是一个{{cssxref("<transform-function>")}} 数据类型。

    - -
    {{EmbedInteractiveExample("pages/css/function-rotateY.html")}}
    - - - -

    旋转轴围绕原点旋转，而这个原点通过{{cssxref("transform-origin")}} 属性来定义。

    - -
    -

    注意: rotateY(a) 相当于 rotate3d(0, 1, 0, a).

    -
    - -
    注意: 与二维平面上的旋转不同，三维旋转的组合顺序通常是不可交换的。换句话说，三维旋转的应用顺序，将会影响最终结果。
    - -

    语法

    - -

    rotateY() 引起的旋转量由{{cssxref("<angle>")}}指定。如果为正，则顺时针方向移动；如果为负，则逆时针方向移动。

    - -
    rotateY(a)
-
    - -

    参数值

    - -
    -
    a
    -
    a 是一个{{cssxref("<angle>")}} ，表示旋转的角度。正数角度表示顺时针旋转，负数则表示逆时针旋转。
    -
    - - - - - - - - - - - - - - - - - -
    笛卡儿坐标 ℝ2齐次坐标 ℝℙ2笛卡儿坐标 ℝ3齐次坐标 ℝℙ3
    This transformation applies to the 3D space and can't be represented on the plane. cos(a)0sin(a)010-sin(a)0cos(a) cos(a)0sin(a)00100-sin(a)0cos(a)00001
    - -

    示例

    - -

    HTML

    - -
    <div>Normal</div>
-<div class="rotated">Rotated</div>
    - -

    CSS

    - -
    div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.rotated {
-  transform: rotateY(60deg);
-  background-color: pink;
-}
-
    - -

    结果

    - -

    {{EmbedLiveSample("示例", "auto", 180)}}

    - -

    规范

    - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName("CSS Transforms 2", "#funcdef-rotatey", "rotateY()")}}{{Spec2("CSS Transforms 2")}}Initial definition
    - -

    浏览器兼容

    - -

    有关兼容性信息，请参阅 <transform-function> 的数据类型。

    - -

    另请参阅

    - -
      -
    • {{cssxref("transform")}}
      • -
    • {{cssxref("<transform-function>")}}
      • -
    diff --git a/files/zh-cn/web/css/transform-function/rotatey/index.html b/files/zh-cn/web/css/transform-function/rotatey/index.html new file mode 100644 index 0000000000..8381afc1ca --- /dev/null +++ b/files/zh-cn/web/css/transform-function/rotatey/index.html @@ -0,0 +1,108 @@ +--- +title: rotateY() +slug: Web/CSS/transform-function/rotateY +translation_of: Web/CSS/transform-function/rotateY() +original_slug: Web/CSS/transform-function/rotateY() +--- +
    {{CSSRef}}
    + +

    rotateY()  函数定义了一个转换，它可以让一个元素围绕纵坐标(垂直轴)旋转，而不会对其进行变形。它的结果是一个{{cssxref("<transform-function>")}} 数据类型。

    + +
    {{EmbedInteractiveExample("pages/css/function-rotateY.html")}}
    + + + +

    旋转轴围绕原点旋转，而这个原点通过{{cssxref("transform-origin")}} 属性来定义。

    + +
    +

    注意: rotateY(a) 相当于 rotate3d(0, 1, 0, a).

    +
    + +
    注意: 与二维平面上的旋转不同，三维旋转的组合顺序通常是不可交换的。换句话说，三维旋转的应用顺序，将会影响最终结果。
    + +

    语法

    + +

    rotateY() 引起的旋转量由{{cssxref("<angle>")}}指定。如果为正，则顺时针方向移动；如果为负，则逆时针方向移动。

    + +
    rotateY(a)
+
    + +

    参数值

    + +
    +
    a
    +
    a 是一个{{cssxref("<angle>")}} ，表示旋转的角度。正数角度表示顺时针旋转，负数则表示逆时针旋转。
    +
    + + + + + + + + + + + + + + + + + +
    笛卡儿坐标 ℝ2齐次坐标 ℝℙ2笛卡儿坐标 ℝ3齐次坐标 ℝℙ3
    This transformation applies to the 3D space and can't be represented on the plane. cos(a)0sin(a)010-sin(a)0cos(a) cos(a)0sin(a)00100-sin(a)0cos(a)00001
    + +

    示例

    + +

    HTML

    + +
    <div>Normal</div>
+<div class="rotated">Rotated</div>
    + +

    CSS

    + +
    div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotateY(60deg);
+  background-color: pink;
+}
+
    + +

    结果

    + +

    {{EmbedLiveSample("示例", "auto", 180)}}

    + +

    规范

    + + + + + + + + + + + + + + + + +
    SpecificationStatusComment
    {{SpecName("CSS Transforms 2", "#funcdef-rotatey", "rotateY()")}}{{Spec2("CSS Transforms 2")}}Initial definition
    + +

    浏览器兼容

    + +

    有关兼容性信息，请参阅 <transform-function> 的数据类型。

    + +

    另请参阅

    + +
      +
    • {{cssxref("transform")}}
      • +
    • {{cssxref("<transform-function>")}}
      • +
    diff --git a/files/zh-cn/web/css/transform-function/rotatez()/index.html b/files/zh-cn/web/css/transform-function/rotatez()/index.html deleted file mode 100644 index b7fc6b5da2..0000000000 --- a/files/zh-cn/web/css/transform-function/rotatez()/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: rotateZ() -slug: Web/CSS/transform-function/rotateZ() -translation_of: Web/CSS/transform-function/rotateZ() ---- -
    {{CSSRef}}
    - -

    rotateZ() 函数定义了一个转换，它可以让一个元素围绕横Z轴旋转，而不会对其进行变形。它的结果是一个{{cssxref("<transform-function>")}}数据类型。

    - -
    {{EmbedInteractiveExample("pages/css/function-rotateZ.html")}}
    - - - -

    旋转轴围绕原点旋转，而这个原点通过{{cssxref("transform-origin")}} 属性来定义。

    - -
    -

    注意: rotateZ(a) 相当于 rotate(a) or rotate3d(0, 0, 1, a)。

    -
    - -
    注意: 与二维平面上的旋转不同，三维旋转的组合通常是不可交换的。换句话说，三维旋转的应用顺序，将会影响最终结果。
    - -

    语法

    - -

    rotateZ() 引起的旋转量由{{cssxref("<angle>")}}指定。如果为正，则顺时针方向移动；如果为负，则逆时针方向移动。

    - -
    rotateZ(a)
-
    - -

    参数值

    - -
    -
    a
    -
    a 是一个{{cssxref("<angle>")}} ，表示旋转的角度。正数角度表示顺时针旋转，负数则表示逆时针旋转。
    -
    - - - - - - - - - - - - - - - - - -
    笛卡儿坐标 ℝ2齐次坐标 ℝℙ2笛卡儿坐标 ℝ3齐次坐标 ℝℙ3
    This transformation applies to the 3D space and can't be represented on the plane. cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00 sin(a)cos(a)00 0010 0001
    - -

    示例

    - -

    HTML

    - -
    <div>Normal</div>
-<div class="rotated">Rotated</div>
    - -

    CSS

    - -
    div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.rotated {
-  transform: rotateZ(45deg);
-  background-color: pink;
-}
-
    - -

    结果

    - -

    {{EmbedLiveSample("示例", "auto", 180)}}

    - -

    规范

    - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName("CSS Transforms 2", "#funcdef-rotatez", "rotateZ()")}}{{Spec2("CSS Transforms 2")}}Initial definition
    - -

    浏览器兼容

    - -

    有关兼容性信息，请参阅 <transform-function> 的数据类型。

    - -

    另请参阅

    - -
      -
    • {{cssxref("transform")}}
      • -
    • {{cssxref("<transform-function>")}}
      • -
    diff --git a/files/zh-cn/web/css/transform-function/rotatez/index.html b/files/zh-cn/web/css/transform-function/rotatez/index.html new file mode 100644 index 0000000000..877ecada5b --- /dev/null +++ b/files/zh-cn/web/css/transform-function/rotatez/index.html @@ -0,0 +1,108 @@ +--- +title: rotateZ() +slug: Web/CSS/transform-function/rotateZ +translation_of: Web/CSS/transform-function/rotateZ() +original_slug: Web/CSS/transform-function/rotateZ() +--- +
    {{CSSRef}}
    + +

    rotateZ() 函数定义了一个转换，它可以让一个元素围绕横Z轴旋转，而不会对其进行变形。它的结果是一个{{cssxref("<transform-function>")}}数据类型。

    + +
    {{EmbedInteractiveExample("pages/css/function-rotateZ.html")}}
    + + + +

    旋转轴围绕原点旋转，而这个原点通过{{cssxref("transform-origin")}} 属性来定义。

    + +
    +

    注意: rotateZ(a) 相当于 rotate(a) or rotate3d(0, 0, 1, a)。

    +
    + +
    注意: 与二维平面上的旋转不同，三维旋转的组合通常是不可交换的。换句话说，三维旋转的应用顺序，将会影响最终结果。
    + +

    语法

    + +

    rotateZ() 引起的旋转量由{{cssxref("<angle>")}}指定。如果为正，则顺时针方向移动；如果为负，则逆时针方向移动。

    + +
    rotateZ(a)
+
    + +

    参数值

    + +
    +
    a
    +
    a 是一个{{cssxref("<angle>")}} ，表示旋转的角度。正数角度表示顺时针旋转，负数则表示逆时针旋转。
    +
    + + + + + + + + + + + + + + + + + +
    笛卡儿坐标 ℝ2齐次坐标 ℝℙ2笛卡儿坐标 ℝ3齐次坐标 ℝℙ3
    This transformation applies to the 3D space and can't be represented on the plane. cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00 sin(a)cos(a)00 0010 0001
    + +

    示例

    + +

    HTML

    + +
    <div>Normal</div>
+<div class="rotated">Rotated</div>
    + +

    CSS

    + +
    div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotateZ(45deg);
+  background-color: pink;
+}
+
    + +

    结果

    + +

    {{EmbedLiveSample("示例", "auto", 180)}}

    + +

    规范

    + + + + + + + + + + + + + + + + +
    SpecificationStatusComment
    {{SpecName("CSS Transforms 2", "#funcdef-rotatez", "rotateZ()")}}{{Spec2("CSS Transforms 2")}}Initial definition
    + +

    浏览器兼容

    + +

    有关兼容性信息，请参阅 <transform-function> 的数据类型。

    + +

    另请参阅

    + +
      +
    • {{cssxref("transform")}}
      • +
    • {{cssxref("<transform-function>")}}
      • +
    diff --git a/files/zh-cn/web/css/transform-function/scale()/index.html b/files/zh-cn/web/css/transform-function/scale()/index.html deleted file mode 100644 index b025b5c5a0..0000000000 --- a/files/zh-cn/web/css/transform-function/scale()/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: scale() -slug: Web/CSS/transform-function/scale() -translation_of: Web/CSS/transform-function/scale() ---- -
    {{CSSRef}}
    - -

    CSS 函数 scale() 用于修改元素的大小。可以通过向量形式定义的缩放值来放大或缩小元素，同时可以在不同的方向设置不同的缩放值。

    - -

    - -

    该变换通过一个二维向量确定在一个方向缩放的多少。如果缩放向量的两个坐标是相等的，那么所讲是均等的，或者说是各向同的，同时元素的形状是被保持的。这种情况下进行的是位似变换。

    - -

    当坐标值处于区间 [-1, 1] 之外时，该变换将在相应的坐标方向上放大该元素，当处在区间之中时，该变换将在相应的坐标方向上缩小该元素。当值为1时将不进行任何处理，当为负数时，将进行像素点反射之后再进行大小的修改。

    - -
    scale() 仅适用于在欧几里德平面（二维平面）上的变换。如果需要进行空间中的缩放，必须使用 scale3D() 。
    - -

    语法

    - -
    scale(sx)
    - -

    或

    - -
    scale(sx, sy)
    - -

    值

    - -
    -
    sx
    -
    {{cssxref("<number>")}}，表示缩放向量的横坐标。
    -
    sy
    -
    {{cssxref("<number>")}} ，表示缩放向量的纵坐标。如果未设置，则他的默认值被设置为 sx。 从而使得元素在保持原有形状下均等缩放
    -
    - - - - - - - - - - - - - - - - - - - - - -
    ℝ2上的笛卡尔坐标变换ℝℙ2上的齐次坐标变换ℝ3上的笛卡尔坐标变换ℝℙ3上的齐次坐标变换
    sx0 0sy sx000sy0001 sx000sy0001 sx0000sy0000100001
    [sx 0 0 sy 0 0]
    - -

    示例

    - -

    单一维度缩放

    - -

    HTML

    - -
    <p>foo</p>
-<p class="transformed">bar</p>
    - -

    CSS

    - -
    p {
-  width: 50px;
-  height: 50px;
-  background-color: teal;
-}
-
-.transformed {
-  /* 等同于变换: scaleX(2) scaleY(2);*/
-  transform: scale(2);
-  background-color: blue;
-}
-
    - -

    结果

    - -

    {{EmbedLiveSample("单一维度缩放","100%","200")}}

    - -

    在X和Y两个维度缩放并移动缩放中心

    - -

    HTML

    - -
    <p>foo</p>
-<p class="transformed">bar</p>
-
    - -

    CSS

    - -
    p {
-  width: 50px;
-  height: 50px;
-  background-color: teal;
-}
-
-.transformed {
-  /* 等同于 scaleX(2) scaleY(0.5) */
-  transform: scale(2, 0.5);
-  transform-origin: left;
-  background-color: blue;
-}
-
    - -

    结果

    - -

    {{EmbedLiveSample("在X和Y两个维度缩放并移动缩放中心","100%","200")}}

    diff --git a/files/zh-cn/web/css/transform-function/scale/index.html b/files/zh-cn/web/css/transform-function/scale/index.html new file mode 100644 index 0000000000..7f43221751 --- /dev/null +++ b/files/zh-cn/web/css/transform-function/scale/index.html @@ -0,0 +1,112 @@ +--- +title: scale() +slug: Web/CSS/transform-function/scale +translation_of: Web/CSS/transform-function/scale() +original_slug: Web/CSS/transform-function/scale() +--- +
    {{CSSRef}}
    + +

    CSS 函数 scale() 用于修改元素的大小。可以通过向量形式定义的缩放值来放大或缩小元素，同时可以在不同的方向设置不同的缩放值。

    + +

    + +

    该变换通过一个二维向量确定在一个方向缩放的多少。如果缩放向量的两个坐标是相等的，那么所讲是均等的，或者说是各向同的，同时元素的形状是被保持的。这种情况下进行的是位似变换。

    + +

    当坐标值处于区间 [-1, 1] 之外时，该变换将在相应的坐标方向上放大该元素，当处在区间之中时，该变换将在相应的坐标方向上缩小该元素。当值为1时将不进行任何处理，当为负数时，将进行像素点反射之后再进行大小的修改。

    + +
    scale() 仅适用于在欧几里德平面（二维平面）上的变换。如果需要进行空间中的缩放，必须使用 scale3D() 。
    + +

    语法

    + +
    scale(sx)
    + +

    或

    + +
    scale(sx, sy)
    + +

    值

    + +
    +
    sx
    +
    {{cssxref("<number>")}}，表示缩放向量的横坐标。
    +
    sy
    +
    {{cssxref("<number>")}} ，表示缩放向量的纵坐标。如果未设置，则他的默认值被设置为 sx。 从而使得元素在保持原有形状下均等缩放
    +
    + + + + + + + + + + + + + + + + + + + + + +
    ℝ2上的笛卡尔坐标变换ℝℙ2上的齐次坐标变换ℝ3上的笛卡尔坐标变换ℝℙ3上的齐次坐标变换
    sx0 0sy sx000sy0001 sx000sy0001 sx0000sy0000100001
    [sx 0 0 sy 0 0]
    + +

    示例

    + +

    单一维度缩放

    + +

    HTML

    + +
    <p>foo</p>
+<p class="transformed">bar</p>
    + +

    CSS

    + +
    p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformed {
+  /* 等同于变换: scaleX(2) scaleY(2);*/
+  transform: scale(2);
+  background-color: blue;
+}
+
    + +

    结果

    + +

    {{EmbedLiveSample("单一维度缩放","100%","200")}}

    + +

    在X和Y两个维度缩放并移动缩放中心

    + +

    HTML

    + +
    <p>foo</p>
+<p class="transformed">bar</p>
+
    + +

    CSS

    + +
    p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformed {
+  /* 等同于 scaleX(2) scaleY(0.5) */
+  transform: scale(2, 0.5);
+  transform-origin: left;
+  background-color: blue;
+}
+
    + +

    结果

    + +

    {{EmbedLiveSample("在X和Y两个维度缩放并移动缩放中心","100%","200")}}

    diff --git a/files/zh-cn/web/css/transform-function/scalex()/index.html b/files/zh-cn/web/css/transform-function/scalex()/index.html deleted file mode 100644 index c5a34d3e40..0000000000 --- a/files/zh-cn/web/css/transform-function/scalex()/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: scaleX() -slug: Web/CSS/transform-function/scaleX() -tags: - - axial symmetry - - scaleX() - - scaleX(-1) -translation_of: Web/CSS/transform-function/scaleX() ---- -
    {{CSSRef}}
    - -

    scaleX() CSS 函数将每个元素点的横坐标修改为一个常数因子，除了该比例因子为1，在这种情况下，函数是身份变换。 缩放不是各向同性的，并且元素的角度不保守。

    - -

    - -

    scaleX(sx) 是 scale(sx, 1) 或 scale3d(sx, 1, 1) 的一个速记/缩写。

    - -
    -

    Note:

    - -

    scaleX(-1) 定义一个 轴向对称性(axial symmetry) ，它具有一个垂直轴通过原点 (由 {{cssxref("transform-origin")}} 属性规定)。

    -
    - -

    Syntax

    - -
    scaleX(s)
-
    - -

    Values

    - -
    -
    s
    -
    Is a {{cssxref("<number>")}} representing the scaling factor to apply on the abscissa of each point of the element.
    -
    - - - - - - - - - - - - - - - - - - - - - -
    Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
    s0 01 s00010001 s00010001 s000010000100001
    [s 0 0 1 0 0]
    - -

    Examples

    - -

    Without changing the origin

    - -

    HTML

    - -
    <p>foo</p>
-<p class="transformed">bar</p>
    - -

    CSS

    - -
    p {
-  width: 50px;
-  height: 50px;
-  background-color: teal;
-}
-
-.transformed {
-  transform: scaleX(2);
-  background-color: blue;
-}
-
    - -

    Result

    - -

    {{EmbedLiveSample("Without_changing_the_origin","100%","200")}}

    - -

    Translating the origin of the transformation

    - -

    HTML

    - -
    <p>foo</p>
-<p class="transformed">bar</p>
    - -

    CSS

    - -
    p {
-  width: 50px;
-  height: 50px;
-  background-color: teal;
-}
-
-.transformed {
-  transform: scaleX(2);
-  transform-origin: left;
-  background-color: blue;
-}
-
    - -

    Result

    - -

    {{EmbedLiveSample("Translating_the_origin_of_the_transformation","100%","200")}}

    diff --git a/files/zh-cn/web/css/transform-function/scalex/index.html b/files/zh-cn/web/css/transform-function/scalex/index.html new file mode 100644 index 0000000000..094baba99a --- /dev/null +++ b/files/zh-cn/web/css/transform-function/scalex/index.html @@ -0,0 +1,110 @@ +--- +title: scaleX() +slug: Web/CSS/transform-function/scaleX +tags: + - axial symmetry + - scaleX() + - scaleX(-1) +translation_of: Web/CSS/transform-function/scaleX() +original_slug: Web/CSS/transform-function/scaleX() +--- +
    {{CSSRef}}
    + +

    scaleX() CSS 函数将每个元素点的横坐标修改为一个常数因子，除了该比例因子为1，在这种情况下，函数是身份变换。 缩放不是各向同性的，并且元素的角度不保守。

    + +

    + +

    scaleX(sx) 是 scale(sx, 1) 或 scale3d(sx, 1, 1) 的一个速记/缩写。

    + +
    +

    Note:

    + +

    scaleX(-1) 定义一个 轴向对称性(axial symmetry) ，它具有一个垂直轴通过原点 (由 {{cssxref("transform-origin")}} 属性规定)。

    +
    + +

    Syntax

    + +
    scaleX(s)
+
    + +

    Values

    + +
    +
    s
    +
    Is a {{cssxref("<number>")}} representing the scaling factor to apply on the abscissa of each point of the element.
    +
    + + + + + + + + + + + + + + + + + + + + + +
    Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
    s0 01 s00010001 s00010001 s000010000100001
    [s 0 0 1 0 0]
    + +

    Examples

    + +

    Without changing the origin

    + +

    HTML

    + +
    <p>foo</p>
+<p class="transformed">bar</p>
    + +

    CSS

    + +
    p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformed {
+  transform: scaleX(2);
+  background-color: blue;
+}
+
    + +

    Result

    + +

    {{EmbedLiveSample("Without_changing_the_origin","100%","200")}}

    + +

    Translating the origin of the transformation

    + +

    HTML

    + +
    <p>foo</p>
+<p class="transformed">bar</p>
    + +

    CSS

    + +
    p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformed {
+  transform: scaleX(2);
+  transform-origin: left;
+  background-color: blue;
+}
+
    + +

    Result

    + +

    {{EmbedLiveSample("Translating_the_origin_of_the_transformation","100%","200")}}

    diff --git a/files/zh-cn/web/css/transform-function/scaley()/index.html b/files/zh-cn/web/css/transform-function/scaley()/index.html deleted file mode 100644 index 4c690dcbbe..0000000000 --- a/files/zh-cn/web/css/transform-function/scaley()/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: scaleY() -slug: Web/CSS/transform-function/scaleY() -tags: - - 'transform: rotateX(180deg);' - - 'transform: scaleY(-1);' -translation_of: Web/CSS/transform-function/scaleY() ---- -
    {{CSSRef}}
    - -

    The scaleY() CSS function defines a transformation that resizes an element along the y-axis (vertically). Its result is a {{cssxref("<transform-function>")}} data type.

    - -

    - -

    It modifies the ordinate of each element point by a constant factor, except when the scale factor is 1, in which case the function is the identity transform. The scaling is not isotropic, and the angles of the element are not conserved. scaleY(-1) defines an axial symmetry, with a horizontal axis passing through the origin (as specified by the {{cssxref("transform-origin")}} property).

    - -
    -

    Note: scaleY(sy) is equivalent to scale(1, sy) or scale3d(1, sy, 1).

    - -

    transform: rotateX(180deg);  === transform: scaleY(-1);

    -
    - -

    Syntax

    - -
    scaleY(s)
-
    - -

    Values

    - -
    -
    s
    -
    Is a {{cssxref("<number>")}} representing the scaling factor to apply on the ordinate of each point of the element.
    -
    - - - - - - - - - - - - - - - - - - - - - -
    Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
    10 0s 1000s0001 1000s0001 10000s0000100001
    [1 0 0 s 0 0]
    - -

    Examples

    - -

    HTML

    - -
    <div>Normal</div>
-<div class="scaled">Scaled</div>
    - -

    CSS

    - -
    div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.scaled {
-  transform: scaleY(0.6);
-  background-color: pink;
-}
-
    - -

    Result

    - -

    {{EmbedLiveSample("Examples", 200, 200)}}

    - -

    Browser compatibility

    - -

    Please see the <transform-function> data type for compatibility info.

    - -

    See also

    - -
      -
    • {{cssxref("transform")}}
      • -
    • {{cssxref("<transform-function>")}}
      • -
    diff --git a/files/zh-cn/web/css/transform-function/scaley/index.html b/files/zh-cn/web/css/transform-function/scaley/index.html new file mode 100644 index 0000000000..42298ee377 --- /dev/null +++ b/files/zh-cn/web/css/transform-function/scaley/index.html @@ -0,0 +1,92 @@ +--- +title: scaleY() +slug: Web/CSS/transform-function/scaleY +tags: + - 'transform: rotateX(180deg);' + - 'transform: scaleY(-1);' +translation_of: Web/CSS/transform-function/scaleY() +original_slug: Web/CSS/transform-function/scaleY() +--- +
    {{CSSRef}}
    + +

    The scaleY() CSS function defines a transformation that resizes an element along the y-axis (vertically). Its result is a {{cssxref("<transform-function>")}} data type.

    + +

    + +

    It modifies the ordinate of each element point by a constant factor, except when the scale factor is 1, in which case the function is the identity transform. The scaling is not isotropic, and the angles of the element are not conserved. scaleY(-1) defines an axial symmetry, with a horizontal axis passing through the origin (as specified by the {{cssxref("transform-origin")}} property).

    + +
    +

    Note: scaleY(sy) is equivalent to scale(1, sy) or scale3d(1, sy, 1).

    + +

    transform: rotateX(180deg);  === transform: scaleY(-1);

    +
    + +

    Syntax

    + +
    scaleY(s)
+
    + +

    Values

    + +
    +
    s
    +
    Is a {{cssxref("<number>")}} representing the scaling factor to apply on the ordinate of each point of the element.
    +
    + + + + + + + + + + + + + + + + + + + + + +
    Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
    10 0s 1000s0001 1000s0001 10000s0000100001
    [1 0 0 s 0 0]
    + +

    Examples

    + +

    HTML

    + +
    <div>Normal</div>
+<div class="scaled">Scaled</div>
    + +

    CSS

    + +
    div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.scaled {
+  transform: scaleY(0.6);
+  background-color: pink;
+}
+
    + +

    Result

    + +

    {{EmbedLiveSample("Examples", 200, 200)}}

    + +

    Browser compatibility

    + +

    Please see the <transform-function> data type for compatibility info.

    + +

    See also

    + +
      +
    • {{cssxref("transform")}}
      • +
    • {{cssxref("<transform-function>")}}
      • +
    diff --git a/files/zh-cn/web/css/transform-function/skew()/index.html b/files/zh-cn/web/css/transform-function/skew()/index.html deleted file mode 100644 index 6d5f1f4bf5..0000000000 --- a/files/zh-cn/web/css/transform-function/skew()/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: skew() -slug: Web/CSS/transform-function/skew() -tags: - - CSS - - CSS变形 - - CSS方法 - - 引用 -translation_of: Web/CSS/transform-function/skew() ---- -
    {{CSSRef}}
    - -
    skew() 函数定义了一个元素在二维平面上的倾斜转换。它的结果是一个{{cssxref("<transform-function>")}} 数据类型
    - -
    {{EmbedInteractiveExample("pages/css/function-skew.html")}}
    - - - -

    这种转换是一种剪切映射(横切)，它在水平和垂直方向上将单元内的每个点扭曲一定的角度。每个点的坐标根据指定的角度以及到原点的距离，进行成比例的值调整；因此，一个点离原点越远，其增加的值就越大。

    - -

    语法

    - -

     skew() 函数指定一个或两个参数，它们表示在每个方向上应用的倾斜量。

    - -
    skew(ax)
-
-skew(ax, ay)
-
    - -

    参数值

    - -
    -
    ax
    -
    ax 是一个 {{cssxref("<angle>")}}，表示用于沿横坐标扭曲元素的角度。
    -
    ay
    -
    ay 是一个 {{cssxref("<angle>")}} ，表示用于沿纵坐标扭曲元素的角度。如果未定义，则其默认值为0，导致纯水平倾斜。
    -
    - - - - - - - - - - - - - - - - - - - - - -
    笛卡儿坐标 ℝ2齐次坐标 ℝℙ2笛卡儿坐标 ℝ3齐次坐标 ℝℙ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]
    - -

    示例

    - -

    使用单个参数

    - -

    HTML

    - -
    <div>Normal</div>
-<div class="skewed">Skewed</div>
    - -

    CSS

    - -
    div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.skewed {
-  transform: skew(10deg); /* Equal to skewX(10deg) */
-  background-color: pink;
-}
    - -

    结果

    - -

    {{EmbedLiveSample("Using_a_single_x-angle", 200, 200)}}

    - -

    使用两个参数

    - -

    HTML

    - -
    <div>Normal</div>
-<div class="skewed">Skewed</div>
    - -

    CSS

    - -
    div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.skewed {
-  transform: skew(10deg, 10deg);
-  background-color: pink;
-}
    - -

    结果

    - -

    {{EmbedLiveSample("Using_two_angles", 200, 200)}}

    - -

    规范

    - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName("CSS3 Transforms", "#funcdef-transform-skew", "skew()")}}{{Spec2("CSS3 Transforms")}}Initial definition
    - -

    浏览器兼容

    - -

    有关兼容性信息，请参阅 <transform-function> 的数据类型。

    - -

    另请参阅

    - -
      -
    • {{cssxref("transform")}}
      • -
    • {{cssxref("<transform-function>")}}
      • -
    diff --git a/files/zh-cn/web/css/transform-function/skew/index.html b/files/zh-cn/web/css/transform-function/skew/index.html new file mode 100644 index 0000000000..4373d3c9bd --- /dev/null +++ b/files/zh-cn/web/css/transform-function/skew/index.html @@ -0,0 +1,140 @@ +--- +title: skew() +slug: Web/CSS/transform-function/skew +tags: + - CSS + - CSS变形 + - CSS方法 + - 引用 +translation_of: Web/CSS/transform-function/skew() +original_slug: Web/CSS/transform-function/skew() +--- +
    {{CSSRef}}
    + +
    skew() 函数定义了一个元素在二维平面上的倾斜转换。它的结果是一个{{cssxref("<transform-function>")}} 数据类型
    + +
    {{EmbedInteractiveExample("pages/css/function-skew.html")}}
    + + + +

    这种转换是一种剪切映射(横切)，它在水平和垂直方向上将单元内的每个点扭曲一定的角度。每个点的坐标根据指定的角度以及到原点的距离，进行成比例的值调整；因此，一个点离原点越远，其增加的值就越大。

    + +

    语法

    + +

     skew() 函数指定一个或两个参数，它们表示在每个方向上应用的倾斜量。

    + +
    skew(ax)
+
+skew(ax, ay)
+
    + +

    参数值

    + +
    +
    ax
    +
    ax 是一个 {{cssxref("<angle>")}}，表示用于沿横坐标扭曲元素的角度。
    +
    ay
    +
    ay 是一个 {{cssxref("<angle>")}} ，表示用于沿纵坐标扭曲元素的角度。如果未定义，则其默认值为0，导致纯水平倾斜。
    +
    + + + + + + + + + + + + + + + + + + + + + +
    笛卡儿坐标 ℝ2齐次坐标 ℝℙ2笛卡儿坐标 ℝ3齐次坐标 ℝℙ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]
    + +

    示例

    + +

    使用单个参数

    + +

    HTML

    + +
    <div>Normal</div>
+<div class="skewed">Skewed</div>
    + +

    CSS

    + +
    div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.skewed {
+  transform: skew(10deg); /* Equal to skewX(10deg) */
+  background-color: pink;
+}
    + +

    结果

    + +

    {{EmbedLiveSample("Using_a_single_x-angle", 200, 200)}}

    + +

    使用两个参数

    + +

    HTML

    + +
    <div>Normal</div>
+<div class="skewed">Skewed</div>
    + +

    CSS

    + +
    div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.skewed {
+  transform: skew(10deg, 10deg);
+  background-color: pink;
+}
    + +

    结果

    + +

    {{EmbedLiveSample("Using_two_angles", 200, 200)}}

    + +

    规范

    + + + + + + + + + + + + + + + + +
    SpecificationStatusComment
    {{SpecName("CSS3 Transforms", "#funcdef-transform-skew", "skew()")}}{{Spec2("CSS3 Transforms")}}Initial definition
    + +

    浏览器兼容

    + +

    有关兼容性信息，请参阅 <transform-function> 的数据类型。

    + +

    另请参阅

    + +
      +
    • {{cssxref("transform")}}
      • +
    • {{cssxref("<transform-function>")}}
      • +
    diff --git a/files/zh-cn/web/css/transform-function/skewx()/index.html b/files/zh-cn/web/css/transform-function/skewx()/index.html deleted file mode 100644 index 8069ddb912..0000000000 --- a/files/zh-cn/web/css/transform-function/skewx()/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: skewX() -slug: Web/CSS/transform-function/skewX() -translation_of: Web/CSS/transform-function/skewX() ---- -
    {{CSSRef}}
    - -

    skewX() 函数定义了一个转换，该转换将元素倾斜到二维平面上的水平方向。它的结果是一个{{cssxref("<transform-function>")}}数据类型。

    - -
    {{EmbedInteractiveExample("pages/css/function-skewX.html")}}
    - - - -

    这种转换是一种剪切映射(横切)，它在水平和垂直方向上将单元内的每个点扭曲一定的角度。每个点的坐标根据指定的角度以及到原点的距离，进行成比例的值调整；因此，一个点离原点越远，其增加的值就越大。

    - -
    -

    注意: skewX(a) 相当于 skew(a)。

    -
    - -

    语法

    - -
    skewX(a)
-
    - -

    参数值

    - -
    -
    a
    -
    a 是一个 {{cssxref("<angle>")}}，表示用于沿横坐标扭曲元素的角度。
    -
    - - - - - - - - - - - - - - - - - - - - - -
    笛卡儿坐标 ℝ2齐次坐标 ℝℙ2笛卡儿坐标 ℝ3齐次坐标 ℝℙ3
    1tan(ay)01 1tan(ay)0010001 1tan(ay)0010001 1tan(ay)00010000100001
    [1 0 tan(a) 1 0 0]
    - -

    示例

    - -

    HTML

    - -
    <div>Normal</div>
-<div class="skewed">Skewed</div>
    - -

    CSS

    - -
    div {
-  width: 80px;
-  height: 80px;
-  background-color: skyblue;
-}
-
-.skewed {
-  transform: skewX(10deg); /* Equal to skew(10deg) */
-  background-color: pink;
-}
-
    - -

    结果

    - -

    {{EmbedLiveSample("示例", 200, 200)}}

    - -

    规范

    - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName("CSS3 Transforms", "#funcdef-transform-skewx", "skewX()")}}{{Spec2("CSS3 Transforms")}}Initial definition
    - -

    浏览器兼容

    - -

    有关兼容性信息，请参阅 <transform-function> 的数据类型。

    - -

    另请参阅

    - -
      -
    • {{cssxref("transform")}}
      • -
    • {{cssxref("<transform-function>")}}
      • -
    diff --git a/files/zh-cn/web/css/transform-function/skewx/index.html b/files/zh-cn/web/css/transform-function/skewx/index.html new file mode 100644 index 0000000000..f89fcb9a5c --- /dev/null +++ b/files/zh-cn/web/css/transform-function/skewx/index.html @@ -0,0 +1,108 @@ +--- +title: skewX() +slug: Web/CSS/transform-function/skewX +translation_of: Web/CSS/transform-function/skewX() +original_slug: Web/CSS/transform-function/skewX() +--- +
    {{CSSRef}}
    + +

    skewX() 函数定义了一个转换，该转换将元素倾斜到二维平面上的水平方向。它的结果是一个{{cssxref("<transform-function>")}}数据类型。

    + +
    {{EmbedInteractiveExample("pages/css/function-skewX.html")}}
    + + + +

    这种转换是一种剪切映射(横切)，它在水平和垂直方向上将单元内的每个点扭曲一定的角度。每个点的坐标根据指定的角度以及到原点的距离，进行成比例的值调整；因此，一个点离原点越远，其增加的值就越大。

    + +
    +

    注意: skewX(a) 相当于 skew(a)。

    +
    + +

    语法

    + +
    skewX(a)
+
    + +

    参数值

    + +
    +
    a
    +
    a 是一个 {{cssxref("<angle>")}}，表示用于沿横坐标扭曲元素的角度。
    +
    + + + + + + + + + + + + + + + + + + + + + +
    笛卡儿坐标 ℝ2齐次坐标 ℝℙ2笛卡儿坐标 ℝ3齐次坐标 ℝℙ3
    1tan(ay)01 1tan(ay)0010001 1tan(ay)0010001 1tan(ay)00010000100001
    [1 0 tan(a) 1 0 0]
    + +

    示例

    + +

    HTML

    + +
    <div>Normal</div>
+<div class="skewed">Skewed</div>
    + +

    CSS

    + +
    div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.skewed {
+  transform: skewX(10deg); /* Equal to skew(10deg) */
+  background-color: pink;
+}
+
    + +

    结果

    + +

    {{EmbedLiveSample("示例", 200, 200)}}

    + +

    规范

    + + + + + + + + + + + + + + + + +
    SpecificationStatusComment
    {{SpecName("CSS3 Transforms", "#funcdef-transform-skewx", "skewX()")}}{{Spec2("CSS3 Transforms")}}Initial definition
    + +

    浏览器兼容

    + +

    有关兼容性信息，请参阅 <transform-function> 的数据类型。

    + +

    另请参阅

    + +
      +
    • {{cssxref("transform")}}
      • +
    • {{cssxref("<transform-function>")}}
      • +
    diff --git a/files/zh-cn/web/css/transform-function/skewy()/index.html b/files/zh-cn/web/css/transform-function/skewy()/index.html deleted file mode 100644 index 7362f1ce01..0000000000 --- a/files/zh-cn/web/css/transform-function/skewy()/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: skewY() -slug: Web/CSS/transform-function/skewY() -translation_of: Web/CSS/transform-function/skewY() ---- -
    -

    {{CSSRef}}

    - -

    skewY() 函数定义了一个转换，该转换将元素倾斜到二维平面上的垂直方向。它的结果是一个{{cssxref("<transform-function>")}}数据类型。

    - -

    {{EmbedInteractiveExample("pages/css/function-skewY.html")}}

    - -

    这种转换是一种剪切映射(横切)，它在水平和垂直方向上将单元内的每个点扭曲一定的角度。每个点的坐标根据指定的角度以及到原点的距离，进行成比例的值调整；因此，一个点离原点越远，其增加的值就越大。

    -
    - -

    语法

    - -
    skewY(a)
-
    - -

    参数值

    - -
    -
    a
    -
    - -
    -
    a 是一个 {{cssxref("<angle>")}}，表示元素沿纵坐标扭曲的角度。
    -
    - - - - - - - - - - - - - - - - - - - - - -
    实坐标系 ℝ2齐次坐标系ℝℙ2实坐标系 ℝ3齐次坐标系ℝℙ3
    -

    1           0

    - -

    tan(ax)  1

    -     		-

    1                0     0

    - -

    tan(ax)      1     0

    - -

    0                 0    1 

    -     		-

    1             0        0

    - -

    tan(ax)   1        0

    - -

    0              0       1

    -     		-

    1            0  0  0

    - -

    tan(ax) 1   0  0

    - -

    0            0  1  0

    - -

    0            0  0  1

    -
    [1 tan(a) 0 1 0 0]
    - -

    示例

    - -

    HTML

    - -
    <p>foo</p>
-<p class="transformed">bar</p>
    - -

    CSS

    - -
    p {
-  width: 50px;
-  height: 50px;
-  background-color: teal;
-}
-
-.transformed {
-  transform: skewY(40deg);
-  background-color: blue;
-}
-
    - -

    结果

    - -

    {{EmbedLiveSample("示例","100%","250")}}

    - -

    规范

    - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName("CSS3 Transforms", "#funcdef-transform-skewy", "skewY()")}}{{Spec2("CSS3 Transforms")}}Initial definition
    - -

    浏览器兼容

    - -

    有关兼容性信息，请参阅 <transform-function> 的数据类型。

    - -

    另请参阅

    - -
      -
    • {{cssxref("transform")}}
      • -
    • {{cssxref("<transform-function>")}}
      • -
    diff --git a/files/zh-cn/web/css/transform-function/translate()/index.html b/files/zh-cn/web/css/transform-function/translate()/index.html deleted file mode 100644 index a9d5e07535..0000000000 --- a/files/zh-cn/web/css/transform-function/translate()/index.html +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: translate() -slug: Web/CSS/transform-function/translate() -tags: - - CSS - - CSS Function - - CSS Transforms - - Reference -translation_of: Web/CSS/transform-function/translate() ---- -
    {{CSSRef}}
    - -

    translate() 这个 CSS 函数在水平和/或垂直方向上重新定位元素。 其结果是 {{cssxref("<transform-function>")}} 类型。

    - -

    - -

    该变换由二维向量构成。 它的坐标定义了元素在每个方向上移动了多少。

    - -

    语法

    - -
    /* Single <length-percentage> values */
-transform: translate(200px);
-transform: translate(50%);
-
-/* Double <length-percentage> values */
-transform: translate(100px, 200px);
-transform: translate(100px, 50%);
-transform: translate(30%, 200px);
-transform: translate(30%, 50%);
-
    - -

    值

    - -
    -
    单个 <length-percentage> 作为参数
    -
    该值是 {{cssxref("<length>")}} 或者 {{cssxref("<percentage>")}} 代表翻译向量的横坐标  (horizontal, x-coordinate) . 而向量的纵坐标 (vertical, y-coordinate) 会被默认为 0. 例如, translate(2) 等价于 translate(2, 0) 。 里面还可以填百分比值，百分比值是指 {{cssxref("transform-box")}} 属性定义的参考框的宽度。
    -
    参数是两个 <length-percentage> 构成
    -
    此值描述两个 {{cssxref("<length>")}} 或 {{cssxref("<percentage>")}} 值，分别代表翻译的横坐标  (x-coordinate)  和纵坐标  (y-coordinate)  向量。 百分比作为第一个值表示宽度，第二个部分表示由 {{cssxref("transform-box")}} 属性定义的参考框的高度。
    -
    - - - - - - - - - - - - - - - - - - - - - -
    Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
    -

    平移不是 ℝ2 中的线性变换，因此不能使用矩阵来表示。

    -     		10tx01ty001 10tx01ty001 100tx010ty00100001
    [1 0 0 1 tx ty]
    - -

    形式语法

    - -
    translate({{cssxref("<length-percentage>")}} , {{cssxref("<length-percentage>")}}?)
-
    - -

    例子

    - -

    使用单个轴平移

    - -

    HTML

    - -
    <div>Static</div>
-<div class="moved">Moved</div>
-<div>Static</div>
    - -

    CSS

    - -
    div {
-  width: 60px;
-  height: 60px;
-  background-color: skyblue;
-}
-
-.moved {
-  transform: translate(10px); /* Equal to: translateX(10px) or translate(10px, 0) */
-  background-color: pink;
-}
-
    - -

    结果

    - -

    {{EmbedLiveSample("Using_a_single-axis_translation", 250, 250)}}

    - -

    y轴和x轴都平移

    - -

    HTML

    - -
    <div>Static</div>
-<div class="moved">Moved</div>
-<div>Static</div>
    - -

    CSS

    - -
    div {
-  width: 60px;
-  height: 60px;
-  background-color: skyblue;
-}
-
-.moved {
-  transform: translate(10px, 10px);
-  background-color: pink;
-}
-
    - -

    结果

    - -

    {{EmbedLiveSample("Combining_y-axis_and_x-axis_translation", 250, 250)}}

    - -

    规格

    - - - - - - - - - - - - - - - - -
    技术规格状态注解
    {{SpecName('CSS3 Transforms', '#funcdef-transform-translate', 'translate()')}}{{Spec2('CSS3 Transforms')}}Initial definition
    - -

    浏览器兼容性

    - -

    请参阅 <transform-function> 数据类型以获取兼容性信息。

    - -

    See also

    - -
      -
    • {{cssxref("transform")}}
      • -
    • {{cssxref("<transform-function>")}}
      • -
    diff --git a/files/zh-cn/web/css/transform-function/translate/index.html b/files/zh-cn/web/css/transform-function/translate/index.html new file mode 100644 index 0000000000..8a17defad7 --- /dev/null +++ b/files/zh-cn/web/css/transform-function/translate/index.html @@ -0,0 +1,153 @@ +--- +title: translate() +slug: Web/CSS/transform-function/translate +tags: + - CSS + - CSS Function + - CSS Transforms + - Reference +translation_of: Web/CSS/transform-function/translate() +original_slug: Web/CSS/transform-function/translate() +--- +
    {{CSSRef}}
    + +

    translate() 这个 CSS 函数在水平和/或垂直方向上重新定位元素。 其结果是 {{cssxref("<transform-function>")}} 类型。

    + +

    + +

    该变换由二维向量构成。 它的坐标定义了元素在每个方向上移动了多少。

    + +

    语法

    + +
    /* Single <length-percentage> values */
+transform: translate(200px);
+transform: translate(50%);
+
+/* Double <length-percentage> values */
+transform: translate(100px, 200px);
+transform: translate(100px, 50%);
+transform: translate(30%, 200px);
+transform: translate(30%, 50%);
+
    + +

    值

    + +
    +
    单个 <length-percentage> 作为参数
    +
    该值是 {{cssxref("<length>")}} 或者 {{cssxref("<percentage>")}} 代表翻译向量的横坐标  (horizontal, x-coordinate) . 而向量的纵坐标 (vertical, y-coordinate) 会被默认为 0. 例如, translate(2) 等价于 translate(2, 0) 。 里面还可以填百分比值，百分比值是指 {{cssxref("transform-box")}} 属性定义的参考框的宽度。
    +
    参数是两个 <length-percentage> 构成
    +
    此值描述两个 {{cssxref("<length>")}} 或 {{cssxref("<percentage>")}} 值，分别代表翻译的横坐标  (x-coordinate)  和纵坐标  (y-coordinate)  向量。 百分比作为第一个值表示宽度，第二个部分表示由 {{cssxref("transform-box")}} 属性定义的参考框的高度。
    +
    + + + + + + + + + + + + + + + + + + + + + +
    Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
    +

    平移不是 ℝ2 中的线性变换，因此不能使用矩阵来表示。

    +     		10tx01ty001 10tx01ty001 100tx010ty00100001
    [1 0 0 1 tx ty]
    + +

    形式语法

    + +
    translate({{cssxref("<length-percentage>")}} , {{cssxref("<length-percentage>")}}?)
+
    + +

    例子

    + +

    使用单个轴平移

    + +

    HTML

    + +
    <div>Static</div>
+<div class="moved">Moved</div>
+<div>Static</div>
    + +

    CSS

    + +
    div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: translate(10px); /* Equal to: translateX(10px) or translate(10px, 0) */
+  background-color: pink;
+}
+
    + +

    结果

    + +

    {{EmbedLiveSample("Using_a_single-axis_translation", 250, 250)}}

    + +

    y轴和x轴都平移

    + +

    HTML

    + +
    <div>Static</div>
+<div class="moved">Moved</div>
+<div>Static</div>
    + +

    CSS

    + +
    div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: translate(10px, 10px);
+  background-color: pink;
+}
+
    + +

    结果

    + +

    {{EmbedLiveSample("Combining_y-axis_and_x-axis_translation", 250, 250)}}

    + +

    规格

    + + + + + + + + + + + + + + + + +
    技术规格状态注解
    {{SpecName('CSS3 Transforms', '#funcdef-transform-translate', 'translate()')}}{{Spec2('CSS3 Transforms')}}Initial definition
    + +

    浏览器兼容性

    + +

    请参阅 <transform-function> 数据类型以获取兼容性信息。

    + +

    See also

    + +
      +
    • {{cssxref("transform")}}
      • +
    • {{cssxref("<transform-function>")}}
      • +
    diff --git a/files/zh-cn/web/css/transform-function/translate3d()/index.html b/files/zh-cn/web/css/transform-function/translate3d()/index.html deleted file mode 100644 index ca01d9c4ea..0000000000 --- a/files/zh-cn/web/css/transform-function/translate3d()/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: translate3d() -slug: Web/CSS/transform-function/translate3d() -tags: - - CSS - - CSS 函数 - - CSS 变换 - - 参考 -translation_of: Web/CSS/transform-function/translate3d() ---- -
    {{CSSRef}}
    - -

    translate3d() CSS 函数在3D空间内移动一个元素的位置。这个移动由一个三维向量来表达，分别表示他在三个方向上移动的距离。

    - -

    语法

    - -
    translate3d(tx, ty, tz)
    - -
    -
    -

    常量

    -
    -
    tx
    -
    是一个 {{cssxref("<length>")}} 代表移动向量的横坐标。
    -
    ty
    -
    是一个{{cssxref("<length>")}} 代表移动向量的纵坐标。
    -
    tz
    -
    是一个 {{cssxref("<length>")}} 代表移动向量的z坐标。它不能是{{cssxref("<percentage>")}} 值；那样的移动是没有意义的。
    -
    - - - - - - - - - - - - - - - - - -
    Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
    -

     此变换适用于3D空间，并不适用于这两种情况。

    -     		-

    平移不是ℝ3中的线性变换，不能使用笛卡尔坐标矩阵表示。

    -     		100tx010ty001tz0001
    - -

    示例

    - -

    单轴变化示例

    - -

    HTML

    - -
    <p>foo</p>
-<p class="transformed">bar</p>
-<p>foo</p>
    - -

    CSS

    - -
    p {
-  width: 50px;
-  height: 50px;
-  background-color: teal;
-}
-
-.transformed {
-  transform: perspective(500px) translate3d(10px,0px,0px);
-  /* equivalent to perspective(500px) translateX(10px)*/
-  background-color: blue;
-}
    - -

    结果

    - -

    {{EmbedLiveSample("Using_a_single_axis_translation","100%","250")}}

    - -

    z轴与x轴变化

    - -

    HTML

    - -
    <p>foo</p>
-<p class="transformed">bar</p>
-<p>foo</p>
    - -

    CSS

    - -
    p {
-  width: 50px;
-  height: 50px;
-  background-color: teal;
-}
-
-.transformed {
-  transform: perspective(500px) translate3d(10px,0px,100px);
-  background-color: blue;
-}
    - -

    结果

    - -

    {{EmbedLiveSample("Combining_z-axis_and_x-axis_translation","100%","250")}}

    - -

     

    - -

    规格

    - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName("CSS Transforms 2", "#funcdef-translate3d", "translate3d()")}}{{Spec2("CSS Transforms 2")}}Initial definition
    - -

    浏览器兼容性

    - -

    有关兼容性信息，请参阅<transform-function>的兼容性信息。

    - -

    另请参阅

    - -
      -
    • {{cssxref("transform")}}
      • -
    • {{cssxref("<transform-function>")}}
      • -
    - -

     

    diff --git a/files/zh-cn/web/css/transform-function/translate3d/index.html b/files/zh-cn/web/css/transform-function/translate3d/index.html new file mode 100644 index 0000000000..dfc10c3467 --- /dev/null +++ b/files/zh-cn/web/css/transform-function/translate3d/index.html @@ -0,0 +1,139 @@ +--- +title: translate3d() +slug: Web/CSS/transform-function/translate3d +tags: + - CSS + - CSS 函数 + - CSS 变换 + - 参考 +translation_of: Web/CSS/transform-function/translate3d() +original_slug: Web/CSS/transform-function/translate3d() +--- +
    {{CSSRef}}
    + +

    translate3d() CSS 函数在3D空间内移动一个元素的位置。这个移动由一个三维向量来表达，分别表示他在三个方向上移动的距离。

    + +

    语法

    + +
    translate3d(tx, ty, tz)
    + +
    +
    +

    常量

    +
    +
    tx
    +
    是一个 {{cssxref("<length>")}} 代表移动向量的横坐标。
    +
    ty
    +
    是一个{{cssxref("<length>")}} 代表移动向量的纵坐标。
    +
    tz
    +
    是一个 {{cssxref("<length>")}} 代表移动向量的z坐标。它不能是{{cssxref("<percentage>")}} 值；那样的移动是没有意义的。
    +
    + + + + + + + + + + + + + + + + + +
    Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
    +

     此变换适用于3D空间，并不适用于这两种情况。

    +     		+

    平移不是ℝ3中的线性变换，不能使用笛卡尔坐标矩阵表示。

    +     		100tx010ty001tz0001
    + +

    示例

    + +

    单轴变化示例

    + +

    HTML

    + +
    <p>foo</p>
+<p class="transformed">bar</p>
+<p>foo</p>
    + +

    CSS

    + +
    p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformed {
+  transform: perspective(500px) translate3d(10px,0px,0px);
+  /* equivalent to perspective(500px) translateX(10px)*/
+  background-color: blue;
+}
    + +

    结果

    + +

    {{EmbedLiveSample("Using_a_single_axis_translation","100%","250")}}

    + +

    z轴与x轴变化

    + +

    HTML

    + +
    <p>foo</p>
+<p class="transformed">bar</p>
+<p>foo</p>
    + +

    CSS

    + +
    p {
+  width: 50px;
+  height: 50px;
+  background-color: teal;
+}
+
+.transformed {
+  transform: perspective(500px) translate3d(10px,0px,100px);
+  background-color: blue;
+}
    + +

    结果

    + +

    {{EmbedLiveSample("Combining_z-axis_and_x-axis_translation","100%","250")}}

    + +

     

    + +

    规格

    + + + + + + + + + + + + + + + + +
    SpecificationStatusComment
    {{SpecName("CSS Transforms 2", "#funcdef-translate3d", "translate3d()")}}{{Spec2("CSS Transforms 2")}}Initial definition
    + +

    浏览器兼容性

    + +

    有关兼容性信息，请参阅<transform-function>的兼容性信息。

    + +

    另请参阅

    + +
      +
    • {{cssxref("transform")}}
      • +
    • {{cssxref("<transform-function>")}}
      • +
    + +

     

    diff --git a/files/zh-cn/web/css/transform-function/translatex()/index.html b/files/zh-cn/web/css/transform-function/translatex()/index.html deleted file mode 100644 index c800a6c7eb..0000000000 --- a/files/zh-cn/web/css/transform-function/translatex()/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: translateX() -slug: Web/CSS/transform-function/translateX() -translation_of: Web/CSS/transform-function/translateX() -tags: - - CSS - - CSS Function - - CSS Transforms - - Function - - Reference -browser-compat: css.types.transform-function.translateX ---- -
    {{CSSRef}}
    - -

    translateX()函数表示在二维平面上水平方向移动元素。 其结果的数据类型是{{cssxref("<transform-function>")}}。

    - -

    - -
    -

    注意： translateX(tx)等同于 translate(tx, 0) 或者 translate3d(tx, 0, 0)。

    -
    - -

    语法

    - -
    translateX(t)
-
    - -

    参数

    - -
    -
    t
    -
         代表了向量平移的横坐标长度{{cssxref("<length>")}}。
    -
    - - - - - - - - - - - - - - - - - - - - - -
    ℝ2空间中的笛卡尔坐标在ℝℙ2上的投影坐标在ℝ3上的笛卡尔坐标在ℝℙ3上的投影坐标
    -

    在ℝ2 空间中的平移并非线性变化，因此不能表示为笛卡尔坐标矩阵。

    -     		-

    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]
    - -

    示例

    - -

    HTML

    - -
    <div>Static</div>
-<div class="moved">Moved</div>
-<div>Static</div>
    - -

    CSS

    - -
    div {
-  width: 60px;
-  height: 60px;
-  background-color: skyblue;
-}
-
-.moved {
-  transform: translateX(10px); /* 等同于 translate(10px) */
-  background-color: pink;
-}
    - -

    结果

    - -

    {{EmbedLiveSample("Examples", 250, 250)}}

    - -

    标准化说明

    - - - - - - - - - - - - - - - - -
    标准状态备注
    {{SpecName("CSS3 Transforms", "#funcdef-transform-translatex", "translateX()")}}{{Spec2("CSS3 Transforms")}}原始定义
    - -

    浏览器兼容性

    - -

    请前往数据类型{{cssxref("transform-function")}}的页面以查看兼容性信息。

    - -

    参阅

    - -
      -
    • {{cssxref("transform")}}
      • -
    • {{cssxref("<transform-function>")}}
      • -
    diff --git a/files/zh-cn/web/css/transform-function/translatex/index.html b/files/zh-cn/web/css/transform-function/translatex/index.html new file mode 100644 index 0000000000..17d6a1f5c8 --- /dev/null +++ b/files/zh-cn/web/css/transform-function/translatex/index.html @@ -0,0 +1,133 @@ +--- +title: translateX() +slug: Web/CSS/transform-function/translateX +tags: + - CSS + - CSS Function + - CSS Transforms + - Function + - Reference +translation_of: Web/CSS/transform-function/translateX() +original_slug: Web/CSS/transform-function/translateX() +browser-compat: css.types.transform-function.translateX +--- +
    {{CSSRef}}
    + +

    translateX()函数表示在二维平面上水平方向移动元素。 其结果的数据类型是{{cssxref("<transform-function>")}}。

    + +

    + +
    +

    注意： translateX(tx)等同于 translate(tx, 0) 或者 translate3d(tx, 0, 0)。

    +
    + +

    语法

    + +
    translateX(t)
+
    + +

    参数

    + +
    +
    t
    +
         代表了向量平移的横坐标长度{{cssxref("<length>")}}。
    +
    + + + + + + + + + + + + + + + + + + + + + +
    ℝ2空间中的笛卡尔坐标在ℝℙ2上的投影坐标在ℝ3上的笛卡尔坐标在ℝℙ3上的投影坐标
    +

    在ℝ2 空间中的平移并非线性变化，因此不能表示为笛卡尔坐标矩阵。

    +     		+

    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]
    + +

    示例

    + +

    HTML

    + +
    <div>Static</div>
+<div class="moved">Moved</div>
+<div>Static</div>
    + +

    CSS

    + +
    div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: translateX(10px); /* 等同于 translate(10px) */
+  background-color: pink;
+}
    + +

    结果

    + +

    {{EmbedLiveSample("Examples", 250, 250)}}

    + +

    标准化说明

    + + + + + + + + + + + + + + + + +
    标准状态备注
    {{SpecName("CSS3 Transforms", "#funcdef-transform-translatex", "translateX()")}}{{Spec2("CSS3 Transforms")}}原始定义
    + +

    浏览器兼容性

    + +

    请前往数据类型{{cssxref("transform-function")}}的页面以查看兼容性信息。

    + +

    参阅

    + +
      +
    • {{cssxref("transform")}}
      • +
    • {{cssxref("<transform-function>")}}
      • +
    diff --git a/files/zh-cn/web/css/transform-function/translatey()/index.html b/files/zh-cn/web/css/transform-function/translatey()/index.html deleted file mode 100644 index cbce9c8b14..0000000000 --- a/files/zh-cn/web/css/transform-function/translatey()/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: translateY() -slug: Web/CSS/transform-function/translateY() -translation_of: Web/CSS/transform-function/translateY() ---- -
    {{CSSRef}}
    - -

    translateY() 在页面垂直移动元素，结果是 CSS 数据类型 {{cssxref("<transform-function>")}}。

    - -

    - -
    -

    注意: translateY(ty) 对应 translate(0, ty) 或translate3d(0, ty, 0)。

    -
    - -

    语法

    - -
    /* <length-percentage> values */
-transform: translateY(200px);
-transform: translateY(50%);
    - -

    值

    - -
    -
    {{cssxref("<length>")}} 或 {{cssxref("<percentage>")}} 表示变换向量的纵坐标。百分比指的是盒子高度，盒子由属性 {{cssxref("transform-box")}} 定义。
    -
    - - - - - - - - - - - - - - - - - - - - - -
    笛卡尔坐标 ℝ2 -

    在ℝℙ2上的同类坐标

    -     		-

    在ℝ3上的笛卡尔坐标

    -     		-

    在ℝℙ3同类坐标

    -
    -

    在ℝ2 上的转换不会是线性变换但是并不能代表在笛卡尔坐标系统中使用矩阵

    -     		10001t001 10001t001 1000010t00100001
    [1 0 0 1 0 t]
    - -

    语法

    - -
    translateY({{cssxref("<length-percentage>")}})
    - -

    示例

    - -

    HTML

    - -
    <div>Static</div>
-<div class="moved">Moved</div>
-<div>Static</div>
    - -

    CSS

    - -
    div {
-  width: 60px;
-  height: 60px;
-  background-color: skyblue;
-}
-
-.moved {
-  transform: translateY(10px);
-  background-color: pink;
-}
    - -

    结果

    - -

    {{EmbedLiveSample("Examples", 250, 250)}}

    - -

    规范

    - - - - - - - - - - - - - - - - -
    规范状态注释
    {{SpecName("CSS3 Transforms", "#funcdef-transform-translatey", "translateY()")}}{{Spec2("CSS3 Transforms")}}Initial definition
    - -

    浏览器兼容性

    - -

    请查看 <transform-function>。

    - -

    了解更多

    - -
      -
    • {{cssxref("transform")}}
      • -
    • {{cssxref("<transform-function>")}}
      • -
    diff --git a/files/zh-cn/web/css/transform-function/translatey/index.html b/files/zh-cn/web/css/transform-function/translatey/index.html new file mode 100644 index 0000000000..644a30d0cc --- /dev/null +++ b/files/zh-cn/web/css/transform-function/translatey/index.html @@ -0,0 +1,116 @@ +--- +title: translateY() +slug: Web/CSS/transform-function/translateY +translation_of: Web/CSS/transform-function/translateY() +original_slug: Web/CSS/transform-function/translateY() +--- +
    {{CSSRef}}
    + +

    translateY() 在页面垂直移动元素，结果是 CSS 数据类型 {{cssxref("<transform-function>")}}。

    + +

    + +
    +

    注意: translateY(ty) 对应 translate(0, ty) 或translate3d(0, ty, 0)。

    +
    + +

    语法

    + +
    /* <length-percentage> values */
+transform: translateY(200px);
+transform: translateY(50%);
    + +

    值

    + +
    +
    {{cssxref("<length>")}} 或 {{cssxref("<percentage>")}} 表示变换向量的纵坐标。百分比指的是盒子高度，盒子由属性 {{cssxref("transform-box")}} 定义。
    +
    + + + + + + + + + + + + + + + + + + + + + +
    笛卡尔坐标 ℝ2 +

    在ℝℙ2上的同类坐标

    +     		+

    在ℝ3上的笛卡尔坐标

    +     		+

    在ℝℙ3同类坐标

    +
    +

    在ℝ2 上的转换不会是线性变换但是并不能代表在笛卡尔坐标系统中使用矩阵

    +     		10001t001 10001t001 1000010t00100001
    [1 0 0 1 0 t]
    + +

    语法

    + +
    translateY({{cssxref("<length-percentage>")}})
    + +

    示例

    + +

    HTML

    + +
    <div>Static</div>
+<div class="moved">Moved</div>
+<div>Static</div>
    + +

    CSS

    + +
    div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: translateY(10px);
+  background-color: pink;
+}
    + +

    结果

    + +

    {{EmbedLiveSample("Examples", 250, 250)}}

    + +

    规范

    + + + + + + + + + + + + + + + + +
    规范状态注释
    {{SpecName("CSS3 Transforms", "#funcdef-transform-translatey", "translateY()")}}{{Spec2("CSS3 Transforms")}}Initial definition
    + +

    浏览器兼容性

    + +

    请查看 <transform-function>。

    + +

    了解更多

    + +
      +
    • {{cssxref("transform")}}
      • +
    • {{cssxref("<transform-function>")}}
      • +
    diff --git a/files/zh-cn/web/css/url()/index.html b/files/zh-cn/web/css/url()/index.html deleted file mode 100644 index 85f9f27cc5..0000000000 --- a/files/zh-cn/web/css/url()/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: -slug: Web/CSS/url() -translation_of: Web/CSS/url() -translation_of_original: Web/CSS/url -original_slug: Web/CSS/url ---- -

    {{ CssRef() }}

    - -

    概述

    - -

    CSS 数据类型 <url> 指向一个资源。它没有独有的表达形式，只能通过 url() 函数定义。

    - -
    URI 和 URL?
    -
    -URI（统一资源标识符） 与 URL（统一资源定位符） 不同。URL 描述资源的位置，而 URI 描述资源的 id。URI 可以是一个资源的 URL（地址）、或 URN（统一资源名称）。
    -
    -在 CSS Level 1 中，url() 函数被引入并用于描述 URL，即地址（虽然没有明确定义，但指一个 CSS 数据类型 <url>）
    -
    -在 CSS Level 2 中，url() 函数被扩展为可以描述任何一个 URI，即 URL 或 URN。这一定义导致  url() 函数被用于创建一个  <uri> 数据类型。这一行为使人迷惑，且在 CSS 中几乎从不使用 URN。
    -
    -为了解决这一问题，在 CSS Level 3 中恢复了它的初始定义， url() 函数被明确定义为指代 <url> CSS 数据类型，且 <uri> CSS 数据类型不再存在。
    -
    -注意，这些语义信息并不会影响 Web 开发者的开发和对此数据类型的具体实现。
    - -

    许多 CSS 属性 将 URL 作为属性值，例如 {{ Cssxref("background-image") }}、{{ Cssxref("cursor") }}、{{ Cssxref("@font-face") }}、{{ cssxref("list-style") }} 等。

    - -

    url() 函数

    - -

    URL 可以使用单引号或双引号包含，也可以直接书写。可以在此函数中使用相对地址。相对地址相对于 CSS 样式表的 URL（而不是网页的 URL）。

    - -

    语法

    - -
     <CSS 属性>:  url("http://mysite.example.com/mycursor.png")
-
- <CSS 属性>:  url(http://mysite.example.com/mycursor.png)
-
    - -
    -

    注意: 从 Firefox 15 开始，不再允许在未用引号包含的 url() 中使用大于 0x7e 的控制字符。详情请查看 {{Bug(752230)}}。

    -
    - -

    示例

    - -
    .topbanner { background: url("topbanner.png") #00D no-repeat fixed; }
-
    - -
    ul { list-style: square url(http://www.example.com/redball.png) }
-
    - -

    规范

    - - - - - - - - - - - - - - - - - - - - - - - - - - -
    规范状态说明
    {{ SpecName('CSS3 Values', '#urls', '<url>') }}{{ Spec2('CSS3 Values') }}自 CSS Level 2 (Revision 1) 以来没有显著更改
    {{ Specname('CSS2.1', 'syndata.html#uri', '<uri>') }}{{ Spec2('CSS2.1') }}自 CSS Level 1 以来没有显著更改
    {{ SpecName('CSS1', '#url', '<url>') }}{{ Spec2('CSS1') }} 
    - -

    浏览器兼容性

    - -{{Compat("css.types.url")}} diff --git a/files/zh-cn/web/css/url/index.html b/files/zh-cn/web/css/url/index.html new file mode 100644 index 0000000000..49b4abde6d --- /dev/null +++ b/files/zh-cn/web/css/url/index.html @@ -0,0 +1,82 @@ +--- +title: +slug: Web/CSS/url +translation_of: Web/CSS/url() +translation_of_original: Web/CSS/url +original_slug: Web/CSS/url() +--- +

    {{ CssRef() }}

    + +

    概述

    + +

    CSS 数据类型 <url> 指向一个资源。它没有独有的表达形式，只能通过 url() 函数定义。

    + +
    URI 和 URL?
    +
    +URI（统一资源标识符） 与 URL（统一资源定位符） 不同。URL 描述资源的位置，而 URI 描述资源的 id。URI 可以是一个资源的 URL（地址）、或 URN（统一资源名称）。
    +
    +在 CSS Level 1 中，url() 函数被引入并用于描述 URL，即地址（虽然没有明确定义，但指一个 CSS 数据类型 <url>）
    +
    +在 CSS Level 2 中，url() 函数被扩展为可以描述任何一个 URI，即 URL 或 URN。这一定义导致  url() 函数被用于创建一个  <uri> 数据类型。这一行为使人迷惑，且在 CSS 中几乎从不使用 URN。
    +
    +为了解决这一问题，在 CSS Level 3 中恢复了它的初始定义， url() 函数被明确定义为指代 <url> CSS 数据类型，且 <uri> CSS 数据类型不再存在。
    +
    +注意，这些语义信息并不会影响 Web 开发者的开发和对此数据类型的具体实现。
    + +

    许多 CSS 属性 将 URL 作为属性值，例如 {{ Cssxref("background-image") }}、{{ Cssxref("cursor") }}、{{ Cssxref("@font-face") }}、{{ cssxref("list-style") }} 等。

    + +

    url() 函数

    + +

    URL 可以使用单引号或双引号包含，也可以直接书写。可以在此函数中使用相对地址。相对地址相对于 CSS 样式表的 URL（而不是网页的 URL）。

    + +

    语法

    + +
     <CSS 属性>:  url("http://mysite.example.com/mycursor.png")
+
+ <CSS 属性>:  url(http://mysite.example.com/mycursor.png)
+
    + +
    +

    注意: 从 Firefox 15 开始，不再允许在未用引号包含的 url() 中使用大于 0x7e 的控制字符。详情请查看 {{Bug(752230)}}。

    +
    + +

    示例

    + +
    .topbanner { background: url("topbanner.png") #00D no-repeat fixed; }
+
    + +
    ul { list-style: square url(http://www.example.com/redball.png) }
+
    + +

    规范

    + + + + + + + + + + + + + + + + + + + + + + + + + + +
    规范状态说明
    {{ SpecName('CSS3 Values', '#urls', '<url>') }}{{ Spec2('CSS3 Values') }}自 CSS Level 2 (Revision 1) 以来没有显著更改
    {{ Specname('CSS2.1', 'syndata.html#uri', '<uri>') }}{{ Spec2('CSS2.1') }}自 CSS Level 1 以来没有显著更改
    {{ SpecName('CSS1', '#url', '<url>') }}{{ Spec2('CSS1') }} 
    + +

    浏览器兼容性

    + +{{Compat("css.types.url")}} diff --git a/files/zh-cn/web/css/var()/index.html b/files/zh-cn/web/css/var()/index.html deleted file mode 100644 index f4121fa9b5..0000000000 --- a/files/zh-cn/web/css/var()/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: var() -slug: Web/CSS/var() -tags: - - CSS - - CSS 变量 - - CSS 方法 - - var() - - 参考 - - 实验性的 -translation_of: Web/CSS/var() ---- -
    {{CSSRef}}
    - -

    概述

    - -

    var()函数可以代替元素中任何属性中的值的任何部分。var()函数不能作为属性名、选择器或者其他除了属性值之外的值。（这样做通常会产生无效的语法或者一个没有关联到变量的值。）

    - -

    语法

    - -

    方法的第一个参数是要替换的自定义属性的名称。函数的可选第二个参数用作回退值。如果第一个参数引用的自定义属性无效，则该函数将使用第二个值。

    - -{{csssyntax}} - -
    -

    注意：自定义属性的回退值允许使用逗号。例如， var(--foo, red, blue) 将red, blue同时指定为回退值；即是说任何在第一个逗号之后到函数结尾前的值都会被考虑为回退值。

    -
    - -

    值

    - -
    -
    <custom-property-name> 自定义属性名
    -
    在实际应用中它被定义为以两个破折号开始的任何有效标识符。 自定义属性仅供作者和用户使用; CSS 将永远不会给他们超出这里表达的意义。
    -
    <declaration-value> 声明值（后备值）
    -
    回退值被用来在自定义属性值无效的情况下保证函数有值。回退值可以包含任何字符，但是部分有特殊含义的字符除外，例如换行符、不匹配的右括号（如)、]或}）、感叹号以及顶层分号（不被任何非var()的括号包裹的分号，例如var(--bg-color, --bs;color)是不合法的，而var(--bg-color, --value(bs;color))是合法的）。
    -
    - -

    示例

    - -

    在 :root 上定义，然后使用它

    - -
    :root {
-  --main-bg-color: pink;
-}
-
-body {
-  background-color: var(--main-bg-color);
-}
-
    - -

    当第一个值未定义，回退值生效

    - -
    /* 后备值 */
-
-/* 在父元素样式中定义一个值 */
-.component {
-  --text-color: #080; /* header-color 并没有被设定 */
-}
-
-/* 在 component 的样式中使用它： */
-.component .text {
-  color: var(--text-color, black); /* 此处 color 正常取值 --text-color */
-}
-.component .header {
-  color: var(--header-color, blue); /* 此处 color 被回退到 blue */
-}
-
-
    - -

    规范

    - - - - - - - - - - - - - - - - -
    SpecificationStatusComment
    {{SpecName('CSS3 Variables', '#using-variables', 'var()')}}{{Spec2('CSS3 Variables')}}Initial definition
    - -

    浏览器兼容性

    - -

    {{Compat("css.properties.custom-property.var")}}

    - -

    另请参见

    - -
      -
    • {{cssxref("env","env(…)")}} – read‑only environment variables controlled by the user‑agent.
      • -
    • Using CSS variables
      • -
    diff --git a/files/zh-cn/web/css/var/index.html b/files/zh-cn/web/css/var/index.html new file mode 100644 index 0000000000..c79b5482d9 --- /dev/null +++ b/files/zh-cn/web/css/var/index.html @@ -0,0 +1,99 @@ +--- +title: var() +slug: Web/CSS/var +tags: + - CSS + - CSS 变量 + - CSS 方法 + - var() + - 参考 + - 实验性的 +translation_of: Web/CSS/var() +original_slug: Web/CSS/var() +--- +
    {{CSSRef}}
    + +

    概述

    + +

    var()函数可以代替元素中任何属性中的值的任何部分。var()函数不能作为属性名、选择器或者其他除了属性值之外的值。（这样做通常会产生无效的语法或者一个没有关联到变量的值。）

    + +

    语法

    + +

    方法的第一个参数是要替换的自定义属性的名称。函数的可选第二个参数用作回退值。如果第一个参数引用的自定义属性无效，则该函数将使用第二个值。

    + +{{csssyntax}} + +
    +

    注意：自定义属性的回退值允许使用逗号。例如， var(--foo, red, blue) 将red, blue同时指定为回退值；即是说任何在第一个逗号之后到函数结尾前的值都会被考虑为回退值。

    +
    + +

    值

    + +
    +
    <custom-property-name> 自定义属性名
    +
    在实际应用中它被定义为以两个破折号开始的任何有效标识符。 自定义属性仅供作者和用户使用; CSS 将永远不会给他们超出这里表达的意义。
    +
    <declaration-value> 声明值（后备值）
    +
    回退值被用来在自定义属性值无效的情况下保证函数有值。回退值可以包含任何字符，但是部分有特殊含义的字符除外，例如换行符、不匹配的右括号（如)、]或}）、感叹号以及顶层分号（不被任何非var()的括号包裹的分号，例如var(--bg-color, --bs;color)是不合法的，而var(--bg-color, --value(bs;color))是合法的）。
    +
    + +

    示例

    + +

    在 :root 上定义，然后使用它

    + +
    :root {
+  --main-bg-color: pink;
+}
+
+body {
+  background-color: var(--main-bg-color);
+}
+
    + +

    当第一个值未定义，回退值生效

    + +
    /* 后备值 */
+
+/* 在父元素样式中定义一个值 */
+.component {
+  --text-color: #080; /* header-color 并没有被设定 */
+}
+
+/* 在 component 的样式中使用它： */
+.component .text {
+  color: var(--text-color, black); /* 此处 color 正常取值 --text-color */
+}
+.component .header {
+  color: var(--header-color, blue); /* 此处 color 被回退到 blue */
+}
+
+
    + +

    规范

    + + + + + + + + + + + + + + + + +
    SpecificationStatusComment
    {{SpecName('CSS3 Variables', '#using-variables', 'var()')}}{{Spec2('CSS3 Variables')}}Initial definition
    + +

    浏览器兼容性

    + +

    {{Compat("css.properties.custom-property.var")}}

    + +

    另请参见

    + +
      +
    • {{cssxref("env","env(…)")}} – read‑only environment variables controlled by the user‑agent.
      • +
    • Using CSS variables
      • +
    diff --git a/files/zh-tw/_redirects.txt b/files/zh-tw/_redirects.txt index 8a72d2b9d9..30130a5d18 100644 --- a/files/zh-tw/_redirects.txt +++ b/files/zh-tw/_redirects.txt @@ -601,11 +601,11 @@ /zh-TW/docs/Web/CSS/CSS_網格_布局 /zh-TW/docs/Web/CSS/CSS_Grid_Layout /zh-TW/docs/Web/CSS/Common_CSS_Questions /zh-TW/docs/Learn/CSS/Howto/CSS_FAQ /zh-TW/docs/Web/CSS/Descendant_selectors /zh-TW/docs/Web/CSS/Descendant_combinator -/zh-TW/docs/Web/CSS/attr /zh-TW/docs/Web/CSS/attr() +/zh-TW/docs/Web/CSS/attr() /zh-TW/docs/Web/CSS/attr /zh-TW/docs/Web/CSS/border-image/border-image /zh-TW/docs/orphaned/Web/CSS/border-image/border-image /zh-TW/docs/Web/CSS/radial-gradient /zh-TW/docs/orphaned/Web/CSS/radial-gradient() /zh-TW/docs/Web/CSS/radial-gradient() /zh-TW/docs/orphaned/Web/CSS/radial-gradient() -/zh-TW/docs/Web/CSS/transform-function/translate3d /zh-TW/docs/Web/CSS/transform-function/translate3d() +/zh-TW/docs/Web/CSS/transform-function/translate3d() /zh-TW/docs/Web/CSS/transform-function/translate3d /zh-TW/docs/Web/CSS/參考 /zh-TW/docs/Web/CSS/Reference /zh-TW/docs/Web/CSS/彈頭 /zh-TW/docs/Web/CSS/box-sizing /zh-TW/docs/Web/CSS/繼承 /zh-TW/docs/Web/CSS/inheritance diff --git a/files/zh-tw/_wikihistory.json b/files/zh-tw/_wikihistory.json index 6ac906774b..8295f11f9c 100644 --- a/files/zh-tw/_wikihistory.json +++ b/files/zh-tw/_wikihistory.json @@ -5144,7 +5144,7 @@ "yoonasy" ] }, - "Web/CSS/attr()": { + "Web/CSS/attr": { "modified": "2020-11-04T08:52:16.034Z", "contributors": [ "chrisdavidmills", @@ -5299,7 +5299,7 @@ "alk03073135" ] }, - "Web/CSS/transform-function/translate3d()": { + "Web/CSS/transform-function/translate3d": { "modified": "2020-11-30T13:00:00.920Z", "contributors": [ "chrisdavidmills", diff --git a/files/zh-tw/web/css/attr()/index.html b/files/zh-tw/web/css/attr()/index.html deleted file mode 100644 index 92fac9c5ac..0000000000 --- a/files/zh-tw/web/css/attr()/index.html +++ /dev/null @@ -1,200 +0,0 @@ ---- -title: attr -slug: Web/CSS/attr() -translation_of: Web/CSS/attr() ---- -
    {{CSSRef}}
    - -

    概要

    - -

    attr() CSS 函數使用於樣式取得被選取之元素中特定屬性的值。它也可以用在擬元素選取項(Pseudo-element)，在此情形下，其屬性值來自於擬元素選取項相依的原始元素。

    - -

    attr() 函數可以被用在任何 CSS 屬性，但除了 content 以外的屬性皆屬於實驗階段。

    - -

    語法

    - -
    /* Simple usage */
-attr(data-count);
-attr(title);
-
-/* With type */
-attr(src url);
-attr(data-count number);
-attr(data-width px);
-
-/* With fallback */
-attr(data-count number, 0);
-attr(src url, '');
-attr(data-width px, inherit);
-attr(data-something, 'default');
-
    - -

    值

    - -
    -
    attribute-name
    -
    在 CSS 中參考之 HTML 元素的屬性名稱。
    -
    <type-or-unit> {{experimental_inline}}
    -
    Is a keyword representing either the type of the attribute's value, or its unit, as in HTML some attributes have implicit units. If the use of <type-or-unit> as a value for the given attribute is invalid, the attr() expression will be invalid too. If omitted, it defaults to string. The list of valid values are: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    KeywordAssociated typeCommentDefault value
    string{{cssxref("<string>")}}The attribute value is treated as a CSS {{cssxref("<string>")}}.  It is NOT reparsed, and in particular the characters are used as-is instead of CSS escapes being turned into different characters.An empty string
    color {{experimental_inline}}{{cssxref("<color>")}}The attribute value is parsed as a hash (3- or 6-value hash) or a keyword. It must be a valid CSS {{cssxref("<string>")}} value.
    - Leading and trailing spaces are stripped.    		currentColor
    url {{experimental_inline}}{{cssxref("<uri>")}}The attribute value is parsed as a string that is used inside a CSS url()function.
    - Relative URL are resolved relatively to the original document, not relatively to the style sheet.
    - Leading and trailing spaces are stripped.    		The url about:invalid that points to a non-existent document with a generic error condition.
    integer {{experimental_inline}}{{cssxref("<integer>")}}The attribute value is parsed as a CSS {{cssxref("<integer>")}}. If it is not valid, that is not an integer or out of the range accepted by the CSS property, the default value is used.
    - Leading and trailing spaces are stripped.    		0, or, if 0 is not a valid value for the property, the property's minimum value.
    number {{experimental_inline}}{{cssxref("<number>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
    - Leading and trailing spaces are stripped.    		0, or, if 0 is not a valid value for the property, the property's minimum value.
    length {{experimental_inline}}{{cssxref("<length>")}}The attribute value is parsed as a CSS {{cssxref("<length>")}} dimension, that is including the unit (e.g. 12.5em). If it is not valid, that is not a length or out of the range accepted by the CSS property, the default value is used.
    - If the given unit is a relative length, attr()computes it to an absolute length.
    - Leading and trailing spaces are stripped.    		0, or, if 0 is not a valid value for the property, the property's minimum value.
    em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, or pc {{experimental_inline}}{{cssxref("<length>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as a {{cssxref("<length>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
    - If the given unit is a relative length, attr()computes it to an absolute length.
    - Leading and trailing spaces are stripped.    		0, or, if 0 is not a valid value for the property, the property's minimum value.
    angle {{experimental_inline}}{{cssxref("<angle>")}}The attribute value is parsed as a CSS {{cssxref("<angle>")}} dimension, that is including the unit (e.g. 30.5deg). If it is not valid, that is not an angle or out of the range accepted by the CSS property, the default value is used.
    - Leading and trailing spaces are stripped.    		0deg, or, if 0deg is not a valid value for the property, the property's minimum value.
    deg, grad, rad {{experimental_inline}}{{cssxref("<angle>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as an {{cssxref("<angle>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
    - Leading and trailing spaces are stripped.    		0deg, or, if 0deg is not a valid value for the property, the property's minimum value.
    time {{experimental_inline}}{{cssxref("<time>")}}The attribute value is parsed as a CSS {{cssxref("<time>")}} dimension, that is including the unit (e.g. 30.5ms). If it is not valid, that is not a time or out of the range accepted by the CSS property, the default value is used.
    - Leading and trailing spaces are stripped.    		0s, or, if 0s is not a valid value for the property, the property's minimum value.
    s, ms {{experimental_inline}}{{cssxref("<time>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as an{{cssxref("<time>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
    - Leading and trailing spaces are stripped.    		0s, or, if 0s is not a valid value for the property, the property's minimum value.
    frequency {{experimental_inline}}{{cssxref("<frequency>")}}The attribute value is parsed as a CSS {{cssxref("<frequency>")}} dimension, that is including the unit (e.g. 30.5kHz). If it is not valid, that is not a frequency or out of the range accepted by the CSS property, the default value is used.0Hz, or, if 0Hz is not a valid value for the property, the property's minimum value.
    Hz, kHz {{experimental_inline}}{{cssxref("<frequency>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as a {{cssxref("<frequency>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
    - Leading and trailing spaces are stripped.    		0Hz, or, if 0Hz is not a valid value for the property, the property's minimum value.
    % {{experimental_inline}}{{cssxref("<percentage>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as a {{cssxref("<percentage>")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
    - If the given value is used as a length, attr()computes it to an absolute length.
    - Leading and trailing spaces are stripped.    		0%, or, if 0% is not a valid value for the property, the property's minimum value.
    -
    -
    <fallback> {{experimental_inline}}
    -
    The value to be used if the associated attribute is missing or contains an invalid value. The fallback value must be valid where attr() is used, even if it is not used, and must not contain another attr() expression. If attr() is not the sole component value of a property, its <fallback> value must be of the type defined by <type-or-unit>. If not set, CSS will use the default value defined for each <type-or-unit>.
    -
    - -

    形式語法

    - -{{csssyntax}} - -

    範例

    - -
    p::before {
-  content: attr(data-foo) " ";
-}
-
    - -
    <p data-foo="hello">world</p>
-
    - -

    結果

    - -

    {{EmbedLiveSample("Examples", '100%', '80')}}

    - -

    規範

    - - - - - - - - - - - - - - - - - - - - - -
    規範狀態註解
    {{SpecName('CSS3 Values', '#attr-notation', 'attr()')}}{{Spec2('CSS3 Values')}}Added two optional parameters; can be used on all properties; may return other values than {{cssxref("<string>")}}. These changes are experimental and may be dropped during the CR phase if browser support is too small.
    {{SpecName('CSS2.1', 'generate.html#x18', 'attr()')}}{{Spec2('CSS2.1')}}Limited to the {{cssxref("content")}} property; always return a {{cssxref("<string>")}}.
    - -

    瀏覽器相容性

    - -

    {{Compat("css.types.attr")}}

    diff --git a/files/zh-tw/web/css/attr/index.html b/files/zh-tw/web/css/attr/index.html new file mode 100644 index 0000000000..ad7c8a4651 --- /dev/null +++ b/files/zh-tw/web/css/attr/index.html @@ -0,0 +1,201 @@ +--- +title: attr +slug: Web/CSS/attr +translation_of: Web/CSS/attr() +original_slug: Web/CSS/attr() +--- +
    {{CSSRef}}
    + +

    概要

    + +

    attr() CSS 函數使用於樣式取得被選取之元素中特定屬性的值。它也可以用在擬元素選取項(Pseudo-element)，在此情形下，其屬性值來自於擬元素選取項相依的原始元素。

    + +

    attr() 函數可以被用在任何 CSS 屬性，但除了 content 以外的屬性皆屬於實驗階段。

    + +

    語法

    + +
    /* Simple usage */
+attr(data-count);
+attr(title);
+
+/* With type */
+attr(src url);
+attr(data-count number);
+attr(data-width px);
+
+/* With fallback */
+attr(data-count number, 0);
+attr(src url, '');
+attr(data-width px, inherit);
+attr(data-something, 'default');
+
    + +

    值

    + +
    +
    attribute-name
    +
    在 CSS 中參考之 HTML 元素的屬性名稱。
    +
    <type-or-unit> {{experimental_inline}}
    +
    Is a keyword representing either the type of the attribute's value, or its unit, as in HTML some attributes have implicit units. If the use of <type-or-unit> as a value for the given attribute is invalid, the attr() expression will be invalid too. If omitted, it defaults to string. The list of valid values are: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    KeywordAssociated typeCommentDefault value
    string{{cssxref("<string>")}}The attribute value is treated as a CSS {{cssxref("<string>")}}.  It is NOT reparsed, and in particular the characters are used as-is instead of CSS escapes being turned into different characters.An empty string
    color {{experimental_inline}}{{cssxref("<color>")}}The attribute value is parsed as a hash (3- or 6-value hash) or a keyword. It must be a valid CSS {{cssxref("<string>")}} value.
    + Leading and trailing spaces are stripped.    		currentColor
    url {{experimental_inline}}{{cssxref("<uri>")}}The attribute value is parsed as a string that is used inside a CSS url()function.
    + Relative URL are resolved relatively to the original document, not relatively to the style sheet.
    + Leading and trailing spaces are stripped.    		The url about:invalid that points to a non-existent document with a generic error condition.
    integer {{experimental_inline}}{{cssxref("<integer>")}}The attribute value is parsed as a CSS {{cssxref("<integer>")}}. If it is not valid, that is not an integer or out of the range accepted by the CSS property, the default value is used.
    + Leading and trailing spaces are stripped.    		0, or, if 0 is not a valid value for the property, the property's minimum value.
    number {{experimental_inline}}{{cssxref("<number>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
    + Leading and trailing spaces are stripped.    		0, or, if 0 is not a valid value for the property, the property's minimum value.
    length {{experimental_inline}}{{cssxref("<length>")}}The attribute value is parsed as a CSS {{cssxref("<length>")}} dimension, that is including the unit (e.g. 12.5em). If it is not valid, that is not a length or out of the range accepted by the CSS property, the default value is used.
    + If the given unit is a relative length, attr()computes it to an absolute length.
    + Leading and trailing spaces are stripped.    		0, or, if 0 is not a valid value for the property, the property's minimum value.
    em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, or pc {{experimental_inline}}{{cssxref("<length>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as a {{cssxref("<length>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
    + If the given unit is a relative length, attr()computes it to an absolute length.
    + Leading and trailing spaces are stripped.    		0, or, if 0 is not a valid value for the property, the property's minimum value.
    angle {{experimental_inline}}{{cssxref("<angle>")}}The attribute value is parsed as a CSS {{cssxref("<angle>")}} dimension, that is including the unit (e.g. 30.5deg). If it is not valid, that is not an angle or out of the range accepted by the CSS property, the default value is used.
    + Leading and trailing spaces are stripped.    		0deg, or, if 0deg is not a valid value for the property, the property's minimum value.
    deg, grad, rad {{experimental_inline}}{{cssxref("<angle>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as an {{cssxref("<angle>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
    + Leading and trailing spaces are stripped.    		0deg, or, if 0deg is not a valid value for the property, the property's minimum value.
    time {{experimental_inline}}{{cssxref("<time>")}}The attribute value is parsed as a CSS {{cssxref("<time>")}} dimension, that is including the unit (e.g. 30.5ms). If it is not valid, that is not a time or out of the range accepted by the CSS property, the default value is used.
    + Leading and trailing spaces are stripped.    		0s, or, if 0s is not a valid value for the property, the property's minimum value.
    s, ms {{experimental_inline}}{{cssxref("<time>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as an{{cssxref("<time>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
    + Leading and trailing spaces are stripped.    		0s, or, if 0s is not a valid value for the property, the property's minimum value.
    frequency {{experimental_inline}}{{cssxref("<frequency>")}}The attribute value is parsed as a CSS {{cssxref("<frequency>")}} dimension, that is including the unit (e.g. 30.5kHz). If it is not valid, that is not a frequency or out of the range accepted by the CSS property, the default value is used.0Hz, or, if 0Hz is not a valid value for the property, the property's minimum value.
    Hz, kHz {{experimental_inline}}{{cssxref("<frequency>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as a {{cssxref("<frequency>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
    + Leading and trailing spaces are stripped.    		0Hz, or, if 0Hz is not a valid value for the property, the property's minimum value.
    % {{experimental_inline}}{{cssxref("<percentage>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as a {{cssxref("<percentage>")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
    + If the given value is used as a length, attr()computes it to an absolute length.
    + Leading and trailing spaces are stripped.    		0%, or, if 0% is not a valid value for the property, the property's minimum value.
    +
    +
    <fallback> {{experimental_inline}}
    +
    The value to be used if the associated attribute is missing or contains an invalid value. The fallback value must be valid where attr() is used, even if it is not used, and must not contain another attr() expression. If attr() is not the sole component value of a property, its <fallback> value must be of the type defined by <type-or-unit>. If not set, CSS will use the default value defined for each <type-or-unit>.
    +
    + +

    形式語法

    + +{{csssyntax}} + +

    範例

    + +
    p::before {
+  content: attr(data-foo) " ";
+}
+
    + +
    <p data-foo="hello">world</p>
+
    + +

    結果

    + +

    {{EmbedLiveSample("Examples", '100%', '80')}}

    + +

    規範

    + + + + + + + + + + + + + + + + + + + + + +
    規範狀態註解
    {{SpecName('CSS3 Values', '#attr-notation', 'attr()')}}{{Spec2('CSS3 Values')}}Added two optional parameters; can be used on all properties; may return other values than {{cssxref("<string>")}}. These changes are experimental and may be dropped during the CR phase if browser support is too small.
    {{SpecName('CSS2.1', 'generate.html#x18', 'attr()')}}{{Spec2('CSS2.1')}}Limited to the {{cssxref("content")}} property; always return a {{cssxref("<string>")}}.
    + +

    瀏覽器相容性

    + +

    {{Compat("css.types.attr")}}

    diff --git a/files/zh-tw/web/css/transform-function/translate3d()/index.html b/files/zh-tw/web/css/transform-function/translate3d()/index.html deleted file mode 100644 index 149980d71d..0000000000 --- a/files/zh-tw/web/css/transform-function/translate3d()/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: translate3d() -slug: Web/CSS/transform-function/translate3d() -translation_of: Web/CSS/transform-function/translate3d() ---- -
    {{CSSRef}}
    - -

    translate3d() CSS 函式以 3D 場境的方式定位元素。其結果為 {{cssxref("<transform-function>")}} 資料型別。

    - -
    {{EmbedInteractiveExample("pages/css/function-translate3d.html")}}
    - - - -

    這個轉場的特徵是三維向量，其坐標則定義元素的方向該如何移動。

    - -

    語法

    - -
    translate3d(tx, ty, tz)
-
    - -

    數值

    - -
    -
    tx
    -
    其 {{cssxref("<length>")}} 代表平移向量的橫坐標。
    -
    ty
    -
    其 {{cssxref("<length>")}} 代表平移向量的縱坐標。
    -
    tz
    -
    其 {{cssxref("<length>")}} 代表平移向量的 z 分量。數值不能是 {{cssxref("<percentage>")}}：否則，此轉場的屬性無效。
    -
    - - - - - - - - - - - - - - - - - -
    ℝ2 上的笛卡兒座標（Cartesian coordinate）ℝℙ2 上的齊次坐標（homogeneous coordinates）ℝ3 上的笛卡兒座標ℝℙ3 上的齊次坐標
    -

    This transformation applies to the 3D space and can't be represented on the plane.

    -     		A translation is not a linear transformation in ℝ3 and can't be represented using a Cartesian-coordinate matrix. 100tx010ty001tz0001
    - -

    示例

    - -

    使用單軸平移

    - -

    HTML

    - -
    <div>Static</div>
-<div class="moved">Moved</div>
-<div>Static</div>
    - -

    CSS

    - -
    div {
-  width: 60px;
-  height: 60px;
-  background-color: skyblue;
-}
-
-.moved {
-  /* Equivalent to perspective(500px) translateX(10px) */
-  transform: perspective(500px) translate3d(10px, 0, 0px);
-  background-color: pink;
-}
-
    - -

    結果

    - -

    {{EmbedLiveSample("Using_a_single_axis_translation", 250, 250)}}

    - -

    Combining z-axis and x-axis translation

    - -

    HTML

    - -
    <div>Static</div>
-<div class="moved">Moved</div>
-<div>Static</div>
    - -

    CSS

    - -
    div {
-  width: 60px;
-  height: 60px;
-  background-color: skyblue;
-}
-
-.moved {
-  transform: perspective(500px) translate3d(10px, 0, 100px);
-  background-color: pink;
-}
-
    - -

    結果

    - -

    {{EmbedLiveSample("Combining_z-axis_and_x-axis_translation", 250, 250)}}

    - -

    瀏覽器相容性

    - -

    請參見 <transform-function>。

    - -

    參見

    - -
      -
    • {{cssxref("transform")}}
      • -
    • {{cssxref("<transform-function>")}}
      • -
    diff --git a/files/zh-tw/web/css/transform-function/translate3d/index.html b/files/zh-tw/web/css/transform-function/translate3d/index.html new file mode 100644 index 0000000000..02a45a3186 --- /dev/null +++ b/files/zh-tw/web/css/transform-function/translate3d/index.html @@ -0,0 +1,117 @@ +--- +title: translate3d() +slug: Web/CSS/transform-function/translate3d +translation_of: Web/CSS/transform-function/translate3d() +original_slug: Web/CSS/transform-function/translate3d() +--- +
    {{CSSRef}}
    + +

    translate3d() CSS 函式以 3D 場境的方式定位元素。其結果為 {{cssxref("<transform-function>")}} 資料型別。

    + +
    {{EmbedInteractiveExample("pages/css/function-translate3d.html")}}
    + + + +

    這個轉場的特徵是三維向量，其坐標則定義元素的方向該如何移動。

    + +

    語法

    + +
    translate3d(tx, ty, tz)
+
    + +

    數值

    + +
    +
    tx
    +
    其 {{cssxref("<length>")}} 代表平移向量的橫坐標。
    +
    ty
    +
    其 {{cssxref("<length>")}} 代表平移向量的縱坐標。
    +
    tz
    +
    其 {{cssxref("<length>")}} 代表平移向量的 z 分量。數值不能是 {{cssxref("<percentage>")}}：否則，此轉場的屬性無效。
    +
    + + + + + + + + + + + + + + + + + +
    ℝ2 上的笛卡兒座標（Cartesian coordinate）ℝℙ2 上的齊次坐標（homogeneous coordinates）ℝ3 上的笛卡兒座標ℝℙ3 上的齊次坐標
    +

    This transformation applies to the 3D space and can't be represented on the plane.

    +     		A translation is not a linear transformation in ℝ3 and can't be represented using a Cartesian-coordinate matrix. 100tx010ty001tz0001
    + +

    示例

    + +

    使用單軸平移

    + +

    HTML

    + +
    <div>Static</div>
+<div class="moved">Moved</div>
+<div>Static</div>
    + +

    CSS

    + +
    div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  /* Equivalent to perspective(500px) translateX(10px) */
+  transform: perspective(500px) translate3d(10px, 0, 0px);
+  background-color: pink;
+}
+
    + +

    結果

    + +

    {{EmbedLiveSample("Using_a_single_axis_translation", 250, 250)}}

    + +

    Combining z-axis and x-axis translation

    + +

    HTML

    + +
    <div>Static</div>
+<div class="moved">Moved</div>
+<div>Static</div>
    + +

    CSS

    + +
    div {
+  width: 60px;
+  height: 60px;
+  background-color: skyblue;
+}
+
+.moved {
+  transform: perspective(500px) translate3d(10px, 0, 100px);
+  background-color: pink;
+}
+
    + +

    結果

    + +

    {{EmbedLiveSample("Combining_z-axis_and_x-axis_translation", 250, 250)}}

    + +

    瀏覽器相容性

    + +

    請參見 <transform-function>。

    + +

    參見

    + +
      +
    • {{cssxref("transform")}}
      • +
    • {{cssxref("<transform-function>")}}
      • +
    -- cgit v1.2.3-54-g00ecf