Dalam tutorial ini kita akan membahas mengenai penggunaan outline pada CSS, outline adalah garis yang ada setelah border dari sebuah objek.
CSS menyediakan banyak fitur yang bisa anda gunakan untuk mengatur dari outline, seperti mengatur bagaimana style garis, pewarnaan dan ukuran.
Ilustrasi dari penggunaan outline adalah seperti berikut ini :
Baik Langsung saja untuk Fitur CSS yang bisa anda gunakan untuk mengatur outline antara lain :
Outline Style
outline style digunakan untuk mengatur bagaimana style dari sebuah garis, semisal anda ingin membuat garis lurus, garis putus putus dan model garis yang lain, anda dapat menggunakan property outline-style, untuk lebih memahami silahkan perhatikan skrip dibawah ini :
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid black;
outline-color:red;
}
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;}
</style>
</head>
<body>
<h2>Contoh Penggunaan Outline Style</h2>
<p class="dotted">Paragraf dengan outline style dotted</p>
<p class="dashed">Paragraf dengan outline style dashed</p>
<p class="solid">Paragraf dengan outline style solid</p>
<p class="double">Paragraf dengan outline style double</p>
<p class="groove">Paragraf dengan outline style groove</p>
<p class="ridge">Paragraf dengan outline style ridge</p>
<p class="inset">Paragraf dengan outline style inset</p>
<p class="outset">Paragraf dengan outline style outset</p>
</body>
</html>semisal kita simpan dengan nama outline-style.html, lalu kita buka di browser maka tampilannya adalah sebagai berikut :
Penjelasannya :
- Terlihat beberapa paragraf yang menggunakan garis outline yang berbeda, hal tersebut dikarenakan kita menggunakan outline style yang berbeda di masing – masing paragraf
- Perhatikan penggunaan masing masing dari value outline-style pada masing masing class yang digunakan di masing masing paragraf
- Jika anda belum memahami penggunaan class silahkan baca pembahasan kami mengenai jenis jenis selector css
outline-width
Selain bisa mengatur style dari garis outline, CSS juga dapat digunakan untuk mengatur ukuran dari outline. Anda bisa menentukan ukurannya apakah 1 px 2 px dan seterusnya.
Untuk lebih memahami silahkan perhatikan skrip dibawah ini :
<!DOCTYPE html>
<html>
<head>
<style>
p {border: 1px solid black;}
p.satu {
outline-style: double;
outline-width: thick;
margin:30px;
}
p.dua {
outline-style: double;
outline-width: 10px;
margin:30px;
}
</style>
</head>
<body>
<h2>Contoh Property outline width</h2>
<p class="satu">Paragraf Pertama</p>
<p class="dua">Paragraf Kedua</p>
</body>
</html>semisal kita simpan dengan nama outline-width.html lalu silahkan buka di browser, maka tampilannya adalah sebagai berikut :
Penjelasannya sebagai berikut :
- Paragraf pertama menggunakan ukuran outline-width thick; pada class satu, sehingga outline terlihat hampir menyatu dengan border pada paragraf 1
- Paragraf kedua menggunakan ukuran outline-width 10px; pada class dua, outline di paragraf 2 terlihat lebih ada jarak dengan border.
Outline-Color
Selain merubah style garis dan ukuran garis, CSS juga dapat digunakan untuk mengatur warna dari garis outline, untuk lebih memahami silahkan perhatikan skrip dibawah ini :
<!DOCTYPE html>
<html>
<head>
<style>
p.satu {
border: 1px solid black;
outline-style: double;
outline-color: red;
outline-width: 10px;
margin:30px;
}
p.dua {
border: 1px solid black;
outline-style: double;
outline-color: green;
outline-width: 10px;
margin:30px;
}
</style>
</head>
<body>
<h2>Contoh Property outline-color</h2>
<p class="satu">Paragraf 1</p>
<p class="dua">Paragraf 2</p>
</body>
</html>Semisal kita simpan dengan nama outline-color.html lalu silahkan buka di browser maka hasilnya adalah sebagai berikut :
Penjelasannya sebagai berikut :
- Paragraf pertama untuk outline memiliki warna merah, karena class satu menggunakan property outline-color:red;
- Paragraf kedua untuk border memiliki warna garis hijau, karena class dua menggunakan property border-color:green;
Outline Shorthand Property
Istilah shorthand adalah pemendekan dalam penulisan property outline di CSS, jadi anda dapat menset style, ukuran, dan warna garis outline, secara bersamaan dalam satu perintah.
silahkan perhatikan skrip dibawah ini :
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 5px solid black;
outline: 5px dotted red;
}
</style>
</head>
<body>
<h2>Contoh Outline Shorthand</h2>
<p>Paragraf Pertama</p>
</body>
</html>semisal kita simpan dengan nama outline-shorthand.html lalu kita buka di browser, maka hasilnya adalah sebagai berikut :
Penjelasan :
- Paragraf tersebut memiliki outline dengan style garis dotted, ukuran 5 pixel dan berwarna merah, anda hanya perlu menuliskan outline: 5px dotted red;
Bagaimana teman – teman cukup mudah kan cara untuk mengatur outline didalam CSS, kita telah belajar mengenai mengganti style, warna, dan ukuran garis, jika ada yang ingin didiskusikan silahkan di kolom komentar, sampai jumpa di tutorial CSS Selanjutnya.