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

  • Menyusun tampilan form tanpa perintah table
    Tabel dalam html biasanya digunakan untuk menyusun laporan atau membuat layout/tampilan elemen html agar terlihat lebih rapi. Pada tutorial kali ini saya akan berbagi tentang bagaimana Menyusun tampilan form input tanpa perintah table, tetapi menggunakan css. Teknik menyusun tampilan elamen html tanpa perintah tabel ini sering disebut dengan tableless (sedikit tabel).
  • Template halaman admin gratis
    Setiap kali kita membuat sebuah aplikasi web tentunya pasti menginginkan hasil yang baik, enak dilihat, tampilan yang cepat, fleksibel dan gampang untuk dikembangkan. Dan satu lagi tentunya lagi hemat waktu dalam membuatnya.
  • Membuat Background motif unik dengan CSS3
    Barusan habis jalan-jalan ke situs seberang, ketemu tutorial membuat motif gambar background yang sangat unik dibuat cuma dengan css3. Memang luar biasa tak pernah terbayangkan kalau hasilnya bisa mirip dengan sebuah gambar yang dibuat dengan aplikasi seperti photoshop.
  • Mengatur format tabel dengan css
    Anda mungkin sudah tidak asing lagi dengan css, yang umumnya digunakan untuk mengatur layout halaman web. Berikut ini saya akan berbagi tentang bagaimana mengatur format tabel dengan css. Pengaturan format tabel yang akan kita lakukan adalah mengganti warna tabel dan jenis tulisan pada tiap cell tabel. SIlahkan simak berikut ini..
  • Perbedaan html dengan css
    Dalam bidang desain web, HTML dan CSS dianggap sebagai sesuatu yang wajib digunakan dalam menyusun sebuah halaman web/blog. Hal itu sangatlah wajar karena perpaduan keduanya mampu menciptakan sebuah tampilan menarik, disukai mesin pencari, optimal dari segi kecepatan. Tapi apakah mereka bisa dipisahkan? seperti apa jika itu dilakukan? Apa perbedaan html dan css? Artikel berikut ini akan membantu anda membedakan HTML dengn CSS dari segi fungsi serta penulisan.

Kiriman terbaru