Membuat gradiasi warna menggunakan css

Nah, untuk kali ini Saya akan membahas tentang cara pembuatan gradiasi warna dengan menggunakan css3. Disini Saya menggunakan dua warna dalam satu tampilan yaitu biru (blue) dan hijau (green), dimana warna gradiasinya akan bertemu di tengah sehingga membentuk warna baru hasil pertemuan kedua warna tersebut.

Pada css nya ada beberapa kode yang digunakan, agar sesuai atau kompatibel dengan browser yang digunakan. Karena untuk menampilkan pada setiap browser memerlukan kode yang berbeda. Nah, berikut ini beberapa kode yang bisa Anda gunakan untuk membuat gradiasi warna:

Kode css3 nya seperti ini:

<style>
#gradiasiWarna {
    height: 250px;
    background: -moz-linear-gradient(blue, green); /* firefox */    
    background: -webkit-linear-gradient(blue, green); /* safari */
    background: -o-linear-gradient(blue, green); /* opera */ 
    background: linear-gradient(blue, green); /* kode standar */  
}
</style>

Sedangkan untuk penerapannya dalam html 5, seperti ini:

<!DOCTYPE html>
<head>
<title>GRADIASI WARNA created by w3codez</title>
<style>
#gradiasiWarna {
    height: 250px;
    background: -moz-linear-gradient(blue, green); /* firefox */    
    background: -webkit-linear-gradient(blue, green); /* safari */
    background: -o-linear-gradient(blue, green); /* opera */ 
    background: linear-gradient(blue, green); /* kode standar */  
}
</style>
</head>
<body>
<div id="gradiasiWarna"></div>
</body>
<center>
<footer><a href="http://w3codez.blogspot.com">created by w3codez</a></footer>
</center>
</html>

Untuk kode 'background: linear-gradient(blue, green); /* kode standar */' yang ada pada css3 nya harus ditempatkan diurutan terakhir dari kode yang lainnya.

Nanti tampilannya akan seperti ini:

Sekian, semoga bermanfaat. Mohon maaf bila ada kesalahan.

Pages

w3codez

adchoices