Cara membuat background warna - warni (GRADASI)

Untuk membuat background dengan warna gradasi, kita tidak perlu lagi menggunakan gambar sebagai backgroundnya. Tapi sekarang kita bisa menggunakan salah satu dari fitur CSS. Selain tampilan web menjadi lebih ringan, fitur CSS lebih mudah untuk mengatur pemilihan warna, nilai posisi warna, ketebalan warna, untuk membuat background dengan warna gradasi sesuai selera. Dibawah ini beberapa contoh gradasi beserta kodenya, silahkan anda bisa mencoba untuk mengubah nilai - nilainya sesuai kebutuhan anda.

TEKS DISINI

COPY PASTE KODE DIBAWAH INI :
<style type="text/css">

div.vertikal-terang-kanan-kiri

{

width:100%;

border-style:solid;

border-color:rgb(225, 225, 225);

-moz-border-radius: 0px 0px 0px 0px;

-webkit-border-radius: 0px 0px 0px 0px;

padding: 0px;

margin-left: 0px;

background: -moz-linear-gradient(center left, #ffffff 0%,#c4d69f 50%,#ffffff 100%);

background: -webkit-gradient(linear, left bottom, right bottom, color-stop

(0, #ffffff),color-stop(0.5, #c4d69f),color-stop(1, #ffffff));

}

</style>

<div class="vertikal-terang-kanan-kiri">TEKS DISINI</div>

TEKS DISINI

COPY PASTE KODE DIBAWAH INI :
 <style type="text/css">
div.vertikal-terang-kiri
{
width:100%;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
padding: 0px;
margin-left: 0px;
background: -moz-linear-gradient(center left, #ffffff 0%,#c4d69f 100%);
background: -webkit-gradient(linear, left bottom, right bottom, color-stop(0, #ffffff),color-stop(1, #c4d69f));
}
</style>
<div class="vertikal-terang-kiri">TEKS DISINI</div>

TEKS DISINI

COPY PASTE KODE DIBAWAH INI :
 <style type="text/css">
div.terang-bawah
{
width:100%;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
padding: 0px;
margin-left: 0px;
background: -moz-linear-gradient(center top, #c4d69f 0%,#ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff),color-stop(1, #c4d69f));
}
</style>
<div class="terang-bawah">TEKS DISINI</div>

TEKS DISINI

COPY PASTE KODE DIBAWAH INI :

 <style type="text/css">
div.Horisontal-terang-tengah
{
width:100%;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
padding: 0px;
margin-left: 0px;
background: -moz-linear-gradient(center top, #c4d69f 0%,#ffffff 50%,#c4d69f 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #c4d69f),color-stop(0.5, #ffffff),color-stop(1, #c4d69f));
}
</style>
<div class="Horisontal-terang-tengah">TEKS DISINI</div>

Semoga bermanfaat,... sekian dari tintaQy.com