Cara Membuat Gradasi Warna di Blogger Support Semua Browser

Cara Membuat Gradasi Warna di Blogger Support Semua Browser

Perlu sobat ketuhui terlebih dahulu beberapa type browser yang sampai saat ini masih banyak dipakai orang-orang :

1. Firefox 3.6
   Browser ini sudah diklaim sebagai browser terbaik sedunia, karena dia dapat memproses data 15x lebih cepat dari pada browser pada umunya. Dalam sepekan setelah rilis, dia sudah lebih dari 17 juta kali di unduh. Hingga saat ini masih banyak orang yang memakai browser ini pada versi 3.6.2 yang mempunyai keamanan yang stabil.
2. Safari 4
   Browser ini juga tidak kalah loh banyak dipakai pengguna mac, karena pada versi ini browser tersebut sudah mendapat banyak plugin yang dapat di pasang, selain itu juga sangat stabil pada performa browser tersebut membuat para pengguna tidak beralih ke versi selanjutnya.
3. Opera 11.10
   Salah satu versi opera ini juga memiliki fitur speed dial dan opera turbo. Speed dial berfungsi untuk mempermudah sobat untuk mengakses situs favorit sobat, sedangkan opera turbo berfungsi untuk mempercepat pemuatan web hingga 40 kali lipat keren kan. Tak heran jika browser ini masih banyak dipakai orang-orang ya sob.

Ketiga pada type browser diatas pastinya perlu kita perhatikan juga ya, karena cara pemasangan css gradasi warna pada ketiga browser tersebut berbeda beda. Langsung saja kita mulai ke tutorial cara pemasangan.

Cara ini bisa diterapkan untuk semua platform website ya sob, seperti, Blogger, WordPress, Weebly, Joomla dan sebagainya. Tinggal sobat menambahkan kode css berikut ini pada settingan masing masing.

Cara Membuat Gradasi Warna di Blogger Support Semua Browser

Pertama silahkan sobat buat class css terlebih dahulu, misalnya mimin membuat .gradient {}
Lalu salin css gradasi warna support all browser dibawah ini, dan tempel pada class css yang telah kita buat tadi, atau tempel ditempat yang ingin sobat tampilkan gradientnya ya.

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

Silahkan ganti warna hex #d2ff582 dan #91e8842 sesuai warna gradasi yang sobat inginkan. Sobat juga dapat menggunakan Color Pallete untuk mempermudah sobat mencari perpaduan warna yang pas.

Kode diatas hasilnya akan seperti ini ini ya :

Bila sobat kebingungan, illustrasi pemasangannya seperti ini :
.header {kode css gradasi warna diatas}
#footer {kode css gradasi warna diatas}

Selain itu sobat juga dapat membuat kode css gradasi warna dengan mudah menggunakan tool gratis “Gradient CSS Generator” dengan mengunjungi situs dibawah ini :

Beberapa variasi pseudo css gradasi warna yang digunakan untuk mendukung semua browser :

1. -moz-linear-gradient
   Ini juga digunakan untuk mendukung gradasi warna pada browser Mozilla Firefox mulai versi 3.9 keatas.
2. -webkit-gradient
   Digunakan untuk mendukung gradasi warna pada browser Chrome dan Safari versi 4 – 5.0.
3. -webkit-linear-gradient
   Ini juga digunakan untuk mendukung gradasi warna pada browser Google Chrome versi 11 keatas dan Safari versi 6.1 keatas.
4. -o-linear-gradient
   Ini juga digunakan untuk mendukung gradasi warna pada browser Opera versi 13.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 tersebut kita sudah hampir mendukung kesulurahan browser yang digunakan pada saat ini. Teknik CSS gradasi warna seperti ini sudah saya terapkan pada template terbaru saya, yaitu Bravo AMP Template.

Demikian penjelasan singkat dari mimin mengenai Cara Membuat Gradasi Warna di Blogger Support Semua Browser. Semoga dapat bermanfaat bagi sobat semua, selamat mencoba 🙂