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 **

Komentar

Halaman Lainya

  • Cara membuat dan menyisipkan CSS
    Panduan Cara membuat dan menyisipkan CSS pada halaman web
  • Cara membuat css dengan dreamweaver
    Cara membuat css dengan dreamweaver sangat mudah, kita bisa gunakan beberapa cara dengan bantuan fitur yang tersedia dalam dreamweaver.
  • Mengatur gambar dengan css
    CSS berperan penting dalam menyajikan informasi dengan visual yang lebih baik, lebih optimal dari sisi penulisan serta lebih disenangi oleh mesin pencari. CSS dapat diterapkan hampir pada semua objek yang disisipkan dalam kode html baik itu tulisan, tabel dan gambar maupun objek lainya. Kali ini saya akan berbagi cara mengatur gambar dengan css agar dapat disajikan lebih hemat tempat dan hemat kode dan tentunya menarik.
  • 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.
  • Membuat header table pada tiap halaman cetak
    Format cetak laporan yang baik tentunya sangatlah penting dalam membuat sebuah aplikasi berbasi web. Biasanya laporan yang menampilkan banyak record disajikan dalam bentuk tabel dengan judul kolom berbeda.

Kiriman terbaru