From ef6dc2f07bcc7d47193d4d4110e32f8eb87b369b Mon Sep 17 00:00:00 2001 From: MDN Date: Sat, 19 Jun 2021 00:34:51 +0000 Subject: [CRON] sync translated content --- files/de/_redirects.txt | 3 +- files/de/_wikihistory.json | 24 +- .../orphaned/web/css/linear-gradient()/index.html | 333 ++++++++++++++++ files/de/web/css/linear-gradient()/index.html | 332 ---------------- files/es/_redirects.txt | 6 +- files/es/_wikihistory.json | 40 +- .../orphaned/web/css/linear-gradient()/index.html | 262 ++++++++++++ .../orphaned/web/css/radial-gradient()/index.html | 300 ++++++++++++++ files/es/web/css/linear-gradient()/index.html | 261 ------------ files/es/web/css/radial-gradient()/index.html | 299 -------------- files/fr/_redirects.txt | 40 +- files/fr/_wikihistory.json | 176 ++++---- .../orphaned/web/css/conic-gradient()/index.html | 265 ++++++++++++ files/fr/orphaned/web/css/image()/index.html | 176 ++++++++ files/fr/orphaned/web/css/image-set()/index.html | 85 ++++ .../orphaned/web/css/linear-gradient()/index.html | 297 ++++++++++++++ .../orphaned/web/css/radial-gradient()/index.html | 226 +++++++++++ .../web/css/repeating-conic-gradient()/index.html | 208 ++++++++++ .../web/css/repeating-linear-gradient()/index.html | 175 ++++++++ .../web/css/repeating-radial-gradient()/index.html | 166 ++++++++ files/fr/web/css/conic-gradient()/index.html | 264 ------------ files/fr/web/css/image()/index.html | 175 -------- files/fr/web/css/image-set()/index.html | 84 ---- files/fr/web/css/linear-gradient()/index.html | 296 -------------- files/fr/web/css/radial-gradient()/index.html | 225 ----------- .../web/css/repeating-conic-gradient()/index.html | 207 ---------- .../web/css/repeating-linear-gradient()/index.html | 174 -------- .../web/css/repeating-radial-gradient()/index.html | 165 -------- files/ja/_redirects.txt | 32 +- files/ja/_wikihistory.json | 168 ++++---- .../web/api/rtcidentityerrorevent/index.html | 68 ++++ .../orphaned/web/api/rtcidentityevent/index.html | 63 +++ .../orphaned/web/css/conic-gradient()/index.html | 270 +++++++++++++ files/ja/orphaned/web/css/image-set()/index.html | 88 ++++ .../orphaned/web/css/linear-gradient()/index.html | 219 ++++++++++ .../orphaned/web/css/radial-gradient()/index.html | 175 ++++++++ .../web/css/repeating-linear-gradient()/index.html | 167 ++++++++ .../web/css/repeating-radial-gradient()/index.html | 187 +++++++++ files/ja/web/api/rtcidentityerrorevent/index.html | 67 ---- files/ja/web/api/rtcidentityevent/index.html | 62 --- files/ja/web/css/conic-gradient()/index.html | 269 ------------- files/ja/web/css/image-set()/index.html | 87 ---- files/ja/web/css/linear-gradient()/index.html | 218 ---------- files/ja/web/css/radial-gradient()/index.html | 174 -------- .../web/css/repeating-linear-gradient()/index.html | 166 -------- .../web/css/repeating-radial-gradient()/index.html | 186 --------- files/ko/_redirects.txt | 6 +- files/ko/_wikihistory.json | 46 +-- .../rtcpeerconnection/onidentityresult/index.html | 56 +++ .../orphaned/web/css/linear-gradient()/index.html | 205 ++++++++++ .../rtcpeerconnection/onidentityresult/index.html | 55 --- files/ko/web/css/linear-gradient()/index.html | 204 ---------- files/pt-br/_redirects.txt | 11 +- files/pt-br/_wikihistory.json | 52 +-- .../pt-br/orphaned/web/css/image-set()/index.html | 77 ++++ .../orphaned/web/css/radial-gradient()/index.html | 210 ++++++++++ .../web/css/repeating-linear-gradient()/index.html | 154 +++++++ files/pt-br/web/css/image-set()/index.html | 76 ---- files/pt-br/web/css/radial-gradient()/index.html | 209 ---------- .../web/css/repeating-linear-gradient()/index.html | 153 ------- files/ru/_redirects.txt | 12 +- files/ru/_wikihistory.json | 62 +-- files/ru/orphaned/web/css/image-set()/index.html | 79 ++++ .../orphaned/web/css/linear-gradient()/index.html | 213 ++++++++++ .../orphaned/web/css/radial-gradient()/index.html | 170 ++++++++ .../web/css/repeating-linear-gradient()/index.html | 135 +++++++ files/ru/web/css/image-set()/index.html | 78 ---- files/ru/web/css/linear-gradient()/index.html | 212 ---------- files/ru/web/css/radial-gradient()/index.html | 169 -------- .../web/css/repeating-linear-gradient()/index.html | 134 ------- files/zh-cn/_redirects.txt | 12 +- files/zh-cn/_wikihistory.json | 136 +++---- .../orphaned/web/css/linear-gradient()/index.html | 442 +++++++++++++++++++++ .../orphaned/web/css/radial-gradient()/index.html | 192 +++++++++ .../web/css/repeating-linear-gradient()/index.html | 297 ++++++++++++++ .../web/css/repeating-radial-gradient()/index.html | 263 ++++++++++++ files/zh-cn/web/css/linear-gradient()/index.html | 441 -------------------- files/zh-cn/web/css/radial-gradient()/index.html | 191 --------- .../web/css/repeating-linear-gradient()/index.html | 296 -------------- .../web/css/repeating-radial-gradient()/index.html | 262 ------------ files/zh-tw/_redirects.txt | 3 +- files/zh-tw/_wikihistory.json | 14 +- .../orphaned/web/css/radial-gradient()/index.html | 184 +++++++++ files/zh-tw/web/css/radial-gradient()/index.html | 183 --------- 84 files changed, 6845 insertions(+), 6779 deletions(-) create mode 100644 files/de/orphaned/web/css/linear-gradient()/index.html delete mode 100644 files/de/web/css/linear-gradient()/index.html create mode 100644 files/es/orphaned/web/css/linear-gradient()/index.html create mode 100644 files/es/orphaned/web/css/radial-gradient()/index.html delete mode 100644 files/es/web/css/linear-gradient()/index.html delete mode 100644 files/es/web/css/radial-gradient()/index.html create mode 100644 files/fr/orphaned/web/css/conic-gradient()/index.html create mode 100644 files/fr/orphaned/web/css/image()/index.html create mode 100644 files/fr/orphaned/web/css/image-set()/index.html create mode 100644 files/fr/orphaned/web/css/linear-gradient()/index.html create mode 100644 files/fr/orphaned/web/css/radial-gradient()/index.html create mode 100644 files/fr/orphaned/web/css/repeating-conic-gradient()/index.html create mode 100644 files/fr/orphaned/web/css/repeating-linear-gradient()/index.html create mode 100644 files/fr/orphaned/web/css/repeating-radial-gradient()/index.html delete mode 100644 files/fr/web/css/conic-gradient()/index.html delete mode 100644 files/fr/web/css/image()/index.html delete mode 100644 files/fr/web/css/image-set()/index.html delete mode 100644 files/fr/web/css/linear-gradient()/index.html delete mode 100644 files/fr/web/css/radial-gradient()/index.html delete mode 100644 files/fr/web/css/repeating-conic-gradient()/index.html delete mode 100644 files/fr/web/css/repeating-linear-gradient()/index.html delete mode 100644 files/fr/web/css/repeating-radial-gradient()/index.html create mode 100644 files/ja/orphaned/web/api/rtcidentityerrorevent/index.html create mode 100644 files/ja/orphaned/web/api/rtcidentityevent/index.html create mode 100644 files/ja/orphaned/web/css/conic-gradient()/index.html create mode 100644 files/ja/orphaned/web/css/image-set()/index.html create mode 100644 files/ja/orphaned/web/css/linear-gradient()/index.html create mode 100644 files/ja/orphaned/web/css/radial-gradient()/index.html create mode 100644 files/ja/orphaned/web/css/repeating-linear-gradient()/index.html create mode 100644 files/ja/orphaned/web/css/repeating-radial-gradient()/index.html delete mode 100644 files/ja/web/api/rtcidentityerrorevent/index.html delete mode 100644 files/ja/web/api/rtcidentityevent/index.html delete mode 100644 files/ja/web/css/conic-gradient()/index.html delete mode 100644 files/ja/web/css/image-set()/index.html delete mode 100644 files/ja/web/css/linear-gradient()/index.html delete mode 100644 files/ja/web/css/radial-gradient()/index.html delete mode 100644 files/ja/web/css/repeating-linear-gradient()/index.html delete mode 100644 files/ja/web/css/repeating-radial-gradient()/index.html create mode 100644 files/ko/orphaned/web/api/rtcpeerconnection/onidentityresult/index.html create mode 100644 files/ko/orphaned/web/css/linear-gradient()/index.html delete mode 100644 files/ko/web/api/rtcpeerconnection/onidentityresult/index.html delete mode 100644 files/ko/web/css/linear-gradient()/index.html create mode 100644 files/pt-br/orphaned/web/css/image-set()/index.html create mode 100644 files/pt-br/orphaned/web/css/radial-gradient()/index.html create mode 100644 files/pt-br/orphaned/web/css/repeating-linear-gradient()/index.html delete mode 100644 files/pt-br/web/css/image-set()/index.html delete mode 100644 files/pt-br/web/css/radial-gradient()/index.html delete mode 100644 files/pt-br/web/css/repeating-linear-gradient()/index.html create mode 100644 files/ru/orphaned/web/css/image-set()/index.html create mode 100644 files/ru/orphaned/web/css/linear-gradient()/index.html create mode 100644 files/ru/orphaned/web/css/radial-gradient()/index.html create mode 100644 files/ru/orphaned/web/css/repeating-linear-gradient()/index.html delete mode 100644 files/ru/web/css/image-set()/index.html delete mode 100644 files/ru/web/css/linear-gradient()/index.html delete mode 100644 files/ru/web/css/radial-gradient()/index.html delete mode 100644 files/ru/web/css/repeating-linear-gradient()/index.html create mode 100644 files/zh-cn/orphaned/web/css/linear-gradient()/index.html create mode 100644 files/zh-cn/orphaned/web/css/radial-gradient()/index.html create mode 100644 files/zh-cn/orphaned/web/css/repeating-linear-gradient()/index.html create mode 100644 files/zh-cn/orphaned/web/css/repeating-radial-gradient()/index.html delete mode 100644 files/zh-cn/web/css/linear-gradient()/index.html delete mode 100644 files/zh-cn/web/css/radial-gradient()/index.html delete mode 100644 files/zh-cn/web/css/repeating-linear-gradient()/index.html delete mode 100644 files/zh-cn/web/css/repeating-radial-gradient()/index.html create mode 100644 files/zh-tw/orphaned/web/css/radial-gradient()/index.html delete mode 100644 files/zh-tw/web/css/radial-gradient()/index.html (limited to 'files') diff --git a/files/de/_redirects.txt b/files/de/_redirects.txt index 145035671d..e432df5c64 100644 --- a/files/de/_redirects.txt +++ b/files/de/_redirects.txt @@ -618,7 +618,8 @@ /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/linear-gradient /de/docs/Web/CSS/linear-gradient() +/de/docs/Web/CSS/linear-gradient /de/docs/orphaned/Web/CSS/linear-gradient() +/de/docs/Web/CSS/linear-gradient() /de/docs/orphaned/Web/CSS/linear-gradient() /de/docs/Web/CSS/marks /de/docs/orphaned/Web/CSS/@page/marks /de/docs/Web/CSS/mq-boolean /de/docs/Web/CSS/Media_Queries/Using_media_queries /de/docs/Web/CSS/none /de/docs/conflicting/Web/CSS/float diff --git a/files/de/_wikihistory.json b/files/de/_wikihistory.json index d156c97d47..f8653af90c 100644 --- a/files/de/_wikihistory.json +++ b/files/de/_wikihistory.json @@ -7275,18 +7275,6 @@ "Sebastianz" ] }, - "Web/CSS/linear-gradient()": { - "modified": "2020-11-16T08:56:43.415Z", - "contributors": [ - "chrisdavidmills", - "marcus-at-localhost", - "JuSchu", - "sahin", - "Sebastianz", - "prayash", - "auranvesdranor" - ] - }, "Web/CSS/list-style": { "modified": "2019-03-24T00:03:48.208Z", "contributors": [ @@ -14728,6 +14716,18 @@ "Sebastianz" ] }, + "orphaned/Web/CSS/linear-gradient()": { + "modified": "2020-11-16T08:56:43.415Z", + "contributors": [ + "chrisdavidmills", + "marcus-at-localhost", + "JuSchu", + "sahin", + "Sebastianz", + "prayash", + "auranvesdranor" + ] + }, "orphaned/Web/Guide/Events": { "modified": "2019-03-18T21:10:49.464Z", "contributors": [ diff --git a/files/de/orphaned/web/css/linear-gradient()/index.html b/files/de/orphaned/web/css/linear-gradient()/index.html new file mode 100644 index 0000000000..31fd00cad7 --- /dev/null +++ b/files/de/orphaned/web/css/linear-gradient()/index.html @@ -0,0 +1,333 @@ +--- +title: linear-gradient() +slug: orphaned/Web/CSS/linear-gradient() +translation_of: Web/CSS/linear-gradient() +original_slug: Web/CSS/linear-gradient() +--- +

{{ CSSRef() }}

+ +

Die CSS linear-gradient() Funktion erstellt ein {{cssxref("<image>")}} welches aus einem konstanten Farbverlauf besteht. Das Ergebnis dieser Funktion ist ein Objekt des CSS {{cssxref("<gradient>")}} Daten-Typs. Wie jeder andere Farbverlauf, ist der CSS Farbverlauf keine CSS {{cssxref("<color>")}} sondern ein Bild mit keinen spezifischen Dimensionen; Also hat er weder eine natürliche oder bevorzugte Größe, noch ein Größenverhältnis. Seine genaue Größe wird durch die Größe seines zugehörigen Elements bedingt.

+ +

Ein konstanter Farbverlauf wird durch eine Achse, die gradient line, definiert wobei jeder Punkt auf dieser Linie eine andere Farbe hat. Senkrecht zur gradient line stehende Linien haben jeweils eine Farbe, die des jeweiligen Schnittpunks mit der gradient line.

+ +

 

+ +

linear-gradient.pngDie gradient line wird definiert durch einen Winkel und dem Mittelpunkt des Quadrates auf dem das gradienten Bild abgebildet wird. Der Farbverlauf wird durch verschiedene Punkte definiert, dem Startpunkt, dem Endpunkt und den optional dazwischen liegenden Farbunterbrechungspunkten.

+ +

Der Startpunkt ist der Punkt auf der gradient line, auf dem auch die Farbe anfängt. Er liegt genau auf dem Schnittpunkt der gradient line und einer Linie die senkrecht zu der Ecke des Bildes verläuft das im gleichen Quadranten liegt.  

+ +

So ist auch der Endpunkt ein Punkt, an dem einer der beiden ausgesuchten Farben ganz erreicht wird. Er liegt auch genauso auf dem Schnittpunkt zwischen der gradient line und der aus der Ecke im gleichen Quadranten senkrecht verlaufenden Linie , einfacher ist er aber als Punktsymmetrische Spiegelung zum Startpunkt zu sehen, wobei der Spiegelpunkt dabei auf der Mitte des Bildes liegt.  

+ +

Diese ungefähre und komplexe Definition des Start- und Endpunkts führt uns zu einer interessanten Eigenschaft, die manchmal magic corners genannt wird: die benachbarten Ecken der Start- und Endpunkte haben die gleiche Farbe, wie die jeweiligen Start- und Endpunkte.

+ +

Mehr als nur die Farben des Start- und Endpunkts können festgesetzt werden.  Durch das definieren einiger Farbunterbrechungen, kann der Web-Entwickler einen mehr individuellen Übergang zwischen den Start- und den Endpunktfarben erreichen , oder einen mehrfarbigen Farbverlauf erstellen.

+ +

Der Syntax eines konstanten Farberlaufes erlaubt zwar keine Wiederholung von Farbverläufen, aber durch das Setzen von Farbunterbrechungen kann ein ähnlicher Effekt erzielt werden. Für wiederholende Farbverläufe ist die {{ Cssxref("repeating-linear-gradient") }} CSS Eigenschaft geeignet.

+ +

Wenn die Position einer Farbunterbrechung bedingungslos definiert wird, wird er genau auf halben Weg zwischen dem vorhergehenden und dem nachfolgenden Punkt gesetzt.  Außerdem kann die Position genau bestimmt werden, indem ein {{cssxref("<length>")}} oder ein {{cssxref("<percentage>")}} CSS Datentyp benutzt wird.

+ +
Farbverläufe sind als CSS <image> Datentypen definiert; sie können nur dann benutzt werden, wenn auch ein <image> Datentyp benötigt ist. Aus diesem Grund, wird ein linear-gradient nicht bei einer {{ Cssxref("background-color") }} und anderen Eigenschaften, die eine {{cssxref("<color>")}} benötigen,  funktionieren.
+ +

Syntax

+ +
linear-gradient(
+  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
+  \---------------------------------/ \----------------------------/
+    Definition of the gradient line        List of color stops
+
+where <side-or-corner> = [left | right] || [top | bottom]
+  and <color-stop>     = <color> [ <percentage> | <length> ]?
+
+ +
linear-gradient( 45deg, blue, red );           /* A gradient on 45deg axis starting blue and finishing red */
+linear-gradient( to left top, blue, red);      /* A gradient going from the bottom right to the top left starting blue and
+                                                  finishing red */
+
+linear-gradient( 0deg, blue, green 40%, red ); /* A gradient going from the bottom to top, starting blue, being green after 40%
+                                                  and finishing red */
+
+ +

Values

+ +
+
<side-or-corner>
+
Represents the position of the starting-point of the gradient line. It consists of two keywords: the first one indicates the horizontal side, left or right, and the second one the vertical side, top or bottom. The order is not relevant and each of the keyword is optional.
+ The values to top, to bottom, to left and to right are translated into the angles 0deg, 180deg, 270deg, 90deg respectively. The others are translated into an angle that let the starting-point to be in the same quadrant than the described corner and so that the line defined by the starting-point and the corner is perpendicular to the gradient line. That way, the color described by the <color-stop> will exactly apply to the corner point. This is sometimes called the "magic corner" property. The end-point of the gradient line is the symmetrical point of the starting-point on the other direction of the center box.
+
<angle>
+
An angle of direction for the gradient. See {{ cssxref("<angle>") }}.
+
<color-stop>
+
This value is comprised of a {{cssxref("<color>")}} value, followed by an optional stop position (either a percentage or a {{cssxref("<length>")}} along the gradient axis).
+ Rendering of color-stops in CSS gradients follows the same rules as color-stops in SVG gradients.
+
+ +

History of the syntax

+ +

The syntax of linear-gradient has evolved since the first Apple proposal implemented in 2008:

+ +
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
+
+ +

In the original syntax, the same function was used to create both linear and radial gradients.  However, the parameters needed in each case were different, resulting in a syntax that varied with the value of the first parameter.  The situation became more complicated if  other types of gradients, like conical gradients, were added, requiring the use of functions and non-standard or inconsistent css value specifications.  No draft was proposed to the W3C.

+ +

An alternative syntax was proposed and implemented by Mozilla in 2009.  In this syntax, two CSS functions would be required; one for linear gradients, and the other for radial gradients. However, this syntax never shipped in a released product.  A third syntax was proposed.  This third syntax simplified the syntax for linear gradients to:

+ +
-moz-linear-gradient([ [ [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
+
+ +

The new syntax did not require the to(), from()and color-stop() functions, so they were dropped. The order of the top/bottom and left/right keywords was also recognized as unimportant, so Mozilla removed the constraint of having top/bottom defined first. 

+ +

But the new syntax had still had one drawback: it allowed only vertical and horizontal gradients.  Finally, the syntax below was proposed to the W3C.  Following two more changes to solve the limitation on the direction of gradients, it was added to the CSS Images Values and Content Replacement Level 3 draft in 2011.

+ + + +

The color interpolation is also defined as happening in the pre-multiplied color space, in order to prevent non esthetic grey to appear when using color with different opacity. This syntax was implemented, prefixed, by both Webkit, without dropping the original one, and Trident (IE 10):

+ +
linear-gradient( [ [ {{cssxref("<angle>")}} | [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
+
+ +

Unfortunately, the addition of the {{ cssxref("<angle>") }} values to the syntax introduced an incoherence: the angle indicates a destination, but the keywords indicate a starting point.# This was fixed by a new syntax where the keyword are directions too, and preceded by the to keyword.

+ +
linear-gradient([ [ [ {{cssxref("<angle>")}} | to [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
+
+ +

This should be the final syntax.

+ +

A last semantic curiosity still exists between the prefixed variants and the unprefixed proposal. Following the initial Apple proposal, the prefixed variants of the syntax all uses the an {{ cssxref("<angle>") }} defined like polar angles, that is with 0deg representing the East. To be coherent with the rest of CSS, the specification defines an angle with 0deg representing the North. To prevent sites using prefixed version of the property to get suddenly broken, even when adapting to the otherwise forward-compatible final syntax, they keep the original angle definition (0deg = East). They will switch to the correct spec when unprefixing the property. Also, as they aren't incompatible, Gecko supports, prefixed, both the syntax with the to keyword and without. Here again, the syntax without the keyword will be dropped when unprefixing.

+ +

Examples

+ +

Gradient at a 45 degree angle

+ +

Positions can be specified along the gradient axis with a color for each of them, called "color-stops", and the areas between every color-stop smoothly transition between each other. Any one color in the gradient forms a straight line that is perpendicular to the gradient axis. In the below image, the gradient's axis starts from the top-left corner of the div, and is directed at a 45 degree angle. Two color-stops are specified, red and blue.

+ +
<div style="width: 200px; height: 200px;"></div>
+ +
div {
+  background: linear-gradient(135deg, red, blue);
+}
+ +

Result:

+ +

{{ EmbedLiveSample("Gradient_at_a_45_degree_angle") }}

+ +

Gradient that starts at 60% of the gradient line

+ +

Sometimes we don't want a gradient that starts at the beginning of the line, but later. To reach this, add a color stop with same color where you want the gradient to start.

+ +
<div style="width: 200px; height: 200px;"></div>
+ +
div {
+  background: linear-gradient(135deg, red, red 60%, blue);
+}
+ +

Result:

+ +

{{ EmbedLiveSample("Gradient_that_starts_at_60_of_the_gradient_line") }}

+ +

Gradient with multiple color stops

+ +

If the first color-stop does not have a <length> or <percentage>, it defaults to 0%. If the last color-stop does not have a <length> or <percentage>, it defaults to 100%. If a color-stop doesn't have a specified position and it isn't the first or last stop, then it is assigned the position that is half way between the previous stop and next stop.

+ +

Color-stops must be specified in order. After assigning default values to the first and last stops if necessary, if a color-stop has a specified position that is less than the specified position of any color-stop before it in the list, its position is changed to be equal to the largest specified position of any color-stop before it.

+ +
<div>A rainbow made from a gradient</div>
+ +
div {
+  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+}
+
+ +

Result:

+ +

{{ EmbedLiveSample("Gradient_with_multiple_color_stops") }}

+ +

Repeating a linear gradient

+ +

The linear-gradient does not allow repeating gradients. By default, the gradient will stretch to fill the element it is defined on. For this functionality, see {{ Cssxref("repeating-linear-gradient") }}.

+ +

Using transparency

+ +
<div>Linear with transparency</div>
+ +
div {
+  background: linear-gradient(to bottom right, red, rgba(255,0,0,0));
+}
+ +

Result:

+ +

{{ EmbedLiveSample("Using_transparency") }}

+ +

Gradient backgrounds are not affected by {{ Cssxref("background-size") }} if all points and lengths are specified using fixed units (as opposed to percentages or keywords, which are relative to the value of background-size).

+ +

Notes

+ +

If you set the {{ cssxref("background-image") }} property of the {{ HTMLElement("body") }} tag to a linear-gradient, the gradient won't fill the browser screen unless you also set the {{ cssxref("min-height") }} property of the document root (e.g. the {{ HTMLElement("html") }} tag) to 100%.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()') }}{{ Spec2('CSS3 Images') }}Initial definition
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOpera (Presto)Safari
Basic support (on {{ cssxref("background") }} and {{ cssxref("background-image") }}){{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }}[3]
+ {{ CompatGeckoDesktop("16") }}[5]		10.0 (534.16){{ property_prefix("-webkit") }} [2][3]10.0 [1]11.10{{ property_prefix("-o") }} [3]5.1{{ property_prefix("-webkit") }}[2][3]
On {{cssxref("border-radius")}}{{CompatGeckoDesktop("29")}}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
On any other property that accept {{cssxref("<image>")}}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Legacy webkit syntax{{ non-standard_inline() }}{{ CompatNo() }}3{{ property_prefix("-webkit") }} [2]{{ CompatNo() }}{{ CompatNo() }}4.0{{ property_prefix("-webkit") }}[2]
Legacy from syntax (without to){{ non-standard_inline() }}{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} [4]10.0 (534.16){{ property_prefix("-webkit") }} [2]1011.10{{ property_prefix("-o") }}[4]5.1{{ property_prefix("-webkit") }}[2]
Standard syntax (using the to keyword){{CompatGeckoDesktop("16")}}26.0 (537.27)1012.106.1
Interpolation hints (a percent without a color){{CompatGeckoDesktop("36")}}40 27 
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOpera (Presto)Safari
Basic support{{ CompatGeckoMobile("1.9.2") }}{{ property_prefix("-moz") }}[3]
+ {{ CompatGeckoMobile("16") }}[5]		 +

16{{property_prefix("-webkit")}}
+ 26

+ 		10{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Internet Explorer 5.5 through 9.0 supports proprietary filter: progid:DXImageTransform.Microsoft.Gradient() filter.

+ +

[2] WebKit since 528 supports the legacy -webkit-gradient(linear,…) function. As of WebKit 534.16, it also supports the standard gradient syntax. Unlike in Gecko, in legacy WebKit you cannot specify both a position and angle in -webkit-linear-gradient(). You can achieve the same effect by offsetting the color stops.

+ +

[3] Gecko, Opera & Webkit considers {{ cssxref("<angle>") }} to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right. This is different from the latest specification where an angle of 0deg as a direction indicator points to the top.

+ +

[4] Firefox 3.6 and Opera 11.10 implemented, prefixed, an early syntax where the starting corner or side was indicated without the to keyword, and effectively considered as a from position. The to syntax has been added in Firefox 10 and Opera 11.60 , at first without removing the deprecated syntax and translation between the two is trivial:

+ +
linear-gradient(to top left, blue, red);
+ +

is almost the same as:

+ +
-moz-linear-gradient(bottom right, blue, red);
+ +

The legacy syntax, without to, is planned to go away when the prefix is removed.

+ +

[5]Before Firefox 36, Gecko didn't apply gradient on the pre-multiplied color space, leading to shade of grey unexpectedly appearing when used with transparency.

+ +

Cross-browser gradients

+ +

Considering all prefixes above, here is a gradient from pink to green, top to bottom.

+ +
.grad {
+  background-color: #F07575; /* fallback color if gradients are not supported */
+  background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
+  background-image:    -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Firefox (3.6 to 15) */
+  background-image:      -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Opera (11.1 to 12.0) */
+  background-image:         linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */
+}
+
+ +

The -moz- prefixed rules are used for compatibility with older versions (Fx 3.6 to Fx 15). The -webkit-prefix is the only one that still needs to be included for Android 4.3-, iOS up to 6.1, and Safari 6. When using a prefix, do not use 'to'.

+ +

See also

+ + + +

 

diff --git a/files/de/web/css/linear-gradient()/index.html b/files/de/web/css/linear-gradient()/index.html deleted file mode 100644 index 127a082f2a..0000000000 --- a/files/de/web/css/linear-gradient()/index.html +++ /dev/null @@ -1,332 +0,0 @@ ---- -title: linear-gradient() -slug: Web/CSS/linear-gradient() -translation_of: Web/CSS/linear-gradient() ---- -

{{ CSSRef() }}

- -

Die CSS linear-gradient() Funktion erstellt ein {{cssxref("<image>")}} welches aus einem konstanten Farbverlauf besteht. Das Ergebnis dieser Funktion ist ein Objekt des CSS {{cssxref("<gradient>")}} Daten-Typs. Wie jeder andere Farbverlauf, ist der CSS Farbverlauf keine CSS {{cssxref("<color>")}} sondern ein Bild mit keinen spezifischen Dimensionen; Also hat er weder eine natürliche oder bevorzugte Größe, noch ein Größenverhältnis. Seine genaue Größe wird durch die Größe seines zugehörigen Elements bedingt.

- -

Ein konstanter Farbverlauf wird durch eine Achse, die gradient line, definiert wobei jeder Punkt auf dieser Linie eine andere Farbe hat. Senkrecht zur gradient line stehende Linien haben jeweils eine Farbe, die des jeweiligen Schnittpunks mit der gradient line.

- -

 

- -

linear-gradient.pngDie gradient line wird definiert durch einen Winkel und dem Mittelpunkt des Quadrates auf dem das gradienten Bild abgebildet wird. Der Farbverlauf wird durch verschiedene Punkte definiert, dem Startpunkt, dem Endpunkt und den optional dazwischen liegenden Farbunterbrechungspunkten.

- -

Der Startpunkt ist der Punkt auf der gradient line, auf dem auch die Farbe anfängt. Er liegt genau auf dem Schnittpunkt der gradient line und einer Linie die senkrecht zu der Ecke des Bildes verläuft das im gleichen Quadranten liegt.  

- -

So ist auch der Endpunkt ein Punkt, an dem einer der beiden ausgesuchten Farben ganz erreicht wird. Er liegt auch genauso auf dem Schnittpunkt zwischen der gradient line und der aus der Ecke im gleichen Quadranten senkrecht verlaufenden Linie , einfacher ist er aber als Punktsymmetrische Spiegelung zum Startpunkt zu sehen, wobei der Spiegelpunkt dabei auf der Mitte des Bildes liegt.  

- -

Diese ungefähre und komplexe Definition des Start- und Endpunkts führt uns zu einer interessanten Eigenschaft, die manchmal magic corners genannt wird: die benachbarten Ecken der Start- und Endpunkte haben die gleiche Farbe, wie die jeweiligen Start- und Endpunkte.

- -

Mehr als nur die Farben des Start- und Endpunkts können festgesetzt werden.  Durch das definieren einiger Farbunterbrechungen, kann der Web-Entwickler einen mehr individuellen Übergang zwischen den Start- und den Endpunktfarben erreichen , oder einen mehrfarbigen Farbverlauf erstellen.

- -

Der Syntax eines konstanten Farberlaufes erlaubt zwar keine Wiederholung von Farbverläufen, aber durch das Setzen von Farbunterbrechungen kann ein ähnlicher Effekt erzielt werden. Für wiederholende Farbverläufe ist die {{ Cssxref("repeating-linear-gradient") }} CSS Eigenschaft geeignet.

- -

Wenn die Position einer Farbunterbrechung bedingungslos definiert wird, wird er genau auf halben Weg zwischen dem vorhergehenden und dem nachfolgenden Punkt gesetzt.  Außerdem kann die Position genau bestimmt werden, indem ein {{cssxref("<length>")}} oder ein {{cssxref("<percentage>")}} CSS Datentyp benutzt wird.

- -
Farbverläufe sind als CSS <image> Datentypen definiert; sie können nur dann benutzt werden, wenn auch ein <image> Datentyp benötigt ist. Aus diesem Grund, wird ein linear-gradient nicht bei einer {{ Cssxref("background-color") }} und anderen Eigenschaften, die eine {{cssxref("<color>")}} benötigen,  funktionieren.
- -

Syntax

- -
linear-gradient(
-  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
-  \---------------------------------/ \----------------------------/
-    Definition of the gradient line        List of color stops
-
-where <side-or-corner> = [left | right] || [top | bottom]
-  and <color-stop>     = <color> [ <percentage> | <length> ]?
-
- -
linear-gradient( 45deg, blue, red );           /* A gradient on 45deg axis starting blue and finishing red */
-linear-gradient( to left top, blue, red);      /* A gradient going from the bottom right to the top left starting blue and
-                                                  finishing red */
-
-linear-gradient( 0deg, blue, green 40%, red ); /* A gradient going from the bottom to top, starting blue, being green after 40%
-                                                  and finishing red */
-
- -

Values

- -
-
<side-or-corner>
-
Represents the position of the starting-point of the gradient line. It consists of two keywords: the first one indicates the horizontal side, left or right, and the second one the vertical side, top or bottom. The order is not relevant and each of the keyword is optional.
- The values to top, to bottom, to left and to right are translated into the angles 0deg, 180deg, 270deg, 90deg respectively. The others are translated into an angle that let the starting-point to be in the same quadrant than the described corner and so that the line defined by the starting-point and the corner is perpendicular to the gradient line. That way, the color described by the <color-stop> will exactly apply to the corner point. This is sometimes called the "magic corner" property. The end-point of the gradient line is the symmetrical point of the starting-point on the other direction of the center box.
-
<angle>
-
An angle of direction for the gradient. See {{ cssxref("<angle>") }}.
-
<color-stop>
-
This value is comprised of a {{cssxref("<color>")}} value, followed by an optional stop position (either a percentage or a {{cssxref("<length>")}} along the gradient axis).
- Rendering of color-stops in CSS gradients follows the same rules as color-stops in SVG gradients.
-
- -

History of the syntax

- -

The syntax of linear-gradient has evolved since the first Apple proposal implemented in 2008:

- -
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
-
- -

In the original syntax, the same function was used to create both linear and radial gradients.  However, the parameters needed in each case were different, resulting in a syntax that varied with the value of the first parameter.  The situation became more complicated if  other types of gradients, like conical gradients, were added, requiring the use of functions and non-standard or inconsistent css value specifications.  No draft was proposed to the W3C.

- -

An alternative syntax was proposed and implemented by Mozilla in 2009.  In this syntax, two CSS functions would be required; one for linear gradients, and the other for radial gradients. However, this syntax never shipped in a released product.  A third syntax was proposed.  This third syntax simplified the syntax for linear gradients to:

- -
-moz-linear-gradient([ [ [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
-
- -

The new syntax did not require the to(), from()and color-stop() functions, so they were dropped. The order of the top/bottom and left/right keywords was also recognized as unimportant, so Mozilla removed the constraint of having top/bottom defined first. 

- -

But the new syntax had still had one drawback: it allowed only vertical and horizontal gradients.  Finally, the syntax below was proposed to the W3C.  Following two more changes to solve the limitation on the direction of gradients, it was added to the CSS Images Values and Content Replacement Level 3 draft in 2011.

- - - -

The color interpolation is also defined as happening in the pre-multiplied color space, in order to prevent non esthetic grey to appear when using color with different opacity. This syntax was implemented, prefixed, by both Webkit, without dropping the original one, and Trident (IE 10):

- -
linear-gradient( [ [ {{cssxref("<angle>")}} | [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
-
- -

Unfortunately, the addition of the {{ cssxref("<angle>") }} values to the syntax introduced an incoherence: the angle indicates a destination, but the keywords indicate a starting point.# This was fixed by a new syntax where the keyword are directions too, and preceded by the to keyword.

- -
linear-gradient([ [ [ {{cssxref("<angle>")}} | to [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
-
- -

This should be the final syntax.

- -

A last semantic curiosity still exists between the prefixed variants and the unprefixed proposal. Following the initial Apple proposal, the prefixed variants of the syntax all uses the an {{ cssxref("<angle>") }} defined like polar angles, that is with 0deg representing the East. To be coherent with the rest of CSS, the specification defines an angle with 0deg representing the North. To prevent sites using prefixed version of the property to get suddenly broken, even when adapting to the otherwise forward-compatible final syntax, they keep the original angle definition (0deg = East). They will switch to the correct spec when unprefixing the property. Also, as they aren't incompatible, Gecko supports, prefixed, both the syntax with the to keyword and without. Here again, the syntax without the keyword will be dropped when unprefixing.

- -

Examples

- -

Gradient at a 45 degree angle

- -

Positions can be specified along the gradient axis with a color for each of them, called "color-stops", and the areas between every color-stop smoothly transition between each other. Any one color in the gradient forms a straight line that is perpendicular to the gradient axis. In the below image, the gradient's axis starts from the top-left corner of the div, and is directed at a 45 degree angle. Two color-stops are specified, red and blue.

- -
<div style="width: 200px; height: 200px;"></div>
- -
div {
-  background: linear-gradient(135deg, red, blue);
-}
- -

Result:

- -

{{ EmbedLiveSample("Gradient_at_a_45_degree_angle") }}

- -

Gradient that starts at 60% of the gradient line

- -

Sometimes we don't want a gradient that starts at the beginning of the line, but later. To reach this, add a color stop with same color where you want the gradient to start.

- -
<div style="width: 200px; height: 200px;"></div>
- -
div {
-  background: linear-gradient(135deg, red, red 60%, blue);
-}
- -

Result:

- -

{{ EmbedLiveSample("Gradient_that_starts_at_60_of_the_gradient_line") }}

- -

Gradient with multiple color stops

- -

If the first color-stop does not have a <length> or <percentage>, it defaults to 0%. If the last color-stop does not have a <length> or <percentage>, it defaults to 100%. If a color-stop doesn't have a specified position and it isn't the first or last stop, then it is assigned the position that is half way between the previous stop and next stop.

- -

Color-stops must be specified in order. After assigning default values to the first and last stops if necessary, if a color-stop has a specified position that is less than the specified position of any color-stop before it in the list, its position is changed to be equal to the largest specified position of any color-stop before it.

- -
<div>A rainbow made from a gradient</div>
- -
div {
-  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
-}
-
- -

Result:

- -

{{ EmbedLiveSample("Gradient_with_multiple_color_stops") }}

- -

Repeating a linear gradient

- -

The linear-gradient does not allow repeating gradients. By default, the gradient will stretch to fill the element it is defined on. For this functionality, see {{ Cssxref("repeating-linear-gradient") }}.

- -

Using transparency

- -
<div>Linear with transparency</div>
- -
div {
-  background: linear-gradient(to bottom right, red, rgba(255,0,0,0));
-}
- -

Result:

- -

{{ EmbedLiveSample("Using_transparency") }}

- -

Gradient backgrounds are not affected by {{ Cssxref("background-size") }} if all points and lengths are specified using fixed units (as opposed to percentages or keywords, which are relative to the value of background-size).

- -

Notes

- -

If you set the {{ cssxref("background-image") }} property of the {{ HTMLElement("body") }} tag to a linear-gradient, the gradient won't fill the browser screen unless you also set the {{ cssxref("min-height") }} property of the document root (e.g. the {{ HTMLElement("html") }} tag) to 100%.

- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()') }}{{ Spec2('CSS3 Images') }}Initial definition
- -

Browser compatibility

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureFirefox (Gecko)ChromeInternet ExplorerOpera (Presto)Safari
Basic support (on {{ cssxref("background") }} and {{ cssxref("background-image") }}){{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }}[3]
- {{ CompatGeckoDesktop("16") }}[5]		10.0 (534.16){{ property_prefix("-webkit") }} [2][3]10.0 [1]11.10{{ property_prefix("-o") }} [3]5.1{{ property_prefix("-webkit") }}[2][3]
On {{cssxref("border-radius")}}{{CompatGeckoDesktop("29")}}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
On any other property that accept {{cssxref("<image>")}}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Legacy webkit syntax{{ non-standard_inline() }}{{ CompatNo() }}3{{ property_prefix("-webkit") }} [2]{{ CompatNo() }}{{ CompatNo() }}4.0{{ property_prefix("-webkit") }}[2]
Legacy from syntax (without to){{ non-standard_inline() }}{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} [4]10.0 (534.16){{ property_prefix("-webkit") }} [2]1011.10{{ property_prefix("-o") }}[4]5.1{{ property_prefix("-webkit") }}[2]
Standard syntax (using the to keyword){{CompatGeckoDesktop("16")}}26.0 (537.27)1012.106.1
Interpolation hints (a percent without a color){{CompatGeckoDesktop("36")}}40 27 
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureFirefox (Gecko)ChromeInternet ExplorerOpera (Presto)Safari
Basic support{{ CompatGeckoMobile("1.9.2") }}{{ property_prefix("-moz") }}[3]
- {{ CompatGeckoMobile("16") }}[5]		 -

16{{property_prefix("-webkit")}}
- 26

- 		10{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

[1] Internet Explorer 5.5 through 9.0 supports proprietary filter: progid:DXImageTransform.Microsoft.Gradient() filter.

- -

[2] WebKit since 528 supports the legacy -webkit-gradient(linear,…) function. As of WebKit 534.16, it also supports the standard gradient syntax. Unlike in Gecko, in legacy WebKit you cannot specify both a position and angle in -webkit-linear-gradient(). You can achieve the same effect by offsetting the color stops.

- -

[3] Gecko, Opera & Webkit considers {{ cssxref("<angle>") }} to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right. This is different from the latest specification where an angle of 0deg as a direction indicator points to the top.

- -

[4] Firefox 3.6 and Opera 11.10 implemented, prefixed, an early syntax where the starting corner or side was indicated without the to keyword, and effectively considered as a from position. The to syntax has been added in Firefox 10 and Opera 11.60 , at first without removing the deprecated syntax and translation between the two is trivial:

- -
linear-gradient(to top left, blue, red);
- -

is almost the same as:

- -
-moz-linear-gradient(bottom right, blue, red);
- -

The legacy syntax, without to, is planned to go away when the prefix is removed.

- -

[5]Before Firefox 36, Gecko didn't apply gradient on the pre-multiplied color space, leading to shade of grey unexpectedly appearing when used with transparency.

- -

Cross-browser gradients

- -

Considering all prefixes above, here is a gradient from pink to green, top to bottom.

- -
.grad {
-  background-color: #F07575; /* fallback color if gradients are not supported */
-  background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
-  background-image:    -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Firefox (3.6 to 15) */
-  background-image:      -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Opera (11.1 to 12.0) */
-  background-image:         linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */
-}
-
- -

The -moz- prefixed rules are used for compatibility with older versions (Fx 3.6 to Fx 15). The -webkit-prefix is the only one that still needs to be included for Android 4.3-, iOS up to 6.1, and Safari 6. When using a prefix, do not use 'to'.

- -

See also

- - - -

 

diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt index 67f931a4f7..c61090d8d9 100644 --- a/files/es/_redirects.txt +++ b/files/es/_redirects.txt @@ -2002,14 +2002,16 @@ /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/linear-gradient /es/docs/Web/CSS/linear-gradient() +/es/docs/Web/CSS/linear-gradient /es/docs/orphaned/Web/CSS/linear-gradient() +/es/docs/Web/CSS/linear-gradient() /es/docs/orphaned/Web/CSS/linear-gradient() /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/normal /es/docs/conflicting/Web/CSS/font-variant /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/radial-gradient /es/docs/Web/CSS/radial-gradient() +/es/docs/Web/CSS/radial-gradient /es/docs/orphaned/Web/CSS/radial-gradient() +/es/docs/Web/CSS/radial-gradient() /es/docs/orphaned/Web/CSS/radial-gradient() /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/rtl /es/docs/orphaned/Web/CSS/rtl diff --git a/files/es/_wikihistory.json b/files/es/_wikihistory.json index 4be224b7d4..af4a8fec4f 100644 --- a/files/es/_wikihistory.json +++ b/files/es/_wikihistory.json @@ -13130,18 +13130,6 @@ "HenryGR" ] }, - "Web/CSS/linear-gradient()": { - "modified": "2020-11-16T08:56:55.739Z", - "contributors": [ - "chrisdavidmills", - "efrenmartinez", - "rgomez", - "Miguelslo27", - "Sebastianz", - "prayash", - "scarnagot" - ] - }, "Web/CSS/list-style": { "modified": "2019-03-23T23:52:08.020Z", "contributors": [ @@ -13561,14 +13549,6 @@ "arroutado" ] }, - "Web/CSS/radial-gradient()": { - "modified": "2020-11-18T14:42:09.252Z", - "contributors": [ - "chrisdavidmills", - "hectorcano", - "israel-munoz" - ] - }, "Web/CSS/repeat()": { "modified": "2020-11-18T14:44:16.857Z", "contributors": [ @@ -23467,6 +23447,26 @@ "gsalinase" ] }, + "orphaned/Web/CSS/linear-gradient()": { + "modified": "2020-11-16T08:56:55.739Z", + "contributors": [ + "chrisdavidmills", + "efrenmartinez", + "rgomez", + "Miguelslo27", + "Sebastianz", + "prayash", + "scarnagot" + ] + }, + "orphaned/Web/CSS/radial-gradient()": { + "modified": "2020-11-18T14:42:09.252Z", + "contributors": [ + "chrisdavidmills", + "hectorcano", + "israel-munoz" + ] + }, "orphaned/Web/CSS/rtl": { "modified": "2019-01-16T15:48:03.556Z", "contributors": [ diff --git a/files/es/orphaned/web/css/linear-gradient()/index.html b/files/es/orphaned/web/css/linear-gradient()/index.html new file mode 100644 index 0000000000..94289c2695 --- /dev/null +++ b/files/es/orphaned/web/css/linear-gradient()/index.html @@ -0,0 +1,262 @@ +--- +title: linear-gradient +slug: orphaned/Web/CSS/linear-gradient() +tags: + - CSS + - Función CSS + - Imágenes CSS + - Plantilla + - Referencia + - Web + - graficos +translation_of: Web/CSS/linear-gradient() +original_slug: Web/CSS/linear-gradient() +--- +

{{ CSSRef() }}

+ +

Resumen

+ +

La función CSS linear-gradient() crea una imágen la cual representa un degradado lineal de colores. El resultado es un objeto CSS de tipo {{cssxref("<gradient>")}}, que es una forma especial de {{cssxref("<image>")}}.

+ +

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

+ +

Cómo cualquier otro degradado, un degradado lineal no tiene dimensiones intrínsecas; es decir,  no tiene un tamaño natural o predefinido, ni una relación de aspecto. Su tamaño concreto se ajustará al del elemento al cual se le aplica.

+ +

Los gradientes lineales están definidos por un eje, la línea gradiente, donde cada punto representa el inicio de un color diferente. Las líneas perpendiculares a la línea gradiente tienen un único color, para cada punto de la línea gradiente.

+ +

linear-gradient.png

+ +

La línea gradiente está definida por el centro de la caja que contiene la imagen gradiente y por un ángulo. El color del gradiente está definido por diferentes puntos; el punto de inicio, el punto de fin y, en el medio, puntos opcionales de cambio de color.

+ +

El punto de inicio es el punto en la línea gradiente donde empieza el color. Está definido por la intersección entre la línea gradiente y su perpendicular, pasando por la esquina del contenedor en el mismo cuadrante.

+ +

De forma similar, el punto de fin es el punto de la línea gradiente donde se alcanza el final del color. También está definido por la intersección entre la línea gradiente y la línea perpendicular generada por la esquina más cercana del contenedor, pero es más fácil encontrarla como la simetría del punto de inicio, cuando el punto de reflección coincide con el centro de la caja contenedora.

+ +

Estas definiciones algo complejas de los puntos de inicio y fin nos llevan a una propiedad interesante llamda magic corners (esquinas mágicas): La esquina más cercana de los puntos de inicio y fin, tienen el mismo color que su respectivos puntos de inicio y fin.

+ +

Se puede especificar más que solamente los colores de los puntos de inicio y fin. Definiendo colores adicionales en los puntos de cambio en la línea gradiente, el desarrollador web puede crear una transición más personalizada entre los colores de inicio y fin, o generar un gradiente de múltiples colores.

+ +

La sintaxis de la función linear-gradient no permite la repetición de gradientes, pero usando puntos de cambio de color, se puede generar un efecto similar. Para una repetición de gradientes real, puede usar la propiedad CSS {{ Cssxref("repeating-linear-gradient") }}.

+ +

When the position of a color-stop point is implicitly defined, it is placed half-way between the point that precedes it and the one that follows it.  The position can also be explicitly defined by using a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} CSS data type.

+ +
Gradients are defined as CSS <image> data types. Therefore they can be used anywhere in CSS where an image data type is required. But, Gecko currently only supports CSS gradients as values of the {{ Cssxref("background-image") }} property, as well as within the shorthand {{ Cssxref("background") }}.
+For this reason, linear-gradient won't work on {{ Cssxref("background-color") }} and other properties requesting {{cssxref("<color>")}}.
+ +

Syntax

+ +
Formal grammar: linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
+                                  \---------------------------------/ \----------------------------/
+                                    Definition of the gradient line         List of color stops
+
+                      where <side-or-corner> = [left | right] || [top | bottom]
+                        and <color-stop>     = <color> [ <percentage> | <length> ]?
+
+ +
linear-gradient( 45deg, blue, red );           /* A gradient on 45deg axis starting blue and finishing red */
+linear-gradient( to left top, blue, red);      /* A gradient going from the bottom right to the top left starting blue and
+                                                  finishing red */
+
+linear-gradient( 0deg, blue, green 40%, red ); /* A gradient going from the bottom to top, starting blue, being green after 40%
+                                                  and finishing red */
+
+ +

Values

+ +
+
<side-or-corner>
+
Represents the position of the starting-point of the gradient line. It consists of two keywords: the first one indicates the horizontal side, left or right, and the second one the vertical side, top or bottom. The order is not relevant and each of the keyword is optional.
+ The values to top, to bottom, to left and to right are translated into the angles 0deg, 180deg, 270deg, 90deg respectively. The others are translated into an angle that let the starting-point to be in the same quadrant than the described corner and so that the line defined by the starting-point and the corner is perpendicular to the gradient line. That way, the color described by the <color-stop> will exactly apply to the corner point. This is sometimes called the "magic corner" property. The end-point of the gradient line is the symmetrical point of the starting-point on the other direction of the center box.
+
<angle>
+
An angle of direction for the gradient. See {{ cssxref("<angle>") }}.
+
<color-stop>
+
This value is comprised of a {{cssxref("<color>")}} value, followed by an optional stop position (either a percentage or a {{cssxref("<length>")}} along the gradient axis).
+ Rendering of color-stops in CSS gradients follows the same rules as color-stops in SVG gradients.
+
+ +

History of the syntax

+ +

The syntax of linear-gradient has evolved since the first Apple proposal implemented in 2008:

+ +
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
+
+ +

In the original syntax, the same function was used to create both linear and radial gradients.  However, the parameters needed in each case were different, resulting in a syntax that varied with the value of the first parameter.  The situation became more complicated if  other types of gradients, like conical gradients, were added, requiring the use of functions and non-standard or inconsistent css value specifications.  No draft was proposed to the W3C.

+ +

An alternative syntax was proposed and implemented by Mozilla in 2009.  In this syntax, two CSS functions would be required; one for linear gradients, and the other for radial gradients. However, this syntax never shipped in a released product.  A third syntax was proposed.  This third syntax simplified the syntax for linear gradients to:

+ +
-moz-linear-gradient([ [ [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
+
+ +

The new syntax did not require the to(), from()and color-stop() functions, so they were dropped. The order of the top/bottom and left/right keywords was also recognized as unimportant, so Mozilla removed the constraint of having top/bottom defined first. 

+ +

But the new syntax had still had one drawback: it allowed only vertical and horizontal gradients.  Finally, the syntax below was proposed to the W3C.  Following two more changes to solve the limitation on the direction of gradients, it was added to the CSS Images Values and Content Replacement Level 3 draft in 2011.

+ + + +

The color interpolation is also defined as happening in the pre-multiplied color space, in order to prevent non esthetic grey to appear when using color with different opacity. This syntax was implemented, prefixed, by both Webkit, without dropping the original one, and Trident (IE 10):

+ +
linear-gradient( [ [ {{cssxref("<angle>")}} | [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
+
+ +

Unfortunately, the addition of the {{ cssxref("<angle>") }} values to the syntax introduced an incoherence: the angle indicates a destination, but the keywords indicate a starting point.# This was fixed by a new syntax where the keyword are directions too, and preceded by the to keyword.

+ +
linear-gradient([ [ [ {{cssxref("<angle>")}} | to [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
+
+ +

This should be the final syntax.

+ +

A last semantic curiosity still exists between the prefixed variants and the unprefixed proposal. Following the initial Apple proposal, the prefixed variants of the syntax all uses the an {{ cssxref("<angle>") }} defined like polar angles, that is with 0deg representing the East. To be coherent with the rest of CSS, the specification defines an angle with 0deg representing the North. To prevent sites using prefixed version of the property to get suddenly broken, even when adapting to the otherwise forward-compatible final syntax, they keep the original angle definition (0deg = East). They will switch to the correct spec when unprefixing the property. Also, as they aren't incompatible, Gecko supports, prefixed, both the syntax with the to keyword and without. Here again, the syntax without the keyword will be dropped when unprefixing.

+ +

Examples

+ +

Gradient at a 45 degree angle

+ +

Positions can be specified along the gradient axis with a color for each of them, called "color-stops", and the areas between every color-stop smoothly transition between each other. Any one color in the gradient forms a straight line that is perpendicular to the gradient axis. In the below image, the gradient's axis starts from the top-left corner of the div, and is directed at a 45 degree angle. Two color-stops are specified, red and blue.

+ +

lingradexample.png

+ +

Gradient with multiple color stops

+ +

If the first color-stop does not have a <length> or <percentage>, it defaults to 0%. If the last color-stop does not have a <length> or <percentage>, it defaults to 100%. If a color-stop doesn't have a specified position and it isn't the first or last stop, then it is assigned the position that is half way between the previous stop and next stop.

+ +

Color-stops must be specified in order. After assigning default values to the first and last stops if necessary, if a color-stop has a specified position that is less than the specified position of any color-stop before it in the list, its position is changed to be equal to the largest specified position of any color-stop before it.

+ +
A rainbow made from a gradient
+ +
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+
+ +

Repeating a linear gradient

+ +

The linear-gradient does not allow repeating gradients. By default, the gradient will stretch to fill the element it is defined on. For this functionality, see {{ Cssxref("repeating-linear-gradient") }}.

+ +

Using transparency

+ +
Linear with transparency
+ +
background-image: linear-gradient(to bottom right, red, rgba(255,0,0,0));
+ +

Gradient backgrounds are not affected by {{ Cssxref("background-size") }} if all points and lengths are specified using fixed units (as opposed to percentages or keywords, which are relative to the value of background-size).

+ +

Notes

+ +

If you set the {{ cssxref("background-image") }} property of the {{ HTMLElement("body") }} tag to a linear-gradient, the gradient won't fill the browser screen unless you also set the {{ cssxref("min-height") }} property of the document root (e.g. the {{ HTMLElement("html") }} tag) to 100%.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Images', '#linear-gradient-type', 'linear-gradient()') }}{{ Spec2('CSS3 Images') }}
+ +

Browser compatibility

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOpera (Presto)Safari
Basic support(on {{ cssxref("background") }} and {{ cssxref("background-image") }}){{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }}[3]
+ {{ CompatGeckoDesktop("16") }}		10.0 (534.16){{ property_prefix("-webkit") }} [2][3]10.0 [1]11.10{{ property_prefix("-o") }} [3]5.1{{ property_prefix("-webkit") }}[2][3]
On any properties that accept {{cssxref("<image>")}}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}
Legacy webkit syntax{{ non-standard_inline() }}{{ CompatNo() }}3{{ property_prefix("-webkit") }} [2]{{ CompatNo() }}{{ CompatNo() }}4.0{{ property_prefix("-webkit") }}[2]
Legacy from syntax (without to){{ non-standard_inline() }}{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} [4]10.0 (534.16){{ property_prefix("-webkit") }} [2]1011.10{{ property_prefix("-o") }}[4]5.1{{ property_prefix("-webkit") }}[2]
Standard syntax (using the to keyword)1626.0 (537.27)1012.106.1
+ +

[1] Internet Explorer 5.5 through 9.0 supports proprietary filter: progid:DXImageTransform.Microsoft.Gradient() filter.

+ +

[2] WebKit since 528 supports the legacy -webkit-gradient(linear,…) function. As of WebKit 534.16, it also supports the standard gradient syntax. Unlike in Gecko, in legacy WebKit you cannot specify both a position and angle in -webkit-linear-gradient(). You can achieve the same effect by offsetting the color stops.

+ +

[3] Gecko, Opera & Webkit considers {{ cssxref("<angle>") }} to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right. This is different from the latest specification where an angle of 0deg as a direction indicator points to the top.

+ +

[4] Firefox 3.6 and Opera 11.10 implemented, prefixed, an early syntax where the starting corner or side was indicated without the to keyword, and effectively considered as a from position. The to syntax has been added in Firefox 10 and Opera 11.60 , at first without removing the deprecated syntax and translation between the two is trivial:

+ +
linear-gradient(to top left, blue, red);
+ +

is almost the same as:

+ +
-moz-linear-gradient(bottom right, blue, red);
+ +

The legacy syntax, without to, is planned to go away when the prefix is removed.

+ +

Cross-browser gradients

+ +

Considering all prefixes above, here is a gradient from pink to green, top to bottom.

+ +
.grad {
+  background-color: #F07575; /* fallback color if gradients are not supported */
+  background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
+  background-image:    -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Firefox (3.6 to 15) */
+  background-image:      -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Opera (11.1 to 12.0) */
+  background-image:         linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */
+}
+
+ +

The -moz- prefixed rules are used for compatibility with older versions (Fx 3.6 to Fx 15). The -webkit-prefix is the only one that still needs to be included for Android 4.3-, iOS up to 6.1, and Safari 6. When using a prefix, do not use 'to'.

+ +

See also

+ + diff --git a/files/es/orphaned/web/css/radial-gradient()/index.html b/files/es/orphaned/web/css/radial-gradient()/index.html new file mode 100644 index 0000000000..bb61f0c811 --- /dev/null +++ b/files/es/orphaned/web/css/radial-gradient()/index.html @@ -0,0 +1,300 @@ +--- +title: radial-gradient() +slug: orphaned/Web/CSS/radial-gradient() +tags: + - Función CSS + - Gráficos(2) + - Imagen CSS +translation_of: Web/CSS/radial-gradient() +original_slug: Web/CSS/radial-gradient() +--- +

{{CSSRef}}

+ +

La función CSS radial-gradient() crea una imagen ({{cssxref("<image>")}}) que representa un gradiente (degradado) de colores, generando un radio desde un origen, el centro (center) del gradiente. El resultado de esta función es un objeto de tipo de dato CSS {{cssxref("<gradient>")}}.

+ +

Los gradientes radiales son definidos por su centro (center), el contorno y posición de la figura resultante y los puntos de definición de color (color stops). El gradiente radial consiste, desde su centro hasta su figura resultante y potencialmente más allá, en figuras concénctricas sucesivas de escala uniforme, idénticas en su figura final. Los stops de color son posicionados en un rayo de gradiente virtual que va horizontalmente desde el centro hacia la derecha. La proporción para posicionar los stops de colores es relativa a la intersección entre la figura final y su rayo de gradiente, representando el 100%. Cada figura es monocolor, y definida por el color del rayo de gradiente al que cruza.

+ +

Las figuras resultantes solo pueden ser círculos (circle) o elipses (ellipse).

+ +

Como cualquier otro gradiente, un gradiente radial CSS no es un {{cssxref("<color>")}} CSS, sino una imagen sin dimensiones intrínsecas, es decir, no tiene un tamaño natural o predefinido, ni radio. Su tamaño concreto coincidirá con el del elemento al que se aplica.

+ +

La función radial-gradient no permite gradientes repetidos. Para dicha funcionalidad, use la función CSS {{Cssxref("repeating-radial-gradient")}}.

+ +

Sintaxis

+ +
// Definición de la figura
+radial-gradient( circle, … )                /* Sinónimo de radial-gradient( circle farthest-corner, … ) */
+radial-gradient( ellipse, … )               /* Sinónimo de radial-gradient( ellipse farthest-corner, … ) */
+radial-gradient( <extent-keyword>, … )      /* Dibuja un círculo */
+radial-gradient( circle radius, … )         /* Un círculo centrado con longitud dada. Puede ser un porcentaje */
+radial-gradient( ellipse x-axis y-axis, … ) /* Los dos ejes semi-mayores son indicados, horizontal y después vertical */
+
+// Definición de la posición de la figura
+radial-gradient ( … at <position>, … )
+
+// Definición de los stops de colores
+radial-gradient ( …, <color-stop>, … )
+radial-gradient ( …, <color-stop>, <color-stop> )
+ +

Valores

+ +
+
<position>
+
Una posición ({{cssxref("<position>")}}), interpretada de la misma forma que {{Cssxref("background-position")}} o {{Cssxref("transform-origin")}}. Si es omitida, su valor predeterminado es center.
+
<shape>
+
La figura del gradiente. Puede ser un valor circle (que indica que la figura del gradiente es un círculo con radio constante) o ellipse (que indica que la figura del gradiente es una elipse alineada por ejes). El valor predeterminado es ellipse.
+
<color-stop>
+
Representa un color fijo en una posición precisa, su valor está compuesto por un valor {{cssxref("<color>")}}, seguido por una posición opcional (que puede ser de tipo {{cssxref("<percentage>")}} o {{cssxref("<length>")}} a lo largo del rayo de gradiente). Un porcentaje de 0%, o una longitud de 0, representan el centro del gradiente, mientras que el valor de 100% representa la intersección de la figura final con el rayo virtual de gradiente. Los valores porcentuales internos son posicionados linealmente en el rayo gradiente.
+
<extent-keyword>
+
Valores clave que describen la longitud de la figura resultante. Los valores posibles son:
+
+ + + + + + + + + + + + + + + + + + + + + + + +
ConstanteDescripción
closest-sideLa figura resultante coincide con el lado de la caja más cercano al centro (para los círculos) o coincide con los lados vertical y horizontal más cercanos al centro (en caso de elipses).
closest-cornerEl tamaño de la figura resultante coincide exactamente con la esquina de la caja más cercana desde el centro del gradiente.
farthest-sideSimilar a closest-side, excepto que el tamaño de la figura resultante coincide con el lado de la caja más lejano al centro (o los lados vertical y horizontal).
farthest-cornerEl tamaño de la figura resultante coincide exactamente con la esquina de la caja más lejana al centro del gradiente.
+ Los borradores anteriores del estándar incluyeron otras palabras clave (cover y contain) como sinónimos de los estándares farthest-corner y closest-side respectivamente. Use solo las palabras clave estándar, pues algunas implementaciones ya no soportan las variantes anteriores.
+
+ +

Sintaxis formal

+ +
radial-gradient(
+  [ [ circle || {{cssxref("<length>")}} ]                         [ at {{cssxref("<position>")}} ]? , |
+    [ ellipse || [ <length> | {{cssxref("<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> ]?
+
+ +

Ejemplo 1

+ +

Usando el siguiente código CSS podemos obtener un fondo de elipse en la esquina más lejana (farthest-corner) a 45px 45px, cambiando el color de turquesa (#00FFFF), a blanco, a azul (#0000FF):

+ +
body {
+  width: 100vh;
+  height: 100vh;
+  background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);
+}
+ +

{{ EmbedLiveSample('Example_1') }}

+ +

Ejemplo 2

+ +

Este código generará un fondo de elipse in la esquina más lejana (farthest-corner) a 470px 45px, cambiando el color de amarillo (#FFFF80), a marrón pálido, a azul pálido (#E6E6FF):

+ +
body {
+  width: 100vh;
+  height: 100vh;
+  background-image: radial-gradient(ellipse farthest-corner at 470px 47px , #FFFF80 20%, rgba(204, 153, 153, 0.4) 30%, #E6E6FF 60%);
+}
+ +

{{ EmbedLiveSample('Example_2') }}

+ +

Ejemplo 3

+ +

Este código generará un fondo de elipse en la esquina más lejana (farthest-corner) a 45px 45px, cambiando el color de rojo (#FF0000) a azul (#0000FF):

+ +
body {
+  width: 100vh;
+  height: 100vh;
+  background-image: radial-gradient(farthest-corner at 45px 45px , #FF0000 0%, #0000FF 100%);
+}
+ +

{{ EmbedLiveSample('Example_3') }}

+ +

Ejemplo 4

+ +

Este código producirá un círculo difuso con radio de 16px:

+ +
body {
+  width: 100vh;
+  height: 100vh;
+  background-image:  radial-gradient(16px at 60px 50% , #000000 0%, #000000 14px, rgba(0, 0, 0, 0.3) 18px, rgba(0, 0, 0, 0) 19px);
+}
+ +

{{ EmbedLiveSample('Example_4') }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()')}}{{Spec2('CSS3 Images')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico (en {{cssxref("background")}} y {{cssxref("background-image")}}){{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}[1]
+ {{CompatGeckoDesktop("16")}}		10.0 (534.16){{property_prefix("-webkit")}}[2]10.0[3]11.60{{property_prefix("-o")}}5.1{{property_prefix("-webkit")}}[2]
En {{cssxref("border-image")}}{{CompatGeckoDesktop("29")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
En cualquier propiedad que acepte el tipo {{cssxref("<image>")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Sintaxis anterior de webkit {{non-standard_inline}}{{CompatNo}}3{{property_prefix("-webkit")}}[2]{{CompatNo}}{{CompatNo}}4.0{{property_prefix("-webkit")}}[2]
Sintaxis de at (sintaxis estándar final){{CompatGeckoDesktop("10")}}{{property_prefix("-moz")}}[1]
+ {{CompatGeckoDesktop("16")}}[4]		2610.011.60{{property_prefix("-o")}}[2]
+ 2.12		{{CompatNo}}
Consejos de interpolación (un porcentaje sin color){{CompatGeckoDesktop("36")}}40 27 
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico (en {{cssxref("background")}} y {{cssxref("background-image")}}){{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.2")}}{{property_prefix("-moz")}}[1]
+ {{CompatGeckoMobile("16")}}		10{{CompatVersionUnknown}}{{CompatVersionUnknown}}
En {{cssxref("border-image")}}{{CompatVersionUnknown}}{{CompatGeckoMobile("29")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
En cualquier propiedad que acepte el tipo {{cssxref("<image>")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Sintaxis anterior de webkit {{non-standard_inline}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Sintaxis de at (sintaxis estándar final){{CompatUnknown}}{{CompatGeckoMobile("10")}}{{property_prefix("-moz")}}[1]
+ {{CompatGeckoMobile("16")}}		10{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Implementado en Firefox 3.6 usando prefijo, y sintaxis anterior. Antes de Firefox 36, Gecko no aplicaba gradientes en espacios de color premultiplicado, provocando que apareciera una sombra gris cuando se usaba con transparencia. Desde Firefox 42, la versión con prefijo puede ser deshabilitada estableciendo la opción layout.css.prefixes.gradients en false.

+ +

[2] Implementado en WebKit usando prefijo, y sintaxis anterior. WebKit desde la versión 528 soporta la función anterior -webkit-gradient(radial,…). Véase también su soporte actual para gradientes radiales.

+ +

[3] Internet Explorer 5.5 a 9.0 soporta la propiedad exclusiva filter: progid:DXImageTransform.Microsoft.Gradient() filter.

+ +

[4] Además del soporte sin prefijo, Gecko 44.0 {{geckoRelease("44.0")}} incluye soporte para una versión con prefijo -webkit de la función, por razones de compatibilidad, dentro de la opción layout.css.prefixes.webkit, con valor false de forma predeterminada. Desde Gecko 49.0 {{geckoRelease("49.0")}} el valor predeterminado de esa opción es true.

+ +

Véase también

+ + diff --git a/files/es/web/css/linear-gradient()/index.html b/files/es/web/css/linear-gradient()/index.html deleted file mode 100644 index 4a68a3b365..0000000000 --- a/files/es/web/css/linear-gradient()/index.html +++ /dev/null @@ -1,261 +0,0 @@ ---- -title: linear-gradient -slug: Web/CSS/linear-gradient() -tags: - - CSS - - Función CSS - - Imágenes CSS - - Plantilla - - Referencia - - Web - - graficos -translation_of: Web/CSS/linear-gradient() ---- -

{{ CSSRef() }}

- -

Resumen

- -

La función CSS linear-gradient() crea una imágen la cual representa un degradado lineal de colores. El resultado es un objeto CSS de tipo {{cssxref("<gradient>")}}, que es una forma especial de {{cssxref("<image>")}}.

- -

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

- -

Cómo cualquier otro degradado, un degradado lineal no tiene dimensiones intrínsecas; es decir,  no tiene un tamaño natural o predefinido, ni una relación de aspecto. Su tamaño concreto se ajustará al del elemento al cual se le aplica.

- -

Los gradientes lineales están definidos por un eje, la línea gradiente, donde cada punto representa el inicio de un color diferente. Las líneas perpendiculares a la línea gradiente tienen un único color, para cada punto de la línea gradiente.

- -

linear-gradient.png

- -

La línea gradiente está definida por el centro de la caja que contiene la imagen gradiente y por un ángulo. El color del gradiente está definido por diferentes puntos; el punto de inicio, el punto de fin y, en el medio, puntos opcionales de cambio de color.

- -

El punto de inicio es el punto en la línea gradiente donde empieza el color. Está definido por la intersección entre la línea gradiente y su perpendicular, pasando por la esquina del contenedor en el mismo cuadrante.

- -

De forma similar, el punto de fin es el punto de la línea gradiente donde se alcanza el final del color. También está definido por la intersección entre la línea gradiente y la línea perpendicular generada por la esquina más cercana del contenedor, pero es más fácil encontrarla como la simetría del punto de inicio, cuando el punto de reflección coincide con el centro de la caja contenedora.

- -

Estas definiciones algo complejas de los puntos de inicio y fin nos llevan a una propiedad interesante llamda magic corners (esquinas mágicas): La esquina más cercana de los puntos de inicio y fin, tienen el mismo color que su respectivos puntos de inicio y fin.

- -

Se puede especificar más que solamente los colores de los puntos de inicio y fin. Definiendo colores adicionales en los puntos de cambio en la línea gradiente, el desarrollador web puede crear una transición más personalizada entre los colores de inicio y fin, o generar un gradiente de múltiples colores.

- -

La sintaxis de la función linear-gradient no permite la repetición de gradientes, pero usando puntos de cambio de color, se puede generar un efecto similar. Para una repetición de gradientes real, puede usar la propiedad CSS {{ Cssxref("repeating-linear-gradient") }}.

- -

When the position of a color-stop point is implicitly defined, it is placed half-way between the point that precedes it and the one that follows it.  The position can also be explicitly defined by using a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} CSS data type.

- -
Gradients are defined as CSS <image> data types. Therefore they can be used anywhere in CSS where an image data type is required. But, Gecko currently only supports CSS gradients as values of the {{ Cssxref("background-image") }} property, as well as within the shorthand {{ Cssxref("background") }}.
-For this reason, linear-gradient won't work on {{ Cssxref("background-color") }} and other properties requesting {{cssxref("<color>")}}.
- -

Syntax

- -
Formal grammar: linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
-                                  \---------------------------------/ \----------------------------/
-                                    Definition of the gradient line         List of color stops
-
-                      where <side-or-corner> = [left | right] || [top | bottom]
-                        and <color-stop>     = <color> [ <percentage> | <length> ]?
-
- -
linear-gradient( 45deg, blue, red );           /* A gradient on 45deg axis starting blue and finishing red */
-linear-gradient( to left top, blue, red);      /* A gradient going from the bottom right to the top left starting blue and
-                                                  finishing red */
-
-linear-gradient( 0deg, blue, green 40%, red ); /* A gradient going from the bottom to top, starting blue, being green after 40%
-                                                  and finishing red */
-
- -

Values

- -
-
<side-or-corner>
-
Represents the position of the starting-point of the gradient line. It consists of two keywords: the first one indicates the horizontal side, left or right, and the second one the vertical side, top or bottom. The order is not relevant and each of the keyword is optional.
- The values to top, to bottom, to left and to right are translated into the angles 0deg, 180deg, 270deg, 90deg respectively. The others are translated into an angle that let the starting-point to be in the same quadrant than the described corner and so that the line defined by the starting-point and the corner is perpendicular to the gradient line. That way, the color described by the <color-stop> will exactly apply to the corner point. This is sometimes called the "magic corner" property. The end-point of the gradient line is the symmetrical point of the starting-point on the other direction of the center box.
-
<angle>
-
An angle of direction for the gradient. See {{ cssxref("<angle>") }}.
-
<color-stop>
-
This value is comprised of a {{cssxref("<color>")}} value, followed by an optional stop position (either a percentage or a {{cssxref("<length>")}} along the gradient axis).
- Rendering of color-stops in CSS gradients follows the same rules as color-stops in SVG gradients.
-
- -

History of the syntax

- -

The syntax of linear-gradient has evolved since the first Apple proposal implemented in 2008:

- -
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
-
- -

In the original syntax, the same function was used to create both linear and radial gradients.  However, the parameters needed in each case were different, resulting in a syntax that varied with the value of the first parameter.  The situation became more complicated if  other types of gradients, like conical gradients, were added, requiring the use of functions and non-standard or inconsistent css value specifications.  No draft was proposed to the W3C.

- -

An alternative syntax was proposed and implemented by Mozilla in 2009.  In this syntax, two CSS functions would be required; one for linear gradients, and the other for radial gradients. However, this syntax never shipped in a released product.  A third syntax was proposed.  This third syntax simplified the syntax for linear gradients to:

- -
-moz-linear-gradient([ [ [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
-
- -

The new syntax did not require the to(), from()and color-stop() functions, so they were dropped. The order of the top/bottom and left/right keywords was also recognized as unimportant, so Mozilla removed the constraint of having top/bottom defined first. 

- -

But the new syntax had still had one drawback: it allowed only vertical and horizontal gradients.  Finally, the syntax below was proposed to the W3C.  Following two more changes to solve the limitation on the direction of gradients, it was added to the CSS Images Values and Content Replacement Level 3 draft in 2011.

- - - -

The color interpolation is also defined as happening in the pre-multiplied color space, in order to prevent non esthetic grey to appear when using color with different opacity. This syntax was implemented, prefixed, by both Webkit, without dropping the original one, and Trident (IE 10):

- -
linear-gradient( [ [ {{cssxref("<angle>")}} | [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
-
- -

Unfortunately, the addition of the {{ cssxref("<angle>") }} values to the syntax introduced an incoherence: the angle indicates a destination, but the keywords indicate a starting point.# This was fixed by a new syntax where the keyword are directions too, and preceded by the to keyword.

- -
linear-gradient([ [ [ {{cssxref("<angle>")}} | to [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
-
- -

This should be the final syntax.

- -

A last semantic curiosity still exists between the prefixed variants and the unprefixed proposal. Following the initial Apple proposal, the prefixed variants of the syntax all uses the an {{ cssxref("<angle>") }} defined like polar angles, that is with 0deg representing the East. To be coherent with the rest of CSS, the specification defines an angle with 0deg representing the North. To prevent sites using prefixed version of the property to get suddenly broken, even when adapting to the otherwise forward-compatible final syntax, they keep the original angle definition (0deg = East). They will switch to the correct spec when unprefixing the property. Also, as they aren't incompatible, Gecko supports, prefixed, both the syntax with the to keyword and without. Here again, the syntax without the keyword will be dropped when unprefixing.

- -

Examples

- -

Gradient at a 45 degree angle

- -

Positions can be specified along the gradient axis with a color for each of them, called "color-stops", and the areas between every color-stop smoothly transition between each other. Any one color in the gradient forms a straight line that is perpendicular to the gradient axis. In the below image, the gradient's axis starts from the top-left corner of the div, and is directed at a 45 degree angle. Two color-stops are specified, red and blue.

- -

lingradexample.png

- -

Gradient with multiple color stops

- -

If the first color-stop does not have a <length> or <percentage>, it defaults to 0%. If the last color-stop does not have a <length> or <percentage>, it defaults to 100%. If a color-stop doesn't have a specified position and it isn't the first or last stop, then it is assigned the position that is half way between the previous stop and next stop.

- -

Color-stops must be specified in order. After assigning default values to the first and last stops if necessary, if a color-stop has a specified position that is less than the specified position of any color-stop before it in the list, its position is changed to be equal to the largest specified position of any color-stop before it.

- -
A rainbow made from a gradient
- -
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
-
- -

Repeating a linear gradient

- -

The linear-gradient does not allow repeating gradients. By default, the gradient will stretch to fill the element it is defined on. For this functionality, see {{ Cssxref("repeating-linear-gradient") }}.

- -

Using transparency

- -
Linear with transparency
- -
background-image: linear-gradient(to bottom right, red, rgba(255,0,0,0));
- -

Gradient backgrounds are not affected by {{ Cssxref("background-size") }} if all points and lengths are specified using fixed units (as opposed to percentages or keywords, which are relative to the value of background-size).

- -

Notes

- -

If you set the {{ cssxref("background-image") }} property of the {{ HTMLElement("body") }} tag to a linear-gradient, the gradient won't fill the browser screen unless you also set the {{ cssxref("min-height") }} property of the document root (e.g. the {{ HTMLElement("html") }} tag) to 100%.

- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS3 Images', '#linear-gradient-type', 'linear-gradient()') }}{{ Spec2('CSS3 Images') }}
- -

Browser compatibility

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureFirefox (Gecko)ChromeInternet ExplorerOpera (Presto)Safari
Basic support(on {{ cssxref("background") }} and {{ cssxref("background-image") }}){{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }}[3]
- {{ CompatGeckoDesktop("16") }}		10.0 (534.16){{ property_prefix("-webkit") }} [2][3]10.0 [1]11.10{{ property_prefix("-o") }} [3]5.1{{ property_prefix("-webkit") }}[2][3]
On any properties that accept {{cssxref("<image>")}}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}
Legacy webkit syntax{{ non-standard_inline() }}{{ CompatNo() }}3{{ property_prefix("-webkit") }} [2]{{ CompatNo() }}{{ CompatNo() }}4.0{{ property_prefix("-webkit") }}[2]
Legacy from syntax (without to){{ non-standard_inline() }}{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} [4]10.0 (534.16){{ property_prefix("-webkit") }} [2]1011.10{{ property_prefix("-o") }}[4]5.1{{ property_prefix("-webkit") }}[2]
Standard syntax (using the to keyword)1626.0 (537.27)1012.106.1
- -

[1] Internet Explorer 5.5 through 9.0 supports proprietary filter: progid:DXImageTransform.Microsoft.Gradient() filter.

- -

[2] WebKit since 528 supports the legacy -webkit-gradient(linear,…) function. As of WebKit 534.16, it also supports the standard gradient syntax. Unlike in Gecko, in legacy WebKit you cannot specify both a position and angle in -webkit-linear-gradient(). You can achieve the same effect by offsetting the color stops.

- -

[3] Gecko, Opera & Webkit considers {{ cssxref("<angle>") }} to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right. This is different from the latest specification where an angle of 0deg as a direction indicator points to the top.

- -

[4] Firefox 3.6 and Opera 11.10 implemented, prefixed, an early syntax where the starting corner or side was indicated without the to keyword, and effectively considered as a from position. The to syntax has been added in Firefox 10 and Opera 11.60 , at first without removing the deprecated syntax and translation between the two is trivial:

- -
linear-gradient(to top left, blue, red);
- -

is almost the same as:

- -
-moz-linear-gradient(bottom right, blue, red);
- -

The legacy syntax, without to, is planned to go away when the prefix is removed.

- -

Cross-browser gradients

- -

Considering all prefixes above, here is a gradient from pink to green, top to bottom.

- -
.grad {
-  background-color: #F07575; /* fallback color if gradients are not supported */
-  background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
-  background-image:    -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Firefox (3.6 to 15) */
-  background-image:      -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Opera (11.1 to 12.0) */
-  background-image:         linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */
-}
-
- -

The -moz- prefixed rules are used for compatibility with older versions (Fx 3.6 to Fx 15). The -webkit-prefix is the only one that still needs to be included for Android 4.3-, iOS up to 6.1, and Safari 6. When using a prefix, do not use 'to'.

- -

See also

- - diff --git a/files/es/web/css/radial-gradient()/index.html b/files/es/web/css/radial-gradient()/index.html deleted file mode 100644 index 097caadf49..0000000000 --- a/files/es/web/css/radial-gradient()/index.html +++ /dev/null @@ -1,299 +0,0 @@ ---- -title: radial-gradient() -slug: Web/CSS/radial-gradient() -tags: - - Función CSS - - Gráficos(2) - - Imagen CSS -translation_of: Web/CSS/radial-gradient() ---- -

{{CSSRef}}

- -

La función CSS radial-gradient() crea una imagen ({{cssxref("<image>")}}) que representa un gradiente (degradado) de colores, generando un radio desde un origen, el centro (center) del gradiente. El resultado de esta función es un objeto de tipo de dato CSS {{cssxref("<gradient>")}}.

- -

Los gradientes radiales son definidos por su centro (center), el contorno y posición de la figura resultante y los puntos de definición de color (color stops). El gradiente radial consiste, desde su centro hasta su figura resultante y potencialmente más allá, en figuras concénctricas sucesivas de escala uniforme, idénticas en su figura final. Los stops de color son posicionados en un rayo de gradiente virtual que va horizontalmente desde el centro hacia la derecha. La proporción para posicionar los stops de colores es relativa a la intersección entre la figura final y su rayo de gradiente, representando el 100%. Cada figura es monocolor, y definida por el color del rayo de gradiente al que cruza.

- -

Las figuras resultantes solo pueden ser círculos (circle) o elipses (ellipse).

- -

Como cualquier otro gradiente, un gradiente radial CSS no es un {{cssxref("<color>")}} CSS, sino una imagen sin dimensiones intrínsecas, es decir, no tiene un tamaño natural o predefinido, ni radio. Su tamaño concreto coincidirá con el del elemento al que se aplica.

- -

La función radial-gradient no permite gradientes repetidos. Para dicha funcionalidad, use la función CSS {{Cssxref("repeating-radial-gradient")}}.

- -

Sintaxis

- -
// Definición de la figura
-radial-gradient( circle, … )                /* Sinónimo de radial-gradient( circle farthest-corner, … ) */
-radial-gradient( ellipse, … )               /* Sinónimo de radial-gradient( ellipse farthest-corner, … ) */
-radial-gradient( <extent-keyword>, … )      /* Dibuja un círculo */
-radial-gradient( circle radius, … )         /* Un círculo centrado con longitud dada. Puede ser un porcentaje */
-radial-gradient( ellipse x-axis y-axis, … ) /* Los dos ejes semi-mayores son indicados, horizontal y después vertical */
-
-// Definición de la posición de la figura
-radial-gradient ( … at <position>, … )
-
-// Definición de los stops de colores
-radial-gradient ( …, <color-stop>, … )
-radial-gradient ( …, <color-stop>, <color-stop> )
- -

Valores

- -
-
<position>
-
Una posición ({{cssxref("<position>")}}), interpretada de la misma forma que {{Cssxref("background-position")}} o {{Cssxref("transform-origin")}}. Si es omitida, su valor predeterminado es center.
-
<shape>
-
La figura del gradiente. Puede ser un valor circle (que indica que la figura del gradiente es un círculo con radio constante) o ellipse (que indica que la figura del gradiente es una elipse alineada por ejes). El valor predeterminado es ellipse.
-
<color-stop>
-
Representa un color fijo en una posición precisa, su valor está compuesto por un valor {{cssxref("<color>")}}, seguido por una posición opcional (que puede ser de tipo {{cssxref("<percentage>")}} o {{cssxref("<length>")}} a lo largo del rayo de gradiente). Un porcentaje de 0%, o una longitud de 0, representan el centro del gradiente, mientras que el valor de 100% representa la intersección de la figura final con el rayo virtual de gradiente. Los valores porcentuales internos son posicionados linealmente en el rayo gradiente.
-
<extent-keyword>
-
Valores clave que describen la longitud de la figura resultante. Los valores posibles son:
-
- - - - - - - - - - - - - - - - - - - - - - - -
ConstanteDescripción
closest-sideLa figura resultante coincide con el lado de la caja más cercano al centro (para los círculos) o coincide con los lados vertical y horizontal más cercanos al centro (en caso de elipses).
closest-cornerEl tamaño de la figura resultante coincide exactamente con la esquina de la caja más cercana desde el centro del gradiente.
farthest-sideSimilar a closest-side, excepto que el tamaño de la figura resultante coincide con el lado de la caja más lejano al centro (o los lados vertical y horizontal).
farthest-cornerEl tamaño de la figura resultante coincide exactamente con la esquina de la caja más lejana al centro del gradiente.
- Los borradores anteriores del estándar incluyeron otras palabras clave (cover y contain) como sinónimos de los estándares farthest-corner y closest-side respectivamente. Use solo las palabras clave estándar, pues algunas implementaciones ya no soportan las variantes anteriores.
-
- -

Sintaxis formal

- -
radial-gradient(
-  [ [ circle || {{cssxref("<length>")}} ]                         [ at {{cssxref("<position>")}} ]? , |
-    [ ellipse || [ <length> | {{cssxref("<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> ]?
-
- -

Ejemplo 1

- -

Usando el siguiente código CSS podemos obtener un fondo de elipse en la esquina más lejana (farthest-corner) a 45px 45px, cambiando el color de turquesa (#00FFFF), a blanco, a azul (#0000FF):

- -
body {
-  width: 100vh;
-  height: 100vh;
-  background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);
-}
- -

{{ EmbedLiveSample('Example_1') }}

- -

Ejemplo 2

- -

Este código generará un fondo de elipse in la esquina más lejana (farthest-corner) a 470px 45px, cambiando el color de amarillo (#FFFF80), a marrón pálido, a azul pálido (#E6E6FF):

- -
body {
-  width: 100vh;
-  height: 100vh;
-  background-image: radial-gradient(ellipse farthest-corner at 470px 47px , #FFFF80 20%, rgba(204, 153, 153, 0.4) 30%, #E6E6FF 60%);
-}
- -

{{ EmbedLiveSample('Example_2') }}

- -

Ejemplo 3

- -

Este código generará un fondo de elipse en la esquina más lejana (farthest-corner) a 45px 45px, cambiando el color de rojo (#FF0000) a azul (#0000FF):

- -
body {
-  width: 100vh;
-  height: 100vh;
-  background-image: radial-gradient(farthest-corner at 45px 45px , #FF0000 0%, #0000FF 100%);
-}
- -

{{ EmbedLiveSample('Example_3') }}

- -

Ejemplo 4

- -

Este código producirá un círculo difuso con radio de 16px:

- -
body {
-  width: 100vh;
-  height: 100vh;
-  background-image:  radial-gradient(16px at 60px 50% , #000000 0%, #000000 14px, rgba(0, 0, 0, 0.3) 18px, rgba(0, 0, 0, 0) 19px);
-}
- -

{{ EmbedLiveSample('Example_4') }}

- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()')}}{{Spec2('CSS3 Images')}}Definición inicial
- -

Compatibilidad de navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico (en {{cssxref("background")}} y {{cssxref("background-image")}}){{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}[1]
- {{CompatGeckoDesktop("16")}}		10.0 (534.16){{property_prefix("-webkit")}}[2]10.0[3]11.60{{property_prefix("-o")}}5.1{{property_prefix("-webkit")}}[2]
En {{cssxref("border-image")}}{{CompatGeckoDesktop("29")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
En cualquier propiedad que acepte el tipo {{cssxref("<image>")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Sintaxis anterior de webkit {{non-standard_inline}}{{CompatNo}}3{{property_prefix("-webkit")}}[2]{{CompatNo}}{{CompatNo}}4.0{{property_prefix("-webkit")}}[2]
Sintaxis de at (sintaxis estándar final){{CompatGeckoDesktop("10")}}{{property_prefix("-moz")}}[1]
- {{CompatGeckoDesktop("16")}}[4]		2610.011.60{{property_prefix("-o")}}[2]
- 2.12		{{CompatNo}}
Consejos de interpolación (un porcentaje sin color){{CompatGeckoDesktop("36")}}40 27 
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico (en {{cssxref("background")}} y {{cssxref("background-image")}}){{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.2")}}{{property_prefix("-moz")}}[1]
- {{CompatGeckoMobile("16")}}		10{{CompatVersionUnknown}}{{CompatVersionUnknown}}
En {{cssxref("border-image")}}{{CompatVersionUnknown}}{{CompatGeckoMobile("29")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
En cualquier propiedad que acepte el tipo {{cssxref("<image>")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Sintaxis anterior de webkit {{non-standard_inline}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Sintaxis de at (sintaxis estándar final){{CompatUnknown}}{{CompatGeckoMobile("10")}}{{property_prefix("-moz")}}[1]
- {{CompatGeckoMobile("16")}}		10{{CompatUnknown}}{{CompatUnknown}}
-
- -

[1] Implementado en Firefox 3.6 usando prefijo, y sintaxis anterior. Antes de Firefox 36, Gecko no aplicaba gradientes en espacios de color premultiplicado, provocando que apareciera una sombra gris cuando se usaba con transparencia. Desde Firefox 42, la versión con prefijo puede ser deshabilitada estableciendo la opción layout.css.prefixes.gradients en false.

- -

[2] Implementado en WebKit usando prefijo, y sintaxis anterior. WebKit desde la versión 528 soporta la función anterior -webkit-gradient(radial,…). Véase también su soporte actual para gradientes radiales.

- -

[3] Internet Explorer 5.5 a 9.0 soporta la propiedad exclusiva filter: progid:DXImageTransform.Microsoft.Gradient() filter.

- -

[4] Además del soporte sin prefijo, Gecko 44.0 {{geckoRelease("44.0")}} incluye soporte para una versión con prefijo -webkit de la función, por razones de compatibilidad, dentro de la opción layout.css.prefixes.webkit, con valor false de forma predeterminada. Desde Gecko 49.0 {{geckoRelease("49.0")}} el valor predeterminado de esa opción es true.

- -

Véase también

- - diff --git a/files/fr/_redirects.txt b/files/fr/_redirects.txt index e7abf03344..70d833f50f 100644 --- a/files/fr/_redirects.txt +++ b/files/fr/_redirects.txt @@ -329,7 +329,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/linear-gradient() +/fr/docs/CSS/-moz-linear-gradient /fr/docs/orphaned/Web/CSS/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 @@ -345,7 +345,7 @@ /fr/docs/CSS/-moz-outline-width /fr/docs/Web/CSS/outline-width /fr/docs/CSS/-moz-padding-end /fr/docs/Web/CSS/padding-inline-end /fr/docs/CSS/-moz-padding-start /fr/docs/Web/CSS/padding-inline-start -/fr/docs/CSS/-moz-radial-gradient /fr/docs/Web/CSS/radial-gradient() +/fr/docs/CSS/-moz-radial-gradient /fr/docs/orphaned/Web/CSS/radial-gradient() /fr/docs/CSS/-moz-spinning /fr/docs/Web/CSS/cursor /fr/docs/CSS/-moz-user-input /fr/docs/Web/CSS/-moz-user-input /fr/docs/CSS/-moz-zoom-in /fr/docs/Web/CSS/cursor @@ -606,7 +606,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/linear-gradient() +/fr/docs/CSS/linear-gradient /fr/docs/orphaned/Web/CSS/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 @@ -649,9 +649,9 @@ /fr/docs/CSS/pourcentage /fr/docs/Web/CSS/percentage /fr/docs/CSS/proprietes_css_animees /fr/docs/Web/CSS/CSS_animated_properties /fr/docs/CSS/quotes /fr/docs/Web/CSS/quotes -/fr/docs/CSS/radial-gradient /fr/docs/Web/CSS/radial-gradient() +/fr/docs/CSS/radial-gradient /fr/docs/orphaned/Web/CSS/radial-gradient() /fr/docs/CSS/ratio /fr/docs/Web/CSS/ratio -/fr/docs/CSS/repeating-linear-gradient /fr/docs/Web/CSS/repeating-linear-gradient() +/fr/docs/CSS/repeating-linear-gradient /fr/docs/orphaned/Web/CSS/repeating-linear-gradient() /fr/docs/CSS/resize /fr/docs/Web/CSS/resize /fr/docs/CSS/resolution /fr/docs/Web/CSS/resolution /fr/docs/CSS/right /fr/docs/Web/CSS/right @@ -3978,7 +3978,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/linear-gradient() +/fr/docs/Web/CSS/-moz-linear-gradient /fr/docs/orphaned/Web/CSS/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 @@ -3989,7 +3989,7 @@ /fr/docs/Web/CSS/-moz-outline-width /fr/docs/Web/CSS/outline-width /fr/docs/Web/CSS/-moz-padding-end /fr/docs/Web/CSS/padding-inline-end /fr/docs/Web/CSS/-moz-padding-start /fr/docs/Web/CSS/padding-inline-start -/fr/docs/Web/CSS/-moz-radial-gradient /fr/docs/Web/CSS/radial-gradient() +/fr/docs/Web/CSS/-moz-radial-gradient /fr/docs/orphaned/Web/CSS/radial-gradient() /fr/docs/Web/CSS/-moz-spinning /fr/docs/Web/CSS/cursor /fr/docs/Web/CSS/-moz-user-modify /fr/docs/Web/CSS/user-modify /fr/docs/Web/CSS/-moz-zoom-in /fr/docs/Web/CSS/cursor @@ -4275,12 +4275,13 @@ /fr/docs/Web/CSS/Valeur_spécifiée /fr/docs/Web/CSS/specified_value /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/Web/CSS/image() +/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/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/conic-gradient /fr/docs/Web/CSS/conic-gradient() +/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_Lists_and_Counters/Using_CSS_counters /fr/docs/Web/CSS/counter_fonction /fr/docs/Web/CSS/counter() /fr/docs/Web/CSS/counters /fr/docs/Web/CSS/counters() @@ -4304,9 +4305,12 @@ /fr/docs/Web/CSS/grid-gap /fr/docs/Web/CSS/gap /fr/docs/Web/CSS/grid-row-gap /fr/docs/Web/CSS/row-gap /fr/docs/Web/CSS/hidden /fr/docs/Web/CSS/visibility -/fr/docs/Web/CSS/image-set /fr/docs/Web/CSS/image-set() -/fr/docs/Web/CSS/imagefunction /fr/docs/Web/CSS/image() -/fr/docs/Web/CSS/linear-gradient /fr/docs/Web/CSS/linear-gradient() +/fr/docs/Web/CSS/image() /fr/docs/orphaned/Web/CSS/image() +/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/orphaned/Web/CSS/linear-gradient() +/fr/docs/Web/CSS/linear-gradient() /fr/docs/orphaned/Web/CSS/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() @@ -4325,11 +4329,15 @@ /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/Web/CSS/paint() /fr/docs/Web/CSS/proprietes_css_animees /fr/docs/Web/CSS/CSS_animated_properties -/fr/docs/Web/CSS/radial-gradient /fr/docs/Web/CSS/radial-gradient() +/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/repeating-conic-gradient /fr/docs/Web/CSS/repeating-conic-gradient() -/fr/docs/Web/CSS/repeating-linear-gradient /fr/docs/Web/CSS/repeating-linear-gradient() -/fr/docs/Web/CSS/repeating-radial-gradient /fr/docs/Web/CSS/repeating-radial-gradient() +/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() +/fr/docs/Web/CSS/repeating-linear-gradient() /fr/docs/orphaned/Web/CSS/repeating-linear-gradient() +/fr/docs/Web/CSS/repeating-radial-gradient /fr/docs/orphaned/Web/CSS/repeating-radial-gradient() +/fr/docs/Web/CSS/repeating-radial-gradient() /fr/docs/orphaned/Web/CSS/repeating-radial-gradient() /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 diff --git a/files/fr/_wikihistory.json b/files/fr/_wikihistory.json index 485a786b96..7a402a0796 100644 --- a/files/fr/_wikihistory.json +++ b/files/fr/_wikihistory.json @@ -27587,14 +27587,6 @@ "Fredchat" ] }, - "Web/CSS/conic-gradient()": { - "modified": "2020-11-05T10:00:17.716Z", - "contributors": [ - "chrisdavidmills", - "SphinxKnight", - "AlainGourves" - ] - }, "Web/CSS/contain": { "modified": "2020-10-15T21:47:58.553Z", "contributors": [ @@ -28369,16 +28361,6 @@ "Goofy" ] }, - "Web/CSS/image()": { - "modified": "2020-11-16T08:52:05.684Z", - "contributors": [ - "chrisdavidmills", - "escattone", - "SphinxKnight", - "estelle", - "ExE-Boss" - ] - }, "Web/CSS/image-orientation": { "modified": "2020-10-15T21:19:41.469Z", "contributors": [ @@ -28389,13 +28371,6 @@ "FredB" ] }, - "Web/CSS/image-set()": { - "modified": "2020-11-16T08:53:24.499Z", - "contributors": [ - "chrisdavidmills", - "SphinxKnight" - ] - }, "Web/CSS/ime-mode": { "modified": "2020-10-15T21:16:34.560Z", "contributors": [ @@ -28636,28 +28611,6 @@ "kodliber" ] }, - "Web/CSS/linear-gradient()": { - "modified": "2020-11-16T08:57:11.795Z", - "contributors": [ - "chrisdavidmills", - "SphinxKnight", - "edspeedy", - "Javarome", - "lhapaipai", - "Guillaume.Wulpes", - "Simplexible", - "wizAmit", - "slayslot", - "prayash", - "Nazcange", - "nicofrand", - "teoli", - "Golmote", - "tregagnon", - "FredB", - "thenew" - ] - }, "Web/CSS/list-style": { "modified": "2020-10-15T21:15:56.797Z", "contributors": [ @@ -29536,18 +29489,6 @@ "FredB" ] }, - "Web/CSS/radial-gradient()": { - "modified": "2020-11-18T14:42:17.846Z", - "contributors": [ - "chrisdavidmills", - "SphinxKnight", - "PetiPandaRou", - "teoli", - "philippe97", - "FredB", - "Jeansebastien.ney" - ] - }, "Web/CSS/ratio": { "modified": "2020-10-15T21:21:46.974Z", "contributors": [ @@ -29564,35 +29505,6 @@ "SphinxKnight" ] }, - "Web/CSS/repeating-conic-gradient()": { - "modified": "2020-11-18T14:49:14.177Z", - "contributors": [ - "chrisdavidmills", - "SphinxKnight" - ] - }, - "Web/CSS/repeating-linear-gradient()": { - "modified": "2020-11-18T14:45:56.794Z", - "contributors": [ - "chrisdavidmills", - "SphinxKnight", - "Sebastianz", - "Prinz_Rana", - "wizAmit", - "prayash", - "bfn", - "teoli", - "FredB" - ] - }, - "Web/CSS/repeating-radial-gradient()": { - "modified": "2020-11-18T14:47:29.838Z", - "contributors": [ - "chrisdavidmills", - "SphinxKnight", - "a-mt" - ] - }, "Web/CSS/resize": { "modified": "2020-10-15T21:19:06.332Z", "contributors": [ @@ -45122,6 +45034,94 @@ "SphinxKnight" ] }, + "orphaned/Web/CSS/conic-gradient()": { + "modified": "2020-11-05T10:00:17.716Z", + "contributors": [ + "chrisdavidmills", + "SphinxKnight", + "AlainGourves" + ] + }, + "orphaned/Web/CSS/image()": { + "modified": "2020-11-16T08:52:05.684Z", + "contributors": [ + "chrisdavidmills", + "escattone", + "SphinxKnight", + "estelle", + "ExE-Boss" + ] + }, + "orphaned/Web/CSS/image-set()": { + "modified": "2020-11-16T08:53:24.499Z", + "contributors": [ + "chrisdavidmills", + "SphinxKnight" + ] + }, + "orphaned/Web/CSS/linear-gradient()": { + "modified": "2020-11-16T08:57:11.795Z", + "contributors": [ + "chrisdavidmills", + "SphinxKnight", + "edspeedy", + "Javarome", + "lhapaipai", + "Guillaume.Wulpes", + "Simplexible", + "wizAmit", + "slayslot", + "prayash", + "Nazcange", + "nicofrand", + "teoli", + "Golmote", + "tregagnon", + "FredB", + "thenew" + ] + }, + "orphaned/Web/CSS/radial-gradient()": { + "modified": "2020-11-18T14:42:17.846Z", + "contributors": [ + "chrisdavidmills", + "SphinxKnight", + "PetiPandaRou", + "teoli", + "philippe97", + "FredB", + "Jeansebastien.ney" + ] + }, + "orphaned/Web/CSS/repeating-conic-gradient()": { + "modified": "2020-11-18T14:49:14.177Z", + "contributors": [ + "chrisdavidmills", + "SphinxKnight" + ] + }, + "orphaned/Web/CSS/repeating-linear-gradient()": { + "modified": "2020-11-18T14:45:56.794Z", + "contributors": [ + "chrisdavidmills", + "SphinxKnight", + "Sebastianz", + "Prinz_Rana", + "wizAmit", + "prayash", + "bfn", + "teoli", + "FredB" + ] + }, + "orphaned/Web/CSS/repeating-radial-gradient()": { + "modified": "2020-11-18T14:47:29.838Z", + "contributors": [ + "chrisdavidmills", + "SphinxKnight", + "a-mt" + ] + }, "orphaned/Web/Guide/Events": { "modified": "2020-08-30T07:20:46.985Z", "contributors": [ diff --git a/files/fr/orphaned/web/css/conic-gradient()/index.html b/files/fr/orphaned/web/css/conic-gradient()/index.html new file mode 100644 index 0000000000..601417db6e --- /dev/null +++ b/files/fr/orphaned/web/css/conic-gradient()/index.html @@ -0,0 +1,265 @@ +--- +title: conic-gradient() +slug: orphaned/Web/CSS/conic-gradient() +tags: + - CSS + - Fonction + - Guide + - Reference +translation_of: Web/CSS/conic-gradient() +original_slug: Web/CSS/conic-gradient() +--- +
{{CSSRef}}
+ +

La fonction CSS conic-gradient() permet de créer une image consistuée d'un dégradé radial pour lequel les transitions entre les couleurs ont lieu autour d'un centre plutôt que depuis le centre. Un dégradé conique pourra par exemple être un graphique en camembert. Le résultat de la fonction conic-gradient() est un objet du type de données {{CSSxRef("<gradient>")}} qui est un type particulier d'{{CSSxRef("<image>")}}.

+ +

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

+ + + +

À l'instar des autres dégradés, les dégradés coniques ne possèdent pas de dimension intrinsèque (ils n'ont pas de taille préférentielle ou de ratio) : la taille réelle correspondra à la taille de l'élément auquel le dégradé s'applique ou à la taille de l'image.

+ +

Pour créer un dégradé conique qui se répète afin de couvrir 360° (un tour complet), on utilisera plutôt la notation fonctionnelle {{CSSxRef("repeating-conic-gradient")}}.

+ +

Les dégradés (<gradient>) sont un type d'image (<image>) et ne peuvent être utilisés qu'aux endroits où les images peuvent être utilisées. Aussi, conic-gradient() ne fonctionnera pas pour la propriété {{CSSxRef("background-color")}} ou pour les autres propriétés qui utilisent les données de type {{CSSxRef("<color>")}}.

+ +
+

Note : Un tel dégradé est appelé conique car, vu du dessus, la répartition des couleurs fait apparaître un cône.

+
+ +

Qu'est-ce qu'un dégradé conique ?

+ +

Un dégradé conique est semblable à un dégradé radial mais les transitions de couleurs sont placées sur différents angles plutôt que sur différents rayons. Avec les dégradés coniques, les transition entre les couleurs commencent depuis la direction pointant vers le haut puis dans le sens des aiguilles d'une montre. Avec un dégradé radial, les transitions progressent depuis le centre vers l'extérieur du cercle.

+ +

color stops along the circumference of a conic gradient and the axis of a radial gradient.

+ +

Un dégradé conique est défini en indiquant un angle de rotation, le centre du dégradé puis en indiquant une liste de points d'arrêt de couleur. À la différence des dégradés linéaires et des dégradés radiaux pour lesquels les points d'arrêt de couleur sont placés avec une longueur, les points d'arrêt de couleur d'un dégradé conique sont placés à l'aide d'un angle. Les unités utilisables pour les angles sont deg (pour les degrés), rad (pour les radians), grad (pour les grades) et turn (pour les tours). Un cercle se divise en 360 degrés, 400 grades, 2 radians et un tour. Les navigateurs qui prennent en charge les dégradés coniques acceptent également les valeurs exprimées en pourcentage (100% correspondant à 360 degrés) mais cela ne fait pas partie de la spécification.

+ +

Comme pour les dégradés radiaux, la syntaxe pour les dégradés coniques permet de situer le centre du dégradé à n'importe quel endroit de l'image ou de l'élément, même en dehors. La position s'exprime avec deux valeurs, de façon semblable à la syntaxe de {{cssxref("background-position")}}.

+ +

L'arc du dégradé représente le périmètre du dégradé. Le point de départ du dégradé est situé en haut de l'axe vertical. Ensuite le dégradé évolue à partir de cet angle. Les couleurs du dégradé sont déterminées grâce aux points d'arrêt de couleur angulaires, aux points de départ et aux points d'arrivée et éventuellement aux points d'arrêt intermédiaires. Les transitions entre les couleurs peuvent être modifiées grâce à des indications entre les différents points d'arrêt.

+ +

Adapter les dégradés

+ +

En ajoutant plusieurs points d'arrêt de couleur sur l'arc du dégradé, il est possible de créer une transition personnalisée entre de nombreuses couleurs. La position d'un point d'arrêt de couleur peut être définie de façon explicite grâce à une valeur de type {{CSSxRef("<angle>")}}. Si on ne définit pas l'emplacement d'un point d'arrêt, ce dernier sera placé à mi-chemin entre le point d'arrêt précédent et le suivant. Si on ne définit pas d'angle pour le premier ou le dernier point d'arrêt de couleur, ils seront respectivement situés à 0deg et 360deg. Autrement dit, les deux dégradés suivants sont équivalents :

+ +
conic-gradient(red, orange, yellow, green, blue);
+conic-gradient(red 0deg, orange 90deg, yellow 180deg, green 270deg, blue 360deg);
+ +

Par défaut, la transition entre les couleurs de deux points d'arrêt se fera progressivement avec la moitié de la transition à la moitié de l'angle. Ce milieu de transition peut être déplacé en ajoutant une indication de couleur qui définit l'emplacement voulu. L'exemple suivant commence avec du rouge jusqu'à 10%, fait une transition du rouge au bleu sur 80% du tour, les 10% restants sont en bleu. Cependant, le point de changement entre le bleu et le rouge se situe à 20% plutôt qu'à 50% (ce qui se serait produit sans l'indication 80grad).

+ +
conic-gradient(red 40grad, 80grad, blue 360grad);
+ +

Si deux ou plusieurs points d'arrêt de couleur partagent le même emplacement, la transition sera franche entre la première et la dernière couleur déclarées pour cet emplacement. Si on emploie les dégradés coniques pour faire des camemberts (une mauvaise pratique car les dégradés ne sont pas accessibles), on peut utiliser des points d'arrêt avec plusieurs couleurs au même endroit pour créer une transition nette. Les deux déclarations suivantes sont synonymes :

+ +
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);
+ +

Les points d'arrêt de couleur devraient être listés dans l'ordre croissant. Les points d'arrêt situés après mais dont la valeur d'angle est inférieure surchargeront les valeurs des points d'arrêt précédents et créeraient une rupture tranchée. Le dégradé qui suit passe de rouge à jaune à 30% puis de jaune à bleu après 35% :

+ +
conic-gradient(red .8rad, yellow .6rad, blue 1.3rad);
+
+ +

Il est possible d'obtenir d'autres effets avec les dégradés coniques. On peut même créer un damier en créant des quadrants supérieurs gauches et inférieurs droits en blanc et supérieurs droits et inférieurs gauches en noir puis en répétant le dégradé 16 fois (quatre fois en horizontal et quatre fois en vertical) :

+ +
conic-gradient(#fff 90deg, #000 0.25turn 0.5turn, #fff 1rad 1.5rad, #000 300grad);
+background-size: 25% 25%;
+
+ +

On voit avec l'exemple précédent qu'il est aussi possible de mélanger différentes unités d'angle mais attention, cela diminue fortement la lisibilité.

+ +

Syntaxe

+ +
/* Un dégradé conique tourné de 45 degrés,
+   qui commence en bleu et finit en rouge */
+conic-gradient(from 45deg, blue, red);
+
+/* Une boîte bleu violette : le dégradé commence du bleu
+   vers le rouge mais seule la partie inférieure droite du
+   quadrant est visible car le centre du dégradé conique est
+   dans le coin supérieur gauche */
+conic-gradient(from 90deg at 0 0, blue, red);
+
+/* Une roue des couleurs */
+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%)
+);
+ +

Valeurs

+ +
+
{{CSSxRef("<angle>")}}
+
Une valeur précédée du mot-clé from qui indique un angle et qui définit la rotation du dégradé selon le sens des aiguilles d'une montre.
+
<position>
+
La position définit le centre du dégradé en respectant la même syntaxe que celle utilisée pour la propriété {{cssxref("background-position")}}. Si cette valeur est absente, ce sera la valeur center qui sera utilisée comme valeur par défaut, indiquant que le dégradé sera centré.
+
<angular-color-stop>
+
Un point d'arrêt de couleur utilisant une valeur de type {{CSSxRef("<color>")}} suivie par une ou deux positions d'arrêt (une valeur de type {{CSSxRef("<angle>")}} située le long de l'arc du dégradé).
+
<color-hint>
+
Une indication de couleur pour l'interpolation entre deux points d'arrêt. La longueur définit l'emplacement où les deux couleurs des points d'arrêts alentour doivent se joindre. Autrement dit, la longueur à laquelle la transition est effectuée à moitié. Si cette valeur est absente, la moitié de la transition est atteinte à la moitié de l'angle entre les deux points d'arrêt.
+
+
+

Note : Le rendu des points d'arrêt de couleur pour les dégradés CSS respecte les mêmes règles que les points d'arrêt de couleur des dégradés SVG.

+
+
+
+ +

Syntaxe formelle

+ +
conic-gradient(
+  [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )
+  \---------------------------------/ \----------------------------/
+        Gradient definition                List of color stops
+
+where <angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>
+  and <angular-color-stop> = <color> && <color-stop-angle>?
+  and <angular-color-hint> = <angle-percentage>
+  and <color-stop-angle> = <angle-percentage>{1,2}
+ +

Exemples

+ +
+

Un dégradé à 40°

+ + + +
div {
+  background-image:
+     conic-gradient(from 40deg, #fff, #000);
+}
+
+ +

{{EmbedLiveSample("Un_dégradé_à_40°", 120, 120)}}

+
+ +
+

Un dégradé décentré

+ + + +
div {
+  background: conic-gradient(from 0deg at 0% 25%, blue, green, yellow 180deg);
+}
+ +

{{EmbedLiveSample("Un_dégradé_décentré", 120, 120)}}

+
+ +
+

Un camembert sous forme de dégradé

+ +

This example uses multi-position color stops, with adjacent colors having the same color stop value, creating a striped effect.

+ + + +
div {
+  background: conic-gradient(
+     red 36deg, orange 36deg 170deg, yellow 170deg);
+  border-radius: 50%
+}
+ +

{{EmbedLiveSample("Un_camembert_sous_forme_de_dégradé", 120, 120)}}

+
+ +
+

Un damier

+ + + +
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("Un_damier", 120, 120)}}

+
+ +
+

Note : Voir Utiliser les dégradés CSS pour plus d'exemples.

+
+ +

Acessibilité

+ +

Les outils d'assistance ne peuvent pas analyser les images d'arrière-plan. Aussi, bien qu'il soit possible de créer des camemberts graphiques, des damiers ou d'autres effets grâce aux dégradés coniques, les images construites en CSS ne sont pas accessibles. Les images créées avec des dégradés coniques ne sont donc pas accessibles non plus. 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.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Images', '#conic-gradients', 'conic-gradient()')}}{{Spec2('CSS4 Images')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.types.image.gradient.conic-gradient")}}

+ +

Voir aussi

+ + diff --git a/files/fr/orphaned/web/css/image()/index.html b/files/fr/orphaned/web/css/image()/index.html new file mode 100644 index 0000000000..997f85aae3 --- /dev/null +++ b/files/fr/orphaned/web/css/image()/index.html @@ -0,0 +1,176 @@ +--- +title: image() +slug: orphaned/Web/CSS/image() +tags: + - CSS + - Fonction + - Reference +translation_of: Web/CSS/image() +original_slug: Web/CSS/image() +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La fonction CSS image() définit une image (type {{cssxref("<image>")}}) à la façon du type {{cssxref("<url>")}} mais avec des fonctionnalités supplémentaires comme la définition de la directionnalité, la possibilité d'indiquer une image par défaut si l'image initiale n'est pas prise en charge, l'affichage d'une partie de l'image ou le choix de la couleur à utiliser par défaut si aucune des images indiquées ne peut être affichée.

+ +
+

Note : Attention à ne pas confondre cette notation fonctionnelle CSS avec le constructeur {{DOMxRef("HTMLImageElement/Image", "Image() pour HTMLImageElement","",1)}}.

+
+ +

Syntaxe

+ +{{CSSSyntax("image()")}} + +

Paramètres

+ +
+
image-tags{{optional_inline}}
+
La directionnalité de l'image, la valeur ltr pourra être utilisée afin d'indiquer que l'image est orientée de gauche à droite et la valeur rtl indiquera de droite à gauche.
+
image-src{{optional_inline}}
+
Zéro, une ou plusieurs URL ({{CSSxRef("<url>")}}) ou chaînes de caractères ({{CSSxRef("<string>")}}) indiquant des sources d'image et qui contiennent éventuellement des identifiants de fragment.
+
color{{optional_inline}}
+
Une couleur par défaut. Cette couleur sera utilisée par défaut si aucune image n'est trouvée ou prise en charge parmi les images fournies via image-src.
+
+ +

Gestion de la directionnalité

+ +

Le premier paramètre de la fonction image() est optionnel et indique la directionnalité de l'image. Lorsque ce paramètre est utilisé et que l'image est utilisée au sein d'un élément ayant la directionnalité opposée, l'image sera renversée horizontalement pour les modes d'écriture horizontaux. Si ce paramètre n'est pas utilisé, l'image ne sera pas renversée.

+ +

Fragments d'image

+ +

Une différence fondamentale entre url() et image() est la possibilité d'ajouter un identifiant de fragment d'image. Un identifiant de fragment est donné par : un point de départ défini par ses coordonnées x et y et par une largeur et une hauteur. Cela permet de ne sélectionner qu'une section de l'image source. La section ainsi définie devient une image à part entière aux yeux du moteur de rendu.

+ +
background-image: image('monimage.webp#xywh=0,20,40,60');
+ +

Avec l'exemple précédent, l'image d'arrière-plan utilisée sera une section de l'image myImage.webp commençant à la coordonnée (0px,20px), ayant une largeur de 40px et une hauteur de 60px.

+ +

La syntaxe pour l'identifiant de fragment #xywh=#,#,#,# prend quatre arguments numériques séparés par des virgules. Les deux premiers arguments représentent les coordonnées X et Y du point de départ pour la section, la troisième valeur correspond à la largeur de la portion et la quatrième correspond à la hauteur. Par défaut, ces coordonnées et ces mesures sont exprimées en pixels. La définition de la dimension spatiale de la spécification des média indique que les pourcentages peuvent également être pris en charge.

+ +
xywh=160,120,320,240        /* créera une image sur 320x240 à x=160 et y=120 */
+xywh=pixel:160,120,320,240  /* créera une image sur 320x240 à x=160 et y=120 */
+xywh=percent:25,25,50,50    /* créera une image sur 50%x50% à x=25% et y=25% */
+ +

Les fragments d'image peuvent également être utilisés avec la notation url(). La syntaxe #xywh=#,#,#,# est rétrocompatible car elle sera ignorée si elle n'est pas comprise et elle ne rendra pas la source invalide si elle est utilisée avec la notation url(). Si le navigateur ne prend pas en charge les notations pour les fragments de média, il ignorera la définition du fragment et affichera l'image intégralement.

+ +

Les navigateurs qui prennent en charge image() prennent également en charge la notation pour les fragments. Ainsi si le fragment fourni est invalide dans la source pour image(), l'image résultante sera considérée invalide.

+ +

Couleur par défaut

+ +

Si les deux derniers arguments sont utilisés et dans le cas où les images fournies sont invalides, la fonction image() génèrera une image à partir de la couleur indiquée. Cette couleur apparaîtra uniquement dans le cas où l'image source n'est pas utilisable. Ainsi, si on a choisi une image sombre sur laquelle afficher du texte clair, autant prévoir une couleur sombre au cas où afin de garantir un contraste acceptable.

+ +

Il est possible de ne pas définir d'image source et de ne passer qu'une couleur comme argument.

+ +

À la différence de {{cssxref("background-color")}} dont la couleur sera placée derrière l'ensemble des images d'arrière-plan, on peut utiliser image() afin de placer des couleurs sur d'autres images.

+ +

La taille du rectangle de couleur appliqué peut être défini grâce à la propriété {{cssxref("background-size")}}. Ce comportement diffère de background-color qui définit une couleur pour couvrir l'ensemble de l'élément. image(color) et background-color pourront être déplacés grâce aux propriétés {{cssxref("background-clip")}} et {{cssxref("background-origin")}}.

+ +

Exemples

+ +

Utiliser des images prenant en compte la directionnalité

+ +
<ul>
+  <li dir="ltr">La puce est une flèche pointant à droite et située à gauche.</li>
+  <li dir="rtl">La puce est la même flèche mais renversée pour pointer à gauche.</li>
+</ul>
+ +
ul {
+  list-style-image: image(ltr 'rightarrow.jpg');
+}
+ +

Pour les éléments de la liste allant de gauche à droite (ceux avec dir="ltr" ou qui héritent de cette direction depuis leur ancêtre), l'image pour la puce sera utilisée telle quelle. Les éléments de la liste avec dir="rtl" (que ce soit explicitement défini comme ici ou que cette direction provienne de la direction par défaut du document, par exemple un document en arabe ou en hébreu), l'image sera affichée à droite et sera renversée horizontalement (de la même façon qu'avec transform: scalex(-1)). Le texte sera également affiché de gauche à droite.

+ +

{{EmbedLiveSample("Utiliser_des_images_prenant_en_compte_la_directionnalité","100%","200")}}

+ +
+

Afficher une partie (sprite)

+ +
<div class="box">Vous pouvez survoler cet élément pour voir un autre curseur.</div>
+
+ +
.box:hover {
+   cursor: image("https://mdn.mozillademos.org/files/16411/sprite.png#xywh=32,64,16,16");
+}
+ +

Lorsque l'utilisateur survole la boîte, le curseur changera pour afficher une section d'un sprite mesurant 16 pixels de large et de haut et commençant à x=32 et y=64 sur l'image totale.

+ +
{{EmbedLiveSample("Afficher_une_partie_sprite","100%","100")}}
+
+ +
+

Fournir des images alternatives

+ +
.help::before {
+  content: image("try.webp", "try.svg", "try.gif");
+}
+ +

Dans cet exemple, le navigateur affichera une image comme contenu généré précédent tous les éléments avec la classe help. Si le navigateur prend en charge le format WebP, ce sera try.webp qui sera affichée, sinon si le navigateur prend en charge le format SVG, ce sera try.svg qui sera affichée et sinon, ce sera try.gif qui sera utilisée.

+
+ +
+

Placer une couleur sur une image en arrière-plan

+ +
.quarterlogo {height: 200px; width: 200px; border: 1px solid;}
+ +
.quarterlogo {
+  background-image:
+    image(rgba(0, 0, 0, 0.25)),
+    url("https://mdn.mozillademos.org/files/12053/firefox.png");
+  background-size: 25%;
+  background-repeat: no-repeat;
+}
+ +
<div class="quarterlogo">If supported, a quarter of this div has a darkened logo</div>
+
+ +

Dans l'exempel précédent, on placera un masque noir semi-transparent sur le logo Firefox utilisé comme image d'arrière-plan. Si on avait utilisé la propriété background-color à la place, la couleur aurait été placée sous le logo et non sur lui. De plus, le conteneur entier aurait eu cette couleur en arrière-plan. Avec image() et {{cssxref("background-size")}} (tout en empêchant l'aimge de se répéter grâce à {{cssxref("background-repeat")}}), le voile noir ne couvrira qu'un quart du conteneur.

+ +
{{EmbedLiveSample("Placer_une_couleur_sur_une_image_en_arrière-plan","100%","220")}}
+
+ +

Accessibilité

+ +

Les outils d'assistance ne peuvent pas analyser les images d'arrière-plan acr les navigateurs n'extraient pas d'informations du contenu visuel des images. Si l'image contient des informations essentielles à la compréhension du document, il faudra décrire ces informations de façon sémantique dans le document afin, entre autres, que les outils d'assistance puissent transmettre les informations aux utilisateurs.

+ + + +

Cette fonctionnalité permet d'améliorer l'accessibilité en fournissant une couleur par défaut lorsque l'image n'est pas chargée. Bien qu'il soit conseillé d'avoir une couleur d'arrière-plan ({{cssxref("background-color")}}) pour chaque image d'arrière-plan ({{cssxref("background-image")}}), image() pourra être utile afin de définir une couleur uniquement utilisée lorsqu'une image ne charge pas.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS4 Images", "#image-notation", "image()")}}{{Spec2('CSS4 Images')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

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

+ +

Voir aussi

+ + diff --git a/files/fr/orphaned/web/css/image-set()/index.html b/files/fr/orphaned/web/css/image-set()/index.html new file mode 100644 index 0000000000..a0b8a90636 --- /dev/null +++ b/files/fr/orphaned/web/css/image-set()/index.html @@ -0,0 +1,85 @@ +--- +title: image-set() +slug: orphaned/Web/CSS/image-set() +tags: + - CSS + - Fonction + - Reference +translation_of: Web/CSS/image-set() +original_slug: Web/CSS/image-set() +--- +

{{CSSRef}}

+ +

La fonction image-set() est une méthode permettant au navigateur de sélectionner l'image la plus appropriée parmi un ensemble d'images. Elle s'avère notamment utile pour les écrans à haute densité de pixels.

+ +

La résolution et la bande passante varient selon l'appareil et l'accès au réseau dont on dispose. La fonction image-set() permet au navigateur de sélectionner l'image avec la résolution la mieux adaptée aux conditions de l'utilisateur. Cette fonction reçoit différentes options d'images qui sont chacune une image avec une déclaration de résolution. La résolution sera généralement couplée avec la taille du fichier associé. Ainsi, un agent utilisateur conscient que la bande passante est faible pourra privilégier une image à faible résolution plutôt que d'attendre longtemps le chargement d'une image à plus haute résolution.

+ +

Cette fonction permet ainsi à l'auteur du document de fournir différentes options plutôt que de laisser l'utilisateur payer les conséquences.

+ +

Syntaxe

+ +
image-set() = image-set( <image-set-option># )
+où <image-set-option> = [ <image> | <string> ] <resolution> et où
+      <string> est une valeur <url>
+
+ +

Valeurs

+ +

La plupart du temps, la source d'une des images de l'ensemble sera indiquée via la fonction {{cssxref("url")}}.

+ +

On notera qu'on ne peut pas imbriquer un appel à une fonction image-set() au sein d'un autre appel à image-set().

+ +

La valeur <resolution> peut utiliser une unité x ou dppx (points par unité de pixel), dpi (points par pouce) ou dpcm (points par centimètre). Une résolution donnée ne peut être utilisée que pour une seule image au sein d'un appel à image-set().

+ +

Exemples

+ +
background-image: image-set( "chat.png" 1x,
+                             "chat-2x.png" 2x,
+                             "chat-print.png" 600dpi);
+ +

Dans cet exemple, on utilise image-set() afin de fournir deux versions pour une image en arrière-plan. Le navigateur pourra choisir l'image avec la meilleure résolution si l'utilisateur dispose d'un appareil permettant de l'afficher correctement et si sa connexion est suffisamment rapide.

+ +

Accessibilité

+ +

Les navigateurs ne fournissent pas d'informations particulières aux outils d'assistance quant aux outils d'assistance. Ainsi, les lecteurs d'écran ne pourront pas annoncer d'informations utiles si l'image contient des informations essentielles à la compréhension de la page. Il faudra inclure une description sémantique sur l'image pour que tous les utilisateurs puissent en bénéficier.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Images', '#image-set-notation', 'The image-set() notation')}}{{Spec2('CSS4 Images')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.types.image.image-set")}}

+ +

Voir aussi

+ + diff --git a/files/fr/orphaned/web/css/linear-gradient()/index.html b/files/fr/orphaned/web/css/linear-gradient()/index.html new file mode 100644 index 0000000000..00237e115c --- /dev/null +++ b/files/fr/orphaned/web/css/linear-gradient()/index.html @@ -0,0 +1,297 @@ +--- +title: linear-gradient +slug: orphaned/Web/CSS/linear-gradient() +tags: + - CSS + - Fonction + - Reference +translation_of: Web/CSS/linear-gradient() +original_slug: Web/CSS/linear-gradient() +--- +
{{CSSRef}}
+ +

La fonction linear-gradient() permet de créer une image (type {{cssxref("<image>")}}) représentant un dégradé de couleur linéaire. Le résultat de la fonction sera un objet CSS {{cssxref("<gradient>")}}.

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

Comme pour les autres types de dégradés, la valeur obtenue n'est pas une couleur CSS (type {{cssxref("<color>")}} mais une image sans dimension intrinsèque. Autrement dit, celle-ci ne possède aucune taille « naturelle » ou préférée, sa taille réelle correspondra à la taille de l'élément auquel elle est appliquée.

+ +

Les dégradés linéaires sont définis par un axe : la ligne du dégradé. Chaque point de cette ligne aura une couleur différente. Les lignes perpendiculaires à la ligne du dégradé ont chacune une couleur qui est celle du point se situant sur la ligne du dégradé à ce niveau.

+ +

linear-gradient.png

+ +

La ligne du dégradé est définie par le centre de la boîte contenant le dégradé et par un angle. Les couleurs du dégradé sont définies par différents points : le point de départ et le point d'arrivée. Entre ces deux points, on peut avoir différents points d'arrêt définissant la couleur à ce niveau.

+ +

Le point de départ utilise la couleur initiale du dégradé. Ce point est défini comme l'intersection de la ligne du dégradé et de la ligne perpendiculaire à cette droite et qui passe par le coin de la boîte situé dans le même quadrant.

+ +

De la même façon, le point d'arrivée est le point de la ligne du dégradé où la couleur finale est atteinte. Il peut également être défini comme l'intersection entre la ligne du dégradé et une ligne perpendiculaire, passant par le coin le plus proche.

+ +

Ces définitions plutôt complexes ont des conséquence plutôt intéressantes : les coins les plus proches de ces deux points (parfois appelés « coins magiques ») ont les couleurs de départ et de fin.

+ +

Il est possible de définir des couleurs intermédiaires grâce à des points d'arrêt de couleurs qui seront situés sur la ligne du dégradé. Cela permet de créer une transition non linéaire ou d'utiliser plusieurs couleurs sur un seul dégradé. 

+ +

Lorsque la position d'un point d'arrêt est définie de façon implicite, celui-ci sera placé à mi-chemin entre le point précédent et le point suivant. Sa position pourra aussi être définie explicitement grâce à une valeur {{cssxref("<length>")}} ou {{cssxref("<percentage>")}}.

+ +

La fonction linear-gradient ne permet pas de répéter le motif du dégradé. Pour cela, on pourra utiliser la propriété {{cssxref("repeating-linear-gradient")}}.

+ +
Note : Les dégradés sont des valeurs de type <image> et non des couleurs (type {{cssxref("<color>")}}. Aussi, linear-gradient ne pourra pas être utilisée sur {{cssxref("background-color")}} et sur les autres propriétés qui n'acceptent que des valeurs de type <color>.
+ +

Paramétrer des dégradés

+ +

En ajoutant plus de points d'arrêt de couleurs sur la ligne du dégradé, il est possible de créer des transitions complexes entre plusieurs couleurs. La position d'un point d'arrêt peut être définie de façon explicite en utilisant une longueur (valeur de type {{cssxref("<length>")}}) ou un pourcentage (valeur de type {{cssxref("<percentage>")}}). Si l'emplacement du point d'arrêt n'est pas indiqué, il sera placé à mi-chemin entre les deux points d'arrêt adjacents. Aussi, les deux instructions suivantes sont synonymes :

+ +
linear-gradient(red, orange, yellow, green, blue);
+linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);
+
+ +

Par défaut, la transition entre les couleurs de deux points d'arrêt se fait de façon linéaire et la couleur intermédiaire se situera à mi-chemin. Toutefois, il est possible de déplacer cette couleur intermédiaire entre les deux points d'arrêt en fournissant une indication sur l'emplacement du milieu de la transition. L'instruction qui suit permet de définir un dégradé qui commence par du rouge allant jusqu'à 10%, passe du rouge au bleu avec la couleur intermédiaire située à 30% de la ligne puis finit en bleu pur sur les 10% de la fin de la longueur.

+ +
linear-gradient(red 10%, 30%, blue 90%);
+ +

Si deux points d'arrêt de couleur sont situés au même emplacement, il y aura une ligne de rupture brutale entre les deux couleus des deux points d'arrêts.

+ +

L'ordre des points d'arrêt est important. Si les points d'arrêt ne sont pas déclarés dans l'ordre, les points d'arrêts de valeur inférieure et situés après surchargeront les points précédents. Autrement dit, si une valeur supérieure est située avant une valeur inférieure, la première n'aura aucun effet. Avec le fragment de code qui suit, on obtient un dégradé qui commence en rouge, passe en jaune à 30% puis à bleu à 65%.

+ +
linear-gradient(red 40%, yellow 30%, blue 65%);
+
+ +

Il est possible de définir plusieurs positions d'arrêt sur une même couleur pour des points d'arrêt adjacents. Ainsi, les trois dégradés suivants sont équivalents :

+ +
linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
+linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90%);
+linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);
+
+ +

Par défaut, lorsqu'aucune couleur n'est définie pour le point d'arrêt 0%, c'est la couleur du premier point d'arrêt qui est utilisée au début du dégradé. De même, si aucune couleur n'est explicitement déclarée pour la position 100%, c'est la couleur du dernier point d'arrêt qui sera prolongée.

+ +

Syntaxe

+ +
/* Un dégradé suivant une ligne à 45°
+ qui démarre en bleu et finit en rouge */
+linear-gradient(45deg, blue, red);
+
+/* Un dégradé qui démarre en bas à droite,
+   qui démarre en bleu et finit en rouge */
+linear-gradient(to left top, blue, red);
+
+/* Un dégradé qui démarre du bas et va vers le haut
+   qui commence en bleu, passe en vert à 40% et termine
+   en rouge */
+linear-gradient(0deg, blue, green 40%, red);
+
+/* Indication de couleur : un dégradé de gauche à droite
+   qui commmence en rouge et dont la couleur intermédiaire
+   est située à 10% et laisse les 90% pour la seconde
+   moitié de la transition vers le bleu */
+linear-gradient(.25turn, red, 10%, blue);
+
+/* Plusieurs points d'arrêt par couleur : un dégradé
+   orienté de 45° avec une moitié inférieure gauche
+   rouge et une moitié supérieure droite bleue avec
+   une ligne franche au milieu */
+linear-gradient(45deg, red 0 50%, blue 50% 100%);
+
+ +

Valeurs

+ +
+
<side-or-corner>
+
Représente la position du point de départ de la ligne du dégradé. Elle consiste en deux mots-clés : le premier indique le côté horizontal : left ou right ; le second indique le côté vertical : top ou bottom. L'ordre n'est pas pertinent et chaque mot-clé est optionnel. Si la valeur est absente, elle vaudra to bottom par défaut. Les valeurs to top, to bottom, to left et to right correspondent respectivement aux angles 0deg, 180deg, 270deg, 90deg. Les autres valeurs sont traduites en angles à partir de to top et dans le sens des aiguilles d'une montre. Le point d'arrivé est défini comme le symétrique du point de départ par rapport au centre de la boîte.
+
<angle>
+
L'angle de la direction du dégradé. L'angle démarre à partir de to top et progresse dans le sens des aiguilles d'une montre. Pour plus de détails, voir {{cssxref("<angle>")}}.
+
<linear-color-stop>
+
Un valeur composée d'une valeur {{cssxref("<color>")}} éventuellement suivie d'une position (un pourcentage ou une longueur {{cssxref("<length>")}}) sur l'axe du dégradé. L'affichage des points d'arrêt de couleur en CSS suit les mêmes règles que les dégradés SVG.
+
<color-hint>
+
Cette valeur est une indication pour l'emplacement de la couleur moyenne entre les deux couleurs des points d'arrêt adjacents. Si cette valeur n'est pas utilisée, la moitié de la transition se produit à équidistance entre les deux points d'arrêt.
+
+ +
+

Note : Le rendu des points d'arrêts de couleur pour les dégradés CSS suit les mêmes règles que celui pour les points d'arrêts de couleur pour les dégradés SVG.

+
+ +

Syntaxe formelle

+ +
linear-gradient(
+  [ <angle> | to <side-or-corner> ,]? <color-stop-list> )
+  \---------------------------------/ \----------------------------/
+    Définition de la ligne du dégradé   Liste des arrêts de couleur
+
+où <side-or-corner> = [ left | right ] || [ top | bottom ]
+  et <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
+  et <linear-color-stop> = <color> [ <color-stop-length> ]?
+  et <color-stop-length> = [ <percentage> | <length> ]{1,2}
+  et <color-hint> = [ <percentage> | <length> ]
+ +

Exemples

+ +

Dégradé à 45 degrés

+ +

CSS

+ +
div {
+  background: linear-gradient(135deg, red, blue);
+}
+ +

HTML

+ +
<div style="width: 200px; height: 200px;"></div>
+ +

Résultat

+ +

{{EmbedLiveSample("Dégradé_à_45_degrés")}}

+ +

Décalage du début

+ +

Parfois, on veut que le dégradé commence après le début de la ligne. Pour cela, on ajoute un point d'arrêt de la même couleur que la couleur de début.

+ +

CSS

+ +
div {
+  background: linear-gradient(135deg, red, red 60%, blue);
+}
+ +

HTML

+ +
<div style="width: 200px; height: 200px;"></div>
+ +

Résultat

+ +

{{EmbedLiveSample("Décalage_du_début")}}

+ +

Un dégradé avec plusieurs couleurs

+ +

Si la position du premier point d'arrêt n'est pas définie par une valeur <length> ou <percentage>, sa valeur par défaut sera 0%. Si la position du dernier point d'arrêt n'est pas définie par une valeur <length> ou <percentage>, sa valeur par défaut sera 100%. Si un point d'arrêt n'a aucune indication de position et que ce n'est ni le premier ni le dernier, celui-ci sera situé à mi-chemin entre les deux points d'arrêts qui l'entourent.

+ +

Les points d'arrêt doivent être définis dans l'ordre. Une fois les valeurs associées au premier et au dernier point d'arrêt, si la position d'un point d'arrêt intermédiaire est définie « avant » un point d'arrêt déclaré avant, la position réelle du point d'arrêt intermédiaire sera ramenée à la position du point d'arrêt précédent.

+ +

CSS

+ +
div {
+  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+}
+
+ +

HTML

+ +
<div>Un arc-en-ciel dégradé</div>
+ +

Résultat

+ +

{{EmbedLiveSample("Un_dégradé_avec_plusieurs_couleurs")}}

+ +

Répéter un dégradé linéaire

+ +

La fonction linear-gradient ne permet pas de répéter un dégradé (par défaut le dégradé sera étiré pour remplir tout l'élément). Pour obtenir cette répétition, il faudra utiliser la fonction {{cssxref("repeating-linear-gradient")}}.

+ +

Utiliser la transparence

+ +

CSS

+ +
div {
+  background: linear-gradient(to bottom right, red, rgba(0,0,0,0));
+}
+ +

HTML

+ +
<div>Un dégradé linéaire avec de la transparence</div>
+ +

Résultat

+ +

{{EmbedLiveSample("Utiliser_la_transparence")}}

+ +

Des dégradés pour les différents navigateurs

+ +

Chaque moteur possède des préfixes différents. Voici un dégradé allant du rose vers le vert et de haut en base, exprimé avec les différents préfixes :

+ +
.grad {
+  background-color: #F07575; /* fallback color if gradients are not supported */
+  background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
+  background-image:    -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Firefox (3.6 to 15) */
+  background-image:      -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Opera (11.1 to 12.0) */
+  background-image:         linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */
+}
+
+ +

Le préfixe -moz- est utilisé pour une compatibilité avec Firefox 3.6 jusqu'à Firefox 15. L (Fx 3.6 to Fx 15). Le préfixe -webkit- est le seul qui doit toujours être inclus pour Android 4.3-, iOS jusqu'à la version 6.1 et Safari 6. Lorsqu'on utilise une version préfixée, il ne faut pas utiliser to.

+ +

Un dégradé avec des points d’arrêt à plusieurs couleurs

+ +

Cet exemple utilise des points d'arrêt situés à la même position et avec des couleurs différentes. La transition est donc franche et on obtient ainsi des bandes de couleurs.

+ + + +
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_points_d’arrêts_à_plusieurs_couleurs", 120, 120)}}

+ +
+

Note : Voir la page Utiliser les dégradés CSS pour plus d'exemples.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()')}}{{Spec2('CSS3 Images')}}Définition initiale.
{{SpecName('CSS4 Images', '#color-stop-syntax', 'Gradient Color-Stops')}}{{Spec2('CSS4 Images')}}Ajout des indices d'interpolation.
+ +

Compatibilité des navigateurs

+ + + +

Voir aussi

+ +

{{Compat("css.types.image.gradient.linear-gradient")}}

+ + diff --git a/files/fr/orphaned/web/css/radial-gradient()/index.html b/files/fr/orphaned/web/css/radial-gradient()/index.html new file mode 100644 index 0000000000..aedc50fa68 --- /dev/null +++ b/files/fr/orphaned/web/css/radial-gradient()/index.html @@ -0,0 +1,226 @@ +--- +title: radial-gradient +slug: orphaned/Web/CSS/radial-gradient() +tags: + - CSS + - Fonction + - Reference +translation_of: Web/CSS/radial-gradient() +original_slug: Web/CSS/radial-gradient() +--- +
{{CSSRef}}
+ +

La fonction radial-gradient() permet de créer une {{cssxref("<image>")}} CSS représentant un dégradé de couleur. Ce dégradé diffuse depuis une origine, le centre du gradient. La valeur renvoyée par cette fonction est un objet CSS de type {{cssxref("<gradient>")}}.

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

De façon analogue aux autres types de dégradés, un dégradé radial n'est pas une couleur ({{cssxref("<color>")}}) CSS mais une image sans dimension intrinsèque (c'est-à-dire que celle-ci ne possède pas de taille naturelle ou préférée ni de proportion). Sa taille réelle correspondra à la taille de l'élément auquel le gradient s'applique.

+ +
+

Note : La fonction radial-gradient ne permet pas d'obtenir des dégradés radiaux répétés. Pour obtenir un tel effet concentrique, on pourra utiliser la fonction CSS {{cssxref("repeating-radial-gradient")}}.

+
+ +
+

Note : Une valeur de type <gradient> est également une valeur de type <image>. On peut donc utiliser des dégradés à n'importe quel endroit où on peut utiliser des images. En revanche, un dégradé n'est pas une valeur de type {{cssxref("<color>")}} et ne peut donc pas être utilisé avec les propriétés manipulant ces valeurs (par exemple {{cssxref("background-color")}}).

+
+ +

Composition d'un dégradé radial

+ +

+ +

Les dégradés radiaux sont définis par trois notions :

+ + + +

Pour obtenir un dégradé radial, on trace des formes uniformes concentriques, identiques à la formes de terminaison en partant du centre. Les points de couleur sont positionnés sur un rayon virtuel qui s'étend horizontalement depuis le centre et vers la droite. Lorsqu'on positionne ces points avec des pourcentages, la valeur sera relative au rayon total qui est la distance entre le centre et la forme de terminaison. Chaque forme a une seule couleur qui est déterminée par la couleur du point d'intersection entre le rayon et la forme.

+ +

Les formes de terminaisons peuvent prendre deux formes :

+ + + +

Syntaxe

+ +
/* Un dégradé qui part du centre du conteneur,
+   qui commence en rouge, passe par du bleu
+   et finit en vert. */
+radial-gradient(circle at center, red 0, blue, green 100%)
+ +

Valeurs

+ +
+
<position>
+
Une {{cssxref("<position>")}} CSS qui est interprétée de la même façon que pour les propriétés {{cssxref("background-position")}} ou {{cssxref("transform-origin")}}. La valeur par défaut est center.
+
<shape>
+
La forme du gradient. Elle vaut soit circle (la forme du dégradé sera un cercle de rayon constant) ou ellipse (la forme est une ellipse alignée sur les axes). La valeur par défaut est ellipse.
+
<linear-color-stop>
+
Ces valeurs indiquent qu'une couleur donnée doit être utilisée à un endroit spécifique du dégradé. Cette valeur se compose d'une valeur {{cssxref("<color>")}} éventuellement suivie d'une position définie par une pourcentage ({{cssxref("<percentage>")}}) ou une longueur ({{cssxref("<length>")}}) selon le rayon virtuel du gradient. Un pourcentage ou une longueur nulle (0% ou 0) indiquera le centre du dégradé. La valeur 100% correspondra à l'intersection entre la forme de terminaison et le rayon virtuel. Les valeurs intermédiaires seront situées de façon proportionnelle.
+
<color-hint>
+
Une indication pour définir la progression de l'interpolation entre les deux points d'arrêt de couleur adjacents. La longueur définit l'emplacement auquel la transition aurait été effectuée à moitié entre les deux couleurs.
+
<extent-keyword>
+
Des mots-clés qui permettent de décrire la taille de la forme de terminaison. Les valeurs possibles sont :
+
+ + + + + + + + + + + + + + + + + + + + + + + +
ConstanteDescription
closest-sideLa forme de terminaison du dégradé touche le côté de la boîte le plus proche du centre (pour les cercles) ou touche les côtés horizontaux et verticaux les plus proches du centre (pour les ellipses).
closest-cornerLa forme de terminaison du dégradé est dimensionnée afin de toucher exactement le coin de la boîte le plus proche du centre.
farthest-sideCette valeur fonctionne de façon semblable à closest-side, sauf que ce seront les côtés les plus éloignés qui seront utilisés.
farthest-cornerLa valeur par défaut. Cette valeur fonctionne de façon semblable à closest-corner, sauf que ce sera le coin le plus éloigné qui sera utilisé.
+ D'anciens brouillons de la spécification indiquaient d'autres mots-clés, cover et contain, respectivement synonymes des valeurs standards farthest-corner et closest-side. Seules les valeurs standards doivent être utilisées, certaines implémentations ont d'ailleurs déjà retirées les anciennes formes.
+
+ +

Syntaxe formelle

+ +
radial-gradient(   [ circle || {{cssxref("<length>")}} ] [ at {{cssxref("<position>")}} ]? ,
+                 | [ ellipse || [ {{cssxref("<length>")}}  |  {{cssxref("<percentage>")}}  ]{2}] [ at  {{cssxref("<position>")}}  ]? ,
+                 | [ [ circle | ellipse ] || <extent-keyword> ] [ at  {{cssxref("<position>")}}  ]? ,
+                 | at  {{cssxref("<position>")}}  ,
+                 <color-stop-list> [ , <color-stop-list> ]+ )
+avec <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
+  et <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
+  et <linear-color-stop> = <color> [ <color-stop-length> ]?
+  et <color-stop-length> = [ <percentage> | <length> ]{1,2}
+  et <color-hint> = [ <percentage> | <length> ]
+ +

Exemples

+ +

Une ellipse avec farthest-corner

+ +

CSS

+ +
.exemple {
+  height: 100vh;
+  width: 200vh;
+  background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);
+}
+ +

HTML

+ +
<p class="exemple">
+  Yop
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Une_ellipse_avec_farthest-corner","250","150")}}

+ +

Un cercle de 16 pixels

+ +

CSS

+ +
.exemple {
+  height: 100vh;
+  width: 100vh;
+  background-image: radial-gradient(16px at 60px 50% , #000000 0%, #000000 14px, rgba(0, 0, 0, 0.3) 18px, rgba(0, 0, 0, 0) 19px);
+}
+ +

HTML

+ +
<p class="exemple">
+  Yop
+</p>
+ +

Résultat

+ +

{{EmbedLiveSample("Un_cercle_de_16_pixels","250","150")}}

+ +

Un dégradé simple

+ +
<div class="radial-gradient"></div>
+
+ +
.radial-gradient {
+  width: 240px;
+  height: 120px;
+  background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
+}
+ +

{{EmbedLiveSample('Un_dégradé_simple', 120, 120)}}

+ +

Un dégradé non-centré

+ +
<div class="radial-gradient"></div>
+
+ +
.radial-gradient {
+  width: 240px;
+  height: 120px;
+  background-image: radial-gradient(farthest-corner at 40px 40px,
+      #f35 0%, #43e 100%);
+}
+ +

{{EmbedLiveSample('Un_dégradé_non-centré', 240, 120)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()')}}{{Spec2('CSS3 Images')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.types.image.gradient.radial-gradient")}}

+ +

Notes relatives à Quantum (Firefox)

+ + + +

Voir aussi

+ + diff --git a/files/fr/orphaned/web/css/repeating-conic-gradient()/index.html b/files/fr/orphaned/web/css/repeating-conic-gradient()/index.html new file mode 100644 index 0000000000..bcda50eaa0 --- /dev/null +++ b/files/fr/orphaned/web/css/repeating-conic-gradient()/index.html @@ -0,0 +1,208 @@ +--- +title: repeating-conic-gradient() +slug: orphaned/Web/CSS/repeating-conic-gradient() +tags: + - CSS + - Dégradé + - Fonction + - Reference +translation_of: Web/CSS/repeating-conic-gradient() +original_slug: Web/CSS/repeating-conic-gradient() +--- +
{{draft}} {{CSSRef}}
+ +

La fonction CSS repeating-conic-gradient() crée une image composée d'un dégradé conique répété. Elle permet d'avoir un motif répété qu'on pourrait décrire avec une seule itération grâce à {{cssxref('conic-gradient')}}. Le résultat fourni par la fonction repeating-conic-gradient() est une valeur de type {{CSSxRef("<gradient>")}} qui est un sous-type du type{{CSSxRef("<image>")}}.

+ +

Si le premier ou le dernier arrêt de couleur inclut un angle supérieur à 0deg ou inférieur à 360deg, le dégradé conique ne sera pas répété.

+ +
{{EmbedInteractiveExample("pages/css/function-repeating-conic-gradient.html")}}
+ + + +

À l'instar des autres dégradés, les dégradés coniques répétés n'ont pas de dimensions intrinsèques (c'est-à-dire pas de taille naturelle ou préférée et pas de proportion préférée). La taille finale du dégradé sera la taille de l'élément sur lequel il est appliqué ou la taille indiquée par d'autres propriétés.

+ +

Le type de donnée <gradient>s étant un sous-type d'<image>, on pourra utiliser les dégradés coniques répétés là où des valeurs de type <image> sont attendues. Ainsi, repeating-conic-gradient() ne fonctionnera pas pour la propriété {{CSSxRef("background-color")}} car celle-ci attend une valeur de type {{CSSxRef("<color>")}}.

+ +
+

Note : Afin de créer un dégradé conique qui ne se répète pas, on pourra utiliser la notation fonctionnelle {{CSSxRef("conic-gradient")}}.

+
+ +

Comprendre les dégradés coniques répétés

+ +

La syntaxe pour repeating-conic-gradient est semblable à celle de {{CSSxRef("conic-gradient")}} et à celle de {{CSSxRef("repeating-radial-gradient")}}. À l'instar du dégradé conique unitaire, les arrêts de couleur sont placés autour d'un arc. Comme pour les dégradés radiaux répétés, la taille de la portion répétée correspond au premier arrêt de couleur auquel on a soustrait l'angle du dernier arrêt de couleur.

+ +

Comparison of the color stops for repeating and non-repeating conic and radial gradients

+ +

Les dégradés ci-dessus sont définis avec un tiers de bleu, un tiers de rouge et un tiers de jaune.

+ +
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%);
+
+ +

Pour un dégradé répété, on définit le premier et le dernier arrêt de couleur. Si les valeurs ne sont pas explicitement définies, elles correspondent respectivement aux angles 0 et 360deg. Lorsque ces valeurs sont utilisées par défaut, l'arc qui est répété occupe 360 degrés et il n'y a donc pas de répétition.

+ +

Les arrêts de couleur sont placés autour d'un arc (et non sur une ligne qui s'écarte du centre). L'arc progresse dans le sens horaire.

+ +

Un dégradé conique répété est défini en indiquant un angle de rotation, le centre du dégradé et une liste d'arrêts de couleur. Les arrêts de couleur sont définis avec un angle (type CSS {{cssxref('angle')}}). Les unités qui permettent de déclarer un angle sont deg (pour les degrés), grad (pour les grades), rad (pour les radians) et turn (pour les tours). Un cercle se compose de 360 degrés, 400 grade, 2π radians et d'un tour.

+ +

Les navigateurs qui prennent en charge ces dégradés permettent également d'utiliser des valeurs en pourcentages (où 100% correspond à 360 degrés). Toutefois, ce comportement n'est pas décrit dans la spécification.

+ +

La syntaxe de définition permet de placer le centre du dégradé à l'intérieur ou encore à l'extérieur de l'image. Les valeurs permettant de définir la position du centre s'écrivent comme la syntaxe à deux valeurs de  {{cssxref('background-position')}}.

+ +

Personnaliser des dégradés

+ +

En ajoutant des arrêts de couleur à l'arc du dégradé, il est possible de créer des dégradés sur mesures. La position d'un arrêt de couleur se définit via un {{CSSxRef("<angle>")}}. Si on n'indique pas de position pour un arrêt, celui-ci est placé à mi-parcours entre le précédent et le suivant. Si la position du premier ou du dernier arrêt ne sont pas définies, par défaut, ils seront placés à 0deg et à 360deg respectivement.

+ +

Attention, lorsque ces valeurs par défaut sont utilisées, l'arc occupe tout le cercle et le dégradé n'est donc pas répété.

+ +

Les deux formulations suivantes sont équivalentes :

+ +
repeating-conic-gradient(red, orange, yellow, green, blue 50%);
+repeating-conic-gradient(from -45deg, red 45deg, orange, yellow, green, blue 225deg)
+ +

Par défaut, les couleurs évoluent progressivement entre chaque arrêt et le milieur de l'arc correspondra à la moyenne des couleurs. Il est possible de déplacer ce point intermédiaire en fournissant une indication quant à l'emplacement du milieu de la transition.

+ +

Si deux (voire plusieurs) couleurs sont au même emplacement, la transition sera une ligne brutale entre la première et la dernière couleur déclarées à cet emplacement.

+ +

Bien qu'il soit possible de mélanger et de combiner différentes unités pour les angles, il est préférable d'éviter par souci de lisibilité / maintenabilité.

+ +

Syntaxe

+ +
background: repeating-conic-gradient(
+    from 3deg at 25% 25%,
+    hsl(200, 100%, 50%) 0deg 15deg,
+    hsl(200, 100%, 60%) 10deg 30deg);
+);
+ +

Values

+ +
+
{{CSSxRef("<angle>")}}
+
Lorsque cet angle est précédé du mot-clé from, cela définit la rotation du dégradé dans le sens horaire.
+
<position>
+
Une position définie avec la même syntaxe que la propriété {{cssxref("background-position")}}. Cette position définit le centre du dégradé. Lorsque cette valeur est absente, la valeur utilisée par défaut est center, ce qui indique que le dégradé est centré.
+
<angular-color-stop>
+
Une valeur {{CSSxRef("<color>")}} pour un arrêt de couleur, suivie par une ou plusieurs positions d'arrêt (données par un {{CSSxRef("<angle>")}} le long de l'arc). La taille de l'arc répété pour le dégradé est donné par l'angle du dernier arrêt de couleur auquel on a soustrait l'angle du premier arrêt de couleur.
+
<color-hint>
+
Une indication d'interpolation qui définit la façon dont le dégradé progresse entre deux arrêts de couleurs adjacents. Cette indication indique l'emplacement où la couleur doit être la couleur intermédiaire entre les deux arrêts environnant. Si cette valeur est absente, la moitié de la transition entre les couleurs sera atteinte à la moitié de l'arc entre les deux arrêts.
+
+
+

Note : Le rendu des arrêts de couleur pour les dégradés CSS suit les mêmes règles que celui des arrêts de couleur pour les dégradés SVG.

+
+
+
+ +

Syntaxe formelle

+ +
repeating-conic-gradient(
+  [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )
+  \---------------------------------/ \----------------------------/
+        Définition du dégradé            Liste d'arrêts de couleur
+
+where <angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>
+  and <angular-color-stop> = <color> && <color-stop-angle>?
+  and <angular-color-hint> = <angle-percentage>
+  and <color-stop-angle> = <angle-percentage>{1,2}
+ +

Exemples

+ +
+

Noir et blanc

+ + + +
div {
+  background-image:
+     repeating-conic-gradient(#fff 0 9deg, #000 9deg 18deg);
+}
+
+ +

{{EmbedLiveSample("Noir_et_blanc", 220, 220)}}

+
+ +
+

Dégradé désaxé

+ + + +
div {
+  background: repeating-conic-gradient(
+    from 3deg at 25% 25%,
+    green, blue 2deg 5deg, green, yellow 15deg 18deg, green 20deg);
+}
+ +

{{EmbedLiveSample("Dégradé_désaxé", 220, 220)}}

+ +

Le degradé est répété 18 fois mais on en voit que la moitié droite et on voit donc 9 répétitions.

+
+ +
+

Note : Voir la page Utiliser les dégradés en CSS pour plus d'exemples.

+
+ +

Accessibilité

+ +

Les navigateurs ne fournissent pas d'informations spécifiques aux outils d'assistance quant aux images d'arrière-plan. Les lecteurs d'écran ne pourront donc pas annoncer le sens de l'image aux utilisateurs. Bien qu'il soit possible de créer des camemberts, damiers, etc. avec CSS, si l'image contient des informations critiques pour la compréhension générale de la page, mieux vaudra décrire ces informations de façon sémantique dans le document.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS4 Images', '#repeating-gradients', 'repeating-conic-gradient()')}}{{Spec2('CSS4 Images')}}
+ +

Compatibilité des navigateurs

+ + + +
{{Compat("css.types.image.gradient.conic-gradient")}}
+ +

Voir aussi

+ + diff --git a/files/fr/orphaned/web/css/repeating-linear-gradient()/index.html b/files/fr/orphaned/web/css/repeating-linear-gradient()/index.html new file mode 100644 index 0000000000..b19a047d62 --- /dev/null +++ b/files/fr/orphaned/web/css/repeating-linear-gradient()/index.html @@ -0,0 +1,175 @@ +--- +title: repeating-linear-gradient +slug: orphaned/Web/CSS/repeating-linear-gradient() +tags: + - CSS + - Fonction + - Reference +translation_of: Web/CSS/repeating-linear-gradient() +original_slug: Web/CSS/repeating-linear-gradient() +--- +
{{CSSRef}}
+ +

La fonction CSS repeating-linear-gradient créé une {{cssxref("<image>")}} composée de dégradés qui se répètent. Cela fonctionne de manière similaire aux dégradés linéaires simples décrits les mêmes arguments que les dégradés linéaires basiques représentés avec {{cssxref("linear-gradient")}} mais les points d'arrêt des couleurs sont automatiquement répétés, indéfiniment, dans les deux directions (les points d'arrêt sont répétés d'autant que la distance qui sépare le premier et le dernier point d'arrêt).

+ +
{{EmbedInteractiveExample("pages/css/function-repeating-linear-gradient.html")}}
+ + + +

Par conséquent, la ligne de la couleur de fin coïncide toujours avec la ligne de la couleur de début. Si les deux ne sont pas identiques, on obtiendra alors une transition abrupte.

+ +

Comme pour les autres dégradés, un dégradé linéaire répété n'est pas une couleur (type {{cssxref("<color>")}}) CSS mais une image (type {{cssxref("<image>")}}) sans dimension intrinsèque ; c'est-à-dire, qu'il n'a ni taille naturelle ni taille préférée. Sa taille réelle s'adapte à l'élément auquel il s'applique.

+ +
+

Note : Le type <gradient> est un sous-type du type  <image>. À ce titre, repeating-linear-gradient() ne fonctionnera pas pour {{cssxref("background-color")}} et les autres propriétés qui utilisent le type de données {{cssxref("<color>")}}.

+
+ +

Syntaxe

+ +
/* Un dégradé répétitif sur un axe à 45 degrés */
+/* débutant bleu et finissant rouge, répété 3 fois */
+repeating-linear-gradient( 45deg, blue, red 33.3% );
+
+/* Un dégradé répétitif allant du coin inférieur droit */
+/* à coin supérieur gauche débutant bleu et finissant rouge */
+/* et répété tous les 20 pixels */
+repeating-linear-gradient( to left top, blue, red 20px);
+
+/* Un dégradé répétitif allant du bas vers le haut, */
+/* débutant bleu, étant vert après 40% et finissant rouge */
+repeating-linear-gradient( 0deg, blue, green 40%, red );
+
+/* Un dégradé répété cinq fois, progressant de gauche à
+   droite, commençant en rouge, passant en vert puis à
+   nouveau en rouge */
+repeating-linear-gradient(to right, red 0%, green 10%, red 20%);
+ +

Valeurs

+ +
+
<side-or-corner>
+
Représente la position du point de départ de la ligne de dégradé. Cette valeur comprends deux mots-clés : le premier indique le côté sur une ligne horizontale, left ou right, le second indique le côté sur une ligne verticale, top ou bottom. L'ordre n'a pas d'influence et chacun des mots-clés est optionnel.
+ Les valeurs to top, to bottom, to left et to right sont respectivement traduites vers les angles 0deg, 180deg, 270deg, 90deg. Les autres sont traduites vers des angles qui permettent au point de départ d'être dans le même quadrant que le coin décrit et que la ligne définie par le point de départ et le coin soit perpendiculaire à la ligne de dégradé. De cette manière, la couleur décrite par le point d'arrêt sera exactement celle du coin. Ceci est parfois appelé la propriété du « coin magique ». Le point de fin de la ligne de dégradé est le point symétrique de du point de départ dans l'autre direction par rapport au centre de la boîte.
+
<angle>
+
Un angle pour la direction du dégradé. L'angle démarre à 0deg (ce qui est équivalent à to top) et progresse dans le sens des aiguilles d'une montre. Voir {{cssxref("<angle>")}}.
+
<linear-color-stop>
+
Cette valeur est composée d'une valeur de  couleur (type {{cssxref("<color>")}}), suivie d'une position d'arrêt optionnelle (soit un pourcentage entre 0% et 100% ou une longueur (type {{cssxref("<length>")}}) mesurée le long de l'axe du dégradé).
+
<color-hint>
+
L'indication de couleur est une indication pour l'interpolation des couleurs le long du dégradé et entre deux points d'arrêt de couleur. La longueur définit l'emplacement où la transition entre les deux couleurs est appliquée à moitié. Si cette valeur est absente, le niveau intermédiaire de la transition se situera à équidistance des deux points d'arrêt de couleur.
+
Le rendu des points d'arrêt en CSS suit les mêmes règles que les dégradés en SVG.
+
+ +

Syntaxe formelle

+ +
repeating-linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop-list> )
+                            \---------------------------------/ \---------------/
+                              Définition de la ligne du dégradé Liste des points d'arrêt
+
+où <side-or-corner> = [left | right] || [top | bottom]
+  et <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
+  et <linear-color-stop> = <color> [ <color-stop-length> ]?
+  et <color-stop-length> = [ <percentage> | <length> ]{1,2}
+  et <color-hint> = [ <percentage> | <length> ]
+
+ +

Exemples

+ +

Bandes zébrées

+ + + +
body {
+  background-image: repeating-linear-gradient(-45deg,
+      transparent,
+      transparent 20px,
+      black 20px,
+      black 40px);
+  /* avec plusieurs longueurs pour les points d'arrêt */
+  background-image: repeating-linear-gradient(-45deg,
+      transparent 0 20px,
+      black 20px 40px);
+}
+
+ +

{{EmbedLiveSample('Bandes_zébrées', 120, 120)}}

+ +

Dix barres horizontales répétées

+ + + +
body {
+  background-image: repeating-linear-gradient(to bottom,
+      rgb(26,198,204),
+      rgb(26,198,204) 7%,
+      rgb(100,100,100) 10%);
+}
+
+ +

{{EmbedLiveSample('Dix_barres_horizontales_répétées', 120, 120)}}

+ +

Comme le dernier point d'arrêt est situé à 10% et que le dégradé est vertical, chaque dégradé occupera 10% de la hauteur et on aura donc au total dix barres horizontales.

+ +
+

Note : Voir la page Manipuler les dégradés CSS pour plus d'exemples.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Images', '#repeating-gradients', 'repeating-linear-gradient()')}}{{Spec2('CSS3 Images')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.types.image.gradient.repeating-linear-gradient")}}

+ +

Voir aussi

+ + diff --git a/files/fr/orphaned/web/css/repeating-radial-gradient()/index.html b/files/fr/orphaned/web/css/repeating-radial-gradient()/index.html new file mode 100644 index 0000000000..e3aede853b --- /dev/null +++ b/files/fr/orphaned/web/css/repeating-radial-gradient()/index.html @@ -0,0 +1,166 @@ +--- +title: repeating-radial-gradient() +slug: orphaned/Web/CSS/repeating-radial-gradient() +tags: + - CSS + - Fonction + - Reference +translation_of: Web/CSS/repeating-radial-gradient() +original_slug: Web/CSS/repeating-radial-gradient() +--- +
{{CSSRef}}
+ +

La fonction repeating-radial-gradient() fonctionne de façon similaire à {{cssxref("radial-gradient")}} mais répète les couleurs de façon infinie dans les deux directions avec des répétitions formant des bandes de gradient (de façon analogue à {{cssxref("repeating-linear-gradient")}} qui permet de répéter un dégradé linéaire ({{cssxref("linear-gradient")}}).

+ +
{{EmbedInteractiveExample("pages/css/function-repeating-radial-gradient.html")}}
+ + + +

Comme pour les autres gradients, un gradient radial répété n'est pas une couleur CSS : ce n'est pas une valeur de type {{cssxref("<color>")}} mais une image (type {{cssxref("<image>")}}) sans dimension intrinsèque : elle n'a pas de taille naturelle ou préférée ni de proportion. Sa taille réelle correspondra à celle de l'élément où est appliqué le gradient.

+ +
+

Note : En CSS, un dégradé est une image (type de données {{cssxref("<image>")}} et une telle valeur ne peut être utilisée qu'avec les propriétés qui gèrent des images. Ainsi, repeating-radial-gradient() ne fonctionnera pas avec {{cssxref("background-color")}} ou avec les autres propriétés qui acceptent des couleurs (type de données {{cssxref("<color>")}}).

+
+ +

Syntaxe

+ +
/* Un dégradé répété qui part du centre de son conteneur,
+   en commençant par du rouge, passant par du bleu puis,
+   finissant par du vert */
+repeating-radial-gradient(circle at center, red 0, blue, green 30px);
+
+/* Un dégradé elliptique qui commence dans le coin supérieur gauche
+   en commençant rouge puis en passant au vert, cinq fois entre le
+   centre et le coin inférieur droit et une seule fois entre le
+   centre et le coin supérieur gauche */
+repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%);
+
+ +

Valeurs

+ +
+
<position>
+
Une position CSS ({{cssxref("<position>")}}) qui sera interprétée de la même façon que {{cssxref("background-position")}} ou {{cssxref("transform-origin")}}. La valeur par défaut est center.
+
<shape>
+
La forme du gradient employé. C'est un mot-clé parmi circle (le dégradé est circulaire avec un rayon constant) ou ellipse (la forme est elliptique et l'axe est aligné avec la direction indiquée). La valeur par défaut est ellipse.
+
<size>
+
La taille du gradient (cf. la section sur les constantes dimensionnelles ci-après).
+
<color-stop>
+
Cette valeur représente une couleur fixe à une position donnée. Cette valeur est composée d'une valeur {{cssxref("<color>")}} éventuellement suivie d'une position d'arrêt (une valeur {{cssxref("<percentage>")}} ou {{cssxref("<length>")}} représentant l'emplacement sur la ligne du gradient). Une valeur de 0% ou 0 représentera le centre du gradient et la valeur de 100% représentera la fin de la forme qu'occupe le dégradé. Les valeurs intermédiaires sont positionnées de façon proportionnelles sur le rayon.
+
<extent-keyword>
+
Des mots-clés qui déterminent la taille de la forme. Les valeurs possibles sont :
+
+ + + + + + + + + + + + + + + + + + + + + + + +
ConstanteDescription
closest-sideLa forme du gradient est délimitée par les côtés de la boîtes qui sont le plus proche du centre dans le cas des cercles. Dans le cas des ellipses, elle est délimitée par les côtés horizontaux et verticaux de la boîte.
closest-cornerLa forme du gradient est dimensionnée afin d'atteindre exactement le coin de la boîte le plus proche du centre.
farthest-sideFonctionne de façon similaire à closest-side mais cette fois, ce sont les côtés les plus éloignés du centre qui servent de délimitation.
farthest-cornerFonctionne de façon similaire à closest-corner mais dans ce cas, c'est le coin le plus éloigné du centre qui est utilisé comme délimitation.
+ Les premières versions du brouillon utilisaient d'autres termes comme cover et contain, respectivement synonymes de farthest-corner et closest-side. Certaines implémentations ont abandonné ces termes et on préfèrera donc utiliser les mots-clés précédemment listés.
+
+ +

Syntaxe formelle

+ +{{csssyntax}} + +

Exemples

+ +

Dégradé noir et blanc

+ +

HTML

+ +
<div class="radial-gradient"></div>
+
+ +

CSS

+ +
.radial-gradient {
+  width: 120px;
+  height: 120px;
+  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample('Dégradé_noir_et_blanc', 120, 120)}}

+ +

Utilisation de farthest-corner

+ +

HTML

+ +
<div class="radial-gradient"></div>
+
+ +

CSS

+ +
.radial-gradient {
+  width: 120px;
+  height: 120px;
+  background: repeating-radial-gradient(ellipse farthest-corner,
+      red, black 5%, blue 5%, green 10%);
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample('Utilisation_de_farthest-corner', 120, 120)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('CSS3 Images', '#repeating-gradients', 'repeating-radial-gradient()')}}{{Spec2('CSS3 Images')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.types.image.gradient.repeating-radial-gradient")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/css/conic-gradient()/index.html b/files/fr/web/css/conic-gradient()/index.html deleted file mode 100644 index a403061a07..0000000000 --- a/files/fr/web/css/conic-gradient()/index.html +++ /dev/null @@ -1,264 +0,0 @@ ---- -title: conic-gradient() -slug: Web/CSS/conic-gradient() -tags: - - CSS - - Fonction - - Guide - - Reference -translation_of: Web/CSS/conic-gradient() ---- -
{{CSSRef}}
- -

La fonction CSS conic-gradient() permet de créer une image consistuée d'un dégradé radial pour lequel les transitions entre les couleurs ont lieu autour d'un centre plutôt que depuis le centre. Un dégradé conique pourra par exemple être un graphique en camembert. Le résultat de la fonction conic-gradient() est un objet du type de données {{CSSxRef("<gradient>")}} qui est un type particulier d'{{CSSxRef("<image>")}}.

- -

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

- - - -

À l'instar des autres dégradés, les dégradés coniques ne possèdent pas de dimension intrinsèque (ils n'ont pas de taille préférentielle ou de ratio) : la taille réelle correspondra à la taille de l'élément auquel le dégradé s'applique ou à la taille de l'image.

- -

Pour créer un dégradé conique qui se répète afin de couvrir 360° (un tour complet), on utilisera plutôt la notation fonctionnelle {{CSSxRef("repeating-conic-gradient")}}.

- -

Les dégradés (<gradient>) sont un type d'image (<image>) et ne peuvent être utilisés qu'aux endroits où les images peuvent être utilisées. Aussi, conic-gradient() ne fonctionnera pas pour la propriété {{CSSxRef("background-color")}} ou pour les autres propriétés qui utilisent les données de type {{CSSxRef("<color>")}}.

- -
-

Note : Un tel dégradé est appelé conique car, vu du dessus, la répartition des couleurs fait apparaître un cône.

-
- -

Qu'est-ce qu'un dégradé conique ?

- -

Un dégradé conique est semblable à un dégradé radial mais les transitions de couleurs sont placées sur différents angles plutôt que sur différents rayons. Avec les dégradés coniques, les transition entre les couleurs commencent depuis la direction pointant vers le haut puis dans le sens des aiguilles d'une montre. Avec un dégradé radial, les transitions progressent depuis le centre vers l'extérieur du cercle.

- -

color stops along the circumference of a conic gradient and the axis of a radial gradient.

- -

Un dégradé conique est défini en indiquant un angle de rotation, le centre du dégradé puis en indiquant une liste de points d'arrêt de couleur. À la différence des dégradés linéaires et des dégradés radiaux pour lesquels les points d'arrêt de couleur sont placés avec une longueur, les points d'arrêt de couleur d'un dégradé conique sont placés à l'aide d'un angle. Les unités utilisables pour les angles sont deg (pour les degrés), rad (pour les radians), grad (pour les grades) et turn (pour les tours). Un cercle se divise en 360 degrés, 400 grades, 2 radians et un tour. Les navigateurs qui prennent en charge les dégradés coniques acceptent également les valeurs exprimées en pourcentage (100% correspondant à 360 degrés) mais cela ne fait pas partie de la spécification.

- -

Comme pour les dégradés radiaux, la syntaxe pour les dégradés coniques permet de situer le centre du dégradé à n'importe quel endroit de l'image ou de l'élément, même en dehors. La position s'exprime avec deux valeurs, de façon semblable à la syntaxe de {{cssxref("background-position")}}.

- -

L'arc du dégradé représente le périmètre du dégradé. Le point de départ du dégradé est situé en haut de l'axe vertical. Ensuite le dégradé évolue à partir de cet angle. Les couleurs du dégradé sont déterminées grâce aux points d'arrêt de couleur angulaires, aux points de départ et aux points d'arrivée et éventuellement aux points d'arrêt intermédiaires. Les transitions entre les couleurs peuvent être modifiées grâce à des indications entre les différents points d'arrêt.

- -

Adapter les dégradés

- -

En ajoutant plusieurs points d'arrêt de couleur sur l'arc du dégradé, il est possible de créer une transition personnalisée entre de nombreuses couleurs. La position d'un point d'arrêt de couleur peut être définie de façon explicite grâce à une valeur de type {{CSSxRef("<angle>")}}. Si on ne définit pas l'emplacement d'un point d'arrêt, ce dernier sera placé à mi-chemin entre le point d'arrêt précédent et le suivant. Si on ne définit pas d'angle pour le premier ou le dernier point d'arrêt de couleur, ils seront respectivement situés à 0deg et 360deg. Autrement dit, les deux dégradés suivants sont équivalents :

- -
conic-gradient(red, orange, yellow, green, blue);
-conic-gradient(red 0deg, orange 90deg, yellow 180deg, green 270deg, blue 360deg);
- -

Par défaut, la transition entre les couleurs de deux points d'arrêt se fera progressivement avec la moitié de la transition à la moitié de l'angle. Ce milieu de transition peut être déplacé en ajoutant une indication de couleur qui définit l'emplacement voulu. L'exemple suivant commence avec du rouge jusqu'à 10%, fait une transition du rouge au bleu sur 80% du tour, les 10% restants sont en bleu. Cependant, le point de changement entre le bleu et le rouge se situe à 20% plutôt qu'à 50% (ce qui se serait produit sans l'indication 80grad).

- -
conic-gradient(red 40grad, 80grad, blue 360grad);
- -

Si deux ou plusieurs points d'arrêt de couleur partagent le même emplacement, la transition sera franche entre la première et la dernière couleur déclarées pour cet emplacement. Si on emploie les dégradés coniques pour faire des camemberts (une mauvaise pratique car les dégradés ne sont pas accessibles), on peut utiliser des points d'arrêt avec plusieurs couleurs au même endroit pour créer une transition nette. Les deux déclarations suivantes sont synonymes :

- -
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);
- -

Les points d'arrêt de couleur devraient être listés dans l'ordre croissant. Les points d'arrêt situés après mais dont la valeur d'angle est inférieure surchargeront les valeurs des points d'arrêt précédents et créeraient une rupture tranchée. Le dégradé qui suit passe de rouge à jaune à 30% puis de jaune à bleu après 35% :

- -
conic-gradient(red .8rad, yellow .6rad, blue 1.3rad);
-
- -

Il est possible d'obtenir d'autres effets avec les dégradés coniques. On peut même créer un damier en créant des quadrants supérieurs gauches et inférieurs droits en blanc et supérieurs droits et inférieurs gauches en noir puis en répétant le dégradé 16 fois (quatre fois en horizontal et quatre fois en vertical) :

- -
conic-gradient(#fff 90deg, #000 0.25turn 0.5turn, #fff 1rad 1.5rad, #000 300grad);
-background-size: 25% 25%;
-
- -

On voit avec l'exemple précédent qu'il est aussi possible de mélanger différentes unités d'angle mais attention, cela diminue fortement la lisibilité.

- -

Syntaxe

- -
/* Un dégradé conique tourné de 45 degrés,
-   qui commence en bleu et finit en rouge */
-conic-gradient(from 45deg, blue, red);
-
-/* Une boîte bleu violette : le dégradé commence du bleu
-   vers le rouge mais seule la partie inférieure droite du
-   quadrant est visible car le centre du dégradé conique est
-   dans le coin supérieur gauche */
-conic-gradient(from 90deg at 0 0, blue, red);
-
-/* Une roue des couleurs */
-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%)
-);
- -

Valeurs

- -
-
{{CSSxRef("<angle>")}}
-
Une valeur précédée du mot-clé from qui indique un angle et qui définit la rotation du dégradé selon le sens des aiguilles d'une montre.
-
<position>
-
La position définit le centre du dégradé en respectant la même syntaxe que celle utilisée pour la propriété {{cssxref("background-position")}}. Si cette valeur est absente, ce sera la valeur center qui sera utilisée comme valeur par défaut, indiquant que le dégradé sera centré.
-
<angular-color-stop>
-
Un point d'arrêt de couleur utilisant une valeur de type {{CSSxRef("<color>")}} suivie par une ou deux positions d'arrêt (une valeur de type {{CSSxRef("<angle>")}} située le long de l'arc du dégradé).
-
<color-hint>
-
Une indication de couleur pour l'interpolation entre deux points d'arrêt. La longueur définit l'emplacement où les deux couleurs des points d'arrêts alentour doivent se joindre. Autrement dit, la longueur à laquelle la transition est effectuée à moitié. Si cette valeur est absente, la moitié de la transition est atteinte à la moitié de l'angle entre les deux points d'arrêt.
-
-
-

Note : Le rendu des points d'arrêt de couleur pour les dégradés CSS respecte les mêmes règles que les points d'arrêt de couleur des dégradés SVG.

-
-
-
- -

Syntaxe formelle

- -
conic-gradient(
-  [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )
-  \---------------------------------/ \----------------------------/
-        Gradient definition                List of color stops
-
-where <angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>
-  and <angular-color-stop> = <color> && <color-stop-angle>?
-  and <angular-color-hint> = <angle-percentage>
-  and <color-stop-angle> = <angle-percentage>{1,2}
- -

Exemples

- -
-

Un dégradé à 40°

- - - -
div {
-  background-image:
-     conic-gradient(from 40deg, #fff, #000);
-}
-
- -

{{EmbedLiveSample("Un_dégradé_à_40°", 120, 120)}}

-
- -
-

Un dégradé décentré

- - - -
div {
-  background: conic-gradient(from 0deg at 0% 25%, blue, green, yellow 180deg);
-}
- -

{{EmbedLiveSample("Un_dégradé_décentré", 120, 120)}}

-
- -
-

Un camembert sous forme de dégradé

- -

This example uses multi-position color stops, with adjacent colors having the same color stop value, creating a striped effect.

- - - -
div {
-  background: conic-gradient(
-     red 36deg, orange 36deg 170deg, yellow 170deg);
-  border-radius: 50%
-}
- -

{{EmbedLiveSample("Un_camembert_sous_forme_de_dégradé", 120, 120)}}

-
- -
-

Un damier

- - - -
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("Un_damier", 120, 120)}}

-
- -
-

Note : Voir Utiliser les dégradés CSS pour plus d'exemples.

-
- -

Acessibilité

- -

Les outils d'assistance ne peuvent pas analyser les images d'arrière-plan. Aussi, bien qu'il soit possible de créer des camemberts graphiques, des damiers ou d'autres effets grâce aux dégradés coniques, les images construites en CSS ne sont pas accessibles. Les images créées avec des dégradés coniques ne sont donc pas accessibles non plus. 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.

- - - -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Images', '#conic-gradients', 'conic-gradient()')}}{{Spec2('CSS4 Images')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("css.types.image.gradient.conic-gradient")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/image()/index.html b/files/fr/web/css/image()/index.html deleted file mode 100644 index 5e9e07d389..0000000000 --- a/files/fr/web/css/image()/index.html +++ /dev/null @@ -1,175 +0,0 @@ ---- -title: image() -slug: Web/CSS/image() -tags: - - CSS - - Fonction - - Reference -translation_of: Web/CSS/image() ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

La fonction CSS image() définit une image (type {{cssxref("<image>")}}) à la façon du type {{cssxref("<url>")}} mais avec des fonctionnalités supplémentaires comme la définition de la directionnalité, la possibilité d'indiquer une image par défaut si l'image initiale n'est pas prise en charge, l'affichage d'une partie de l'image ou le choix de la couleur à utiliser par défaut si aucune des images indiquées ne peut être affichée.

- -
-

Note : Attention à ne pas confondre cette notation fonctionnelle CSS avec le constructeur {{DOMxRef("HTMLImageElement/Image", "Image() pour HTMLImageElement","",1)}}.

-
- -

Syntaxe

- -{{CSSSyntax("image()")}} - -

Paramètres

- -
-
image-tags{{optional_inline}}
-
La directionnalité de l'image, la valeur ltr pourra être utilisée afin d'indiquer que l'image est orientée de gauche à droite et la valeur rtl indiquera de droite à gauche.
-
image-src{{optional_inline}}
-
Zéro, une ou plusieurs URL ({{CSSxRef("<url>")}}) ou chaînes de caractères ({{CSSxRef("<string>")}}) indiquant des sources d'image et qui contiennent éventuellement des identifiants de fragment.
-
color{{optional_inline}}
-
Une couleur par défaut. Cette couleur sera utilisée par défaut si aucune image n'est trouvée ou prise en charge parmi les images fournies via image-src.
-
- -

Gestion de la directionnalité

- -

Le premier paramètre de la fonction image() est optionnel et indique la directionnalité de l'image. Lorsque ce paramètre est utilisé et que l'image est utilisée au sein d'un élément ayant la directionnalité opposée, l'image sera renversée horizontalement pour les modes d'écriture horizontaux. Si ce paramètre n'est pas utilisé, l'image ne sera pas renversée.

- -

Fragments d'image

- -

Une différence fondamentale entre url() et image() est la possibilité d'ajouter un identifiant de fragment d'image. Un identifiant de fragment est donné par : un point de départ défini par ses coordonnées x et y et par une largeur et une hauteur. Cela permet de ne sélectionner qu'une section de l'image source. La section ainsi définie devient une image à part entière aux yeux du moteur de rendu.

- -
background-image: image('monimage.webp#xywh=0,20,40,60');
- -

Avec l'exemple précédent, l'image d'arrière-plan utilisée sera une section de l'image myImage.webp commençant à la coordonnée (0px,20px), ayant une largeur de 40px et une hauteur de 60px.

- -

La syntaxe pour l'identifiant de fragment #xywh=#,#,#,# prend quatre arguments numériques séparés par des virgules. Les deux premiers arguments représentent les coordonnées X et Y du point de départ pour la section, la troisième valeur correspond à la largeur de la portion et la quatrième correspond à la hauteur. Par défaut, ces coordonnées et ces mesures sont exprimées en pixels. La définition de la dimension spatiale de la spécification des média indique que les pourcentages peuvent également être pris en charge.

- -
xywh=160,120,320,240        /* créera une image sur 320x240 à x=160 et y=120 */
-xywh=pixel:160,120,320,240  /* créera une image sur 320x240 à x=160 et y=120 */
-xywh=percent:25,25,50,50    /* créera une image sur 50%x50% à x=25% et y=25% */
- -

Les fragments d'image peuvent également être utilisés avec la notation url(). La syntaxe #xywh=#,#,#,# est rétrocompatible car elle sera ignorée si elle n'est pas comprise et elle ne rendra pas la source invalide si elle est utilisée avec la notation url(). Si le navigateur ne prend pas en charge les notations pour les fragments de média, il ignorera la définition du fragment et affichera l'image intégralement.

- -

Les navigateurs qui prennent en charge image() prennent également en charge la notation pour les fragments. Ainsi si le fragment fourni est invalide dans la source pour image(), l'image résultante sera considérée invalide.

- -

Couleur par défaut

- -

Si les deux derniers arguments sont utilisés et dans le cas où les images fournies sont invalides, la fonction image() génèrera une image à partir de la couleur indiquée. Cette couleur apparaîtra uniquement dans le cas où l'image source n'est pas utilisable. Ainsi, si on a choisi une image sombre sur laquelle afficher du texte clair, autant prévoir une couleur sombre au cas où afin de garantir un contraste acceptable.

- -

Il est possible de ne pas définir d'image source et de ne passer qu'une couleur comme argument.

- -

À la différence de {{cssxref("background-color")}} dont la couleur sera placée derrière l'ensemble des images d'arrière-plan, on peut utiliser image() afin de placer des couleurs sur d'autres images.

- -

La taille du rectangle de couleur appliqué peut être défini grâce à la propriété {{cssxref("background-size")}}. Ce comportement diffère de background-color qui définit une couleur pour couvrir l'ensemble de l'élément. image(color) et background-color pourront être déplacés grâce aux propriétés {{cssxref("background-clip")}} et {{cssxref("background-origin")}}.

- -

Exemples

- -

Utiliser des images prenant en compte la directionnalité

- -
<ul>
-  <li dir="ltr">La puce est une flèche pointant à droite et située à gauche.</li>
-  <li dir="rtl">La puce est la même flèche mais renversée pour pointer à gauche.</li>
-</ul>
- -
ul {
-  list-style-image: image(ltr 'rightarrow.jpg');
-}
- -

Pour les éléments de la liste allant de gauche à droite (ceux avec dir="ltr" ou qui héritent de cette direction depuis leur ancêtre), l'image pour la puce sera utilisée telle quelle. Les éléments de la liste avec dir="rtl" (que ce soit explicitement défini comme ici ou que cette direction provienne de la direction par défaut du document, par exemple un document en arabe ou en hébreu), l'image sera affichée à droite et sera renversée horizontalement (de la même façon qu'avec transform: scalex(-1)). Le texte sera également affiché de gauche à droite.

- -

{{EmbedLiveSample("Utiliser_des_images_prenant_en_compte_la_directionnalité","100%","200")}}

- -
-

Afficher une partie (sprite)

- -
<div class="box">Vous pouvez survoler cet élément pour voir un autre curseur.</div>
-
- -
.box:hover {
-   cursor: image("https://mdn.mozillademos.org/files/16411/sprite.png#xywh=32,64,16,16");
-}
- -

Lorsque l'utilisateur survole la boîte, le curseur changera pour afficher une section d'un sprite mesurant 16 pixels de large et de haut et commençant à x=32 et y=64 sur l'image totale.

- -
{{EmbedLiveSample("Afficher_une_partie_sprite","100%","100")}}
-
- -
-

Fournir des images alternatives

- -
.help::before {
-  content: image("try.webp", "try.svg", "try.gif");
-}
- -

Dans cet exemple, le navigateur affichera une image comme contenu généré précédent tous les éléments avec la classe help. Si le navigateur prend en charge le format WebP, ce sera try.webp qui sera affichée, sinon si le navigateur prend en charge le format SVG, ce sera try.svg qui sera affichée et sinon, ce sera try.gif qui sera utilisée.

-
- -
-

Placer une couleur sur une image en arrière-plan

- -
.quarterlogo {height: 200px; width: 200px; border: 1px solid;}
- -
.quarterlogo {
-  background-image:
-    image(rgba(0, 0, 0, 0.25)),
-    url("https://mdn.mozillademos.org/files/12053/firefox.png");
-  background-size: 25%;
-  background-repeat: no-repeat;
-}
- -
<div class="quarterlogo">If supported, a quarter of this div has a darkened logo</div>
-
- -

Dans l'exempel précédent, on placera un masque noir semi-transparent sur le logo Firefox utilisé comme image d'arrière-plan. Si on avait utilisé la propriété background-color à la place, la couleur aurait été placée sous le logo et non sur lui. De plus, le conteneur entier aurait eu cette couleur en arrière-plan. Avec image() et {{cssxref("background-size")}} (tout en empêchant l'aimge de se répéter grâce à {{cssxref("background-repeat")}}), le voile noir ne couvrira qu'un quart du conteneur.

- -
{{EmbedLiveSample("Placer_une_couleur_sur_une_image_en_arrière-plan","100%","220")}}
-
- -

Accessibilité

- -

Les outils d'assistance ne peuvent pas analyser les images d'arrière-plan acr les navigateurs n'extraient pas d'informations du contenu visuel des images. Si l'image contient des informations essentielles à la compréhension du document, il faudra décrire ces informations de façon sémantique dans le document afin, entre autres, que les outils d'assistance puissent transmettre les informations aux utilisateurs.

- - - -

Cette fonctionnalité permet d'améliorer l'accessibilité en fournissant une couleur par défaut lorsque l'image n'est pas chargée. Bien qu'il soit conseillé d'avoir une couleur d'arrière-plan ({{cssxref("background-color")}}) pour chaque image d'arrière-plan ({{cssxref("background-image")}}), image() pourra être utile afin de définir une couleur uniquement utilisée lorsqu'une image ne charge pas.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("CSS4 Images", "#image-notation", "image()")}}{{Spec2('CSS4 Images')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

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

- -

Voir aussi

- - diff --git a/files/fr/web/css/image-set()/index.html b/files/fr/web/css/image-set()/index.html deleted file mode 100644 index b54ea600c9..0000000000 --- a/files/fr/web/css/image-set()/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: image-set() -slug: Web/CSS/image-set() -tags: - - CSS - - Fonction - - Reference -translation_of: Web/CSS/image-set() ---- -

{{CSSRef}}

- -

La fonction image-set() est une méthode permettant au navigateur de sélectionner l'image la plus appropriée parmi un ensemble d'images. Elle s'avère notamment utile pour les écrans à haute densité de pixels.

- -

La résolution et la bande passante varient selon l'appareil et l'accès au réseau dont on dispose. La fonction image-set() permet au navigateur de sélectionner l'image avec la résolution la mieux adaptée aux conditions de l'utilisateur. Cette fonction reçoit différentes options d'images qui sont chacune une image avec une déclaration de résolution. La résolution sera généralement couplée avec la taille du fichier associé. Ainsi, un agent utilisateur conscient que la bande passante est faible pourra privilégier une image à faible résolution plutôt que d'attendre longtemps le chargement d'une image à plus haute résolution.

- -

Cette fonction permet ainsi à l'auteur du document de fournir différentes options plutôt que de laisser l'utilisateur payer les conséquences.

- -

Syntaxe

- -
image-set() = image-set( <image-set-option># )
-où <image-set-option> = [ <image> | <string> ] <resolution> et où
-      <string> est une valeur <url>
-
- -

Valeurs

- -

La plupart du temps, la source d'une des images de l'ensemble sera indiquée via la fonction {{cssxref("url")}}.

- -

On notera qu'on ne peut pas imbriquer un appel à une fonction image-set() au sein d'un autre appel à image-set().

- -

La valeur <resolution> peut utiliser une unité x ou dppx (points par unité de pixel), dpi (points par pouce) ou dpcm (points par centimètre). Une résolution donnée ne peut être utilisée que pour une seule image au sein d'un appel à image-set().

- -

Exemples

- -
background-image: image-set( "chat.png" 1x,
-                             "chat-2x.png" 2x,
-                             "chat-print.png" 600dpi);
- -

Dans cet exemple, on utilise image-set() afin de fournir deux versions pour une image en arrière-plan. Le navigateur pourra choisir l'image avec la meilleure résolution si l'utilisateur dispose d'un appareil permettant de l'afficher correctement et si sa connexion est suffisamment rapide.

- -

Accessibilité

- -

Les navigateurs ne fournissent pas d'informations particulières aux outils d'assistance quant aux outils d'assistance. Ainsi, les lecteurs d'écran ne pourront pas annoncer d'informations utiles si l'image contient des informations essentielles à la compréhension de la page. Il faudra inclure une description sémantique sur l'image pour que tous les utilisateurs puissent en bénéficier.

- - - -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Images', '#image-set-notation', 'The image-set() notation')}}{{Spec2('CSS4 Images')}}
- -

Compatibilité des navigateurs

- - - -

{{Compat("css.types.image.image-set")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/linear-gradient()/index.html b/files/fr/web/css/linear-gradient()/index.html deleted file mode 100644 index 155ead9fe4..0000000000 --- a/files/fr/web/css/linear-gradient()/index.html +++ /dev/null @@ -1,296 +0,0 @@ ---- -title: linear-gradient -slug: Web/CSS/linear-gradient() -tags: - - CSS - - Fonction - - Reference -translation_of: Web/CSS/linear-gradient() ---- -
{{CSSRef}}
- -

La fonction linear-gradient() permet de créer une image (type {{cssxref("<image>")}}) représentant un dégradé de couleur linéaire. Le résultat de la fonction sera un objet CSS {{cssxref("<gradient>")}}.

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

Comme pour les autres types de dégradés, la valeur obtenue n'est pas une couleur CSS (type {{cssxref("<color>")}} mais une image sans dimension intrinsèque. Autrement dit, celle-ci ne possède aucune taille « naturelle » ou préférée, sa taille réelle correspondra à la taille de l'élément auquel elle est appliquée.

- -

Les dégradés linéaires sont définis par un axe : la ligne du dégradé. Chaque point de cette ligne aura une couleur différente. Les lignes perpendiculaires à la ligne du dégradé ont chacune une couleur qui est celle du point se situant sur la ligne du dégradé à ce niveau.

- -

linear-gradient.png

- -

La ligne du dégradé est définie par le centre de la boîte contenant le dégradé et par un angle. Les couleurs du dégradé sont définies par différents points : le point de départ et le point d'arrivée. Entre ces deux points, on peut avoir différents points d'arrêt définissant la couleur à ce niveau.

- -

Le point de départ utilise la couleur initiale du dégradé. Ce point est défini comme l'intersection de la ligne du dégradé et de la ligne perpendiculaire à cette droite et qui passe par le coin de la boîte situé dans le même quadrant.

- -

De la même façon, le point d'arrivée est le point de la ligne du dégradé où la couleur finale est atteinte. Il peut également être défini comme l'intersection entre la ligne du dégradé et une ligne perpendiculaire, passant par le coin le plus proche.

- -

Ces définitions plutôt complexes ont des conséquence plutôt intéressantes : les coins les plus proches de ces deux points (parfois appelés « coins magiques ») ont les couleurs de départ et de fin.

- -

Il est possible de définir des couleurs intermédiaires grâce à des points d'arrêt de couleurs qui seront situés sur la ligne du dégradé. Cela permet de créer une transition non linéaire ou d'utiliser plusieurs couleurs sur un seul dégradé. 

- -

Lorsque la position d'un point d'arrêt est définie de façon implicite, celui-ci sera placé à mi-chemin entre le point précédent et le point suivant. Sa position pourra aussi être définie explicitement grâce à une valeur {{cssxref("<length>")}} ou {{cssxref("<percentage>")}}.

- -

La fonction linear-gradient ne permet pas de répéter le motif du dégradé. Pour cela, on pourra utiliser la propriété {{cssxref("repeating-linear-gradient")}}.

- -
Note : Les dégradés sont des valeurs de type <image> et non des couleurs (type {{cssxref("<color>")}}. Aussi, linear-gradient ne pourra pas être utilisée sur {{cssxref("background-color")}} et sur les autres propriétés qui n'acceptent que des valeurs de type <color>.
- -

Paramétrer des dégradés

- -

En ajoutant plus de points d'arrêt de couleurs sur la ligne du dégradé, il est possible de créer des transitions complexes entre plusieurs couleurs. La position d'un point d'arrêt peut être définie de façon explicite en utilisant une longueur (valeur de type {{cssxref("<length>")}}) ou un pourcentage (valeur de type {{cssxref("<percentage>")}}). Si l'emplacement du point d'arrêt n'est pas indiqué, il sera placé à mi-chemin entre les deux points d'arrêt adjacents. Aussi, les deux instructions suivantes sont synonymes :

- -
linear-gradient(red, orange, yellow, green, blue);
-linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);
-
- -

Par défaut, la transition entre les couleurs de deux points d'arrêt se fait de façon linéaire et la couleur intermédiaire se situera à mi-chemin. Toutefois, il est possible de déplacer cette couleur intermédiaire entre les deux points d'arrêt en fournissant une indication sur l'emplacement du milieu de la transition. L'instruction qui suit permet de définir un dégradé qui commence par du rouge allant jusqu'à 10%, passe du rouge au bleu avec la couleur intermédiaire située à 30% de la ligne puis finit en bleu pur sur les 10% de la fin de la longueur.

- -
linear-gradient(red 10%, 30%, blue 90%);
- -

Si deux points d'arrêt de couleur sont situés au même emplacement, il y aura une ligne de rupture brutale entre les deux couleus des deux points d'arrêts.

- -

L'ordre des points d'arrêt est important. Si les points d'arrêt ne sont pas déclarés dans l'ordre, les points d'arrêts de valeur inférieure et situés après surchargeront les points précédents. Autrement dit, si une valeur supérieure est située avant une valeur inférieure, la première n'aura aucun effet. Avec le fragment de code qui suit, on obtient un dégradé qui commence en rouge, passe en jaune à 30% puis à bleu à 65%.

- -
linear-gradient(red 40%, yellow 30%, blue 65%);
-
- -

Il est possible de définir plusieurs positions d'arrêt sur une même couleur pour des points d'arrêt adjacents. Ainsi, les trois dégradés suivants sont équivalents :

- -
linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
-linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90%);
-linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);
-
- -

Par défaut, lorsqu'aucune couleur n'est définie pour le point d'arrêt 0%, c'est la couleur du premier point d'arrêt qui est utilisée au début du dégradé. De même, si aucune couleur n'est explicitement déclarée pour la position 100%, c'est la couleur du dernier point d'arrêt qui sera prolongée.

- -

Syntaxe

- -
/* Un dégradé suivant une ligne à 45°
- qui démarre en bleu et finit en rouge */
-linear-gradient(45deg, blue, red);
-
-/* Un dégradé qui démarre en bas à droite,
-   qui démarre en bleu et finit en rouge */
-linear-gradient(to left top, blue, red);
-
-/* Un dégradé qui démarre du bas et va vers le haut
-   qui commence en bleu, passe en vert à 40% et termine
-   en rouge */
-linear-gradient(0deg, blue, green 40%, red);
-
-/* Indication de couleur : un dégradé de gauche à droite
-   qui commmence en rouge et dont la couleur intermédiaire
-   est située à 10% et laisse les 90% pour la seconde
-   moitié de la transition vers le bleu */
-linear-gradient(.25turn, red, 10%, blue);
-
-/* Plusieurs points d'arrêt par couleur : un dégradé
-   orienté de 45° avec une moitié inférieure gauche
-   rouge et une moitié supérieure droite bleue avec
-   une ligne franche au milieu */
-linear-gradient(45deg, red 0 50%, blue 50% 100%);
-
- -

Valeurs

- -
-
<side-or-corner>
-
Représente la position du point de départ de la ligne du dégradé. Elle consiste en deux mots-clés : le premier indique le côté horizontal : left ou right ; le second indique le côté vertical : top ou bottom. L'ordre n'est pas pertinent et chaque mot-clé est optionnel. Si la valeur est absente, elle vaudra to bottom par défaut. Les valeurs to top, to bottom, to left et to right correspondent respectivement aux angles 0deg, 180deg, 270deg, 90deg. Les autres valeurs sont traduites en angles à partir de to top et dans le sens des aiguilles d'une montre. Le point d'arrivé est défini comme le symétrique du point de départ par rapport au centre de la boîte.
-
<angle>
-
L'angle de la direction du dégradé. L'angle démarre à partir de to top et progresse dans le sens des aiguilles d'une montre. Pour plus de détails, voir {{cssxref("<angle>")}}.
-
<linear-color-stop>
-
Un valeur composée d'une valeur {{cssxref("<color>")}} éventuellement suivie d'une position (un pourcentage ou une longueur {{cssxref("<length>")}}) sur l'axe du dégradé. L'affichage des points d'arrêt de couleur en CSS suit les mêmes règles que les dégradés SVG.
-
<color-hint>
-
Cette valeur est une indication pour l'emplacement de la couleur moyenne entre les deux couleurs des points d'arrêt adjacents. Si cette valeur n'est pas utilisée, la moitié de la transition se produit à équidistance entre les deux points d'arrêt.
-
- -
-

Note : Le rendu des points d'arrêts de couleur pour les dégradés CSS suit les mêmes règles que celui pour les points d'arrêts de couleur pour les dégradés SVG.

-
- -

Syntaxe formelle

- -
linear-gradient(
-  [ <angle> | to <side-or-corner> ,]? <color-stop-list> )
-  \---------------------------------/ \----------------------------/
-    Définition de la ligne du dégradé   Liste des arrêts de couleur
-
-où <side-or-corner> = [ left | right ] || [ top | bottom ]
-  et <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
-  et <linear-color-stop> = <color> [ <color-stop-length> ]?
-  et <color-stop-length> = [ <percentage> | <length> ]{1,2}
-  et <color-hint> = [ <percentage> | <length> ]
- -

Exemples

- -

Dégradé à 45 degrés

- -

CSS

- -
div {
-  background: linear-gradient(135deg, red, blue);
-}
- -

HTML

- -
<div style="width: 200px; height: 200px;"></div>
- -

Résultat

- -

{{EmbedLiveSample("Dégradé_à_45_degrés")}}

- -

Décalage du début

- -

Parfois, on veut que le dégradé commence après le début de la ligne. Pour cela, on ajoute un point d'arrêt de la même couleur que la couleur de début.

- -

CSS

- -
div {
-  background: linear-gradient(135deg, red, red 60%, blue);
-}
- -

HTML

- -
<div style="width: 200px; height: 200px;"></div>
- -

Résultat

- -

{{EmbedLiveSample("Décalage_du_début")}}

- -

Un dégradé avec plusieurs couleurs

- -

Si la position du premier point d'arrêt n'est pas définie par une valeur <length> ou <percentage>, sa valeur par défaut sera 0%. Si la position du dernier point d'arrêt n'est pas définie par une valeur <length> ou <percentage>, sa valeur par défaut sera 100%. Si un point d'arrêt n'a aucune indication de position et que ce n'est ni le premier ni le dernier, celui-ci sera situé à mi-chemin entre les deux points d'arrêts qui l'entourent.

- -

Les points d'arrêt doivent être définis dans l'ordre. Une fois les valeurs associées au premier et au dernier point d'arrêt, si la position d'un point d'arrêt intermédiaire est définie « avant » un point d'arrêt déclaré avant, la position réelle du point d'arrêt intermédiaire sera ramenée à la position du point d'arrêt précédent.

- -

CSS

- -
div {
-  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
-}
-
- -

HTML

- -
<div>Un arc-en-ciel dégradé</div>
- -

Résultat

- -

{{EmbedLiveSample("Un_dégradé_avec_plusieurs_couleurs")}}

- -

Répéter un dégradé linéaire

- -

La fonction linear-gradient ne permet pas de répéter un dégradé (par défaut le dégradé sera étiré pour remplir tout l'élément). Pour obtenir cette répétition, il faudra utiliser la fonction {{cssxref("repeating-linear-gradient")}}.

- -

Utiliser la transparence

- -

CSS

- -
div {
-  background: linear-gradient(to bottom right, red, rgba(0,0,0,0));
-}
- -

HTML

- -
<div>Un dégradé linéaire avec de la transparence</div>
- -

Résultat

- -

{{EmbedLiveSample("Utiliser_la_transparence")}}

- -

Des dégradés pour les différents navigateurs

- -

Chaque moteur possède des préfixes différents. Voici un dégradé allant du rose vers le vert et de haut en base, exprimé avec les différents préfixes :

- -
.grad {
-  background-color: #F07575; /* fallback color if gradients are not supported */
-  background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
-  background-image:    -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Firefox (3.6 to 15) */
-  background-image:      -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Opera (11.1 to 12.0) */
-  background-image:         linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */
-}
-
- -

Le préfixe -moz- est utilisé pour une compatibilité avec Firefox 3.6 jusqu'à Firefox 15. L (Fx 3.6 to Fx 15). Le préfixe -webkit- est le seul qui doit toujours être inclus pour Android 4.3-, iOS jusqu'à la version 6.1 et Safari 6. Lorsqu'on utilise une version préfixée, il ne faut pas utiliser to.

- -

Un dégradé avec des points d’arrêt à plusieurs couleurs

- -

Cet exemple utilise des points d'arrêt situés à la même position et avec des couleurs différentes. La transition est donc franche et on obtient ainsi des bandes de couleurs.

- - - -
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_points_d’arrêts_à_plusieurs_couleurs", 120, 120)}}

- -
-

Note : Voir la page Utiliser les dégradés CSS pour plus d'exemples.

-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()')}}{{Spec2('CSS3 Images')}}Définition initiale.
{{SpecName('CSS4 Images', '#color-stop-syntax', 'Gradient Color-Stops')}}{{Spec2('CSS4 Images')}}Ajout des indices d'interpolation.
- -

Compatibilité des navigateurs

- - - -

Voir aussi

- -

{{Compat("css.types.image.gradient.linear-gradient")}}

- - diff --git a/files/fr/web/css/radial-gradient()/index.html b/files/fr/web/css/radial-gradient()/index.html deleted file mode 100644 index bb6cb5951d..0000000000 --- a/files/fr/web/css/radial-gradient()/index.html +++ /dev/null @@ -1,225 +0,0 @@ ---- -title: radial-gradient -slug: Web/CSS/radial-gradient() -tags: - - CSS - - Fonction - - Reference -translation_of: Web/CSS/radial-gradient() ---- -
{{CSSRef}}
- -

La fonction radial-gradient() permet de créer une {{cssxref("<image>")}} CSS représentant un dégradé de couleur. Ce dégradé diffuse depuis une origine, le centre du gradient. La valeur renvoyée par cette fonction est un objet CSS de type {{cssxref("<gradient>")}}.

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

De façon analogue aux autres types de dégradés, un dégradé radial n'est pas une couleur ({{cssxref("<color>")}}) CSS mais une image sans dimension intrinsèque (c'est-à-dire que celle-ci ne possède pas de taille naturelle ou préférée ni de proportion). Sa taille réelle correspondra à la taille de l'élément auquel le gradient s'applique.

- -
-

Note : La fonction radial-gradient ne permet pas d'obtenir des dégradés radiaux répétés. Pour obtenir un tel effet concentrique, on pourra utiliser la fonction CSS {{cssxref("repeating-radial-gradient")}}.

-
- -
-

Note : Une valeur de type <gradient> est également une valeur de type <image>. On peut donc utiliser des dégradés à n'importe quel endroit où on peut utiliser des images. En revanche, un dégradé n'est pas une valeur de type {{cssxref("<color>")}} et ne peut donc pas être utilisé avec les propriétés manipulant ces valeurs (par exemple {{cssxref("background-color")}}).

-
- -

Composition d'un dégradé radial

- -

- -

Les dégradés radiaux sont définis par trois notions :

- - - -

Pour obtenir un dégradé radial, on trace des formes uniformes concentriques, identiques à la formes de terminaison en partant du centre. Les points de couleur sont positionnés sur un rayon virtuel qui s'étend horizontalement depuis le centre et vers la droite. Lorsqu'on positionne ces points avec des pourcentages, la valeur sera relative au rayon total qui est la distance entre le centre et la forme de terminaison. Chaque forme a une seule couleur qui est déterminée par la couleur du point d'intersection entre le rayon et la forme.

- -

Les formes de terminaisons peuvent prendre deux formes :

- - - -

Syntaxe

- -
/* Un dégradé qui part du centre du conteneur,
-   qui commence en rouge, passe par du bleu
-   et finit en vert. */
-radial-gradient(circle at center, red 0, blue, green 100%)
- -

Valeurs

- -
-
<position>
-
Une {{cssxref("<position>")}} CSS qui est interprétée de la même façon que pour les propriétés {{cssxref("background-position")}} ou {{cssxref("transform-origin")}}. La valeur par défaut est center.
-
<shape>
-
La forme du gradient. Elle vaut soit circle (la forme du dégradé sera un cercle de rayon constant) ou ellipse (la forme est une ellipse alignée sur les axes). La valeur par défaut est ellipse.
-
<linear-color-stop>
-
Ces valeurs indiquent qu'une couleur donnée doit être utilisée à un endroit spécifique du dégradé. Cette valeur se compose d'une valeur {{cssxref("<color>")}} éventuellement suivie d'une position définie par une pourcentage ({{cssxref("<percentage>")}}) ou une longueur ({{cssxref("<length>")}}) selon le rayon virtuel du gradient. Un pourcentage ou une longueur nulle (0% ou 0) indiquera le centre du dégradé. La valeur 100% correspondra à l'intersection entre la forme de terminaison et le rayon virtuel. Les valeurs intermédiaires seront situées de façon proportionnelle.
-
<color-hint>
-
Une indication pour définir la progression de l'interpolation entre les deux points d'arrêt de couleur adjacents. La longueur définit l'emplacement auquel la transition aurait été effectuée à moitié entre les deux couleurs.
-
<extent-keyword>
-
Des mots-clés qui permettent de décrire la taille de la forme de terminaison. Les valeurs possibles sont :
-
- - - - - - - - - - - - - - - - - - - - - - - -
ConstanteDescription
closest-sideLa forme de terminaison du dégradé touche le côté de la boîte le plus proche du centre (pour les cercles) ou touche les côtés horizontaux et verticaux les plus proches du centre (pour les ellipses).
closest-cornerLa forme de terminaison du dégradé est dimensionnée afin de toucher exactement le coin de la boîte le plus proche du centre.
farthest-sideCette valeur fonctionne de façon semblable à closest-side, sauf que ce seront les côtés les plus éloignés qui seront utilisés.
farthest-cornerLa valeur par défaut. Cette valeur fonctionne de façon semblable à closest-corner, sauf que ce sera le coin le plus éloigné qui sera utilisé.
- D'anciens brouillons de la spécification indiquaient d'autres mots-clés, cover et contain, respectivement synonymes des valeurs standards farthest-corner et closest-side. Seules les valeurs standards doivent être utilisées, certaines implémentations ont d'ailleurs déjà retirées les anciennes formes.
-
- -

Syntaxe formelle

- -
radial-gradient(   [ circle || {{cssxref("<length>")}} ] [ at {{cssxref("<position>")}} ]? ,
-                 | [ ellipse || [ {{cssxref("<length>")}}  |  {{cssxref("<percentage>")}}  ]{2}] [ at  {{cssxref("<position>")}}  ]? ,
-                 | [ [ circle | ellipse ] || <extent-keyword> ] [ at  {{cssxref("<position>")}}  ]? ,
-                 | at  {{cssxref("<position>")}}  ,
-                 <color-stop-list> [ , <color-stop-list> ]+ )
-avec <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
-  et <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
-  et <linear-color-stop> = <color> [ <color-stop-length> ]?
-  et <color-stop-length> = [ <percentage> | <length> ]{1,2}
-  et <color-hint> = [ <percentage> | <length> ]
- -

Exemples

- -

Une ellipse avec farthest-corner

- -

CSS

- -
.exemple {
-  height: 100vh;
-  width: 200vh;
-  background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);
-}
- -

HTML

- -
<p class="exemple">
-  Yop
-</p>
- -

Résultat

- -

{{EmbedLiveSample("Une_ellipse_avec_farthest-corner","250","150")}}

- -

Un cercle de 16 pixels

- -

CSS

- -
.exemple {
-  height: 100vh;
-  width: 100vh;
-  background-image: radial-gradient(16px at 60px 50% , #000000 0%, #000000 14px, rgba(0, 0, 0, 0.3) 18px, rgba(0, 0, 0, 0) 19px);
-}
- -

HTML

- -
<p class="exemple">
-  Yop
-</p>
- -

Résultat

- -

{{EmbedLiveSample("Un_cercle_de_16_pixels","250","150")}}

- -

Un dégradé simple

- -
<div class="radial-gradient"></div>
-
- -
.radial-gradient {
-  width: 240px;
-  height: 120px;
-  background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
-}
- -

{{EmbedLiveSample('Un_dégradé_simple', 120, 120)}}

- -

Un dégradé non-centré

- -
<div class="radial-gradient"></div>
-
- -
.radial-gradient {
-  width: 240px;
-  height: 120px;
-  background-image: radial-gradient(farthest-corner at 40px 40px,
-      #f35 0%, #43e 100%);
-}
- -

{{EmbedLiveSample('Un_dégradé_non-centré', 240, 120)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()')}}{{Spec2('CSS3 Images')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("css.types.image.gradient.radial-gradient")}}

- -

Notes relatives à Quantum (Firefox)

- - - -

Voir aussi

- - diff --git a/files/fr/web/css/repeating-conic-gradient()/index.html b/files/fr/web/css/repeating-conic-gradient()/index.html deleted file mode 100644 index 8e08d42e5a..0000000000 --- a/files/fr/web/css/repeating-conic-gradient()/index.html +++ /dev/null @@ -1,207 +0,0 @@ ---- -title: repeating-conic-gradient() -slug: Web/CSS/repeating-conic-gradient() -tags: - - CSS - - Dégradé - - Fonction - - Reference -translation_of: Web/CSS/repeating-conic-gradient() ---- -
{{draft}} {{CSSRef}}
- -

La fonction CSS repeating-conic-gradient() crée une image composée d'un dégradé conique répété. Elle permet d'avoir un motif répété qu'on pourrait décrire avec une seule itération grâce à {{cssxref('conic-gradient')}}. Le résultat fourni par la fonction repeating-conic-gradient() est une valeur de type {{CSSxRef("<gradient>")}} qui est un sous-type du type{{CSSxRef("<image>")}}.

- -

Si le premier ou le dernier arrêt de couleur inclut un angle supérieur à 0deg ou inférieur à 360deg, le dégradé conique ne sera pas répété.

- -
{{EmbedInteractiveExample("pages/css/function-repeating-conic-gradient.html")}}
- - - -

À l'instar des autres dégradés, les dégradés coniques répétés n'ont pas de dimensions intrinsèques (c'est-à-dire pas de taille naturelle ou préférée et pas de proportion préférée). La taille finale du dégradé sera la taille de l'élément sur lequel il est appliqué ou la taille indiquée par d'autres propriétés.

- -

Le type de donnée <gradient>s étant un sous-type d'<image>, on pourra utiliser les dégradés coniques répétés là où des valeurs de type <image> sont attendues. Ainsi, repeating-conic-gradient() ne fonctionnera pas pour la propriété {{CSSxRef("background-color")}} car celle-ci attend une valeur de type {{CSSxRef("<color>")}}.

- -
-

Note : Afin de créer un dégradé conique qui ne se répète pas, on pourra utiliser la notation fonctionnelle {{CSSxRef("conic-gradient")}}.

-
- -

Comprendre les dégradés coniques répétés

- -

La syntaxe pour repeating-conic-gradient est semblable à celle de {{CSSxRef("conic-gradient")}} et à celle de {{CSSxRef("repeating-radial-gradient")}}. À l'instar du dégradé conique unitaire, les arrêts de couleur sont placés autour d'un arc. Comme pour les dégradés radiaux répétés, la taille de la portion répétée correspond au premier arrêt de couleur auquel on a soustrait l'angle du dernier arrêt de couleur.

- -

Comparison of the color stops for repeating and non-repeating conic and radial gradients

- -

Les dégradés ci-dessus sont définis avec un tiers de bleu, un tiers de rouge et un tiers de jaune.

- -
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%);
-
- -

Pour un dégradé répété, on définit le premier et le dernier arrêt de couleur. Si les valeurs ne sont pas explicitement définies, elles correspondent respectivement aux angles 0 et 360deg. Lorsque ces valeurs sont utilisées par défaut, l'arc qui est répété occupe 360 degrés et il n'y a donc pas de répétition.

- -

Les arrêts de couleur sont placés autour d'un arc (et non sur une ligne qui s'écarte du centre). L'arc progresse dans le sens horaire.

- -

Un dégradé conique répété est défini en indiquant un angle de rotation, le centre du dégradé et une liste d'arrêts de couleur. Les arrêts de couleur sont définis avec un angle (type CSS {{cssxref('angle')}}). Les unités qui permettent de déclarer un angle sont deg (pour les degrés), grad (pour les grades), rad (pour les radians) et turn (pour les tours). Un cercle se compose de 360 degrés, 400 grade, 2π radians et d'un tour.

- -

Les navigateurs qui prennent en charge ces dégradés permettent également d'utiliser des valeurs en pourcentages (où 100% correspond à 360 degrés). Toutefois, ce comportement n'est pas décrit dans la spécification.

- -

La syntaxe de définition permet de placer le centre du dégradé à l'intérieur ou encore à l'extérieur de l'image. Les valeurs permettant de définir la position du centre s'écrivent comme la syntaxe à deux valeurs de  {{cssxref('background-position')}}.

- -

Personnaliser des dégradés

- -

En ajoutant des arrêts de couleur à l'arc du dégradé, il est possible de créer des dégradés sur mesures. La position d'un arrêt de couleur se définit via un {{CSSxRef("<angle>")}}. Si on n'indique pas de position pour un arrêt, celui-ci est placé à mi-parcours entre le précédent et le suivant. Si la position du premier ou du dernier arrêt ne sont pas définies, par défaut, ils seront placés à 0deg et à 360deg respectivement.

- -

Attention, lorsque ces valeurs par défaut sont utilisées, l'arc occupe tout le cercle et le dégradé n'est donc pas répété.

- -

Les deux formulations suivantes sont équivalentes :

- -
repeating-conic-gradient(red, orange, yellow, green, blue 50%);
-repeating-conic-gradient(from -45deg, red 45deg, orange, yellow, green, blue 225deg)
- -

Par défaut, les couleurs évoluent progressivement entre chaque arrêt et le milieur de l'arc correspondra à la moyenne des couleurs. Il est possible de déplacer ce point intermédiaire en fournissant une indication quant à l'emplacement du milieu de la transition.

- -

Si deux (voire plusieurs) couleurs sont au même emplacement, la transition sera une ligne brutale entre la première et la dernière couleur déclarées à cet emplacement.

- -

Bien qu'il soit possible de mélanger et de combiner différentes unités pour les angles, il est préférable d'éviter par souci de lisibilité / maintenabilité.

- -

Syntaxe

- -
background: repeating-conic-gradient(
-    from 3deg at 25% 25%,
-    hsl(200, 100%, 50%) 0deg 15deg,
-    hsl(200, 100%, 60%) 10deg 30deg);
-);
- -

Values

- -
-
{{CSSxRef("<angle>")}}
-
Lorsque cet angle est précédé du mot-clé from, cela définit la rotation du dégradé dans le sens horaire.
-
<position>
-
Une position définie avec la même syntaxe que la propriété {{cssxref("background-position")}}. Cette position définit le centre du dégradé. Lorsque cette valeur est absente, la valeur utilisée par défaut est center, ce qui indique que le dégradé est centré.
-
<angular-color-stop>
-
Une valeur {{CSSxRef("<color>")}} pour un arrêt de couleur, suivie par une ou plusieurs positions d'arrêt (données par un {{CSSxRef("<angle>")}} le long de l'arc). La taille de l'arc répété pour le dégradé est donné par l'angle du dernier arrêt de couleur auquel on a soustrait l'angle du premier arrêt de couleur.
-
<color-hint>
-
Une indication d'interpolation qui définit la façon dont le dégradé progresse entre deux arrêts de couleurs adjacents. Cette indication indique l'emplacement où la couleur doit être la couleur intermédiaire entre les deux arrêts environnant. Si cette valeur est absente, la moitié de la transition entre les couleurs sera atteinte à la moitié de l'arc entre les deux arrêts.
-
-
-

Note : Le rendu des arrêts de couleur pour les dégradés CSS suit les mêmes règles que celui des arrêts de couleur pour les dégradés SVG.

-
-
-
- -

Syntaxe formelle

- -
repeating-conic-gradient(
-  [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )
-  \---------------------------------/ \----------------------------/
-        Définition du dégradé            Liste d'arrêts de couleur
-
-where <angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>
-  and <angular-color-stop> = <color> && <color-stop-angle>?
-  and <angular-color-hint> = <angle-percentage>
-  and <color-stop-angle> = <angle-percentage>{1,2}
- -

Exemples

- -
-

Noir et blanc

- - - -
div {
-  background-image:
-     repeating-conic-gradient(#fff 0 9deg, #000 9deg 18deg);
-}
-
- -

{{EmbedLiveSample("Noir_et_blanc", 220, 220)}}

-
- -
-

Dégradé désaxé

- - - -
div {
-  background: repeating-conic-gradient(
-    from 3deg at 25% 25%,
-    green, blue 2deg 5deg, green, yellow 15deg 18deg, green 20deg);
-}
- -

{{EmbedLiveSample("Dégradé_désaxé", 220, 220)}}

- -

Le degradé est répété 18 fois mais on en voit que la moitié droite et on voit donc 9 répétitions.

-
- -
-

Note : Voir la page Utiliser les dégradés en CSS pour plus d'exemples.

-
- -

Accessibilité

- -

Les navigateurs ne fournissent pas d'informations spécifiques aux outils d'assistance quant aux images d'arrière-plan. Les lecteurs d'écran ne pourront donc pas annoncer le sens de l'image aux utilisateurs. Bien qu'il soit possible de créer des camemberts, damiers, etc. avec CSS, si l'image contient des informations critiques pour la compréhension générale de la page, mieux vaudra décrire ces informations de façon sémantique dans le document.

- - - -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Images', '#repeating-gradients', 'repeating-conic-gradient()')}}{{Spec2('CSS4 Images')}}
- -

Compatibilité des navigateurs

- - - -
{{Compat("css.types.image.gradient.conic-gradient")}}
- -

Voir aussi

- - diff --git a/files/fr/web/css/repeating-linear-gradient()/index.html b/files/fr/web/css/repeating-linear-gradient()/index.html deleted file mode 100644 index 0e6c63df58..0000000000 --- a/files/fr/web/css/repeating-linear-gradient()/index.html +++ /dev/null @@ -1,174 +0,0 @@ ---- -title: repeating-linear-gradient -slug: Web/CSS/repeating-linear-gradient() -tags: - - CSS - - Fonction - - Reference -translation_of: Web/CSS/repeating-linear-gradient() ---- -
{{CSSRef}}
- -

La fonction CSS repeating-linear-gradient créé une {{cssxref("<image>")}} composée de dégradés qui se répètent. Cela fonctionne de manière similaire aux dégradés linéaires simples décrits les mêmes arguments que les dégradés linéaires basiques représentés avec {{cssxref("linear-gradient")}} mais les points d'arrêt des couleurs sont automatiquement répétés, indéfiniment, dans les deux directions (les points d'arrêt sont répétés d'autant que la distance qui sépare le premier et le dernier point d'arrêt).

- -
{{EmbedInteractiveExample("pages/css/function-repeating-linear-gradient.html")}}
- - - -

Par conséquent, la ligne de la couleur de fin coïncide toujours avec la ligne de la couleur de début. Si les deux ne sont pas identiques, on obtiendra alors une transition abrupte.

- -

Comme pour les autres dégradés, un dégradé linéaire répété n'est pas une couleur (type {{cssxref("<color>")}}) CSS mais une image (type {{cssxref("<image>")}}) sans dimension intrinsèque ; c'est-à-dire, qu'il n'a ni taille naturelle ni taille préférée. Sa taille réelle s'adapte à l'élément auquel il s'applique.

- -
-

Note : Le type <gradient> est un sous-type du type  <image>. À ce titre, repeating-linear-gradient() ne fonctionnera pas pour {{cssxref("background-color")}} et les autres propriétés qui utilisent le type de données {{cssxref("<color>")}}.

-
- -

Syntaxe

- -
/* Un dégradé répétitif sur un axe à 45 degrés */
-/* débutant bleu et finissant rouge, répété 3 fois */
-repeating-linear-gradient( 45deg, blue, red 33.3% );
-
-/* Un dégradé répétitif allant du coin inférieur droit */
-/* à coin supérieur gauche débutant bleu et finissant rouge */
-/* et répété tous les 20 pixels */
-repeating-linear-gradient( to left top, blue, red 20px);
-
-/* Un dégradé répétitif allant du bas vers le haut, */
-/* débutant bleu, étant vert après 40% et finissant rouge */
-repeating-linear-gradient( 0deg, blue, green 40%, red );
-
-/* Un dégradé répété cinq fois, progressant de gauche à
-   droite, commençant en rouge, passant en vert puis à
-   nouveau en rouge */
-repeating-linear-gradient(to right, red 0%, green 10%, red 20%);
- -

Valeurs

- -
-
<side-or-corner>
-
Représente la position du point de départ de la ligne de dégradé. Cette valeur comprends deux mots-clés : le premier indique le côté sur une ligne horizontale, left ou right, le second indique le côté sur une ligne verticale, top ou bottom. L'ordre n'a pas d'influence et chacun des mots-clés est optionnel.
- Les valeurs to top, to bottom, to left et to right sont respectivement traduites vers les angles 0deg, 180deg, 270deg, 90deg. Les autres sont traduites vers des angles qui permettent au point de départ d'être dans le même quadrant que le coin décrit et que la ligne définie par le point de départ et le coin soit perpendiculaire à la ligne de dégradé. De cette manière, la couleur décrite par le point d'arrêt sera exactement celle du coin. Ceci est parfois appelé la propriété du « coin magique ». Le point de fin de la ligne de dégradé est le point symétrique de du point de départ dans l'autre direction par rapport au centre de la boîte.
-
<angle>
-
Un angle pour la direction du dégradé. L'angle démarre à 0deg (ce qui est équivalent à to top) et progresse dans le sens des aiguilles d'une montre. Voir {{cssxref("<angle>")}}.
-
<linear-color-stop>
-
Cette valeur est composée d'une valeur de  couleur (type {{cssxref("<color>")}}), suivie d'une position d'arrêt optionnelle (soit un pourcentage entre 0% et 100% ou une longueur (type {{cssxref("<length>")}}) mesurée le long de l'axe du dégradé).
-
<color-hint>
-
L'indication de couleur est une indication pour l'interpolation des couleurs le long du dégradé et entre deux points d'arrêt de couleur. La longueur définit l'emplacement où la transition entre les deux couleurs est appliquée à moitié. Si cette valeur est absente, le niveau intermédiaire de la transition se situera à équidistance des deux points d'arrêt de couleur.
-
Le rendu des points d'arrêt en CSS suit les mêmes règles que les dégradés en SVG.
-
- -

Syntaxe formelle

- -
repeating-linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop-list> )
-                            \---------------------------------/ \---------------/
-                              Définition de la ligne du dégradé Liste des points d'arrêt
-
-où <side-or-corner> = [left | right] || [top | bottom]
-  et <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
-  et <linear-color-stop> = <color> [ <color-stop-length> ]?
-  et <color-stop-length> = [ <percentage> | <length> ]{1,2}
-  et <color-hint> = [ <percentage> | <length> ]
-
- -

Exemples

- -

Bandes zébrées

- - - -
body {
-  background-image: repeating-linear-gradient(-45deg,
-      transparent,
-      transparent 20px,
-      black 20px,
-      black 40px);
-  /* avec plusieurs longueurs pour les points d'arrêt */
-  background-image: repeating-linear-gradient(-45deg,
-      transparent 0 20px,
-      black 20px 40px);
-}
-
- -

{{EmbedLiveSample('Bandes_zébrées', 120, 120)}}

- -

Dix barres horizontales répétées

- - - -
body {
-  background-image: repeating-linear-gradient(to bottom,
-      rgb(26,198,204),
-      rgb(26,198,204) 7%,
-      rgb(100,100,100) 10%);
-}
-
- -

{{EmbedLiveSample('Dix_barres_horizontales_répétées', 120, 120)}}

- -

Comme le dernier point d'arrêt est situé à 10% et que le dégradé est vertical, chaque dégradé occupera 10% de la hauteur et on aura donc au total dix barres horizontales.

- -
-

Note : Voir la page Manipuler les dégradés CSS pour plus d'exemples.

-
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Images', '#repeating-gradients', 'repeating-linear-gradient()')}}{{Spec2('CSS3 Images')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("css.types.image.gradient.repeating-linear-gradient")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/repeating-radial-gradient()/index.html b/files/fr/web/css/repeating-radial-gradient()/index.html deleted file mode 100644 index ef48bef118..0000000000 --- a/files/fr/web/css/repeating-radial-gradient()/index.html +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: repeating-radial-gradient() -slug: Web/CSS/repeating-radial-gradient() -tags: - - CSS - - Fonction - - Reference -translation_of: Web/CSS/repeating-radial-gradient() ---- -
{{CSSRef}}
- -

La fonction repeating-radial-gradient() fonctionne de façon similaire à {{cssxref("radial-gradient")}} mais répète les couleurs de façon infinie dans les deux directions avec des répétitions formant des bandes de gradient (de façon analogue à {{cssxref("repeating-linear-gradient")}} qui permet de répéter un dégradé linéaire ({{cssxref("linear-gradient")}}).

- -
{{EmbedInteractiveExample("pages/css/function-repeating-radial-gradient.html")}}
- - - -

Comme pour les autres gradients, un gradient radial répété n'est pas une couleur CSS : ce n'est pas une valeur de type {{cssxref("<color>")}} mais une image (type {{cssxref("<image>")}}) sans dimension intrinsèque : elle n'a pas de taille naturelle ou préférée ni de proportion. Sa taille réelle correspondra à celle de l'élément où est appliqué le gradient.

- -
-

Note : En CSS, un dégradé est une image (type de données {{cssxref("<image>")}} et une telle valeur ne peut être utilisée qu'avec les propriétés qui gèrent des images. Ainsi, repeating-radial-gradient() ne fonctionnera pas avec {{cssxref("background-color")}} ou avec les autres propriétés qui acceptent des couleurs (type de données {{cssxref("<color>")}}).

-
- -

Syntaxe

- -
/* Un dégradé répété qui part du centre de son conteneur,
-   en commençant par du rouge, passant par du bleu puis,
-   finissant par du vert */
-repeating-radial-gradient(circle at center, red 0, blue, green 30px);
-
-/* Un dégradé elliptique qui commence dans le coin supérieur gauche
-   en commençant rouge puis en passant au vert, cinq fois entre le
-   centre et le coin inférieur droit et une seule fois entre le
-   centre et le coin supérieur gauche */
-repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%);
-
- -

Valeurs

- -
-
<position>
-
Une position CSS ({{cssxref("<position>")}}) qui sera interprétée de la même façon que {{cssxref("background-position")}} ou {{cssxref("transform-origin")}}. La valeur par défaut est center.
-
<shape>
-
La forme du gradient employé. C'est un mot-clé parmi circle (le dégradé est circulaire avec un rayon constant) ou ellipse (la forme est elliptique et l'axe est aligné avec la direction indiquée). La valeur par défaut est ellipse.
-
<size>
-
La taille du gradient (cf. la section sur les constantes dimensionnelles ci-après).
-
<color-stop>
-
Cette valeur représente une couleur fixe à une position donnée. Cette valeur est composée d'une valeur {{cssxref("<color>")}} éventuellement suivie d'une position d'arrêt (une valeur {{cssxref("<percentage>")}} ou {{cssxref("<length>")}} représentant l'emplacement sur la ligne du gradient). Une valeur de 0% ou 0 représentera le centre du gradient et la valeur de 100% représentera la fin de la forme qu'occupe le dégradé. Les valeurs intermédiaires sont positionnées de façon proportionnelles sur le rayon.
-
<extent-keyword>
-
Des mots-clés qui déterminent la taille de la forme. Les valeurs possibles sont :
-
- - - - - - - - - - - - - - - - - - - - - - - -
ConstanteDescription
closest-sideLa forme du gradient est délimitée par les côtés de la boîtes qui sont le plus proche du centre dans le cas des cercles. Dans le cas des ellipses, elle est délimitée par les côtés horizontaux et verticaux de la boîte.
closest-cornerLa forme du gradient est dimensionnée afin d'atteindre exactement le coin de la boîte le plus proche du centre.
farthest-sideFonctionne de façon similaire à closest-side mais cette fois, ce sont les côtés les plus éloignés du centre qui servent de délimitation.
farthest-cornerFonctionne de façon similaire à closest-corner mais dans ce cas, c'est le coin le plus éloigné du centre qui est utilisé comme délimitation.
- Les premières versions du brouillon utilisaient d'autres termes comme cover et contain, respectivement synonymes de farthest-corner et closest-side. Certaines implémentations ont abandonné ces termes et on préfèrera donc utiliser les mots-clés précédemment listés.
-
- -

Syntaxe formelle

- -{{csssyntax}} - -

Exemples

- -

Dégradé noir et blanc

- -

HTML

- -
<div class="radial-gradient"></div>
-
- -

CSS

- -
.radial-gradient {
-  width: 120px;
-  height: 120px;
-  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
-}
-
- -

Résultat

- -

{{EmbedLiveSample('Dégradé_noir_et_blanc', 120, 120)}}

- -

Utilisation de farthest-corner

- -

HTML

- -
<div class="radial-gradient"></div>
-
- -

CSS

- -
.radial-gradient {
-  width: 120px;
-  height: 120px;
-  background: repeating-radial-gradient(ellipse farthest-corner,
-      red, black 5%, blue 5%, green 10%);
-}
-
- -

Résultat

- -

{{EmbedLiveSample('Utilisation_de_farthest-corner', 120, 120)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Images', '#repeating-gradients', 'repeating-radial-gradient()')}}{{Spec2('CSS3 Images')}}Définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("css.types.image.gradient.repeating-radial-gradient")}}

- -

Voir aussi

- - diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index de49bfd30c..a2be2575d4 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -253,12 +253,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/linear-gradient() +/ja/docs/CSS/-moz-linear-gradient /ja/docs/orphaned/Web/CSS/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/radial-gradient() +/ja/docs/CSS/-moz-radial-gradient /ja/docs/orphaned/Web/CSS/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 @@ -527,7 +527,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/linear-gradient() +/ja/docs/CSS/linear-gradient /ja/docs/orphaned/Web/CSS/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 @@ -567,9 +567,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/radial-gradient() -/ja/docs/CSS/repeating-linear-gradient /ja/docs/Web/CSS/repeating-linear-gradient() -/ja/docs/CSS/repeating-radial-gradient /ja/docs/Web/CSS/repeating-radial-gradient() +/ja/docs/CSS/radial-gradient /ja/docs/orphaned/Web/CSS/radial-gradient() +/ja/docs/CSS/repeating-linear-gradient /ja/docs/orphaned/Web/CSS/repeating-linear-gradient() +/ja/docs/CSS/repeating-radial-gradient /ja/docs/orphaned/Web/CSS/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 @@ -3932,6 +3932,8 @@ /ja/docs/Web/API/Position /ja/docs/Web/API/GeolocationPosition /ja/docs/Web/API/PositionError /ja/docs/Web/API/GeolocationPositionError /ja/docs/Web/API/Push_API/Using_the_Push_API /ja/docs/Web/API/Push_API +/ja/docs/Web/API/RTCIdentityErrorEvent /ja/docs/orphaned/Web/API/RTCIdentityErrorEvent +/ja/docs/Web/API/RTCIdentityEvent /ja/docs/orphaned/Web/API/RTCIdentityEvent /ja/docs/Web/API/RTCSessionDescriptionCallback /ja/docs/orphaned/Web/API/RTCSessionDescriptionCallback /ja/docs/Web/API/RandomSource /ja/docs/conflicting/Web/API/Crypto/getRandomValues /ja/docs/Web/API/RandomSource/getRandomValues /ja/docs/Web/API/Crypto/getRandomValues @@ -4404,7 +4406,8 @@ /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/conic-gradient /ja/docs/Web/CSS/conic-gradient() +/ja/docs/Web/CSS/conic-gradient /ja/docs/orphaned/Web/CSS/conic-gradient() +/ja/docs/Web/CSS/conic-gradient() /ja/docs/orphaned/Web/CSS/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() @@ -4424,8 +4427,10 @@ /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-set() -/ja/docs/Web/CSS/linear-gradient /ja/docs/Web/CSS/linear-gradient() +/ja/docs/Web/CSS/image-set /ja/docs/orphaned/Web/CSS/image-set() +/ja/docs/Web/CSS/image-set() /ja/docs/orphaned/Web/CSS/image-set() +/ja/docs/Web/CSS/linear-gradient /ja/docs/orphaned/Web/CSS/linear-gradient() +/ja/docs/Web/CSS/linear-gradient() /ja/docs/orphaned/Web/CSS/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() @@ -4434,10 +4439,13 @@ /ja/docs/Web/CSS/none /ja/docs/conflicting/Web/CSS/float /ja/docs/Web/CSS/normal /ja/docs/conflicting/Web/CSS/font-variant /ja/docs/Web/CSS/paint /ja/docs/Web/CSS/paint() -/ja/docs/Web/CSS/radial-gradient /ja/docs/Web/CSS/radial-gradient() +/ja/docs/Web/CSS/radial-gradient /ja/docs/orphaned/Web/CSS/radial-gradient() +/ja/docs/Web/CSS/radial-gradient() /ja/docs/orphaned/Web/CSS/radial-gradient() /ja/docs/Web/CSS/repeat /ja/docs/Web/CSS/repeat() -/ja/docs/Web/CSS/repeating-linear-gradient /ja/docs/Web/CSS/repeating-linear-gradient() -/ja/docs/Web/CSS/repeating-radial-gradient /ja/docs/Web/CSS/repeating-radial-gradient() +/ja/docs/Web/CSS/repeating-linear-gradient /ja/docs/orphaned/Web/CSS/repeating-linear-gradient() +/ja/docs/Web/CSS/repeating-linear-gradient() /ja/docs/orphaned/Web/CSS/repeating-linear-gradient() +/ja/docs/Web/CSS/repeating-radial-gradient /ja/docs/orphaned/Web/CSS/repeating-radial-gradient() +/ja/docs/Web/CSS/repeating-radial-gradient() /ja/docs/orphaned/Web/CSS/repeating-radial-gradient() /ja/docs/Web/CSS/single-transition-timing-function /ja/docs/Web/CSS/easing-function /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() diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index 43bd7fb909..ef8f86f43b 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -20840,18 +20840,6 @@ "dreissig.jahrhundert" ] }, - "Web/API/RTCIdentityErrorEvent": { - "modified": "2019-03-23T22:51:24.405Z", - "contributors": [ - "dreissig.jahrhundert" - ] - }, - "Web/API/RTCIdentityEvent": { - "modified": "2019-03-23T22:51:30.435Z", - "contributors": [ - "dreissig.jahrhundert" - ] - }, "Web/API/RTCPeerConnection": { "modified": "2020-10-15T21:25:45.643Z", "contributors": [ @@ -30749,13 +30737,6 @@ "Marsf" ] }, - "Web/CSS/conic-gradient()": { - "modified": "2020-11-05T10:00:21.729Z", - "contributors": [ - "chrisdavidmills", - "mfuji09" - ] - }, "Web/CSS/contain": { "modified": "2020-10-15T22:11:47.883Z", "contributors": [ @@ -31476,13 +31457,6 @@ "Taken" ] }, - "Web/CSS/image-set()": { - "modified": "2020-11-16T08:53:38.885Z", - "contributors": [ - "chrisdavidmills", - "mfuji09" - ] - }, "Web/CSS/ime-mode": { "modified": "2020-10-15T21:14:16.842Z", "contributors": [ @@ -31696,23 +31670,6 @@ "mfuji09" ] }, - "Web/CSS/linear-gradient()": { - "modified": "2020-11-16T08:57:22.063Z", - "contributors": [ - "chrisdavidmills", - "mfuji09", - "SphinxKnight", - "Sebastianz", - "Simplexible", - "wizAmit", - "slayslot", - "prayash", - "ethertank", - "sosleepy", - "Level", - "FredB" - ] - }, "Web/CSS/list-style": { "modified": "2020-10-15T21:02:10.815Z", "contributors": [ @@ -32533,21 +32490,6 @@ "ethertank" ] }, - "Web/CSS/radial-gradient()": { - "modified": "2020-11-18T14:42:27.892Z", - "contributors": [ - "chrisdavidmills", - "mfuji09", - "Sebastianz", - "wizAmit", - "slayslot", - "dskmori", - "ethertank", - "sosleepy", - "Level", - "FredB" - ] - }, "Web/CSS/ratio": { "modified": "2020-10-15T21:23:57.944Z", "contributors": [ @@ -32571,32 +32513,6 @@ "uknmr" ] }, - "Web/CSS/repeating-linear-gradient()": { - "modified": "2020-11-18T14:46:06.699Z", - "contributors": [ - "chrisdavidmills", - "mfuji09", - "Sebastianz", - "Prinz_Rana", - "wizAmit", - "prayash", - "ethertank", - "sosleepy" - ] - }, - "Web/CSS/repeating-radial-gradient()": { - "modified": "2020-11-18T14:47:38.855Z", - "contributors": [ - "chrisdavidmills", - "mfuji09", - "Sebastianz", - "Simplexible", - "Prinz_Rana", - "mrstork", - "ethertank", - "sosleepy" - ] - }, "Web/CSS/resize": { "modified": "2020-10-15T21:19:01.943Z", "contributors": [ @@ -52309,6 +52225,18 @@ "mfuji09" ] }, + "orphaned/Web/API/RTCIdentityErrorEvent": { + "modified": "2019-03-23T22:51:24.405Z", + "contributors": [ + "dreissig.jahrhundert" + ] + }, + "orphaned/Web/API/RTCIdentityEvent": { + "modified": "2019-03-23T22:51:30.435Z", + "contributors": [ + "dreissig.jahrhundert" + ] + }, "orphaned/Web/API/RTCSessionDescriptionCallback": { "modified": "2019-03-23T22:51:28.888Z", "contributors": [ @@ -52423,6 +52351,78 @@ "Marsf" ] }, + "orphaned/Web/CSS/conic-gradient()": { + "modified": "2020-11-05T10:00:21.729Z", + "contributors": [ + "chrisdavidmills", + "mfuji09" + ] + }, + "orphaned/Web/CSS/image-set()": { + "modified": "2020-11-16T08:53:38.885Z", + "contributors": [ + "chrisdavidmills", + "mfuji09" + ] + }, + "orphaned/Web/CSS/linear-gradient()": { + "modified": "2020-11-16T08:57:22.063Z", + "contributors": [ + "chrisdavidmills", + "mfuji09", + "SphinxKnight", + "Sebastianz", + "Simplexible", + "wizAmit", + "slayslot", + "prayash", + "ethertank", + "sosleepy", + "Level", + "FredB" + ] + }, + "orphaned/Web/CSS/radial-gradient()": { + "modified": "2020-11-18T14:42:27.892Z", + "contributors": [ + "chrisdavidmills", + "mfuji09", + "Sebastianz", + "wizAmit", + "slayslot", + "dskmori", + "ethertank", + "sosleepy", + "Level", + "FredB" + ] + }, + "orphaned/Web/CSS/repeating-linear-gradient()": { + "modified": "2020-11-18T14:46:06.699Z", + "contributors": [ + "chrisdavidmills", + "mfuji09", + "Sebastianz", + "Prinz_Rana", + "wizAmit", + "prayash", + "ethertank", + "sosleepy" + ] + }, + "orphaned/Web/CSS/repeating-radial-gradient()": { + "modified": "2020-11-18T14:47:38.855Z", + "contributors": [ + "chrisdavidmills", + "mfuji09", + "Sebastianz", + "Simplexible", + "Prinz_Rana", + "mrstork", + "ethertank", + "sosleepy" + ] + }, "orphaned/Web/Compatibility_FAQ": { "modified": "2019-03-23T23:03:33.809Z", "contributors": [ diff --git a/files/ja/orphaned/web/api/rtcidentityerrorevent/index.html b/files/ja/orphaned/web/api/rtcidentityerrorevent/index.html new file mode 100644 index 0000000000..2059ce881e --- /dev/null +++ b/files/ja/orphaned/web/api/rtcidentityerrorevent/index.html @@ -0,0 +1,68 @@ +--- +title: RTCIdentityErrorEvent +slug: orphaned/Web/API/RTCIdentityErrorEvent +translation_of: Web/API/RTCIdentityErrorEvent +original_slug: Web/API/RTCIdentityErrorEvent +--- +

{{APIRef("WebRTC")}}{{SeeCompatTable}}

+ +

RTCIdentityErrorEvent インタフェースは、通常 {{domxref("RTCPeerConnection")}} に関連付けられたアイデンティティー・プロバイダ(IdP) を示すイベントを表現します。これは、?遭遇したエラーを持ちます。{{event("idpassertionerror")}} と{{event("idpvalidationerror")}}の2つのイベントタイプを持ちます。

+ +
+

Firefox implements this interface under the following name: RTCPeerConnectionIdentityErrorEvent. It is likely that it will correct this name when it will unprefix {{domxref("RTCPeerConnection")}}, once spec and implementation will have been stabilized.

+
+ +

プロパティ

+ +

{{domxref("RTCIdentityErrorEvent")}} は {{domxref("Event")}}であり、このイベントは{{domxref("Event")}} のプロパティも実装します。

+ +
+
{{domxref("RTCIdentityErrorEvent.idp")}} {{readonlyinline}}
+
エラーレスポンスを生成したアイデンティティー・プロバイダ(idp)の{{Glossary("domain name")}} を表す{{domxref("DOMString")}}です。
+
{{domxref("RTCIdentityErrorEvent.loginUrl")}} {{readonlyinline}}
+
認証が完了可能なURLを示す{{domxref("DOMString")}} です。nullの値をとることもあり、アイデンティティー・プロバイダ(idp)から提供されます。
+
{{domxref("RTCIdentityErrorEvent.protocol")}} {{readonlyinline}}
+
利用されているIdpプロトコルを示す{{domxref("DOMString")}}です。
+
+ +

メソッド

+ +

{{domxref("RTCIdentityErrorEvent")}} は {{domxref("Event")}}であり、このイベントは{{domxref("Event")}} のプロパティも実装します。具体的な{{domxref("RTCIdentityErrorEvent")}} メソッドはありません。

+ +

例

+ +
pc.onidpassertionerror = function( ev ) {
+                           alert("The idp named '" +
+                                 ev.idp +
+                                 "' encountered an error " +
+                                 "while generating an assertion.");
+                         }
+
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('WebRTC 1.0', '#idl-def-RTCIdentityErrorEvent', 'RTCIdentityErrorEvent') }}{{Spec2('WebRTC 1.0')}}Initial definition.
+ +

ブラウザ互換性

+ +

{{Compat("api.RTCIdentityErrorEvent")}}

+ +

See also

+ + diff --git a/files/ja/orphaned/web/api/rtcidentityevent/index.html b/files/ja/orphaned/web/api/rtcidentityevent/index.html new file mode 100644 index 0000000000..bfcf18c19d --- /dev/null +++ b/files/ja/orphaned/web/api/rtcidentityevent/index.html @@ -0,0 +1,63 @@ +--- +title: RTCIdentityEvent +slug: orphaned/Web/API/RTCIdentityEvent +translation_of: Web/API/RTCIdentityEvent +original_slug: Web/API/RTCIdentityEvent +--- +

{{APIRef("WebRTC")}}{{SeeCompatTable}}

+ +

RTCIdentityEvent インタフェースは、通常 {{domxref("RTCPeerConnection")}}に関連付けられたアイデンティティー・プロバイダ(IdP) を示すイベントを表現します。これはIDアサーションによって生成されたものです。イベントタイプは{{event("identityresult")}}です。

+ +
+

Firefox implements this interface under the following name: RTCPeerConnectionIdentityEvent. It is likely that it will correct this name when it will unprefix {{domxref("RTCPeerConnection")}}, once spec and implementation will have been stabilized.

+
+ +

プロパティ

+ +

{{domxref("RTCIdentityEvent")}} は {{domxref("Event")}} であり, このイベントは {{domxref("Event")}} のプロパティも実装します。

+ +
+
{{domxref("RTCIdentityEvent.assertion")}} {{readOnlyInline}}
+
生成されたアサーションであるblobを含む{{domxref("DOMString")}}を返します。
+
+ +

メソッド

+ +

{{domxref("RTCIdentityEvent")}} は {{domxref("Event")}} であり, このイベントは {{domxref("Event")}} のプロパティも実装します。具体的な {{domxref("RTCIdentityEvent")}} メソッドはありません。

+ +

例

+ +
pc.onidentityresult = function( ev ) {
+                         alert("A new identity assertion (blob: '" +
+                               ev.assertion +
+                               "') has been generated.");
+                      }
+
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('WebRTC 1.0', '#idl-def-RTCIdentityEvent', 'RTCIdentityEvent') }}{{Spec2('WebRTC 1.0')}}Initial definition.
+ +

ブラウザ互換性

+ +

{{Compat("api.RTCIdentityEvent")}}

+ +

See also

+ + diff --git a/files/ja/orphaned/web/css/conic-gradient()/index.html b/files/ja/orphaned/web/css/conic-gradient()/index.html new file mode 100644 index 0000000000..23970dcf6d --- /dev/null +++ b/files/ja/orphaned/web/css/conic-gradient()/index.html @@ -0,0 +1,270 @@ +--- +title: conic-gradient() +slug: orphaned/Web/CSS/conic-gradient() +tags: + - CSS + - CSS 画像 + - CSS 関数 + - Reference + - ウェブ + - グラデーション + - グラフィック + - レイアウト +translation_of: Web/CSS/conic-gradient() +original_slug: Web/CSS/conic-gradient() +--- +
{{CSSRef}}
+ +

conic-gradient() は CSS の関数で、 (中心から広がるのではなく) 中心点の周りを回りながら色が変化する放射グラデーションから成る画像を生成します。扇型グラデーションの例としては、円グラフや色相環などがあります。 conic-gradient() 関数の結果は {{CSSxRef("<gradient>")}} データ型のオブジェクトであり、これは {{CSSxRef("<image>")}} の特殊型です。

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

他のグラデーションと同様、扇形グラデーションは固有の寸法を持ちません。つまり、自然の寸法や推奨される寸法、推奨される縦横比もありません。固有の寸法は適用先の要素の寸法、または要素の寸法以外で設定された <image> の寸法に一致します。

+ +

繰り返して360度の回転を埋める扇形グラデーションを生成するには、代わりに {{CSSxRef("repeating-conic-gradient")}} 関数を使用してください。

+ +

g

+ +

<gradient> は <image> データ型に属するため、 <image> が使用できるところでしか使用できません。このため、 conic-gradient() は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("<color>")}} データ型を使用するプロパティでは動作しません。

+ +
+

なぜ "conic" (円錐の) グラデーションと呼ばれるのか。色経由点が一方よりもう一方が明るい場合、上から見た円錐のように見えるからです。

+
+ +

扇型グラデーションの理解

+ +

扇形グラデーションの構文は放射グラデーションの構文と似ていますが、色経由点はグラデーションの中心から現れるグラデーションライン上ではなく、グラデーションアーク、すなわち円周上に配置されます。扇形グラデーションでは、色の遷移は円の中心を回るように、上から始まって時計回りに行われます。放射グラデーションでは、色の遷移は楕円の中心から外に向けて、すべての方向に行われます。

+ +

扇形グラデーションの円周と放射グラデーションの軸に沿った色経由点

+ +

扇形グラデーションは、回転角度とグラデーションの中心を指定し、色停止点のリストを指定して指定します。長さを指定して色停止点を配置する線形グラデーションや放射グラデーションとは異なり、扇形グラデーションの色停止点は角度を指定します。単位には度を表す deg、グラデーションを表す grad、ラジアンを表す rad、回転数を表す turn があります。1つの円は360度、400グラデーション、2πラジアン、1回転になります。扇形グラデーションに対応しているブラウザーはパーセント値も受け付けており、100%は360度に相当しますが、これは仕様にはありません。

+ +

放射グラデーションと同様に、扇形グラデーションの構文では、グラデーションの中心を画像内のどこにでも、あるいは画像の外側にでも配置することができます。位置の値は、 2 値の背景位置の構文に似ています。

+ +

グラデーション円弧は、グラデーションのの円周です。グラデーションまたは円弧の始点は北、つまり12時の方向です。そして、グラデーションは from の角度だけ回転します。グラデーションの色は、角度のついた色停止点、それらの開始点、終了点、および、その間、および、任意の角度のついた色停止点によって決定されます。色間の遷移は、隣接する色の色停止点の間のカラーヒントで変更することができます。

+ +

グラデーションのカスタマイズ

+ +

By adding more angled color-stop points on the gradient arc, you can create a highly customized transition between multiple colors. A color-stop's position can be explicitly defined by using an {{CSSxRef("<angle>")}}. If you don't specify the location of a color stop, it is placed halfway between the one that precedes it and the one that follows it. If you don't specify an angle for the first or last color stop, their values are 0deg and 360deg respectively. The following two gradients are equivalent

+ +
conic-gradient(red, orange, yellow, green, blue);
+conic-gradient(red 0deg, orange 90deg, yellow 180deg, green 270deg, blue 360deg);
+ +

By default, colors transition smoothly from the color at one color stop to the color at the subsequent color stop, with the midpoint between the colors being the half way point between the color transition. You can move this color transition midpoint to any point between two color stops by adding a color hint, indicating where the middle of the color transition should be. The following is solid red from the start to the 10% mark, transitions from red to blue over 80% of the turn, with the final 10% being solid blue. The midpoint of the red to blue gradient change, however, is at the 20% mark rather than the 50% mark as would have happened without the 80grad, or 20%, color hint.

+ +
conic-gradient(red 40grad, 80grad, blue 360grad);
+ +

If two or more color stops are at the same location, the transition will be a hard line between the first and last colors declared at that location. To use conic gradients to create pie charts --- which is NOT the correct way to create pie charts as background images are not accessible -- use hard color stops, where the color stop angles for two adjacent color stops are the same. The easiest way to do this is to use multip position colors stops. The following two declarations are equivalent:

+ +
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);
+ +

Color stops should be listed in ascending order. Subsequent color stops of lower value will override the value of the previous color stop creating a hard transition. The following changes from red to yellow at the 30% mark, and then transitions from yellow to blue over 35% of the gradient

+ +
conic-gradient(red .8rad, yellow .6rad, blue 1.3rad);
+
+ +

There are other effects you can create with conic gradients. Oddly, a checkerboard is one of them. By creating quadrants with an upper left and lower right white quadrant and lower left and upper right black quadrants, then repeating the gradient 16 times (four times across and four times down) you can make a checkerboard.

+ +
conic-gradient(#fff 90deg, #000 0.25turn 0.5turn, #fff 1rad 1.5rad, #000 300grad);
+background-size: 25% 25%;
+
+ +

And, yes, you can mix and match different angle units, but don't. The above is hard to read.

+ +

構文

+ +
/* 45度回転した扇形グラデーション、
+   青で始まり赤で終わる */
+conic-gradient(from 45deg, blue, red);
+
+/* A a bluish purple box: the gradient goes from blue to red,
+   but as only the bottom right quadrant is visible, as the
+   center of the conic gradient is in at the top left corner */
+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>")}}
+
Preceded by the from keyterm, and taking an angle as its value, defines the gradient rotation in clockwise direction.
+
<position>
+
Using the same length, order and keyterm values as the background-position property, the position defines center of the gradient. If omitted, the default value is center, meaing the gradient will be centered, .
+
<angular-color-stop>
+
A color-stop's {{CSSxRef("<color>")}} value, followed by one or two optional stop positions, (an {{CSSxRef("<angle>")}} along the gradient's circumference axis).
+
<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.
+
+
+

Note: Rendering of color stops in CSS gradients follows the same rules as color stops in SVG gradients.

+
+
+
+ +

形式文法

+ +
conic-gradient(
+  [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )
+  \---------------------------------/ \----------------------------/
+        Gradient definition                List of color stops
+
+where <angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>
+  and <angular-color-stop> = <color> && <color-stop-angle>?
+  and <angular-color-hint> = <angle-percentage>
+  and <color-stop-angle> = <angle-percentage>{1,2}
+ +

例

+ +
+

40度のグラデーション

+ + + +
div {
+  background-image:
+     conic-gradient(from 40deg, #fff, #000);
+}
+
+ +

{{EmbedLiveSample("Gradient_at_40-degrees", 120, 120)}}

+
+ +
+

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

+ + + +
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.

+ + + +
div {
+  background: conic-gradient(
+     red 36deg, orange 36deg 170deg, yellow 170deg);
+  border-radius: 50%
+}
+ +

{{EmbedLiveSample("Gradient_pie-chart", 120, 120)}}

+
+ +
+

Checkerboard

+ + + +
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)}}

+
+ +
+

注: 他の例は CSS グラデーションの使用 をご覧ください。

+
+ +

アクセシビリティの考慮事項

+ +

Browsers do not provide any special information on background images to assistive technology. This is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users. While it is possible to create pie charts, checkerboards, and other effects with conic gradients, CSS images provide no native way to assign alternative text, and therefore the image represented by the conic gradient will not be accessible to screen reader users. If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document.

+ + + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Images', '#conic-gradients', 'conic-gradient()')}}{{Spec2('CSS4 Images')}}
+ +

ブラウザーの互換性

+ + + +
{{Compat("css.types.image.gradient.conic-gradient")}}
+ +

関連情報

+ + diff --git a/files/ja/orphaned/web/css/image-set()/index.html b/files/ja/orphaned/web/css/image-set()/index.html new file mode 100644 index 0000000000..545c366fea --- /dev/null +++ b/files/ja/orphaned/web/css/image-set()/index.html @@ -0,0 +1,88 @@ +--- +title: image-set() +slug: orphaned/Web/CSS/image-set() +tags: + - CSS + - CSS Function + - CSS-4 Images + - Function + - Reference + - Web +translation_of: Web/CSS/image-set() +original_slug: Web/CSS/image-set() +--- +
{{cssref}}
+ +

image-set() は CSS の関数表記で、主に高密度の画面において、指定されたセットから最も適切な CSS 画像をブラウザーに選択させる方法です。

+ +

解像度と帯域は端末やネットワークアクセスによって様々です。 image-set() 関数は、画像オプションのセットを提供して — それぞれが解像度の宣言に関連付けられ — ブラウザーが端末および設定にもっともふさわしいものを選択することで、ユーザーの端末にもっとも適切な解像度の画像を配信します。解像度はファイルサイズのプロキシとして使用することができます。 — 高い密度の画面で遅いモバイル接続を使用しているユーザーエージェントは、高解像度の画面の読み込みを待つよりも、低解像度の画像を受信したほうが良いかもしれません。

+ +

image-set() はそれぞれのユーザーが必要なことを判断するのではなく、オプションを提供することができます。

+ +

構文

+ +
image-set() = image-set( <image-set-option># )
+where <image-set-option> = [ <image> | <string> ] <resolution> and
+      <string> is an <url>
+
+ +

値

+ +

もっともよく見かけるのは url() または <string> 値ですが、 <image> は画像セット以外のあらゆる画像型を取ることができます。 image-set() 関数は他の image-set() 関数の中に入れることはできません。

+ +

<resolution> の単位には、ピクセル当たりのドット数を表す x または dppx、インチ当たりのドット数を表す dpi、センチメートル当たりのドット数を表す dpcm があります。 image-set() の中の画像はすべて、固有の解像度が必要です。

+ +

例

+ +

image-set() を使用して代替の background-image オプションを提供する

+ +
background-image: image-set( "cat.png" 1x,
+                             "cat-2x.png" 2x,
+                             "cat-print.png" 600dpi);
+ +

この例は image-set() の使い方を示しており、 {{cssxref("background-image")}} のオプションとして、必要な解像度に応じて2つの異なる画像、通常版と高解像度版を選択する方法を示しています。

+ +

アクセシビリティの考慮

+ +

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

+ + + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Images', '#image-set-notation', 'The image-set() notation')}}{{Spec2('CSS4 Images')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.types.image.image-set")}}

+ +

関連情報

+ + diff --git a/files/ja/orphaned/web/css/linear-gradient()/index.html b/files/ja/orphaned/web/css/linear-gradient()/index.html new file mode 100644 index 0000000000..b4334abad4 --- /dev/null +++ b/files/ja/orphaned/web/css/linear-gradient()/index.html @@ -0,0 +1,219 @@ +--- +title: linear-gradient() +slug: orphaned/Web/CSS/linear-gradient() +tags: + - CSS + - CSS 画像 + - CSS 関数 + - Reference + - Web + - ウェブ + - グラフィック + - レイアウト +translation_of: Web/CSS/linear-gradient() +original_slug: Web/CSS/linear-gradient() +--- +
{{CSSRef}}
+ +

CSS の linear-gradient() 関数は、二つ以上の色の間で、連続的な直線の変化から構成される画像を生成します。結果は {{CSSxRef("<gradient>")}} データ型のオブジェクトであり、これは {{CSSxRef("<image>")}} の特殊型です。

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

他のグラデーションと同様、線形グラデーションは固有の寸法を持ちません。つまり、画像本来の寸法や、優先されるアスペクト比を持たないということです。実際の寸法は、適用先の要素の寸法と一致します。

+ +

繰り返して領域を埋め尽くす線形グラデーションを生成するには、代わりに {{CSSxRef("repeating-linear-gradient")}} プロパティを使用してください。

+ +

<gradient> は CSS の <image> データ型に所属しますので、 <image> が使用できるところでのみ使用できます。このため、 linear-gradient は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("<color>")}} を要求するプロパティでは動作しません。

+ +

線形グラデーションの構成

+ +

線形グラデーションは、グラデーションライン (Gradient line) と呼ばれる軸によって定義されます。軸上の各点にはそれぞれ違った色が割り当てられます。なめらかなグラデーションを作成するために、 linear-gradient() 関数はグラデーションラインと直行した線を、グラデーションライン上の交点の色で連続して引きます。

+ +

linear-gradient.png

+ +

グラデーションラインは、グラデーション画像を含むボックスの中心と、角度によって定義されます。グラデーションの色は、開始点 (Starting point)、 終了点 (Ending point) と、省略可能な色経由点 (color-stop point) の各点でそれぞれ定義されます。

+ +

開始点は、グラデーションラインの最初の色が始まる点です。終了点は最後の色が終わるところです。これらの点は、グラデーションラインとそれに直交し、ボックスの同一象限にあるコーナーを通る直線との交点によって定義されます。ただ、もっと簡単に、ボックスの中心を原点としたときの開始点の点対称な位置としても定義できます。こうした何だかややこしい開始点と終了点の定義が、マジックコーナーと呼ばれることのある興味深いプロパティを生みました。開始点と終了点に近いコーナーは、それぞれ開始点と終了点と同じ色を持ちます。

+ +

グラデーションのカスタマイズ

+ +

グラデーションラインに色経由点を追加することで、開始点と終了点の間で高度にカスタマイズした変化を作成することができます。色経由点は {{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%があるので、変化の中間点は50%の位置ではなく30%の位置になります。

+ +
linear-gradient(red 10%, 30%, blue 90%);
+ +

2つ以上の色経由点が同じ位置である場合、その位置で宣言された最初と最後の色の間で明確な線になります。

+ +

色経由点は昇順に並べてください。次の色経由点がより小さな値になると、以前の色経由点を上書きすることになり、急な変化になります。以下の例は30%が赤から黄へ変化し、黄から青への変化がその上でグラデーションの35%になります。

+ +
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%の位置の色になります。

+ +

構文

+ +
/* 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%);
+ +

値

+ +
+
<side-or-corner>
+
グラデーションラインの開始点の位置。指定する場合は、 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 と等価で、値が増加するとそこから時計回りに回ります。
+
<linear-color-stop>
+
色経由点の {{CSSxRef("<color>")}} の値であり、任意でその後に停止位置を指定します(グラデーションの軸に沿った {{CSSxRef("<percentage>")}} または {{CSSxRef("<length>")}} の位置)。
+
<color-hint>
+
color-hint は、隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。
+
+
+

メモ: CSS グラデーションにおける色経由点の描画は、 SVG グラデーションと同じ規則に従います。

+
+
+
+ +

形式文法

+ +
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> ]
+ +

例

+ +

45 度 のグラデーション

+ + + +
body {
+  background: linear-gradient(45deg, red, blue);
+}
+
+ +

{{EmbedLiveSample("Gradient_at_a_45-degree_angle", 120, 120)}}

+ +

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

+ + + +
body {
+  background: linear-gradient(135deg, orange, orange 60%, cyan);
+}
+ +

{{EmbedLiveSample("Gradient_that_starts_at_60_of_the_gradient_line", 120, 120)}}

+ +

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

+ +

この例は複数の位置の色経由点を使用しており、隣り合う色に同じ色経由値があるため、縞模様の効果になります。

+ + + +
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 グラデーションの使用を参照してください。

+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Images', '#color-stop-syntax', 'Gradient Color-Stops')}}{{Spec2('CSS4 Images')}}補間のヒントを追加。
{{SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()')}}{{Spec2('CSS3 Images')}}初回定義
+ +

ブラウザーの互換性

+ + + +
{{Compat("css.types.image.gradient.linear-gradient")}}
+ +

関連情報

+ + diff --git a/files/ja/orphaned/web/css/radial-gradient()/index.html b/files/ja/orphaned/web/css/radial-gradient()/index.html new file mode 100644 index 0000000000..6642e1ca23 --- /dev/null +++ b/files/ja/orphaned/web/css/radial-gradient()/index.html @@ -0,0 +1,175 @@ +--- +title: radial-gradient() +slug: orphaned/Web/CSS/radial-gradient() +tags: + - CSS + - CSS Function + - CSS Images + - Function + - Graphics + - Layout + - Reference + - Web + - gradient +translation_of: Web/CSS/radial-gradient() +original_slug: Web/CSS/radial-gradient() +--- +
{{CSSRef}}
+ +

CSS の radial-gradient() 関数は、二つ以上の色の連続的な移行が原点から放射状に広がる画像を生成します。形状は円形になったり楕円形になったりします。関数の結果は {{cssxref("<gradient>")}} データ型のオブジェクトであり、これは {{cssxref("<image>")}} の特殊形です。

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

構文

+ +
/* コンテナーの中央にあるグラデーション、
+   赤で始まり、青へ変わり、緑で終わる */
+radial-gradient(circle at center, red 0, blue, green 100%)
+ +

値

+ +
+
{{cssxref("<position>")}}
+
グラデーションの位置で、 {{cssxref("background-position")}} や {{cssxref("transform-origin")}} と同じ方法で解釈されます。指定されなかった場合、既定値は center です。
+
<shape>
+
グラデーションの形状です。値は circle (つまり、グラデーションの形状が一定の半径の円) か ellipse (つまり、軸に沿った楕円) のいずれかです。指定されなかった場合、既定値は ellipse です。
+
<extent-keyword>
+
終端の形状の大きさを指定するキーワードです。利用可能な値は次の通りです。 + + + + + + + + + + + + + + + + + + + + + + + + + +
キーワード説明
closest-sideグラデーションの終端の形状は、中心から最も近いボックスの辺に (circle の場合) または中心から最も近い縦の辺と横の辺に (ellipse の場合) 内接します。
closest-cornerグラデーションの終端の形状は、ボックスの中心から最も近い頂点に接するように大きさが調整されます。
farthest-sideclosest-side と同様ですが、終端の形状がその中心から最も遠い辺 (または縦と横の辺) に接するように大きさが調整される点が異なります。
farthest-corner既定値で、グラデーションの終端の形状は、ボックスの中心から最も遠い頂点に接するように大きさが調整されます。
+ +
+

注: この関数の初期の実装では、他のキーワード (cover および contain) をそれぞれ標準の farthest-corner および closest-side の別名として含めていました。実装によってはすでに古い形を外しているので、標準のキーワードのみを使用してください。

+
+
+
<linear-color-stop>
+
色経由点の {{cssxref("<color>")}} 値と、それに続く1つまたは2つの省略可能な経由位置 (グラデーション軸沿いの {{cssxref("<percentage>")}} または {{cssxref("<length>")}}) です。 percentage が 0%、または length が 0 の場合は、グラデーションの中心を表します。 100% は終端の形状と仮想グラデーションレイの交点を表します。その間のパーセント値はグラデーションレイにおける直線的な位置です。
+
<color-hint>
+
color-hint は、隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。
+
+ +

解説

+ +

他のグラデーションと同様、放射グラデーションは固有の寸法を持ちません。つまり、自然の寸法や推奨される寸法、推奨される縦横比もありません。具体的な寸法は、適用先の要素の寸法に一致します。

+ +

繰り返してコンテナーを埋める放射グラデーションを生成するには、代わりに {{cssxref("repeating-radial-gradient")}} 関数を使用してください。

+ +

<gradient> は <image> データ型に属するため、 <image> が使用できるところでしか使用できません。このため、 radial-gradient() は {{cssxref("background-color")}} や、その他の {{cssxref("<color>")}} データ型を使用するプロパティでは動作しません。

+ +

放射グラデーションの構成

+ +

放射グラデーションは中心位置、最終的な形状、および二つ以上の色経由点で定義されます。

+ +

滑らかなグラデーションを生成するために、 radial-gradient() 関数は中央から最終的な形状 (およびその先) に向けて一連の同心円の形状を描きます。最終的な形状は円または楕円です。

+ +

色経由点は、中心から右方向に水平に延びる仮想的なグラデーション光の上に配置されます。色経由点の位置を決めるパーセンテージは、最終的な形状とこのグラデーションレイの交点を 100% としたときの相対値です。各形状は単色で、色は交差したグラデーション光の色によって定義されます。

+ +

例

+ +

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

+ + + +
.radial-gradient {
+  background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
+}
+ +

{{EmbedLiveSample('Simple_gradient', 120, 120)}}

+ +

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

+ + + +
.radial-gradient {
+  background-image: radial-gradient(farthest-corner at 40px 40px,
+      #f35 0%, #43e 100%);
+}
+ +

{{EmbedLiveSample('Non-centered_gradient', 240, 120)}}

+ +

他の radial-gradient の例

+ +

他の例は CSS グラデーションの使用を参照してください。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()')}}{{Spec2('CSS3 Images')}}初回定義
+ +

ブラウザーの互換性

+ + + +
{{Compat("css.types.image.gradient.radial-gradient")}}
+ +

Quantum CSS のメモ

+ +

Gecko は radial-gradient(circle gold,red) のような放射グラデーションが動きそうで、 circle と gold との間にカンマがないので動作しないというバグを持っていました。また、 {{cssxref("calc")}} 式が radial-gradient() 関数の半径の部分に使用されると、弾かれて — 値が無効になって — いました ({{bug(1376019)}})。 Firefox の新しいパラレル CSS エンジン (Quantum CSS または Stylo とも呼ばれ、 Firefox 57 でリリース) は、これらのバグを修正しています。

+ +

関連情報

+ + diff --git a/files/ja/orphaned/web/css/repeating-linear-gradient()/index.html b/files/ja/orphaned/web/css/repeating-linear-gradient()/index.html new file mode 100644 index 0000000000..59371661ae --- /dev/null +++ b/files/ja/orphaned/web/css/repeating-linear-gradient()/index.html @@ -0,0 +1,167 @@ +--- +title: repeating-linear-gradient() +slug: orphaned/Web/CSS/repeating-linear-gradient() +tags: + - CSS + - CSS 画像 + - CSS 関数 + - Reference + - ウェブ + - グラフィック + - レイアウト +translation_of: Web/CSS/repeating-linear-gradient() +original_slug: Web/CSS/repeating-linear-gradient() +--- +
{{CSSRef}}
+ +

CSS の repeating-linear-gradient() 関数は、反復線形グラデーションによる画像を生成します。 {{cssxref("linear-gradient")}} と似ており、同じ引数を取りますが、両方向に無限に色経由点を繰り返してコンテナー全体を埋めます。関数の返値は {{cssxref("<gradient>")}} データ型のオブジェクトであり、これは {{cssxref("<image>")}} の特殊型です。

+ +
{{EmbedInteractiveExample("pages/css/function-repeating-linear-gradient.html")}}
+ + + +

繰り返すグラデーションの長さは、最初の色経由点と最後の色経由点の間の距離です。最初の色に color-stop-length がない場合、 color-stop-length の既定値は 0 になります。それぞれの繰り返しにおいて、色経由点の位置は基本的な線形グラデーションの長さの倍数だけずらしたものになります。この結果、グラデーションの最初と最後の色は常に隣り合わせになります。二つが異なる色であれば、視覚的に明確な変わり目ができるでしょう。これは最初の色を最後の色として再び使用することで修正することができます。

+ +

他のグラデーションと同じく、線形反復グラデーションも固有の寸法を持ちません。つまり、本来の寸法も優先される寸法も、優先されるアスペクト比も持たないということです。実際の寸法は、適用先の要素の寸法と一致します。

+ +

<gradient> は CSS の <image> データ型に所属しますので、 <image> が使用できるところでのみ使用できます。このため、 repeating-linear-gradient() は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("<color>")}} を要求するプロパティでは動作しません。

+ +

構文

+ +
/* 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%);
+
+ +

値

+ +
+
<side-or-corner>
+
グラデーション線の開始点の位置。指定する場合は、 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 と等価で、値が増加するとそこから時計回りに回ります。
+
<linear-color-stop>
+
色経由点の {{CSSxRef("<color>")}} の値であり、任意でその後に停止位置を指定します(グラデーションの軸に沿った {{CSSxRef("<percentage>")}} または {{CSSxRef("<length>")}} の位置)。 0% のパーセント値または 0 の長さは、グラデーションの先頭を表します。 100% の値は画像の寸法の 100% であり、つまりグラデーションは反復されません。
+
<color-hint>
+
color-hint は、隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。
+
+
+

メモ: CSS グラデーションにおける色経由点の描画は、 SVG グラデーションと同じ規則に従います。

+
+
+
+ +

形式文法

+ +
repeating-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> ]
+
+ +

例

+ +

縞模様

+ + + +
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回繰り返す水平線

+ + + +
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本の水平線に相当します。

+ +
+

メモ: 他の例は CSS グラデーションの使用を参照してください。

+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Images', '#repeating-gradients', 'repeating-linear-gradient()')}}{{Spec2('CSS3 Images')}}初回定義
+ +

ブラウザーの対応

+ + + +
{{Compat("css.types.image.gradient.repeating-linear-gradient")}}
+ +

関連情報

+ + diff --git a/files/ja/orphaned/web/css/repeating-radial-gradient()/index.html b/files/ja/orphaned/web/css/repeating-radial-gradient()/index.html new file mode 100644 index 0000000000..0c8a2e1cef --- /dev/null +++ b/files/ja/orphaned/web/css/repeating-radial-gradient()/index.html @@ -0,0 +1,187 @@ +--- +title: repeating-radial-gradient() +slug: orphaned/Web/CSS/repeating-radial-gradient() +tags: + - CSS + - CSS 画像 + - CSS 関数 + - Reference + - ウェブ + - グラデーション + - グラフィック + - レイアウト +translation_of: Web/CSS/repeating-radial-gradient() +original_slug: Web/CSS/repeating-radial-gradient() +--- +
{{CSSRef}}
+ +

CSS の repeating-radial-gradient() 関数は、原点から広がり繰り返すグラデーションから成る画像を生成します。 {{cssxref("radial-gradient")}} と似ており、同じ引数を取りますが、 {{cssxref("repeating-linear-gradient")}} と同様にすべての方向に色経由点を無限に繰り返してコンテナー全体を埋めます。関数の返値は {{cssxref("<gradient>")}} データ型のオブジェクトであり、これは {{cssxref("<image>")}} の特殊型です。

+ +
{{EmbedInteractiveExample("pages/css/function-repeating-radial-gradient.html")}}
+ + + +

それぞれの繰り返しにおいて、色経由点の位置は基本的な放射グラデーションの寸法 (最初と最後の色経由点の間の距離) の倍数だけずらしたものになります。この結果、グラデーションの最初と最後の色は常に隣り合わせになります。二つが異なる色であれば、視覚的に明確な変わり目ができるので、最初の色を最後の色として繰り返すことで緩和できます。

+ +

他のグラデーションと同じく、放射反復グラデーションも固有の寸法を持ちません。つまり、本来の寸法も優先される寸法も、優先されるアスペクト比も持たないということです。実際の寸法は、適用先の要素の寸法と一致します。

+ +

<gradient> は <image> データ型に属するため、 <image> が使用できるところでしか使用できません。このため、 repeating-radial-gradient() は {{cssxref("background-color")}} や、その他の {{cssxref("<color>")}} データ型を使用するプロパティでは動作しません。

+ +

構文

+ +
/* コンテナーの中央からのグラデーションで、
+   赤で始まり、青に変化し、緑で終わり、
+   それぞれ 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です。
+
<shape>
+
グラデーションの形状です。 circle (グラデーションの形状が一定の半径の円の意味) か ellipse (軸に沿った楕円の意味) のいずれかです。指定されなかった場合、既定値は ellipse です。
+
<extent-keyword>
+
終端の形状の大きさを指定するキーワードです。利用可能な値は次の通りです。
+
+ + + + + + + + + + + + + + + + + + + + + + + +
キーワード説明
closest-sideグラデーションの終端の形状は、中心から最も近いボックスの辺に (circle の場合) または中心から最も近い縦の辺と横の辺に (ellipse の場合) 内接します。
closest-cornerグラデーションの終端の形状は、ボックスの中心から最も近い頂点に接するように大きさが調整されます。
farthest-sideclosest-side と同様ですが、終端の形状がその中心から最も遠い辺 (または縦と横の辺) に接するように大きさが調整される点が異なります。
farthest-cornerグラデーションの終端の形状は、ボックスの中心から最も遠い頂点に接するように大きさが調整されます。
+ +
+

メモ: この関数の初期の実装では、他のキーワード (cover および contain) をそれぞれ標準の farthest-corner および closest-side の別名として含めていました。実装によってはすでに古い形を外しているので、標準的なキーワードのみを使用してください。

+
+
+
<color-stop>
+
色経由点の {{cssxref("<color>")}} 値と、それに続く省略可能な経由位置 (グラデーション軸沿いの {{cssxref("<percentage>")}} または {{cssxref("<length>")}}) です。 percentage が 0%、または length が 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-list> )
+        \---------------------------------------------------------------/\-----------------/
+                  Contour, size and position of the ending shape          List of color stops
+
+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> ]
+ +

例

+ +

白と黒のグラデーション

+ + + +
.radial-gradient {
+  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
+}
+
+ +

{{EmbedLiveSample('Black_and_white_gradient', 120, 120)}}

+ +

最も遠い角

+ + + +
.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回繰り返します。色経由で複数の位置に対応しているブラウザーでは、赤と緑の縞模様の楕円が表示されます。この構文にまだ対応していないブラウザーでは、赤から黒、それから青から緑へと変化するグラデーションが表示されます。

+ +
+

メモ: 他の例は CSS グラデーションの使用 をご覧ください。

+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Images', '#repeating-gradients', 'repeating-radial-gradient()')}}{{Spec2('CSS3 Images')}}初回定義
+ +

ブラウザーの対応

+ + + +
{{Compat("css.types.image.gradient.repeating-radial-gradient")}}
+ +

関連情報

+ + diff --git a/files/ja/web/api/rtcidentityerrorevent/index.html b/files/ja/web/api/rtcidentityerrorevent/index.html deleted file mode 100644 index cd330010f2..0000000000 --- a/files/ja/web/api/rtcidentityerrorevent/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: RTCIdentityErrorEvent -slug: Web/API/RTCIdentityErrorEvent -translation_of: Web/API/RTCIdentityErrorEvent ---- -

{{APIRef("WebRTC")}}{{SeeCompatTable}}

- -

RTCIdentityErrorEvent インタフェースは、通常 {{domxref("RTCPeerConnection")}} に関連付けられたアイデンティティー・プロバイダ(IdP) を示すイベントを表現します。これは、?遭遇したエラーを持ちます。{{event("idpassertionerror")}} と{{event("idpvalidationerror")}}の2つのイベントタイプを持ちます。

- -
-

Firefox implements this interface under the following name: RTCPeerConnectionIdentityErrorEvent. It is likely that it will correct this name when it will unprefix {{domxref("RTCPeerConnection")}}, once spec and implementation will have been stabilized.

-
- -

プロパティ

- -

{{domxref("RTCIdentityErrorEvent")}} は {{domxref("Event")}}であり、このイベントは{{domxref("Event")}} のプロパティも実装します。

- -
-
{{domxref("RTCIdentityErrorEvent.idp")}} {{readonlyinline}}
-
エラーレスポンスを生成したアイデンティティー・プロバイダ(idp)の{{Glossary("domain name")}} を表す{{domxref("DOMString")}}です。
-
{{domxref("RTCIdentityErrorEvent.loginUrl")}} {{readonlyinline}}
-
認証が完了可能なURLを示す{{domxref("DOMString")}} です。nullの値をとることもあり、アイデンティティー・プロバイダ(idp)から提供されます。
-
{{domxref("RTCIdentityErrorEvent.protocol")}} {{readonlyinline}}
-
利用されているIdpプロトコルを示す{{domxref("DOMString")}}です。
-
- -

メソッド

- -

{{domxref("RTCIdentityErrorEvent")}} は {{domxref("Event")}}であり、このイベントは{{domxref("Event")}} のプロパティも実装します。具体的な{{domxref("RTCIdentityErrorEvent")}} メソッドはありません。

- -

例

- -
pc.onidpassertionerror = function( ev ) {
-                           alert("The idp named '" +
-                                 ev.idp +
-                                 "' encountered an error " +
-                                 "while generating an assertion.");
-                         }
-
- -

仕様

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('WebRTC 1.0', '#idl-def-RTCIdentityErrorEvent', 'RTCIdentityErrorEvent') }}{{Spec2('WebRTC 1.0')}}Initial definition.
- -

ブラウザ互換性

- -

{{Compat("api.RTCIdentityErrorEvent")}}

- -

See also

- - diff --git a/files/ja/web/api/rtcidentityevent/index.html b/files/ja/web/api/rtcidentityevent/index.html deleted file mode 100644 index 2e32a2dcab..0000000000 --- a/files/ja/web/api/rtcidentityevent/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: RTCIdentityEvent -slug: Web/API/RTCIdentityEvent -translation_of: Web/API/RTCIdentityEvent ---- -

{{APIRef("WebRTC")}}{{SeeCompatTable}}

- -

RTCIdentityEvent インタフェースは、通常 {{domxref("RTCPeerConnection")}}に関連付けられたアイデンティティー・プロバイダ(IdP) を示すイベントを表現します。これはIDアサーションによって生成されたものです。イベントタイプは{{event("identityresult")}}です。

- -
-

Firefox implements this interface under the following name: RTCPeerConnectionIdentityEvent. It is likely that it will correct this name when it will unprefix {{domxref("RTCPeerConnection")}}, once spec and implementation will have been stabilized.

-
- -

プロパティ

- -

{{domxref("RTCIdentityEvent")}} は {{domxref("Event")}} であり, このイベントは {{domxref("Event")}} のプロパティも実装します。

- -
-
{{domxref("RTCIdentityEvent.assertion")}} {{readOnlyInline}}
-
生成されたアサーションであるblobを含む{{domxref("DOMString")}}を返します。
-
- -

メソッド

- -

{{domxref("RTCIdentityEvent")}} は {{domxref("Event")}} であり, このイベントは {{domxref("Event")}} のプロパティも実装します。具体的な {{domxref("RTCIdentityEvent")}} メソッドはありません。

- -

例

- -
pc.onidentityresult = function( ev ) {
-                         alert("A new identity assertion (blob: '" +
-                               ev.assertion +
-                               "') has been generated.");
-                      }
-
- -

仕様

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('WebRTC 1.0', '#idl-def-RTCIdentityEvent', 'RTCIdentityEvent') }}{{Spec2('WebRTC 1.0')}}Initial definition.
- -

ブラウザ互換性

- -

{{Compat("api.RTCIdentityEvent")}}

- -

See also

- - diff --git a/files/ja/web/css/conic-gradient()/index.html b/files/ja/web/css/conic-gradient()/index.html deleted file mode 100644 index bd847a2406..0000000000 --- a/files/ja/web/css/conic-gradient()/index.html +++ /dev/null @@ -1,269 +0,0 @@ ---- -title: conic-gradient() -slug: Web/CSS/conic-gradient() -tags: - - CSS - - CSS 画像 - - CSS 関数 - - Reference - - ウェブ - - グラデーション - - グラフィック - - レイアウト -translation_of: Web/CSS/conic-gradient() ---- -
{{CSSRef}}
- -

conic-gradient() は CSS の関数で、 (中心から広がるのではなく) 中心点の周りを回りながら色が変化する放射グラデーションから成る画像を生成します。扇型グラデーションの例としては、円グラフや色相環などがあります。 conic-gradient() 関数の結果は {{CSSxRef("<gradient>")}} データ型のオブジェクトであり、これは {{CSSxRef("<image>")}} の特殊型です。

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

他のグラデーションと同様、扇形グラデーションは固有の寸法を持ちません。つまり、自然の寸法や推奨される寸法、推奨される縦横比もありません。固有の寸法は適用先の要素の寸法、または要素の寸法以外で設定された <image> の寸法に一致します。

- -

繰り返して360度の回転を埋める扇形グラデーションを生成するには、代わりに {{CSSxRef("repeating-conic-gradient")}} 関数を使用してください。

- -

g

- -

<gradient> は <image> データ型に属するため、 <image> が使用できるところでしか使用できません。このため、 conic-gradient() は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("<color>")}} データ型を使用するプロパティでは動作しません。

- -
-

なぜ "conic" (円錐の) グラデーションと呼ばれるのか。色経由点が一方よりもう一方が明るい場合、上から見た円錐のように見えるからです。

-
- -

扇型グラデーションの理解

- -

扇形グラデーションの構文は放射グラデーションの構文と似ていますが、色経由点はグラデーションの中心から現れるグラデーションライン上ではなく、グラデーションアーク、すなわち円周上に配置されます。扇形グラデーションでは、色の遷移は円の中心を回るように、上から始まって時計回りに行われます。放射グラデーションでは、色の遷移は楕円の中心から外に向けて、すべての方向に行われます。

- -

扇形グラデーションの円周と放射グラデーションの軸に沿った色経由点

- -

扇形グラデーションは、回転角度とグラデーションの中心を指定し、色停止点のリストを指定して指定します。長さを指定して色停止点を配置する線形グラデーションや放射グラデーションとは異なり、扇形グラデーションの色停止点は角度を指定します。単位には度を表す deg、グラデーションを表す grad、ラジアンを表す rad、回転数を表す turn があります。1つの円は360度、400グラデーション、2πラジアン、1回転になります。扇形グラデーションに対応しているブラウザーはパーセント値も受け付けており、100%は360度に相当しますが、これは仕様にはありません。

- -

放射グラデーションと同様に、扇形グラデーションの構文では、グラデーションの中心を画像内のどこにでも、あるいは画像の外側にでも配置することができます。位置の値は、 2 値の背景位置の構文に似ています。

- -

グラデーション円弧は、グラデーションのの円周です。グラデーションまたは円弧の始点は北、つまり12時の方向です。そして、グラデーションは from の角度だけ回転します。グラデーションの色は、角度のついた色停止点、それらの開始点、終了点、および、その間、および、任意の角度のついた色停止点によって決定されます。色間の遷移は、隣接する色の色停止点の間のカラーヒントで変更することができます。

- -

グラデーションのカスタマイズ

- -

By adding more angled color-stop points on the gradient arc, you can create a highly customized transition between multiple colors. A color-stop's position can be explicitly defined by using an {{CSSxRef("<angle>")}}. If you don't specify the location of a color stop, it is placed halfway between the one that precedes it and the one that follows it. If you don't specify an angle for the first or last color stop, their values are 0deg and 360deg respectively. The following two gradients are equivalent

- -
conic-gradient(red, orange, yellow, green, blue);
-conic-gradient(red 0deg, orange 90deg, yellow 180deg, green 270deg, blue 360deg);
- -

By default, colors transition smoothly from the color at one color stop to the color at the subsequent color stop, with the midpoint between the colors being the half way point between the color transition. You can move this color transition midpoint to any point between two color stops by adding a color hint, indicating where the middle of the color transition should be. The following is solid red from the start to the 10% mark, transitions from red to blue over 80% of the turn, with the final 10% being solid blue. The midpoint of the red to blue gradient change, however, is at the 20% mark rather than the 50% mark as would have happened without the 80grad, or 20%, color hint.

- -
conic-gradient(red 40grad, 80grad, blue 360grad);
- -

If two or more color stops are at the same location, the transition will be a hard line between the first and last colors declared at that location. To use conic gradients to create pie charts --- which is NOT the correct way to create pie charts as background images are not accessible -- use hard color stops, where the color stop angles for two adjacent color stops are the same. The easiest way to do this is to use multip position colors stops. The following two declarations are equivalent:

- -
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);
- -

Color stops should be listed in ascending order. Subsequent color stops of lower value will override the value of the previous color stop creating a hard transition. The following changes from red to yellow at the 30% mark, and then transitions from yellow to blue over 35% of the gradient

- -
conic-gradient(red .8rad, yellow .6rad, blue 1.3rad);
-
- -

There are other effects you can create with conic gradients. Oddly, a checkerboard is one of them. By creating quadrants with an upper left and lower right white quadrant and lower left and upper right black quadrants, then repeating the gradient 16 times (four times across and four times down) you can make a checkerboard.

- -
conic-gradient(#fff 90deg, #000 0.25turn 0.5turn, #fff 1rad 1.5rad, #000 300grad);
-background-size: 25% 25%;
-
- -

And, yes, you can mix and match different angle units, but don't. The above is hard to read.

- -

構文

- -
/* 45度回転した扇形グラデーション、
-   青で始まり赤で終わる */
-conic-gradient(from 45deg, blue, red);
-
-/* A a bluish purple box: the gradient goes from blue to red,
-   but as only the bottom right quadrant is visible, as the
-   center of the conic gradient is in at the top left corner */
-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>")}}
-
Preceded by the from keyterm, and taking an angle as its value, defines the gradient rotation in clockwise direction.
-
<position>
-
Using the same length, order and keyterm values as the background-position property, the position defines center of the gradient. If omitted, the default value is center, meaing the gradient will be centered, .
-
<angular-color-stop>
-
A color-stop's {{CSSxRef("<color>")}} value, followed by one or two optional stop positions, (an {{CSSxRef("<angle>")}} along the gradient's circumference axis).
-
<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.
-
-
-

Note: Rendering of color stops in CSS gradients follows the same rules as color stops in SVG gradients.

-
-
-
- -

形式文法

- -
conic-gradient(
-  [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )
-  \---------------------------------/ \----------------------------/
-        Gradient definition                List of color stops
-
-where <angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>
-  and <angular-color-stop> = <color> && <color-stop-angle>?
-  and <angular-color-hint> = <angle-percentage>
-  and <color-stop-angle> = <angle-percentage>{1,2}
- -

例

- -
-

40度のグラデーション

- - - -
div {
-  background-image:
-     conic-gradient(from 40deg, #fff, #000);
-}
-
- -

{{EmbedLiveSample("Gradient_at_40-degrees", 120, 120)}}

-
- -
-

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

- - - -
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.

- - - -
div {
-  background: conic-gradient(
-     red 36deg, orange 36deg 170deg, yellow 170deg);
-  border-radius: 50%
-}
- -

{{EmbedLiveSample("Gradient_pie-chart", 120, 120)}}

-
- -
-

Checkerboard

- - - -
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)}}

-
- -
-

注: 他の例は CSS グラデーションの使用 をご覧ください。

-
- -

アクセシビリティの考慮事項

- -

Browsers do not provide any special information on background images to assistive technology. This is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users. While it is possible to create pie charts, checkerboards, and other effects with conic gradients, CSS images provide no native way to assign alternative text, and therefore the image represented by the conic gradient will not be accessible to screen reader users. If the image contains information critical to understanding the page's overall purpose, it is better to describe it semantically in the document.

- - - -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Images', '#conic-gradients', 'conic-gradient()')}}{{Spec2('CSS4 Images')}}
- -

ブラウザーの互換性

- - - -
{{Compat("css.types.image.gradient.conic-gradient")}}
- -

関連情報

- - diff --git a/files/ja/web/css/image-set()/index.html b/files/ja/web/css/image-set()/index.html deleted file mode 100644 index a3f00ddc18..0000000000 --- a/files/ja/web/css/image-set()/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: image-set() -slug: Web/CSS/image-set() -tags: - - CSS - - CSS Function - - CSS-4 Images - - Function - - Reference - - Web -translation_of: Web/CSS/image-set() ---- -
{{cssref}}
- -

image-set() は CSS の関数表記で、主に高密度の画面において、指定されたセットから最も適切な CSS 画像をブラウザーに選択させる方法です。

- -

解像度と帯域は端末やネットワークアクセスによって様々です。 image-set() 関数は、画像オプションのセットを提供して — それぞれが解像度の宣言に関連付けられ — ブラウザーが端末および設定にもっともふさわしいものを選択することで、ユーザーの端末にもっとも適切な解像度の画像を配信します。解像度はファイルサイズのプロキシとして使用することができます。 — 高い密度の画面で遅いモバイル接続を使用しているユーザーエージェントは、高解像度の画面の読み込みを待つよりも、低解像度の画像を受信したほうが良いかもしれません。

- -

image-set() はそれぞれのユーザーが必要なことを判断するのではなく、オプションを提供することができます。

- -

構文

- -
image-set() = image-set( <image-set-option># )
-where <image-set-option> = [ <image> | <string> ] <resolution> and
-      <string> is an <url>
-
- -

値

- -

もっともよく見かけるのは url() または <string> 値ですが、 <image> は画像セット以外のあらゆる画像型を取ることができます。 image-set() 関数は他の image-set() 関数の中に入れることはできません。

- -

<resolution> の単位には、ピクセル当たりのドット数を表す x または dppx、インチ当たりのドット数を表す dpi、センチメートル当たりのドット数を表す dpcm があります。 image-set() の中の画像はすべて、固有の解像度が必要です。

- -

例

- -

image-set() を使用して代替の background-image オプションを提供する

- -
background-image: image-set( "cat.png" 1x,
-                             "cat-2x.png" 2x,
-                             "cat-print.png" 600dpi);
- -

この例は image-set() の使い方を示しており、 {{cssxref("background-image")}} のオプションとして、必要な解像度に応じて2つの異なる画像、通常版と高解像度版を選択する方法を示しています。

- -

アクセシビリティの考慮

- -

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

- - - -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Images', '#image-set-notation', 'The image-set() notation')}}{{Spec2('CSS4 Images')}}
- -

ブラウザーの互換性

- - - -

{{Compat("css.types.image.image-set")}}

- -

関連情報

- - diff --git a/files/ja/web/css/linear-gradient()/index.html b/files/ja/web/css/linear-gradient()/index.html deleted file mode 100644 index 95fb315074..0000000000 --- a/files/ja/web/css/linear-gradient()/index.html +++ /dev/null @@ -1,218 +0,0 @@ ---- -title: linear-gradient() -slug: Web/CSS/linear-gradient() -tags: - - CSS - - CSS 画像 - - CSS 関数 - - Reference - - Web - - ウェブ - - グラフィック - - レイアウト -translation_of: Web/CSS/linear-gradient() ---- -
{{CSSRef}}
- -

CSS の linear-gradient() 関数は、二つ以上の色の間で、連続的な直線の変化から構成される画像を生成します。結果は {{CSSxRef("<gradient>")}} データ型のオブジェクトであり、これは {{CSSxRef("<image>")}} の特殊型です。

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

他のグラデーションと同様、線形グラデーションは固有の寸法を持ちません。つまり、画像本来の寸法や、優先されるアスペクト比を持たないということです。実際の寸法は、適用先の要素の寸法と一致します。

- -

繰り返して領域を埋め尽くす線形グラデーションを生成するには、代わりに {{CSSxRef("repeating-linear-gradient")}} プロパティを使用してください。

- -

<gradient> は CSS の <image> データ型に所属しますので、 <image> が使用できるところでのみ使用できます。このため、 linear-gradient は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("<color>")}} を要求するプロパティでは動作しません。

- -

線形グラデーションの構成

- -

線形グラデーションは、グラデーションライン (Gradient line) と呼ばれる軸によって定義されます。軸上の各点にはそれぞれ違った色が割り当てられます。なめらかなグラデーションを作成するために、 linear-gradient() 関数はグラデーションラインと直行した線を、グラデーションライン上の交点の色で連続して引きます。

- -

linear-gradient.png

- -

グラデーションラインは、グラデーション画像を含むボックスの中心と、角度によって定義されます。グラデーションの色は、開始点 (Starting point)、 終了点 (Ending point) と、省略可能な色経由点 (color-stop point) の各点でそれぞれ定義されます。

- -

開始点は、グラデーションラインの最初の色が始まる点です。終了点は最後の色が終わるところです。これらの点は、グラデーションラインとそれに直交し、ボックスの同一象限にあるコーナーを通る直線との交点によって定義されます。ただ、もっと簡単に、ボックスの中心を原点としたときの開始点の点対称な位置としても定義できます。こうした何だかややこしい開始点と終了点の定義が、マジックコーナーと呼ばれることのある興味深いプロパティを生みました。開始点と終了点に近いコーナーは、それぞれ開始点と終了点と同じ色を持ちます。

- -

グラデーションのカスタマイズ

- -

グラデーションラインに色経由点を追加することで、開始点と終了点の間で高度にカスタマイズした変化を作成することができます。色経由点は {{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%があるので、変化の中間点は50%の位置ではなく30%の位置になります。

- -
linear-gradient(red 10%, 30%, blue 90%);
- -

2つ以上の色経由点が同じ位置である場合、その位置で宣言された最初と最後の色の間で明確な線になります。

- -

色経由点は昇順に並べてください。次の色経由点がより小さな値になると、以前の色経由点を上書きすることになり、急な変化になります。以下の例は30%が赤から黄へ変化し、黄から青への変化がその上でグラデーションの35%になります。

- -
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%の位置の色になります。

- -

構文

- -
/* 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%);
- -

値

- -
-
<side-or-corner>
-
グラデーションラインの開始点の位置。指定する場合は、 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 と等価で、値が増加するとそこから時計回りに回ります。
-
<linear-color-stop>
-
色経由点の {{CSSxRef("<color>")}} の値であり、任意でその後に停止位置を指定します(グラデーションの軸に沿った {{CSSxRef("<percentage>")}} または {{CSSxRef("<length>")}} の位置)。
-
<color-hint>
-
color-hint は、隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。
-
-
-

メモ: CSS グラデーションにおける色経由点の描画は、 SVG グラデーションと同じ規則に従います。

-
-
-
- -

形式文法

- -
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> ]
- -

例

- -

45 度 のグラデーション

- - - -
body {
-  background: linear-gradient(45deg, red, blue);
-}
-
- -

{{EmbedLiveSample("Gradient_at_a_45-degree_angle", 120, 120)}}

- -

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

- - - -
body {
-  background: linear-gradient(135deg, orange, orange 60%, cyan);
-}
- -

{{EmbedLiveSample("Gradient_that_starts_at_60_of_the_gradient_line", 120, 120)}}

- -

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

- -

この例は複数の位置の色経由点を使用しており、隣り合う色に同じ色経由値があるため、縞模様の効果になります。

- - - -
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 グラデーションの使用を参照してください。

-
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Images', '#color-stop-syntax', 'Gradient Color-Stops')}}{{Spec2('CSS4 Images')}}補間のヒントを追加。
{{SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()')}}{{Spec2('CSS3 Images')}}初回定義
- -

ブラウザーの互換性

- - - -
{{Compat("css.types.image.gradient.linear-gradient")}}
- -

関連情報

- - diff --git a/files/ja/web/css/radial-gradient()/index.html b/files/ja/web/css/radial-gradient()/index.html deleted file mode 100644 index cd31362e49..0000000000 --- a/files/ja/web/css/radial-gradient()/index.html +++ /dev/null @@ -1,174 +0,0 @@ ---- -title: radial-gradient() -slug: Web/CSS/radial-gradient() -tags: - - CSS - - CSS Function - - CSS Images - - Function - - Graphics - - Layout - - Reference - - Web - - gradient -translation_of: Web/CSS/radial-gradient() ---- -
{{CSSRef}}
- -

CSS の radial-gradient() 関数は、二つ以上の色の連続的な移行が原点から放射状に広がる画像を生成します。形状は円形になったり楕円形になったりします。関数の結果は {{cssxref("<gradient>")}} データ型のオブジェクトであり、これは {{cssxref("<image>")}} の特殊形です。

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

構文

- -
/* コンテナーの中央にあるグラデーション、
-   赤で始まり、青へ変わり、緑で終わる */
-radial-gradient(circle at center, red 0, blue, green 100%)
- -

値

- -
-
{{cssxref("<position>")}}
-
グラデーションの位置で、 {{cssxref("background-position")}} や {{cssxref("transform-origin")}} と同じ方法で解釈されます。指定されなかった場合、既定値は center です。
-
<shape>
-
グラデーションの形状です。値は circle (つまり、グラデーションの形状が一定の半径の円) か ellipse (つまり、軸に沿った楕円) のいずれかです。指定されなかった場合、既定値は ellipse です。
-
<extent-keyword>
-
終端の形状の大きさを指定するキーワードです。利用可能な値は次の通りです。 - - - - - - - - - - - - - - - - - - - - - - - - - -
キーワード説明
closest-sideグラデーションの終端の形状は、中心から最も近いボックスの辺に (circle の場合) または中心から最も近い縦の辺と横の辺に (ellipse の場合) 内接します。
closest-cornerグラデーションの終端の形状は、ボックスの中心から最も近い頂点に接するように大きさが調整されます。
farthest-sideclosest-side と同様ですが、終端の形状がその中心から最も遠い辺 (または縦と横の辺) に接するように大きさが調整される点が異なります。
farthest-corner既定値で、グラデーションの終端の形状は、ボックスの中心から最も遠い頂点に接するように大きさが調整されます。
- -
-

注: この関数の初期の実装では、他のキーワード (cover および contain) をそれぞれ標準の farthest-corner および closest-side の別名として含めていました。実装によってはすでに古い形を外しているので、標準のキーワードのみを使用してください。

-
-
-
<linear-color-stop>
-
色経由点の {{cssxref("<color>")}} 値と、それに続く1つまたは2つの省略可能な経由位置 (グラデーション軸沿いの {{cssxref("<percentage>")}} または {{cssxref("<length>")}}) です。 percentage が 0%、または length が 0 の場合は、グラデーションの中心を表します。 100% は終端の形状と仮想グラデーションレイの交点を表します。その間のパーセント値はグラデーションレイにおける直線的な位置です。
-
<color-hint>
-
color-hint は、隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。
-
- -

解説

- -

他のグラデーションと同様、放射グラデーションは固有の寸法を持ちません。つまり、自然の寸法や推奨される寸法、推奨される縦横比もありません。具体的な寸法は、適用先の要素の寸法に一致します。

- -

繰り返してコンテナーを埋める放射グラデーションを生成するには、代わりに {{cssxref("repeating-radial-gradient")}} 関数を使用してください。

- -

<gradient> は <image> データ型に属するため、 <image> が使用できるところでしか使用できません。このため、 radial-gradient() は {{cssxref("background-color")}} や、その他の {{cssxref("<color>")}} データ型を使用するプロパティでは動作しません。

- -

放射グラデーションの構成

- -

放射グラデーションは中心位置、最終的な形状、および二つ以上の色経由点で定義されます。

- -

滑らかなグラデーションを生成するために、 radial-gradient() 関数は中央から最終的な形状 (およびその先) に向けて一連の同心円の形状を描きます。最終的な形状は円または楕円です。

- -

色経由点は、中心から右方向に水平に延びる仮想的なグラデーション光の上に配置されます。色経由点の位置を決めるパーセンテージは、最終的な形状とこのグラデーションレイの交点を 100% としたときの相対値です。各形状は単色で、色は交差したグラデーション光の色によって定義されます。

- -

例

- -

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

- - - -
.radial-gradient {
-  background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
-}
- -

{{EmbedLiveSample('Simple_gradient', 120, 120)}}

- -

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

- - - -
.radial-gradient {
-  background-image: radial-gradient(farthest-corner at 40px 40px,
-      #f35 0%, #43e 100%);
-}
- -

{{EmbedLiveSample('Non-centered_gradient', 240, 120)}}

- -

他の radial-gradient の例

- -

他の例は CSS グラデーションの使用を参照してください。

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()')}}{{Spec2('CSS3 Images')}}初回定義
- -

ブラウザーの互換性

- - - -
{{Compat("css.types.image.gradient.radial-gradient")}}
- -

Quantum CSS のメモ

- -

Gecko は radial-gradient(circle gold,red) のような放射グラデーションが動きそうで、 circle と gold との間にカンマがないので動作しないというバグを持っていました。また、 {{cssxref("calc")}} 式が radial-gradient() 関数の半径の部分に使用されると、弾かれて — 値が無効になって — いました ({{bug(1376019)}})。 Firefox の新しいパラレル CSS エンジン (Quantum CSS または Stylo とも呼ばれ、 Firefox 57 でリリース) は、これらのバグを修正しています。

- -

関連情報

- - diff --git a/files/ja/web/css/repeating-linear-gradient()/index.html b/files/ja/web/css/repeating-linear-gradient()/index.html deleted file mode 100644 index a34d03a051..0000000000 --- a/files/ja/web/css/repeating-linear-gradient()/index.html +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: repeating-linear-gradient() -slug: Web/CSS/repeating-linear-gradient() -tags: - - CSS - - CSS 画像 - - CSS 関数 - - Reference - - ウェブ - - グラフィック - - レイアウト -translation_of: Web/CSS/repeating-linear-gradient() ---- -
{{CSSRef}}
- -

CSS の repeating-linear-gradient() 関数は、反復線形グラデーションによる画像を生成します。 {{cssxref("linear-gradient")}} と似ており、同じ引数を取りますが、両方向に無限に色経由点を繰り返してコンテナー全体を埋めます。関数の返値は {{cssxref("<gradient>")}} データ型のオブジェクトであり、これは {{cssxref("<image>")}} の特殊型です。

- -
{{EmbedInteractiveExample("pages/css/function-repeating-linear-gradient.html")}}
- - - -

繰り返すグラデーションの長さは、最初の色経由点と最後の色経由点の間の距離です。最初の色に color-stop-length がない場合、 color-stop-length の既定値は 0 になります。それぞれの繰り返しにおいて、色経由点の位置は基本的な線形グラデーションの長さの倍数だけずらしたものになります。この結果、グラデーションの最初と最後の色は常に隣り合わせになります。二つが異なる色であれば、視覚的に明確な変わり目ができるでしょう。これは最初の色を最後の色として再び使用することで修正することができます。

- -

他のグラデーションと同じく、線形反復グラデーションも固有の寸法を持ちません。つまり、本来の寸法も優先される寸法も、優先されるアスペクト比も持たないということです。実際の寸法は、適用先の要素の寸法と一致します。

- -

<gradient> は CSS の <image> データ型に所属しますので、 <image> が使用できるところでのみ使用できます。このため、 repeating-linear-gradient() は {{CSSxRef("background-color")}} や、その他の {{CSSxRef("<color>")}} を要求するプロパティでは動作しません。

- -

構文

- -
/* 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%);
-
- -

値

- -
-
<side-or-corner>
-
グラデーション線の開始点の位置。指定する場合は、 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 と等価で、値が増加するとそこから時計回りに回ります。
-
<linear-color-stop>
-
色経由点の {{CSSxRef("<color>")}} の値であり、任意でその後に停止位置を指定します(グラデーションの軸に沿った {{CSSxRef("<percentage>")}} または {{CSSxRef("<length>")}} の位置)。 0% のパーセント値または 0 の長さは、グラデーションの先頭を表します。 100% の値は画像の寸法の 100% であり、つまりグラデーションは反復されません。
-
<color-hint>
-
color-hint は、隣り合う色経由点の間でどのようにグラデーションが進むかを定義する補間のヒントです。長さによって、どの位置で二つの色経由点のグラデーション色が色の移行の中間点に達するかを定義します。省略された場合、色の移行の中間点は二つの色経由点の中点になります。
-
-
-

メモ: CSS グラデーションにおける色経由点の描画は、 SVG グラデーションと同じ規則に従います。

-
-
-
- -

形式文法

- -
repeating-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> ]
-
- -

例

- -

縞模様

- - - -
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回繰り返す水平線

- - - -
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本の水平線に相当します。

- -
-

メモ: 他の例は CSS グラデーションの使用を参照してください。

-
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Images', '#repeating-gradients', 'repeating-linear-gradient()')}}{{Spec2('CSS3 Images')}}初回定義
- -

ブラウザーの対応

- - - -
{{Compat("css.types.image.gradient.repeating-linear-gradient")}}
- -

関連情報

- - diff --git a/files/ja/web/css/repeating-radial-gradient()/index.html b/files/ja/web/css/repeating-radial-gradient()/index.html deleted file mode 100644 index 651c432c2b..0000000000 --- a/files/ja/web/css/repeating-radial-gradient()/index.html +++ /dev/null @@ -1,186 +0,0 @@ ---- -title: repeating-radial-gradient() -slug: Web/CSS/repeating-radial-gradient() -tags: - - CSS - - CSS 画像 - - CSS 関数 - - Reference - - ウェブ - - グラデーション - - グラフィック - - レイアウト -translation_of: Web/CSS/repeating-radial-gradient() ---- -
{{CSSRef}}
- -

CSS の repeating-radial-gradient() 関数は、原点から広がり繰り返すグラデーションから成る画像を生成します。 {{cssxref("radial-gradient")}} と似ており、同じ引数を取りますが、 {{cssxref("repeating-linear-gradient")}} と同様にすべての方向に色経由点を無限に繰り返してコンテナー全体を埋めます。関数の返値は {{cssxref("<gradient>")}} データ型のオブジェクトであり、これは {{cssxref("<image>")}} の特殊型です。

- -
{{EmbedInteractiveExample("pages/css/function-repeating-radial-gradient.html")}}
- - - -

それぞれの繰り返しにおいて、色経由点の位置は基本的な放射グラデーションの寸法 (最初と最後の色経由点の間の距離) の倍数だけずらしたものになります。この結果、グラデーションの最初と最後の色は常に隣り合わせになります。二つが異なる色であれば、視覚的に明確な変わり目ができるので、最初の色を最後の色として繰り返すことで緩和できます。

- -

他のグラデーションと同じく、放射反復グラデーションも固有の寸法を持ちません。つまり、本来の寸法も優先される寸法も、優先されるアスペクト比も持たないということです。実際の寸法は、適用先の要素の寸法と一致します。

- -

<gradient> は <image> データ型に属するため、 <image> が使用できるところでしか使用できません。このため、 repeating-radial-gradient() は {{cssxref("background-color")}} や、その他の {{cssxref("<color>")}} データ型を使用するプロパティでは動作しません。

- -

構文

- -
/* コンテナーの中央からのグラデーションで、
-   赤で始まり、青に変化し、緑で終わり、
-   それぞれ 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です。
-
<shape>
-
グラデーションの形状です。 circle (グラデーションの形状が一定の半径の円の意味) か ellipse (軸に沿った楕円の意味) のいずれかです。指定されなかった場合、既定値は ellipse です。
-
<extent-keyword>
-
終端の形状の大きさを指定するキーワードです。利用可能な値は次の通りです。
-
- - - - - - - - - - - - - - - - - - - - - - - -
キーワード説明
closest-sideグラデーションの終端の形状は、中心から最も近いボックスの辺に (circle の場合) または中心から最も近い縦の辺と横の辺に (ellipse の場合) 内接します。
closest-cornerグラデーションの終端の形状は、ボックスの中心から最も近い頂点に接するように大きさが調整されます。
farthest-sideclosest-side と同様ですが、終端の形状がその中心から最も遠い辺 (または縦と横の辺) に接するように大きさが調整される点が異なります。
farthest-cornerグラデーションの終端の形状は、ボックスの中心から最も遠い頂点に接するように大きさが調整されます。
- -
-

メモ: この関数の初期の実装では、他のキーワード (cover および contain) をそれぞれ標準の farthest-corner および closest-side の別名として含めていました。実装によってはすでに古い形を外しているので、標準的なキーワードのみを使用してください。

-
-
-
<color-stop>
-
色経由点の {{cssxref("<color>")}} 値と、それに続く省略可能な経由位置 (グラデーション軸沿いの {{cssxref("<percentage>")}} または {{cssxref("<length>")}}) です。 percentage が 0%、または length が 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-list> )
-        \---------------------------------------------------------------/\-----------------/
-                  Contour, size and position of the ending shape          List of color stops
-
-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> ]
- -

例

- -

白と黒のグラデーション

- - - -
.radial-gradient {
-  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
-}
-
- -

{{EmbedLiveSample('Black_and_white_gradient', 120, 120)}}

- -

最も遠い角

- - - -
.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回繰り返します。色経由で複数の位置に対応しているブラウザーでは、赤と緑の縞模様の楕円が表示されます。この構文にまだ対応していないブラウザーでは、赤から黒、それから青から緑へと変化するグラデーションが表示されます。

- -
-

メモ: 他の例は CSS グラデーションの使用 をご覧ください。

-
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Images', '#repeating-gradients', 'repeating-radial-gradient()')}}{{Spec2('CSS3 Images')}}初回定義
- -

ブラウザーの対応

- - - -
{{Compat("css.types.image.gradient.repeating-radial-gradient")}}
- -

関連情報

- - diff --git a/files/ko/_redirects.txt b/files/ko/_redirects.txt index 7c69785a90..52b664109f 100644 --- a/files/ko/_redirects.txt +++ b/files/ko/_redirects.txt @@ -70,7 +70,7 @@ /ko/docs/CSS/cursor /ko/docs/Web/CSS/cursor /ko/docs/CSS/cursor/Using_URL_values_for_the_cursor_property /ko/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property /ko/docs/CSS/initial_value /ko/docs/Web/CSS/initial_value -/ko/docs/CSS/linear-gradient /ko/docs/Web/CSS/linear-gradient() +/ko/docs/CSS/linear-gradient /ko/docs/orphaned/Web/CSS/linear-gradient() /ko/docs/CSS/text-shadow /ko/docs/Web/CSS/text-shadow /ko/docs/CSS/transform /ko/docs/Web/CSS/transform /ko/docs/CSS/z-index /ko/docs/Web/CSS/z-index @@ -642,6 +642,7 @@ /ko/docs/Web/API/ParentNode/children /ko/docs/orphaned/Web/API/ParentNode/children /ko/docs/Web/API/ParentNode/prepend /ko/docs/orphaned/Web/API/ParentNode/prepend /ko/docs/Web/API/Position /ko/docs/Web/API/GeolocationPosition +/ko/docs/Web/API/RTCPeerConnection/onidentityresult /ko/docs/orphaned/Web/API/RTCPeerConnection/onidentityresult /ko/docs/Web/API/RandomSource /ko/docs/Web/API/Crypto/getRandomValues /ko/docs/Web/API/RandomSource/getRandomValues /ko/docs/Web/API/Crypto/getRandomValues /ko/docs/Web/API/Screen.lockOrientation /ko/docs/Web/API/Screen/lockOrientation @@ -736,7 +737,8 @@ /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/linear-gradient /ko/docs/Web/CSS/linear-gradient() +/ko/docs/Web/CSS/linear-gradient /ko/docs/orphaned/Web/CSS/linear-gradient() +/ko/docs/Web/CSS/linear-gradient() /ko/docs/orphaned/Web/CSS/linear-gradient() /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() diff --git a/files/ko/_wikihistory.json b/files/ko/_wikihistory.json index 79e6b966f8..0fbc313652 100644 --- a/files/ko/_wikihistory.json +++ b/files/ko/_wikihistory.json @@ -6401,12 +6401,6 @@ "chansbro" ] }, - "Web/API/RTCPeerConnection/onidentityresult": { - "modified": "2020-10-15T22:22:07.358Z", - "contributors": [ - "chansbro" - ] - }, "Web/API/RTCPeerConnection/ontrack": { "modified": "2020-10-15T22:22:07.343Z", "contributors": [ @@ -9578,23 +9572,6 @@ "alattalatta" ] }, - "Web/CSS/linear-gradient()": { - "modified": "2020-11-16T08:57:34.736Z", - "contributors": [ - "chrisdavidmills", - "alattalatta", - "KadirTopal", - "jh.Park", - "Sebastianz", - "Simplexible", - "wizAmit", - "slayslot", - "prayash", - "tamnajio", - "teoli", - "mirinae312" - ] - }, "Web/CSS/margin": { "modified": "2020-10-15T21:55:14.551Z", "contributors": [ @@ -18387,12 +18364,35 @@ "JungSWon" ] }, + "orphaned/Web/API/RTCPeerConnection/onidentityresult": { + "modified": "2020-10-15T22:22:07.358Z", + "contributors": [ + "chansbro" + ] + }, "orphaned/Web/CSS/Index": { "modified": "2019-05-26T05:51:14.395Z", "contributors": [ "alattalatta" ] }, + "orphaned/Web/CSS/linear-gradient()": { + "modified": "2020-11-16T08:57:34.736Z", + "contributors": [ + "chrisdavidmills", + "alattalatta", + "KadirTopal", + "jh.Park", + "Sebastianz", + "Simplexible", + "wizAmit", + "slayslot", + "prayash", + "tamnajio", + "teoli", + "mirinae312" + ] + }, "orphaned/Web/Guide/Events": { "modified": "2019-03-23T23:03:35.888Z", "contributors": [ diff --git a/files/ko/orphaned/web/api/rtcpeerconnection/onidentityresult/index.html b/files/ko/orphaned/web/api/rtcpeerconnection/onidentityresult/index.html new file mode 100644 index 0000000000..ef2e3e7be4 --- /dev/null +++ b/files/ko/orphaned/web/api/rtcpeerconnection/onidentityresult/index.html @@ -0,0 +1,56 @@ +--- +title: RTCPeerConnection.onidentityresult +slug: orphaned/Web/API/RTCPeerConnection/onidentityresult +translation_of: Web/API/RTCPeerConnection/onidentityresult +original_slug: Web/API/RTCPeerConnection/onidentityresult +--- +

{{APIRef("WebRTC")}}{{SeeCompatTable}}

+ +

RTCPeerConnection.onidentityresult 이벤트 핸들러는 {{domxref("RTCPeerConnection")}}가 {{domxref("RTCIdentityEvent")}} 타입의 {{event("identityresult")}} 이벤트를 수신하게되면 실행되는 코드를 담고 있는 속성입니다. 이러한 이벤트는 {{domxref("RTCPeerConnection.getIdentityAssertion()", "getIdentityAssertion()")}} 혹은 offer 혹은 answer를 생성하는 과정에 의해 식별인자 주장이 생성되면 전송됩니다.

+ +

Syntax

+ +
peerconnection.onidentityresult = function;
+
+ +

값

+ + + +

예시

+ +
pc.onidentityresult = function(ev) { alert("onidentityresult event detected!"); };
+
+ +

사양서

+ + + + + + + + + + + + + + + + +
사양서상태코멘트
{{ SpecName('WebRTC 1.0', '#widl-RTCPeerConnection-onidentityresult', 'RTCPeerConnection.onidentityresult') }}{{ Spec2('WebRTC 1.0') }}Initial specification.
+ +

브라우저 호환성

+ + + +

{{Compat("api.RTCPeerConnection.onidentityresult")}}

+ +

참조

+ + diff --git a/files/ko/orphaned/web/css/linear-gradient()/index.html b/files/ko/orphaned/web/css/linear-gradient()/index.html new file mode 100644 index 0000000000..ba07032e05 --- /dev/null +++ b/files/ko/orphaned/web/css/linear-gradient()/index.html @@ -0,0 +1,205 @@ +--- +title: linear-gradient +slug: orphaned/Web/CSS/linear-gradient() +tags: + - CSS + - CSS Function + - CSS Images + - Graphics + - Layout + - Reference + - Web + - gradient + - 그라데이션 + - 그레이디언트 +translation_of: Web/CSS/linear-gradient() +original_slug: Web/CSS/linear-gradient() +--- +
{{CSSRef}}
+ +

CSS linear-gradient() 함수는 두 개 이상의 색이 직선을 따라 점진적으로 변화하는 이미지를 생성합니다. 함수의 결과는 {{cssxref("<image>")}}의 특별한 종류인 {{cssxref("<gradient>")}} 자료형입니다.

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

구문

+ +
/* 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%);
+ +

값

+ +
+
<side-or-corner>
+
그레이디언트 축의 시작점. 지정할 경우, to 이후 최대 두 개의 방향을 나타내는 키워드를 사용할 수 있습니다. 하나는 수평 방향(left 또는 right)이고, 다른 하나는 수직 방향(top 또는 bottom)입니다. 방향 키워드의 순서는 상관하지 않으며, 기본값은 to bottom입니다.
+
to top, to bottom, to left, to right 값은 0deg, 180deg, 270deg, 90deg와 같습니다. 나머지 값은 각도로 변환됩니다.
+
{{cssxref("<angle>")}}
+
그레이디언트 축의 방향. 0deg는 to top과 같습니다. 0 이상의 값을 지정하면 축이 시계방향으로 돌아갑니다.
+
<linear-color-stop>
+
색상 정지점의 {{CSSxRef("<color>")}} 값과 하나 혹은 두 개의 선택적인 정지점 위치. (각각 그레이디언트 축 위의 {{cssxref("<percentage>")}} 또는 {{CSSxRef("<length>")}})
+
<color-hint>
+
color-hint는 두 인접한 색상 정지점 사이에서 그레이디언트가 진행하는 방식을 지정하는 보간 힌트입니다. 길이는 두 정지점 간의 길이에서 어느 지점에 그 중간 색에 도달해야 하는지 지정합니다. 생략할 경우 가운데에서 중간 색에 도달합니다.
+
+
+

참고: CSS 그레이디언트에서의 색상 정지점 렌더링은 SVG 그레이디언트에서의 색상 정지점과 동일한 규칙을 따라갑니다.

+
+
+
+ +

설명

+ +

다른 그레이디언트와 마찬가지로, 선형 그레이디언트는 본질 크기를 가지지 않습니다. 즉 기본 크기나 선호 크기, 선호 비율이 없으며, 실제 크기는 그레이디언트를 적용한 요소의 크기와 동일해집니다.

+ +

반복하여 컨테이너를 채우는 선형 그레이디언트가 필요하면 {{cssxref("repeating-linear-gradient")}} 함수를 사용하세요.

+ +

<gradient>는 <image>의 한 종류로서 <image>를 사용하는 곳에만 적용할 수 있습니다. 따라서 linear-gradient()는 {{cssxref("background-color")}}와 같은 {{cssxref("<color>")}} 자료형을 받는 속성에는 사용할 수 없습니다.

+ +

선형 그레이디언트의 구성

+ +

선형 그레이디언트는 하나의 축(그레이디언트 라인)과 두 개 이상의 색상 정지점으로 정의할 수 있습니다. 축 위의 점은 모두 고유한 색을 가집니다. linear-gradient() 함수는 부드러운 그레이디언트를 만들기 위해 축과 직교하는 무수한 선을 그리며, 각 수직선의 색은 축과 교차하는 점의 색과 일치합니다.

+ +

linear-gradient.png그레이디언트 축은 그레이디언트 이미지를 담은 직사각형의 중심점과 각도로 정의할 수 있습니다. 그레이디언트 색상은 시작점과 종료점, 그리고 그 사이의 다른 정지점 등 두 개 이상의 색상 정지점이 정의합니다.

+ +

시작점은 그레이디언트 축의 한 점으로, 첫 번째 색상이 시작하는 지점입니다. 종료점은 마지막 색상이 끝나는 지점입니다. 두 점은 직사각형에서 자신과 같은 사분면에 위치하는 꼭지점으로부터 시작하여 그레이디언트 축과 직교하는 지점으로 정의합니다. 종료점은 시작점의 대칭점으로 간단하게 알아둘 수도 있습니다. 이렇게 다소 복잡한 정의로 인해, 시작점과 가장 가까운 꼭지점이 시작점의 색을, 종료점과 가장 가까운 꼭지점이 종료점의 색을 갖는 특이한 효과를 확인할 수도 있습니다. 이 효과는 "매직 코너"라고 불리기도 합니다.

+ +

그레이디언트 만들기

+ +

그레이디언트 축에 색상 정지점을 더 추가하여, 다양한 색 사이로 전환하는, 고도로 맞춤화한 그레이디언트를 만들 수 있습니다. 색상 정지점의 위치는 {{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%는 완전한 파랑입니다. 그러나 빨강과 파랑 사이 전환의 중간 지점은 50%가 아닌 30% 지점이 됩니다.

+ +
linear-gradient(red 10%, 30%, blue 90%);
+ +

두 개 이상의 색상 정지점을 같은 위치에 배치하면 부드럽게 전환하는 대신 이전 색과 다음 색이 경계선을 그리며 바로 바뀝니다.

+ +

색상 정지점의 순서는 오름차순이어야 합니다. 다음 정지점의 위치가 이전 정지점보다 앞이면, 이전 정지점의 위치를 재설정하고 색 전환도 경계선을 그리며 일어납니다. 다음 그레이디언트는 30% 지점에서 빨강에서 노랑으로 바뀌고, 65% 지점까지 파랑으로 전환합니다.

+ +
linear-gradient(red 40%, yellow 30%, blue 65%);
+
+ +

색상 정지점이 여러 위치를 가질 수도 있습니다. 색상을 선언할 때 인접한 두 정지점의 위치를 모두 포함할 수 있습니다. 다음 세 그레이디언트는 모두 같습니다.

+ +
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% 지점에 색을 할당하지 않으면 처음으로 선언한 색이 0%에 배치됩니다. 비슷하게 100% 지점에 색이 없는 경우 마지막 색이 100% 지점까지 도달합니다.

+ +

예제

+ +

45도 기울어진 그레이디언트

+ + + +
body {
+  background: linear-gradient(45deg, red, blue);
+}
+
+ +

{{EmbedLiveSample("45도_기울어진_그레이디언트", 120, 120)}}

+ +

축의 60% 지점에서 시작하는 그레이디언트

+ + + +
body {
+  background: linear-gradient(135deg, orange 60%, cyan);
+}
+ +

{{EmbedLiveSample("축의_60_지점에서_시작하는_그레이디언트", 120, 120)}}

+ +

다중 위치 색상 정지점을 가진 그레이디언트

+ +

이 예제는 다중 위치 색상 정지점을 사용하면서, 인접한 색상 정지점의 위치를 같게 하여 줄무늬 효과를 냅니다.

+ + + +
body {
+  background: linear-gradient(to right,
+     red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);
+}
+ +

{{EmbedLiveSample("다중_위치_색상_정지점을_가진_그레이디언트", 120, 120)}}

+ +

더 많은 예제

+ +

CSS 그레이디언트 사용하기 문서에서 더 많은 예제를 확인하세요.

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Images', '#color-stop-syntax', 'Gradient Color-Stops')}}{{Spec2('CSS4 Images')}}Adds interpolation hints.
{{SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()')}}{{Spec2('CSS3 Images')}}Initial definition.
+ +

브라우저 호환성

+ + + +
{{Compat("css.types.image.gradient.linear-gradient")}}
+ +

같이 보기

+ + diff --git a/files/ko/web/api/rtcpeerconnection/onidentityresult/index.html b/files/ko/web/api/rtcpeerconnection/onidentityresult/index.html deleted file mode 100644 index a237bae774..0000000000 --- a/files/ko/web/api/rtcpeerconnection/onidentityresult/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: RTCPeerConnection.onidentityresult -slug: Web/API/RTCPeerConnection/onidentityresult -translation_of: Web/API/RTCPeerConnection/onidentityresult ---- -

{{APIRef("WebRTC")}}{{SeeCompatTable}}

- -

RTCPeerConnection.onidentityresult 이벤트 핸들러는 {{domxref("RTCPeerConnection")}}가 {{domxref("RTCIdentityEvent")}} 타입의 {{event("identityresult")}} 이벤트를 수신하게되면 실행되는 코드를 담고 있는 속성입니다. 이러한 이벤트는 {{domxref("RTCPeerConnection.getIdentityAssertion()", "getIdentityAssertion()")}} 혹은 offer 혹은 answer를 생성하는 과정에 의해 식별인자 주장이 생성되면 전송됩니다.

- -

Syntax

- -
peerconnection.onidentityresult = function;
-
- -

값

- - - -

예시

- -
pc.onidentityresult = function(ev) { alert("onidentityresult event detected!"); };
-
- -

사양서

- - - - - - - - - - - - - - - - -
사양서상태코멘트
{{ SpecName('WebRTC 1.0', '#widl-RTCPeerConnection-onidentityresult', 'RTCPeerConnection.onidentityresult') }}{{ Spec2('WebRTC 1.0') }}Initial specification.
- -

브라우저 호환성

- - - -

{{Compat("api.RTCPeerConnection.onidentityresult")}}

- -

참조

- - diff --git a/files/ko/web/css/linear-gradient()/index.html b/files/ko/web/css/linear-gradient()/index.html deleted file mode 100644 index 74635f0434..0000000000 --- a/files/ko/web/css/linear-gradient()/index.html +++ /dev/null @@ -1,204 +0,0 @@ ---- -title: linear-gradient -slug: Web/CSS/linear-gradient() -tags: - - CSS - - CSS Function - - CSS Images - - Graphics - - Layout - - Reference - - Web - - gradient - - 그라데이션 - - 그레이디언트 -translation_of: Web/CSS/linear-gradient() ---- -
{{CSSRef}}
- -

CSS linear-gradient() 함수는 두 개 이상의 색이 직선을 따라 점진적으로 변화하는 이미지를 생성합니다. 함수의 결과는 {{cssxref("<image>")}}의 특별한 종류인 {{cssxref("<gradient>")}} 자료형입니다.

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

구문

- -
/* 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%);
- -

값

- -
-
<side-or-corner>
-
그레이디언트 축의 시작점. 지정할 경우, to 이후 최대 두 개의 방향을 나타내는 키워드를 사용할 수 있습니다. 하나는 수평 방향(left 또는 right)이고, 다른 하나는 수직 방향(top 또는 bottom)입니다. 방향 키워드의 순서는 상관하지 않으며, 기본값은 to bottom입니다.
-
to top, to bottom, to left, to right 값은 0deg, 180deg, 270deg, 90deg와 같습니다. 나머지 값은 각도로 변환됩니다.
-
{{cssxref("<angle>")}}
-
그레이디언트 축의 방향. 0deg는 to top과 같습니다. 0 이상의 값을 지정하면 축이 시계방향으로 돌아갑니다.
-
<linear-color-stop>
-
색상 정지점의 {{CSSxRef("<color>")}} 값과 하나 혹은 두 개의 선택적인 정지점 위치. (각각 그레이디언트 축 위의 {{cssxref("<percentage>")}} 또는 {{CSSxRef("<length>")}})
-
<color-hint>
-
color-hint는 두 인접한 색상 정지점 사이에서 그레이디언트가 진행하는 방식을 지정하는 보간 힌트입니다. 길이는 두 정지점 간의 길이에서 어느 지점에 그 중간 색에 도달해야 하는지 지정합니다. 생략할 경우 가운데에서 중간 색에 도달합니다.
-
-
-

참고: CSS 그레이디언트에서의 색상 정지점 렌더링은 SVG 그레이디언트에서의 색상 정지점과 동일한 규칙을 따라갑니다.

-
-
-
- -

설명

- -

다른 그레이디언트와 마찬가지로, 선형 그레이디언트는 본질 크기를 가지지 않습니다. 즉 기본 크기나 선호 크기, 선호 비율이 없으며, 실제 크기는 그레이디언트를 적용한 요소의 크기와 동일해집니다.

- -

반복하여 컨테이너를 채우는 선형 그레이디언트가 필요하면 {{cssxref("repeating-linear-gradient")}} 함수를 사용하세요.

- -

<gradient>는 <image>의 한 종류로서 <image>를 사용하는 곳에만 적용할 수 있습니다. 따라서 linear-gradient()는 {{cssxref("background-color")}}와 같은 {{cssxref("<color>")}} 자료형을 받는 속성에는 사용할 수 없습니다.

- -

선형 그레이디언트의 구성

- -

선형 그레이디언트는 하나의 축(그레이디언트 라인)과 두 개 이상의 색상 정지점으로 정의할 수 있습니다. 축 위의 점은 모두 고유한 색을 가집니다. linear-gradient() 함수는 부드러운 그레이디언트를 만들기 위해 축과 직교하는 무수한 선을 그리며, 각 수직선의 색은 축과 교차하는 점의 색과 일치합니다.

- -

linear-gradient.png그레이디언트 축은 그레이디언트 이미지를 담은 직사각형의 중심점과 각도로 정의할 수 있습니다. 그레이디언트 색상은 시작점과 종료점, 그리고 그 사이의 다른 정지점 등 두 개 이상의 색상 정지점이 정의합니다.

- -

시작점은 그레이디언트 축의 한 점으로, 첫 번째 색상이 시작하는 지점입니다. 종료점은 마지막 색상이 끝나는 지점입니다. 두 점은 직사각형에서 자신과 같은 사분면에 위치하는 꼭지점으로부터 시작하여 그레이디언트 축과 직교하는 지점으로 정의합니다. 종료점은 시작점의 대칭점으로 간단하게 알아둘 수도 있습니다. 이렇게 다소 복잡한 정의로 인해, 시작점과 가장 가까운 꼭지점이 시작점의 색을, 종료점과 가장 가까운 꼭지점이 종료점의 색을 갖는 특이한 효과를 확인할 수도 있습니다. 이 효과는 "매직 코너"라고 불리기도 합니다.

- -

그레이디언트 만들기

- -

그레이디언트 축에 색상 정지점을 더 추가하여, 다양한 색 사이로 전환하는, 고도로 맞춤화한 그레이디언트를 만들 수 있습니다. 색상 정지점의 위치는 {{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%는 완전한 파랑입니다. 그러나 빨강과 파랑 사이 전환의 중간 지점은 50%가 아닌 30% 지점이 됩니다.

- -
linear-gradient(red 10%, 30%, blue 90%);
- -

두 개 이상의 색상 정지점을 같은 위치에 배치하면 부드럽게 전환하는 대신 이전 색과 다음 색이 경계선을 그리며 바로 바뀝니다.

- -

색상 정지점의 순서는 오름차순이어야 합니다. 다음 정지점의 위치가 이전 정지점보다 앞이면, 이전 정지점의 위치를 재설정하고 색 전환도 경계선을 그리며 일어납니다. 다음 그레이디언트는 30% 지점에서 빨강에서 노랑으로 바뀌고, 65% 지점까지 파랑으로 전환합니다.

- -
linear-gradient(red 40%, yellow 30%, blue 65%);
-
- -

색상 정지점이 여러 위치를 가질 수도 있습니다. 색상을 선언할 때 인접한 두 정지점의 위치를 모두 포함할 수 있습니다. 다음 세 그레이디언트는 모두 같습니다.

- -
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% 지점에 색을 할당하지 않으면 처음으로 선언한 색이 0%에 배치됩니다. 비슷하게 100% 지점에 색이 없는 경우 마지막 색이 100% 지점까지 도달합니다.

- -

예제

- -

45도 기울어진 그레이디언트

- - - -
body {
-  background: linear-gradient(45deg, red, blue);
-}
-
- -

{{EmbedLiveSample("45도_기울어진_그레이디언트", 120, 120)}}

- -

축의 60% 지점에서 시작하는 그레이디언트

- - - -
body {
-  background: linear-gradient(135deg, orange 60%, cyan);
-}
- -

{{EmbedLiveSample("축의_60_지점에서_시작하는_그레이디언트", 120, 120)}}

- -

다중 위치 색상 정지점을 가진 그레이디언트

- -

이 예제는 다중 위치 색상 정지점을 사용하면서, 인접한 색상 정지점의 위치를 같게 하여 줄무늬 효과를 냅니다.

- - - -
body {
-  background: linear-gradient(to right,
-     red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);
-}
- -

{{EmbedLiveSample("다중_위치_색상_정지점을_가진_그레이디언트", 120, 120)}}

- -

더 많은 예제

- -

CSS 그레이디언트 사용하기 문서에서 더 많은 예제를 확인하세요.

- -

명세

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS4 Images', '#color-stop-syntax', 'Gradient Color-Stops')}}{{Spec2('CSS4 Images')}}Adds interpolation hints.
{{SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()')}}{{Spec2('CSS3 Images')}}Initial definition.
- -

브라우저 호환성

- - - -
{{Compat("css.types.image.gradient.linear-gradient")}}
- -

같이 보기

- - diff --git a/files/pt-br/_redirects.txt b/files/pt-br/_redirects.txt index 611c9f76d8..bf433a95b5 100644 --- a/files/pt-br/_redirects.txt +++ b/files/pt-br/_redirects.txt @@ -94,7 +94,7 @@ /pt-BR/docs/CSS/display /pt-BR/docs/Web/CSS/display /pt-BR/docs/CSS/overflow /pt-BR/docs/Web/CSS/overflow /pt-BR/docs/CSS/regra at /pt-BR/docs/Web/CSS/At-rule -/pt-BR/docs/CSS/repeating-linear-gradient /pt-BR/docs/Web/CSS/repeating-linear-gradient() +/pt-BR/docs/CSS/repeating-linear-gradient /pt-BR/docs/orphaned/Web/CSS/repeating-linear-gradient() /pt-BR/docs/CSS/sintaxe /pt-BR/docs/Web/CSS/Syntax /pt-BR/docs/CSS/text-overflow /pt-BR/docs/Web/CSS/text-overflow /pt-BR/docs/CSS/text-rendering /pt-BR/docs/Web/CSS/text-rendering @@ -692,11 +692,14 @@ /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/image-set /pt-BR/docs/Web/CSS/image-set() +/pt-BR/docs/Web/CSS/image-set /pt-BR/docs/orphaned/Web/CSS/image-set() +/pt-BR/docs/Web/CSS/image-set() /pt-BR/docs/orphaned/Web/CSS/image-set() /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/radial-gradient /pt-BR/docs/Web/CSS/radial-gradient() -/pt-BR/docs/Web/CSS/repeating-linear-gradient /pt-BR/docs/Web/CSS/repeating-linear-gradient() +/pt-BR/docs/Web/CSS/radial-gradient /pt-BR/docs/orphaned/Web/CSS/radial-gradient() +/pt-BR/docs/Web/CSS/radial-gradient() /pt-BR/docs/orphaned/Web/CSS/radial-gradient() +/pt-BR/docs/Web/CSS/repeating-linear-gradient /pt-BR/docs/orphaned/Web/CSS/repeating-linear-gradient() +/pt-BR/docs/Web/CSS/repeating-linear-gradient() /pt-BR/docs/orphaned/Web/CSS/repeating-linear-gradient() /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() diff --git a/files/pt-br/_wikihistory.json b/files/pt-br/_wikihistory.json index 04b869e518..a2ecb0733d 100644 --- a/files/pt-br/_wikihistory.json +++ b/files/pt-br/_wikihistory.json @@ -8641,13 +8641,6 @@ "brunoeduardo" ] }, - "Web/CSS/image-set()": { - "modified": "2020-11-16T08:53:55.560Z", - "contributors": [ - "chrisdavidmills", - "leandroruel" - ] - }, "Web/CSS/inheritance": { "modified": "2019-03-23T22:30:06.400Z", "contributors": [ @@ -8834,25 +8827,6 @@ "talles.makoto" ] }, - "Web/CSS/radial-gradient()": { - "modified": "2020-11-18T14:42:38.700Z", - "contributors": [ - "chrisdavidmills", - "Sebastianz", - "mrstork", - "srsaude" - ] - }, - "Web/CSS/repeating-linear-gradient()": { - "modified": "2020-11-18T14:46:15.881Z", - "contributors": [ - "chrisdavidmills", - "Sebastianz", - "prayash", - "teoli", - "Erick_Ribeiro" - ] - }, "Web/CSS/resolved_value": { "modified": "2019-03-23T22:09:21.295Z", "contributors": [ @@ -17166,6 +17140,32 @@ "takahan" ] }, + "orphaned/Web/CSS/image-set()": { + "modified": "2020-11-16T08:53:55.560Z", + "contributors": [ + "chrisdavidmills", + "leandroruel" + ] + }, + "orphaned/Web/CSS/radial-gradient()": { + "modified": "2020-11-18T14:42:38.700Z", + "contributors": [ + "chrisdavidmills", + "Sebastianz", + "mrstork", + "srsaude" + ] + }, + "orphaned/Web/CSS/repeating-linear-gradient()": { + "modified": "2020-11-18T14:46:15.881Z", + "contributors": [ + "chrisdavidmills", + "Sebastianz", + "prayash", + "teoli", + "Erick_Ribeiro" + ] + }, "orphaned/Web/Guide/CSS/CSS_media_queries_(consultas_de_mídia_em_CSS)": { "modified": "2019-03-23T23:08:21.480Z", "contributors": [ diff --git a/files/pt-br/orphaned/web/css/image-set()/index.html b/files/pt-br/orphaned/web/css/image-set()/index.html new file mode 100644 index 0000000000..b85425c4f1 --- /dev/null +++ b/files/pt-br/orphaned/web/css/image-set()/index.html @@ -0,0 +1,77 @@ +--- +title: image-set() +slug: orphaned/Web/CSS/image-set() +translation_of: Web/CSS/image-set() +original_slug: Web/CSS/image-set() +--- +
{{cssref}}
+ +

A notação de função CSS image-set() é um método de deixar o navegador escolher a imagem CSS mais apropriada de um dado conjunto, principalmente para telas de alta densidade de pixels.

+ +

Resolução e largura de banda diferem por dispositivo e acesso à rede. A função image-set() oferece a resolução de imagem mais apropriada para o dispositivo de um usuário, fornecendo um conjunto de opções de imagem — cada uma com uma declaração de resolução associada — da qual o navegador escolhe o mais apropriado para o dispositivo e as configurações. A resolução pode ser usada como um proxy para o tamanho do arquivo — um agente de usuário em uma conexão móvel lenta, com uma tela de alta resolução, pode preferir receber imagens de baixa resolução em vez de aguardar uma imagem de alta resolução carregar.

+ +

image-set() permite que o autor forneça opções em vez de determinar o que cada usuário individual precisa.

+ +

Sintaxe

+ +
image-set() = image-set( <image-set-option># )
+where <image-set-option> = [ <image> | <string> ] <resolution> and
+      <string> is an <url>
+
+ +

Valores

+ +

Mais comumente, você verá um valor de  url() <string>, mas o <image> pode ser qualquer tipo de imagem, exceto para um conjunto de imagens. A função image-set() não pode ser aninhada dentro de outra função image-set().

+ +

unidades <resolution> incluem x ou ddpx, para pontos por unidade de pixel, dpi, para pontos por polegada, e dpcm para pontos per centímetro. Toda imagem dentro de image-set() deve ter uma única resolução.

+ +

Exemplos

+ +
background-image: image-set( "cat.png" 1x,
+                             "cat-2x.png" 2x);
+ +

Este exemplo mostra como usar image-set() para fornecer duas opções alternativas {{cssxref("background-image")}}, escolhidas dependendo da resolução necessária: uma versão normal e uma versão de alta-resolução.

+ +

Preocupações de Acessibilidade

+ +

Tecnologia assistiva não pode analisar imagens de fundo. Se a imagem contiver informações críticas para entender a finalidade geral da página, é melhor descrevê-la semanticamente no documento.

+ + + +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentário
{{SpecName('CSS4 Images', '#image-set-notation', 'The image-set() notation')}}{{Spec2('CSS4 Images')}} 
+ +

Compatibilidade com navegadores

+ +

{{Compat("css.types.image.image-set")}}

+ +

Veja também

+ + diff --git a/files/pt-br/orphaned/web/css/radial-gradient()/index.html b/files/pt-br/orphaned/web/css/radial-gradient()/index.html new file mode 100644 index 0000000000..094be5d107 --- /dev/null +++ b/files/pt-br/orphaned/web/css/radial-gradient()/index.html @@ -0,0 +1,210 @@ +--- +title: radial-gradient() +slug: orphaned/Web/CSS/radial-gradient() +translation_of: Web/CSS/radial-gradient() +original_slug: Web/CSS/radial-gradient() +--- +

{{ CSSRef() }}

+ +

Resumo

+ +

A função do CSS radial-gradient() cria uma {{cssxref("<image>")}} que representa um gradiente de cores irradiando de uma origem, o centro do gradiente. O resultado dessa função é um objeto do CSS do tipo {{cssxref("<gradient>")}}.

+ +

Gradientes radiais são definidos pelo seu centro, o contorno e a posição da forma de fechamento (ending shape) e as paradas de cor (color stops). O gradiente radial consiste de formas concêntricas uniformemente escaladas partindo do centro até sua forma de fechamento, indo potencialmente além, com a mesma forma da forma de fechamento. As paradas de cor são posicionadas num raio de gradiente virtual saindo do centro horizontalmente para a direita. O posicionamento das porcentagens das paradas de cor são relativas à interseção entre a forma de fechamento e esse raio de gradiente representando 100%. Cada forma é monocromática e a cor, definida pela cor no raio de gradiente que intersecta.

+ +

Formas de fechamento podem ser apenas círculo (circle) ou elipse (ellipse).

+ +

Como qualquer outro gradiente, um gradiente radial do CSS não é uma <cor> do CSS, mas uma imagem sem dimensões intrínsecas, i. e. uma imagem sem tamanho natural ou preferencial, tampouco proporção. Seu tamanho concreto será idêntico ao tamanho do elemento ao qual for aplicado.

+ +

A função radial-gradient não permite criar gradientes repetitivos. Para esse efeito, use a função do CSS {{ Cssxref("repeating-radial-gradient") }}.

+ +

Sintaxe

+ +
Gramática formal: radial-gradient( [ circle || <length> ] [ at <position> ]? ,
+| [ ellipse || [<length> | <percentage> ]{2}] [ at <position> ]? ,
+| [ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? ,
+| at <position> ,
+<color-stop> [ , <color-stop> ]+ )
+
+ +

Valores

+ +
+
<position>
+
Uma {{cssxref("<position>")}}, interpretada da mesma forma que {{Cssxref("background-position")}} ou {{Cssxref("transform-origin")}}. Se omitida, assume o padrão center.
+
<shape>
+
A forma do gradiente. Esse valor é circle (indicando que a forma do gradiente é um círculo com raio constante) ou ellipse (indicando que a forma é uma elipse com os eixos alinhados ao elemento). O valor padrão é ellipse.
+
<size>
+
O tamanho do gradiente. Essa valor é uma das {{anch("Restrições de tamanho")}} listada abaixo.
+
<color-stop>
+
Representando uma cor fixa num determinado ponto, esse valor é composto por um valor {{cssxref("<color>")}}, seguido de uma posição de parada opcional (uma {{cssxref("<percentage>")}} ou uma {{cssxref("<length>")}} referente ao raio de gradiente virtual). Uma porcentagem de 0%, ou um tamanho de 0 representa o centro do gradiente e o valor 100% a interseção da forma de fechamento com o raio de gradiente virtual. Valores de porcentagem intermediários são posicionados linearmente no raio de gradiente.
+
<extent-keyword>
+
Palavras-chave descrevendo quão grande a forma de fechamento deve ser. Os possíveis valores são:
+
+ + + + + + + + + + + + + + + + + + + + + + + +
ConstanteDescrição
closest-sideA forma de fechamento do gradiente encontra o lado do elemento mais próximo ao seu centro (para círculos) ou encontra ambos os lados vertical e horizontal mais próximos ao centro (para elipses).
closest-cornerA forma de fechamento do gradiente tem o tamanho exato para encontrar o canto da caixa mais próximo ao seu centro.
farthest-sideSimilar ao closest-side, mas a forma de fechamento fica com o tamanho necessário para encontrar o lado do elemento mais distante do centro do gradiente (ou lados vertical e horizontal).
farthest-cornerA forma de fechamento do gradiente tem o tamanho exato para encontrar o canto da caixa mais distante de seu centro.
+ Rascunhos preliminares incluiam outras palavras-chave (cover e contain) como sinônimos dos valores do padrão farthest-corner e closest-side respectivamente. Use somente os valores do padrão, uma vez que algumas implementações podem já ter removido suporte a esses valores mais antigos.
+
+ +

Exemplos

+ +
ellipse farthest-corner
+ +
background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);
+
+ +
470px 47px
+ +
background-image: radial-gradient(ellipse farthest-corner at 470px 47px , #FFFF80 20%, rgba(204, 153, 153, 0.4) 30%, #E6E6FF 60%);
+
+ +
farthest-corner
+ +
background-image: radial-gradient(farthest-corner at 45px 45px , #FF0000 0%, #0000FF 100%);
+ +
16px radius fuzzy circle
+ +
background-image: radial-gradient(16px at 60px 50% , #000000 0%, #000000 14px, rgba(0, 0, 0, 0.3) 18px, rgba(0, 0, 0, 0) 19px);
+
+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentários
{{ SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()') }}{{ Spec2('CSS3 Images') }} 
+ +

Compatibilidade de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FuncionalidadeFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Suporte básico (suporte à função radial-gradient(), mas não necessariamente com a sintaxe final){{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} [3]
+ {{ CompatGeckoDesktop("16") }}		10.0 (534.16){{ property_prefix("-webkit") }} [2][3]10.0 [1]11.60{{ property_prefix("-o") }}5.1{{ property_prefix("-webkit") }}[2]
Sintaxe legada do webkit {{ non-standard_inline() }}{{ CompatNo() }}3{{ property_prefix("-webkit") }} [2]{{ CompatNo() }}{{ CompatNo() }}4.0{{ property_prefix("-webkit") }} [2]
Sintaxe at (sintaxe do padrão final){{ CompatGeckoDesktop("10") }}{{ property_prefix("-moz") }} [3]
+ {{ CompatGeckoDesktop("16") }}		{{ CompatNo() }}10.011.60{{ property_prefix("-o") }} [3]
+ Presto 2.12 will remove the prefix.		{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FuncionalidadeAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico (suporte à função radial-gradient(), mas não necessariamente com a sintaxe final){{CompatVersionUnknown}}{{ CompatGeckoMobile("1.9.2") }}{{ property_prefix("-moz") }} [3]
+ {{ CompatGeckoMobile("16") }}		{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Sintaxe legada do webkit {{ non-standard_inline() }}{{CompatUnknown}}{{ CompatNo() }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Sintaxe at (sintaxe do padrão final){{CompatUnknown}}{{ CompatGeckoMobile("10") }}{{ property_prefix("-moz") }} [3]
+ {{ CompatGeckoMobile("16") }}		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Internet Explorer 5.5 a 9.0 suportam a funcionalidade proprietária filter: progid:DXImageTransform.Microsoft.Gradient() filter.

+ +

[2] WebKit desde 528 suporta a função legada -webkit-gradient(radial,…). Veja também o suporte atual para gradientes radiais.

+ +

[3] Firefox 3.6 e Webkit implementaram uma sintaxe anterior, prefixada.

+ +

Veja também

+ + diff --git a/files/pt-br/orphaned/web/css/repeating-linear-gradient()/index.html b/files/pt-br/orphaned/web/css/repeating-linear-gradient()/index.html new file mode 100644 index 0000000000..259e9fe941 --- /dev/null +++ b/files/pt-br/orphaned/web/css/repeating-linear-gradient()/index.html @@ -0,0 +1,154 @@ +--- +title: repeating-linear-gradient +slug: orphaned/Web/CSS/repeating-linear-gradient() +translation_of: Web/CSS/repeating-linear-gradient() +original_slug: Web/CSS/repeating-linear-gradient() +--- +

{{ CSSRef() }}

+ +

Summary

+ +

A função CSS repeating-linear-gradient cria uma {{cssxref("<image>")}} de repetidos gradientes. Isso funciona da mesma forma, e recebe os mesmos argumentos dos gradientes lineares básicos, como descrito em {{ cssxref("linear-gradient") }}, mas ele automaticamente repete as paradas das cores infinitamente em ambas as direções, com suas posições trocadas por múltiplos da diferença entre a posição da última parada de cor e a posição da primeira.

+ +

The consequence is that an end color of a gradient always coincide with a start color. If both are not identical, this will result in a sharp transition.

+ +

Like any other gradient, a repeating CSS linear gradient is not a CSS <color> but an image with no intrinsic dimensions; that is, it has no natural or preferred size, nor ratio. Its concrete size will match the one of the element it applies to.

+ +

Mozilla currently only supports CSS gradients as values of the {{ Cssxref("background-image") }} property, as well as within the shorthand {{ Cssxref("background") }}. You specify a gradient value instead of an image URL.

+ +

Syntax

+ +
Formal grammar: repeating-linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
+                                            \---------------------------------/ \----------------------------/
+                                              Definition of the gradient line         List of color stops
+
+                              where <side-or-corner> = [left | right] || [top | bottom]
+                                and <color-stop>     = <color> [ <percentage> | <length> ]?
+
+ +
repeating-linear-gradient( 45deg, blue, red );           /* A repeating gradient on 45deg axe starting blue and finishing red */
+repeating-linear-gradient( to left top, blue, red);      /* A repeating gradient going from the bottom right to the top left
+                                                            starting blue and finishing red */
+
+repeating-linear-gradient( 0deg, blue, green 40%, red ); /* A repeating gradient going from the bottom to top, starting blue,
+                                                            being green after 40% and finishing red */
+
+ +

Values

+ +
+
<side-or-corner>
+
Represents the position of the starting-point of the gradient line. It consists of two keywords: the first one indicates the horizontal side, left or right, and the second one the vertical side, top or bottom. The order is not relevant and each of the keyword is optional.
+ The values to top, to bottom, to left and to right are translated into the angles 0deg, 180deg, 270deg, 90deg respectively. The others are translated into an angle that let the starting-point to be in the same quadrant than the described corner and so that the line defined by the starting-point and the corner is perpendicular to the gradient line. That way, the color described by the <color-stop> will exactly apply to the corner point. This is sometimes called the "magic corner" property. The end-point of the gradient line is the symmetrical point of the starting-point on the other direction of the center box.
+
<angle>
+
An angle of direction for the gradient. See {{ cssxref("<angle>") }}.
+
<color-stop>
+
This value is comprised of a {{cssxref("<color>")}} value, followed by an optional stop position (either a percentage between 0% and 100% or a {{cssxref("<length>")}} along the gradient axis).
+ Rendering of color-stops in CSS gradients follows the same rules as color-stops in SVG gradients.
+
+ +

Examples

+ +
background: repeating-linear-gradient(to bottom right, red, red 5px, white 5px, white 10px);
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Images', '#repeating-gradients', 'repeating-linear-gradient()') }}{{ Spec2('CSS3 Images') }} 
+ +

Browser compatibility

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support (on {{ cssxref("background") }} and {{ cssxref("background-image") }}){{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }}[3]
+ {{ CompatGeckoDesktop("16") }}		10.0 (534.16){{ property_prefix("-webkit") }} [2][3]10.0 [1]11.10{{ property_prefix("-o") }} [3]5.1{{ property_prefix("-webkit") }}[2][3]
On any properties that accept {{cssxref("<image>")}}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}
Legacy webkit syntax{{ non-standard_inline() }}{{ CompatNo() }}3{{ property_prefix("-webkit") }} [2]{{ CompatNo() }}{{ CompatNo() }}4.0{{ property_prefix("-webkit") }}[2]
Legacy from syntax (without to){{ non-standard_inline() }}{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} [4]
+ Removed in {{ CompatGeckoDesktop("16") }}		10.0 (534.16){{ property_prefix("-webkit") }} [2]10.011.10{{ property_prefix("-o") }}[4]5.1{{ property_prefix("-webkit") }}[2]
to syntax{{ CompatGeckoDesktop("10") }}{{ property_prefix("-moz") }}[4]
+ {{ CompatGeckoDesktop("16") }}		{{ CompatNo() }}10.011.60{{ property_prefix("-o") }}[4]
+ Presto 2.12 will remove the prefix.		{{ CompatNo() }}
+ +

[1] Internet Explorer 5.5 through 9.0 supports proprietary filter: progid:DXImageTransform.Microsoft.Gradient() filter.

+ +

[2] WebKit since 528 supports the legacy -webkit-gradient(linear,…) function. As of WebKit 534.16, it also supports the standard gradient syntax. Unlike in Gecko, in legacy WebKit you cannot specify both a position and angle in -webkit-linear-gradient(). You can achieve the same effect by offsetting the color stops.

+ +

[3] Gecko, Opera & Webkit considers {{cssxref("<angle>")}} to start to the right, instead of the top. I.e. it considered an angle of to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right. This is different from the latest specification where an angle of 0deg as a direction indicator points to the top.

+ +

[4] Firefox 3.6 and Opera 11.10 implemented, prefixed, an early syntax where the starting corner or side was indicated without the to keyword, and effectively considered as a from position. The to syntax has been added in Firefox 10 and Opera 11.60 , at first without removing the deprecated syntax and translation between the two is trivial:

+ +
-moz-repeating-linear-gradient(to top left, blue, red);
+ +

is the same as:

+ +
-moz-repeating-linear-gradient(bottom right, blue, red);
+ +

The legacy syntax, without to, is planned to go away when the prefix is removed.

+ +

See also

+ + diff --git a/files/pt-br/web/css/image-set()/index.html b/files/pt-br/web/css/image-set()/index.html deleted file mode 100644 index 986d14da0c..0000000000 --- a/files/pt-br/web/css/image-set()/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: image-set() -slug: Web/CSS/image-set() -translation_of: Web/CSS/image-set() ---- -
{{cssref}}
- -

A notação de função CSS image-set() é um método de deixar o navegador escolher a imagem CSS mais apropriada de um dado conjunto, principalmente para telas de alta densidade de pixels.

- -

Resolução e largura de banda diferem por dispositivo e acesso à rede. A função image-set() oferece a resolução de imagem mais apropriada para o dispositivo de um usuário, fornecendo um conjunto de opções de imagem — cada uma com uma declaração de resolução associada — da qual o navegador escolhe o mais apropriado para o dispositivo e as configurações. A resolução pode ser usada como um proxy para o tamanho do arquivo — um agente de usuário em uma conexão móvel lenta, com uma tela de alta resolução, pode preferir receber imagens de baixa resolução em vez de aguardar uma imagem de alta resolução carregar.

- -

image-set() permite que o autor forneça opções em vez de determinar o que cada usuário individual precisa.

- -

Sintaxe

- -
image-set() = image-set( <image-set-option># )
-where <image-set-option> = [ <image> | <string> ] <resolution> and
-      <string> is an <url>
-
- -

Valores

- -

Mais comumente, você verá um valor de  url() <string>, mas o <image> pode ser qualquer tipo de imagem, exceto para um conjunto de imagens. A função image-set() não pode ser aninhada dentro de outra função image-set().

- -

unidades <resolution> incluem x ou ddpx, para pontos por unidade de pixel, dpi, para pontos por polegada, e dpcm para pontos per centímetro. Toda imagem dentro de image-set() deve ter uma única resolução.

- -

Exemplos

- -
background-image: image-set( "cat.png" 1x,
-                             "cat-2x.png" 2x);
- -

Este exemplo mostra como usar image-set() para fornecer duas opções alternativas {{cssxref("background-image")}}, escolhidas dependendo da resolução necessária: uma versão normal e uma versão de alta-resolução.

- -

Preocupações de Acessibilidade

- -

Tecnologia assistiva não pode analisar imagens de fundo. Se a imagem contiver informações críticas para entender a finalidade geral da página, é melhor descrevê-la semanticamente no documento.

- - - -

Especificações

- - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentário
{{SpecName('CSS4 Images', '#image-set-notation', 'The image-set() notation')}}{{Spec2('CSS4 Images')}} 
- -

Compatibilidade com navegadores

- -

{{Compat("css.types.image.image-set")}}

- -

Veja também

- - diff --git a/files/pt-br/web/css/radial-gradient()/index.html b/files/pt-br/web/css/radial-gradient()/index.html deleted file mode 100644 index 1479f4b77b..0000000000 --- a/files/pt-br/web/css/radial-gradient()/index.html +++ /dev/null @@ -1,209 +0,0 @@ ---- -title: radial-gradient() -slug: Web/CSS/radial-gradient() -translation_of: Web/CSS/radial-gradient() ---- -

{{ CSSRef() }}

- -

Resumo

- -

A função do CSS radial-gradient() cria uma {{cssxref("<image>")}} que representa um gradiente de cores irradiando de uma origem, o centro do gradiente. O resultado dessa função é um objeto do CSS do tipo {{cssxref("<gradient>")}}.

- -

Gradientes radiais são definidos pelo seu centro, o contorno e a posição da forma de fechamento (ending shape) e as paradas de cor (color stops). O gradiente radial consiste de formas concêntricas uniformemente escaladas partindo do centro até sua forma de fechamento, indo potencialmente além, com a mesma forma da forma de fechamento. As paradas de cor são posicionadas num raio de gradiente virtual saindo do centro horizontalmente para a direita. O posicionamento das porcentagens das paradas de cor são relativas à interseção entre a forma de fechamento e esse raio de gradiente representando 100%. Cada forma é monocromática e a cor, definida pela cor no raio de gradiente que intersecta.

- -

Formas de fechamento podem ser apenas círculo (circle) ou elipse (ellipse).

- -

Como qualquer outro gradiente, um gradiente radial do CSS não é uma <cor> do CSS, mas uma imagem sem dimensões intrínsecas, i. e. uma imagem sem tamanho natural ou preferencial, tampouco proporção. Seu tamanho concreto será idêntico ao tamanho do elemento ao qual for aplicado.

- -

A função radial-gradient não permite criar gradientes repetitivos. Para esse efeito, use a função do CSS {{ Cssxref("repeating-radial-gradient") }}.

- -

Sintaxe

- -
Gramática formal: radial-gradient( [ circle || <length> ] [ at <position> ]? ,
-| [ ellipse || [<length> | <percentage> ]{2}] [ at <position> ]? ,
-| [ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? ,
-| at <position> ,
-<color-stop> [ , <color-stop> ]+ )
-
- -

Valores

- -
-
<position>
-
Uma {{cssxref("<position>")}}, interpretada da mesma forma que {{Cssxref("background-position")}} ou {{Cssxref("transform-origin")}}. Se omitida, assume o padrão center.
-
<shape>
-
A forma do gradiente. Esse valor é circle (indicando que a forma do gradiente é um círculo com raio constante) ou ellipse (indicando que a forma é uma elipse com os eixos alinhados ao elemento). O valor padrão é ellipse.
-
<size>
-
O tamanho do gradiente. Essa valor é uma das {{anch("Restrições de tamanho")}} listada abaixo.
-
<color-stop>
-
Representando uma cor fixa num determinado ponto, esse valor é composto por um valor {{cssxref("<color>")}}, seguido de uma posição de parada opcional (uma {{cssxref("<percentage>")}} ou uma {{cssxref("<length>")}} referente ao raio de gradiente virtual). Uma porcentagem de 0%, ou um tamanho de 0 representa o centro do gradiente e o valor 100% a interseção da forma de fechamento com o raio de gradiente virtual. Valores de porcentagem intermediários são posicionados linearmente no raio de gradiente.
-
<extent-keyword>
-
Palavras-chave descrevendo quão grande a forma de fechamento deve ser. Os possíveis valores são:
-
- - - - - - - - - - - - - - - - - - - - - - - -
ConstanteDescrição
closest-sideA forma de fechamento do gradiente encontra o lado do elemento mais próximo ao seu centro (para círculos) ou encontra ambos os lados vertical e horizontal mais próximos ao centro (para elipses).
closest-cornerA forma de fechamento do gradiente tem o tamanho exato para encontrar o canto da caixa mais próximo ao seu centro.
farthest-sideSimilar ao closest-side, mas a forma de fechamento fica com o tamanho necessário para encontrar o lado do elemento mais distante do centro do gradiente (ou lados vertical e horizontal).
farthest-cornerA forma de fechamento do gradiente tem o tamanho exato para encontrar o canto da caixa mais distante de seu centro.
- Rascunhos preliminares incluiam outras palavras-chave (cover e contain) como sinônimos dos valores do padrão farthest-corner e closest-side respectivamente. Use somente os valores do padrão, uma vez que algumas implementações podem já ter removido suporte a esses valores mais antigos.
-
- -

Exemplos

- -
ellipse farthest-corner
- -
background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);
-
- -
470px 47px
- -
background-image: radial-gradient(ellipse farthest-corner at 470px 47px , #FFFF80 20%, rgba(204, 153, 153, 0.4) 30%, #E6E6FF 60%);
-
- -
farthest-corner
- -
background-image: radial-gradient(farthest-corner at 45px 45px , #FF0000 0%, #0000FF 100%);
- -
16px radius fuzzy circle
- -
background-image: radial-gradient(16px at 60px 50% , #000000 0%, #000000 14px, rgba(0, 0, 0, 0.3) 18px, rgba(0, 0, 0, 0) 19px);
-
- -

Especificações

- - - - - - - - - - - - - - - - -
EspecificaçãoStatusComentários
{{ SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()') }}{{ Spec2('CSS3 Images') }} 
- -

Compatibilidade de navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FuncionalidadeFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Suporte básico (suporte à função radial-gradient(), mas não necessariamente com a sintaxe final){{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} [3]
- {{ CompatGeckoDesktop("16") }}		10.0 (534.16){{ property_prefix("-webkit") }} [2][3]10.0 [1]11.60{{ property_prefix("-o") }}5.1{{ property_prefix("-webkit") }}[2]
Sintaxe legada do webkit {{ non-standard_inline() }}{{ CompatNo() }}3{{ property_prefix("-webkit") }} [2]{{ CompatNo() }}{{ CompatNo() }}4.0{{ property_prefix("-webkit") }} [2]
Sintaxe at (sintaxe do padrão final){{ CompatGeckoDesktop("10") }}{{ property_prefix("-moz") }} [3]
- {{ CompatGeckoDesktop("16") }}		{{ CompatNo() }}10.011.60{{ property_prefix("-o") }} [3]
- Presto 2.12 will remove the prefix.		{{ CompatNo() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FuncionalidadeAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico (suporte à função radial-gradient(), mas não necessariamente com a sintaxe final){{CompatVersionUnknown}}{{ CompatGeckoMobile("1.9.2") }}{{ property_prefix("-moz") }} [3]
- {{ CompatGeckoMobile("16") }}		{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Sintaxe legada do webkit {{ non-standard_inline() }}{{CompatUnknown}}{{ CompatNo() }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Sintaxe at (sintaxe do padrão final){{CompatUnknown}}{{ CompatGeckoMobile("10") }}{{ property_prefix("-moz") }} [3]
- {{ CompatGeckoMobile("16") }}		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

[1] Internet Explorer 5.5 a 9.0 suportam a funcionalidade proprietária filter: progid:DXImageTransform.Microsoft.Gradient() filter.

- -

[2] WebKit desde 528 suporta a função legada -webkit-gradient(radial,…). Veja também o suporte atual para gradientes radiais.

- -

[3] Firefox 3.6 e Webkit implementaram uma sintaxe anterior, prefixada.

- -

Veja também

- - diff --git a/files/pt-br/web/css/repeating-linear-gradient()/index.html b/files/pt-br/web/css/repeating-linear-gradient()/index.html deleted file mode 100644 index e2be000120..0000000000 --- a/files/pt-br/web/css/repeating-linear-gradient()/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: repeating-linear-gradient -slug: Web/CSS/repeating-linear-gradient() -translation_of: Web/CSS/repeating-linear-gradient() ---- -

{{ CSSRef() }}

- -

Summary

- -

A função CSS repeating-linear-gradient cria uma {{cssxref("<image>")}} de repetidos gradientes. Isso funciona da mesma forma, e recebe os mesmos argumentos dos gradientes lineares básicos, como descrito em {{ cssxref("linear-gradient") }}, mas ele automaticamente repete as paradas das cores infinitamente em ambas as direções, com suas posições trocadas por múltiplos da diferença entre a posição da última parada de cor e a posição da primeira.

- -

The consequence is that an end color of a gradient always coincide with a start color. If both are not identical, this will result in a sharp transition.

- -

Like any other gradient, a repeating CSS linear gradient is not a CSS <color> but an image with no intrinsic dimensions; that is, it has no natural or preferred size, nor ratio. Its concrete size will match the one of the element it applies to.

- -

Mozilla currently only supports CSS gradients as values of the {{ Cssxref("background-image") }} property, as well as within the shorthand {{ Cssxref("background") }}. You specify a gradient value instead of an image URL.

- -

Syntax

- -
Formal grammar: repeating-linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
-                                            \---------------------------------/ \----------------------------/
-                                              Definition of the gradient line         List of color stops
-
-                              where <side-or-corner> = [left | right] || [top | bottom]
-                                and <color-stop>     = <color> [ <percentage> | <length> ]?
-
- -
repeating-linear-gradient( 45deg, blue, red );           /* A repeating gradient on 45deg axe starting blue and finishing red */
-repeating-linear-gradient( to left top, blue, red);      /* A repeating gradient going from the bottom right to the top left
-                                                            starting blue and finishing red */
-
-repeating-linear-gradient( 0deg, blue, green 40%, red ); /* A repeating gradient going from the bottom to top, starting blue,
-                                                            being green after 40% and finishing red */
-
- -

Values

- -
-
<side-or-corner>
-
Represents the position of the starting-point of the gradient line. It consists of two keywords: the first one indicates the horizontal side, left or right, and the second one the vertical side, top or bottom. The order is not relevant and each of the keyword is optional.
- The values to top, to bottom, to left and to right are translated into the angles 0deg, 180deg, 270deg, 90deg respectively. The others are translated into an angle that let the starting-point to be in the same quadrant than the described corner and so that the line defined by the starting-point and the corner is perpendicular to the gradient line. That way, the color described by the <color-stop> will exactly apply to the corner point. This is sometimes called the "magic corner" property. The end-point of the gradient line is the symmetrical point of the starting-point on the other direction of the center box.
-
<angle>
-
An angle of direction for the gradient. See {{ cssxref("<angle>") }}.
-
<color-stop>
-
This value is comprised of a {{cssxref("<color>")}} value, followed by an optional stop position (either a percentage between 0% and 100% or a {{cssxref("<length>")}} along the gradient axis).
- Rendering of color-stops in CSS gradients follows the same rules as color-stops in SVG gradients.
-
- -

Examples

- -
background: repeating-linear-gradient(to bottom right, red, red 5px, white 5px, white 10px);
-
- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS3 Images', '#repeating-gradients', 'repeating-linear-gradient()') }}{{ Spec2('CSS3 Images') }} 
- -

Browser compatibility

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support (on {{ cssxref("background") }} and {{ cssxref("background-image") }}){{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }}[3]
- {{ CompatGeckoDesktop("16") }}		10.0 (534.16){{ property_prefix("-webkit") }} [2][3]10.0 [1]11.10{{ property_prefix("-o") }} [3]5.1{{ property_prefix("-webkit") }}[2][3]
On any properties that accept {{cssxref("<image>")}}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}
Legacy webkit syntax{{ non-standard_inline() }}{{ CompatNo() }}3{{ property_prefix("-webkit") }} [2]{{ CompatNo() }}{{ CompatNo() }}4.0{{ property_prefix("-webkit") }}[2]
Legacy from syntax (without to){{ non-standard_inline() }}{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} [4]
- Removed in {{ CompatGeckoDesktop("16") }}		10.0 (534.16){{ property_prefix("-webkit") }} [2]10.011.10{{ property_prefix("-o") }}[4]5.1{{ property_prefix("-webkit") }}[2]
to syntax{{ CompatGeckoDesktop("10") }}{{ property_prefix("-moz") }}[4]
- {{ CompatGeckoDesktop("16") }}		{{ CompatNo() }}10.011.60{{ property_prefix("-o") }}[4]
- Presto 2.12 will remove the prefix.		{{ CompatNo() }}
- -

[1] Internet Explorer 5.5 through 9.0 supports proprietary filter: progid:DXImageTransform.Microsoft.Gradient() filter.

- -

[2] WebKit since 528 supports the legacy -webkit-gradient(linear,…) function. As of WebKit 534.16, it also supports the standard gradient syntax. Unlike in Gecko, in legacy WebKit you cannot specify both a position and angle in -webkit-linear-gradient(). You can achieve the same effect by offsetting the color stops.

- -

[3] Gecko, Opera & Webkit considers {{cssxref("<angle>")}} to start to the right, instead of the top. I.e. it considered an angle of to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right. This is different from the latest specification where an angle of 0deg as a direction indicator points to the top.

- -

[4] Firefox 3.6 and Opera 11.10 implemented, prefixed, an early syntax where the starting corner or side was indicated without the to keyword, and effectively considered as a from position. The to syntax has been added in Firefox 10 and Opera 11.60 , at first without removing the deprecated syntax and translation between the two is trivial:

- -
-moz-repeating-linear-gradient(to top left, blue, red);
- -

is the same as:

- -
-moz-repeating-linear-gradient(bottom right, blue, red);
- -

The legacy syntax, without to, is planned to go away when the prefix is removed.

- -

See also

- - diff --git a/files/ru/_redirects.txt b/files/ru/_redirects.txt index fdacc3afd1..4a4f86924d 100644 --- a/files/ru/_redirects.txt +++ b/files/ru/_redirects.txt @@ -532,11 +532,15 @@ /ru/docs/Web/CSS/filter-function/blur /ru/docs/Web/CSS/filter-function/blur() /ru/docs/Web/CSS/filter-function/url /ru/docs/conflicting/Web/CSS/url() /ru/docs/Web/CSS/grid-gap /ru/docs/conflicting/Web/CSS/gap -/ru/docs/Web/CSS/image-set /ru/docs/Web/CSS/image-set() -/ru/docs/Web/CSS/linear-gradient /ru/docs/Web/CSS/linear-gradient() +/ru/docs/Web/CSS/image-set /ru/docs/orphaned/Web/CSS/image-set() +/ru/docs/Web/CSS/image-set() /ru/docs/orphaned/Web/CSS/image-set() +/ru/docs/Web/CSS/linear-gradient /ru/docs/orphaned/Web/CSS/linear-gradient() +/ru/docs/Web/CSS/linear-gradient() /ru/docs/orphaned/Web/CSS/linear-gradient() /ru/docs/Web/CSS/minmax /ru/docs/Web/CSS/minmax() -/ru/docs/Web/CSS/radial-gradient /ru/docs/Web/CSS/radial-gradient() -/ru/docs/Web/CSS/repeating-linear-gradient /ru/docs/Web/CSS/repeating-linear-gradient() +/ru/docs/Web/CSS/radial-gradient /ru/docs/orphaned/Web/CSS/radial-gradient() +/ru/docs/Web/CSS/radial-gradient() /ru/docs/orphaned/Web/CSS/radial-gradient() +/ru/docs/Web/CSS/repeating-linear-gradient /ru/docs/orphaned/Web/CSS/repeating-linear-gradient() +/ru/docs/Web/CSS/repeating-linear-gradient() /ru/docs/orphaned/Web/CSS/repeating-linear-gradient() /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() diff --git a/files/ru/_wikihistory.json b/files/ru/_wikihistory.json index fb56fe3e50..d6a04835a9 100644 --- a/files/ru/_wikihistory.json +++ b/files/ru/_wikihistory.json @@ -14496,13 +14496,6 @@ "Ruslan_Zlygostev" ] }, - "Web/CSS/image-set()": { - "modified": "2020-11-16T08:54:13.901Z", - "contributors": [ - "chrisdavidmills", - "justredpaul" - ] - }, "Web/CSS/inherit": { "modified": "2020-10-15T22:09:42.824Z", "contributors": [ @@ -14610,13 +14603,6 @@ "Lyod1" ] }, - "Web/CSS/linear-gradient()": { - "modified": "2020-11-16T08:57:46.008Z", - "contributors": [ - "chrisdavidmills", - "Virss" - ] - }, "Web/CSS/list-style-image": { "modified": "2020-10-15T22:19:11.104Z", "contributors": [ @@ -14867,29 +14853,12 @@ "bilazik" ] }, - "Web/CSS/radial-gradient()": { - "modified": "2020-11-18T14:42:49.208Z", - "contributors": [ - "chrisdavidmills", - "shade0602", - "the_ghost", - "SerzN1" - ] - }, "Web/CSS/ratio": { "modified": "2020-10-15T22:19:17.156Z", "contributors": [ "opereverzeva" ] }, - "Web/CSS/repeating-linear-gradient()": { - "modified": "2020-11-18T14:46:25.201Z", - "contributors": [ - "chrisdavidmills", - "YozhEzhi", - "arcady-zherdev" - ] - }, "Web/CSS/resolved_value": { "modified": "2019-03-23T22:31:05.724Z", "contributors": [ @@ -25537,6 +25506,37 @@ "qkudev" ] }, + "orphaned/Web/CSS/image-set()": { + "modified": "2020-11-16T08:54:13.901Z", + "contributors": [ + "chrisdavidmills", + "justredpaul" + ] + }, + "orphaned/Web/CSS/linear-gradient()": { + "modified": "2020-11-16T08:57:46.008Z", + "contributors": [ + "chrisdavidmills", + "Virss" + ] + }, + "orphaned/Web/CSS/radial-gradient()": { + "modified": "2020-11-18T14:42:49.208Z", + "contributors": [ + "chrisdavidmills", + "shade0602", + "the_ghost", + "SerzN1" + ] + }, + "orphaned/Web/CSS/repeating-linear-gradient()": { + "modified": "2020-11-18T14:46:25.201Z", + "contributors": [ + "chrisdavidmills", + "YozhEzhi", + "arcady-zherdev" + ] + }, "orphaned/Web/Guide/AJAX/С_чего_начать?": { "modified": "2019-01-16T16:10:29.921Z", "contributors": [ diff --git a/files/ru/orphaned/web/css/image-set()/index.html b/files/ru/orphaned/web/css/image-set()/index.html new file mode 100644 index 0000000000..d17756359a --- /dev/null +++ b/files/ru/orphaned/web/css/image-set()/index.html @@ -0,0 +1,79 @@ +--- +title: image-set() +slug: orphaned/Web/CSS/image-set() +translation_of: Web/CSS/image-set() +original_slug: Web/CSS/image-set() +--- +
{{cssref}}
+ +

CSS функция image-set() это способ позволить браузеру выбрать наиболее подходящее изображение CSS из заданного набора, в первую очередь для экранов с высокой плотностью пикселей.

+ +

Разрешение экрана и пропускная способность могут отличаться в зависимости от устройства и доступа к сети. Функция image-set()  обеспечивает наиболее подходящее разрешение изображения для устройства пользователя, предоставляя набор параметров изображения — каждый с соответствующим объявлением разрешения — из которых браузер выбирает наиболее подходящее для устройства и настроек. Разрешение может использоваться в качестве прокси для размера файла — клиент на медленном мобильном соединении с экраном высокого разрешения может предпочесть получать изображения с более низким разрешением, а не ждать загрузки изображения с более высоким разрешением.

+ +

image-set() позволяет автору предоставлять параметры, а не определять, что нужно каждому отдельному пользователю.

+ +

Синтаксис

+ +
image-set() = image-set( <image-set-option># )
+где <image-set-option> = [ <image> | <string> ] <resolution> и
+      <string> в качестве <url>
+
+ +

Значения

+ +

Чаще всего вы можете увидеть значение url() как <string>, но <image> может быть любым типом изображения, кроме набора изображений. Функция image-set() не может быть вложена в другую функцию image-set().

+ +

Блоки <resolution> включают в себя x или ddpx, для точек на пиксель, dpi для точек на дюйм, и dpcm для точек на сантиметр. Каждое изображение в наборе image-set() должно иметь уникальное разрешение.

+ +

Примеры

+ +
background-image: image-set( "cat.png" 1x,
+                             "cat-2x.png" 2x,
+                             "cat-print.png" 600dpi);
+ +

Этот пример демонстрирует использование image-set() для обеспечения двух альтернативных {{cssxref("background-image")}} свойств, из которых будет выбрано более подходящее по разрешению: обычная версия и версия с высоким разрешением.

+ +

Вопросы доступности

+ +

Браузеры не предоставляют никакой специальной информации о фоновых изображениях для вспомогательных технологий. Это важно прежде всего для экранных считывающих технологий, так как они не объявят о своём присутствии и поэтому ничего не передадут своим пользователям. Если изображение содержит информацию, критически важную для понимания общего назначения страницы, лучше описать её семантически в документе.

+ + + +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS4 Images', '#image-set-notation', 'The image-set() notation')}}{{Spec2('CSS4 Images')}} 
+ +

Поддержка браузерами

+ + + +

{{Compat("css.types.image.image-set")}}

+ +

Смотрите также

+ + diff --git a/files/ru/orphaned/web/css/linear-gradient()/index.html b/files/ru/orphaned/web/css/linear-gradient()/index.html new file mode 100644 index 0000000000..d2d6fd3bf9 --- /dev/null +++ b/files/ru/orphaned/web/css/linear-gradient()/index.html @@ -0,0 +1,213 @@ +--- +title: linear-gradient() +slug: orphaned/Web/CSS/linear-gradient() +tags: + - Градиент + - Линейный градиент +translation_of: Web/CSS/linear-gradient() +original_slug: Web/CSS/linear-gradient() +--- +
{{CSSRef}}
+ +

CSS-функция linear-gradient() создаёт изображение, состоящее из постепенного перехода между двумя или более цветами вдоль прямой линии. Её результатом является объект типа данных {{CSSxRef("<gradient>")}}, являющийся особым видом {{CSSxRef("<image>")}}.

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

Как и в случае с любым градиентом, линейный градиент не имеет внутренних размеров; т. е., он не имеет ни естественного или предпочтительного размера, ни предпочтительного соотношения сторон. Его фактический размер будет совпадать с размеров элемента, к которому он применён.

+ +

Для создания линейного градиента, повторяющегося таким образом, что он заполняет содержащий его элемент, лучше используйте функцию {{CSSxRef("repeating-linear-gradient")}}.

+ +

Так как <gradient>ы относятся к типу данных <image>, они могут использоваться только там, где может использоваться <image>. По этой причине, linear-gradient() не будет работать в качестве {{CSSxRef("background-color")}} и других свойств, использующих тип данных {{CSSxRef("<color>")}}.

+ +

Создание линейного градиента

+ +

Линейный градиент определяется осью — линией градиента — и двумя или более точками остановки цвета. Каждая точка на оси – это определённый цвет; для создания плавного градиента функция linear-gradient() рисует серию цветных линий, перпендикулярных линии градиента, каждая из них соответствует цвету точки, в которой она пересекает линию градиента.

+ +

linear-gradient.png

+ +

Линия градиента определена центром блока, содержащего изображение градиента, и углом. Цвета градиента задаются двумя или более точками: начальной точкой, конечной точкой, и необязательными точками остановки цвета между ними.

+ +

Начальная точка – это место на линии градиента, где начинается первый цвет. Конечная точка – это точка, на которой заканчивается последний цвет. Каждая из этих двух точек определяется пересечением линии градиента с перпендикулярной линией, проходящей от угла, находящегося в том же квадранте блока. Конечную точку можно просто считать как точку, симметричную начальной точке. Эти несколько сложные определения приводят к интересному эффекту, иногда называемому магическими углами: углы, ближайшие к начальной и конечной точке, имеют те же цвета, что и соответствующая им начальная или конечная точка.

+ +

Настройка градиентов

+ +

Добавляя больше точек остановки цвета на линию градиента, вы можете точно задавать переходы между разными цветами. Позиции остановок цвета могут быть явно заданы использованием значений типа {{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%, а не на 50%, как было бы без добавления цветовой подсказки 30%.

+ +
linear-gradient(red 10%, 30%, blue 90%);
+ +

Если две или более точки остановки цвета находятся в одной и той же позиции, переход будет в виде чёткой линии между первым и последним цветом, объявленным на этой позиции.

+ +

Точки остановки цвета должны быть перечислены в порядке возрастания. Соседние точки остановки цвета с меньшим значением переопределят значение предыдущей точки остановки цвета, создавая резкий переход. В примере ниже на позиции 30% происходит замена красного на жёлтый, и затем идёт переход от жёлтого до синего на протяжении 35% длины градиента.

+ +
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%, если на этой последней остановке не было объявлено никакой длины.

+ +

Синтаксис

+ +
/* Градиент наклонён на 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%);
+ +

Значения

+ +
+
<side-or-corner>
+
Позиция начальной точки линии градиента. Если указана, то должна состоять из слова to и максимум до двух ключевых слов включительно: одно обозначает горизонтальную сторону (left или right), а другое – вертикальную сторону (top или bottom). Порядок ключевых слов не важен. Если не определено, то принимает значение to bottom.
+
Значения to top, to bottom, to left и to right эквивалентны углам 0deg, 180deg, 270deg и 90deg, соответственно. Другие значения переводятся в значение угла.
+
{{CSSxRef("<angle>")}}
+
Угол направления линии градиента. Значение 0deg эквивалентно to top; увеличение значения увеличивает угол поворота по часовой стрелке от этой позиции.
+
<linear-color-stop>
+
Значение точки остановки цвета {{CSSxRef("<color>")}}, с последующими одной или двумя необязательными точками остановки (имеющими значение типа {{CSSxRef("<percentage>")}} или {{CSSxRef("<length>")}} вдоль оси градиента).
+
<color-hint>
+
Цветовая подсказка – это подсказка для перехода, определяющая, как градиент продвигается между соседними точками остановки цвета. Длина определяет, на какой точке между двумя точками остановки цвет градиента должен достичь среднего значения цветового перехода. Если не указано, средней точкой цветового перехода будет середина между двумя точками остановки цвета.
+
+
+

Примечание: Отрисовка цветовых остановок в CSS-градиентах следует тем же правилам, что и цветовые остановки в SVG-градиентах.

+
+
+
+ +

Формальный синтаксис

+ +
linear-gradient(
+  [ <angle> | to <side-or-corner> ,]? <color-stop-list> )
+  \---------------------------------/ \----------------------------/
+      Определение линии градиента         Список остановок цвета
+
+где <side-or-corner> = [ left | right ] || [ top | bottom ]
+  и <color-stop-list> = [ <linear-color-stop> [, <color-hint> ]? ]#, <linear-color-stop>
+  и <linear-color-stop> = <color> [ <color-stop-length> ]?
+  и <color-stop-length> = [ <percentage> | <length> ]{1,2}
+  и <color-hint> = [ <percentage> | <length> ]
+ +

Примеры

+ +

Градиент под углом 45 градусов

+ + + +
body {
+  background: linear-gradient(45deg, red, blue);
+}
+
+ +

{{EmbedLiveSample("Градиент_под_углом_45_градусов", 120, 120)}}

+ +

Градиент, начинающийся на 60% линии градиента

+ + + +
body {
+  background: linear-gradient(135deg, orange, orange 60%, cyan);
+}
+ +

{{EmbedLiveSample("Градиент_начинающийся_на_60_линии_градиента", 120, 120)}}

+ +

Градиент с многопозиционными остановками цвета

+ +

Этот пример использует многопозиционные остановки цвета, и со смежными цветами, имеющими те же точки остановки цвета, создаёт полосатый эффект.

+ + + +
body {
+  background: linear-gradient(to right,
+     red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);
+}
+ +

{{EmbedLiveSample("Градиент_с_многопозиционными_остановками_цвета", 120, 120)}}

+ +
+

Примечание: Больше примеров смотрите на странице Использование CSS-градиентов.

+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS4 Images', '#color-stop-syntax', 'Gradient Color-Stops')}}{{Spec2('CSS4 Images')}}Добавлены подсказки по переходам
{{SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()')}}{{Spec2('CSS3 Images')}}Первоначальное определение
+ +

Совместимость с браузерами

+ + + +
{{Compat("css.types.image.gradient.linear-gradient")}}
+ +

Смотрите также

+ + diff --git a/files/ru/orphaned/web/css/radial-gradient()/index.html b/files/ru/orphaned/web/css/radial-gradient()/index.html new file mode 100644 index 0000000000..8af2698d29 --- /dev/null +++ b/files/ru/orphaned/web/css/radial-gradient()/index.html @@ -0,0 +1,170 @@ +--- +title: radial-gradient() +slug: orphaned/Web/CSS/radial-gradient() +translation_of: Web/CSS/radial-gradient() +original_slug: Web/CSS/radial-gradient() +--- +
{{CSSRef}}
+ +

CSS функция radial-gradient() создаёт картинку состоящую из последовательных переходов между двумя и более цветами, которые исходят из заданного центра. Они могут принимать форму круга или эллипса. Результатом функции будет объект типа {{cssxref("<gradient>")}}, который является расширением типа {{cssxref("<image>")}}.

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

Как и любой градиент, радиальный градиент не имеет внутренних размеров, то есть заданных или предпочитаемых размеров, как и заданного коэффициента соотношения сторон. Его итоговый размер будет соответствовать размеру элемента к которому он применён.

+ +

Чтобы создать повторяющийся радиальный градиент, который будет заполнять контейнер, необходимо использовать функцию {{cssxref("repeating-radial-gradient")}}.

+ +

Поскольку <gradient>ы относятся к типу <image>, они могут быть использованы только там где используется тип <image>. По этой причине radial-gradient() не будет работать совместно с {{Cssxref("background-color")}} и другими свойствами, которые используют тип {{cssxref("<color>")}}.

+ +

Композиция свойства

+ +

Радиальный градиент задаётся позицией центра, конечной формой, и двумя или более точками изменения цвета.

+ +

Чтобы создать плавный градиент, функция radial-gradient() рисует серию концентрических форм исходящих из центра к краям формы градиента (и потенциально далее за его пределы). Конечная форма может быть как кругом так и эллипсом.

+ +

Точки изменения цвета расположены на виртуальном луче градиента, который расширяется горизонтально направо. Позиция точек заданных в процентах рассчитывается относительно пересечения конечной формы таким лучом, что является 100%. Цвет каждой такой формы задаётся цветом на пересечении луча градиента и этой формы.

+ +

Синтаксис

+ +
/* Градиент в центре контейнера,
+   переход от красного к синему и после к зелёному */
+radial-gradient(circle at center, red 0, blue, green 100%)
+ +

Параметры

+ +
+
{{cssxref("<position>")}}
+
Позицию начала градиента можно рассматривать как {{cssxref("background-position")}} или {{cssxref("transform-origin")}}. По умолчанию позиция равна center.
+
<shape>
+
Форма градиента. Может принимать значение circle (подразумевается что формой является круг с постоянным радиусом) или ellipse (форма является эллипсом, выровненным по оси). По умолчанию имеет значение ellipse.
+
<extent-keyword>
+
Параметр определяющий размер конечной формы. Возможные значения:
+
+ + + + + + + + + + + + + + + + + + + + + + + +
ЗначениеОписание
closest-sideКонечная форма градиента соответствует стороне прямоугольника, ближайшей к его центру (для окружностей), или обеим вертикальным и горизонтальным сторонам, ближайшим к центру (для эллипсов).
closest-cornerКонечная форма градиента определяется таким образом, чтобы он точно соответствовал ближайшему углу окна от его центра.
farthest-sideСхоже с closest-side, кроме того что, размер формы определяется самой дальней стороной от своего центра (или вертикальных и горизонтальных сторон)
farthest-cornerКонечная форма градиента определяется таким образом, чтобы он точно соответствовал самому дальнему углу прямоугольника от его центра.
+ +
+

Примечание: Ранние реализации этой функции включают в себя другие значения свойства (cover and contain) которые являются синонимами farthest-corner и closest-side, соответственно. Рекомендуется использовать только стандартные значения, так как некоторые реализации уже перестали использовать старые значения свойств.

+
+
+
<color-stop>
+
{{cssxref("<color>")}} значение цвета в точке изменения цвета за которым следует необязательный параметр позиции ({{cssxref("<percentage>")}} или {{cssxref("<length>")}} вдоль оси градиента). Значения 0%, или 0 представляют центр градиента; значение 100% представляет собой виртуальное пересечение конечной формы с виртуальным лучом градиента. Процентные значения будут линейно расположены на луче градиента.
+
+ +

Синтаксис

+ +
radial-gradient(
+  [ [ circle || <length> ]                         [ at <position> ]? , |
+    [ ellipse || [ <length> | <percentage> ]{2} ]  [ at <position> ]? , |
+    [ [ circle | ellipse ] || <extent-keyword> ]   [ at <position> ]? , |
+    at <position> ,
+  ]?
+  <color-stop> [ , <color-stop> ]+
+)
+где <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
+  и <color-stop>     = <color> [ <percentage> | <length> ]?
+
+ +

Примеры

+ +

Простой градиент

+ + + +
.radial-gradient {
+  background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
+}
+ +

{{EmbedLiveSample('Простой_градиент', 120, 120)}}

+ +

Градиент со смещённым центром

+ + + +
.radial-gradient {
+  background-image: radial-gradient(farthest-corner at 40px 40px,
+      #f35 0%, #43e 100%);
+}
+ +

{{EmbedLiveSample('Градиент_со_смещённым_центром', 240, 120)}}

+ +
+

Примечание: Дополнительные примеры можно найти в Использование CSS градиентов.

+
+ +

Спецификация

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()')}}{{Spec2('CSS3 Images')}}Initial definition.
+ +

Совместимость с браузерами

+ +

{{Compat("css.types.image.gradient.radial-gradient")}}

+

Сноски к Quantum CSS

+ + + +

Смотрите также

+ + diff --git a/files/ru/orphaned/web/css/repeating-linear-gradient()/index.html b/files/ru/orphaned/web/css/repeating-linear-gradient()/index.html new file mode 100644 index 0000000000..1e7a560ae3 --- /dev/null +++ b/files/ru/orphaned/web/css/repeating-linear-gradient()/index.html @@ -0,0 +1,135 @@ +--- +title: repeating-linear-gradient() +slug: orphaned/Web/CSS/repeating-linear-gradient() +translation_of: Web/CSS/repeating-linear-gradient() +original_slug: Web/CSS/repeating-linear-gradient() +--- +
{{CSSRef}}
+ +

CSS функция repeating-linear-gradient() создаёт изображение состоящее из повторяющихся линейных градиентов. Она схожа с {{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>")}}.

+
+ +

Синтаксис

+ +

Значения

+ +
+
<сторона-или-угол>
+
Положение точки начала линии градиента. Начинается со слова to и максимум двух ключевых слов: одно определяет сторону по горизонтали (left или right), и другое сторону по вертикали (top или bottom). Порядок ключевых слов определяющих сторону не важен. Если они не определены, по умолчанию используется to bottom.
+
Значения to top, to bottom, to left, и to right эквивалентны углам 0deg, 180deg, 270deg, и 90deg соответственно. Прочие значения транслируются в угол.
+
{{cssxref("<angle>", "<угол>")}}
+
Угол наклона линии направления градиента. Значение 0deg эквивалентно to top; увеличение значения приводит к повороту линии против часовой стрелки начиная от этой величины (0deg).
+
<цвет-позиция>
+
Значение {{cssxref("<color>", "<цвета>")}} с последующей (необязательной) его позицией (либо в {{cssxref("<percentage>", "<процентах>")}}, либо в единицах {{cssxref("<length>", "<длины>")}} вдоль оси градиента).
+
+
+

Примечание: Рендер перехода цветов в CSS градиентах следует тем же правилам что и в SVG градиентах.

+
+
+
+ +

Formal syntax

+ +
repeating-linear-gradient(  [ <угол> | to <сторона-или-угол> ,]? <цвет-позиция> [, <цвет-позиция>]+ )
+                            \---------------------------------/ \----------------------------/
+                              Определение линии градиента         Список цветов и их позиций
+
+где <сторона-или-угол> = [left | right] || [top | bottom]
+   и <цвет-позиция>    = <цвет> [ <процент> | <длина> ]?
+
+ +

Примеры

+ +

Полоски зебры

+ + + +
body {
+  background-image: repeating-linear-gradient(-45deg,
+      transparent,
+      transparent 20px,
+      black 20px,
+      black 40px);
+}
+
+ +

{{EmbedLiveSample('Полоски_зебры', 120, 120)}}

+ +

Повторяющиеся горизонтальные полосы

+ + + +
body {
+  background-image: repeating-linear-gradient(to bottom,
+      rgb(26,198,204),
+      rgb(26,198,204) 7%,
+      rgb(100,100,100) 10%);
+}
+
+ +

{{EmbedLiveSample('Повторяющиеся_горизонтальные_полосы', 120, 120)}}

+ +
+

Примечание: Для дополнительных примеров пожалуйста обратитесь к статье Using CSS gradients.

+
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусПримечание
{{SpecName('CSS3 Images', '#repeating-gradients', 'repeating-linear-gradient()')}}{{Spec2('CSS3 Images')}}Initial definition.
+ +

Совместимость с браузерами

+ +
{{Compat("css.types.image.gradient.repeating-linear-gradient")}}
+ +

Дополнительно

+ + diff --git a/files/ru/web/css/image-set()/index.html b/files/ru/web/css/image-set()/index.html deleted file mode 100644 index 9f00bc8ca7..0000000000 --- a/files/ru/web/css/image-set()/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: image-set() -slug: Web/CSS/image-set() -translation_of: Web/CSS/image-set() ---- -
{{cssref}}
- -

CSS функция image-set() это способ позволить браузеру выбрать наиболее подходящее изображение CSS из заданного набора, в первую очередь для экранов с высокой плотностью пикселей.

- -

Разрешение экрана и пропускная способность могут отличаться в зависимости от устройства и доступа к сети. Функция image-set()  обеспечивает наиболее подходящее разрешение изображения для устройства пользователя, предоставляя набор параметров изображения — каждый с соответствующим объявлением разрешения — из которых браузер выбирает наиболее подходящее для устройства и настроек. Разрешение может использоваться в качестве прокси для размера файла — клиент на медленном мобильном соединении с экраном высокого разрешения может предпочесть получать изображения с более низким разрешением, а не ждать загрузки изображения с более высоким разрешением.

- -

image-set() позволяет автору предоставлять параметры, а не определять, что нужно каждому отдельному пользователю.

- -

Синтаксис

- -
image-set() = image-set( <image-set-option># )
-где <image-set-option> = [ <image> | <string> ] <resolution> и
-      <string> в качестве <url>
-
- -

Значения

- -

Чаще всего вы можете увидеть значение url() как <string>, но <image> может быть любым типом изображения, кроме набора изображений. Функция image-set() не может быть вложена в другую функцию image-set().

- -

Блоки <resolution> включают в себя x или ddpx, для точек на пиксель, dpi для точек на дюйм, и dpcm для точек на сантиметр. Каждое изображение в наборе image-set() должно иметь уникальное разрешение.

- -

Примеры

- -
background-image: image-set( "cat.png" 1x,
-                             "cat-2x.png" 2x,
-                             "cat-print.png" 600dpi);
- -

Этот пример демонстрирует использование image-set() для обеспечения двух альтернативных {{cssxref("background-image")}} свойств, из которых будет выбрано более подходящее по разрешению: обычная версия и версия с высоким разрешением.

- -

Вопросы доступности

- -

Браузеры не предоставляют никакой специальной информации о фоновых изображениях для вспомогательных технологий. Это важно прежде всего для экранных считывающих технологий, так как они не объявят о своём присутствии и поэтому ничего не передадут своим пользователям. Если изображение содержит информацию, критически важную для понимания общего назначения страницы, лучше описать её семантически в документе.

- - - -

Спецификации

- - - - - - - - - - - - - - - - -
СпецификацияСтатусКомментарий
{{SpecName('CSS4 Images', '#image-set-notation', 'The image-set() notation')}}{{Spec2('CSS4 Images')}} 
- -

Поддержка браузерами

- - - -

{{Compat("css.types.image.image-set")}}

- -

Смотрите также

- - diff --git a/files/ru/web/css/linear-gradient()/index.html b/files/ru/web/css/linear-gradient()/index.html deleted file mode 100644 index 4433b0587d..0000000000 --- a/files/ru/web/css/linear-gradient()/index.html +++ /dev/null @@ -1,212 +0,0 @@ ---- -title: linear-gradient() -slug: Web/CSS/linear-gradient() -tags: - - Градиент - - Линейный градиент -translation_of: Web/CSS/linear-gradient() ---- -
{{CSSRef}}
- -

CSS-функция linear-gradient() создаёт изображение, состоящее из постепенного перехода между двумя или более цветами вдоль прямой линии. Её результатом является объект типа данных {{CSSxRef("<gradient>")}}, являющийся особым видом {{CSSxRef("<image>")}}.

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

Как и в случае с любым градиентом, линейный градиент не имеет внутренних размеров; т. е., он не имеет ни естественного или предпочтительного размера, ни предпочтительного соотношения сторон. Его фактический размер будет совпадать с размеров элемента, к которому он применён.

- -

Для создания линейного градиента, повторяющегося таким образом, что он заполняет содержащий его элемент, лучше используйте функцию {{CSSxRef("repeating-linear-gradient")}}.

- -

Так как <gradient>ы относятся к типу данных <image>, они могут использоваться только там, где может использоваться <image>. По этой причине, linear-gradient() не будет работать в качестве {{CSSxRef("background-color")}} и других свойств, использующих тип данных {{CSSxRef("<color>")}}.

- -

Создание линейного градиента

- -

Линейный градиент определяется осью — линией градиента — и двумя или более точками остановки цвета. Каждая точка на оси – это определённый цвет; для создания плавного градиента функция linear-gradient() рисует серию цветных линий, перпендикулярных линии градиента, каждая из них соответствует цвету точки, в которой она пересекает линию градиента.

- -

linear-gradient.png

- -

Линия градиента определена центром блока, содержащего изображение градиента, и углом. Цвета градиента задаются двумя или более точками: начальной точкой, конечной точкой, и необязательными точками остановки цвета между ними.

- -

Начальная точка – это место на линии градиента, где начинается первый цвет. Конечная точка – это точка, на которой заканчивается последний цвет. Каждая из этих двух точек определяется пересечением линии градиента с перпендикулярной линией, проходящей от угла, находящегося в том же квадранте блока. Конечную точку можно просто считать как точку, симметричную начальной точке. Эти несколько сложные определения приводят к интересному эффекту, иногда называемому магическими углами: углы, ближайшие к начальной и конечной точке, имеют те же цвета, что и соответствующая им начальная или конечная точка.

- -

Настройка градиентов

- -

Добавляя больше точек остановки цвета на линию градиента, вы можете точно задавать переходы между разными цветами. Позиции остановок цвета могут быть явно заданы использованием значений типа {{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%, а не на 50%, как было бы без добавления цветовой подсказки 30%.

- -
linear-gradient(red 10%, 30%, blue 90%);
- -

Если две или более точки остановки цвета находятся в одной и той же позиции, переход будет в виде чёткой линии между первым и последним цветом, объявленным на этой позиции.

- -

Точки остановки цвета должны быть перечислены в порядке возрастания. Соседние точки остановки цвета с меньшим значением переопределят значение предыдущей точки остановки цвета, создавая резкий переход. В примере ниже на позиции 30% происходит замена красного на жёлтый, и затем идёт переход от жёлтого до синего на протяжении 35% длины градиента.

- -
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%, если на этой последней остановке не было объявлено никакой длины.

- -

Синтаксис

- -
/* Градиент наклонён на 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%);
- -

Значения

- -
-
<side-or-corner>
-
Позиция начальной точки линии градиента. Если указана, то должна состоять из слова to и максимум до двух ключевых слов включительно: одно обозначает горизонтальную сторону (left или right), а другое – вертикальную сторону (top или bottom). Порядок ключевых слов не важен. Если не определено, то принимает значение to bottom.
-
Значения to top, to bottom, to left и to right эквивалентны углам 0deg, 180deg, 270deg и 90deg, соответственно. Другие значения переводятся в значение угла.
-
{{CSSxRef("<angle>")}}
-
Угол направления линии градиента. Значение 0deg эквивалентно to top; увеличение значения увеличивает угол поворота по часовой стрелке от этой позиции.
-
<linear-color-stop>
-
Значение точки остановки цвета {{CSSxRef("<color>")}}, с последующими одной или двумя необязательными точками остановки (имеющими значение типа {{CSSxRef("<percentage>")}} или {{CSSxRef("<length>")}} вдоль оси градиента).
-
<color-hint>
-
Цветовая подсказка – это подсказка для перехода, определяющая, как градиент продвигается между соседними точками остановки цвета. Длина определяет, на какой точке между двумя точками остановки цвет градиента должен достичь среднего значения цветового перехода. Если не указано, средней точкой цветового перехода будет середина между двумя точками остановки цвета.
-
-
-

Примечание: Отрисовка цветовых остановок в CSS-градиентах следует тем же правилам, что и цветовые остановки в SVG-градиентах.

-
-
-
- -

Формальный синтаксис

- -
linear-gradient(
-  [ <angle> | to <side-or-corner> ,]? <color-stop-list> )
-  \---------------------------------/ \----------------------------/
-      Определение линии градиента         Список остановок цвета
-
-где <side-or-corner> = [ left | right ] || [ top | bottom ]
-  и <color-stop-list> = [ <linear-color-stop> [, <color-hint> ]? ]#, <linear-color-stop>
-  и <linear-color-stop> = <color> [ <color-stop-length> ]?
-  и <color-stop-length> = [ <percentage> | <length> ]{1,2}
-  и <color-hint> = [ <percentage> | <length> ]
- -

Примеры

- -

Градиент под углом 45 градусов

- - - -
body {
-  background: linear-gradient(45deg, red, blue);
-}
-
- -

{{EmbedLiveSample("Градиент_под_углом_45_градусов", 120, 120)}}

- -

Градиент, начинающийся на 60% линии градиента

- - - -
body {
-  background: linear-gradient(135deg, orange, orange 60%, cyan);
-}
- -

{{EmbedLiveSample("Градиент_начинающийся_на_60_линии_градиента", 120, 120)}}

- -

Градиент с многопозиционными остановками цвета

- -

Этот пример использует многопозиционные остановки цвета, и со смежными цветами, имеющими те же точки остановки цвета, создаёт полосатый эффект.

- - - -
body {
-  background: linear-gradient(to right,
-     red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);
-}
- -

{{EmbedLiveSample("Градиент_с_многопозиционными_остановками_цвета", 120, 120)}}

- -
-

Примечание: Больше примеров смотрите на странице Использование CSS-градиентов.

-
- -

Спецификации

- - - - - - - - - - - - - - - - - - - - - -
СпецификацияСтатусКомментарий
{{SpecName('CSS4 Images', '#color-stop-syntax', 'Gradient Color-Stops')}}{{Spec2('CSS4 Images')}}Добавлены подсказки по переходам
{{SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()')}}{{Spec2('CSS3 Images')}}Первоначальное определение
- -

Совместимость с браузерами

- - - -
{{Compat("css.types.image.gradient.linear-gradient")}}
- -

Смотрите также

- - diff --git a/files/ru/web/css/radial-gradient()/index.html b/files/ru/web/css/radial-gradient()/index.html deleted file mode 100644 index a037155f09..0000000000 --- a/files/ru/web/css/radial-gradient()/index.html +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: radial-gradient() -slug: Web/CSS/radial-gradient() -translation_of: Web/CSS/radial-gradient() ---- -
{{CSSRef}}
- -

CSS функция radial-gradient() создаёт картинку состоящую из последовательных переходов между двумя и более цветами, которые исходят из заданного центра. Они могут принимать форму круга или эллипса. Результатом функции будет объект типа {{cssxref("<gradient>")}}, который является расширением типа {{cssxref("<image>")}}.

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

Как и любой градиент, радиальный градиент не имеет внутренних размеров, то есть заданных или предпочитаемых размеров, как и заданного коэффициента соотношения сторон. Его итоговый размер будет соответствовать размеру элемента к которому он применён.

- -

Чтобы создать повторяющийся радиальный градиент, который будет заполнять контейнер, необходимо использовать функцию {{cssxref("repeating-radial-gradient")}}.

- -

Поскольку <gradient>ы относятся к типу <image>, они могут быть использованы только там где используется тип <image>. По этой причине radial-gradient() не будет работать совместно с {{Cssxref("background-color")}} и другими свойствами, которые используют тип {{cssxref("<color>")}}.

- -

Композиция свойства

- -

Радиальный градиент задаётся позицией центра, конечной формой, и двумя или более точками изменения цвета.

- -

Чтобы создать плавный градиент, функция radial-gradient() рисует серию концентрических форм исходящих из центра к краям формы градиента (и потенциально далее за его пределы). Конечная форма может быть как кругом так и эллипсом.

- -

Точки изменения цвета расположены на виртуальном луче градиента, который расширяется горизонтально направо. Позиция точек заданных в процентах рассчитывается относительно пересечения конечной формы таким лучом, что является 100%. Цвет каждой такой формы задаётся цветом на пересечении луча градиента и этой формы.

- -

Синтаксис

- -
/* Градиент в центре контейнера,
-   переход от красного к синему и после к зелёному */
-radial-gradient(circle at center, red 0, blue, green 100%)
- -

Параметры

- -
-
{{cssxref("<position>")}}
-
Позицию начала градиента можно рассматривать как {{cssxref("background-position")}} или {{cssxref("transform-origin")}}. По умолчанию позиция равна center.
-
<shape>
-
Форма градиента. Может принимать значение circle (подразумевается что формой является круг с постоянным радиусом) или ellipse (форма является эллипсом, выровненным по оси). По умолчанию имеет значение ellipse.
-
<extent-keyword>
-
Параметр определяющий размер конечной формы. Возможные значения:
-
- - - - - - - - - - - - - - - - - - - - - - - -
ЗначениеОписание
closest-sideКонечная форма градиента соответствует стороне прямоугольника, ближайшей к его центру (для окружностей), или обеим вертикальным и горизонтальным сторонам, ближайшим к центру (для эллипсов).
closest-cornerКонечная форма градиента определяется таким образом, чтобы он точно соответствовал ближайшему углу окна от его центра.
farthest-sideСхоже с closest-side, кроме того что, размер формы определяется самой дальней стороной от своего центра (или вертикальных и горизонтальных сторон)
farthest-cornerКонечная форма градиента определяется таким образом, чтобы он точно соответствовал самому дальнему углу прямоугольника от его центра.
- -
-

Примечание: Ранние реализации этой функции включают в себя другие значения свойства (cover and contain) которые являются синонимами farthest-corner и closest-side, соответственно. Рекомендуется использовать только стандартные значения, так как некоторые реализации уже перестали использовать старые значения свойств.

-
-
-
<color-stop>
-
{{cssxref("<color>")}} значение цвета в точке изменения цвета за которым следует необязательный параметр позиции ({{cssxref("<percentage>")}} или {{cssxref("<length>")}} вдоль оси градиента). Значения 0%, или 0 представляют центр градиента; значение 100% представляет собой виртуальное пересечение конечной формы с виртуальным лучом градиента. Процентные значения будут линейно расположены на луче градиента.
-
- -

Синтаксис

- -
radial-gradient(
-  [ [ circle || <length> ]                         [ at <position> ]? , |
-    [ ellipse || [ <length> | <percentage> ]{2} ]  [ at <position> ]? , |
-    [ [ circle | ellipse ] || <extent-keyword> ]   [ at <position> ]? , |
-    at <position> ,
-  ]?
-  <color-stop> [ , <color-stop> ]+
-)
-где <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
-  и <color-stop>     = <color> [ <percentage> | <length> ]?
-
- -

Примеры

- -

Простой градиент

- - - -
.radial-gradient {
-  background-image: radial-gradient(cyan 0%, transparent 20%, salmon 40%);
-}
- -

{{EmbedLiveSample('Простой_градиент', 120, 120)}}

- -

Градиент со смещённым центром

- - - -
.radial-gradient {
-  background-image: radial-gradient(farthest-corner at 40px 40px,
-      #f35 0%, #43e 100%);
-}
- -

{{EmbedLiveSample('Градиент_со_смещённым_центром', 240, 120)}}

- -
-

Примечание: Дополнительные примеры можно найти в Использование CSS градиентов.

-
- -

Спецификация

- - - - - - - - - - - - - - - - -
СпецификацияСтатусКомментарии
{{SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()')}}{{Spec2('CSS3 Images')}}Initial definition.
- -

Совместимость с браузерами

- -

{{Compat("css.types.image.gradient.radial-gradient")}}

-

Сноски к Quantum CSS

- - - -

Смотрите также

- - diff --git a/files/ru/web/css/repeating-linear-gradient()/index.html b/files/ru/web/css/repeating-linear-gradient()/index.html deleted file mode 100644 index 22766068a9..0000000000 --- a/files/ru/web/css/repeating-linear-gradient()/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: repeating-linear-gradient() -slug: Web/CSS/repeating-linear-gradient() -translation_of: Web/CSS/repeating-linear-gradient() ---- -
{{CSSRef}}
- -

CSS функция repeating-linear-gradient() создаёт изображение состоящее из повторяющихся линейных градиентов. Она схожа с {{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>")}}.

-
- -

Синтаксис

- -

Значения

- -
-
<сторона-или-угол>
-
Положение точки начала линии градиента. Начинается со слова to и максимум двух ключевых слов: одно определяет сторону по горизонтали (left или right), и другое сторону по вертикали (top или bottom). Порядок ключевых слов определяющих сторону не важен. Если они не определены, по умолчанию используется to bottom.
-
Значения to top, to bottom, to left, и to right эквивалентны углам 0deg, 180deg, 270deg, и 90deg соответственно. Прочие значения транслируются в угол.
-
{{cssxref("<angle>", "<угол>")}}
-
Угол наклона линии направления градиента. Значение 0deg эквивалентно to top; увеличение значения приводит к повороту линии против часовой стрелки начиная от этой величины (0deg).
-
<цвет-позиция>
-
Значение {{cssxref("<color>", "<цвета>")}} с последующей (необязательной) его позицией (либо в {{cssxref("<percentage>", "<процентах>")}}, либо в единицах {{cssxref("<length>", "<длины>")}} вдоль оси градиента).
-
-
-

Примечание: Рендер перехода цветов в CSS градиентах следует тем же правилам что и в SVG градиентах.

-
-
-
- -

Formal syntax

- -
repeating-linear-gradient(  [ <угол> | to <сторона-или-угол> ,]? <цвет-позиция> [, <цвет-позиция>]+ )
-                            \---------------------------------/ \----------------------------/
-                              Определение линии градиента         Список цветов и их позиций
-
-где <сторона-или-угол> = [left | right] || [top | bottom]
-   и <цвет-позиция>    = <цвет> [ <процент> | <длина> ]?
-
- -

Примеры

- -

Полоски зебры

- - - -
body {
-  background-image: repeating-linear-gradient(-45deg,
-      transparent,
-      transparent 20px,
-      black 20px,
-      black 40px);
-}
-
- -

{{EmbedLiveSample('Полоски_зебры', 120, 120)}}

- -

Повторяющиеся горизонтальные полосы

- - - -
body {
-  background-image: repeating-linear-gradient(to bottom,
-      rgb(26,198,204),
-      rgb(26,198,204) 7%,
-      rgb(100,100,100) 10%);
-}
-
- -

{{EmbedLiveSample('Повторяющиеся_горизонтальные_полосы', 120, 120)}}

- -
-

Примечание: Для дополнительных примеров пожалуйста обратитесь к статье Using CSS gradients.

-
- -

Спецификации

- - - - - - - - - - - - - - - - -
СпецификацияСтатусПримечание
{{SpecName('CSS3 Images', '#repeating-gradients', 'repeating-linear-gradient()')}}{{Spec2('CSS3 Images')}}Initial definition.
- -

Совместимость с браузерами

- -
{{Compat("css.types.image.gradient.repeating-linear-gradient")}}
- -

Дополнительно

- - diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt index 7529d156a2..450e9a4b93 100644 --- a/files/zh-cn/_redirects.txt +++ b/files/zh-cn/_redirects.txt @@ -2084,15 +2084,19 @@ /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/linear-gradient /zh-CN/docs/Web/CSS/linear-gradient() +/zh-CN/docs/Web/CSS/linear-gradient /zh-CN/docs/orphaned/Web/CSS/linear-gradient() +/zh-CN/docs/Web/CSS/linear-gradient() /zh-CN/docs/orphaned/Web/CSS/linear-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/radial-gradient /zh-CN/docs/Web/CSS/radial-gradient() +/zh-CN/docs/Web/CSS/radial-gradient /zh-CN/docs/orphaned/Web/CSS/radial-gradient() +/zh-CN/docs/Web/CSS/radial-gradient() /zh-CN/docs/orphaned/Web/CSS/radial-gradient() /zh-CN/docs/Web/CSS/repeat /zh-CN/docs/Web/CSS/repeat() -/zh-CN/docs/Web/CSS/repeating-linear-gradient /zh-CN/docs/Web/CSS/repeating-linear-gradient() -/zh-CN/docs/Web/CSS/repeating-radial-gradient /zh-CN/docs/Web/CSS/repeating-radial-gradient() +/zh-CN/docs/Web/CSS/repeating-linear-gradient /zh-CN/docs/orphaned/Web/CSS/repeating-linear-gradient() +/zh-CN/docs/Web/CSS/repeating-linear-gradient() /zh-CN/docs/orphaned/Web/CSS/repeating-linear-gradient() +/zh-CN/docs/Web/CSS/repeating-radial-gradient /zh-CN/docs/orphaned/Web/CSS/repeating-radial-gradient() +/zh-CN/docs/Web/CSS/repeating-radial-gradient() /zh-CN/docs/orphaned/Web/CSS/repeating-radial-gradient() /zh-CN/docs/Web/CSS/timing-function /zh-CN/docs/conflicting/Web/CSS/easing-function /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() diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json index ea71e02e73..8143f597fa 100644 --- a/files/zh-cn/_wikihistory.json +++ b/files/zh-cn/_wikihistory.json @@ -29834,37 +29834,6 @@ "NicoleBear" ] }, - "Web/CSS/linear-gradient()": { - "modified": "2020-11-16T08:58:15.083Z", - "contributors": [ - "chrisdavidmills", - "PaddyWang", - "dxc111", - "KadirTopal", - "Dandelion-drq", - "forever_youyou", - "getatny", - "victorsonger", - "xianshenglu", - "offcos", - "ScaredKitty", - "kmokidd", - "DaiZhiTao", - "xgqfrms-GitHub", - "zhengxinxin", - "dongsuo", - "Sebastianz", - "hkfn123", - "jiahui", - "huangcheng", - "prayash", - "JohnnyYang", - "concefly", - "XiaoYi", - "kuangfan", - "wileam" - ] - }, "Web/CSS/list-style": { "modified": "2019-03-18T20:46:34.398Z", "contributors": [ @@ -30478,23 +30447,6 @@ "silkwromzf" ] }, - "Web/CSS/radial-gradient()": { - "modified": "2020-12-13T08:05:13.362Z", - "contributors": [ - "BuluGuy", - "KaiserZh", - "chrisdavidmills", - "Ende93", - "HeyRaingirl", - "xgqfrms-GitHub", - "zhengxinxin", - "Sebastianz", - "mrstork", - "concefly", - "lyxuncle", - "jiereal" - ] - }, "Web/CSS/ratio": { "modified": "2020-10-15T22:08:11.112Z", "contributors": [ @@ -30512,26 +30464,6 @@ "xgqfrms" ] }, - "Web/CSS/repeating-linear-gradient()": { - "modified": "2020-11-18T14:46:37.002Z", - "contributors": [ - "chrisdavidmills", - "royIdoodle", - "zway", - "zhuangyin", - "Sebastianz", - "prayash", - "littleXiaosi" - ] - }, - "Web/CSS/repeating-radial-gradient()": { - "modified": "2020-11-18T14:47:47.109Z", - "contributors": [ - "chrisdavidmills", - "royIdoodle", - "zway" - ] - }, "Web/CSS/resize": { "modified": "2019-03-23T22:21:07.833Z", "contributors": [ @@ -50383,6 +50315,74 @@ "ZZES_REN" ] }, + "orphaned/Web/CSS/linear-gradient()": { + "modified": "2020-11-16T08:58:15.083Z", + "contributors": [ + "chrisdavidmills", + "PaddyWang", + "dxc111", + "KadirTopal", + "Dandelion-drq", + "forever_youyou", + "getatny", + "victorsonger", + "xianshenglu", + "offcos", + "ScaredKitty", + "kmokidd", + "DaiZhiTao", + "xgqfrms-GitHub", + "zhengxinxin", + "dongsuo", + "Sebastianz", + "hkfn123", + "jiahui", + "huangcheng", + "prayash", + "JohnnyYang", + "concefly", + "XiaoYi", + "kuangfan", + "wileam" + ] + }, + "orphaned/Web/CSS/radial-gradient()": { + "modified": "2020-12-13T08:05:13.362Z", + "contributors": [ + "BuluGuy", + "KaiserZh", + "chrisdavidmills", + "Ende93", + "HeyRaingirl", + "xgqfrms-GitHub", + "zhengxinxin", + "Sebastianz", + "mrstork", + "concefly", + "lyxuncle", + "jiereal" + ] + }, + "orphaned/Web/CSS/repeating-linear-gradient()": { + "modified": "2020-11-18T14:46:37.002Z", + "contributors": [ + "chrisdavidmills", + "royIdoodle", + "zway", + "zhuangyin", + "Sebastianz", + "prayash", + "littleXiaosi" + ] + }, + "orphaned/Web/CSS/repeating-radial-gradient()": { + "modified": "2020-11-18T14:47:47.109Z", + "contributors": [ + "chrisdavidmills", + "royIdoodle", + "zway" + ] + }, "orphaned/Web/Guide/CSS/CSS基础": { "modified": "2019-03-18T20:41:49.035Z", "contributors": [ diff --git a/files/zh-cn/orphaned/web/css/linear-gradient()/index.html b/files/zh-cn/orphaned/web/css/linear-gradient()/index.html new file mode 100644 index 0000000000..5127ea1fa8 --- /dev/null +++ b/files/zh-cn/orphaned/web/css/linear-gradient()/index.html @@ -0,0 +1,442 @@ +--- +title: linear-gradient +slug: orphaned/Web/CSS/linear-gradient() +tags: + - Background + - CSS Backgrounds and Borders Module Level 3 + - CSS3 + - W3C + - gradient + - linear-gradient() +translation_of: Web/CSS/linear-gradient() +original_slug: Web/CSS/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。

+ + + +

在预乘颜色空间里定义过渡色，从而可以防止在使用不同透明度颜色的情况下出现违和的灰色。在未舍弃原生语法的情况下，带前缀的版本被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
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOpera (Presto)Safari
Basic support (on {{cssxref("background")}} and {{cssxref("background-image")}}){{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}[1]
+ {{CompatGeckoDesktop("16")}}[2]		10.0 (534.16){{property_prefix("-webkit")}}[6]10.0[4]11.10{{property_prefix("-o")}}[1]5.1{{property_prefix("-webkit")}}[6]
On {{cssxref("border-radius")}}{{CompatGeckoDesktop("29")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
On any other property that accepts {{cssxref("<image>")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Legacy webkit syntax{{non-standard_inline}}{{CompatNo}}3{{property_prefix("-webkit")}}[3]{{CompatNo}}{{CompatNo}}4.0{{property_prefix("-webkit")}}[3]
Legacy 'from' syntax (without to){{non-standard_inline}}{{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}[5]10.0 (534.16){{property_prefix("-webkit")}}[3]1011.10{{property_prefix("-o")}}[5]5.1{{property_prefix("-webkit")}}[3]
Standard syntax (using the to keyword){{CompatGeckoDesktop("16")}}26.0 (537.27)1012.106.1
Interpolation hints (a percent without a color){{CompatGeckoDesktop("36")}}40{{CompatUnknown}}27{{CompatUnknown}}
Unitless 0 for <angle>{{CompatGeckoDesktop("46")}}{{property_prefix("-moz")}}[7]{{CompatVersionUnknown}}Edge 12{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOpera (Presto)Safari
Basic support (on {{cssxref("background")}} and {{cssxref("background-image")}}){{CompatGeckoMobile("1.9.2")}}{{property_prefix("-moz")}}[1]
+ {{CompatGeckoMobile("16")}}[2]		16{{property_prefix("-webkit")}}
+ 26		10{{CompatVersionUnknown}}{{CompatVersionUnknown}}
On {{cssxref("border-radius")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
On any other property that accepts {{cssxref("<image>")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Legacy webkit syntax{{non-standard_inline}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Legacy 'from' syntax (without to){{non-standard_inline}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Standard syntax (using the to keyword){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Interpolation hints (a percent without a color){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+ +

[1] Gecko, Opera & Webkit consider {{cssxref("<angle>")}} to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right. This is different from the latest specification where an angle of 0deg as a direction indicator points to the top. Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.

+ +

[2] Before Gecko 36.0 {{geckoRelease("36.0")}}, Gecko didn't apply gradients on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.

+ +

[3] WebKit since 528 supports the legacy -webkit-gradient(linear,…) function. As of WebKit 534.16, it also supports the standard gradient syntax. Unlike in Gecko, in legacy WebKit you cannot specify both a position and an angle in -webkit-linear-gradient(). You can achieve the same effect by offsetting the color stops.

+ +

[4] Internet Explorer 5.5 through 9.0 supports proprietary filter: progid:DXImageTransform.Microsoft.Gradient() filter.

+ +

[5] Firefox 3.6 and Opera 11.10 implemented, prefixed, an early syntax where the starting corner or side was indicated without the to keyword, and effectively considered as a 'from' position. The to syntax has been added in Firefox 10 and Opera 11.60.

+ +

In addition to the unprefixed support using the standard syntax, Gecko 44.0 {{geckoRelease("44.0")}} added support for a -webkit prefixed version of the function using the legacy 'from' syntax for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to true.

+ +

[6] Opera & Webkit consider {{cssxref("<angle>")}} to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right. This is different from the latest specification where an angle of 0deg as a direction indicator points to the top. Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false. WebKit since 528 supports the legacy -webkit-gradient(linear,…) function. As of WebKit 534.16, it also supports the standard gradient syntax. Unlike in Gecko, in legacy WebKit you cannot specify both a position and an angle in -webkit-linear-gradient(). You can achieve the same effect by offsetting the color stops.

+ +

[7] linear-gradient(0, pink, teal) equivalent to linear-gradient(0deg, pink, teal),See {{bug("1239153")}}.

+ +

了解更多

+ + diff --git a/files/zh-cn/orphaned/web/css/radial-gradient()/index.html b/files/zh-cn/orphaned/web/css/radial-gradient()/index.html new file mode 100644 index 0000000000..896d55a200 --- /dev/null +++ b/files/zh-cn/orphaned/web/css/radial-gradient()/index.html @@ -0,0 +1,192 @@ +--- +title: radial-gradient() +slug: orphaned/Web/CSS/radial-gradient() +tags: + - CSS + - CSS Function + - Reference + - Web + - gradient +translation_of: Web/CSS/radial-gradient() +original_slug: Web/CSS/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>
+
渐变的尺寸大小。包含的值见下表{{ anch("尺寸常数表") }}。
+
<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.

+ +

另见

+ + diff --git a/files/zh-cn/orphaned/web/css/repeating-linear-gradient()/index.html b/files/zh-cn/orphaned/web/css/repeating-linear-gradient()/index.html new file mode 100644 index 0000000000..405cb3f15f --- /dev/null +++ b/files/zh-cn/orphaned/web/css/repeating-linear-gradient()/index.html @@ -0,0 +1,297 @@ +--- +title: repeating-linear-gradient +slug: orphaned/Web/CSS/repeating-linear-gradient() +translation_of: Web/CSS/repeating-linear-gradient() +original_slug: Web/CSS/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.
+ +

浏览器兼容性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support (on {{cssxref("background")}} and {{cssxref("background-image")}}){{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}[3]
+ {{CompatGeckoDesktop("16")}}[5]		10.0 (534.16){{property_prefix("-webkit")}} [2][3]10.0 [1]11.10{{property_prefix("-o")}} [3]5.1{{property_prefix("-webkit")}}[2][3]
On {{cssxref("border-radius")}}{{CompatGeckoDesktop("29")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
On any other property that accept {{cssxref("<image>")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Legacy webkit syntax{{non-standard_inline}}{{CompatNo}}3{{property_prefix("-webkit")}} [2]{{CompatNo}}{{CompatNo}}4.0{{property_prefix("-webkit")}}[2]
Legacy from syntax (without to){{non-standard_inline}}{{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}[4]
+ Removed in {{CompatGeckoDesktop("16")}}[7]		10.0 (534.16){{property_prefix("-webkit")}} [2]10.011.10{{property_prefix("-o")}}[4]5.1{{property_prefix("-webkit")}}[2]
to syntax{{CompatGeckoDesktop("10")}}{{property_prefix("-moz")}}[4]
+ {{CompatGeckoDesktop("16")}}		26.010.011.60{{property_prefix("-o")}}[4]
+ Presto 2.12 will remove the prefix.		{{CompatNo}}
Interpolation hints/gradient midpoints (a percent without a color){{CompatGeckoDesktop("36")}}40{{CompatUnknown}}27{{CompatVersionUnknown}}[6]
Unitless 0 for <angle>{{CompatGeckoDesktop("46")}}{{property_prefix("-webkit")}}[8]
+ {{CompatNo}}[9]		{{CompatVersionUnknown}}Edge 12{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOpera (Presto)Safari
Basic support{{CompatGeckoMobile("1.9.2")}}{{property_prefix("-moz")}}[3]
+ {{CompatGeckoMobile("16")}}[5]		 +

16{{property_prefix("-webkit")}}
+ 26

+ 		10{{CompatVersionUnknown}}{{CompatVersionUnknown}}[6]
+
+ +

[1] Internet Explorer 5.5 through 9.0 supports proprietary filter: progid:DXImageTransform.Microsoft.Gradient() filter.

+ +

[2] WebKit since 528 supports the legacy -webkit-gradient(linear,…) function. As of WebKit 534.16, it also supports the standard gradient syntax. Unlike in Gecko, in legacy WebKit you cannot specify both a position and angle in -webkit-linear-gradient(). You can achieve the same effect by offsetting the color stops.

+ +

[3] Gecko, Opera & Webkit considers {{cssxref("<angle>")}} to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right. This is different from the latest specification where an angle of 0deg as a direction indicator points to the top. Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.

+ +

[4] Firefox 3.6 and Opera 11.10 implemented, prefixed, an early syntax where the starting corner or side was indicated without the to keyword, and effectively considered as a from position. The to syntax has been added in Firefox 10 and Opera 11.60 , at first without removing the deprecated syntax and translation between the two is trivial:

+ +
-moz-repeating-linear-gradient(to top left, blue, red);
+ +

is the same as:

+ +
-moz-repeating-linear-gradient(bottom right, blue, red);
+ +

The legacy syntax, without to, is planned to go away when the prefix is removed.

+ +

[5] Before Firefox 36, Gecko didn't apply gradient on the pre-multiplied color space, leading to shade of grey unexpectedly appearing when used with transparency.

+ +

[6] {{webkitbug(1074056)}}.

+ +

[7] In addition to the unprefixed support using the standard syntax, Gecko 44.0 {{geckoRelease("44.0")}} added support for a -webkit prefixed version of the function using the legacy 'from' syntax for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to true.

+ +

[8] In -webkit-linear-gradient function (handled below), Gecko accept unitless 0 for angles, to match webkit/blink,See {{bug("1239153")}}.

+ +

[9] See {{bug("1363292")}}.

+ +

了解更多

+ + diff --git a/files/zh-cn/orphaned/web/css/repeating-radial-gradient()/index.html b/files/zh-cn/orphaned/web/css/repeating-radial-gradient()/index.html new file mode 100644 index 0000000000..bcbbb20421 --- /dev/null +++ b/files/zh-cn/orphaned/web/css/repeating-radial-gradient()/index.html @@ -0,0 +1,263 @@ +--- +title: repeating-radial-gradient() +slug: orphaned/Web/CSS/repeating-radial-gradient() +translation_of: Web/CSS/repeating-radial-gradient() +original_slug: Web/CSS/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.
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support (on {{cssxref("background")}} and {{cssxref("background-image")}})10 {{property_prefix("-webkit")}}{{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("16")}}[1]		1012 {{property_prefix("-o")}}
+ 12.5		5.1 {{property_prefix("-webkit")}}
On {{cssxref("border-image")}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("29")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
On any other property that accept {{cssxref("<image>")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Interpolation hints (a percent without a color)40{{CompatGeckoDesktop("36")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support (on {{cssxref("background")}} and {{cssxref("background-image")}})4.4{{CompatGeckoMobile("46")}}1012.17.1
On {{cssxref("border-image")}}{{CompatGeckoMobile("29")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
On any other property that accept {{cssxref("<image>")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Before Firefox 36, Gecko didn't apply gradient on the pre-multiplied color space, leading to shade of grey unexpectedly appearing when used with transparency. Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.

+ +

In addition to the unprefixed support, Gecko 44.0 {{geckoRelease("44.0")}} added support for a -webkit prefixed version of the function for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to true.

+ +

参阅：

+ + diff --git a/files/zh-cn/web/css/linear-gradient()/index.html b/files/zh-cn/web/css/linear-gradient()/index.html deleted file mode 100644 index c6ca27776d..0000000000 --- a/files/zh-cn/web/css/linear-gradient()/index.html +++ /dev/null @@ -1,441 +0,0 @@ ---- -title: linear-gradient -slug: Web/CSS/linear-gradient() -tags: - - Background - - CSS Backgrounds and Borders Module Level 3 - - CSS3 - - W3C - - gradient - - linear-gradient() -translation_of: Web/CSS/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。

- - - -

在预乘颜色空间里定义过渡色，从而可以防止在使用不同透明度颜色的情况下出现违和的灰色。在未舍弃原生语法的情况下，带前缀的版本被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
- -

浏览器兼容性

- -

{{CompatibilityTable}}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureFirefox (Gecko)ChromeInternet ExplorerOpera (Presto)Safari
Basic support (on {{cssxref("background")}} and {{cssxref("background-image")}}){{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}[1]
- {{CompatGeckoDesktop("16")}}[2]		10.0 (534.16){{property_prefix("-webkit")}}[6]10.0[4]11.10{{property_prefix("-o")}}[1]5.1{{property_prefix("-webkit")}}[6]
On {{cssxref("border-radius")}}{{CompatGeckoDesktop("29")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
On any other property that accepts {{cssxref("<image>")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Legacy webkit syntax{{non-standard_inline}}{{CompatNo}}3{{property_prefix("-webkit")}}[3]{{CompatNo}}{{CompatNo}}4.0{{property_prefix("-webkit")}}[3]
Legacy 'from' syntax (without to){{non-standard_inline}}{{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}[5]10.0 (534.16){{property_prefix("-webkit")}}[3]1011.10{{property_prefix("-o")}}[5]5.1{{property_prefix("-webkit")}}[3]
Standard syntax (using the to keyword){{CompatGeckoDesktop("16")}}26.0 (537.27)1012.106.1
Interpolation hints (a percent without a color){{CompatGeckoDesktop("36")}}40{{CompatUnknown}}27{{CompatUnknown}}
Unitless 0 for <angle>{{CompatGeckoDesktop("46")}}{{property_prefix("-moz")}}[7]{{CompatVersionUnknown}}Edge 12{{CompatVersionUnknown}}{{CompatVersionUnknown}}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureFirefox (Gecko)ChromeInternet ExplorerOpera (Presto)Safari
Basic support (on {{cssxref("background")}} and {{cssxref("background-image")}}){{CompatGeckoMobile("1.9.2")}}{{property_prefix("-moz")}}[1]
- {{CompatGeckoMobile("16")}}[2]		16{{property_prefix("-webkit")}}
- 26		10{{CompatVersionUnknown}}{{CompatVersionUnknown}}
On {{cssxref("border-radius")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
On any other property that accepts {{cssxref("<image>")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Legacy webkit syntax{{non-standard_inline}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Legacy 'from' syntax (without to){{non-standard_inline}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Standard syntax (using the to keyword){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Interpolation hints (a percent without a color){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
- -

[1] Gecko, Opera & Webkit consider {{cssxref("<angle>")}} to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right. This is different from the latest specification where an angle of 0deg as a direction indicator points to the top. Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.

- -

[2] Before Gecko 36.0 {{geckoRelease("36.0")}}, Gecko didn't apply gradients on the pre-multiplied color space, leading to shades of grey unexpectedly appearing when used with transparency.

- -

[3] WebKit since 528 supports the legacy -webkit-gradient(linear,…) function. As of WebKit 534.16, it also supports the standard gradient syntax. Unlike in Gecko, in legacy WebKit you cannot specify both a position and an angle in -webkit-linear-gradient(). You can achieve the same effect by offsetting the color stops.

- -

[4] Internet Explorer 5.5 through 9.0 supports proprietary filter: progid:DXImageTransform.Microsoft.Gradient() filter.

- -

[5] Firefox 3.6 and Opera 11.10 implemented, prefixed, an early syntax where the starting corner or side was indicated without the to keyword, and effectively considered as a 'from' position. The to syntax has been added in Firefox 10 and Opera 11.60.

- -

In addition to the unprefixed support using the standard syntax, Gecko 44.0 {{geckoRelease("44.0")}} added support for a -webkit prefixed version of the function using the legacy 'from' syntax for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to true.

- -

[6] Opera & Webkit consider {{cssxref("<angle>")}} to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right. This is different from the latest specification where an angle of 0deg as a direction indicator points to the top. Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false. WebKit since 528 supports the legacy -webkit-gradient(linear,…) function. As of WebKit 534.16, it also supports the standard gradient syntax. Unlike in Gecko, in legacy WebKit you cannot specify both a position and an angle in -webkit-linear-gradient(). You can achieve the same effect by offsetting the color stops.

- -

[7] linear-gradient(0, pink, teal) equivalent to linear-gradient(0deg, pink, teal),See {{bug("1239153")}}.

- -

了解更多

- - diff --git a/files/zh-cn/web/css/radial-gradient()/index.html b/files/zh-cn/web/css/radial-gradient()/index.html deleted file mode 100644 index 124043bf7b..0000000000 --- a/files/zh-cn/web/css/radial-gradient()/index.html +++ /dev/null @@ -1,191 +0,0 @@ ---- -title: radial-gradient() -slug: Web/CSS/radial-gradient() -tags: - - CSS - - CSS Function - - Reference - - Web - - gradient -translation_of: Web/CSS/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>
-
渐变的尺寸大小。包含的值见下表{{ anch("尺寸常数表") }}。
-
<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.

- -

另见

- - diff --git a/files/zh-cn/web/css/repeating-linear-gradient()/index.html b/files/zh-cn/web/css/repeating-linear-gradient()/index.html deleted file mode 100644 index 39c25687f3..0000000000 --- a/files/zh-cn/web/css/repeating-linear-gradient()/index.html +++ /dev/null @@ -1,296 +0,0 @@ ---- -title: repeating-linear-gradient -slug: Web/CSS/repeating-linear-gradient() -translation_of: Web/CSS/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.
- -

浏览器兼容性

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support (on {{cssxref("background")}} and {{cssxref("background-image")}}){{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}[3]
- {{CompatGeckoDesktop("16")}}[5]		10.0 (534.16){{property_prefix("-webkit")}} [2][3]10.0 [1]11.10{{property_prefix("-o")}} [3]5.1{{property_prefix("-webkit")}}[2][3]
On {{cssxref("border-radius")}}{{CompatGeckoDesktop("29")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
On any other property that accept {{cssxref("<image>")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Legacy webkit syntax{{non-standard_inline}}{{CompatNo}}3{{property_prefix("-webkit")}} [2]{{CompatNo}}{{CompatNo}}4.0{{property_prefix("-webkit")}}[2]
Legacy from syntax (without to){{non-standard_inline}}{{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}[4]
- Removed in {{CompatGeckoDesktop("16")}}[7]		10.0 (534.16){{property_prefix("-webkit")}} [2]10.011.10{{property_prefix("-o")}}[4]5.1{{property_prefix("-webkit")}}[2]
to syntax{{CompatGeckoDesktop("10")}}{{property_prefix("-moz")}}[4]
- {{CompatGeckoDesktop("16")}}		26.010.011.60{{property_prefix("-o")}}[4]
- Presto 2.12 will remove the prefix.		{{CompatNo}}
Interpolation hints/gradient midpoints (a percent without a color){{CompatGeckoDesktop("36")}}40{{CompatUnknown}}27{{CompatVersionUnknown}}[6]
Unitless 0 for <angle>{{CompatGeckoDesktop("46")}}{{property_prefix("-webkit")}}[8]
- {{CompatNo}}[9]		{{CompatVersionUnknown}}Edge 12{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureFirefox (Gecko)ChromeInternet ExplorerOpera (Presto)Safari
Basic support{{CompatGeckoMobile("1.9.2")}}{{property_prefix("-moz")}}[3]
- {{CompatGeckoMobile("16")}}[5]		 -

16{{property_prefix("-webkit")}}
- 26

- 		10{{CompatVersionUnknown}}{{CompatVersionUnknown}}[6]
-
- -

[1] Internet Explorer 5.5 through 9.0 supports proprietary filter: progid:DXImageTransform.Microsoft.Gradient() filter.

- -

[2] WebKit since 528 supports the legacy -webkit-gradient(linear,…) function. As of WebKit 534.16, it also supports the standard gradient syntax. Unlike in Gecko, in legacy WebKit you cannot specify both a position and angle in -webkit-linear-gradient(). You can achieve the same effect by offsetting the color stops.

- -

[3] Gecko, Opera & Webkit considers {{cssxref("<angle>")}} to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right. This is different from the latest specification where an angle of 0deg as a direction indicator points to the top. Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.

- -

[4] Firefox 3.6 and Opera 11.10 implemented, prefixed, an early syntax where the starting corner or side was indicated without the to keyword, and effectively considered as a from position. The to syntax has been added in Firefox 10 and Opera 11.60 , at first without removing the deprecated syntax and translation between the two is trivial:

- -
-moz-repeating-linear-gradient(to top left, blue, red);
- -

is the same as:

- -
-moz-repeating-linear-gradient(bottom right, blue, red);
- -

The legacy syntax, without to, is planned to go away when the prefix is removed.

- -

[5] Before Firefox 36, Gecko didn't apply gradient on the pre-multiplied color space, leading to shade of grey unexpectedly appearing when used with transparency.

- -

[6] {{webkitbug(1074056)}}.

- -

[7] In addition to the unprefixed support using the standard syntax, Gecko 44.0 {{geckoRelease("44.0")}} added support for a -webkit prefixed version of the function using the legacy 'from' syntax for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to true.

- -

[8] In -webkit-linear-gradient function (handled below), Gecko accept unitless 0 for angles, to match webkit/blink,See {{bug("1239153")}}.

- -

[9] See {{bug("1363292")}}.

- -

了解更多

- - diff --git a/files/zh-cn/web/css/repeating-radial-gradient()/index.html b/files/zh-cn/web/css/repeating-radial-gradient()/index.html deleted file mode 100644 index 94cf5f2d19..0000000000 --- a/files/zh-cn/web/css/repeating-radial-gradient()/index.html +++ /dev/null @@ -1,262 +0,0 @@ ---- -title: repeating-radial-gradient() -slug: Web/CSS/repeating-radial-gradient() -translation_of: Web/CSS/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.
- -

浏览器兼容性

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support (on {{cssxref("background")}} and {{cssxref("background-image")}})10 {{property_prefix("-webkit")}}{{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}
- {{CompatGeckoDesktop("16")}}[1]		1012 {{property_prefix("-o")}}
- 12.5		5.1 {{property_prefix("-webkit")}}
On {{cssxref("border-image")}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("29")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
On any other property that accept {{cssxref("<image>")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Interpolation hints (a percent without a color)40{{CompatGeckoDesktop("36")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support (on {{cssxref("background")}} and {{cssxref("background-image")}})4.4{{CompatGeckoMobile("46")}}1012.17.1
On {{cssxref("border-image")}}{{CompatGeckoMobile("29")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
On any other property that accept {{cssxref("<image>")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

[1] Before Firefox 36, Gecko didn't apply gradient on the pre-multiplied color space, leading to shade of grey unexpectedly appearing when used with transparency. Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.

- -

In addition to the unprefixed support, Gecko 44.0 {{geckoRelease("44.0")}} added support for a -webkit prefixed version of the function for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to true.

- -

参阅：

- - diff --git a/files/zh-tw/_redirects.txt b/files/zh-tw/_redirects.txt index 998b521767..d9aa4eef21 100644 --- a/files/zh-tw/_redirects.txt +++ b/files/zh-tw/_redirects.txt @@ -611,7 +611,8 @@ /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/border-image/border-image /zh-TW/docs/orphaned/Web/CSS/border-image/border-image -/zh-TW/docs/Web/CSS/radial-gradient /zh-TW/docs/Web/CSS/radial-gradient() +/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/參考 /zh-TW/docs/Web/CSS/Reference /zh-TW/docs/Web/CSS/彈頭 /zh-TW/docs/Web/CSS/box-sizing diff --git a/files/zh-tw/_wikihistory.json b/files/zh-tw/_wikihistory.json index 8590ffcd97..8dea03cdb2 100644 --- a/files/zh-tw/_wikihistory.json +++ b/files/zh-tw/_wikihistory.json @@ -5365,13 +5365,6 @@ "gn00979905" ] }, - "Web/CSS/radial-gradient()": { - "modified": "2020-11-18T14:43:15.827Z", - "contributors": [ - "chrisdavidmills", - "linzging" - ] - }, "Web/CSS/ruby-position": { "modified": "2020-10-15T21:51:03.131Z", "contributors": [ @@ -8716,6 +8709,13 @@ "Kennyluck" ] }, + "orphaned/Web/CSS/radial-gradient()": { + "modified": "2020-11-18T14:43:15.827Z", + "contributors": [ + "chrisdavidmills", + "linzging" + ] + }, "orphaned/Web/Guide/Events": { "modified": "2019-03-23T22:48:03.662Z", "contributors": [ diff --git a/files/zh-tw/orphaned/web/css/radial-gradient()/index.html b/files/zh-tw/orphaned/web/css/radial-gradient()/index.html new file mode 100644 index 0000000000..3887115660 --- /dev/null +++ b/files/zh-tw/orphaned/web/css/radial-gradient()/index.html @@ -0,0 +1,184 @@ +--- +title: radial-gradient() +slug: orphaned/Web/CSS/radial-gradient() +translation_of: Web/CSS/radial-gradient() +original_slug: Web/CSS/radial-gradient() +--- +
{{CSSRef}}
+ +

CSS radial-gradient() 函數創建了一個圖片，其由一個從原點輻射開的在兩個或者多個顏色之前的漸變組成。這個方法得到的是一個CSS<gradient>數據類型的物件，其是 <image> 的一種。

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

As with any gradient, a radial gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the size of the element it applies to.

+ +

To create a radial gradient that repeats so as to fill its container, use the {{cssxref("repeating-radial-gradient")}} function instead.

+ +

Because <gradient>s belong to the <image> data type, they can only be used where <image>s can be used. For this reason, radial-gradient() won't work on {{Cssxref("background-color")}} and other properties that use the {{cssxref("<color>")}} data type.

+ +

Composition of a radial gradient

+ +

向量漸變(Radial gradients)由其中心點、邊緣形狀輪廓及位置、色值結束點（color stops）定義而成。

+ +

To create a smooth gradient, the radial-gradient() function draws a series of concentric shapes radiating out from the center to the ending shape (and potentially beyond). The ending shape may be either a circle or an ellipse.

+ +

Color-stop points are positioned on a virtual gradient ray that extends horizontally from the center towards the right. Percentage-based color-stop positions are relative to the intersection between the ending shape and this gradient ray, which represents 100%. Each shape is a single color determined by the color on the gradient ray it intersects.

+ +

Syntax

+ +
/* 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%)
+ +

Values

+ +
+
{{cssxref("<position>")}}
+
The position of the gradient, interpreted in the same way as {{cssxref("background-position")}} or {{cssxref("transform-origin")}}. If unspecified, it defaults to center.
+
<shape>
+
The gradient's shape. The value can be circle (meaning that the gradient's shape is a circle with constant radius) or ellipse (meaning that the shape is an axis-aligned ellipse). If unspecified, it defaults to ellipse.
+
<extent-keyword>
+
A keyword describing how big the ending shape must be. The possible values are: + + + + + + + + + + + + + + + + + + + + + + + + + +
KeywordDescription
closest-sideThe gradient's ending shape meets the side of the box closest to its center (for circles) or meets both the vertical and horizontal sides closest to the center (for ellipses).
closest-cornerThe gradient's ending shape is sized so that it exactly meets the closest corner of the box from its center.
farthest-sideSimilar to closest-side, except the ending shape is sized to meet the side of the box farthest from its center (or vertical and horizontal sides).
farthest-cornerThe default value, the gradient's ending shape is sized so that it exactly meets the farthest corner of the box from its center.
+ +
+

Note: Early implementations of this function included other keywords (cover and contain) as synonyms of the standard farthest-corner and closest-side, respectively. Use the standard keywords only, as some implementations have already dropped those older variants.

+
+
+
<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.

+
+ +

Examples

+ +

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.

+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()')}}{{Spec2('CSS3 Images')}}Initial definition.
+ +

Browser compatibility

+ + + +
{{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.

+ +

See also

+ + diff --git a/files/zh-tw/web/css/radial-gradient()/index.html b/files/zh-tw/web/css/radial-gradient()/index.html deleted file mode 100644 index bd054abab3..0000000000 --- a/files/zh-tw/web/css/radial-gradient()/index.html +++ /dev/null @@ -1,183 +0,0 @@ ---- -title: radial-gradient() -slug: Web/CSS/radial-gradient() -translation_of: Web/CSS/radial-gradient() ---- -
{{CSSRef}}
- -

CSS radial-gradient() 函數創建了一個圖片，其由一個從原點輻射開的在兩個或者多個顏色之前的漸變組成。這個方法得到的是一個CSS<gradient>數據類型的物件，其是 <image> 的一種。

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

As with any gradient, a radial gradient has no intrinsic dimensions; i.e., it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the size of the element it applies to.

- -

To create a radial gradient that repeats so as to fill its container, use the {{cssxref("repeating-radial-gradient")}} function instead.

- -

Because <gradient>s belong to the <image> data type, they can only be used where <image>s can be used. For this reason, radial-gradient() won't work on {{Cssxref("background-color")}} and other properties that use the {{cssxref("<color>")}} data type.

- -

Composition of a radial gradient

- -

向量漸變(Radial gradients)由其中心點、邊緣形狀輪廓及位置、色值結束點（color stops）定義而成。

- -

To create a smooth gradient, the radial-gradient() function draws a series of concentric shapes radiating out from the center to the ending shape (and potentially beyond). The ending shape may be either a circle or an ellipse.

- -

Color-stop points are positioned on a virtual gradient ray that extends horizontally from the center towards the right. Percentage-based color-stop positions are relative to the intersection between the ending shape and this gradient ray, which represents 100%. Each shape is a single color determined by the color on the gradient ray it intersects.

- -

Syntax

- -
/* 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%)
- -

Values

- -
-
{{cssxref("<position>")}}
-
The position of the gradient, interpreted in the same way as {{cssxref("background-position")}} or {{cssxref("transform-origin")}}. If unspecified, it defaults to center.
-
<shape>
-
The gradient's shape. The value can be circle (meaning that the gradient's shape is a circle with constant radius) or ellipse (meaning that the shape is an axis-aligned ellipse). If unspecified, it defaults to ellipse.
-
<extent-keyword>
-
A keyword describing how big the ending shape must be. The possible values are: - - - - - - - - - - - - - - - - - - - - - - - - - -
KeywordDescription
closest-sideThe gradient's ending shape meets the side of the box closest to its center (for circles) or meets both the vertical and horizontal sides closest to the center (for ellipses).
closest-cornerThe gradient's ending shape is sized so that it exactly meets the closest corner of the box from its center.
farthest-sideSimilar to closest-side, except the ending shape is sized to meet the side of the box farthest from its center (or vertical and horizontal sides).
farthest-cornerThe default value, the gradient's ending shape is sized so that it exactly meets the farthest corner of the box from its center.
- -
-

Note: Early implementations of this function included other keywords (cover and contain) as synonyms of the standard farthest-corner and closest-side, respectively. Use the standard keywords only, as some implementations have already dropped those older variants.

-
-
-
<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.

-
- -

Examples

- -

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.

-
- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()')}}{{Spec2('CSS3 Images')}}Initial definition.
- -

Browser compatibility

- - - -
{{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.

- -

See also

- - -- cgit v1.2.3-54-g00ecf