Beranda / CSS / Pemrograman / Web

CSS Outline: Garis Ajaib Buat Nyorot Elemen Tanpa Ribet! (Tutorial CSS Part 26)

Oleh Sopyan Posting Komentar
Logo CSS
Gambar 26 : Logo CSS

Kalau kamu udah lumayan akrab sama border di CSS, pasti nggak asing dong sama garis-garis yang bikin elemen web jadi keliatan lebih tegas? Nah, ternyata selain border, ada juga fitur keren lainnya di CSS yang sering disepelein, padahal manfaatnya luar biasa. Namanya CSS Outline. Yuk, kita kupas tuntas mulai dari dasar sampai ke gaya-gayanya.

1. Apa Itu CSS Outline?

Outline di CSS itu semacam garis luar yang bisa kamu tambahkan ke elemen HTML, mirip kayak border, tapi dengan beberapa perbedaan penting.

Contohnya gini:

outline: 2px solid red;

Nah, garis merah itu akan muncul di luar border dari elemen. Jadi, outline ini nggak bikin ukuran elemen jadi tambah besar, karena dia nggak ngaruh ke box model. Keren kan?

Perbedaan Outline vs Border

Fitur Border Outline
Ikut hitung ukuran elemen Iya Nggak
Bisa dikasih radius Iya (border-radius) Nggak
Letaknya Di dalam padding Di luar border
Shortcut properti Ada (border) Ada juga (outline)

Jadi, outline ini cocok banget buat nge-highlight elemen tanpa ngubah layout-nya. Biasanya sering dipake buat:

  • Fokus pada input form (:focus)
  • Indikator saat navigasi pakai keyboard
  • Debugging (ngasih tanda tanpa ganggu desain)

Contoh penggunaan di input form:

input:focus {
  outline: 2px solid blue;
}

Waktu kamu klik input-nya, langsung muncul garis biru buat nandain itu elemen aktif.

2. CSS Outline Style: Gaya-Gaya Garis yang Bisa Kamu Mainkan

Sekarang kita bahas lebih dalam tentang gaya-gayanya. Properti outline bisa kamu atur dengan tiga sub-properti utama:

a. outline-width

Ngatur ketebalan outline-nya. Bisa pakai nilai spesifik (px, em, dll) atau kata kunci:

outline-width: 3px;
outline-width: thin;
outline-width: medium;
outline-width: thick;

b. outline-style

Nah ini yang bikin outline keliatan beda-beda. Ada beberapa opsi gaya:

  • solid – Garis lurus, paling umum.
  • dashed – Garis putus-putus.
  • dotted – Garis titik-titik.
  • double – Garis ganda.
  • groove, ridge, inset, outset – Gaya 3D, mirip border.
  • none – Nggak nampilin outline.
  • auto – Browser yang nentuin.

Contoh:

button {
  outline-style: dashed;
}

Hasilnya tombol kamu akan punya outline putus-putus.

c. outline-color

Atur warna outline. Bisa pakai nama warna, HEX, RGB, atau bahkan transparent.

outline-color: green;
outline-color: #ff0000;
outline-color: rgba(0, 0, 255, 0.5);

d. Shortcut: outline

Kalau kamu mau lebih singkat, langsung aja tulis semua dalam satu baris:

outline: 2px dotted orange;

Itu sama aja kayak:

outline-width: 2px;
outline-style: dotted;
outline-color: orange;

e. Bonus: outline-offset

Kalau kamu pengen outline-nya agak menjauh dikit dari elemen, bisa pake ini:

outline-offset: 4px;

Ini bikin jarak antara outline dan border makin lebar. Cocok buat efek fokus yang lebih menonjol.

Contoh Kode Sederhana Menggunakan Internal CSS

Biar makin kebayang, ini dia contoh penggunaan CSS Outline langsung di HTML dengan internal CSS:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Contoh CSS Outline</title>
  <style>
    .box {
      width: 200px;
      padding: 20px;
      margin: 20px;
      background-color: #f2f2f2;
      border: 2px solid #ccc;
      outline: 3px dashed tomato;
      outline-offset: 5px;
    }

    input:focus {
      outline: 2px solid blue;
      outline-offset: 3px;
    }
  </style>
</head>
<body>
  <h2>Contoh Outline di Elemen Div</h2>
  <div class="box">
    Ini div dengan outline dashed warna tomato.
  </div>

  <h2>Contoh Outline di Input Saat Fokus</h2>
  <input type="text" placeholder="Klik aku, lihat outline-nya!">
</body>
</html>

Hasilnya:

Contoh CSS Outline
Gambar 26.1 : Contoh CSS outline

Penjelasan Singkat:

  • Elemen .box punya outline dashed warna tomato di luar border abu-abu.
  • Input field akan muncul outline biru waktu difokusin (klik atau tekan Tab).

Kapan Harus Pakai Outline?

Nah, ini penting. Outline itu ideal buat aksesibilitas. Saat user navigasi pakai keyboard (misal tekan Tab), outline bisa bantu mereka tahu elemen mana yang sedang aktif. Jangan malah dihapus ya!

Contoh jelek (jangan ditiru!):

*:focus {
  outline: none;
}

Kalau pun kamu pengen gaya yang lebih estetik, ganti outline default dengan desain sendiri, tapi jangan ilangin tanda fokus sama sekali.

Contoh bagus:

*:focus {
  outline: 3px solid #ff9900;
  outline-offset: 2px;
}

Kesimpulan

Jadi, meskipun sering disepelein, CSS Outline itu punya peran penting banget dalam desain dan aksesibilitas web. Outline itu:

  • Nggak ngubah ukuran elemen.
  • Bisa dipake buat highlight tanpa ganggu layout.
  • Punya banyak gaya lewat outline-style.
  • Wajib banget dipahami biar desain kamu tetap ramah pengguna.

Mulai sekarang, yuk jadiin outline sebagai salah satu senjata rahasia pas ngoding! Selain bikin tampilan makin kece, juga bikin web kamu makin ramah buat semua orang.

Posting Komentar untuk "CSS Outline: Garis Ajaib Buat Nyorot Elemen Tanpa Ribet! (Tutorial CSS Part 26)"