Cara Buat Bebayang Pada Gambar Dalam Blog

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:

box-shadow: 3px 3px 10px 5px #000;

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:

<img src="link imej anda" style="box-shadow: 3px 3px 10px 5px #000;" />

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:

a img {border-width:0;box-shadow: 3px 3px 10px 5px #000;}

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:

.post-body img {box-shadow: 0px 6px 10px #000000;}

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.