Jalur klip - Trik CSS

Daftar Isi

The clip-pathproperti di CSS memungkinkan Anda untuk menentukan wilayah tertentu dari suatu unsur untuk display, dengan sisanya yang tersembunyi (atau “dipotong”) pergi.

.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 sebuah clipproperti, tapi catatan itu sudah usang.

Kasus penggunaan yang paling umum adalah gambar, tetapi tidak terbatas pada itu. Anda bisa dengan mudah menerapkannya clip-pathke tag paragraf dan hanya sebagian teks.

 

 I'll be clipped.

Keempat nilai di inset()(dalam CSS di atas) mewakili titik atas / kiri dan titik bawah / kanan , yang membentuk persegi panjang yang terlihat. Segala sesuatu di luar persegi panjang itu tersembunyi.

Gambar oleh Louis Lazaris ini menjelaskan empat poin dari 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:

Sangat aneh yang clip-pathtidak mendukung path()fungsi di luar gerbang, karena path()sudah menjadi hal untuk properti seperti motion-path. Firefox memiliki dukungan untuk itu sekarang, dan kami menunggu peramban lainnya. Lihat Penerapan Awal clip-path: path ();

Buatlah milikmu sendiri

Sampai kami dapat menggunakan dengan andal path(), klip yang paling berguna untuk bentuk kustom yang mewah adalah polygon(). Ini editor yang sangat rapi untuk mereka dari Mads Stoumann (yang juga berfungsi untuk lingkaran dan elips):

Informasi Lebih Lanjut

  • Clipping dan Masking di CSS
  • clip-path di WPD
  • clip-path di MDN
  • Clippy: Pembuat jalur klip Bennett Feely
  • Clipping dan masking di MDN
  • Properti Klip CSS (tidak digunakan lagi) (Web yang Mengesankan)
  • Spec tentang CSS Masking
  • CSS Masking oleh Dirk Schulze
  • Kliping dalam CSS dan SVG - Properti dan Elemen jalur klip oleh Sara Soueidan
  • Pena menandai jalur klip pada CodePen
  • Demo dan dukungan browser Demo Pen oleh Yoksel
  • SVG Masks oleh Jakob Jenkov
  • Riset Alan Greenblatt tentang tingkat dukungan browser untuk fitur kliping dan masking

Dukungan Browser

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.

Desktop

Chrome Firefox YAITU Tepi Safari
91 54 Tidak 88 TP *

Ponsel / Tablet

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

Artikel yang menarik...