Belajar Koding HTML & CSS Bagian 23: Membuat Efek Outline Offset Pada CSS
.png)
Garis tepi / outline offset
adalah garis yang digambar di sekeliling elemen, di luar tepi batas. Ruang
antara elemen dan garis tepinya transparan. Dengan kata lain, garis tepi
tersebut sama dengan latar belakang elemen induk.
Berikut adalah contoh kode HTML dan
CSS lengkap untuk membuat efek outline offset pada elemen menggunakan
properti outline dan outline-offset:
Contoh
Kode Lengkap
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>Contoh
Outline Offset</title>
<style>
.kotak {
border: 2px
solid #000; /* Border hitam */
outline: 4px
dashed red; /* Outline merah putus-putus */
outline-offset: 10px;
/* Jarak antara border dan outline */
padding: 20px;
margin: 20px;
background-color:
#f9f9f9;
font-family:
Arial, sans-serif;
}
</style>
</head>
<body>
<div class="kotak">
Teks di dalam
kotak dengan outline offset.
</div>
</body>
</html>
Tampilan Hasil (Output) Membuat Efek Outline Offset
Penjelasan
- border: Menambahkan garis hitam di
sekitar elemen.
- outline: Menambahkan garis merah
putus-putus di luar border.
- outline-offset: Mengatur jarak antara border
dan outline sebesar 10 piksel.
- padding dan margin: Memberikan ruang di dalam dan
di luar elemen untuk tampilan yang lebih baik.
Properti outline-offset memungkinkan Anda untuk mengatur seberapa jauh outline
berada dari tepi elemen. Nilai positif akan menempatkan outline di luar border,
sementara nilai negatif akan menempatkannya di dalam border.
0 Response to "Belajar Koding HTML & CSS Bagian 23: Membuat Efek Outline Offset Pada CSS"
Post a Comment