mozilla

Compare Revisions

Using CSS gradients

Change Revisions

Revision 34728:

Revision 34728 by marcobiscaro2112 on

Revision 34729:

Revision 34729 by borncssed on

Title:
Using CSS gradients
Using CSS gradients
Slug:
CSS/Using_CSS_gradients
CSS/Using_CSS_gradients
Tags:
css, Fixit
css, Fixit
Content:

Revision 34728
Revision 34729
n258      <img alt="linear_multibg_transparent.png" class="internal dn258      <img alt="linear_multibg_transparent.png" class="internal d
>efault" src="/@api/deki/files/3957/=linear_multibg_transparent.pn>efault" src="/@api/deki/files/3957/=linear_multibg_transparent.pn
>g">>g" style="">
n460            <img alt="repeating_linear_gradient.png" class="intern460            <img alt="repeating_linear_gradient.png" class="inter
>nal default" src="/@api/deki/files/3964/=repeating_linear_gradien>nal default" src="/@api/deki/files/3964/=repeating_linear_gradien
>t.png">>t.png" style="">
nn471    <p>
472      Another example using the {{ cssxref("repeating-linear-grad
 >ient") }} property.
473    </p>
474    <p>
475      <a href="/@api/deki/files/6192/=repeat_background_gradient_
 >checked.png" title="repeat_background_gradient_checked.png"><img 
 >alt="repeat_background_gradient_checked.png" class="internal defa
 >ult" src="/@api/deki/files/6192/=repeat_background_gradient_check
 >ed.png?size=thumb" style="width: 160px; height: 160px;"></a><br>
476      &nbsp;
477    </p>
478    <pre class="brush: css">
479background-color: #000;
480background-image: repeating-linear-gradient(90deg, transparent, t
 >ransparent 50px, rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 
 >0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0,
 > 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, tran
 >sparent 116px, rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0
 >.25) 166px),
481repeating-linear-gradient(0deg, transparent, transparent 50px, rg
 >ba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transpa
 >rent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px, rgba(2
 >55, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba
 >(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
482repeating-linear-gradient(-45deg, transparent, transparent 5px, r
 >gba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px),
483repeating-linear-gradient(45deg, transparent, transparent 5px, rg
 >ba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px);
484</pre>
485    <p>
486      &nbsp;
487    </p>
tt508          <td>
509            &nbsp;
491          <td></td>510          </td>

Back to History