Lik Sod Seorang blogger pemula. Suka berbagi hal-hal yang diketahui dan dianggap perlu. Motto hidupnya dalah: sekecil apapun, hidup harus memberi manfaat. Blog ini adalah upaya memberi manfaat kepada orang lain melalui blog.

Cara Membuat Gradasi Warna di Blog Support Semua Browser

cara-membuat-gradasi-warna-di-blog-support-semua-browser

Cara membuat gradasi warna di blog yang support di semua browser – Warna merupakan bagian penting untuk tampilan blog, baik platform blogspot maupun wordpress. Pewarnaan yang pas bisa akan membuat blog semakin elegan dan keren.

Saat ini artikel tentang cara membuat gradasi warna di blog yang mendukung seluruh browser banyak dicari blogger. Karena memang, sepertinya lagi ngetren menampilkan blog dengan theme atau tema yang mempunyai gradasi warna. Banyak blog yang tampilan header dan menunya dengan gradasi warna yang menarik bahkan terkadang ada animasinya.

Gradasi warna atau color gradient, menurut saya, memang bisa membuat blog tampak hidup dan enak dipandang. Satu hal yang perlu diperhatikan adalah CSS gradasi warna yang diterapkan harus menyesuaikan dengan browser agar bisa support. Maka dari itu, jika hendak memasang CSS gradasi warna harus memperhatikan kompatibilitas di berbagai browser.

Baca juga: Membuat Sitemap Di Halaman Static Blogger AMP

Ada beberapa type browser yang hingga sekarang ini banyak digunakan untuk browsing :

Firefox 3.6

Firefox 3.6 diklaim sebagai browser yang terbaik. Kecepatan yang dimiliki untuk memproses data adalah 15x lebih cepat daripada browser lainnya. Versi terbaru sesudah sepekan dirilis, sudah 17 juta kali didownload.

Safari 4

Safari 4 banyak digunakan oleh pengguna mac. Pada versi barunya, Safari 4 telah support dengan banyak plugin yang bisa di-install. Keunggulan browser ini adalah stabilitas performanya.

Opera 11.10

Opera 11.10 mempunyai fitur speed dial dan opera turbo. Fitur speed dial bermanfaat untuk mempermudah dalam mengakses situs favorit. Adapun opera turbo berguna dalam mempercepat proses loading web yang katanya bisa mencapai 40 kali lipat.

Ketiga type browser tersebut penting untuk perhatikan. Pembuatan script css gradasi warna harus memperhatikan karakteristk ketiga browser tersebut, yang pasti berbeda satu sama lain.

Cara membuat gradasi warna di blog agar kompatible dengan semua browser

Berikut ini adalah cara membuat gradasi warna di blog yang support di semua browser:
1. Buatlah class css terlebih dahulu, misalnya dengan membuat .gradient {}
2. Copy css gradasi warna support semua browser berikut ini dan kemudian paste di class css yang sudah dibuat sebelumnya.

[css] background: #d2ff52;/* Old Browsers */
background: -moz-linear-gradient(left, #d2ff52 0%, #91e842 100%); /* FF3.6+ */
background: -webkit-gradient(left top, right top, color-stop(0%, #d2ff52), color-stop(100%, #91e842));/* Chrome, Safari4+ */
background: -webkit-linear-gradient(left, #d2ff52 0%, #91e842 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #d2ff52 0%, #91e842 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #d2ff52 0%, #91e842 100%); /* IE 10+ */
background: linear-gradient(to right, #d2ff52 0%, #91e842 100%);/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#d2ff52′, endColorstr=’#91e842′, GradientType=1 );/* IE6-9 */
[/css]

Anda bisa mengganti warna hex #d2ff52 dan #91e842 sesuai selera gradasi diinginkan. Untuk memudahkan menentukan warna gradasi bisa digunakan aplikasi Color Pallete.

Baca juga: Aplikasi Smartphone Pendeteksi Diabetes

Anda bisa menerapkan gradasi warna di blog pada bagian header maupun footer. Meskipun bisa juga pada bagian lainnya. Illustrasi pemasangannya akan tampak seperti di bawah ini :

.header {kode css gradasi warna diatas}
#footer {kode css gradasi warna diatas}

Akan sangat dengan mudah jika membuat script css gradasi warna memanfaatkan tool gratis “Gradient CSS Generator“. Tool ini bisa digunakan dengan sebelumnya mengunjungi situs :

https://cssmatic.com/gradient-generator

Variasi pseudo css gradasi warna yang bisa digunakan agar kompatibel di semua jenis browser adalah :

  1. -moz-linear-gradient
    Digunakan untuk mendukung gradasi warna pada browser Mozilla Firefox mulai versi 3.6 keatas.
  2. -webkit-gradient
    Digunakan untuk mendukung gradasi warna pada browser Chrome dan Safari versi 4 – 5.0.
  3. -webkit-linear-gradient
    Digunakan untuk mendukung gradasi warna pada browser Chrome versi 10 keatas dan Safari versi 5.1 keatas.
  4. -o-linear-gradient
    Digunakan untuk mendukung gradasi warna pada browser Opera versi 11.10 keatas.
  5. -ms-linear-gradient
    Digunakan untuk mendukung gradasi warna pada browser Internet Explorer versi 10 keatas.
  6. linear-gradient
    Standart css gradasi warna yang dipatenkan oleh W3C, digunakan di browser yang menganut W3C.
  7. filter: progid:DXImageTransform.Microsoft.gradient
    Digunakan untuk mendukung gradasi warna pada browser Internet Explorer versi 6 – 9.

Dengan ke 7 pseudo css diatas, gradasi warna atau color gradient yang dihasil kompatibel dan support hampir di semua browser yang digunakan sekarang.

Demikian Info Blogger tentang cara Membuat Gradasi Warna di Blog yang support atau kompatibel di semua browser.

Lik Sod Seorang blogger pemula. Suka berbagi hal-hal yang diketahui dan dianggap perlu. Motto hidupnya dalah: sekecil apapun, hidup harus memberi manfaat. Blog ini adalah upaya memberi manfaat kepada orang lain melalui blog.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *