Keratan, keratan, dan lebih banyak keratan!

Penggunaan ajaib atribut clip-path CSS: meneroka pelbagai teknik kreatif dan kes aplikasi. Artikel ini akan berkongsi satu siri kesan menarik yang dicapai menggunakan atribut clip-path , dengan harapan dapat memberi inspirasi kepada anda untuk menerapkannya dalam projek anda atau membuat percubaan kreatif.

Ini adalah artikel ketiga mengenai clip-path yang diterbitkan oleh penulis pada trik CSS. Jika anda ingin mengetahui latar belakang, anda boleh membaca artikel berikut:

• Buat kesan interaktif menggunakan clip-path CSS
• Buat kesan interaktif menggunakan CSS clip-path , Bahagian 2

Artikel ini akan memperkenalkan idea baru!

Kreatif satu: Potongan berganda

Silap mata pandai adalah menggunakan clip-path beberapa kali untuk menanam kandungan. Ini mungkin terdengar jelas, tetapi sebenarnya sedikit orang menggunakan konsep ini.

Sebagai contoh, mari kita lihat menu yang diperluaskan:

clip-path hanya boleh digunakan sekali ke node DOM tunggal. Node tidak boleh mempunyai banyak contoh aktif peraturan CSS yang sama pada masa yang sama, yang bermaksud bahawa setiap contoh hanya mempunyai satu clip-path . Walau bagaimanapun, tiada had atas pada bilangan kali nod tanaman gabungan digabungkan. Contohnya, kita boleh memotong a<div> Diletakkan di tanaman lain<code><div> Di dalam, dan sebagainya. Dalam hubungan nenek moyang Dom Node, kita boleh memohon banyak tanaman bebas. Inilah yang dilakukan dalam demonstrasi di atas. Saya mempunyai satu nod yang dipotong mengisi nod lain yang dipotong. Nod induk bertindak sebagai sempadan, dan nod kanak -kanak mengisi nod induk apabila berskala. Ini menghasilkan kesan luar biasa menu bulat. Fikirkannya sebagai kaedah lanjutan lanjutan <code>overflow: hidden .

Sudah tentu, anda boleh berfikir bahawa SVG lebih sesuai untuk tujuan ini. Berbanding dengan clip-path , SVG dapat mencapai lebih banyak fungsi. Ini termasuk zoom halus. Jika clip-path sepenuhnya menyokong lengkung Bezier, keadaan akan berbeza. Tetapi pada masa penulisan, itu bukan kes itu. Bagaimanapun, clip-path sangat mudah. Dengan nod, peraturan CSS, anda boleh mula. Setakat demonstrasi di atas, clip-path melakukan tugas dan oleh itu pilihan yang sesuai.

Saya membuat video pendek untuk menerangkan bagaimana menu berfungsi secara dalaman:

Dua Kreatif: Laluan Keratan Skala

Satu lagi helah (kurang jelas) adalah menggunakan clip-path untuk berskala. Kita sebenarnya boleh menggunakan peralihan CSS untuk menghidupkan clip-path !

Sistem peralihan adalah menakjubkan dalam bagaimana ia dibina. Pada pendapat saya, penambahannya adalah salah satu lompatan terbesar dalam pembangunan teknologi web dalam beberapa tahun kebelakangan ini. Ia menyokong peralihan pelbagai nilai. clip-path adalah nilai yang boleh diterima yang boleh kita animasi. Animasi biasanya bermaksud interpolasi antara dua nilai yang melampau. Untuk clip-path , ini bermakna interpolasi antara dua laluan yang sama sekali berbeza. Di sinilah sistem animasi halus web menunjukkan kelebihannya. Ia berfungsi bukan sahaja untuk nilai tunggal, tetapi juga untuk set nilai animasi.

Apabila animasi clip-path , setiap koordinat diinterpolasi secara berasingan . Ini sangat penting. Ia menjadikan animasi clip-path kelihatan koheren dan licin.

Mari kita lihat demo. Klik pada imej untuk memulakan semula kesannya:

Dalam demo ini, saya menggunakan peralihan clip-path . Ia digunakan untuk skala dari satu clip-path yang meliputi kawasan kecil ke clip-path besar yang lain. Versi minimum clip-path jauh lebih kecil daripada resolusi-dengan kata lain, ia tidak dapat dilihat dengan mata kasar apabila digunakan. Nilai ekstrem yang lain sedikit lebih besar daripada viewport. Di peringkat zoom ini, tidak ada tanaman yang kelihatan, kerana semua tanaman berlaku di luar kawasan yang kelihatan. Animasi antara kedua-dua clip-path yang berbeza ini akan mempunyai kesan yang menarik. Bentuk yang dipotong kelihatan menunjukkan apa yang ada di belakangnya apabila berskala.

Anda mungkin menyedari bahawa demo ini menggunakan bentuk yang berbeza. Dalam kes ini, saya menggunakan logo jenama kasut yang popular. Ini memberi anda idea bagaimana ia berfungsi dalam senario yang lebih realistik.

Begitu juga, di sini adalah video yang menerangkan butiran teknikal secara terperinci:

Tiga Kreatif: Talian Tanaman

Idea lain adalah untuk mewujudkan kesan penonjolan menggunakan clip-path . Sebagai contoh, katakan kami mahu menggunakan clip-path untuk membuat keadaan aktif menu.

Laluan keratan di atas meluas antara pilihan menu yang berbeza apabila animasi. Di samping itu, kami menggunakan bentuk yang menarik untuk membuat UI menonjol.

Demo ini menggunakan salinan yang diubahsuai kandungan yang sama, di mana salinannya terletak di bahagian atas kandungan yang ada. Ia berada dalam kedudukan yang sama seperti unit menu dan digunakan sebagai keadaan aktif. Pada asasnya, ia kelihatan seperti keadaan aktiviti biasa yang lain dari menu. Perbezaannya ialah ia dibuat menggunakan clip-path dan bukannya menggunakan gaya CSS mewah pada elemen HTML.

Gunakan clip-path untuk membuat beberapa kesan luar biasa di sini. Bentuk slanted adalah satu aspek, tetapi kami juga mendapat kesan peregangan. Menu ini mempunyai dua tanaman bebas -satu di sebelah kiri dan satu di sebelah kanan -yang membolehkan tanaman itu animasi pada masa yang berlainan menggunakan kelewatan peralihan. Hasilnya adalah animasi regangan yang sangat santai. Oleh kerana pelonggaran lalai adalah tidak linear, kelewatan boleh menyebabkan kesan band getah sedikit.

Trik kedua di sini adalah untuk memohon kelewatan mengikut arahan. Jika keadaan aktif perlu bergerak ke kanan, sebelah kanan perlu memulakan animasi terlebih dahulu dan sebaliknya. Saya mendapat kesedaran arah dengan menggunakan JavaScript kecil untuk memohon kelas yang betul berdasarkan klik.

Empat Kreatif: Mengiris Slice

Berapa kerapkah anda melihat menu berkembang secara bulat di web? Tidak masuk akal, betul! ? Nah, clip-path bukan sahaja memungkinkan, ia agak mudah.

Menu yang biasanya kita lihat mengandungi pautan yang diatur dalam menu satu baris atau bahkan drop-down, sama seperti helah pertama yang pernah kita lihat sebelumnya. Apa yang kita lakukan di sini adalah meletakkan pautan ini dalam arka dan bukannya segi empat tepat. Sudah tentu, menggunakan segi empat tepat adalah cara tradisional. Idea di sini adalah untuk meneroka lebih banyak interaksi mesra mudah alih dan menyimpan dua prinsip UX tertentu dalam fikiran:

• Matlamat yang jelas, mudah diklik dengan ibu jari anda
• Perubahan berlaku berhampiran fokus - di mana tumpuan visual anda adalah

Demonstrasi ini tidak khusus ditujukan kepada clip-path . Saya hanya menggunakan clip-path untuk membuat pen. Sekali lagi, seperti demo menu yang diperkembangkan sebelumnya, ini adalah soalan yang berguna. Menggunakan clip-path dan radius sempadan 50%, saya segera mendapat arka yang diperlukan.

Lima Kreatif: Togol Togol

Butang togol sentiasa memancarkan pemaju web seperti kami. Nampaknya penjelasan butang togol baru akan diperkenalkan setiap minggu. Ok, ini saya:

Demo ini adalah pembuatan semula tangkapan skrin Dribbble oleh Oleg Frolov. Ia menggabungkan ketiga -tiga teknik yang diterangkan dalam artikel ini. Ini adalah:

• Potongan ganda
• Laluan klip skala
• Lapisan tanaman

Semua suis ini seolah -olah mempunyai satu perkara yang sama. Mereka terdiri daripada latar belakang bujur dan bulatan, sama dengan suis mekanikal sebenar. Cara butang togol ini berfungsi adalah untuk membesarkan clip-path bulat di dalam bekas bulat. Kontena memangkas kandungan melalui overflow: hidden , iaitu tanaman ganda.

Satu lagi bahagian utama demo ialah penggunaan dua versi bergantian dalam tag. Mereka adalah versi asal dan salinan cermin penyongsangan yin-yang mereka. Menggunakan dua versi dan bukannya satu versi, mengambil risiko pengulangan, masalah yang mudah. Dengan kedua -dua versi, kita hanya perlu membuat peralihan untuk versi pertama. Kita kemudian boleh mengulangi sebahagian besar ini untuk versi kedua. Pada akhir peralihan, butang togol beralih ke versi yang bertentangan. Oleh kerana versi terbalik adalah sama dengan keadaan akhir sebelumnya, perubahan tidak dapat dijumpai. Kelebihan teknik ini adalah untuk menggunakan semula bahagian animasi. Kelemahannya adalah bahawa akan ada gagap apabila animasi terganggu. Ini berlaku apabila pengguna menekan butang togol sebelum animasi selesai.

Mari kita lihat di belakang tabir lagi:

Kesimpulan

Anda mungkin berfikir: Eksplorasi adalah satu perkara, tetapi bagaimana dengan pengeluaran? Bolehkah saya menggunakan clip-path di laman web yang sedang saya kerjakan? Adakah ia bersedia untuk dihasilkan?

Nah, tidak ada jawapan yang mudah untuk soalan ini. Antara lain, terdapat dua lagi isu yang perlu dikaji dengan teliti:

1. Sokongan penyemak imbas
2. prestasi

Pada masa penulisan, kira -kira 93% penyemak imbas menyokongnya mengikut Caniuse. Saya fikir kita berada di ambang penggunaan massa. Perhatikan bahawa nombor ini mengambil kira awalan WebKit.

Terdapat juga hujah dari IE, tetapi itu sebenarnya bukan hujah kepada saya. Saya tidak dapat melihat apa usaha tambahan untuk IE. Sekiranya anda membuat penyelesaian untuk penyemak imbas yang tidak selamat? Pengguna anda lebih baik menggunakan penyemak imbas moden. Sudah tentu, terdapat beberapa situasi yang jarang berlaku yang perlu dianggap sebagai warisan. Tetapi dalam kes ini, anda mungkin tidak mempertimbangkan menggunakan CSS moden sama sekali.

Jadi bagaimana dengan prestasi? Nah, kerana perkara semakin meningkat, prestasi menjadi rumit, tetapi saya tidak akan mengatakan apa-apa akan menghalang kita daripada menggunakan clip-path hari ini. Prestasi yang selalu diukur adalah penting. Rata-rata, clip-path mungkin mempunyai kesan prestasi yang lebih besar daripada peraturan CSS yang lain. Tetapi ingatlah bahawa amalan yang kita memperkenalkan di sini adalah nasihat, bukan undang -undang. Fikirkan mereka sebagai cadangan. Membangunkan kebiasaan mengukur prestasi.

Teruskan dan potong halaman anda. Lihat apa yang berlaku!