Tutorial Belajar CSS Part 24 – Mengatur Outline pada CSS

Posted on Posted in Tutorial CSS

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 :

 

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 :

 

 

semisal kita simpan dengan nama outline-width.html lalu silahkan buka di browser, maka tampilannya adalah sebagai berikut :

Penjelasannya sebagai berikut :

  1. Paragraf pertama menggunakan ukuran outline-width thick; pada class satu, sehingga outline terlihat hampir menyatu dengan border pada paragraf 1
  2. 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 :

 

Semisal kita simpan dengan nama outline-color.html lalu silahkan buka di browser maka hasilnya adalah sebagai berikut :

Penjelasannya sebagai berikut :

  1. Paragraf pertama untuk outline memiliki warna merah, karena class satu menggunakan property outline-color:red;
  2. 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 :

 

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

 

Leave a Reply

Your email address will not be published. Required fields are marked *