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. 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 **

Artikel Lainnya

  • 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.
  • 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 :
  • Membuat header tetap diatas halaman
    Banyak variasi tampilan header atau footer yang digunakan untuk menghiasi halaman web dan dapat kita temukan diinternet, mulai dari yang sekedar tulisan judul, gambar logo sampai dengan model otomatis muncul dan hilang. Pada tulisan berikut ini, saya akan berbagi trick cara membuat header dan footer yang tetap diatas dan dibawah bagian halaman.
  • Membuat menu dropdown dengan css
    Membuat dropdown menu dengan css. Banyak sekali variasi menu web/blog yang bisa dibuat dengan css, ada bentuk menu tulisan maupun gambar biasa, dan ada juga bentuk-bentuk menu dropdown/menu bercabang secara horizontal atau vertikal. Pembuatanya juga bervariasi, ada yang menggunakan javascript, ada juga menggunakan jquery, bahkan ada yang membuat menu dari flash. Pada tulisan ini anda akan mengetahui bagaimana cara membuat menu dropdown horizontal murni dibuat dengan css. Silahkan anda simak.
  • Cara membuat css dengan dreamweaver
    Cara membuat css dengan dreamweaver sangat mudah, kita bisa gunakan beberapa cara dengan bantuan fitur yang tersedia dalam dreamweaver.

Kiriman terbaru