Membuat background gradient dengan css3
Salah satu fitur unggulan yang dihadirkan pada teknologi css3 adalah kemampuanya membuat warna latar/background gradient. Gradient adalah perubahan warna dari satu warna ke warna lainya yang dilakukan secara teratur. Gradient lebih identik pada hasil gambar yang diciptakan melalui proses penempatan kombinasi beberapa warna yang memenuhi sebuah area gambar. Biasanya untuk menghasilkan gambar gradient digunakan aplikasi pengolah gambar seperti photoshop, atau corel draw. Pada artikel ini saya akan berbagi tentang bagaimana membuat latar gradient dengan css3.
CSS3 bisa dikatakan sebagai teknologi kembangan yang sudah tidak asing lagi dikalangan para pembuat web (web developer) atau juga para blogger sejati. Karena css3 mampu memberikan nuansa berbeda pada tampilan sebuah web/blog yang dihasilkan. Banyak optimalisasi yang dapat dilakukan dengan css3 bukan hanya sekedar tampilan yang yahui, keren, indah, dan mengagumkan tapi juga dalam hal kecepatan loading serta optimalisasi mesin mencari (seo).
Contoh optimalisasi yang dapat dilakukan seperti meminimalkan penggunaan gambar yang berdampak minimalnya objek yang dikirimkan ke pengunjung, yang otomatis juga berdampak meningkatnya kecepatan tampilnya sebuah halaman. Saya pribadi menyarankan penggunaan gambar jika dihitung persentasi harus dibawah 50% sisanya menggunakan teknologi/objek laternatif seperti text atau efek css.
hwa sebelum adanya css3, semua objek yang tidak bisa dilakukan dengan css1 atau css2 digantikan oleh gambar. Misal untuk membuat kotak dengan sudut tumpul (rounded), lingkaran, dan juga warna gradient.
Maaf kalau intronya terlalu panjang, langsung aja ke inti artikel yaitu bagaimana membuat background gradient dengan css3 sebagai alternatif cara lama dengan gambar. Karena css3 ini tergolong baru maka belum ada standarisasi penggunaan perintah css3 yang kompatibel bisa dijalankan semua browser jadi harus dideklasrasikan dengan cara berbeda2 bahkan jangan kaget ada beberapa browser tidak bisa menampilkan hasil yang sesuai. mari kita lihat contoh kode css3 berikut :
CONTOH 1
CONTOH 2
CONTOH 3
CONTOH 4
CONTOH 5
CONTOH 6
Kode css3 untuk membuat warna gradient
<style type="text/css">
div { height:100px; margin:5px; }
#contoh1 h3,#contoh2 h3,#contoh3 h3,#contoh4 h3,#contoh5 h3,#contoh6 h3 {text-align:center;color:#fff;}
#contoh1 {
/* fallback DIY*/
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.05, #32cd32), color-stop(0.5, #2F2727), color-stop(0.95, #32cd32), to(#2F2727));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(left, #2F2727, #32cd32 5%, #2F2727, #32cd32 95%, #2F2727);
/* Firefox 3.6+ */
background: -moz-linear-gradient(left, #2F2727, #32cd32 5%, #2F2727, #32cd32 95%, #2F2727);
/* IE 10 */
background: -ms-linear-gradient(left, #2F2727, #32cd32 5%, #2F2727, #32cd32 95%, #2F2727);
/* Opera 11.10+ */
background: -o-linear-gradient(left, #2F2727, #32cd32 5%, #2F2727, #32cd32 95%, #2F2727);
}
#contoh2 {
/* fallback DIY*/
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.25, #32cd32), color-stop(0.5, #2F2727), color-stop(0.75, #32cd32), to(#2F2727));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(left, #2F2727, #32cd32, #2F2727, #32cd32, #2F2727);
/* Firefox 3.6+ */
background: -moz-linear-gradient(left, #2F2727, #32cd32, #2F2727, #32cd32, #2F2727);
/* IE 10 */
background: -ms-linear-gradient(left, #2F2727, #32cd32, #2F2727, #32cd32, #2F2727);
/* Opera 11.10+ */
background: -o-linear-gradient(left, #2F2727, #32cd32, #2F2727, #32cd32, #2F2727);
}
#contoh3 {
/* fallback */
background-color: #32cd32;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, left top, right top, from(#32cd32), to(#2F2727));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(left, #2F2727, #32cd32);
/* Firefox 3.6+ */
background: -moz-linear-gradient(left, #2F2727, #32cd32);
/* IE 10 */
background: -ms-linear-gradient(left, #2F2727, #32cd32);
/* Opera 11.10+ */
background: -o-linear-gradient(left, #2F2727, #32cd32);
}
#contoh4 {
/* fallback */
background-color: #32cd32;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#32cd32), to(#2F2727));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #2F2727, #32cd32);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #2F2727, #32cd32);
/* IE 10 */
background: -ms-linear-gradient(top, #2F2727, #32cd32);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #2F2727, #32cd32);
}
#contoh5 {
/* fallback */
background-color: #2F2727;
/* Safari 4-5, Chrome 1-9 */
/* Can't specify a percentage size? Laaaaaame. */
background: -webkit-gradient(radial, center center, 0, center center, 460, from(#32cd32), to(#2F2727));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-radial-gradient(circle, #32cd32, #2F2727);
/* Firefox 3.6+ */
background: -moz-radial-gradient(circle, #32cd32, #2F2727);
/* IE 10 */
background: -ms-radial-gradient(circle, #32cd32, #2F2727);
/* Opera cannot do radial gradients yet */
}
#contoh6 {
/* fallback */
background-color: #2F2727;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(radial, 80% 20%, 0, 80% 40%, 100, from(#32cd32), to(#2F2727));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-radial-gradient(80% 20%, closest-corner, #32cd32, #2F2727);
/* Firefox 3.6+ */
background: -moz-radial-gradient(80% 20%, closest-corner, #32cd32, #2F2727);
/* IE 10 */
background: -ms-radial-gradient(80% 20%, closest-corner, #32cd32, #2F2727);
/* Opera cannot do radial gradients yet */
}
</style>
Contoh Kode HTML
<div id="contoh1"> <h3>CONTOH 1</h3> </div> <div id="contoh2"> <h3>CONTOH 2</h3> </div> <div id="contoh3"> <h3>CONTOH 3</h3> </div> <div id="contoh4"> <h3>CONTOH 4</h3> </div> <div id="contoh5"> <h3>CONTOH 5</h3> </div> <div id="contoh6"> <h3>CONTOH 6</h3> </div>
Demo bisa dilihat disini, kalo mau download bisa disini.
Semoga bermanfaat, silahkan berbagi informasi dengan teman anda dengan tombol sosial dibawah dan jangan lupa dapatkan informasi artikel terbaru saya dengan menekan like blog zainalhakim.web.id
Zainal Hakim
** Bebas disunting dengan menyebutkan sumber **
