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 Comments

Komen adalah tanggungjawab anda. Sebarang komen yang ditingalkan tertakluk pada Akta 588 SKMM. Komenlah dengan nada ilmiah, dan lakukan dengan niat yang murni. Untuk pengiklanan, boleh email ke editor@hasrulhassan.com.

**Jika anda menggunakan Google Crome, tetapi tidak boleh meninggalkan komen, anda kena ENABLE THIRD PARTY COOKIES pada setting Privacy and Security Crome anda.**

Post a Comment

Komen adalah tanggungjawab anda. Sebarang komen yang ditingalkan tertakluk pada Akta 588 SKMM. Komenlah dengan nada ilmiah, dan lakukan dengan niat yang murni. Untuk pengiklanan, boleh email ke editor@hasrulhassan.com.

**Jika anda menggunakan Google Crome, tetapi tidak boleh meninggalkan komen, anda kena ENABLE THIRD PARTY COOKIES pada setting Privacy and Security Crome anda.**

Previous Post Next Post
Panduan Labur Saham