Google menggunakan teknologi AI untuk menerjemahkan konten ke dalam bahasa pilihan Anda. Terjemahan AI mungkin mengandung kesalahan.

Mulai menggunakan CSS Shapes

Membungkus konten di sekitar jalur kustom

Razvan Caliman

Sejak lama, desainer web terpaksa berkreasi dalam batasan persegi panjang. Sebagian besar konten di web masih terjebak dalam kotak sederhana karena sebagian besar upaya kreatif untuk membuat tata letak non-persegi panjang berakhir dengan frustrasi. Hal ini akan berubah dengan diperkenalkannya CSS Shapes, yang tersedia mulai Chrome 37. CSS Shapes memungkinkan desainer web menggabungkan konten di sekitar jalur kustom, seperti lingkaran, elips, dan poligon, sehingga terbebas dari batasan persegi panjang.

Bentuk dapat ditentukan secara manual atau dapat disimpulkan dari gambar.

Mari kita lihat contoh yang sangat sederhana.

Mungkin Anda pernah sama naifnya dengan saya saat pertama kali mengambangkan gambar dengan bagian transparan, berharap konten akan membungkus dan mengisi celah, tetapi kecewa karena bentuk pembungkus persegi panjang tetap ada di sekitar elemen. CSS Shapes dapat digunakan untuk mengatasi masalah ini.

<img class="element" src="image.png" />
<p>Lorem ipsum…</p>

<style>
.element{
  shape-outside: url(image.png);
  shape-image-threshold: 0.5;
  float: left;
}
</style>

Deklarasi CSS shape-outside: url(image.png) memberi tahu browser untuk mengekstrak bentuk dari gambar.

Properti shape-image-threshold menentukan tingkat opasitas minimum piksel yang akan digunakan untuk membuat bentuk. Nilainya harus berada dalam rentang antara 0.0 (sepenuhnya transparan) dan 1.0 (sepenuhnya buram). Jadi, shape-image-threshold: 0.5 berarti hanya piksel dengan opasitas 50% ke atas yang akan digunakan untuk membuat bentuk.

Properti float adalah kuncinya di sini. Meskipun properti shape-outside menentukan bentuk area yang akan dibungkus konten, tanpa float, Anda tidak akan melihat efek bentuk tersebut.

Elemen memiliki area float di sisi yang berlawanan dengan nilai float-nya. Misalnya, jika elemen dengan gambar cangkir kopi di-float ke kiri, area float akan dibuat di sebelah kanan cangkir. Meskipun Anda dapat merekayasa gambar dengan celah di kedua sisi, konten hanya akan mengelilingi bentuk di sisi berlawanan yang ditentukan oleh properti float, kiri atau kanan, tidak pernah keduanya.

Pada masa mendatang, shape-outside dapat digunakan pada elemen yang tidak mengambang dengan pengenalan CSS Exclusions.

Membuat bentuk secara manual

Selain mengekstrak bentuk dari gambar, Anda juga dapat membuat kode secara manual. Anda dapat memilih dari beberapa nilai fungsional untuk membuat bentuk: circle(), ellipse(), inset(), dan polygon(). Setiap fungsi bentuk menerima sekumpulan koordinat dan dipasangkan dengan kotak referensi yang menetapkan sistem koordinat. Kita akan membahas lebih lanjut tentang kotak referensi sebentar lagi.

Fungsi circle()

Notasi lengkap untuk nilai bentuk lingkaran adalah circle(r at cx cy) dengan r adalah radius lingkaran, sedangkan cx dan cy adalah koordinat pusat lingkaran pada sumbu X dan sumbu Y. Koordinat untuk pusat lingkaran bersifat opsional. Jika Anda menghilangkannya, pusat elemen (persimpangan diagonalnya) akan digunakan sebagai default.

.element{
  shape-outside: circle(50%);
  width: 300px;
  height: 300px;
  float: left;
}

Pada contoh di atas, konten akan diletakkan di luar jalur melingkar. Argumen tunggal 50% menentukan radius lingkaran, yang dalam kasus khusus ini, berjumlah setengah dari lebar atau tinggi elemen. Mengubah dimensi elemen akan memengaruhi radius bentuk lingkaran. Ini adalah contoh dasar bagaimana CSS Shapes dapat menjadi responsif.

Sebelum melangkah lebih jauh, perlu diingat bahwa CSS Shapes hanya memengaruhi bentuk area float di sekitar elemen. Jika elemen memiliki latar belakang, elemen tersebut tidak akan dipotong oleh bentuk. Untuk mencapai efek tersebut, Anda harus menggunakan properti dari CSS Masking - baik clip-path atau mask-image. Properti clip-path sangat berguna karena mengikuti notasi yang sama dengan CSS Shapes, sehingga Anda dapat menggunakan kembali nilai.

Ilustrasi di seluruh dokumen ini menggunakan kliping untuk menyoroti bentuk dan membantu Anda memahami efeknya.

Kembali ke bentuk lingkaran.

Saat menggunakan persentase untuk radius lingkaran, nilai sebenarnya dihitung dengan formula yang sedikit lebih kompleks: sqrt(width^2 + height^2) / sqrt(2). Hal ini berguna untuk dipahami karena akan membantu Anda membayangkan bentuk lingkaran yang dihasilkan jika dimensi elemen tidak sama.

Semua jenis unit CSS dapat digunakan dalam koordinat fungsi bentuk - px, em, rem, vw, vh, dan sebagainya. Anda dapat memilih yang cukup fleksibel atau kaku untuk kebutuhan Anda.

Anda dapat menyesuaikan posisi lingkaran dengan menetapkan nilai eksplisit untuk koordinat pusatnya.

.element{
  shape-outside: circle(50% at 0 0);
}

Tindakan ini akan memosisikan pusat lingkaran di titik awal sistem koordinat. Apa yang dimaksud dengan sistem koordinat? Di sinilah kami memperkenalkan kotak referensi.

Kotak referensi untuk CSS Shapes

Kotak referensi adalah kotak virtual di sekitar elemen, yang menetapkan sistem koordinat yang digunakan untuk menggambar dan memosisikan bentuk. Origin sistem koordinat berada di sudut kiri atas dengan sumbu X mengarah ke kanan dan sumbu Y mengarah ke bawah.

Ingat bahwa shape-outside mengubah bentuk area float yang akan dibungkus oleh konten. Area float meluas ke tepi luar kotak yang ditentukan oleh properti margin. Ini disebut margin-box dan merupakan kotak referensi default untuk bentuk jika tidak ada yang disebutkan secara eksplisit.

Dua deklarasi CSS berikut memiliki hasil yang sama:

.element{
  shape-outside: circle(50% at 0 0);
  /* identical to: */
  shape-outside: circle(50% at 0 0) margin-box;
}

Kita belum menetapkan margin pada elemen. Pada tahap ini, dapat diasumsikan bahwa origin sistem koordinat dan pusat lingkaran berada di sudut kiri atas area konten elemen. Hal ini berubah saat Anda menetapkan margin:

.element{
  shape-outside: circle(50% at 0 0) margin-box;
  margin: 100px;
}

Origin sistem koordinat kini berada di luar area konten elemen (100 px ke atas dan 100 px ke kiri), begitu juga dengan pusat lingkaran. Nilai yang dihitung dari radius lingkaran juga bertambah untuk memperhitungkan peningkatan permukaan sistem koordinat yang ditetapkan oleh kotak referensi margin-box.