Shapes atau bentuk CSS memungkinkan kita untuk membuat tata letak yang menarik dan unik dengan mendefinisikan bentuk geometris, gambar, dan gradien yang dapat mengalir konten teks. Pelajari cara menggunakannya dalam tutorial ini.

Sampai pengenalan Bentuk CSS, hampir tidak mungkin untuk merancang tata letak majalah-esque dengan teks mengalir bebas untuk web. Sebaliknya, layout desain web secara tradisional telah dibentuk dengan kisi, kotak, dan garis lurus.

Bentuk CSS memungkinkan kita untuk menentukan bentuk geometris yang dapat mengalir teks. Bentuk-bentuk ini dapat berupa lingkaran, elips, poligon sederhana atau kompleks, dan bahkan gambar dan gradien. Beberapa aplikasi desain praktis Bentuk dapat menampilkan teks melingkar di sekitar avatar melingkar, menampilkan teks pada bagian sederhana dari gambar latar lebar penuh, dan menampilkan teks yang mengalir di sekitar topi jatuh dalam sebuah artikel.

Sekarang CSS Shapes telah memperoleh dukungan luas di seluruh peramban modern, ada baiknya memperhatikan fleksibilitas dan fungsionalitas yang mereka berikan untuk melihat apakah mereka masuk akal dalam proyek desain Anda berikutnya.

Perhatian: Pada saat menulis artikel ini, Bentuk CSS memiliki dukungan di Firefox, Chrome, Safari, dan Opera, serta browser seluler seperti iOS Safari dan Chrome untuk Android. Bentuk tidak memiliki dukungan IE, dan sedang dipertimbangkan untuk Microsoft Edge.

Perhatian Pertama pada Bentuk CSS

Implementasi CSS Shapes saat ini adalah CSS Shapes Module Level 1, yang sebagian besar berkisar pada properti shape-outside. shape-outside mendefinisikan bentuk yang dapat mengalir teks.

Mempertimbangkan ada properti bentuk-luar, Anda mungkin menganggap ada properti bentuk-dalam yang sesuai yang akan berisi teks di dalam bentuk. Properti shape-inside mungkin menjadi kenyataan di masa depan, tetapi saat ini konsep di CSS Shapes Module Level 2, dan tidak diterapkan oleh browser apa pun.

Di artikel ini, kami akan menunjukkan cara menggunakan tipe data <basic-shape> dan mengaturnya dengan nilai fungsi bentuk, serta mengatur bentuk menggunakan URL atau gradien semi-transparan.

Fungsi Bentuk Dasar

Kita bisa mendefinisikan segala macam Bentuk Dasar di CSS dengan menerapkan nilai fungsi berikut ke properti shape-outside:

  • circle()
  • ellipse()
  • inset()
  • polygon()

Untuk menerapkan properti shape-outside ke elemen, elemen harus melayang, dan memiliki tinggi dan lebar yang ditentukan. Mari kita melihat masing-masing dari empat bentuk dasar dan menunjukkan bagaimana mereka dapat digunakan.