Menerapkan Efek Pada Sebuah Element Dengan Box Shadow
Menerapkan Efek Pada Sebuah Element Dengan Box Shadow - Anda pasti pernah melihat suatu web/blog yang terkadang ada bayangan pada images ada juga sisi-sisi halamannya yang melengkung dan masih banyak lagi.
Untuk membuat trik efek bayangan pada suatu element blog ternyata tidak sulit, kita hanya perlu mengetahui kode element HTML pada template kita saja, misalkan contoh element HTML yang saya maksud seperti ini:
#sidebar-wrapper, #FeaturedPost1,.post h1.post-title dst..Di atas merupakan gambaran saja karena tidak semua kode html setiap template itu sama. Intinya hal yang harus kamu ketahui ialah mengenal bagian-bagian dari element html template kamu sendiri.
Agar tidak pusing dengan materi ini kita langsung saja tahap penerapannya sebab saya juga masih belajar dan hanya mencoba berbagi apa yang saya ketahui dan sudah saya terapkan pada blog ini.
Pertama tentukan dulu element apa yang ingin kamu berikan efek box shadow, sebagai contoh saya akan memberi sentuhan box shadow pada widget Featured Post. Perhatikan gambar berikut (klik untuk perbesar) untuk demo featured post silahkan lihat pada homepage blog ini.
Pada gambar tersebut terlihat sebuah bayangan efek dengan sentuhan box shadow-border-radius dan untuk membuat element pada Featured post tadi seperti gambar saya harus menemukan CSS Featured post dari template saya, kurang lebih seperti ini.
#FeaturedPost1{background:#f7f9f8;padding:0;margin:0 0 20px 0;box-shadow:0 5px 0 rgba(0,0,0,.05),0 3px 3px rgba(0,0,0,.05);font-family:Arial;font-size:22px;position:relative;border-radius: 0px 0px 40px 20px;}}Perhatikan kode yang saya Marking kuning, itulah kode box shadow yang saya gunakan untuk membuat efek pada widget Featured Post yang saya gunakan pada blog ini.
kamu hanya perlu menambahakan kode tersebut atau bisa edit dengan mengubah nomor yang ada dalam css box shadow atau langsung copy saja jika mau menggunakannya.
Tutorial blog kali ini hanya sebagai gambaran saja bagaimana memberi efek box shadow pada element yang kita inginkan. Selanjutnya anda hanya tinggal kreasikan sendiri bagian-bagian yang ingin diberi sentuhan box shadow.
Selamat mencoba.
Jejak Unik
Kumpulan Informasi Unik Menarik Dari Berbagai Belahan Dunia. www.jejakunik.com