Iklan bawah header

Belajar CSS : Mengatur Outline pada CSS

Outline

Pada pembahasan ini kita akan mempelajari penggunaan outline pada CSS, outline adalah garis yang ada setelah border dari sebuah objek. CSS sendiri menyediakan beberapa property yang bisa digunakan untuk mengatur outline, seperti mengatur bagaimana style garis, pewarnaan dan ukuran.

Berikut ilustrasi dari penggunaan outline :

Ilustrasi outline

outline-style

Property outline-style digunakan untuk mengatur bagaimana style dari sebuah garis, misal ingin membuat model garis putus-putus, garis lurus, dan model garis lainnya.

Untuk contohnya bisa kalian lihat pada contoh berikut 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>
Outline style

Bisa kita lihat pada gambar diatas terdapat beberapa paragraf yang menggunakan garis outline yang berbeda, hal tersebut dikarenakan kita menggunakan outline style yang berbeda di masing-masing paragraf.

outline-width

Selain mengatur style dari garis outline, kita juga bisa mengatur ukuran dari outline. Kita bisa menentukan ukurannya apakah 1px 2px 3px dan seterusnya.

Untuk contohnya bisa kalian perhatikan 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>
Outline width

Perhatikan gambar diatas, paragraf pertama yang menggunakan ukuran outline-width thick; akan menghasilkan outline yang terlihat hampir menyatu dengan border.

Pada paragraf kedua yang menggunakan outline-width 10px;, jarak antara outline dengan border lebih terlihat.

outline-color

Selain mengatur ukuran dan merubah style garis, kita juga bisa mengatur warna pada garis outline, contohnya bisa dilihat 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>
Outline color

Perhatikan gambar diatas, karena menggunakan property outline-color:red;, outline pada paragraf pertama menjadi berwarna merah.

Outline pada paragraf kedua berwarna hijau karena menggunakan property border-color:green;

Outline Shorthand Property

Istilah shorthand merupakan pemendekan dalam penulisan property outline di css, jadi kita dapat menset style, ukuran dan warna garis outline secara bersamaan dalam satu perintah.

Perhatikan contoh berikut 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>
Outline shorthand

Dari gambar diatas, terlihat paragraf tersebut memiliki outline dengan style garis dotted, ukuran 5px dan berwarna merah.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel