Membuat Background Warna Gradient

Membuat Background Warna Gradient (Gradasi)

Membuat Background Warna Gradient (Gradasi) - Background menjadi salah satu hal penting bagi sebuah tampilan, karena sifat background ini bisa melengkapi dan bisa menjadi daya tarik tersendiri bagi pengunjung. Kita bisa membuat berbagai macam backgroundsemisal dengan menambahkan warna, gambar, atau keduanya. Namun ada cara yang lebih menarik lagi dalam mendesain background agar terlihat lebih bagus dan lebih menarik, yaitu dengan cara membuat background warna gradient. Untuk membuatnya kita bisa menggunakan kode html disertai selector CSS, atau bisa juga menggunakan CSS saja.

Berikut contohnya :

<div style="background: #000;
background: -moz-linear-gradient(top, #009900, #000000);
background: -ms-linear-gradient(top, #009900, #000000);
background: -o-linear-gradient(top, #009900, #000000);
background: -webkit-linear-gradient(top, #009900, #000000);
background: linear-gradient(top, #009900, #000000);
padding: 15px 5px 5px 5px; height: 80px;">
<center>CONTOH BACKGROUND WARNA GRADIENT</center>
</div>

Preview / hasilnya :

CONTOH BACKGROUND WARNA GRADIENT

Untuk contoh lainnya seperti berikut ini :

<div style="background: #009900;
background: -moz-linear-gradient(center top, black 20%, #009900 100%);
background: -ms-linear-gradient(center top, black 20%, #009900 100%);
background: -o-linear-gradient(center top, black 20%, #009900 100% );
background: -webkit-linear-gradient(center top, black 20%, #009900 100%);

background: linear-gradient(center top, black 20%, #009900 100%); 
padding: 65px 5px 5px 5px; height: 50px;">
<center>CONTOH KEDUA BACKGROUND WARNA GRADIENT</center>
</div>

Preview / hasilnya :

CONTOH KEDUA BACKGROUND WARNA GRADIENT

Note :
Kode yang saya blok dengan warna hijau adalah kode untuk membuat background warna gradient, sedangkan kode yang berwarna hijau bergaris bawah merupakan kode untuk menentukan warna background tetap apabila browser internet yang digunakan tidak support kode warna gradient tersebut. Silahkan ubah dan sesuaikan dengan selera anda.sumber : ngposta.blogspot.com