Belajaar CSS : CSS Outline

Hallo teman-teman semua, pada kesempatan kali ini saya akan memposting tentang CSS Outline. Berikut materinya

CSS OUTLINE
Properti CSS Outline digunakan untuk menentukan gaya, warna dan lebar garis. Garis merupakan garis yang ditarik sekitar elemen (luar border) untuk membut elemen "menonjol". Akan tetapi pro.perti outline ini berbeda dengan boredr

outline-style, digunakan untuk menentukan gaya pada garis besar.
Contoh penerapannya :

Hasilnya :

Keterangan :

1. dotted, mendefinisikan perbatasan bertitik. 
2. dashed, perbatasan putus-putus. 
3. solid, sebuah perbatasan yang solid. 
4. double, perbatasan ganda. 
5. groove, sebuah perbatasan berlekuk 3D. Efeknya tergantung pada nilai border-color. 
6. ridge, sebuah perbatasan bergerigi 3D. Efeknya tergantung pada nilai border-color. 
7. insert, sebuah perbatas insert 3D. Efeknya tergantung pada nilai border-color. 
8. outset, sebuah perbatasan awal 3D. Efeknya tergantung pada nilai border-color. 
9. none, ada batas. 
10. hidden, perbatasan bersembunyi.

outline-color, properti yang digunakan untuk mengatur warna pada garis. Untuk mengatur warna dapat menggunakan nama, rgb, hex, invert (melakukan inversi warna, yang menjamin garis akan terlihat lepas dari background color).
Berikut contoh penerapannya :

Hasilnya :

 

outline-width, properti yang digunakan untuk mengatur lebar garis besar Untuk mengatur lebar dapat menggunakan px, pt, cm, em atau dengan menggunakan salah satu dari tiga nilai yang telah ditentukan: tipis, sedang atau tebal.
Contoh penerapan :

Hasilnya :

Untuk mempersingakat kode, kita dapat melakukan properti outline individu dalam satu properti. Singkatan untuk properti outline individu diantaranya terdiri dari : outline-width, outline-style dan oulir-color.
Contoh penerapan :

Hasilnya :

Referensi :
http://www.w3schools.com/css/css_outline.asp

Sekian dan terimakasih semoga bermanfaat. Silahkan mencoba....