Background clip property merupakan salah satu property css3 yang sudah mendapat dukungan penuh secara sempurna dari browser besar seperti Opera, Mozilla Firefox, Safari, Google Chrome. Semua browser juga sudah menggunakan kode yang sama sehingga membuat pengguna lebih edisien saat menggunakan kode css.
Background clip property berfungsi untuk mengatur posisi background yang didasarkan atas border, padding dan content. Pengaturan penentuan posisi dilakukan dengan 3 value berbeda.
Penulisan kode background clip property
- background-clip:border-box;
- background-clip:padding-box;
- background-clip:content-box;
Contoh kode background clip property dalam sebuah syntax
div.border_box{
width:300px;
border:20px solid rgba(0,0,0,0.2);
margin:20px auto;
padding:30px;
background:#999;
background-clip:border-box;
}
div.padding_box{
width:300px;
border:20px solid rgba(0,0,0,0.2);
margin:20px auto;
padding:30px;
background:#999;
background-clip:padding-box;
}
div.content_box{
width:300px;
border:20px solid rgba(0,0,0,0.2);
margin:20px auto;
padding:30px;
background:#999;
background-clip:content-box;
}
Dalam demo di bawah anda dapat membandingkan beberapa buah box dengan background clip property. Dalam demo disertakan 2 macam box dengan background color dan background image. Anda juga dapat membandingkan dengan box yang dibuat tanpa menyertakan background-clip propert (box pertama dan box kedua).
Please click the button to display. Continue with editing code and click to see the results!
Post : Background Clip Propertyby : gubhugreyot - gubhugcss
my Blogs : Demo Tutorial Blogger-1 | Demo Tutorial Blogger-2 | Best Blogger Hacks | Best Blogger Menus | gubhuggreyot-b'detik | gubhugreyot
Tidak ada komentar:
Posting Komentar