Cara Menggunakan Property shape-outside Pada CSS

Halo teman-teman pada kesempatan kali ini saya akan menjelaskan tentang Cara Menggunakan Property shape-outside Pada CSS.Property shape-outside digunakan untuk mengubah geometri dari elemen mengambang mengapung daerah. Mengubah daerah mengambang elemen berarti mengubah cara konten mengalir di sekitar elemen mengambang. Setiap elemen pada halaman web adalah persegi panjang, dan dipandang sebagai persegi panjang dengan setiap elemen lain pada halaman.

Jadi, bahkan jika teman-teman mengubah bentuk elemen dengan pembulatan itu, misalnya, menggunakan border-radius, isi sekitar elemen akan tetap mengalir seakan elemen adalah persegi panjang, tidak melingkar. Menggunakan bentuk-luar, Anda dapat mengubah itu, memungkinkan konten untuk membungkus bentuk tertentu, bukan karena itu membungkus satu persegi panjang tua.

Misalnya, gambar berikut menunjukkan gambar yang telah bulat menggunakan properti border-radius. Ini menunjukkan bagaimana teks mengalir di sekitar tanpa menggunakan bentuk-luar untuk mengubah area float, dan kemudian dengan menggunakan itu.

Contoh tanpa menggunakan shape-outside

Contoh menggunakan shape-outside

Properti shape-outside mengambil <basic-shape> sebagai nilai value. Bentuk dasar didefinisikan menggunakan fungsi bentuk, dan digunakan untuk mengubah bentuk area mengambang elemen.

Syarat-syarat penggunaan shape-outside:

• Elemen harus diberi property float.
• Elemen harus memiliki dimensi intrinsik. Tinggi dan lebar ditetapkan pada elemen akan digunakan untuk membangun sistem koordinat pada elemen tersebut.

Contoh penulisan syntax menggunakan shape-outside:

Penjelasan:

• None: Tidak ada bentuk diterapkan. Property float tidak terpengaruh.
• <basic-shape>: Bentuknya dihitung berdasarkan nilai-nilai salah inset(), circle(), ellipse() dan polygon(). Jika <shape-box> juga disediakan, ini mendefinisikan kotak referensi untuk <basic-shape>. Jika <shape-box> tidak diberikan, maka default kotak referensi untuk margin-kotak.
• <shape-box>: Dapat menjadi salah satu model empat kotak nilai: margin-box, border-box, padding-box, content-box. Jika salah satu dari nilai-nilai ini ditentukan dengan sendirinya bentuk dihitung berdasarkan salah satu margin-box, border-box, padding-box, content-box, yang menggunakan kotak masing-masing termasuk kelengkungan dari perbatasan-radius, mirip dengan Latar klip.
• <image>: Gambar yang memiliki nilai Alpha bentuknya diekstraksi dan dihitung berdasarkan nilai alpha yang ditetapkan <image> seperti yang didefinisikan oleh properti bentuk-gambar-threshold. Bentuknya didefinisikan oleh piksel yang nilainya alpha lebih besar dari ambang batas.

Begitu Cara Menggunakan Property shape-outside Pada CSS, dan teman-teman dapat mengembangkannya kembali. Semoga bermanfaat.