Belajar Koding HTML & CSS Bagian 19: Membuat Outline CSS
.png)
Outline dalam CSS adalah properti
yang digunakan untuk menggambar garis di sekeliling elemen, tetapi di luar
batas elemen tersebut. Garis ini tidak memengaruhi tata letak atau ukuran
elemen, dan sering digunakan untuk menyorot atau menekankan elemen, misalnya
untuk menandai elemen yang sedang difokuskan
Untuk membuat outline di HTML
dan CSS, kamu dapat menggunakan properti outline yang berfungsi menambahkan garis di
sekitar elemen, tepat di luar batas (border) elemen tersebut. Properti
ini sering digunakan untuk menyoroti elemen, terutama saat fokus atau interaksi
pengguna, tanpa memengaruhi ukuran atau tata letak elemen.
🔹 Perbedaan Outline dan Border
|
Fitur |
Outline |
Border |
|
Posisi |
Di luar border |
Di dalam box elemen |
|
Mempengaruhi ukuran |
Tidak (tidak menambah dimensi
elemen) |
Ya (menambah dimensi elemen) |
|
Sisi individual |
Tidak bisa diatur per sisi |
Bisa diatur per sisi (atas, kanan,
dll.) |
|
Umum digunakan untuk |
Fokus elemen, aksesibilitas,
debugging |
Desain visual utama |
🛠️ Cara Menggunakan Outline di CSS
Properti outline
adalah shorthand dari tiga properti berikut:
outline-style (wajib): menentukan gaya garis (misalnya solid,
dashed, dotted, dll.)
- outline-width: menentukan ketebalan garis
(misalnya 2px, medium, thick)
- outline-color: menentukan warna garis
(misalnya blue, #ff0000)Contoh penggunaan:
<div class="kotak">Contoh Outline</div>
.kotak {
border: 2px solid
black;
outline: 4px dashed
red;
padding: 16px;
}
Dalam contoh di atas, elemen <div> memiliki border hitam dan outline merah putus-putus di luar border.
🔧 Properti Tambahan: outline-offset
Properti outline-offset digunakan untuk mengatur jarak antara border elemen dan
outline. Nilai positif akan menjauhkan outline dari border, sedangkan nilai
negatif akan mendekatkannya.
Contoh:
css
SalinEdit
.kotak {
outline: 3px solid
green;
outline-offset: 5px;
}
Dengan outline-offset: 5px;, outline akan berada 5 piksel di luar border elemen.
✅ Tips Penggunaan
- Aksesibilitas: Outline sering digunakan
untuk menunjukkan fokus pada elemen interaktif seperti tombol atau input.
Hindari menghapus outline default (outline:
none;) tanpa
menyediakan indikator fokus alternatif, karena dapat mengurangi
aksesibilitas bagi pengguna keyboard.
- Debugging: Karena outline tidak
memengaruhi tata letak, sangat berguna untuk menyoroti elemen saat
debugging tanpa mengganggu desain halaman.
- Desain
Responsif:
Gunakan outline untuk menambahkan efek visual sementara tanpa mengubah
ukuran elemen, menjaga konsistensi desain responsif.
🧾 Contoh Kode HTML + CSS: Outline vs
Border
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Contoh
Outline di CSS</title>
<style>
.kotak {
border: 2px
solid black;
outline: 4px
dashed red;
outline-offset: 8px;
padding: 16px;
margin: 20px;
background-color:
#f0f0f0;
}
</style>
</head>
<body>
<div class="kotak">
Ini adalah contoh
penggunaan <strong>outline</strong> di CSS.
</div>
</body>
</html>
 |
| Tampilan Hasil (Output) Outline CSS |
🔍 Penjelasan Kode
- border:
2px solid black;
Menambahkan garis hitam solid di sekitar elemen. - outline:
4px dashed red;
Menambahkan garis merah putus-putus di luar border elemen - outline-offset:
8px;
Mengatur jarak antara border dan outline sebesar 8 piksel. - padding dan margin
Digunakan untuk memberikan ruang di dalam dan di luar elemen agar lebih mudah terlihat.
Perlu dicatat bahwa outline tidak
memengaruhi ukuran elemen atau tata letak halaman, sehingga sangat berguna
untuk menyoroti elemen tanpa mengganggu desain keseluruhan.
0 Response to "Belajar Koding HTML & CSS Bagian 19: Membuat Outline CSS"
Post a Comment