Memodifikasi Tampilan Gambar (Image) dengan CSS Sebuah file gambar (image) yang disisipkan pada dokumen HTML akan tampil tanpa dekorasi apapun pada saat dilihat di browser. Kita dapat memberi garis pembatas di sekitar gambar tersebut dengan menambahkan atribut border atau mengatur posisinya dengan atribut align pada tag <img> yang bertugas memanggil gambar bersangkutan. Perhatikan contoh berikut! <img src="gambar.gif" border="10" align="right" /> Pada contoh di atas, gambar (foto gadis cantik) diletakkan di sebelah kanan teks dan tampak dikelilingi garis pembatas setebal 10 pixel berwarna hitam. Warna garis pembatas ini tidak bisa diganti dengan warna atau dengan gambar lain apabila kita hanya menggunakan HTML. Lain halnya jika kita menggunakan CSS. Dengan CSS kita dapat memodifikasi tampilan gambar dengan lebih wah! CSS bukan hanya bisa mengganti warna garis, pun ia dapat mengatur tingkat kerenggangan antara gambar dengan garis pembatas atau dengan bagian-bagian lain dari dokumen HTML, memberikan variasi (tipe) bentuk garis pembatas, memberi warna latar, atau membingkainya dengan gambar lain. Dalam CSS, ada beberapa property yang bisa kita gunakan untuk membuat tampilan gambar lebih menarik dan dekoratif, yaitu:
1. background, digunakan unruk memberi latar pada gambar baik berupa warna atau gambar lain; 2. padding, digunakan untuk mengatur kerenggangan antara gambar dengan border; 3. margin, digunakan untuk mengatur kerenggangan antara gambar dengan elemen-elemen HTML lainnya; 4. border, digunakan untuk memberi garis pembatas seperti contoh sebelumnya; 5. border-style, digunakan untuk menentukan gaya atau tipe border. Ada beberapa pilihan yang bisa kita gunakan untuk property ini, yakni: solid, dotted, dashed, groove, double, inset, dan outset. (Contoh penggunaanya akan diberikan di bagian akhir posting ini;) 6. border-width, digunakan untuk menentukan tingkat ketebalan border; dan 7. border-color, digunakan untuk menentukan warna border. Sekarang, kita akan mulai mendekorasi gambar dengan spesifikasi sebagai berikut: 1. background: putih 2. padding: 10px 3. border-style: solid 4. border-width: 2px 5. border-color: merah Sintaks penulisan CSS untuk spesifikasi di atas ialah sebagai berikut: <img src="filegambar" style="background:#ffffff; padding:10px; border-style:solid; border-width:2px; border-color:red;" /> Sekarang tampilan gambar akan tampak seperti berikut: Cara penulisan di atas dapat dipersingkat dengan menyatukan property style, width, dan color di bawah property border. Cara penulisan ini disebut CSS shorthand yang bertujuan untuk meringankan ukuran file. Berikut adalah contoh penulisannya: <img src="filegambar" style="background:#ffffff; padding:10px; border:solid 1px #cccccc;" /> Coba Anda ganti nilai warna #ffffff untuk background dan #cccccc untuk border dengan warna favorit Anda. Bila perlu, beri nilai yang berbeda untuk padding dan tebal border. Bim salabim! lihat apa yang terjadi! :)
Membingkai Gambar dengan Gambar Lain Sekarang kita akan mengganti property background dengan file gambar yang lain sehingga gambar akan tampak seperti dibingkai. File gambar yang akan dijadikan latar sebaiknya memiliki ukuran lebih besar dari gambar yang akan diberi bingkai. Di sini saya menyiapkan sebuah gambar yang saya buat dengan bantuan Photoshop. Selanjutnya, tulis kode berikut: <img src="filegambar" style="background:url(alamat gambar); padding:20px;" /> Pada bagian alamat gambar diisi dengan lokasi gambar latar yang akan digunakan. Jika gambar (yang akan dijadikan latar berada pada folder yang sama dengan file HTML, maka kita tinggal menuliskan nama file gambar tersebut, misalnya: <img src="filegambar" style="background:url(gambar.gif); padding:20px;" /> Jika berada pada folder yang berbeda dari file HTML, maka terlebih dahulu harus menyebutkan nama folder tersebut. <img src="filegambar" style="background:url(images/gambar.gif); padding:20px;" /> Jika gambar diambil dari situs lain (seperti dari Photobucket), maka alamat gambar ditulis langsung dengan menggunakan http://, misalnya: <img src="filegambar" style="background:url(http://i278.photobucket.com/ albums/kk82/jomantara/gambar.gif); padding:20px;" /> Hasil yang kita peroleh akan tampak seperti berikut:
<img src="gambar.jpg" style="background:url(gambar.gif); padding:20px; / > Sekarang coba Anda ganti gambar latar dengan gambar lain. Anda dapat pula menambahkan property border dengan nilai, ukuran, dan warna kesukaan Anda. Seperti tampak di bawah ini. Tipe-tipe Border untuk Gambar pada CSS <img src="filegambar" style="border:dashed 2px #000000;" />
<img src="filegambar" style="border:dotted 6px #000000;" /> <img src="filegambar" style="border:double 10px #000000;" /> <img src="filegambar" style="border:groove 10px #000000;" />
<img src="filegambar" style="border:inset 10px #000000;" /> <img src="filegambar" style="border:outset 10px #000000;" /> <img src="filegambar" style="border:ridge 10px #000000;" /> Selamat mencoba dan semoga bermanfaat! Collect by ifitady