Modifikasi ini memang merupakan sesuatu yang sangat sederhana, namun Saya rasa cukup efektif untuk membuat imbas halaman blog yang artistik. Saya menggunakan metode CSS Pseudo-Element
:before
untuk membuat elemen palsu yang tampak sebagai sebuah layer gradient di sebelah bawah layar. Cara ini tentunya lebih mudah kalau dibandingkan membuat elemen dengan meyertakan tag <div>
atau <span>
di dalam template:Caranya sangat sederhana. Cukup salin aba-aba CSS di bawah ini lalu letakkan sempurna di atas aba-aba
]]></b:skin>
atau </style>
:html:before { content:''; position:fixed; z-index:5; bottom:0; width:100%; height:100px; background:transparent; background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(100%, #000000)); /* Chrome,Safari4+ */ background:-webkit-linear-gradient(top, rgba(0,0,0,0) 0%, #000000 100%); /* Chrome10+,Safari5.1+ */ background:-moz-linear-gradient(top, rgba(0,0,0,0) 0%, #000000 100%); /* FF3.6+ */ background:-ms-linear-gradient(top, rgba(0,0,0,0) 0%, #000000 100%); /* Opera11.10+ */ background:-o-linear-gradient(top, rgba(0,0,0,0) 0%, #000000 100%); /* IE10+ */ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='transparent', endColorstr='#000000', GradientType=0); /* IE6-9 */ background:linear-gradient(top, rgba(0,0,0,0) 0%, #000000 100%); /* W3C */ }
Samakan semua aba-aba warna yang Saya beri warna merah dengan dominasi warna latar belakang blogmu. Di sini Saya menggunakan blog dengan warna latar belakang hitam, oleh alasannya itu Saya menggunakan warna
#000000
sebagai warna gradient akhir. Jika blogmu memiliki latar belakang putih, ganti semua aba-aba #000000
dengan #ffffff
. Namun, kalau latar belakang blogmu berwarna selain putih dan hitam, caranya jadi sedikit lebih rumit.Umumnya, warna lebih banyak didominasi dalam sebuah template sanggup ditemukan dalam selektor
body {}
menyerupai ini:body {
...
...
background: #123456;
...
...
...
...
}
Nah, kau sanggup menggunakan aba-aba tersebut untuk menggantikan warna
#000000
.Selesai! Sumber https://www.dte.web.id/