Halaman ini diterjemahkan oleh Cloud Translation API.

Memulai Bentuk CSS

Menggabungkan konten di sekitar jalur kustom

Razvan Caliman

Untuk waktu yang lama, desainer web telah dipaksa untuk membuat dalam batasan persegi panjang. Sebagian besar konten di web masih terperangkap dalam kotak-kotak sederhana karena sebagian besar usaha kreatif yang mengarah ke tata letak non-persegi panjang berakhir dengan rasa frustrasi. Hal ini akan segera berubah dengan diperkenalkannya Bentuk CSS, yang tersedia mulai Chrome 37. Bentuk CSS memungkinkan desainer web untuk mengemas konten di sekitar jalur khusus, seperti lingkaran, elips dan poligon, sehingga bebas dari batasan persegi panjang.

Bentuk dapat ditentukan secara manual atau dapat disimpulkan dari gambar.

Mari kita lihat contoh yang sangat sederhana.

Mungkin Anda pernah naif seperti saya ketika pertama kali mengambangkan gambar dengan bagian transparan yang mengharapkan konten membungkus dan mengisi celah, tetapi kecewa dengan bentuk pembungkusan persegi panjang yang terus ada di sekitar elemen. Bentuk CSS 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 tidak tembus pandang). Jadi, shape-image-threshold: 0.5 berarti hanya piksel dengan opasitas 50% ke atas yang akan digunakan untuk membuat bentuk.

Properti float sangat penting di sini. Meskipun properti shape-outside menentukan bentuk area tempat konten akan digabungkan, tanpa float, Anda tidak akan melihat efek bentuk.

Elemen memiliki area mengambang yang berada di sisi berlawanan dari nilai float. Contohnya, jika elemen dengan gambar cangkir kopi melayang ke kiri, area {i>float<i} akan dibuat di sebelah kanan cangkir. Meskipun Anda dapat merekayasa gambar dengan celah di kedua sisi, konten hanya akan membungkus bentuk di sisi berlawanan yang ditentukan oleh properti float, kiri atau kanan, tidak pernah keduanya.

Di masa mendatang, Anda akan dapat menggunakan shape-outside pada elemen yang tidak mengambang dengan pengantar Pengecualian CSS.

Membuat bentuk secara manual

Selain mengekstrak bentuk dari gambar, Anda juga dapat membuat kodenya secara manual. Anda dapat memilih dari beberapa nilai fungsional untuk membuat bentuk: circle(), ellipse(), inset(), dan polygon(). Setiap fungsi bentuk menerima satu set koordinat dan dipasangkan dengan kotak referensi yang menetapkan sistem koordinat. Selengkapnya tentang kotak referensi akan segera.

Fungsi lingkaran()

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, bagian tengah elemen (perpotongan diagonalnya) akan digunakan sebagai default.

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

Pada contoh di atas, konten akan mengelilingi bagian 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 Bentuk CSS dapat menjadi responsif.

Sebelum melangkah lebih jauh, hal singkat: penting untuk diingat bahwa Bentuk CSS hanya memengaruhi bentuk area mengambang di sekitar elemen. Jika elemen memiliki latar belakang, itu tidak akan terpotong oleh bentuk. Untuk mendapatkan efek tersebut, Anda harus menggunakan properti dari Penyamaran CSS - baik clip-path maupun mask-image. Properti clip-path sangat berguna karena mengikuti notasi yang sama dengan Bentuk CSS, sehingga Anda dapat menggunakan kembali nilai.

Ilustrasi bentuk `lingkaran()` + clip-path

Ilustrasi di seluruh dokumen ini menggunakan clipping 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(lebar^2 + tinggi^2) / sqrt(2). Hal ini berguna untuk memahami hal ini karena akan membantu Anda membayangkan seperti apa bentuk lingkaran yang dihasilkan jika dimensi elemen tidak sama.

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

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

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

Tindakan ini memosisikan pusat lingkaran di asal sistem koordinat. Apa itu sistem koordinat? Di sinilah kami memperkenalkan kotak referensi.

Kotak referensi untuk Bentuk CSS

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

Perlu diingat bahwa shape-outside mengubah bentuk area float di sekitar konten yang akan digabungkan. Area mengambang diperluas ke tepi luar kotak yang ditentukan oleh properti margin. Ini disebut margin-box dan merupakan kotak referensi default untuk suatu bentuk jika tidak ada yang disebutkan secara eksplisit.

Dua deklarasi CSS berikut memiliki hasil yang identik:

.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, kita dapat mengasumsikan bahwa asal sistem koordinat dan pusat lingkaran berada di sudut kiri atas area konten elemen. Ini akan berubah saat Anda menetapkan margin:

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

Asal sistem koordinat kini berada di luar area konten elemen (100px ke atas dan 100px kiri), seperti halnya pusat lingkaran. Nilai komputasi radius lingkaran juga berkembang untuk memperhitungkan peningkatan permukaan sistem koordinat yang ditetapkan oleh kotak referensi margin-box.