Mengenal CSS Outline Color (Tutorial CSS Part 28)

Gambar 28 : Logo CSS

Kalau kamu udah sering ngoprek-ngoprek tampilan website, pasti udah nggak asing lagi sama yang namanya outline di CSS. Tapi, kamu tahu nggak sih kalau outline itu bisa dikasih warna juga? Nah, di artikel ini kita bakal bahas tuntas soal CSS Outline Color, lengkap dengan cara ngasih warnanya pake HEX, RGB, dan HSL. Santai aja, bahasannya bakal ringan tapi tetep daging!

1. Apa Itu Outline di CSS?

Sebelum nyemplung ke warna-warni, kita harus ngerti dulu nih: apa sih outline itu?

Outline itu mirip banget sama border, tapi dia punya karakteristik unik:

Nggak ngaruh ke layout elemen (nggak nambah ukuran total)
Nggak bisa dibikin melengkung pake border-radius
Letaknya di luar border

Contoh paling simpel:

button {
  outline: 2px solid red;
}

Nah, biar makin kece, kamu bisa ganti-ganti warnanya sesuai tema website kamu. Di sinilah kita masuk ke pembahasan utama: outline-color!

2. Outline Color dengan HEX Values

Kalau kamu suka main warna pake kode heksadesimal (alias HEX), CSS udah mendukung banget!

Apa itu HEX?

HEX adalah singkatan dari hexadecimal. Biasanya ditulis dengan tanda pagar (#) diikuti 6 digit angka dan huruf.

Contoh penggunaan:

input {
  outline: 3px dashed #1abc9c;
}

Warna #1abc9c ini adalah warna turquoise yang adem banget di mata. Bisa kamu ganti-ganti sesuai selera.

3. Outline Color dengan RGB Values

Kalau kamu lebih seneng ngatur warna pake RGB, bisa banget juga!

Apa itu RGB?

RGB adalah singkatan dari Red, Green, Blue. Kamu bisa kasih nilai dari 0 sampai 255 untuk tiap komponennya.

Contoh:

textarea {
  outline: 4px solid rgb(255, 99, 71); /* Tomato color */
}

Mau yang agak transparan? Pakai rgba:

textarea:focus {
  outline: 2px solid rgba(0, 0, 0, 0.3); /* Hitam transparan */
}

4. Outline Color dengan HSL Values

Nah, yang terakhir dan cukup fleksibel: HSL.

Apa itu HSL?

HSL adalah singkatan dari Hue, Saturation, Lightness. Kalau RGB fokus ke komponen warna primer, HSL lebih ke cara kita melihat warna sebagai manusia.

Contoh:

div:focus {
  outline: 3px solid hsl(120, 100%, 25%);
}

Mau transparan juga bisa:

div:hover {
  outline: 3px solid hsla(200, 100%, 50%, 0.4);
}

Bonus: Contoh Sederhana dengan Internal CSS

Biar kamu makin ngerti, yuk kita lihat contoh HTML lengkap dengan internal CSS yang menunjukkan perbedaan penggunaan outline-color pake HEX, RGB, dan HSL.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Contoh Outline Color</title>
  <style>
    .hex-outline {
      outline: 3px solid #e74c3c;
      padding: 10px;
      margin-bottom: 10px;
    }

    .rgb-outline {
      outline: 3px dashed rgb(52, 152, 219);
      padding: 10px;
      margin-bottom: 10px;
    }

    .hsl-outline {
      outline: 3px dotted hsl(120, 60%, 40%);
      padding: 10px;
    }
  </style>
</head>
<body>
  <h2>Contoh CSS Outline Color</h2>

  <div class="hex-outline">
    Ini outline warna HEX (#e74c3c)
  </div>

  <div class="rgb-outline">
    Ini outline warna RGB (rgb(52, 152, 219))
  </div>

  <div class="hsl-outline">
    Ini outline warna HSL (hsl(120, 60%, 40%))
  </div>
</body>
</html>

Penjelasan:

.hex-outline pakai outline warna merah terang dari HEX.
.rgb-outline pakai biru muda dari RGB.
.hsl-outline pakai hijau gelap dari HSL.

Kamu tinggal copas kode ini ke file .html dan buka di browser untuk lihat hasilnya secara langsung. Maka hasilnya akan seperti ini:

Gambar 28.1 : Contoh CSS Outline Color

Kesimpulan

Jadi, outline-color di CSS itu powerful banget kalau kamu ngerti cara makainya. Mau pake kode warna apa pun — HEX, RGB, atau HSL — semua bisa! Tinggal sesuaikan sama style dan mood websitemu. Dan yang paling penting, outline bukan cuma soal gaya, tapi juga soal fungsionalitas dan aksesibilitas.

Jangan ragu buat eksplorasi warna dan gaya outline yang beda-beda. Siapa tahu malah bikin tampilan website kamu makin standout dan profesional!

filesop.com