Berkreasilah dengan bentuk eksternal – Beragampengetahuan

Terakhir kali saya bertanya, “Mengapa begitu banyak artikel panjang terasa hambar secara visual?” Saya menjelaskan:

“Gambar dalam konten berdurasi panjang tidak hanya dapat (dan sering kali seharusnya) menjadi ilustratif. Gambar juga dapat membentuk cara orang bernavigasi, berinteraksi, dan menafsirkan apa yang mereka baca. Gambar membantu mengatur kecepatan, memengaruhi perasaan pembaca, dan menambahkan kepribadian yang tidak dapat diungkapkan dengan kata-kata saja.”

Lalu saya berbicara tentang kemungkinan ekspresif dari Bentuk CSS dan cara menggunakannya shape-outsideAnda dapat membungkus teks di sekitar saluran alfa gambar untuk menambah energi pada desain Anda dan mempertahankan kesan hidup.

Ada banyak peluang kreatif untuk digunakan shape-outside Saya terkejut itu jarang digunakan. Jadi, bagaimana Anda menggunakannya untuk menambah kepribadian pada desain Anda? Inilah yang saya lakukan.

Profil saya: Patty Meltt adalah bintang musik country pemula yang membutuhkan situs web untuk meluncurkan album dan tur barunya. Dia ingin itu terlihat unik dan berkesan, jadi dia menamakannya “Stuff & Nonsense.” Patty tidak nyata, tetapi tantangan dalam merancang dan mengembangkan situs seperti miliknya memang nyata.

paling shape-outside Panduan dimulai dari lingkaran dan poligon. Ini berguna, tapi hanya menjawab Bagaimana. dibutuhkan oleh para desainer Mengapa — Kalau tidak, itu hanyalah properti CSS lainnya.

Apa pun bentuk subjeknya, setiap gambar ditempatkan di dalam kotak. Secara default, teks mengalir di atas atau di bawah kotak. Jika saya melayangkan gambar ke kiri atau ke kanan, teks akan melingkari persegi panjang, tidak peduli apa yang ada di dalamnya. Itulah batasnya shape-outside Mengatasi.

shape-outside Anda dapat membebaskan diri dari kotak-kotak ini dengan mengaktifkan tata letak yang merespons kerangka gambar. Peralihan dari gambar dalam kotak ke membiarkan konten gambar menentukan komposisi adalah kegunaannya shape-outside Sangat menarik.

Blok teks padat di sekitar gambar lurus akan memberikan kesan statis. Namun teks yang melengkung di sekitar gitar atau di sekitar potret menciptakan gerakan yang membuat cerita lebih menarik dan memikat.

CSS shape-outside Memungkinkan teks mengalir di sekitar bentuk kustom apa pun, termasuk saluran alfa (yaitu area transparan) pada gambar:

img {
  float: left;
  width: 300px;
  shape-outside: url("
  shape-image-threshold: .5;
  shape-margin: 1rem;
}

Pertama, rekap singkat.

Agar teks mengalir di sekitar elemen, mereka perlu melakukannya float Entah itu kiri atau kanan, setiap orang memilikinya masing-masing width didefinisikan. ini shape-outside URL Pilih gambar dengan saluran alfa, seperti PNG atau WebP. ini shape-image-threshold Properti menetapkan ambang saluran alfa untuk membuat bentuk. Akhirnya, ada shape-margin Percaya atau tidak, properti ini menciptakan keunggulan di sekeliling bentuknya.

Lab saya memberikan contoh interaktif di artikel ini.

Berbagai bentuk gambar

Saat saya menambahkan gambar ke artikel panjang, saya bertanya pada diri sendiri, “Bagaimana gambar membantu membentuk pengalaman seseorang?” Teks yang mengalir di sekitar gambar dapat sedikit memperlambat orang, sehingga membuat pengalaman mereka lebih mendalam. Secara visual, ini menciptakan hubungan yang lebih erat antara teks dan gambar, membuatnya terasa seperti bagian dari komposisi bersama, bukan elemen yang terisolasi.

Kisah hidup Patti—mulai dari menyanyi di bar hingga menjadi headliner di stadion—memiliki dua bagian: satu tentang dirinya, dan yang lainnya tentang musiknya. Saya menambahkan gambar vertikal tinggi dalam biografi Patty dan dua sampul album kecil di kolom musik:

<section id="patty">
  <div>
    <img src=" alt="">
    [...]
  </div>

  <div>
    <img src="album-1.webp" alt="">
    [...]
    <img src="album-2.webp" alt="">
    [...]
  </div>
</section>

Kemudian, kisi sederhana membuat dua kolom:

#patty {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 5rem;
}

Saya ingin menjaga desain saya sefleksibel mungkin, jadi daripada menentukan lebar dan margin gambar dalam piksel statis, saya memilih persentase lebar kolom ini sehingga ukuran sebenarnya relatif terhadap ukuran wadah:

#patty > *:nth-child(1) img {
  float: left;
  width: 50%;
  shape-outside: url("
  shape-margin: 2%;
}

#patty > *:nth-child(2) img:nth-of-type(1) {
  float: left;
  width: 45%;
  shape-outside: url("album-1.webp");
  shape-margin: 2%;
}

#patty > *:nth-child(2) img:nth-of-type(2) {
  float: right;
  width: 45%;
  shape-outside: url("album-2.webp");
  shape-margin: 2%;
}

Teks kini mengalir di sekitar gambar tinggi Patty tanpa memotong jalur atau poligon – hanya kontur alami gambarnya yang membentuk teks.

Saat memutar gambar menggunakan CSS transformIdealnya, browser akan mengubah posisi teks di sekitar saluran alfa yang diputar. Sayangnya, mereka tidak melakukannya, jadi rotasi ini biasanya perlu dimasukkan ke dalam gambar.

shape-outside dengan gambar tengah palsu

Agar teks dapat mengalir di sekitar elemen, elemen tersebut harus melayang ke kiri atau kanan. Meletakkan gambar di tengah teks akan membuat desain biografi Patty semakin eye catching. tapi tidak center Nilai floating point, jadi bagaimana mungkin?

Konten profil Patty dibagi menjadi dua kolom simetris:

#dolly {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

Untuk menciptakan ilusi bahwa teks mengalir di kedua sisi gambar, pertama-tama saya membaginya menjadi dua bagian: satu untuk kiri dan satu lagi untuk kanan, keduanya setengah atau 50% dari lebar aslinya.

Lalu saya letakkan satu gambar di kolom kiri dan gambar lainnya di kolom kanan:

<section id="dolly">
  <div>
    <img src=" alt="">
    [...]
  </div>
  
  <div>
    <img src="patty-right.webp" alt="">
    [...]
  </div>
</section>

Untuk memberikan ilusi teks mengalir di sekitar sisi satu gambar, saya melayangkan separuh kolom kiri ke kanan:

#dolly > *:nth-child(1) img {
  float: right;
  width: 40%;
  shape-outside: url(");
  shape-margin: 2%;
}

…Separuh kolom kanan berada di kiri, sehingga kedua separuh gambar Patty tergabung di tengah:

#dolly > *:nth-child(2) img {
  float: left;
  width: 40%;
  shape-outside: url("patty-right.webp");
  shape-margin: 2%;
}

Gambar latar belakang buatan

Desain saya untuk biografi Patty sejauh ini mencakup potret yang dipotong dengan saluran alfa yang jelas. Namun, saya sering kali perlu membuat desain yang terasa lebih longgar dan alami.

Biasanya saya akan menempatkan gambar sebagai background-imagetapi untuk desain ini, saya ingin kontennya mengalir secara longgar di sekitar Patti dan gitarnya.

Jadi saya menyisipkan gambar Patty sebagai gambar sebaris, membuatnya melayang, dan mengatur lebarnya menjadi 100%;

<section id="kenny">
  <img src=" alt="">
  [...]
</section>

#kenny > img {
  float: left;
  width: 100%;
  max-width: 100%;
}

Ada dua cara agar teks mengalir di sekitar Patti dan gitarnya. Pertama, saya mungkin mengedit gambar, menghapus bagian yang tidak perlu untuk membuat saluran alfa yang lembut. Lalu, saya bisa menggunakannya shape-image-threshold Properti untuk mengontrol bagian saluran alfa mana yang membentuk kerangka pembungkusan teks:

#kenny > img {
  shape-outside: url("
  shape-image-threshold: 2;
}

Namun, metode ini merusak karena sebagian besar tekstur di belakang Patty telah dihilangkan. Sebaliknya saya membuat poligon clip-path dan menerapkannya sebagai shape-outsideteks mengalir di sekitarnya sambil mempertahankan semua detail gambar aslinya:

#kenny > img {
  float: left;
  width: 100%;
  max-width: 100%;
  shape-outside: polygon(…);
  shape-margin: 20px;
}

Saya punya sedikit waktu untuk mengkodekan titik jalur poligon secara manual, jadi saya mengandalkan generator jalur klip CSS Bennett Feely. Saya menambahkan URL gambar, menggambar bentuk poligon khusus, dan menyalin clip-path nilai-nilai saya shape-outside milik.

teks antar bentuk

Patti Melt suka mendobrak batasan musik country, dan saya ingin melakukan hal yang sama dengan desain biografinya. Saya berencana membuat teks mengalir di antara dua montase foto yang elemennya tumpang tindih dan bagian gambar keluar dari wadah untuk menciptakan kedalaman.

Oleh karena itu, saya membuat dua montase dengan saluran alfa yang bentuknya tidak beraturan.

Saya menempatkan kedua gambar di atas konten:

<section id="johnny">
  <img src=" alt="">
  <img src="patty-2.webp" alt="">
  […]
</section>

…dan gunakan URL gambar yang sama dengan nilainya shape-outside:

#johnny img:nth-of-type(1) {
  float: left;
  width: 45%;
  shape-outside: url(");
  shape-margin: 2%;
}

#johnny img:nth-of-type(2) {
  float: right;
  width: 35%;
  shape-outside: url("img/patty-2.webp");
  shape-margin: 2%;
}

Konten kini mengalir di antara dua montase gambar seperti sungai dalam lagu country, menjadikan desainnya hidup dan dinamis.

sebagai kesimpulan

Seringkali, gambar dalam konten berdurasi panjang berakhir dalam kotak dan terisolasi, seolah-olah ditempatkan di halaman sebagai sebuah renungan. Bentuk CSS—khususnya shape-outside – memberi kita kesempatan untuk melihat gambar dan teks sebagai bagian dari karya yang sama.

Hal ini penting karena desain bukan hanya tentang membuat sesuatu dapat digunakan; ini tentang membuat segala sesuatunya dapat digunakan. Ini tentang membentuk perasaan orang. Membungkus teks di sekitar lekukan gitar atau tepi potret dapat memperlambat pembaca, membuat mereka berlama-lama, dan menjadikan pengalaman mereka lebih mendalam. Ini membawa ritme dan kepribadian ke tata letak yang mungkin terasa hambar.

Jadi, lain kali Anda meraih sebuah persegi panjang, berhentilah dan pikirkan caranya shape-outside Dapat membantu mengubah halaman biasa menjadi konten yang mudah diingat.

Menjadi Kreatif Dengan shape-outside awalnya diterbitkan di beragampengetahuan, bagian dari keluarga DigitalOcean. Anda harus menerima buletin.