Create website gradients with CSS

In this post I'll show you an easy technique that can save you lots of time when you want to use gradients in your website.
Here is an example:




This has been produced by the following code:

<span class="one"></span>
<span class="two"></span>
<span class="three"></span>
<span class="four"></span>
<span class="five"></span>

<style>
.one, .two, .three, .four, .five { float:right; width:10%; height:80px;line-height:80px; }
.two {background:#D2E4F6; }
.one {background:#FFFFFF; }
.three {background:#A5C9ED; }
.four {background:#78ADE5; }
.five {background:#4B92DC; }
</style>

And the next one:

<style>
span {
height:10px;display:block;
.g1 {background-color:rgb(255,105,105);}
.g2 {background-color:rgb(255,125,125);}
.g3 {background-color:rgb(255,145,145);}
.g4 {background-color:rgb(255,165,165);}
.g5 {background-color:rgb(255,185,185);}
.g6 {background-color:rgb(255,205,205);}
.g7 {background-color:rgb(255,225,225);}
}
</style>

<span class="g1">>/span>
<span class="g2"></span>
<span class="g3"></span>
<span class="g4"></span>
<span class="g5"></span>
<span class="g6"></span>
<span class="g7"></span>

You can adjust the height of the gradient bar altering the CSS height property. The lower height value will give you smoother gradient.
Cheers! 0 коментара