Hallo teman-teman dumet school. Kembali lagi dengan saya di Shelli Ripati di kursus webdesign , tempat kursus terbaik dan nomor satu. Kali ini saya akan membahas tentang cara Memanfaatkan Property Box Decoration Break Pada CSS. Properti  box-decoration-break berfungsi untuk menentukan bagaimana latar belakang, padding, border, border-image, box-shadow, margin, dan clip-path dari elemen diterapkan saat kotak untuk elemen terfragmentasi.
Oke, langkah pertama saya untuk Memanfaatkan Property Box Decoration Break Pada CSS adalah  membuat struktur htmlnya terlebih dahulu seperti pada script di bawah ini.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <title>Memanfaatkan Property Box Decoration Break Pada CSS</title> </head> <body> <h1>Memanfaatkan Property Box Decoration Break Pada CSS</h1> <h2>box-decoration-break: clone:</h2> <span class="p1">Saya<br>Sedang<br>Belajar<br>Box<br>Decoration<br>Break</span> <h2>box-decoration-break: slice (default):</h2> <span class="p2">Saya<br>Sedang<br>Belajar<br>Box<br>Decoration<br>Break</span> <p>Note: Jika di Implementasikan di Internet property box-decoration-break tidak support.</p> </body> </html> |
Jika sudah selesai, maka tampilan akan seprti pada gambar di bawah ini ya teman-teman.
sekarang kita buat styles cssnya ya teman-teman-seperti pada script di bawah ini.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<style> span { border: 5px solid salmon; padding: 0em 1em; border-radius: 16px; font-size: 24px; line-height: 2; } span.p1 { -webkit-box-decoration-break: clone; -o-box-decoration-break: clone; box-decoration-break: clone; } span.p2 { -webkit-box-decoration-break: slice; -o-box-decoration-break: slice; box-decoration-break: slice; } </style> |
Jika sudah selesai, maka akan tampilan akan menjadi seperti pada gambar di bawah ini.
Nah, teman-teman bisa perhatikan pada css di bagian property box decoration break dengan value clone dan property box decoration break dengan value slice. Terlihat sekali perbedaannya bukan? Value Clone adalah Dekorasi kotak yang berlaku untuk setiap fragmen elemen seolah fragmen itu adalah elemen individu. Borders membungkus enam sisi masing-masing fragmen elemen, dan latar belakang digambar ulang secara penuh untuk setiap fragmen. Sedangkan value slice adalah Default. Dekorasi kotak diterapkan pada elemen secara keseluruhan dan terpecah pada tepi fragmen elemen. Dengan kata lain bordernya ikut terpecah sesuai elemennya.
Browser yang mensupport property box decaration break ini adalah google chrome, mozilla firefox, opera, safari.Sedangkan Internet tidak support untuk property box decoration break pada css. Oke teman-teman, sampai disini pembahasan kita tentang cara Memanfaatkan Property Box Decoration Break Pada CSS. Semoga Bermanfaat dan selamat mencoba ya teman-teman.