Memulai Bentuk CSS

Menggabungkan konten di sekitar jalur kustom

Razvan Caliman
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. Bentuk CSS memungkinkan desainer web menggabungkan konten di sekitar jalur kustom, 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.

Mengekstrak bentuk dari gambar
<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 adalah kuncinya 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 di-float ke kiri, area float akan dibuat di sebelah kanan cangkir. Meskipun Anda dapat membuat gambar dengan celah di kedua sisi, konten hanya akan melingkari bentuk di sisi yang berlawanan yang ditetapkan oleh properti float, kiri atau kanan, tidak pernah keduanya.

Di masa mendatang, Anda dapat menggunakan shape-outside pada elemen yang tidak mengambang 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 akan dibahas nanti.

Fungsi circle()

Ilustrasi nilai bentuk 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 bentuk `circle()` + clip-path

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 satuan 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);
}

Tindakan 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.

Sistem koordinat untuk Bentuk CSS

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.

Sistem koordinat margin-box dengan dan tanpa margin
Ada beberapa opsi kotak referensi yang dapat dipilih: `margin-box`, `border-box`, `padding-box`, dan `content-box`. Namanya menyiratkan batasnya. Sebelumnya, kita telah menjelaskan `margin-box`. `border-box` dibatasi oleh tepi luar batas elemen, `padding-box` dibatasi oleh padding elemen, sedangkan `content-box` identik dengan area permukaan sebenarnya yang digunakan oleh konten dalam elemen.
Ilustrasi semua kotak referensi

Hanya satu kotak referensi yang dapat digunakan pada waktu tertentu dengan deklarasi shape-outside. Setiap kotak referensi akan memengaruhi bentuk dengan cara yang berbeda dan terkadang halus. Ada artikel lain yang membahas lebih mendalam dan membantu Anda memahami kotak referensi untuk Bentuk CSS.

Fungsi ellipse()

Ilustrasi nilai bentuk ellipse()

Elips terlihat seperti lingkaran yang ditekan. Parameter ini ditentukan sebagai ellipse(rx ry at cx cy), dengan rx dan ry adalah jari-jari untuk elips pada sumbu X dan sumbu Y, sedangkan cx dan cy adalah koordinat untuk pusat elips.

.element{
  shape-outside: ellipse(150px 300px at 50% 50%);
  width: 300px;
  height: 600px;
}

Nilai persentase akan dihitung dari dimensi sistem koordinat. Tidak perlu matematika aneh di sini. Anda dapat menghilangkan koordinat untuk pusat elips dan koordinat tersebut akan disimpulkan dari pusat sistem koordinat.

Jari-jari pada sumbu X dan Y juga dapat ditentukan dengan kata kunci: farthest-side menghasilkan jari-jari yang sama dengan jarak antara pusat elips dan sisi kotak referensi yang paling jauh darinya, sedangkan closest-side berarti kebalikannya - gunakan jarak terpendek antara pusat dan sisi.

.element{
  shape-outside: ellipse(closest-side farthest-side at 50% 50%);
  /* identical to: */
  shape-outside: ellipse(150px 300px at 50% 50%);
  width: 300px;
  height: 600px;
}

Hal ini dapat berguna saat dimensi elemen (atau kotak referensi) dapat berubah dengan cara yang tidak dapat diprediksi, tetapi Anda ingin bentuk elips beradaptasi.

Kata kunci farthest-side dan closest-side yang sama juga dapat digunakan untuk radius dalam fungsi bentuk circle().

Fungsi polygon()

Ilustrasi nilai bentuk polygon()

Jika lingkaran dan elips terlalu membatasi, fungsi bentuk poligon akan membuka banyak opsi. Formatnya adalah polygon(x1 y1, x2 y2, ...) tempat Anda menentukan pasangan koordinat x y untuk setiap verteks (titik) poligon. Jumlah minimum pasangan untuk menentukan poligon adalah tiga, yaitu segitiga.

.element{
  shape-outside: polygon(0 0, 0 300px, 300px 600px);
  width: 300px;
  height: 600px;
}

Verteks ditempatkan pada sistem koordinat. Untuk poligon responsif, Anda dapat menggunakan nilai persentase untuk sebagian atau semua koordinat.

.element{
  /* polygon responsive to font-size*/
  shape-outside: polygon(0 0, 0 100%, 100% 100%);
  width: 20em;
  height: 40em;
}

Ada parameter fill-rule opsional, diimpor dari SVG, yang menginstruksikan browser cara mempertimbangkan “kedalaman” poligon jika ada jalur yang berpotongan sendiri atau bentuk tertutup. Joni Trythall menjelaskan dengan sangat baik cara kerja properti fill-rule di SVG. Jika tidak ditentukan, fill-rule ditetapkan secara default ke nonzero.

.element{
  shape-outside: polygon(0 0, 0 100%, 100% 100%);
  /* identical to: */
  shape-outside: polygon(nonzero, 0 0, 0 100%, 100% 100%);
}

Fungsi inset()

Fungsi bentuk inset() memungkinkan Anda membuat bentuk persegi panjang yang akan digunakan untuk menggabungkan konten. Hal ini mungkin terdengar berlawanan dengan intuisi mengingat premis awal bahwa CSS Shapes membebaskan konten web dari kotak sederhana. Mungkin saja. Saya belum menemukan kasus penggunaan untuk inset() yang belum dapat dicapai dengan float dan margin atau dengan polygon(). Meskipun inset() memberikan ekspresi yang lebih mudah dibaca untuk bentuk persegi panjang daripada polygon().

Notasi lengkap untuk fungsi bentuk inset adalah inset(top right bottom left border-radius). Empat argumen posisi pertama adalah offset ke dalam dari tepi elemen. Argumen terakhir adalah radius batas untuk bentuk persegi panjang. Ini bersifat opsional, sehingga Anda dapat menghapusnya. Ini mengikuti notasi singkat border-radius yang sudah Anda gunakan di CSS.

.element{
  shape-outside: inset(100px 100px 100px 100px);
  /* yields a rectangular shape which is 100px inset on all sides */
  float: left;
}

Membuat bentuk dari kotak referensi

Jika tidak menentukan fungsi bentuk ke properti shape-outside, Anda dapat mengizinkan browser untuk memperoleh bentuk dari kotak referensi elemen. Kotak referensi default-nya adalah margin-box. Sejauh ini tidak ada yang eksotis, begitulah cara kerja float. Namun, dengan menerapkan teknik ini, Anda dapat menggunakan kembali geometri elemen. Mari kita lihat properti border-radius.

Jika Anda menggunakannya untuk membulatkan sudut elemen yang mengambang, Anda akan mendapatkan efek pemangkasan, tetapi area mengambang tetap persegi panjang. Tambahkan shape-outside: border-box untuk menggabungkan kontur yang dibuat oleh border-radius.

Mengekstrak bentuk dari border-radius elemen menggunakan kotak referensi border-box
.element{
  border-radius: 50%;
  shape-outside: border-box;
  float: left;
}

Tentu saja, Anda dapat menggunakan semua kotak referensi dengan cara ini. Berikut adalah penggunaan lain untuk bentuk turunan - offset pull-quote.

Membuat kutipan offset menggunakan kotak referensi kotak konten

Anda dapat mencapai efek kutipan tarik offset hanya dengan menggunakan properti float dan margin. Namun, Anda harus memosisikan elemen kutipan dalam hierarki HTML pada titik yang Anda inginkan untuk dirender.

Berikut cara mendapatkan efek kutipan tarik offset yang sama dengan fleksibilitas tambahan:

.pull-quote{
  shape-outside: content-box;
  margin-top: 200px;
  float: left;
}

Kita menetapkan kotak referensi content-box secara eksplisit untuk sistem koordinat bentuk. Dalam hal ini, jumlah konten dalam kutipan menarik menentukan bentuk yang akan digunakan untuk menggabungkan konten di luar. Properti margin-top digunakan di sini untuk memosisikan (mengabaikan) kutipan, terlepas dari posisinya dalam hierarki HTML.

Margin bentuk

Anda akan melihat bahwa menggabungkan konten di sekitar bentuk dapat membuatnya terlalu dekat dengan elemen. Anda dapat menambahkan spasi di sekitar bentuk dengan properti shape-margin.

.element{
  shape-outside: circle(40%);
  shape-margin: 1em;
  float: left;
}

Efeknya mirip dengan yang biasa Anda gunakan dari penggunaan properti margin reguler, tetapi shape-margin hanya memengaruhi ruang di sekitar nilai shape-outside. Tindakan ini akan menambahkan spasi di sekitar bentuk hanya jika ada ruang untuknya dalam sistem koordinat. Itulah sebabnya dalam contoh di atas, jari-jari lingkaran ditetapkan ke 40%, bukan 50%. Jika radius ditetapkan ke 50%, lingkaran akan menempati semua ruang dalam sistem koordinat sehingga tidak ada ruang untuk efek shape-margin. Ingat, bentuk pada akhirnya dibatasi pada margin-box elemen (elemen ditambah margin di sekitarnya). Jika bentuk lebih besar dan meluap, bentuk tersebut akan dipangkas ke margin-box dan Anda akan mendapatkan bentuk persegi panjang.

Penting untuk memahami bahwa shape-margin hanya menerima satu nilai positif. Tidak memiliki notasi panjang. Apa itu shape-margin-top untuk lingkaran?

Menganimasikan bentuk

Anda dapat menggabungkan bentuk CSS dengan banyak fitur CSS lainnya, seperti transisi dan animasi. Namun, saya harus menekankan bahwa pengguna merasa sangat terganggu saat tata letak teks berubah saat mereka membaca. Perhatikan dengan cermat pengalaman jika Anda memutuskan untuk menganimasikan bentuk.

Anda dapat menganimasikan jari-jari dan pusat untuk bentuk circle() dan ellipse() selama jari-jari dan pusat tersebut ditentukan dalam nilai yang dapat diinterpolasi oleh browser. Anda dapat beralih dari circle(30%) ke circle(50%). Namun, menganimasikan antara circle(closest-side) hingga circle(farthest-side) akan membebani browser.

.element{
  shape-outside: circle(30%);
  transition: shape-outside 1s;
  float: left;
}

.element:hover{
  shape-outside: circle(50%);
}
GIF lingkaran animasi

Efek yang lebih menarik dapat dicapai saat menganimasikan bentuk polygon(), dengan catatan penting bahwa poligon harus memiliki jumlah vertex yang sama di antara dua status animasi. Browser tidak dapat melakukan interpolasi jika Anda menambahkan atau menghapus vertex.

Salah satu caranya adalah dengan menambahkan jumlah maksimum vertex yang Anda perlukan dan memosisikan vertex tersebut secara berkelompok dalam status animasi tempat Anda ingin lebih sedikit tepi yang terlihat pada bentuk.

.element{
  /* four vertices (looks like rectangle) */
  shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: shape-outside 1s;
}

.element:hover{
  /* four vertices, but second and third overlap (looks like triangle) */
  shape-outside: polygon(0 0, 100% 50%, 100% 50%, 0 100%);
}
GIF segitiga animasi

Menggabungkan konten di dalam bentuk

Screenshot demo Alice in Wonderland yang menggunakan Bentuk CSS untuk menggabungkan konten

Draf awal spesifikasi Bentuk CSS menyertakan properti shape-inside yang memungkinkan Anda menggabungkan konten di dalam bentuk. Bahkan ada implementasi di Chrome dan Webkit untuk sementara waktu. Namun, menggabungkan konten yang diposisikan secara arbitrer di dalam jalur kustom memerlukan lebih banyak upaya dan riset untuk mencakup semua kemungkinan skenario dan menghindari bug. Itulah sebabnya properti shape-inside telah ditangguhkan ke Bentuk CSS Level 2 dan penerapannya telah ditarik.

Namun, dengan sedikit usaha dan kompromi, Anda masih dapat mencapai efek menggabungkan konten di dalam bentuk kustom. Caranya adalah dengan menggunakan dua elemen yang mengambang dengan shape-outside, yang diposisikan di sisi yang berlawanan dari penampung. Komprominya adalah Anda harus menggunakan satu atau dua elemen kosong yang tidak memiliki makna semantik, tetapi berfungsi sebagai penyangga untuk menciptakan ilusi bentuk di dalamnya.

<div>
  <div class='left-shape'></div>
  <div class='right-shape'></div>

  Lorem ipsum...
</div>

Posisi elemen strut .left-shape dan .right-shape di bagian atas penampung penting karena akan di-float ke kiri dan ke kanan untuk mengapit konten.

.left-shape{
  shape-outside: polygon(0 0, ...);
  float: left;
  width: 50%;
  height: 100%;
}

.right-shape{
  shape-outside: polygon(50% 0, ...);
  float: right;
  width: 50%;
  height: 100%;
}
Ilustrasi solusi untuk demo shape-inside untuk Alice

Gaya visual ini membuat dua strut yang mengambang menggunakan semua ruang dalam elemen, tetapi properti shape-outside akan membuat ruang untuk konten lainnya.

Jika Bentuk CSS tidak didukung oleh browser, hal ini akan menghasilkan efek yang tidak menarik dengan mendorong semua konten ke bawah. Itulah sebabnya penting untuk menggunakan fitur ini dengan cara yang terus ditingkatkan.

Pada contoh animasi bentuk sebelumnya, Anda akan melihat bahwa pergeseran teks dapat mengganggu. Tidak semua kasus penggunaan memerlukan bentuk animasi. Namun, Anda dapat menganimasikan properti lain yang berinteraksi dengan Bentuk CSS untuk menambahkan efek yang sesuai.

Dalam demonstrasi Alice in Wonderland tentang Bentuk CSS, kita menggunakan posisi scroll untuk mengubah margin atas konten. Teks terjepit di antara dua elemen yang mengambang. Saat bergerak ke bawah, elemen harus menata ulang sesuai dengan shape-outside dari dua elemen yang mengambang. Hal ini memberikan kesan bahwa teks akan masuk ke dalam lubang kelinci dan menambah pengalaman bercerita. Berbahaya? Mungkin. Tapi memang terlihat keren.

Karena tata letak teks dilakukan secara native oleh browser, performanya lebih baik daripada menggunakan solusi JavaScript. Namun, mengubah margin-top saat men-scroll akan memicu banyak peristiwa relayout dan paint, dan hal itu dapat secara signifikan mengurangi performa. Gunakan dengan hati-hati. Namun, menggunakan Bentuk CSS tanpa menganimasikannya tidak akan menurunkan performa yang dapat dirasakan.

Progressive enhancement

Mulailah dengan mengasumsikan bahwa browser tidak memiliki dukungan Bentuk CSS dan buat berdasarkan asumsi tersebut saat Anda mendeteksi fitur tersebut. Modernizr adalah solusi yang baik untuk melakukan deteksi fitur dan ada pengujian untuk Bentuk CSS di bagian 'Deteksi non-inti'.

Beberapa browser menyediakan deteksi fitur di CSS melalui aturan @supports tanpa memerlukan library eksternal. Google Chrome, yang juga mendukung Bentuk CSS, memahami aturan @supports. Berikut cara menggunakannya untuk meningkatkan kualitas secara bertahap:

.element{
  /* styles for all browsers */
}

@supports (shape-outside: circle(50%)){
  /* styles only for browsers which support CSS Shapes */
  .element{
    shape-outside: circle(50%);
  }
}

Lea Verou telah menulis lebih lanjut tentang cara menggunakan aturan @supports CSS.

Disambiguasi dari Pengecualian CSS

Yang kita kenal sekarang sebagai Bentuk CSS sebelumnya disebut Pengecualian dan Bentuk CSS pada awal spesifikasi. Perubahan penamaan mungkin tampak sebagai nuansa, tetapi sebenarnya sangat penting. Pengecualian CSS, yang kini menjadi spesifikasi terpisah, memungkinkan penggabungan konten di sekitar elemen yang diposisikan secara arbitrer, tanpa memerlukan properti float. Bayangkan menggabungkan konten di sekitar elemen yang diposisikan secara mutlak; itu adalah kasus penggunaan untuk Pengecualian CSS. Bentuk CSS hanya menentukan jalur tempat konten akan digabungkan.

Jadi, bentuk dan pengecualian bukanlah hal yang sama, tetapi saling melengkapi. Bentuk CSS tersedia di browser saat ini, sedangkan Pengecualian CSS belum diterapkan dengan interaksi bentuk.

Alat untuk menggunakan Bentuk CSS

Anda dapat membuat jalur di alat pembuatan gambar klasik, tetapi pada saat penulisan ini, tidak ada satu pun alat yang mengekspor sintaksis yang diperlukan untuk nilai Bentuk CSS. Meskipun demikian, bekerja seperti itu tidak terlalu praktis.

Bentuk CSS dimaksudkan untuk digunakan di browser, tempat bentuk tersebut bereaksi terhadap elemen lain di halaman. Hal ini sangat berguna untuk memvisualisasikan efek pengeditan bentuk pada konten yang mengelilinginya. Ada beberapa alat untuk membantu Anda dalam alur kerja ini:

Brackets: Ekstensi CSS Shapes Editor untuk Brackets menggunakan mode pratinjau langsung editor kode untuk menempatkan editor interaktif guna mengedit nilai bentuk.

Google Chrome: Ekstensi CSS Shapes Editor untuk Google Chrome memperluas Developer Tools browser dengan kontrol untuk membuat dan mengedit bentuk. Tindakan ini akan menempatkan editor interaktif di atas elemen yang dipilih.

Pemeriksa di Google Chrome memiliki dukungan bawaan untuk menandai bentuk. Arahkan kursor ke elemen dengan properti shape-outside dan elemen tersebut akan menyala untuk mengilustrasikan bentuknya.

Bentuk dari gambar: Jika Anda lebih suka membuat gambar dan meminta browser mengekstrak bentuk dari gambar tersebut, Rebecca Hauck telah menulis tutorial yang bagus untuk Photoshop.

Polyfill: Google Chrome adalah browser utama pertama yang mengirimkan Bentuk CSS. Dukungan untuk fitur ini akan segera hadir di iOS 8 dan Safari 8 Apple. Vendor browser lain dapat mempertimbangkannya di masa mendatang. Hingga saat itu, ada polyfill Bentuk CSS untuk memberikan dukungan dasar.

Kesimpulan

Di web, konten sebagian besar terjebak dalam kotak sederhana. Bentuk CSS menyediakan cara untuk membuat tata letak yang ekspresif, yang menjembatani kesenjangan fidelitas antara desain web dan cetak. Tentu saja, bentuk dapat disalahgunakan dan menimbulkan gangguan. Namun, jika diterapkan dengan selera dan penilaian yang baik, bentuk dapat meningkatkan kualitas presentasi konten dan memfokuskan perhatian pengguna dengan cara yang unik bagi mereka.

Berikut adalah koleksi karya dari orang lain, sebagian besar dari media cetak, yang menunjukkan penggunaan menarik untuk tata letak non-persegi panjang. Semoga hal ini menginspirasi Anda untuk mencoba Bentuk CSS dan bereksperimen dengan ide desain baru.

Terima kasih banyak kepada Pearl Chen, Alan Stearns, dan Zoltan Horvath yang telah meninjau artikel ini dan memberikan insight yang berharga.