Pages

CSS Gradient Untuk Semua Browser

Pada Kesempatan Kali ini saya Akan Melanjutkan Pembuatan Background Keren Tanpa Gambar Yang Kemarin Sudah Saya Jelaskan Dan Sekarang Saya Akan Membuatnya Berfungsi Atau Support Di Semua Browser.

Berikut Contoh Beserta Kode CSS Yang Dipakai Untuk Semua Browser.

  • Background Gradient Dari Kiri
  • Kode/CSS Gradient:
    background: -moz-linear-gradient(left, #0dc3ff, #FFF); background: -webkit-gradient(linear, left center, right center, from(#0dc3ff), to(#FFF));
    Hasilnya:
  • Background Gradient Dari kanan
  • Kode/CSS Gradient:
    background: -moz-linear-gradient(right, #0dc3ff, #FFF); background: -webkit-gradient(linear, right center, left center, from(#0dc3ff), to(#fff));
    Hasilnya:

  • Background Gradient Dari Bawah
  • Kode/CSS Gradient:
    background: -moz-linear-gradient(top, #0dc3ff, #FFF); background: -webkit-gradient(linear, center top, center bottom, from(#0dc3ff), to(#FFF));
    Hasilnya:

  • Background Gradient Dari Atas
  • Kode/CSS Gradient:
    background: -moz-linear-gradient(bottom, #0dc3ff, #FFF); background: -webkit-gradient(linear, center bottom, center top, from(#0dc3ff), to(#FFF));
    Hasilnya:

  • Background Gradient Pelangi
  • Kode/CSS Gradient:
    background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); background: -webkit-gradient(linear, left center, right center, from(red), color-stop(14%, orange), color-stop(28%, yellow), color-stop(42%, green), color-stop(56%, blue), color-stop(70%, indigo), to(violet));
    Hasilnya:

  • Keterangan:
  • Dari Kode Dan Contoh Diatas Mungkin Sobat Blogger Bisa Memahaminya Dan Menkreasikannya Sendiri Dan Untuk Kode Yang Berwarna Merah Adalah Kode Yang Support Untuk Mozila Firefox Dan Untuk Kode Yang Berwarna Biru Adalah Kode Yang Support Untuk Google Chrome Dan Safari, Sebaiknya Dalam Pembentukan CSS Gradient Sobat Terapakan Saja Semua Kode Agar Support Untuk Semua Browser Dan Jangan Lupa Disetiap Kode Harus Ada Pointnya Dan untuk Memperjelas Keterangan Diatas Saya Berikan Rumus Berikut.
  • Firefox Linear gradients
  • -moz-linear-gradient(<point> || <angle>, color-stops)
  • Google Chrome Dan Safari Linear gradients
  • -webkit-gradient(linear, <point>, color-stops)
Demikian Tutorial Kali ini Dan Semoga Bermanfaat

Alfiona

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

No comments:

Post a Comment