Mengatur gambar dengan css

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. http://www.w3schools.com/css/css_image_gallery.asp
  2. http://css-tricks.com/css-image-replacement/
  3. http://www.csstutorial.net/css_misc_images.php
  4. http://www.tizag.com/cssT/float.php
  5. http://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 **

Komentar

Halaman Lainya

  • Membuat tampilan layout 3 kolom dengan css
    Membuat layout halaman web dengan css sangatlah mudah dan tidak menggunakan perintah yang rumit. Pada artikel singkat berikut ini saya akan menjelaskan bagaiman cara membuat tampilan halaman web dengan susunan tiga kolom. Contoh yang saya buat sengaja dirancang sederhana agar dapat digunakan untuk berbagai keperluan. Lihat kode berikut ini :
  • Referensi warna untuk HTML dan CSS
    Warna yang terlihat disebuah website/blog sangatlah bervariasi dan memiliki daya tarik tersendiri terhadap pengunjung, pingin tau lengkap referensi warna untuk HTML maupun CSS, silahkan baca panduan berikut.
  • Membuat background gradient dengan css3
    Salah satu fitur unggulan yang dihadirkan pada teknologi css3 adalah kemampuanya membuat warna latar/background gradient. Gradient adalah perubahan warna dari satu warna ke warna lainya yang dilakukan secara teratur. Gradient lebih identik pada hasil gambar yang diciptakan melalui proses penempatan kombinasi beberapa warna yang memenuhi sebuah area gambar. Biasanya untuk menghasilkan gambar gradient digunakan aplikasi pengolah gambar seperti photoshop, atau corel draw. Pada artikel ini saya akan berbagi tentang bagaimana membuat latar gradient dengan css3.
  • Membuat form login dengan css
    Membuat form login dengan css tidaklah susah hanya perlu beberapa menit untuk menyusun kode cssnya karena isian form yang dibuat hanya username, password dan tombol loginya. Beda kalau kita membuat form dengan css untuk keperluan yang lengkap seperti form
  • Membuat header table pada tiap halaman cetak
    Format cetak laporan yang baik tentunya sangatlah penting dalam membuat sebuah aplikasi berbasi web. Biasanya laporan yang menampilkan banyak record disajikan dalam bentuk tabel dengan judul kolom berbeda.

Kiriman terbaru