CSS Dasar Dalam Memodifikasi Gambar

CSS Dasar Dalam Memodifikasi Sebuah Gambar

HTML, CSS dan Javascript menjadi kunci utama dalam membuat dan memodifikasi sebuah website. Disini CSS berperan sebagai rangkaian perintah untuk ditampilkan pada website. Banyak hal yang dapat kamu lakukan menggunakan CSS, seperti: gambar, teks, jarak antar kolom, warna, dan masih banyak lagi. Bisa dikatakan hampir semua yang ada di website menggunakan CSS. Di pertemuan ini kamu akan belajar CSS Dasar dalam memodifikasi  sebuah gambar.

Baca juga: 3 Model Layanan di Dalam Cloud Computing

Peran gambar di website juga mempengaruhi kualitas tampilan website. Website akan terlihat lebih buruk jika tata letak gambar tersebut berantakan dan ukuran tidak sesuai dengan gambar lainnya. Dalam memperbaikinya, kamu harus menggunakan CSS. Dalam memodifikasi gambar agar terlihat lebih baik, kamu butuh mempelajari 4 hal dasar:

  1. Height digunakan untuk mengatur tinggi gambar yang akan tampil di website.
  2. Weight digunakan untuk mengatur lebar gambar yang akan tampil di website.
  3. Border digunakan untuk mengatur batas lebar dan tinggi gambar yang akan tampil di website.
  4. Moz-Opacity digunakan untuk mengatur tingkat keburaman gambar atau biasa disebut teknik ngeblur.

Mengatur Border Pada Gambar

Seperti yang sudah dijelaskan diatas, border merupakan batas tinggi dan lebar pada gambar. Dibawah ini terdapat kodingan CSS yang dapat kamu pelajari. Dashed red terdiri dari 2 fungsi. Dashed adalah jenis tepi garis pada gambar sementara red adalah warna tepi garis tersebut. Lebar 0 piksel berarti gambar tidak memiliki batas tepi.

Mengatur Tinggi Dan Lebar Pada Gambar

Tidak selamanya developer menggunakan ukuran asli gambar tersebut. Jika resolusi gambar berukuran 2.000 px ke atas sementara ukuran website hanya 1.200 px, maka gambar akan menutupi website ataupun merusak tampilan website. Dengan mengatur tinggi dan lebar gambar menggunakan CSS, hal ini dapat diatasi. Kamu dapat gunakan weight jika kamu ingin mengatur lebar gambar, atau kamu gunakan height jika kamu ingin mengatur tinggi gambar.

Membuat Moz-Opacity Pada Gambar

Menampilkan gambar original di website terkadang merasa seperti biasa saja. Kamu dapat memberikan opacity (keburaman) pada gambar. Cara ini biasanya digunakan developer dalam keadaan user mengarahkan pointer mouse ke gambar. Dapatkan kodenya dibawah ini.

Sebagai tambahan, kamu bisa perhatikan pada setiap kode src. Disana terdapat url, url tersebut bisa kamu ganti dengan url gambar yang ingin kamu masukkan. Fungsi src tidak hanya digunakan dalam membuat opacity melainkan untuk fungsi-fungsi lainnya.