Membuat background gradient dengan css3

gradient dengan css3Salah 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 **

Artikel Lainnya

  • Menyusun tampilan form tanpa perintah table
    Tabel dalam html biasanya digunakan untuk menyusun laporan atau membuat layout/tampilan elemen html agar terlihat lebih rapi. Pada tutorial kali ini saya akan berbagi tentang bagaimana Menyusun tampilan form input tanpa perintah table, tetapi menggunakan css. Teknik menyusun tampilan elamen html tanpa perintah tabel ini sering disebut dengan tableless (sedikit tabel).
  • Referensi warna untuk HTML dan CSS
    Warna yang terlihat disebuah website/blog sangatlah bervariasi dan memiliki daya tarik tersendiri terhadap pengunjung, pingin tau lengkap referensi warna untuk HTML maupun CSS, silahkan baca panduan berikut.
  • Membuat menu dengan CSS
    Membuat menu unik dengan mengunakan HTML + CSS. CSS menurut saya sebuah teknologi yang powerfull dalam menyusun tampilan sebuah web atau blog. Ini dibuktikan sekarang css terus dikembangkan dan digunakan hampir 99% pengembang web, yang 1% nya mungkin masih dalam tahap belajar.
  • Mengatur format tabel dengan css
    Anda mungkin sudah tidak asing lagi dengan css, yang umumnya digunakan untuk mengatur layout halaman web. Berikut ini saya akan berbagi tentang bagaimana mengatur format tabel dengan css. Pengaturan format tabel yang akan kita lakukan adalah mengganti warna tabel dan jenis tulisan pada tiap cell tabel. SIlahkan simak berikut ini..
  • Membuat header tetap diatas halaman
    Banyak variasi tampilan header atau footer yang digunakan untuk menghiasi halaman web dan dapat kita temukan diinternet, mulai dari yang sekedar tulisan judul, gambar logo sampai dengan model otomatis muncul dan hilang. Pada tulisan berikut ini, saya akan berbagi trick cara membuat header dan footer yang tetap diatas dan dibawah bagian halaman.

Kiriman terbaru