Jalan klip - Trik CSS

Isi kandungan

The clip-pathharta di CSS membolehkan anda untuk menentukan kawasan tertentu elemen untuk paparan, dengan yang lain yang tersembunyi (atau "dipotong") dari.

.clip-me ( /* Example: clip away the element from the top, right, bottom, and left edges */ clip-path: inset(10px 20px 30px 40px); /* or "none" */ /* Example: clip element into a Heptagon */ clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%); /* Deprecated version */ position: absolute; /* absolute or fixed positioning required */ clip: rect(110px, 160px, 170px, 60px); /* or "auto" */ /* values descript a top/left point and bottom/right point */ )

Dulu ada clipharta benda, tapi perhatikan sudah tidak digunakan lagi.

Kes penggunaan yang paling biasa adalah gambar, tetapi tidak terhad kepada itu. Anda dapat dengan mudah menggunakan clip-pathtag perenggan dan hanya sebahagian teks.

 

 I'll be clipped.

Keempat nilai di inset()(dalam CSS di atas) mewakili titik atas / kiri dan titik bawah / kanan , yang membentuk segi empat tepat yang kelihatan. Semua perkara di luar segi empat itu tersembunyi.

Gambar oleh Louis Lazaris ini menjelaskan empat titik sintaks lama denganclip: rect(); sangat baik.

Nilai lain yang mungkin:

.clip-me ( /* referencing path from an inline SVG */ clip-path: url(#c1); /* referencing path from external SVG */ clip-path: url(path.svg#c1); /* polygon */ clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); /* circle */ clip-path: circle(30px at 35px 35px); /* ellipse */ clip-path: ellipse(65px 30px at 125px 40px); /* inset-rectangle() may replace inset() ? */ /* rectangle() coming in SVG 2 */ /* rounded corners… not sure if a thing anymore */ clip-path: inset(10% 10% 10% 10% round 20%, 20%); )

Contoh jalur klip SVG:

Ini sangat pelik yang clip-pathtidak menyokong path()fungsi di luar gerbang, kerana path()sudah menjadi perkara untuk sifat seperti motion-path. Firefox mempunyai sokongan untuknya sekarang, dan kami sedang menunggu penyemak imbas yang lain. Lihat Pelaksanaan Awal clip-path: path ();

Buat Sendiri

Sehingga kita dapat menggunakan dengan pasti path(), klip yang paling berguna untuk bentuk khusus yang menarik adalah polygon(). Berikut adalah editor yang sangat kemas bagi mereka dari Mads Stoumann (yang berfungsi untuk bulatan dan elips juga):

Maklumat lanjut

  • Keratan dan Penyamaran dalam CSS
  • jalur klip di WPD
  • jalur klip di MDN
  • Clippy: Pembuat jalur klip Bennett Feely
  • Keratan dan pelindung pada MDN
  • Harta Klip CSS (yang tidak digunakan lagi) (Web Mengesankan)
  • Spesifikasi mengenai CSS Masking
  • CSS Masking oleh Dirk Schulze
  • Keratan dalam CSS dan SVG - Harta klip dan Elemen oleh Sara Soueidan
  • Jalur klip yang diberi tag pada CodePen
  • Demo dan penyokong penyokong demo Pen oleh Yoksel
  • Masker SVG oleh Jakob Jenkov
  • Penyelidikan Alan Greenblatt mengenai tahap sokongan penyemak imbas untuk memotong dan menyembunyikan ciri

Sokongan Penyemak Imbas

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.

Desktop

Chrome Firefox IE Hujung Safari
91 54 Tidak 88 TP *

Mudah Alih / Tablet

Android Chrome Android Firefox Android Safari iOS
88 85 81 14.0-14.4 *

Artikel menarik...