Compare Revisions

<gradient>

Change Revisions

Revision 334485:

Revision 334485 by Inkbug on

Revision 334585:

Revision 334585 by ethertank on

Title:
gradient
gradient
Slug:
CSS/gradient
CSS/gradient
Tags:
"Fixit", "css", "CSS3", "css3-images", "CSS Reference"
"Fixit", "css", "CSS3", "css3-images", "CSS Reference"
Content:

Revision 334485
Revision 334585
n7    <p>n7    <div>
8      {{ CSSRef() }}8      {{CSSRef}}
9    </p>9    </div>
n14      The <code>&lt;gradient&gt;</code> <a href="/en/CSS" title="n14      The <code>&lt;gradient&gt;</code> <a href="/en-US/docs/CSS"
>CSS">CSS</a> data type denotes a CSS {{ xref_cssimage() }} made o> title="CSS">CSS</a> data type denotes a CSS {{xref_cssimage}} ma
>f a progressive transition between two or more colors. A CSS grad>de of a progressive transition between two or more colors. A CSS 
>ient is not a CSS {{ xref_csscolorvalue() }} but an image with <a>gradient is not a CSS {{xref_csscolorvalue}} but an image with <a
> href="/en/CSS/image#no_intrinsic" title="en/CSS/image#no_intrins> href="/en-US/docs/CSS/image#no_intrinsic" title="CSS/image#no_in
>ic">no intrinsic dimensions</a>; that is, it has no natural or pr>trinsic">no intrinsic dimensions</a>; that is, it has no natural 
>eferred size, nor ratio. Its concrete size will match the one of >or preferred size, nor ratio. Its concrete size will match the on
>the element it applies to.>e of the element it applies to.
n21        <em>linear gradients</em>, generated by the {{ cssxref("ln21        <em>linear gradients</em>, generated by the {{cssxref("li
>inear-gradient", "linear-gradient()") }} function, where the colo>near-gradient", "linear-gradient()")}} function, where the color 
>r smoothly fades along an imaginary line.>smoothly fades along an imaginary line.
22        <div style="background: -moz-linear-gradient(to right,red22        <div style="background: -moz-linear-gradient(left,red,ora
>,orange,yellow, green, blue,indigo,violet); background: -webkit-l>nge,yellow, green, blue,indigo,violet); background: -webkit-linea
>inear-gradient(left,red,orange,yellow, green, blue,indigo,violet)>r-gradient(left,red,orange,yellow, green, blue,indigo,violet); ba
>; background: -ms-linear-gradient(left,red,orange,yellow, green, >ckground: -ms-linear-gradient(left,red,orange,yellow, green, blue
>blue,indigo,violet); background: -o-linear-gradient(left,red,oran>,indigo,violet); background: -o-linear-gradient(left,red,orange,y
>ge,yellow, green, blue,indigo,violet); border: 1px solid black;">>ellow, green, blue,indigo,violet); background: linear-gradient(to
 > right,red,orange,yellow, green, blue,indigo,violet); border: 1px
 > solid black;">
n30        <em>radial gradients</em>, generated by the {{ cssxref("rn30        <em>radial gradients</em>, generated by the {{cssxref("ra
>adial-gradient", "radial-gradient()") }} function. The more away >dial-gradient", "radial-gradient()")}} function. The more away fr
>from an origin a point is, the more far from the original color i>om an origin a point is, the more far from the original color it 
>t is.>is.
n71            {{ SpecName('CSS3 Images', '#gradients', '&lt;gradienn71            {{SpecName('CSS3 Images', '#gradients', '&lt;gradient
>t&gt;') }}>&gt;')}}
n74            {{ Spec2('CSS3 Images') }}n74            {{Spec2('CSS3 Images')}}
n93        <a href="/en/CSS/Using_CSS_gradients" title="Using gradien93        <a href="/en-US/docs/CSS/Using_CSS_gradients" title="Usin
>nts">Using CSS gradients</a>, {{ xref_cssgradient() }}, {{ cssxre>g gradients">Using CSS gradients</a>, {{xref_cssgradient}}, {{css
>f("linear-gradient", "linear-gradient()") }}, {{ cssxref("radial->xref("linear-gradient", "linear-gradient()")}}, {{cssxref("radial
>gradient", "radial-gradient()") }}, {{ cssxref("repeating-linear->-gradient", "radial-gradient()")}}, {{cssxref("repeating-linear-g
>gradient", "repeating-linear-gradient()") }}, {{ cssxref("repeati>radient", "repeating-linear-gradient()")}}, {{cssxref("repeating-
>ng-radial-gradient", "repeating-radial-gradient()") }};>radial-gradient", "repeating-radial-gradient()")}};
t95      <li>CSS Data Types: {{ CSSDataTypes() }}.t95      <li>CSS Data Types: {{CSSDataTypes}}.

Back to History