Beranda
CSS

Cara Membuat Gradasi Warna di Blog Support Semua Browser

Cara Membuat Gradasi Warna di Blog Support Semua Browser - Warna merupakan unsur yang sangat penting dalam tampilan sebuah blog, warna dapat membuat suatu blog semakin keren tanpa memberatkan blog itu sendiri. Saya membuat artikel ini dilatar belakangi oleh maraknya penggunaan gradasi warna pada background blog.

Baca juga Membuat Background Warna Gradasi Bergerak (Animasi) di Blog.

Gradasi warna (color gradient) dapat membuat blog semakin hidup dan semakin keren untuk dipandang. Namun dalam pemasangan CSS gradasi warna ini anda harus betul betul memperhatikan browser yang dipakai oleh pengunjung anda, pengunjung anda tidak mungkin berkunjung hanya dari satu browser yang sama, pasti berkunjung dari berbagai browser yang berbeda, mulai dari versi yang lama hingga versi yang terbaru, oleh karena itu anda harus memasang CSS gradasi warna dengan tepat agar support di berbagai browser.

Perlu anda ketuhui terlebih dahulu beberapa type browser yang sampai saat ini masih banyak dipakai orang :
  1. Firefox 3.6
    Browser ini 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 download. Hingga saat ini masih banyak orang yang memakai browser ini pada versi 3.6.2 yang mempunyai keamanan stabil.
  2. Safari 4
    Browser ini banyak dipakai pengguna mac, karena pada versi ini browser tersebut sudah mendapat banyak plugin yang dapat di pasang, selain itu stabilnya performa pada browser tersebut membuat para pengguna tidak beralih ke versi selanjutnya.
  3. Opera 11.10
    Salah satu versi opera yang memiliki fitur speed dial dan opera turbo. Speed dial berfungsi untuk mempermudah anda untuk mengakses situs favorit anda, sedangkan opera turbo berfungsi untuk mempercepat pemuatan web hingga 40 kali lipat. Tak heran jika browser ini masih banyak dipakai orang.
Ketiga type browser diatas tentunya perlu kita perhatikan, karena cara pemasangan css gradasi warna pada ketiga browser tersebut berbeda beda. Langsung saja kita ke cara pemasangan.

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

Cara Membuat Gradasi Warna di Blog Support Semua Browser

Pertama silahkan buat class css terlebih dahulu, misalnya saya 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 anda tampilkan gradientnya.
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 #d2ff52 dan #91e842 sesuai warna gradasi yang kalian inginkan. Anda juga dapat menggunakan Color Pallete untuk mempermudah anda mencari perpaduan warna yang pas.

Kode diatas hasilnya akan seperti ini :


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

Selain itu anda juga dapat membuat kode css gradasi warna dengan mudah menggunakan tool gratis "Gradient CSS Generator" dengan mengunjungi situs dibawah ini :
https://cssmatic.com/gradient-generator

Beberapa variasi pseudo css gradasi warna yang digunakan untuk mendukung semua browser :
  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 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 saya mengenai Cara Membuat Gradasi Warna di Blog Support Semua Browser. Semoga dapat bermanfaat bagi anda semua, selamat mencoba :)

Posting Komentar