Menghias blog dengan linear gradient dan css3

     Dalam melakukan Blog Walking, mungkin anda pernah melihat tampilan blog yang warnanya indah bercampur-campur. Entah itu dibagian menubar, background atau yang lainnya.
      Di sini, MyBlog19 akan menjelaskan tutorial membuatnya.
       
Membuat Gradasi Warna dengan Linear Gradient
      
     Pertama kali yang kita bahas adalah hiasan gradasi warna.
       
» Pertama-tama, buka situs Blogger
» Lalu Login ke akun anda
» Jika sudah, pilih submenu "Tema"
» Klik "Edit Template"
» Lalu salinlah kode berikut ini. Tapi perlu anda ketahui, anda juga dapat mengkreasikannya sesuai apa yang ingin anda inginkan. Tapi salinlah dulu kode di bawah ini.

background:#0F466E;
background:-webkit-linear-gradient(right,#3498db 50%,#3dd4af 50%);
background:-moz-linear-gradient(right,#3498db 50%,#3dd4af 50%);
background:-o-linear-gradient(right,#3498dbE 50%,#3dd4af 50%);
background:-ms-linear-gradient(right,#3498db 50%,#3dd4af 50%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3dd4af',endColorstr='#3498db',GradientType=1);
color: #fff;
-webkit-box-shadow: 0 3px 10px 0 rgba(0,0,0,0.2);
box-shadow: 0 3px 10px 0 rgba(0,0,0,0.2);
         
Catatan:
~ Kode #3498db dan #3dd4af adalah kode warna hijau dan biru. Anda dapat mengganti warnanya dengan warna yang anda sukai. Dengan cara mengganti semua kode #3498db dan #3dd4af dengan kode warna anda.
        
» Lalu tempelkan ke bagian yang ingin kamu pasangkan Linear Gradient dengan cara mengganti kode css backgroundnya. Misalnya saya ingin memasangkannya di Menubar.
     
Kode awalnya :
       
.vienna-menulite li li a:hover {background:#0ebffe;color:#fff;}
      
Kurang lebih hasilnya akan menjadi seperti ini:
   
.vienna-menulite li li a:hover {background:#0F466E;
background:-webkit-linear-gradient(right,#3dd4af 0%,#3498db 75%);
background:-moz-linear-gradient(right,#3dd4af 0%,#3498db 75%);
background:-o-linear-gradient(right,#3dd4afE 0%,#3498db 75%);
background:-ms-linear-gradient(right,#3dd4af 0%,#3498db 75%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3dd4af',endColorstr='#3498db',GradientType=1);
color: #fff;
-webkit-box-shadow: 0 3px 10px 0 rgba(0,0,0,0.2);
box-shadow: 0 3px 10px 0 rgba(0,0,0,0.2);color:#fff;}
         

Dan selalu ingat ! Anda hanya perlu mengutak-atik kode CSS saja, bukan kode lain.

Ditulis oleh : Reno Apriliyandi

Bagikan

Baca Juga