Hallo, sebelumnya kita telah membahas tentang properties css3 yaitu outline, pada tutorial kali ini saya akan membahas salah satu properties lagi yang ada di css3 yaitu outline-offset, properties outline-offset ini berfungsi untuk memberikan
Jarang antara tepi element bagian luar dengan tepi garis outline bagian dalan suatu element, nah mungkin daripada bingung kita langsung saja praktekan, teman-teman silahkan buat sebuah file dan ketikan script berikut :
|
1 |
<div>Dumet School</div> |
Nah, sekarang kita atur cssnya sekarang, silahkan ketikan script berikut :
|
1 2 3 4 5 6 7 8 9 |
div { margin: 60px; text-align:center; width: 150px; height: 70px; border: 2px solid blue; outline: 2px solid red; } |
Saya memberikan 2 garis tepi dengan berbeda warna yaitu border dan outline, maka hasilnya akan seperti berikut :
Nah, hasilnya ada 2 warna garis tepi karna saya menambahkan outline dan border, sekarang coba tambahkan script CSS berikut :
|
1 2 3 4 5 6 7 8 9 10 |
div { margin: 60px; text-align:center; width: 150px; height: 70px; border: 2px solid blue; outline: 2px solid red; outline-offset:20px; } |
Nah jika sudah save maka hasilnya akan seperti berikut :
Hasilnya akan ada jarak antara garis luar border dengan haris bagian dalam outline sebanyak value yang kita berikan pada properties outline-offset.
Oke cukup sekian artikel kali ini semoga bermanfaat.