CSS Academy · Pelajaran

shape-outside untuk Pembungkusan Teks

Bungkus teks mengelilingi bentuk kustom menggunakan shape-outside pada elemen yang diapungkan.

shape-outside untuk Pembungkusan Teks adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.

Modul Bentuk CSS

Modul Bentuk CSS memungkinkan teks mengalir mengelilingi bentuk nonpersegi panjang. Properti utamanya adalah shape-outside, yang menentukan bentuk yang dikelilingi aliran teks.

Persyaratan shape-outside

shape-outside hanya berfungsi pada elemen mengambang. Elemen harus dibuat mengambang (ke kiri atau kanan) agar teks di sebelahnya mengalir mengelilingi bentuk yang ditentukan.

<div class="circle-float"></div>
<p>Text wraps around the circular float, following the shape-outside boundary instead of the element's rectangular box, creating a natural flow around curved shapes for magazine-style layouts.</p>

shape-outside: circle()

Teks mengalir mengelilingi jalur lingkaran yang ditentukan secara relatif terhadap elemen mengambang:

<div class="profile-image"></div>
<p>Paragraph text wraps neatly around the circular profile image thanks to shape-outside matching the visual border-radius.</p>

shape-outside: ellipse()

Teks mengalir mengelilingi jalur elips:

<div class="cutout"></div>
<p>Text on the left flows around the elliptical shape on the right, curving inward and outward with the ellipse's boundary.</p>

shape-outside: polygon()

Teks mengalir mengelilingi jalur poligon — memungkinkan tata letak editorial yang kompleks:

<div class="diagonal-image"></div>
<p>Text follows the diagonal polygon edge as it wraps down the page.</p>

shape-outside dengan Gambar

Berikan URL untuk menggunakan saluran alfa gambar sebagai batas bentuk. Teks mengalir mengelilingi area gambar yang tidak transparan:

<div class="character"></div>
<p>Text hugs the silhouette defined by the gradient's alpha channel, simulating shape-outside from an image mask.</p>

shape-margin

shape-margin menambahkan jarak antara jalur shape-outside dan teks yang mengelilinginya:

<div class="shape-float"></div>
<p>A 16px shape-margin adds breathing room between the circular float and the wrapping text.</p>

shape-image-threshold

Saat menggunakan gambar untuk shape-outside, shape-image-threshold menetapkan ambang transparansi alfa (0 hingga 1) yang menentukan batas bentuk.

Aplikasi Desain

CSS Shapes memungkinkan tata letak editorial bergaya majalah, kutipan unggulan dengan teks yang mengalir mengikuti bentuk gambar, serta area huruf awal besar dengan aliran teks yang tidak beraturan — efek yang sebelumnya hanya dapat dicapai dalam desain cetak atau dengan SVG.

Dukungan Peramban

shape-outside dengan bentuk dasar (circle, ellipse, polygon, inset) didukung di semua peramban modern. shape-outside dengan URL gambar memiliki dukungan yang lebih luas, tetapi hasilnya dapat berbeda. Selalu lakukan pengujian.

Contoh Praktis: Huruf Awal Besar

Area huruf awal besar berbentuk segitiga yang membuat teks mengalir mengelilingi huruf dekoratif berukuran besar:

<div><span class="drop-cap">T</span>his paragraph begins with a large drop cap letter that text wraps around using shape-outside on the enlarged first character, a classic print typography effect brought to CSS.</div>

Pemeriksaan Singkat

Apa yang diperlukan agar shape-outside dapat berfungsi pada sebuah elemen?

Ringkasan

shape-outside memungkinkan teks mengalir mengelilingi bentuk nonpersegi panjang yang ditentukan pada elemen yang diapungkan. Bentuknya dapat berupa lingkaran, elips, poligon, atau saluran alfa gambar. Gunakan shape-margin untuk memberikan ruang. Gabungkan dengan clip-path agar tampilan elemen secara visual sesuai dengan bentuk yang ditentukannya.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “shape-outside untuk Pembungkusan Teks” gratis?

Ya — teks lengkap “shape-outside untuk Pembungkusan Teks” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “shape-outside untuk Pembungkusan Teks”?

Bungkus teks mengelilingi bentuk kustom menggunakan shape-outside pada elemen yang diapungkan. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai CSS Academy?

Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “shape-outside untuk Pembungkusan Teks” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke CSS Academy