CSS - Bentuk: Panduan Pemula untuk Mengatur Aliran Konten

Hai teman-teman desainer web yang ambisius! Hari ini, kita akan melompat ke dunia yang menarik dari CSS bentuk. Sebagai guru komputer tetangga yang ramah, saya di sini untuk membimbing Anda dalam perjalanan ini, langkah demi langkah. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya - kita akan mulai dari dasar dan kemudian naik tingkat. Jadi, ambil secangkir kopi (atau teh, jika itu hal Anda), dan mari kita mulai!

Apa Itu CSS Bentuk?

Sebelum kita masuk ke detailnya, mari kita pahami apa itu CSS bentuk. Bayangkan Anda menata furnitur di dalam ruangan. Anda tidak ingin semuanya berbentuk kotak sempurna, kan? Itu di mana CSS bentuk memasuki permainan - mereka memungkinkan kita untuk menciptakan tata letak yang menarik dengan menentukan area di sekitar mana teks akan mengalir.

Properti shape-outside

Pada hati dari CSS bentuk adalah properti shape-outside. Properti magis ini memungkinkan kita untuk menentukan bentuk yang teks akan mengalir di sekitarnya. Itu seperti memberitahu teks Anda, "Hai, ada bentuk tak terlihat di sini. Jangan bertabrakan dengannya!"

Sintaks

Sintaks dasar untuk shape-outside cukup sederhana:

.element {
shape-outside: value;
}

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

Nilai yang Mungkin untuk shape-outside

Sekarang, mari kita lihat berbagai bentuk yang kita bisa buat. Saya sudah siapkan 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 dipotong
path()	Menentukan bentuk menggunakan path SVG
linear-gradient()	Menggunakan gradien linear untuk menentukan bentuk

Wah, itu adalah daftar yang cukup panjang! Jangan khawatir, kita akan membahas masing-masing dari ini dengan contoh.

Terpakai untuk

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

Mari Buat 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 sedikit ruang pribadi!

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 rapat, 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 keseluruhan elemen, termasuk border.

CSS shape-outside - circle()

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

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

CSS shape-outside - ellipse()

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

Dengan ellipse(), kita bisa menciptakan bentuk elips. Itu sempurna untuk saat Anda ingin menambahkan sentuhan telur ke desain Anda! (Maaf, saya tidak bisa menahan dad joke itu.)

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 transparansi 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 bisa menciptakan bentuk apa pun Anda inginkan dengan menentukan titiknya. Dalam contoh ini, kita menciptakan 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 menciptakan kotak yang dipotong dengan sudut yang bundar. Itu sempurna untuk menciptakan 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 menciptakan 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 menciptakan bentuk diagonal. Itu cara bagus untuk menambahkan kesan sudut ke desain Anda!

Properti Terkait shape-outside

Untuk memaksimalkan shape-outside, Anda sering kali akan menggunakannya bersama properti yang terkait:

• shape-image-threshold: Menentukan threshold kanal alfa untuk mengekstrak bentuk dari gambar.
• shape-margin: Menambahkan 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 menciptakan bentuk bintang dari gambar, dengan threshold 0.5 dan margin 20px di sekitar bentuk.

Penutup

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

Saat kita menutup, saya teringat kata-kata seorang siswa yang pernah mengatakan kepadaku, "CSS bentuk adalah seperti magi - mereka membuat yang mustahil menjadi mungkin!" Dan Anda tahu apa? Dia benar. Dengan CSS bentuk, Anda bisa transformasi tata letak yang membosankan menjadi karya seni.

Jadi, pergilah dan bentuklah desain web Anda! Dan ingat, di dunia CSS, tidak ada kesalahan, hanya kecelakaan kecil yang gembira (seperti yang kata Bob Ross). Selamat coding!

Credits: Image by storyset