Arahan Seni Untuk Web Menggunakan Bentuk CSS

Tahun lalu, Rachel Andrew menulis sebuah artikel yang membahas tentang CSS Shapes di mana dia memperkenalkan kembali kepada pembaca dasar-dasar penggunaan CSS Shapes. Bagi siapa pun yang ingin memahami cara menggunakan properti seperti shape-outside , shape-margin , dan shape-image-threshold , Rachel's adalah primer yang ideal.

Saya telah melihat banyak contoh penggunaan properti, tetapi sangat sedikit yang melampaui Bentuk Dasar, termasuk circle() , ellipse() , inset() . Bahkan contoh yang menggunakan bentuk polygon() jarang melampauinya. Mempertimbangkan peluang kreatif yang ditawarkan CSS Shapes, ini mengecewakan. Tapi, saya yakin dengan sedikit inspirasi dan imajinasi, kita bisa membuat desain yang lebih khas dan menarik. Jadi, saya akan menunjukkan cara menggunakan CSS Shapes untuk membuat lima jenis layout berikut:

1. bentuk-V
2. Z-pola
3. Bentuk melengkung
4. Bentuk diagonal
5. Bentuk yang diputar

Sedikit Inspirasi

Sayangnya, Anda tidak akan menemukan banyak contoh situs web yang menginspirasi yang menggunakan CSS Shapes. Itu tidak berarti bahwa inspirasi tidak ada di luar sana — Anda hanya perlu melihat lebih jauh pada periklanan, majalah, dan desain poster. Namun, akan sangat bodoh jika kita hanya meniru karya dari era dan media sebelumnya.

Selama beberapa tahun terakhir, saya telah mengisi folder Dropbox dengan inspirasi dan saya benar-benar harus memindahkan contoh-contoh itu ke Pinterest. Untungnya, Kristopher Van Sant lebih rajin daripada saya dalam menyusun papan Pinterest yang penuh dengan contoh 'Bentuk Teks' yang menginspirasi.

Bentuk menambah energi pada desain, dan gerakan ini menarik orang untuk masuk. Bentuk membantu menghubungkan audiens dengan cerita Anda dan membuat hubungan yang lebih erat antara konten visual dan tulisan Anda.

Saat Anda membutuhkan konten untuk mengalir di sekitar bentuk, gunakan properti shape-outside . Anda harus mengapungkan elemen ke kiri atau ke kanan agar shape-outside memiliki efek apa pun.

  img { float: <values>; shape-outside: <values>; }
img { float: <values>; shape-outside: <values>; }

NB: Saat Anda mengalirkan konten di sekitar bentuk, berhati-hatilah untuk tidak membiarkan baris teks menjadi terlalu sempit dan hanya muat satu atau dua kata.

Seringkali membutuhkan sedikit markup untuk mengembangkan tata letak yang dinamis dan asli. HTML saya untuk seri lima desain ini hanya terdiri dari header dan elemen utama, gambar, dan gambar, dan seringkali tidak lebih rumit dari ini:

  <header role="banner"> <h1>Mini Cooper</h1> </header> <figure> <img src="mini.png" alt="Mini Cooper"> </figure> <main> … </main>
<header role="banner"> <h1>Mini Cooper</h1> </header> <figure> <img src="mini.png" alt="Mini Cooper"> </figure> <main> … </main>

1. Bentuk-V

Bagi saya, salah satu aspek paling luar biasa dari CSS modern adalah saya dapat membuat bentuk dari saluran alfa dari gambar yang sebagian transparan tanpa perlu menggambar jalur poligon. Saya hanya perlu membuat gambar, dan kemudian browser akan mengurus sisanya.

Saya pikir ini adalah salah satu tambahan paling menarik untuk CSS dan itu membuat pengembangan arah seni untuk web lebih mudah, terutama jika Anda bekerja dengan sistem manajemen konten dan konten yang dihasilkan secara dinamis.

  [src*="shape-left"], [src*="shape-right"] { width: 50%; height: 100%; } [src*="shape-left"] { float: left; shape-outside: url('alpha-left.png'); } [src*="shape-right"] { float: right; shape-outside: url('alpha-right.png'); }
[src*="shape-left"], [src*="shape-right"] { width: 50%; height: 100%; } [src*="shape-left"] { float: left; shape-outside: url('alpha-left.png'); } [src*="shape-right"] { float: right; shape-outside: url('alpha-right.png'); } 

Konten yang Dihasilkan

Seperti yang dijelaskan Rachel dalam artikelnya:

“Anda juga bisa menggunakan gambar sebagai jalur bentuk untuk membuat efek teks melengkung tanpa menyertakan gambar di halaman. Namun, Anda masih membutuhkan sesuatu untuk mengapung, jadi untuk ini, kami dapat menggunakan Konten yang Dihasilkan.”

Sebagai alternatif untuk saluran alfa, saya dapat menggunakan Konten yang Dihasilkan — diterapkan pada dua elemen semu — satu untuk segitiga poligon di sebelah kiri, yang lain untuk kanan. Teks berjalan saya sekarang akan mengalir di antara dua bentuk yang dihasilkan:

  main::before { content: ""; display: block; float: left; width: 50%; height: 100%; shape-outside: polygon(0 0, 0 100%, 100% 100%); } main p:first-child::before { content: ""; display: block; float: right; width: 50%; height: 100%; shape-outside: polygon(100% 0, 0 100%, 100% 100%); }
main::before { content: ""; display: block; float: left; width: 50%; height: 100%; shape-outside: polygon(0 0, 0 100%, 100% 100%); } main p:first-child::before { content: ""; display: block; float: right; width: 50%; height: 100%; shape-outside: polygon(100% 0, 0 100%, 100% 100%); }

NB: Pembuat clip-path CSS Bennett Feely adalah alat yang luar biasa untuk mengerjakan nilai koordinat untuk digunakan dengan CSS Shapes.

2. Pola-Z

Pola-Z adalah jalur yang biasa kita ikuti saat membaca konten dari kiri-kanan, atas-bawah. Dengan menempatkan konten di sepanjang garis tersembunyi yang membentuk huruf Z, pola ini membantu memandu pembaca di sepanjang jalur ini, dari tempat kami ingin mereka mulai membaca menuju tujuan seperti ajakan bertindak. Pola-Z dapat berupa rahasia — tersirat oleh titik fokus atau elemen dengan bobot visual yang lebih tinggi — atau diperjelas menggunakan CSS Shapes.

Dalam desain berikutnya ini, pola-z rahasia dibentuk sebagai:

1. Gambar besar mencakup lebar halaman penuh, titik akhir ditekankan dengan judul rata kanan.
2. Sebuah blok teks berjalan dibentuk oleh dua CSS Shapes.
3. Batas atas yang tebal pada gambar yang berfungsi sebagai footer melengkapi Z.

Tidak perlu markup yang rumit untuk menerapkan desain ini dan HTML sederhana saya hanya mencakup tiga elemen:

  <header role="banner"> <h1>Mini Cooper:icon of the '60s</h1> <img src="banner.png" alt="Mini Cooper"> </header> <main> <img src="placeholder-left.png" alt="" aria-hidden="true"> <img src="placeholder-right.png" alt="" aria-hidden="true"> … </main> <figure role="contentinfo"> … </figure>
<header role="banner"> <h1>Mini Cooper:icon of the '60s</h1> <img src="banner.png" alt="Mini Cooper"> </header> <main> <img src="placeholder-left.png" alt="" aria-hidden="true"> <img src="placeholder-right.png" alt="" aria-hidden="true"> … </main> <figure role="contentinfo"> … </figure>

Header dan gambar rentang lebar halaman saya tidak memerlukan penjelasan, tetapi teks mengalir di antara dua bentuk segitiga sedikit lebih rumit. Untuk menerapkan desain pola-z ini, saya memilih untuk menyertakan dua gambar placeholder kecil berukuran 1x1px di mana saya menerapkan dua gambar pembentuk bentuk yang lebih besar menggunakan shape-outside . Dengan melampirkan atribut aria-hidden ke gambar ini, pembaca layar tidak akan mendeskripsikannya.

Setelah memberikan dua gambar bentuk dimensi yang sama, saya melayang satu gambar ke kiri dan yang lainnya ke kanan, yang memungkinkan teks berjalan saya berjalan di antara mereka:

  [src*="placeholder-left"], [src*="placeholder-right"] { display: block; width: 240px; height: 100%; } [src*="placeholder-left"] { float: left; shape-outside: url('shape-right.png'); } [src*="placeholder-right"] { float: right; shape-outside: url('shape-right.png'); }
[src*="placeholder-left"], [src*="placeholder-right"] { display: block; width: 240px; height: 100%; } [src*="placeholder-left"] { float: left; shape-outside: url('shape-right.png'); } [src*="placeholder-right"] { float: right; shape-outside: url('shape-right.png'); } 

Mini Cooper yang ikonik cepat dan menyenangkan untuk dikendarai. Sementara desain saya akan sangat rapi tanpa pola-z yang dibentuk oleh CSS Shapes, tata letak ini terlihat dapat diprediksi dan kurang energi. Pola-z yang dibuat dengan menggerakkan kolom teks berjalan yang sempit di antara dua bentuk menunjukkan kecepatan dan kesenangan yang akan dimiliki orang-orang saat mengendarai mobil kecil yang ikonik ini.

3. Bentuk Melengkung

Salah satu aspek yang paling menarik dari CSS Shapes adalah bagaimana saya dapat membuat bentuk yang elegan menggunakan alpha channel dari gambar yang sebagian transparan. Bentuk ini bisa menjadi apa saja yang saya bayangkan. Saya hanya perlu membuat gambar, dan browser akan mengalirkan konten di sekitarnya.

Meskipun membatasi konten ke dalam bentuk telah diusulkan dalam spesifikasi CSS Shapes Module Level 2, saat ini tidak ada cara untuk mengetahui apakah dan kapan ini dapat diterapkan di browser. Tetapi sementara shape-inside tidak tersedia ( belum! ), itu tidak berarti saya tidak dapat membuat hasil serupa menggunakan shape-outside .

 [src*="curve"] { float: right; width: 400px; height: 100vh; shape-outside: url('curve.png'); }

 [src*="curve"] { shape-margin: 3rem; }

Lebih Banyak Margin

Menambahkan gerakan ke desain melengkung ini tidak hanya mengandalkan CSS Shapes. Dengan menggunakan unit lebar viewport, saya memberi judul, gambar, dan teks berjalan margin kiri yang berbeda, masing-masing proporsional dengan lebar viewport. Ini menciptakan diagonal dari bagian belakang judul saya ke bagian depan mobil:

  h1 { margin-left: 5vw; } img { margin-left: 10vw; } p { margin-left: 20vw; }
h1 { margin-left: 5vw; } img { margin-left: 10vw; } p { margin-left: 20vw; }

4. Bentuk Diagonal

Sudut dapat membantu membuat tata letak terlihat kurang terstruktur dan terasa lebih organik. Tidak adanya struktur yang jelas mendorong mata untuk menjelajah dengan bebas di sekitar komposisi. Gerakan ini juga menyebabkan penataan terasa energik.

Saya melihat desain diatur di sekitar sumbu horizontal dan vertikal setiap hari, tetapi jarang apa pun yang didasarkan pada diagonal. Sesekali, saya melihat elemen bersudut — mungkin grafik spanduk dengan kemiringan bawahnya — tetapi jarang penting untuk sebuah desain.

Meskipun CSS Grid melibatkan pengaturan kolom dan baris, tidak ada alasan mengapa itu tidak dapat digunakan untuk membuat diagonal dinamis. Desain selanjutnya ini hanya membutuhkan header dan elemen utama:

  <header role="banner"> <h1>Mini Cooper</h1> <img src="banner.png" alt="Mini Cooper"> </header> <main> <img src="shape.png" alt=""> … </main>
<header role="banner"> <h1>Mini Cooper</h1> <img src="banner.png" alt="Mini Cooper"> </header> <main> <img src="shape.png" alt=""> … </main>

Untuk membuat detail diagonal dalam desain ini, saya kembali mengalirkan konten di sekitar gambar bentuk yang melayang ke kiri. Sekali lagi saya menggunakan properti shape-outside dengan nilai URL yang sama dengan gambar saya yang terlihat dan shape-margin untuk memberi jarak antara bentuk saya dan konten yang mengalir di sekitarnya:

  [src*="shape"] { float: left; shape-outside: url('shape.png'); shape-margin: 3rem; }
[src*="shape"] { float: left; shape-outside: url('shape.png'); shape-margin: 3rem; }

Mengingat bahwa daya tanggap adalah salah satu properti intrinsik web, kami jarang dapat memprediksi bagaimana konten akan mengalir, tetapi kami menghindari desain seperti ini. Ketika ada terlalu sedikit ruang untuk semua teks berjalan saya untuk muat di atas bentuk, fakta bahwa setiap bentuk melayang berarti konten akan mengalir ke ruang di bawah bentuk.

5. Bentuk Diputar

Mengapa puas hanya menggunakan CSS Grid dan Shapes saat menambahkan Transforms ke dalam campuran dapat mengaktifkan tata letak yang tidak terbayangkan hanya beberapa tahun yang lalu? Dalam contoh terakhir ini, teks mengalir di sekitar mobil dalam gambar ini, sementara pada saat yang sama memutar seluruh komposisi membutuhkan kombinasi dari semua properti tersebut.

Karena gambar mobil ini tidak memiliki saluran alfa transparan, teks mengalir di sekitar bentuk, itu membutuhkan gambar kedua yang hanya mencakup informasi saluran alfa.

Kali ini, saya mengapungkan gambar yang terlihat ke kanan dan menerapkan properti shape-outside dengan nilai URL yang cocok dengan gambar saluran alfa saya:

  [src*="shape"] { float: right; width: 50%; shape-outside: url('alpha.png'); shape-margin: 1rem; }
[src*="shape"] { float: right; width: 50%; shape-outside: url('alpha.png'); shape-margin: 1rem; }

Anda mungkin telah memperhatikan bahwa kedua gambar saya mengandung elemen yang saya putar searah jarum jam sebanyak sepuluh derajat. Dengan gambar-gambar itu di tempatnya, saya dapat memutar seluruh tata letak sepuluh derajat ke arah yang berlawanan untuk memberikan ilusi bahwa gambar saya tegak:

  body { transform: rotate(-10deg); }
body { transform: rotate(-10deg); } 

Contoh Bonus: Kolom Patung Bentuk Poligon

Kutipan dari 'Art Direction for the Web' tersedia mulai 26 Maret 2019.

Anda dapat membuat bentuk struktural yang kuat dengan tidak lebih dari jenis. Menggabungkan bentuk polygon() dan elemen semu, Anda dapat memahat bentuk dari blok padat teks berjalan, dengan gaya Alexey Brodovitch dan karyanya yang berpengaruh untuk Harper's Bazaar.

Saya membentuk kolom ini dari dua elemen artikel, yaitu dengan selokan di antara mereka dan lebar maksimum, yang membantu menjaga ukuran yang nyaman:

  body { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 2vw; max-width: 48em; }
body { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 2vw; max-width: 48em; }

Karena ada dua elemen artikel dan saya juga menentukan dua kolom untuk grid saya, tidak perlu spesifik tentang posisi artikel tersebut. Saya dapat membiarkan browser menempatkannya untuk saya, dan yang tersisa bagi saya adalah menerapkan shape-outside ke elemen pseudo yang dihasilkan di setiap kolom:

  article:nth-of-type(1) p:nth-of-type(1)::before { content: ""; float: left; width: 160px; height: 320px; shape-outside: polygon(0px 0px, 90px 0px, [...]); } article:nth-of-type(2) p:nth-of-type(2)::before { content: ""; float: right; width: 160px; height: 320px; shape-outside: polygon(20px 220px, 120px 0px, [...]); }
article:nth-of-type(1) p:nth-of-type(1)::before { content: ""; float: left; width: 160px; height: 320px; shape-outside: polygon(0px 0px, 90px 0px, [...]); } article:nth-of-type(2) p:nth-of-type(2)::before { content: ""; float: right; width: 160px; height: 320px; shape-outside: polygon(20px 220px, 120px 0px, [...]); }

Pembayaran

Sekarang Firefox telah merilis versi yang mendukung CSS Shapes, dan telah meluncurkan Shape Path Editor di dalam Alat Pengembangnya, sekarang hanya ada Edge tanpa dukungan untuk Shapes. Situasi ini akan segera berubah karena Microsoft telah mengumumkan perubahan dari mesin rendering EdgeHTML mereka sendiri ke Chromium's Blink, mesin yang sama dengan Chrome dan Opera.

Alat seperti CSS Shapes sekarang memberi kita banyak kesempatan untuk menggunakan art direction untuk menarik perhatian pembaca dan membuat mereka tetap terlibat. Saya harap sekarang Anda sama bersemangatnya dengan mereka seperti saya!

Catatan Editorial : Buku baru Andy, Art Direction for the Web (pesan di muka salinan Anda hari ini), mengeksplorasi 100 tahun art direction dan bagaimana kita dapat menggunakan pengetahuan ini dan teknologi web terbaru untuk menciptakan produk digital yang lebih baik. Baca satu bab kutipan untuk mengetahui apa yang ditawarkan buku tersebut.

Sumber Daya Lebih Lanjut

• “Arah Seni untuk Web,” Andy Clarke
• “Lihat Bentuk Baru CSS,” Rachel Andrew
• “Bentuk CSS,” dokumen web MDN, Mozilla
• “Edit Jalur Bentuk Dalam CSS,” dokumen web MDN, Mozilla
• “Arah Seni Untuk Web: Buku Smashing Baru,” Majalah Smashing