As-Salam. Ada blogger yang ingin tahu bagaimana nak buat bebayang pada satu kotak - yang selalunya diaplikasikan pada sesuatu imej. Seperti yang HH aplikasikan dalam blog ini, anda boleh nampak mana-mana entri yang ada gambar atau imej, imej tersebut nampak timbul ... perasan tak? Kalau tak perasan tu, maknanya anda perlu tukar monitor barulah tu .. dah rosak nampak gayanya.

Ok. Kalau nak tahu macamana nak buat efek sebegitu, caranya mudah sahaja. Anda hanya perlu tambah kod efek kotak bebayang tersebut pada kod paparan imej dalam html blog anda. Ia agak sedikit tricky kerana anda perlu tahu kod yang manakah yang membentuk penampilan gambar dalam blog anda.

Cara Buat Bebayang Pada Gambar Dalam Blog

Secara amnya, kotak bebayang itu boleh dibuat dengan menambahkan kod CSS berikut:


kod CSS di atas akan menghasilkan paparan kotak bebayang pada imej anda seperti ini:


Anda boleh ubah nilai-nilai pada CSS tersebut untuk lihat hasil-hasil yang lain. Secara teknikalnya, kod CSS box shadow tu bawa maksud begini - box shadow: offset melintang, offset menegak, nilai radius bebayang, jarak sebaran dan tentunya warna bebayang tersebut.

Kalau masukkan nilai bebayang tersebut terus dalam imej semasa anda tulis entri blog, boleh lakukan seperti ini:


Dan jika mahu ia melakukan pada semua imej dalam blog anda. Boleh cari kod html berikut a img dalam html blog anda, dan masukkan kod kotak bebayang seperti di bawah:


Cara ini akan membuatkan semua imej yang ada pautan akan punyai bebayang. Atau anda boleh buatkan kotak bebayang hanya untuk gambar yang dimuatkan dalam entri blog sahaja. Selalunya kod html tersebut boleh dicari dalam kod html blog ini - .post-body img dan anda boleh masukkan atau tambah kod kotak bebayang dalam kod html tersebut menjadi seperti ini:


Mudah je. Apa yang mungkin sukar bagi anda ialah menentukan kod html sebenar untuk gambar dalam entri. Dan seperti HH sampaikan dalam entri-entri lepas, anda perlu mencuba trial n error untuk tahu. 

Kotak bebayang seperti ini akan menyerlahkan gambar atau imej dalam blog, membuatkan ia nampak hidup atau timbul. Ia juga salah satu cara untuk cantikkan blog tanpa jejaskan loading blog kerana penggunaan CSS yang simple dan mudah.

Selamat mencuba. 

4 Ulasan

Komen adalah tanggungjawab anda. Tertakluk pada Akta 588 SKMM. Untuk pengiklanan, boleh email ke editor@hasrulhassan.com.

Catat Ulasan

Komen adalah tanggungjawab anda. Tertakluk pada Akta 588 SKMM. Untuk pengiklanan, boleh email ke editor@hasrulhassan.com.

Terbaru Lebih lama

Advertisement

Bisnes Shopee

Advertisement

BERMASALAH DENGAN HARTA PUSAKA?

Panduan Mengurus Harta Pusaka dan Hibbah. - Nak Tahu? Klik Sini Sekarang!!


Advertisement