Belajar CSS Part 11 - Outline (Garis Luar)

CSS Outline

Outline pada CSS adalah garis yang berada di sekitar elemen, tepatnya di luar border. Fungsi dari outline ini adalah untuk membuat elemen agar terlihat lebih menonjol.

CSS outline memiliki properti-properti berikut:

outline-style
outline-color
outline-width
outline-offset
outline

Catatan: Outline (garis luar) berbeda dengan border! Tidak seperti border, outline digambar di luar elemen border, dan mungkin bisa tumpang tindih dengan konten lainnya. Dan outline BUKAN merupakan bagian dari dimensi elemen; Total lebar dan tinggi elemen tidak terpengaruh oleh lebar outline.

Contoh

p {
    border: 2px solid black;
    outline: #2E9AFE solid 10px;
    margin: auto;    
    padding: 20px;
    text-align: center;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<p> Elemen ini memiliki batas hitam 2px dan garis luar biru dengan lebar 10 piksel. </ p>

</body>
</html>

Hasilnya seperti di bawah ini:

Outline Style

Properti outline-style digunakan untuk menentukan gaya (styling) untuk outline.

Berikut adalah value yang bisa digunakan dalam outline-style:

dotted - Mendefinisikan garis putus-putus
dashed - Mendefinisikan garis putus-putus
solid - Mendefinisikan garis yang solid
double - Mendefinisikan garis ganda
groove - Mendefinisikan garis 3D beralur
ridge - Mendefinisikan garis bergerigi 3D
inset - Mendefinisikan garis inset 3D
outset - Mendefinisikan garis awal 3D
none - Mendefinisikan tidak ada garis (garis ditiadakan)
hidden - Mendefinisikan garis yang disembunyikan

Contoh berikut menunjukkan berbeda value dari outline-style:

Contoh

p {outline-color:lightskyblue;}
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Properti outline-style</h2>

<p class="dotted">dotted outline</p>
<p class="dashed">dashed outline</p>
<p class="solid">solid outline</p>
<p class="double">double outline</p>
<p class="groove">groove outline. Efeknya tergantung pada value dari outline-color.</p>
<p class="ridge">ridge outline. Efeknya tergantung pada value dari outline-color.</p>
<p class="inset">inset outline. Efeknya tergantung pada value dari outline-color.</p>
<p class="outset">outset outline. Efeknya tergantung pada value dari outline-color.</p>

</body>
</html>

Hasilnya:

Outline Color

Properti outline-color digunakan untuk mengatur warna garis. Warna dapat diatur dengan menggunakan:

nama - menentukan warna menggunakan nama warna, seperti "blue" untuk warna biru.
RGB - menentukan warna menggunakan nilai RGB, seperti "rgb (0,0,255)"
Hex - menentukan warna menggunakan nilai hex, seperti "#0000ff"
invert - melakukan inversi warna (yang menjamin bahwa garis yang terlihat atau menonjol, terlepas dari warna latar belakang)

Contoh berikut menunjukkan beberapa garis yang berbeda dengan warna yang berbeda. Juga perhatikan bahwa elemen-elemen ini juga memiliki garis hitam tipis di dalam outline.

Contoh

p.contoh1 {
    border: 1px solid black;
    outline-style: solid;
    outline-color: red;
}

p.contoh2 {
    border: 1px solid black;
    outline-style: double;
    outline-color: green;
}

p.contoh3 {
    border: 1px solid black;
    outline-style: outset;
    outline-color: yellow;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Properti outline-color</h2>

<p class="contoh1">Outline solid merah.</p>
<p class="contoh2">Outline solid hijau.</p>
<p class="contoh3">Outline solid kuning.</p>

</body>
</html>

Hasilnya:

Contoh berikut ini menggunakan outline-color: invert, yang melakukan inversi warna. Hal ini memastikan bahwa garis yang terlihat atau menonjol, terlepas dari warna latar belakang:

Contoh

p.contoh1 {
    border: 1px solid yellow;
    outline-style: solid;
    outline-color: invert;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Menggunakan outline-color:invert</h2>
<p class="contoh1">Outline invert</p>

</body>
</html>

Hasilnya:

Outline Width

Properti outline-width digunakan untuk menentukan lebar outline. Berikut adalah value yang bisa digunakan dalam outline-width:

thin (biasanya 1px)
medium (biasanya 3px)
thick (biasanya 5px)
Sebuah ukuran tertentu (dalam px, pt, cm, em, dll)

Contoh berikut menunjukkan beberapa garis dengan lebar yang berbeda:

Contoh

p.contoh1 {
    border: 1px solid black;
    outline-style: solid;
    outline-color: skyblue;
    outline-width: thin;
}

p.contoh2 {
    border: 1px solid black;
    outline-style: solid;
    outline-color: skyblue;
    outline-width: medium;
}

p.contoh3 {
    border: 1px solid black;
    outline-style: solid;
    outline-color: skyblue;
    outline-width: thick;
}

p.contoh4 {
    border: 1px solid black;
    outline-style: solid;
    outline-color: skyblue;
    outline-width: 4px;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Properti outline-width</h2>
<p class="contoh1">thin outline.</p>
<p class="contoh2">medium outline.</p>
<p class="contoh3">thick outline.</p>
<p class="contoh4">4px thick outline.</p>

</body>
</html>

Hasilnya:

Outline Offset

Properti outline-offset digunakan untuk menambah ruang antara garis dan tepi atau batas elemen. Ruang antara elemen dan garis adalah transparan.

Contoh berikut menentukan sebuah 15px outline tepi border:

Contoh

p {
    margin: 30px;
    border: 1px solid black;
    outline: 1px solid red;
    outline-offset: 15px;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Properti outline-offset</h2>
<p> Paragraf ini memiliki outline (garis luar) 15px di luar tepi border. </ p>

</body>
</html>

Hasilnya:

Contoh berikut menunjukkan bahwa ruang antara elemen dan garis adalah transparan:

Contoh

p {
    margin: 30px;
    background:yellow;
    border: 1px solid black;
    outline: 1px solid red;
    outline-offset: 15px;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Properti outline-offset</h2>
<p> Paragraf ini memiliki outline (garis luar) 15px di luar tepi border. </ p>

</body>
</html>

Hasilnya:

Outline

Properti outline adalah properti singkatan yang digunakan untuk menetapkan properti outline secara individu:

outline-width
outline-style (wajib)
outline-color

Properti outline ditetapkan sebagai salah satu, dua, atau tiga nilai dari daftar di atas. Urutan nilai tidak masalah, artinya boleh bertukaran dalam penulisan nilainya.

Contoh berikut menunjukkan beberapa garis yang ditentukan dengan menggunakan properti singkatan, yaitu outline:

Contoh

p.contoh1 {outline: dashed;}
p.contoh2 {outline: dotted red;}
p.contoh3 {outline: 5px solid yellow;}
p.contoh4 {outline: thick ridge pink;}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>Properti outline</h2>

<p class="contoh1">outline dashed.</p>
<p class="contoh2">outline dotted merah.</p>
<p class="contoh3">5px solid outline kuning .</p>
<p class="contoh4">thick ridge outline pink.</p>

</body>
</html>

Hasilnya: