deZige

Efek Blur Pada halaman Bawah Blog

Membuat efek blur pada bagian halaman bawah blog dengan CSS Gradient memberikan tampilan menarik ketika melakukan scroll halaman.

Efek Blur Pada halaman Bawah Blog

Cara Membuat efek blur pada halaman bawah blog dengan CSS gradient - Gaya ini bersifat statis (fixed) ketika scroll menggulung layar halaman blog akan terlihat samar tertutup blur gradient ini, efek ini terlihat manis walupun unsur utama hanya mengandalkan properti background berupa css gradient, untuk ketinggian blur ini bisa diatur pada properti height untuk mengkostumisai efek blur ini.

Efek Blur Pada Halaman Bawah Blog Dengan CSS Gradient

Pada css dibawah ini properti height menggunakan unit (%) untuk mempermudah penyesuaian terhadap ukuran layar yang berbeda, walaupun pada dasarnya bisa diukur dengan jenis unit lainnya seperti pt, px, em dll, kalian bisa merubah jenis unit ini sesuai dengan ukuran yang pas.

Penggunaan warna dasar pada css gradient menggunakan warna dasar hitam, walaupun begitu saya rasa cocok dipergunakan untuk template dengan background-background berwarna cerah, karena pada kode warna gradient menggunakan RGBA yang sudah mengandung opacity sebesar (0.65).

Letakan css dibawah ini dibawah <b:skin><![CDATA[ atau diatas ]]></b:skin> pada template.

CSS
body:before {
  height: 20%;
  width:100%;
  content: '';
  z-index: 9;
  bottom: 0;
  position: fixed;
  background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65)));
  background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
  background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
  background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
  background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );
}

Save template.

Sederhana namun memberikan efek tampilan yang cukup menarik.

3 comments:

  1. Sudah saya terapkan tutorialnya, tapi efek blurnya ga keluar. Mohon pencerahannya..! Terima kasih

    ReplyDelete
    Replies
    1. Maaf Mas css-nya ada yang kurang, sekarang sudah diperbaiki, terima kasih atas koreksinya :pc

      Delete
    2. Hatur nuhun master, it's work. Salam kenal.. :tp

      Delete

Terima Kasih Atas Komentar Anda

  • +Bagikan
  • +Admin

Kontak SosMed

.
deZige