CSS OUTLINE
Assalamu'alaikum Wr. Wb
Hai sobat semua, terima kasih sudah mengunjungi blog saya ini. Pada kesempatan kali ini kita akan lanjut materi CSS yang sudah dibahas sebelumnya yaitu tentang CSS Outline.
Langsung saja yuk..
Properti CSS outline menentukan gaya, warna, dan lebar garis.
Garis yang dimaksud adalah garis yang ditarik sekitar elemen (border outside) untuk membuat elemen menonjol.
Namun, properti outline berdeda dari proderti border. Outline bukan bagian dari dimensi elemen ini. Total lebar elemen dan tinggi tidak terpengaruh oleh lebar outline.
OUTLINE STYLE
Properti outline-style menentukan gaya dari outline.
- dotted - Mendefinisikan garis putus-putus
- dashed - Mendefinisikan garis putus-putus
- solid - Mendefinisikan garis yang solid
- double - Mendefinisikan garis ganda
- groove- Mendefinisikan beralur garis 3D. Efeknya tergantung pada nilai garis warna
- ridge - Mendefinisikan garis bergerigi 3D. Efeknya tergantung pada nilai garis warna
- inset - Mendefinisikan garis inset 3D. Efeknya tergantung pada nilai garis warna
- outset - Mendefinisikan garis awal 3D. Efeknya tergantung pada nilai garis warna
- none - Mendefinisikan ada garis
- hidden - Mendefinisikan garis tersembunyi
Contoh :
Hasilnya :
OUTLINE COLOR
Properti
outline -color diguakan untuk mengatur warna garis.
Warna dapat diatur oleh :
- nama : menentukan nama warna, seperti "merah"
- RGB : menentukan nialii RGB, seperti "rgb(255,0,0)"
- HEX : menentukan nilai HEX, seperti "#ff0000"
- invert : melakukan inversi warna
Contoh :
Hasilnya :
OUTLINE WIDTH
Properti
outline-width menentukan lebar outline.
Lebar dapat diatur dengan ukuran tertentu (dalam px, pt, cm, em, dll) atau dengan menggunakan salah satu dari tiga nilai yang telah ditentukan : thin, medium, thick.
Contoh :
Hasilnya :
Untuk mempersingkat kode bisa menggunakan sintak seperti dibawah ini :
Hasilnya :
Silakan dicoba sendiri ya sobat, apabila ada pertanyaan silakan tinggalkan jejak dikolom komentar. Terima Kasih.
Properti CSS outline menentukan gaya, warna, dan lebar garis.
Garis yang dimaksud adalah garis yang ditarik sekitar elemen (border outside) untuk membuat elemen menonjol. Properti outline-style menentukan gaya dari outline. Properti outline -color diguakan untuk mengatur warna garis. Properti outline-width menentukan lebar outline.
Referensi :
http://www.w3schools.com/css/css_outline.asp
Wassalamu'alaikum Wr. Wb