Mengatur Outline Dengan CSS

Outline atau garis luar ini sebenarnya hampir sama dengan border css, namun ada beberapa perbedaan yang mendasar dengan border. Dalam tutorial kali ini kita akan membahas cara mengatur outline dengan css, berikut ini perbedaan antara border dengan outline.

1. Outline tidak mengambil ruang sehingga tidak terjadi perubahan bentuk pada elemen lainnya.
2. Tidak dapat menentukan masing-masing sisi dengan berbeda style

Nah itu lah kedua hal yang paling mendasar yang membedakan antara outline dengan border, karena outline sendiri terpisah dari elemen tidak seperti border yang masih bagian dari sebuah elemen.

Berikut ini adalah properti-properti outline yang akan kita bahas pada tutorial ini untuk dapat membuat outline.

• outline-width digunakan untuk mengatur besar garis outline
• outline-style digunakan untuk menentukan bentuk garis outline
• outline-color digunakan untuk menentukan warna garis outline
• outline properti singkat yang dapat mengatur ketiga properti diatas dalam satu deklarasi

Properti-properti diatas akan kita bahas secara detail beserta source code yang akan mempermudah tutorial ini.

Cara Mengatur Outline Dengan CSS

Seperti pada pejenjelasan awal bahwa properti outine-width digunakan untuk menentukan besar outline, outline-style untuk bentuk garis, ouline-color untuk menentukan warna outline, nah dari kegitu properti tersebut dapat digunakan untuk membuat sebuah outline dimana properti-properti tersebut digabungkan secara bersamaan.

Seperti layaknya properti border, outline memiliki style untuk menentukan bentuk dari garis yang ingin ditampilkan, apakah seperti terputus-putus, titik-titik dan lain sebagainya, berikut ini daftar gaya outline yang bisa digunakan.

• none tidak ada outline (sama seperti outline-width: 0)
• solid outline dengan satu garis solid
• dotted outline dengan garis titik-titik (dots)
• dashed outline dengan gaya garis pendek terputus-putus
• double outline dengan dua garis solid
• groove outline dengan gaya seperti masuk kedalam halaman
• ridge outline dengan gaya seperti timbul
• inset outline dengan gaya seperti tertaman pada halaman
• outset outline dengan gaya seperti keluar dari halaman
• hidden sama seperti none, tidak tampil pada halaman.

Berikut ini contohnya.

<style type="text/css">
    .outline {
        outline-width: 3px;
        outline-style: solid;
        outline-color: black;
    }
 </style>

<p class="outline">Ini adalah outline.</p>Code language: HTML, XML (xml)

Hasil dari kode diatas seperti dibawah ini..

Terlihat bahwa outline hanya dapat mengelilingi sisi elemen html tersebut, sehingga kita tidak dapat menentukan bagian sisi mana saja yg perlu dibedakan. Berbeda sekali dengan border, dimana kita dapat menentukan sisi masing-masing berbeda satu sama lain.

Menggunakan Properti Singkat Outline

Maksudnya properti singkat outline ini adalah properti yang bisa digunakan untuk mempersingkat ketiga properti-properti diatas. Berikut ini contohnya.

outline: 3px solid black;Code language: HTTP (http)

Dengan mendeklarasikan seperti properti diatas dapat mempercepat penulisan sintaks css outline tentunya, dimana sintaks diatas sebenarnya sama saja dengan sintaks yang pertama.