Anda dapat menggunakan CSS untuk memformat gambar pada halaman web. Berikut adalah contoh penggunaan CSS untuk memformat gambar:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
<style>
/* CSS untuk memformat gambar */
.gambar {
width: 300px; /* Lebar gambar: 300 piksel */
border: 2px solid #333333; /* Garis tepi gambar: 2 piksel solid abu-abu gelap */
border-radius: 5px; /* Melengkungkan sudut gambar */
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* Efek bayangan gambar */
}
</style>
</head>
<body>
<h1>Judul Halaman</h1>
<img class="gambar" src="gambar.jpg" alt="Gambar Konten">
</body>
</html>Dalam contoh di atas, CSS disisipkan dalam tag <style> di dalam elemen <head> untuk memformat gambar.
- Kami menggunakan selektor
.gambaruntuk memilih elemen gambar dengan class “gambar”. - Dalam blok CSS tersebut, kami mengatur lebar gambar menggunakan properti
widthsebesar 300 piksel. - Kami mengatur garis tepi gambar menggunakan properti
borderdengan ketebalan 2 piksel, gaya solid, dan warna abu-abu gelap (#333333). - Kami melengkungkan sudut gambar menggunakan properti
border-radiussebesar 5 piksel. - Kami memberikan efek bayangan gambar menggunakan properti
box-shadowdengan pergeseran horizontal 2 piksel, pergeseran vertikal 2 piksel, radius blur 4 piksel, dan warna bayangan yang diatur menggunakan rgba (0, 0, 0, 0.2).
Anda dapat menyesuaikan properti CSS sesuai dengan preferensi desain dan kebutuhan Anda untuk memformat gambar dengan cara yang diinginkan.
