CSS - Bentuk: Panduan Pemula untuk Mengatur Aliran Konten

Hai sana, calon desainer web! Hari ini, kita akan melihat dunia menarik CSS bentuk. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya di sini untuk mengorbit Anda dalam perjalanan ini, langkah demi langkah. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya - kita akan mulai dari dasar dan naik turun. Jadi, ambil secangkir kopi (atau teh, jika itu hal Anda), dan mari kita mulai!

Apa Itu CSS Bentuk?

Sebelum kita melompat ke hal yang teknis, mari kita mengerti apa yang dimaksud oleh CSS bentuk. Bayangkan Anda menata furnitur di dalam ruangan. Anda tidak ingin semuanya berbentuk kotak yang sempurna, kan? Itu di mana CSS bentuk memasuki - mereka memungkinkan kita untuk membuat tata letak yang menarik dengan menentukan area di sekitar mana teks akan mengalir.

Properti shape-outside

Di hati dari CSS bentuk adalah properti shape-outside. Properti magis ini memungkinkan kita untuk menentukan bentuk yang teks akan mengalir di sekitarnya. Itu seperti mengatakan kepada teks Anda, "Hey, ada bentuk tak terlihat di sini. Jangan menyentuhnya!"

Sintaks

Sintaks dasar untuk shape-outside cukup mudah:

.element {
shape-outside: value;
}

Mudah, kan? Tetapi kesenangan sebenarnya mulai saat kita mulai bermain dengan nilai-nilai berbeda!

Nilai yang Mungkin untuk shape-outside

Sekarang, mari kita lihat berbagai bentuk yang kita dapat buat. Saya telah menyiapkan tabel praktis untuk Anda:

Nilai	Deskripsi
margin-box	Menggunakan kotak margin elemen sebagai bentuk
content-box	Menggunakan kotak konten elemen sebagai bentuk
padding-box	Menggunakan kotak padding elemen sebagai bentuk
border-box	Menggunakan kotak border elemen sebagai bentuk
circle()	Membuat bentuk lingkaran
ellipse()	Membuat bentuk elips
url()	Menggunakan gambar untuk menentukan bentuk
polygon()	Membuat bentuk poligon
inset()	Membuat kotak yang dimasukkan
path()	Menentukan bentuk menggunakan path SVG
linear-gradient()	Menggunakan gradien linear untuk menentukan bentuk

Wow, itu daftar yang cukup panjang! Jangan khawatir, kita akan melalui setiap nilai ini dengan contoh.

Terpakai untuk

Sebelum kita melompat, penting untuk dicatat bahwa shape-outside hanya berlaku untuk elemen yang diberikan float. Jadi, pastikan elemen Anda memiliki properti float yang diatur!

Mari Bentuknya!

CSS shape-outside - margin-box

.shape {
float: left;
width: 100px;
height: 100px;
background: merah;
shape-outside: margin-box;
margin: 20px;
}

Dalam contoh ini, teks akan mengalir di sekitar kotak margin dari kotak merah. Itu seperti memberikan bentuk Anda ruang pribadi kecil!

CSS shape-outside - content-box

.shape {
float: left;
width: 100px;
height: 100px;
background: biru;
shape-outside: content-box;
padding: 20px;
}

Di sini, teks akan memeluk kotak konten sungguh-sungguh, mengabaikan padding. Itu sempurna untuk saat Anda ingin teks Anda mendekati bentuk Anda!

CSS shape-outside - padding-box

.shape {
float: left;
width: 100px;
height: 100px;
background: hijau;
shape-outside: padding-box;
padding: 20px;
}

Dengan padding-box, teks menghormati padding tetapi mengabaikan border. Itu seperti tamu yang sopan yang tidak ingin memasuki terlalu banyak!

CSS shape-outside - border-box

.shape {
float: left;
width: 100px;
height: 100px;
background: kuning;
shape-outside: border-box;
border: 20px solid hitam;
}

Nilai border-box mencakup border dalam bentuk. Itu bagus untuk saat Anda ingin teks Anda mengalir di sekitar seluruh elemen, termasuk border.

CSS shape-outside - circle()

.shape {
float: left;
width: 100px;
height: 100px;
background: ungu;
shape-outside: circle(50%);
border-radius: 50%;
}

Ini membuat lingkaran sempurna untuk teks Anda mengalir di sekitarnya. Itu seperti memberikan tata letak Anda suatu penghargaan!

CSS shape-outside - ellipse()

.shape {
float: left;
width: 150px;
height: 100px;
background: oranye;
shape-outside: ellipse(40% 50%);
border-radius: 50%;
}

Dengan ellipse(), kita dapat membuat bentuk elips. Itu sempurna untuk saat Anda ingin menambah sentuhan telur ke desain Anda! (Maaf, saya tidak bisa menahan lelucon ayah.)

CSS shape-outside - url()

.shape {
float: left;
width: 200px;
height: 200px;
shape-outside: url('star.png');
background: url('star.png') no-repeat;
background-size: contain;
}

Ini memungkinkan Anda untuk menggunakan gambar untuk menentukan bentuk Anda. Pastikan gambar Anda memiliki transparensi di area tempat Anda ingin teks mengalir!

CSS shape-outside - polygon()

.shape {
float: left;
width: 200px;
height: 200px;
shape-outside: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
background: pink;
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

Dengan polygon(), Anda dapat membuat bentuk apa pun Anda inginkan dengan menentukan titiknya. Dalam contoh ini, kita telah membuat bentuk bintang. Itu seperti menjadi ahli geometri!

CSS shape-outside - inset()

.shape {
float: left;
width: 200px;
height: 200px;
shape-outside: inset(20px 30px 40px 10px round 10px);
background: biru muda;
clip-path: inset(20px 30px 40px 10px round 10px);
}

inset() memungkinkan Anda untuk membuat kotak dengan sudut yang bundar. Itu sempurna untuk membuat balon ucapan atau tombol khusus.

CSS shape-outside - path()

.shape {
float: left;
width: 200px;
height: 200px;
shape-outside: path('M 0,0 C 50,0 50,100 100,100 L 100,0 Z');
background: hijau muda;
clip-path: path('M 0,0 C 50,0 50,100 100,100 L 100,0 Z');
}

Fungsi path() memungkinkan Anda untuk membuat bentuk kompleks menggunakan data path SVG. Itu seperti menjadi seniman digital!

CSS shape-outside - linear-gradient()

.shape {
float: left;
width: 200px;
height: 200px;
shape-outside: linear-gradient(45deg, transparent 50%, hitam 50%);
background: linear-gradient(45deg, transparent 50%, hitam 50%);
}

Trik cerdik ini menggunakan gradien untuk membuat bentuk diagonal. Itu cara bagus untuk menambah keanggotaan sudut ke desain Anda!

Properti Terkait CSS shape-outside

Untuk memaksimalkan shape-outside, Anda sering akan menggunakannya bersama properti ini:

• shape-image-threshold: Menentukan ambang batas kanal alpha untuk mengekstrak bentuk dari gambar.
• shape-margin: Menambah margin ke bentuk.

Ini adalah contoh cepat:

.shape {
float: left;
width: 200px;
height: 200px;
shape-outside: url('star.png');
shape-image-threshold: 0.5;
shape-margin: 20px;
background: url('star.png') no-repeat;
background-size: contain;
}

Kode ini membuat bentuk bintang dari gambar, dengan ambang batas 0.5 dan margin 20px di sekitar bentuk.

Penutup

Dan begitu kita memiliki nya, teman-teman! Kita telah berpergian melalui negeri CSS bentuk, dari kotak sederhana ke path yang kompleks. Ingat, kunci untuk menguasai CSS bentuk adalah eksperimen. Jangan takut untuk bermain dengan nilai-nilai berbeda dan lihat apa yang terjadi.

Ketika kita menutup, saya teringat tentang seorang siswa yang pernah mengatakan kepadaku, "CSS bentuk adalah seperti magi - mereka membuat yang mustahil menjadi mungkin!" Dan Anda tahu apa? Dia sungguh benar. Dengan CSS bentuk, Anda dapat mentransformasi tata letak yang monoton menjadi karya seni.

Jadi, maju dan bentuk desain web Anda! Dan ingat, di dunia CSS, tidak ada kesalahan, hanya kekejangan kecil (seperti yang kata Bob Ross). Selamat coding!

Credits: Image by storyset