Mengatur gambar dengan css

CSS berperan penting dalam menyajikan informasi dengan visual yang lebih baik, lebih optimal dari sisi penulisan serta lebih disenangi oleh mesin pencari. CSS dapat diterapkan hampir pada semua objek yang disisipkan dalam kode html baik itu tulisan, tabel dan gambar maupun objek lainya. Kali ini saya akan berbagi cara mengatur gambar dengan css agar dapat disajikan lebih hemat tempat dan hemat kode dan tentunya menarik. Silahkan anda simak artikel berikut.

Saya coba jelaskan dulu kemampuan dasar html untuk menampilkan gambar.

Untuk memasukkan gambar dengan html kita menuliskan kode :

<img src="nama-file-gambar" width="lebar" height="tinggi" alt="text" title="text" border="1"  />

atribut tambahan biasanya posisi menggunakan perintah align="posisi".

Dari kode diatas dapat kita lihat bahwa html hanya mampu mengatur lebar, tinggi, garis luar dan posisi gambar. Otomatis setiap gambar harus dituliskan secara lengkap seperti kode diatas. Yang jadi masalah adalah bagaimana seandainya ada 10 gambar yang ingin dimasukkan dengan pengaturan yang sama? maka akan tidak efektif kalo kita menuliskan lebar, tingi atau posisi pada setiap gambar. Bagaimana cara yang lebih singkat? Berikut ini dengan cara menggunakan css

<style type="text-css">
  img.format1 { width:200px; height:200px; float:left;border:1px solid blue;}
  img.format2 { width:300px; height:300px; float:right;}
</style>

Diatas saya membuat 2 class untuk mengatur gambar dengan ukuran dan posisi berbeda. Cara menggunakannya dalam html :

<img src="nama-file-gambar1" class="format1" alt="text" title="text" />
<img src="nama-file-gambar2" class="format2" alt="text" title="text" />

Anda bisa menilai, kira2 mana yang lebih efektif. Jika dihitung karakter kode, dengan css lebih sedikit dengan kemampuan sama bahkan bisa ditambah dengan fitur lain.

Jika seandainya ada perubahan ukuran pada 10 gambar yang dimasukkan dengan html biasa, berarti anda harus mengubah 10 kode gambar tersebut. Kalau menggunakan css, anda cukup mengubah classnya saja tanpa mengotak atik kode gambarnya.

Beberapa pengaturan gambar dengan css tambahan yang bisa anda sisipkan diantaranya :

1. border-radius : untuk membentuk gambar dengan sudut tumpul
2. opacity : untuk mengatur tingkat transparan gambar
3. box-shadow : untuk memberi bayangan

Silahkan anda baca artikel saya tentang :

1. Membuat efek gambar dengan css
2. Membuat efek gambar di blog dengan css

Anda bisa lihat referensi tentang cara mengatur serta apa yang mereka lakukan terhadap gambar dengan css di situs berikut :

1. https://www.w3schools.com/css/css_image_gallery.asp
2. https://css-tricks.com/css-image-replacement/
3. https://www.csstutorial.net/css_misc_images.php
4. https://www.tizag.com/cssT/float.php
5. https://www.1stwebdesigner.com/design/image-styling-coding-tutorials/

Semoga bermanfaat. Jika ada pertanyaan atau koreksi, jangan sungkan mengisi komentar. Dan jika ini berguna untuk anda silahkan dishare ke teman2 anda.

Zainal Hakim

** Bebas disunting dengan menyebutkan sumber **