CSS Gambar

Gambar adalah konten yang sangat penting dalam suatu web. Kalau web cuma teks aja tentu akan sangat membosankan.

Dengan CSS, kita bisa mengatur style dari gambar tersebut. Yang umum diatur tampilannya menggunakan CSS adalah:

• Width, yaitu lebar gambar
• Height, yaitu tinggi gambar
• Border, yaitu garis tepi gambar
• Margin, jarak gambar dengan elemen lain
• Padding, jarak kedalam gambar
• Float, posisi gambar dengan konten lain
• Box-shadow, memberi efek shadow / bayangan

Mengatur tinggi dan panjang gambar

Property css yang digunakan adalah adalah width: dan height: menggunakan satuan ukuran css yang umum digunakan, seperti px dan persen %.

Contoh kode html dengan penulisan css inline:

Note: ukuran gambar sebenarnya adalah: 3059×359 piksel (px).

1. Hanya diset panjangnya saja width:400px

<img src="https://halamansatu.biz/wp-content/uploads/2020/03/logo-puntadewa.png" style="width:400px;"/>

2. Hanya diset tingginya saja height:30px

<img src="https://halamansatu.biz/wp-content/uploads/2020/03/logo-puntadewa.png" style="height:30px;"/>

3. Diset keduanya panjang width:300px tingginya saja height:100px

<img src="https://halamansatu.biz/wp-content/uploads/2020/03/logo-puntadewa.png" style="width:300px; height:100px;"/>

Kesimpulan

Jadi, jika kamu hanya menyetting salah satu width atau height saja maka ukuran lainnya akan auto alias menyesuaikan.

Mengatur border gambar

Cara mengaturnya, kita hanya tinggal memberi properti border css pada gambar tersebut.

Contoh: saya memberi border 4px warna merah solid (garis lurus).

<img src="https://halamansatu.biz/wp-content/uploads/2020/03/logo-puntadewa.png" style="height:30px; border: 4px solid red"/>

Hasilnya:

Mengatur margin dan padding

Jika kamu masih belum paham cara margin dan padding dengan css baca artikel yang telah saya tulis sebelumnya.

1. Mengatur margin-left:300px

<img src="https://halamansatu.biz/wp-content/uploads/2020/03/logo-puntadewa.png" style="height:30px; margin-left:300px"/>

2. Mengatur padding 10px padding:10px dengan border:4px solid red

<img src="https://halamansatu.biz/wp-content/uploads/2020/03/logo-puntadewa.png" style="height:30px; padding:10px; border:4px solid red"/>

Coba bandingkan dengan border diatas yang tanpa padding. Tentu beda kan? Jika masih bingung bedanya, lihat gambar berikut:

Mengatur posisi float

Dengan mengatur float css kita bisa mengatur letak posisi gambar dalam konten. Jadi, contohnya saya menggunakan kombinasi elemen lain yaitu element div dan element paragraf.

Contohnya:

1. Float kiri (posisi gambar di sebelah kiri)

<div style="border:1px solid black; padding:20px;">
	<img style="float:left; height:30px; border: 4px solid red;" src="https://halamansatu.biz/wp-content/uploads/2020/03/logo-puntadewa.png"/>
	<p>
		Ini adalah contoh penggunaan gambar jika menggunakan float left atau kiri. Jadi, nantinya posisi gambar ada di sebelah kiri ini.
	</p>
</div>

2. Float kanan (posisi gambar di sebelah kanan)

<div style="border:1px solid black; padding:20px;">
	<img style="float:right; height:30px; border: 4px solid red;" src="https://halamansatu.biz/wp-content/uploads/2020/03/logo-puntadewa.png"/>
	<p>
		Ini adalah contoh penggunaan gambar jika menggunakan float right atau kanan. Jadi, nantinya posisi gambar ada di sebelah kanan ini.
	</p>
</div>

Memberi efek shadow

Supaya lebih keren, kita bisa menambahkan bayangan dengan menggunakan box-shadow. Misalnya:

<img src="https://halamansatu.biz/wp-content/uploads/2020/03/logo-puntadewa.png" style="height:100px; border:none; -webkit-box-shadow: -1px -2px 46px -17px rgba(0,0,0,0.52);
-moz-box-shadow: -1px -2px 46px -17px rgba(0,0,0,0.52);
box-shadow: -1px -2px 46px -17px rgba(0,0,0,0.52);
"/>

Hasilnya:

Semoga tutorial memberi style gambar bisa kamu pahami ya.