Beranda / CSS / Pemrograman / Web

Mengenal CSS Outline Offset dan Semua Properti Outline (Tutorial CSS Part 30)

Oleh Sopyan Posting Komentar
Logo CSS
Gambar 30: Logo CSS

Kalau kamu pernah ngulik-ngulik CSS buat ngatur tampilan border tapi pengen sesuatu yang lebih fleksibel dan gak ganggu layout elemen, kenalan dulu yuk sama CSS outline dan temen-temennya, terutama si unik outline-offset.

Apa Itu CSS Outline?

Outline adalah garis yang digambar di sekitar elemen, tapi beda dari border ya! Outline gak mempengaruhi ukuran box elemen, jadi gak ngubah layout atau posisi elemen lain. Cocok banget buat fokus visual, misalnya di elemen yang sedang aktif atau hover.

Fokus: CSS outline-offset

Nah, outline-offset adalah properti yang ngatur jarak antara outline dan tepi elemen. Jadi kalau kamu mau kasih efek outline yang kayak "melayang" atau agak menjauh dari elemen, properti ini jawabannya.

Sintaks:

outline-offset: <panjang>;

Contoh penggunaan:

button {
  outline: 2px solid orange;
  outline-offset: 4px;
}

Di contoh di atas, outline akan berada 4px dari pinggir elemen <button>. Kesan visualnya jadi kayak outline-nya "terangkat".

Semua Properti CSS Outline (Tabel Lengkap)

Properti Fungsi
outline Shorthand untuk mengatur warna, gaya, dan ketebalan outline.
outline-color Warna dari garis outline. Bisa pakai nama warna, HEX, RGB, HSL, dll.
outline-style Gaya garis outline: solid, dotted, dashed, double, groove, dll.
outline-width Ketebalan garis outline. Bisa thin, medium, thick, atau ukuran.
outline-offset Jarak antara outline dan elemen. Memberi efek outline "menjauh".

Contoh Kode Sederhana

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Contoh Outline Offset</title>
  <style>
    .kotak {
      width: 200px;
      height: 100px;
      background-color: #e0e0e0;
      outline: 3px dashed red;
      outline-offset: 10px;
      margin: 50px;
    }
  </style>
</head>
<body>
  <div class="kotak"></div>
</body>
</html>

Hasilnya:

Contoh CSS outline-offset
Gambar 30.1 : Contoh CSS outline-offset

Di contoh di atas, outline akan tampil 10px di luar elemen div. Efeknya bikin garisnya terpisah dari kotaknya, keren buat efek visual atau animasi fokus.

Tips Penggunaan Outline

  • Gunakan outline untuk keperluan aksesibilitas! Misalnya saat user pakai keyboard, outline bisa jadi indikator elemen mana yang sedang aktif.
  • Jangan asal hapus outline (kayak outline: none) tanpa solusi lain. Itu bisa menyulitkan pengguna berkebutuhan khusus.
  • Kombinasikan outline dengan transition buat efek animasi yang halus.

Kesimpulan

outline-offset adalah properti CSS yang sering diremehkan, padahal bisa nambah sentuhan visual yang elegan dan lebih ramah aksesibilitas. Kalau kamu ingin garis pembatas yang gak ganggu layout, outline (termasuk offset-nya) adalah pilihan yang tepat.

Yuk, mulai eksplorasi lebih banyak gaya visual CSS dengan outline!

Kalau kamu suka artikel ini, jangan lupa share dan coba langsung di kode kamu. Happy coding! 👨‍💻✨

Posting Komentar untuk "Mengenal CSS Outline Offset dan Semua Properti Outline (Tutorial CSS Part 30)"