akan bagikan Membuat background efek Gradiasi atau gradient dengan CSS3. bagaimana cara membuat efek gradasi atau gradient untuk blog? jawabannya ada di sini nih. hehehehe. pertama-tama perkenalan dulu ya. ok ok.
CSS3 bisa dikatakan sebagai teknologi kembangan yang sudah tidak asing lagi dikalangan para pembuat | pembangun 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 bagus, 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 alternatif seperti text atau efek css.
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.
Fitur unggulan dari css3 adalah kemampuanya membuat warna latar/background gradient atau gradasi. Gradient atau gradasi adalah perubahan warna dari satu warna ke warna lainya yang dilakukan secara teratur. Gradient atau gradasi 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, corel draw dan masih banyak lagi. Pada artikel ini saya akan berbagi tentang bagaimana membuat latar belakang gradient menggunakan css3.
langsung aja ke inti artikel yaitu bagaimana membuat background gradient atau gradasi 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(#2400ff), color-stop(0.05, #fff600), color-stop(0.5, #2400ff), color-stop(0.95, #fff600), to(#2400ff));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(left, #2400ff, #fff600 5%, #2400ff, #fff600 95%, #2400ff);
/* Firefox 3.6+ */
background: -moz-linear-gradient(left, #2400ff, #fff600 5%, #2400ff, #fff600 95%, #2400ff);
/* IE 10 */
background: -ms-linear-gradient(left, #2400ff, #fff600 5%, #2400ff, #fff600 95%, #2400ff);
/* Opera 11.10+ */
background: -o-linear-gradient(left, #2400ff, #fff600 5%, #2400ff, #fff600 95%, #2400ff);
}
#contoh2 {
/* fallback DIY*/
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, left top, right top, from(#2400ff), color-stop(0.25, #fff600), color-stop(0.5, #2400ff), color-stop(0.75, #fff600), to(#2400ff));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(left, #2400ff, #fff600, #2400ff, #fff600, #2400ff);
/* Firefox 3.6+ */
background: -moz-linear-gradient(left, #2400ff, #fff600, #2400ff, #fff600, #2400ff);
/* IE 10 */
background: -ms-linear-gradient(left, #2400ff, #fff600, #2400ff, #fff600, #2400ff);
/* Opera 11.10+ */
background: -o-linear-gradient(left, #2400ff, #fff600, #2400ff, #fff600, #2400ff);
}
#contoh3 {
/* fallback */
background-color: #fff600;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, left top, right top, from(#fff600), to(#2400ff));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(left, #2400ff, #fff600);
/* Firefox 3.6+ */
background: -moz-linear-gradient(left, #2400ff, #fff600);
/* IE 10 */
background: -ms-linear-gradient(left, #2400ff, #fff600);
/* Opera 11.10+ */
background: -o-linear-gradient(left, #2400ff, #fff600);
}
#contoh4 {
/* fallback */
background-color: #fff600;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff600), to(#2400ff));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #2400ff, #fff600);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #2400ff, #fff600);
/* IE 10 */
background: -ms-linear-gradient(top, #2400ff, #fff600);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #2400ff, #fff600);
}
#contoh5 {
/* fallback */
background-color: #2400ff;
/* Safari 4-5, Chrome 1-9 */
/* Can't specify a percentage size? Laaaaaame. */
background: -webkit-gradient(radial, center center, 0, center center, 460, from(#fff600), to(#2400ff));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-radial-gradient(circle, #fff600, #2400ff);
/* Firefox 3.6+ */
background: -moz-radial-gradient(circle, #fff600, #2400ff);
/* IE 10 */
background: -ms-radial-gradient(circle, #fff600, #2400ff);
/* Opera cannot do radial gradients yet */
}
#contoh6 {
/* fallback */
background-color: #2400ff;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(radial, 80% 20%, 0, 80% 40%, 100, from(#fff600), to(#2400ff));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-radial-gradient(80% 20%, closest-corner, #fff600, #2400ff);
/* Firefox 3.6+ */
background: -moz-radial-gradient(80% 20%, closest-corner, #fff600, #2400ff);
/* IE 10 */
background: -ms-radial-gradient(80% 20%, closest-corner, #fff600, #2400ff);
/* Opera cannot do radial gradients yet */
}
</style>
Contoh Kode HTML 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(#2400ff), color-stop(0.05, #fff600), color-stop(0.5, #2400ff), color-stop(0.95, #fff600), to(#2400ff)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(left, #2400ff, #fff600 5%, #2400ff, #fff600 95%, #2400ff); /* Firefox 3.6+ */ background: -moz-linear-gradient(left, #2400ff, #fff600 5%, #2400ff, #fff600 95%, #2400ff); /* IE 10 */ background: -ms-linear-gradient(left, #2400ff, #fff600 5%, #2400ff, #fff600 95%, #2400ff); /* Opera 11.10+ */ background: -o-linear-gradient(left, #2400ff, #fff600 5%, #2400ff, #fff600 95%, #2400ff); } #contoh2 { /* fallback DIY*/ /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, left top, right top, from(#2400ff), color-stop(0.25, #fff600), color-stop(0.5, #2400ff), color-stop(0.75, #fff600), to(#2400ff)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(left, #2400ff, #fff600, #2400ff, #fff600, #2400ff); /* Firefox 3.6+ */ background: -moz-linear-gradient(left, #2400ff, #fff600, #2400ff, #fff600, #2400ff); /* IE 10 */ background: -ms-linear-gradient(left, #2400ff, #fff600, #2400ff, #fff600, #2400ff); /* Opera 11.10+ */ background: -o-linear-gradient(left, #2400ff, #fff600, #2400ff, #fff600, #2400ff); } #contoh3 { /* fallback */ background-color: #fff600; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, left top, right top, from(#fff600), to(#2400ff)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(left, #2400ff, #fff600); /* Firefox 3.6+ */ background: -moz-linear-gradient(left, #2400ff, #fff600); /* IE 10 */ background: -ms-linear-gradient(left, #2400ff, #fff600); /* Opera 11.10+ */ background: -o-linear-gradient(left, #2400ff, #fff600); } #contoh4 { /* fallback */ background-color: #fff600; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff600), to(#2400ff)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(top, #2400ff, #fff600); /* Firefox 3.6+ */ background: -moz-linear-gradient(top, #2400ff, #fff600); /* IE 10 */ background: -ms-linear-gradient(top, #2400ff, #fff600); /* Opera 11.10+ */ background: -o-linear-gradient(top, #2400ff, #fff600); } #contoh5 { /* fallback */ background-color: #2400ff; /* Safari 4-5, Chrome 1-9 */ /* Can't specify a percentage size? Laaaaaame. */ background: -webkit-gradient(radial, center center, 0, center center, 460, from(#fff600), to(#2400ff)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-radial-gradient(circle, #fff600, #2400ff); /* Firefox 3.6+ */ background: -moz-radial-gradient(circle, #fff600, #2400ff); /* IE 10 */ background: -ms-radial-gradient(circle, #fff600, #2400ff); /* Opera cannot do radial gradients yet */ } #contoh6 { /* fallback */ background-color: #2400ff; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(radial, 80% 20%, 0, 80% 40%, 100, from(#fff600), to(#2400ff)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-radial-gradient(80% 20%, closest-corner, #fff600, #2400ff); /* Firefox 3.6+ */ background: -moz-radial-gradient(80% 20%, closest-corner, #fff600, #2400ff); /* IE 10 */ background: -ms-radial-gradient(80% 20%, closest-corner, #fff600, #2400ff); /* Opera cannot do radial gradients yet */ } </style>
<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>
warna bisa diubah ubah sesuai keinginan kalian lho. penggantian warna bisa lihat di photoshop atau coreldraw atau kode warna lainnya. terimakasih.
Description : Membuat background efek Gradiasi atau gradient dengan CSS3 – ninosaji bloggers akan bagikan Membuat background efek Gradiasi atau gradient...
