Halaman ini diterjemahkan oleh Cloud Translation API.

Memulai Bentuk CSS

Menggabungkan konten di sekitar jalur kustom

Razvan Caliman

Selama ini, desainer web dipaksa untuk membuat dalam batasan persegi panjang. Sebagian besar konten di web masih terjebak dalam kotak sederhana karena sebagian besar upaya kreatif dalam tata letak non-persegi panjang berakhir dengan kekecewaan. Hal ini akan segera berubah dengan diperkenalkannya Bentuk CSS, yang tersedia mulai dari Chrome 37. CSS Shapes memungkinkan desainer web untuk membungkus 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 juga naif seperti saya saat pertama kali mengapungkan gambar dengan bagian transparan yang mengharapkan konten akan digabungkan dan mengisi celah, tetapi ternyata kecewa dengan bentuk gabungan persegi panjang yang tetap 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 buram). Jadi, shape-image-threshold: 0.5 berarti hanya piksel dengan opasitas 50% dan yang lebih tinggi yang akan digunakan untuk membuat bentuk.

Properti float berperan 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 float di sisi yang berlawanan dengan nilai float-nya. Misalnya, jika elemen dengan gambar cangkir kopi diapung di kiri, area {i>float<i} akan dibuat di sebelah kanan cangkir. Meskipun Anda dapat merancang 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 dapat menggunakan shape-outside pada elemen yang tidak di-float dengan pengenalan CSS Exclusions.

Membuat bentuk secara manual

Selain mengekstrak bentuk dari gambar, Anda juga dapat mengenkodenya 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. Selengkapnya tentang kotak referensi dalam beberapa saat.

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

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

Pada contoh di atas, konten akan melingkari bagian luar jalur melingkar. Satu argumen 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 tentang bagaimana Bentuk CSS dapat menjadi responsif.

Sebelum melanjutkan, ada hal yang perlu diingat: penting untuk diingat bahwa Bentuk CSS hanya memengaruhi bentuk area mengambang di sekitar elemen. Jika elemen memiliki latar belakang, latar belakang tersebut tidak akan dipangkas oleh bentuk. Untuk mendapatkan efek tersebut, Anda harus menggunakan properti dari Masking CSS - clip-path atau mask-image. Properti clip-path sangat berguna karena mengikuti notasi yang sama dengan Bentuk CSS, sehingga Anda dapat menggunakan kembali nilai.

Ilustrasi di seluruh dokumen ini menggunakan pemangkasan 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 rumit: sqrt(width^2 + height^2) / sqrt(2). Memahami hal ini 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 salah satu 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);
}

Ini memosisikan pusat lingkaran di asal sistem koordinat. Apa yang dimaksud dengan sistem koordinat? Di sinilah kita memperkenalkan kotak referensi.

Kotak referensi untuk Bentuk CSS

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 mengambang tempat konten akan digabungkan. 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, Anda dapat mengasumsikan bahwa origin sistem koordinat dan pusat lingkaran berada di sudut kiri atas area konten elemen. Hal ini akan berubah jika 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 piksel ke atas dan 100 piksel ke kiri), begitu juga dengan pusat lingkaran. Nilai radius lingkaran yang dihitung juga bertambah untuk memperhitungkan peningkatan permukaan sistem koordinat yang ditetapkan oleh kotak referensi margin-box.