Ini adalah jawatan keempat dalam satu siri mengenai fungsi CSS () baru. Setakat ini, kami telah menutupi arahan yang paling biasa yang akan anda gunakan untuk menarik pelbagai bentuk, termasuk garis, arka, dan lengkung. Kali ini, saya ingin memperkenalkan anda kepada dua lagi arahan: tutup dan bergerak. Mereka agak mudah dalam amalan, dan saya fikir anda jarang akan menggunakannya, tetapi mereka sangat berguna apabila anda memerlukannya.

Bentuk CSS yang lebih baik menggunakan bentuk ()

1. Garis dan arka
2. Lebih banyak onarcs
3. Lengkung
4. Tutup dan bergerak (anda ada di sini!)

Perintah Tutup

Pada bahagian pertama, kami mengatakan bahawa bentuk () selalu bermula dengan dari perintah untuk menentukan titik permulaan yang pertama tetapi bagaimana dengan akhir? Ia harus berakhir dengan perintah yang dekat.

Tetapi anda tidak pernah menggunakan perintah dekat dalam artikel sebelumnya!?

Itu benar. Saya tidak pernah melakukan kerana saya sama ada "menutup" bentuk saya sendiri atau bergantung pada penyemak imbas untuk "menutup" itu untuk saya. Berkata seperti itu, ia agak mengelirukan, tetapi mari kita ambil contoh mudah untuk lebih memahami:

 Klip-Laluan: Bentuk (dari 0 0, garis hingga 100% 0, garis hingga 100% 100%)

Jika anda mencuba kod ini, anda akan mendapat bentuk segitiga, tetapi jika anda melihat dengan teliti, anda akan melihat bahawa kami hanya mempunyai dua arahan baris sedangkan, untuk menarik segitiga, kami memerlukan tiga baris. Baris terakhir antara 100% 100% dan 0 0 adalah tersirat, dan itulah bahagian di mana penyemak imbas menutup bentuk untuk saya tanpa perlu menggunakan arahan yang dekat.

Saya boleh menulis perkara berikut:

 Klip-Laluan: Bentuk (dari 0 0, garis hingga 100% 0, garis hingga 100% 100%, tutup)

Atau sebaliknya, tentukan baris terakhir sendiri:

 Klip-Laluan: Bentuk (dari 0 0, garis hingga 100% 0, garis hingga 100% 100%, garis ke 0 0)

Tetapi sejak penyemak imbas dapat menutup bentuknya sendiri, tidak perlu menambah perintah baris terakhir dan kita tidak perlu menambah perintah dekat.

Ini mungkin membawa anda untuk berfikir bahawa perintah dekat tidak berguna, bukan? Memang benar dalam kebanyakan kes (selepas semua, saya telah menulis tiga artikel mengenai bentuk () tanpa menggunakannya), tetapi penting untuk mengetahui tentangnya dan apa yang dilakukannya. Dalam beberapa kes tertentu, ia boleh berguna, terutamanya jika digunakan di tengah -tengah bentuk.

Dalam contoh ini, titik permulaan saya adalah pusat dan logik bentuknya adalah untuk menarik empat segitiga. Dalam proses ini, saya perlu kembali ke pusat setiap kali. Jadi, bukannya menulis garis ke pusat, saya hanya menulis dekat dan penyemak imbas secara automatik akan kembali ke titik awal!

Secara intuitif, kita harus menulis perkara berikut:

 Klip-Laluan: Bentuk ( 
  dari pusat, 
  baris hingga 20% 0, hline sebanyak 60%, garis ke pusat, / * segitiga 1 * /
  garis hingga 100%20%, vline sebanyak 60%, garis ke pusat, / * segitiga 2 * /
  baris hingga 20%100%, hline sebanyak 60%, garis ke pusat, / * segitiga 3 * /
  baris hingga 0 20%, vline sebanyak 60% / * segitiga 4 * /
)

Tetapi kita dapat mengoptimumkannya sedikit dan hanya melakukan ini:

 Klip-Laluan: Bentuk ( 
  dari pusat, 
  baris hingga 20% 0, Hline sebanyak 60%, tutup,
  garis hingga 100%20%, vline sebanyak 60%, dekat,
  baris hingga 20%100%, Hline sebanyak 60%, tutup,
  garis hingga 0 20%, vline sebanyak 60%
)

Kami menulis kurang kod, pasti, tetapi satu lagi perkara penting ialah jika saya mengemas kini nilai pusat dengan kedudukan lain, perintah dekat akan mengikuti kedudukan itu .

Jangan lupa tentang helah ini. Ia dapat membantu anda mengoptimumkan banyak bentuk dengan menulis kod kurang.

Perintah langkah

Mari kita berikan perhatian kita kepada bentuk lain () perintah yang jarang anda gunakan, tetapi boleh menjadi sangat berguna dalam situasi tertentu: perintah langkah.

Kebanyakan masa apabila kita perlu membentuk bentuk, ia sebenarnya satu bentuk yang berterusan . Tetapi ia mungkin berlaku bahawa bentuk kami terdiri daripada bahagian yang berbeza yang tidak dihubungkan bersama. Dalam situasi ini, arahan langkah adalah apa yang anda perlukan.

Mari kita ambil contoh, sama seperti yang sebelumnya, tetapi kali ini segitiga tidak menyentuh satu sama lain:

Secara intuitif, kita mungkin fikir kita memerlukan empat elemen berasingan, dengan bentuknya sendiri () definisi. Tetapi contoh itu adalah satu bentuk!

Caranya adalah untuk menarik segitiga pertama, kemudian "bergerak" di tempat lain untuk menarik yang seterusnya, dan sebagainya. Perintah langkah adalah serupa dengan arahan dari tetapi kami menggunakannya di tengah -tengah bentuk ().

 Klip-Laluan: Bentuk (
  Dari 50% 40%, garis hingga 20% 0, Hline sebanyak 60%, Tutup, / * Segitiga 1 * /
  Bergerak ke 60%50%, garis hingga 100%20%, vline sebanyak 60%, tutup, / * segitiga 2 * /
  Bergerak ke 50%60%, garis hingga 20%100%, Hline sebanyak 60%, Tutup, / * Segitiga 3 * /
  Bergerak ke 40% 50%, garis kepada 0 20%, vline sebanyak 60% / * segitiga 4 * /
)

Selepas melukis segitiga pertama, kami "menutup" dan "bergerak" ke titik baru untuk menarik segitiga seterusnya. Kita boleh mempunyai pelbagai bentuk menggunakan satu bentuk () definisi. Kod yang lebih generik akan kelihatan seperti di bawah:

 Klip-Laluan: Bentuk (
  dari x1 y1, ..., tutup, / * bentuk 1 * /
  Pindah ke x2 y2, ..., tutup, / * bentuk 2 * /
  …
  Pindah ke xn yn, ... / * bentuk n * /
)

Perintah dekat sebelum arahan langkah tidak wajib, jadi kod dapat dipermudahkan untuk ini:

 Klip-Laluan: Bentuk (
  dari x1 y1, ..., / * bentuk 1 * /
  Pindah ke x2 y2, ..., / * bentuk 2 * /
  …
  Pindah ke xn yn, ... / * bentuk n * /
)

Mari kita lihat beberapa kes penggunaan yang menarik di mana teknik ini dapat membantu.

Bentuk pemotongan

Sebelum ini, saya berkongsi cara untuk membuat bentuk pemotongan menggunakan klip-laluan: poligon (). Bermula dari apa-apa jenis poligon, kita boleh membalikkannya dengan mudah untuk mendapatkan versi pemotongannya:

Kita boleh melakukan yang sama menggunakan bentuk (). Idea ini adalah untuk mempunyai persimpangan antara bentuk utama dan bentuk segi empat tepat yang sesuai dengan sempadan elemen. Kami memerlukan dua bentuk, oleh itu keperluan untuk arahan langkah.

Kodnya adalah seperti berikut:

 .shape {
  Clip-Path: Bentuk (dari ...., bergerak ke 0 0, hline hingga 100%, vline hingga 100%, hline hingga 0);
}

Anda bermula dengan membuat bentuk utama anda dan kemudian anda "bergerak" ke 0 0 dan anda membuat bentuk segi empat tepat (ingat, ia adalah bentuk pertama yang kami buat di bahagian pertama siri ini). Kami juga boleh pergi lebih jauh dan memperkenalkan pemboleh ubah CSS dengan mudah bertukar antara bentuk normal dan yang terbalik.

 .shape {
  klip-laluan: bentuk (dari .... var (-i,));
}
.invert {
  --i :, bergerak ke 0 0, hline hingga 100%, vline hingga 100%, hline hingga 0;
}

Secara lalai,-saya tidak ditakrifkan jadi var (-i,) akan kosong dan kami mendapat bentuk utama. Jika kita menentukan pembolehubah dengan bentuk segi empat tepat, kita mendapat versi terbalik.

Berikut adalah contoh menggunakan bentuk heksagon bulat:

Pada hakikatnya, kod itu harus seperti berikut:

 .shape {
  Clip-Path: Bentuk (Evenodd dari .... var (-i,));
}
.invert {
  --i :, bergerak ke 0 0, hline hingga 100%, vline hingga 100%, hline hingga 0;
}

Perhatikan yang saya tambahkan pada permulaan bentuk (). Saya tidak akan mengganggu anda dengan penjelasan terperinci tentang apa yang dilakukannya tetapi dalam beberapa kes, bentuk terbalik tidak dapat dilihat dan penetapannya adalah untuk menambah evenodd pada mulanya. Anda boleh menyemak halaman MDN untuk maklumat lanjut.

Satu lagi peningkatan yang boleh kita lakukan ialah menambah pembolehubah untuk mengawal ruang di sekitar bentuknya. Katakan anda ingin membuat bentuk heksagon contoh sebelumnya yang lebih kecil. Ia membosankan untuk mengemas kini kod heksagon tetapi lebih mudah untuk mengemas kini kod bentuk segi empat tepat.

 .shape {
  Clip-Path: Bentuk (Evenodd dari ... var (-i,)) kotak kandungan;
}
.invert {
  --d: 20px;
  padding: var (-d);
  -I :, Pindah ke Calc (-1*var (-D)) Calc (-1*var (-D)),
        hline ke calc (100% var (-d)),
        vline ke calc (100% var (-d)),
        hline ke calc (-1*var (-d));
}

Kami mula-mula mengemas kini kotak rujukan bentuk untuk menjadi kotak kandungan. Kemudian kami menambah beberapa padding yang secara logik akan mengurangkan kawasan bentuk kerana ia tidak lagi termasuk padding (atau sempadan). Padding dikecualikan (tidak kelihatan) secara lalai dan di sini datang helah di mana kita mengemas kini bentuk segi empat tepat untuk termasuk semula padding.

Itulah sebabnya pembolehubah -saya begitu verbose. Ia menggunakan nilai padding untuk melanjutkan kawasan segi empat tepat dan menutup seluruh elemen seolah-olah kita tidak mempunyai kotak kandungan.

Bukan sahaja anda boleh membalikkan apa -apa bentuk, tetapi anda juga boleh mengawal ruang di sekelilingnya! Berikut adalah demo lain menggunakan logo trik CSS untuk menggambarkan betapa mudahnya kaedahnya:

Contoh yang sama ini boleh didapati dalam penukar SVG-to-CSS saya, memberikan anda kod bentuk () tanpa perlu melakukan semua matematik.

Bentuk berulang

Satu lagi kes penggunaan yang menarik bagi arahan langkah adalah apabila kita perlu mengulangi bentuk yang sama beberapa kali. Adakah anda ingat perbezaan antara dan arahan kepada arahan? Arahan dengan membolehkan kita menentukan koordinat relatif memandangkan titik sebelumnya. Oleh itu, jika kita membuat bentuk kita hanya menggunakan, kita boleh menggunakan semula kod yang sama dengan mudah seperti yang kita mahu.

Mari kita mulakan dengan contoh ringkas bentuk bulatan:

 Klip -Laluan: Bentuk (dari xy, arka oleh 0 -50px 1%, arka dengan 0 50px 1%)

Bermula dari XY, saya melukis arka pertama yang bergerak ke atas dengan 50px, maka saya kembali ke XY dengan arka lain menggunakan offset yang sama, tetapi ke bawah. Jika anda agak hilang dengan sintaks, cuba semak Bahagian 1 untuk menyegarkan ingatan anda mengenai arahan ARC.

Bagaimana saya menarik bentuknya tidak penting. Apa yang penting ialah apa sahaja nilai XY, saya akan sentiasa mendapat bulatan yang sama tetapi dalam kedudukan yang berbeza. Adakah anda melihat ke mana saya pergi dengan idea ini? Jika saya mahu menambah bulatan lain, saya hanya mengulangi kod yang sama dengan X Y.

 Klip-Laluan: Bentuk (
  dari x1 y1, arka sebanyak 0 -50px 1%, arka sebanyak 0 50px 1%,
  Pindah ke x2 y2, arka sebanyak 0 -50px 1%, arka sebanyak 0 50px 1%
)

Dan kerana kod itu sama, saya dapat menyimpan bentuk bulatan ke dalam pembolehubah CSS dan menarik seberapa banyak kalangan yang saya mahukan:

 .shape {
  --sh:, arka dengan 0 -50px 1%, arka sebanyak 0 50px 1%;
  
  Klip-Laluan: Bentuk (
    dari x1 y1 var (-sh),
    Pindah ke x2 y2 var (-sh),
    … 
    Pindah ke xn yn var (-sh)
  ) 
}

Anda tidak mahu bulatan? Mudah, anda boleh mengemas kini pembolehubah -dengan bentuk yang anda mahukan. Berikut adalah contoh dengan tiga bentuk yang berbeza:

Dan teka apa? Anda boleh membalikkan keseluruhan perkara menggunakan teknik pemotongan dengan menambahkan bentuk segi empat tepat pada akhir:

Kod ini adalah contoh sempurna dari bentuk () kuasa fungsi. Kami tidak mempunyai sebarang duplikasi kod dan kami hanya boleh menyesuaikan bentuk dengan pembolehubah CSS. Ini adalah sesuatu yang kita tidak dapat mencapai dengan fungsi jalan () kerana ia tidak menyokong pembolehubah.

Kesimpulan

Itu semua untuk ansuran keempat siri kami pada fungsi CSS ()! Kami tidak membuat apa -apa bentuk super kompleks, tetapi kami belajar bagaimana dua arahan mudah dapat membuka banyak kemungkinan apa yang dapat dilakukan menggunakan bentuk ().

Hanya untuk bersenang-senang, di sini adalah satu lagi demo mencipta loader tiga titik klasik menggunakan teknik terakhir yang kami tutupi. Perhatikan berapa jauh kita boleh pergi, menambah perkara seperti animasi ke campuran:

Bentuk CSS yang lebih baik menggunakan bentuk ()

1. Garis dan arka
2. Lebih banyak onarcs
3. Lengkung
4. Tutup dan bergerak (anda ada di sini!)

Atas ialah kandungan terperinci Bentuk CSS yang lebih baik menggunakan Bentuk () - Bahagian 4: Tutup dan Bergerak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!