Bentuk CSS yang lebih baik menggunakan bentuk () – Bagian 4: Tutup dan Pindah – Beragampengetahuan

Ini adalah artikel keempat tentang seri CSS baru shape() Fungsi. Sejauh ini, kami telah membahas perintah paling umum yang akan Anda gunakan untuk menggambar berbagai bentuk, termasuk garis, busur, dan kurva. Kali ini, saya ingin memperkenalkan Anda pada dua perintah lain: close Dan move. Mereka cukup sederhana dalam praktik, dan saya pikir Anda jarang menggunakannya, tetapi mereka sangat berguna saat Anda membutuhkannya.

ini close Memesan

Di bagian pertama, kami katakan shape() Selalu gunakan satu from Perintah tersebut mendefinisikan titik awal pertama, tetapi bagaimana dengan akhir? Itu harus a close Memesan.

Tapi Anda belum pernah menggunakannya close Perintah tersebut ada di posting sebelumnya! ?

Ini benar. Saya tidak pernah melakukan ini karena saya “menutup” bentuk atau mengandalkan browser untuk “menutup” untuk saya. Agak membingungkan untuk mengatakan itu, tapi mari kita lebih pahami dengan contoh sederhana:

clip-path: shape(from 0 0, line to 100% 0, line to 100% 100%) 

Jika Anda mencoba kode ini, Anda mendapatkan bentuk segitiga, tetapi jika Anda melihat lebih dekat, Anda akan melihat bahwa kami hanya memiliki dua baris perintah dan untuk menggambar segitiga, kami membutuhkan tiga baris secara total. Baris terakhir 100% 100% Dan 0 0 Ini implisit, ini adalah bagian dari browser yang menutup bentuk saya tanpa menggunakannya secara eksplisit close Memesan.

Saya bisa menulis berikut:

clip-path: shape(from 0 0, line to 100% 0, line to 100% 100%, close)

Atau, saya mendefinisikan baris terakhir:

clip-path: shape(from 0 0, line to 100% 0, line to 100% 100%, line to 0 0)

Tetapi karena browser dapat menutup bentuk secara terpisah, tidak perlu menambahkan yang terakhir line Perintah juga perlu ditambahkan secara eksplisit close Memesan.

Ini mungkin membuat Anda berpikir close Perintahnya tidak berguna, bukan? Ini benar dalam banyak kasus (bagaimanapun, saya menulis tiga artikel tentang itu shape() Jangan gunakan itu), tetapi penting untuk mengetahuinya dan apa fungsinya. Ini dapat berguna dalam situasi tertentu, terutama bila digunakan di tengah bentuk.

Dalam contoh ini, titik awal saya adalah pusat dan logika bentuknya adalah menggambar empat segitiga. Dalam prosesnya, saya harus kembali ke pusat setiap saat. Jadi, tidak menulis line to centerSaya baru saja menulis close Dan browser akan secara otomatis kembali ke titik awal!

Secara intuitif, kita harus menulis yang berikut:

clip-path: shape( 
  from center, 
  line to 20%  0,   hline by 60%, line to center, /* triangle 1 */
  line to 100% 20%, vline by 60%, line to center, /* triangle 2 */
  line to 20% 100%, hline by 60%, line to center, /* triangle 3 */
  line to 0   20%,  vline by 60% /* triangle 4 */
)

Tapi kami dapat mengoptimalkannya dan hanya melakukan ini:

clip-path: shape( 
  from center, 
  line to 20%  0,   hline by 60%, close,
  line to 100% 20%, vline by 60%, close,
  line to 20% 100%, hline by 60%, close,
  line to 0    20%, vline by 60%
)

Tentu saja, kami menulis lebih sedikit kode, tetapi hal penting lainnya adalah jika saya memperbarui center Memiliki nilai lokasi lain, ini close Perintah akan mengikuti lokasi ini.

Jangan lupa trik ini. Ini dapat membantu Anda mengoptimalkan banyak bentuk dengan menulis lebih sedikit kode.

ini move Memesan

Mari kita mengalihkan perhatian kita ke orang lain shape() Perintah yang jarang Anda gunakan, tetapi mungkin sangat berguna dalam beberapa kasus: move Memesan.

Sebagian besar waktu, ketika kita perlu menggambar bentuk, itu Bentuk kontinu. Tetapi mungkin terjadi bahwa bentuk kita terdiri dari berbagai bagian yang tidak terhubung bersama. Dalam kasus ini, move Perintah adalah apa yang Anda butuhkan.

Mari memberi contoh, mirip dengan yang sebelumnya, tetapi kali ini segitiga tidak saling menyentuh:

Secara intuitif, kita mungkin berpikir kita membutuhkan empat elemen independen shape() definisi. Tapi contoh itu adalah bentuk!

Triknya adalah menggambar segitiga pertama, lalu “mov” segitiga berikutnya di tempat lain, dan sebagainya. ini move Perintahnya mirip dengan from perintah, tapi kami menggunakannya di tengah shape().

clip-path: shape(
  from    50% 40%, line to 20%  0,   hline by 60%, close, /* triangle 1 */
  move to 60% 50%, line to 100% 20%, vline by 60%, close, /* triangle 2 */
  move to 50% 60%, line to 20% 100%, hline by 60%, close, /* triangle 3 */
  move to 40% 50%, line to 0   20%,  vline by 60% /* triangle 4 */
)

Setelah menggambar segitiga pertama, kami “menutup” dan “memindahkan” ke titik baru untuk menggambar segitiga berikutnya. Kita dapat menggunakan satu bentuk dengan beberapa bentuk shape() definisi. Kode yang lebih umum terlihat seperti berikut:

clip-path: shape(
  from    X1 Y1, ..., close, /* shape 1 */
  move to X2 Y2, ..., close, /* shape 2 */
  ...
  move to Xn Yn, ... /* shape N */
)

ini close ada move Perintah tidak wajib, sehingga kode dapat disederhanakan:

clip-path: shape(
  from    X1 Y1, ..., /* shape 1 */
  move to X2 Y2, ..., /* shape 2 */
  ...
  move to Xn Yn, ... /* shape N */
)

Mari kita lihat beberapa kasus penggunaan yang menarik di mana teknik ini mungkin membantu.

Bentuk potong

Sebelumnya, saya membagikan cara menggunakannya clip-path: polygon(). Dimulai dengan semua jenis poligon, kita dapat dengan mudah menuangkannya ke dalam versi potongnya:

Kita bisa menggunakan hal yang sama shape(). Idenya adalah untuk memiliki persimpangan antara bentuk utama dan bentuk persegi panjang yang sesuai dengan batas elemen. Kami membutuhkan dua bentuk, jadi kami perlu move Memesan.

Kodenya adalah sebagai berikut:

.shape {
  clip-path: shape(from ...., move to 0 0, hline to 100%, vline to 100%, hline to 0);
}

Pertama kali Anda membuat bentuk utama dan kemudian “pindah” ke 0 0 Kemudian buat bentuk persegi panjang (ingat, ini adalah bentuk pertama yang kami buat di bagian pertama dari seri ini). Kami bahkan dapat melangkah lebih jauh dan memperkenalkan variabel CSS untuk dengan mudah beralih antara bentuk normal dan terbalik.

.shape {
  clip-path: shape(from .... var(--i,));
}
.invert {
  --i:,move to 0 0, hline to 100%, vline to 100%, hline to 0;
}

Secara default, --i Tidak begitu ditentukan var(--i,)Akan kosong dan kami mendapatkan bentuk utamanya. Jika kita mendefinisikan variabel menggunakan bentuk persegi panjang, kita mendapatkan versi terbalik.

Berikut adalah contoh menggunakan bentuk heksagonal melingkar:

Faktanya, kode harus sebagai berikut:

.shape {
  clip-path: shape(evenodd from .... var(--i,));
}
.invert {
  --i:,move to 0 0, hline to 100%, vline to 100%, hline to 0;
}

Melihat evenodd Saya menambahkan di awal shape(). Saya tidak akan mengganggu efek Anda dengan penjelasan terperinci evenodd Di awal. Anda dapat memeriksa halaman MDN untuk lebih jelasnya.

Peningkatan lain yang dapat kami lakukan adalah menambahkan variabel untuk mengontrol ruang di sekitar bentuk. Misalkan Anda ingin membuat bentuk segi enam lebih kecil dalam contoh sebelumnya. Memperbarui kode untuk Hexagons membosankan, tetapi memperbarui kode untuk bentuk persegi panjang akan lebih mudah.

.shape {
  clip-path: shape(evenodd from ... var(--i,)) content-box;
}
.invert {
  --d: 20px;
  padding: var(--d);
  --i: ,move to calc(-1*var(--d)) calc(-1*var(--d)),
        hline to calc(100% + var(--d)),
        vline to calc(100% + var(--d)),
        hline to calc(-1*var(--d));
}

Pertama -tama kami memperbarui bingkai referensi bentuk content-box. Kami kemudian menambahkan beberapa pengisi yang secara logis dapat menurunkan area bentuk karena tidak lagi termasuk pengisi (atau perbatasan). Secara default, padding dikecualikan (tidak terlihat), yang merupakan trik kami untuk memperbarui bentuk persegi panjang untuk mencakup kembali bantalan.

Itu sebabnya --i Variabelnya sangat rinci. Itu memperluas area persegi panjang dengan nilai yang diisi dan mencakup seluruh elemen seolah -olah kita tidak content-box.

Anda tidak hanya dapat dengan mudah memutar bentuk apa pun, tetapi Anda juga dapat mengontrol ruang di sekitar Anda! Berikut adalah demonstrasi lain menggunakan logo beragampengetahuan untuk menggambarkan betapa mudahnya pendekatannya:

Contoh yang sama persis ini dapat digunakan dalam konverter SVG-to-to-CSS saya shape() Kode tidak perlu menyelesaikan semua matematika.

Ulangi bentuk

Kasus penggunaan menarik lainnya move Perintah adalah saat kita perlu mengulangi bentuk yang sama beberapa kali. Anda masih ingat by Dan to petunjuk? ini by Petunjuk memungkinkan kami untuk mendefinisikan koordinat relatif, mempertimbangkan sedikit. Jadi jika kita hanya menggunakan bykita dapat dengan mudah menggunakan kembali kode yang sama sesuai kebutuhan.

Mari kita mulai dengan contoh lingkaran sederhana:

clip-path: shape(from X Y, arc by 0 -50px of 1%, arc by 0 50px of 1%)

dari X YSaya menggambar busur pertama dan bergerak ke atas 50pxdan kemudian saya kembali X Y Gunakan busur lain untuk menggunakan offset yang sama, tetapi ke bawah. Jika Anda mengalami kehilangan sintaks, coba periksa bagian 1 untuk menyegarkan ingatan Anda arc Memesan.

Bagaimana saya menggambar bentuknya tidak masalah. Yang penting adalah nilainya X Y Ya, saya akan selalu mendapatkan lingkaran yang sama, tetapi di posisi yang berbeda. Apakah Anda tahu kemana saya akan pergi? Jika saya ingin menambahkan lingkaran lain, saya hanya perlu menggunakan kembali kode yang berbeda X Y.

clip-path: shape(
  from    X1 Y1, arc by 0 -50px of 1%, arc by 0 50px of 1%,
  move to X2 Y2, arc by 0 -50px of 1%, arc by 0 50px of 1%
)

Dan karena kodenya sama, saya dapat menyimpan bentuk lingkaran ke dalam variabel CSS dan menggambar sebanyak mungkin lingkaran:

.shape {
  --sh:, arc by 0 -50px of 1%, arc by 0 50px of 1%;
  
  clip-path: shape(
    from    X1 Y1 var(--sh),
    move to X2 Y2 var(--sh),
    ... 
    move to Xn Yn var(--sh)
  ) 
}

Apakah Anda tidak ingin bulat? Sederhana, Anda dapat memperbarui --sh Variabel dengan bentuk apa pun. Berikut adalah contoh dengan tiga bentuk yang berbeda:

Tebak apa itu? Anda dapat membalikkan seluruh proses menggunakan teknik pemotongan dengan menambahkan ujung bentuk persegi panjang:

Kode ini adalah contoh yang sempurna shape() Kekuatan fungsi. Kami tidak memiliki duplikasi kode apa pun, kami dapat menyesuaikan bentuk menggunakan variabel CSS. Ini adalah sesuatu yang tidak dapat kita capai path() Fungsi adalah karena tidak mendukung variabel.

sebagai kesimpulan

Ini semua tentang seri keempat kami di CSS shape() Fungsi! Kami tidak membuat bentuk yang sangat kompleks, tetapi kami belajar bagaimana dua perintah sederhana membuka banyak kemungkinan penggunaan yang mungkin terjadi shape().

Hanya untuk hiburan, inilah demo untuk menciptakan kembali loader tiga poin klasik menggunakan teknologi terakhir yang telah kami bahas. Perhatikan seberapa jauh kita bisa melangkah, menambahkan hal -hal seperti animasi ke dalam campuran: