Clip đường dẫn CSS

Khi tôi mới học CSS

.card {
  clip-path: inset(20px 20px 50px 20px);
}

1 vào những ngày trước, tôi đã mất nhiều thời gian hơn tôi mong đợi và tôi cũng phải vật lộn để ghi nhớ nó. Tôi không biết lý do chính xác, nhưng có lẽ vì tôi không sử dụng nó nhiều?

Trong bài viết này, tôi mong muốn cung cấp cho bạn một lời giải thích rõ ràng về cách thức hoạt động của

.card {
  clip-path: inset(20px 20px 50px 20px);
}

1 một cách chi tiết khi sử dụng nó và cách bạn có thể sử dụng nó ngay hôm nay trong các dự án phát triển web của mình. Bạn đã sẵn sàng chưa?

Giới thiệu

Thuộc tính

.card {
  clip-path: inset(20px 20px 50px 20px);
}

1 tạo một vùng cắt trong đó nội dung bên trong nó hiển thị và nội dung bên ngoài nó không nhìn thấy được. Đây là một ví dụ cơ bản về hình tròn

.card {
  clip-path: inset(20px 20px 50px 20px);
}

1

.card {
  background-color: #77cce9;
  clip-path: circle(80px at 50% 50%);
}

Khi áp dụng

.card {
  clip-path: inset(20px 20px 50px 20px);
}

1, khu vực hiển thị chỉ là vòng tròn màu xanh lam. Bất cứ điều gì bên ngoài vòng tròn là vô hình. Đây là hình động hiển thị một đoạn cắt của vòng tròn trong ví dụ trước

hệ tọa độ

Trước khi đi sâu vào chi tiết của

.card {
  clip-path: inset(20px 20px 50px 20px);
}

1, điều đáng nói là hệ tọa độ hoạt động như thế nào. Điểm gốc là góc trên cùng bên trái với trục x chỉ sang phải và trục y chỉ xuống

Với ý nghĩ đó, hãy lấy một ví dụ đơn giản để xem cách một phần tử được cắt bớt. Trong ví dụ, khu vực được cắt bớt là một hình tròn có kích thước

.card {
  clip-path: inset(20px 20px 50px 20px);
}

7 và tâm của nó nằm ở vị trí

.card {
  clip-path: inset(20px 20px 50px 20px);
}

8 (trên cùng bên trái)

Lưu ý rằng chỉ khu vực được tô sáng (màu xanh đậm) mới hiển thị cho người dùng. Phần còn lại của vòng tròn được cắt bớt. Câu hỏi đặt ra là, làm thế nào chúng ta có thể hiển thị toàn bộ vòng tròn?

Tâm của vòng tròn được đặt ở vị trí

.card {
  clip-path: inset(20px 20px 50px 20px);
}

7 từ bên trái và

.card {
  clip-path: inset(20px 20px 50px 20px);
}

7 từ trên xuống. Bây giờ bạn đã hiểu cách hoạt động của hệ tọa độ, tôi sẽ giải thích các giá trị có thể có cho thuộc tính

.card {
  clip-path: inset(20px 20px 50px 20px);
}

1

Các giá trị .card { clip-path: inset(20px 20px 50px 20px); } 1

đầu vào

Giá trị bên trong xác định một hình chữ nhật bên trong. Chúng ta có thể kiểm soát bốn cạnh, giống như chúng ta xử lý lề hoặc phần đệm. Trong ví dụ sau, thẻ có phần bên trong là

.card {
  clip-path: inset(20px 20px 50px 20px);
}

33 từ tất cả các cạnh (trên, phải, dưới và trái)

.card {
  clip-path: inset(20px 20px 50px 20px);
}

4

Nếu bạn cần điều chỉnh phần bên trong từ một trong các cạnh, bạn có thể. Đây là một ví dụ khác

.card {
  clip-path: inset(20px 20px 50px 20px);
}

Phần tử có một hình nhỏ

.card {
  clip-path: inset(20px 20px 50px 20px);
}

34 từ phía dưới

Câu hỏi là, chúng ta có thể có một hình tròn không? . Có thể nhờ từ khóa

.card {
  clip-path: inset(20px 20px 50px 20px);
}

35. Thêm từ khóa

.card {
  clip-path: inset(20px 20px 50px 20px);
}

36 có thể làm tròn các góc

.card {
  clip-path: inset(20px 20px 50px 20px);
}

3

Không chỉ vậy, chúng ta có thể điều chỉnh bán kính cho từng bên một cách riêng biệt. Đây là một ví dụ với bán kính bằng 0 cho các góc trên cùng bên phải và dưới cùng bên trái

.card {
  clip-path: inset(20px 20px 50px 20px);
}

0

Vòng tròn

Để sử dụng giá trị

.card {
  clip-path: inset(20px 20px 50px 20px);
}

37, chúng ta cần bán kính và vị trí của nó. Đây là một ví dụ

.card {
  clip-path: inset(20px 20px 50px 20px);
}

2

Bán kính của hình tròn là

.card {
  clip-path: inset(20px 20px 50px 20px);
}

38 và nó nằm ở vị trí

.card {
  clip-path: inset(20px 20px 50px 20px);
}

39 trên trục x và

.card {
  clip-path: inset(20px 20px 50px 20px);
}

39 trên trục y

hình elip

Với

.card {
  clip-path: inset(20px 20px 50px 20px);
}

01, chúng ta có thể đặt chiều rộng và chiều cao để tạo hình cắt hình bầu dục

.card {
  clip-path: inset(20px 20px 50px 20px);
}

7

đa giác

Đối với tôi, giá trị

.card {
  clip-path: inset(20px 20px 50px 20px);
}

02 là giá trị thú vị nhất. Chúng tôi có khả năng kiểm soát nhiều bộ giá trị trục x và trục y khác nhau

.card {
  clip-path: inset(20px 20px 50px 20px);
}

9

Đây là một ví dụ sử dụng

.card {
  clip-path: inset(20px 20px 50px 20px);
}

02 để cắt một hình chữ nhật. Lưu ý cách tôi ánh xạ từng tập hợp điểm tới tọa độ của nó trên các trục

.card {
  clip-path: inset(20px 20px 50px 20px);
}

1

Chúng ta cũng có thể vẽ các hình phức tạp với nhiều điểm bằng cách sử dụng giá trị

.card {
  clip-path: inset(20px 20px 50px 20px);
}

04

Đường dẫn

Giá trị

.card {
  clip-path: inset(20px 20px 50px 20px);
}

05 cho phép chúng tôi sử dụng đường dẫn SVG để cắt một khu vực cụ thể. Hiện tại, hỗ trợ trình duyệt không nhất quán. Để làm cho nó hoạt động trên các trình duyệt khác nhau, chúng tôi cần sử dụng một SVG nội tuyến, sau đó sử dụng

.card {
  clip-path: inset(20px 20px 50px 20px);
}

06 làm giá trị cho

.card {
  clip-path: inset(20px 20px 50px 20px);
}

1

.card {
  clip-path: inset(20px 20px 50px 20px);
}

6

Trong CSS, chúng ta cần nối thêm đường dẫn bằng giá trị

.card {
  clip-path: inset(20px 20px 50px 20px);
}

06

.card {
  clip-path: inset(20px 20px 50px 20px);
}

40

Bây giờ chúng ta đã xem qua lý thuyết về

.card {
  clip-path: inset(20px 20px 50px 20px);
}

1 và các giá trị có thể có của nó, đã đến lúc sử dụng nó trong thực tế và khám phá một số trường hợp sử dụng. Bạn đã sẵn sàng chưa?

Trường hợp sử dụng

hiệu ứng góc cạnh

Bằng cách này hay cách khác, bạn có thể đã thấy mô hình này trên web nơi một phần có nền hơi góc cạnh. Đó là trường hợp sử dụng hoàn hảo cho

.card {
  clip-path: inset(20px 20px 50px 20px);
}

1

Bạn có thể đoán cách thực hiện hiệu ứng góc cạnh không?

.card {
  clip-path: inset(20px 20px 50px 20px);
}

41

Trong một số trường hợp, có thể khó chịu khi chỉnh 8 số cho giá trị đa giác. Vì lý do đó, mình có một mẹo nhỏ dành cho các bạn đó là tùy vào trình duyệt để tạo ra hình dạng mà chúng ta muốn. Đầu tiên, chúng ta cần thêm như sau

.card {
  clip-path: inset(20px 20px 50px 20px);
}

42

Sau đó, chúng ta cần kiểm tra phần đó của DevTools. Khi đã xong, hãy lưu ý rằng có một biểu tượng đa giác nhỏ ở phía bên trái của giá trị

.card {
  clip-path: inset(20px 20px 50px 20px);
}

02

Sau khi nhấp vào biểu tượng đó, chúng tôi có thể chỉnh sửa đa giác trong trình duyệt. Đó không phải là điều tuyệt vời sao?

Tạo góc tương ứng với chiều rộng khung nhìn

Chúng tôi cũng có thể sử dụng CSS

.card {
  clip-path: inset(20px 20px 50px 20px);
}

23 kết hợp với các đơn vị khung nhìn CSS để tạo góc tương ứng với chiều rộng của khung nhìn. Tôi đã biết về điều này từ bài báo tuyệt vời này của Kilian Valkhof

.card {
  clip-path: inset(20px 20px 50px 20px);
}

43

Nhiều hiệu ứng góc cạnh

Tôi có một câu hỏi trong đầu về việc liệu chúng ta có muốn có nhiều phần góc cạnh không?

Điều đầu tiên tôi nghĩ đến là chỉ cần thêm một

.card {
  clip-path: inset(20px 20px 50px 20px);
}

24 hoặc một

.card {
  clip-path: inset(20px 20px 50px 20px);
}

25. Thật không may, chúng sẽ bị cắt bớt, vì vậy ngay cả khi chúng tôi thêm một trong số chúng, nó sẽ không xuất hiện như mong đợi

Trong trường hợp như vậy, giải pháp là sử dụng nhiều phần tử, với mỗi phần tử có một điểm cắt khác nhau. Đây là cách chúng ta có thể làm điều đó

.card {
  clip-path: inset(20px 20px 50px 20px);
}

44

.card {
  clip-path: inset(20px 20px 50px 20px);
}

45

Chúng tôi có một phần tử giả có cùng kích thước và đường dẫn clip với phần tử khác. Sự khác biệt là nó được định vị bên dưới nó với

.card {
  clip-path: inset(20px 20px 50px 20px);
}

26 và

.card {
  clip-path: inset(20px 20px 50px 20px);
}

27. Tôi đã sử dụng giá trị

.card {
  clip-path: inset(20px 20px 50px 20px);
}

28 vì nó là kết quả của

.card {
  clip-path: inset(20px 20px 50px 20px);
}

29

Hiển thị khi cuộn

Bằng cách sử dụng API IntersectionObserver, chúng tôi có thể hiển thị một số thành phần nhất định trên trang khi người dùng đang cuộn

Giá trị chèn

Giá trị

.card {
  clip-path: inset(20px 20px 50px 20px);
}

1 nhiều nhất mà tôi thấy hữu ích cho hiệu ứng này là

.card {
  clip-path: inset(20px 20px 50px 20px);
}

71. Bạn có thể nghĩ về, tại sao?

Lưu ý cách hình chữ nhật màu xanh có thể ẩn hoàn toàn bằng cách áp dụng

.card {
  clip-path: inset(20px 20px 50px 20px);
}

72. Có, giá trị làm cho nó ẩn đi là

.card {
  clip-path: inset(20px 20px 50px 20px);
}

39 bởi vì chúng tôi đang áp dụng một hình nhỏ từ bốn phía. Nói cách khác, hình nhỏ đang được áp dụng từ cạnh đến tâm của hình chữ nhật

Trong hình bên dưới,

.card {
  clip-path: inset(20px 20px 50px 20px);
}

71 đang được sử dụng để hiển thị hình ảnh trong khi người dùng đang cuộn

Đoạn mã javascript bên dưới thêm lớp

.card {
  clip-path: inset(20px 20px 50px 20px);
}

75 vào mỗi hình ảnh trong chế độ xem. Cùng với đó, chúng ta có thể làm cho hình ảnh hiển thị bằng cách cuộn

.card {
  clip-path: inset(20px 20px 50px 20px);
}

46

.card {
  clip-path: inset(20px 20px 50px 20px);
}

47

Nó không đơn giản sao?

Thử nghiệm

Không chỉ vậy, chúng ta còn có thể kiểm soát hướng của quá trình chuyển đổi tiết lộ. Để làm điều đó, chúng ta chỉ cần sử dụng một giá trị từ bốn phía. Ví dụ: nếu chúng tôi muốn chuyển đổi từ trên xuống dưới, giá trị dưới cùng phải được chuyển từ

.card {
  clip-path: inset(20px 20px 50px 20px);
}

76 sang

.card {
  clip-path: inset(20px 20px 50px 20px);
}

77. Đây là một hình ảnh giải thích điều đó

Và đây là một bản demo tương tác

Xem Hoạt hình bút - Đường dẫn clip - Inset của Ahmad Shadeed (@shadeed) trên CodePen

Hiệu ứng di chuột và hoạt hình

Khả năng tạo hiệu ứng di chuột và hoạt ảnh với

.card {
  clip-path: inset(20px 20px 50px 20px);
}

1 là vô tận. Xem xét ví dụ sau

Những gì chúng ta cần làm là thêm hiệu ứng di chuột có tỷ lệ từ một vị trí đã chỉ định. Trong trường hợp này, hãy sử dụng giá trị

.card {
  clip-path: inset(20px 20px 50px 20px);
}

37

Để làm cho nó dễ dàng hơn và dễ bảo trì hơn, hãy sử dụng các biến CSS. Bằng cách đó, chúng tôi sẽ không sao chép toàn bộ

.card {
  clip-path: inset(20px 20px 50px 20px);
}

1. Chúng tôi sẽ chỉ thay đổi các biến CSS cần thiết

.card {
  clip-path: inset(20px 20px 50px 20px);
}

48

Xem video dưới đây để biết nó hoạt động như thế nào

Không những thế chúng ta có thể thay đổi vị trí của ảnh động rất dễ dàng. Tôi đã tạo bản trình diễn tương tác với khả năng thay đổi vị trí từ menu thả xuống

Xem Hoạt hình bút - Đường dẫn clip của Ahmad Shadeed (@shadeed) trên CodePen

Nếu bạn muốn tìm hiểu sâu hơn về các hiệu ứng hoạt hình, Mr. Adam Argyle đã tạo một thư viện hoạt hình CSS rất hữu ích dựa 100% vào đường dẫn clip CSS. Kiểm tra nó ra

Hiệu ứng gợn sóng

Hiệu ứng gợn sóng đã trở nên phổ biến kể từ khi phát hành thiết kế Vật liệu. Với

.card {
  clip-path: inset(20px 20px 50px 20px);
}

1, chúng ta có thể dễ dàng tái tạo hiệu ứng này

.card {
  clip-path: inset(20px 20px 50px 20px);
}

49

.card {
  clip-path: inset(20px 20px 50px 20px);
}

0

Xem Hiệu ứng gợn nút bút của Ahmad Shadeed (@shadeed) trên CodePen

Thật tốt khi biết về .card { clip-path: inset(20px 20px 50px 20px); } 1

Các khu vực vô hình không nhận được các sự kiện con trỏ

Khi một khu vực bị cắt bớt, mọi thứ bên ngoài khu vực đó sẽ không nhận được bất kỳ sự kiện con trỏ nào. Điều đó có nghĩa là người dùng không thể di chuột qua nó

Bạn có thể sử dụng các giá trị tương đối

Bạn có muốn tạo một

.card {
  clip-path: inset(20px 20px 50px 20px);
}

1 liên quan đến

.card {
  clip-path: inset(20px 20px 50px 20px);
}

94 không? . Sử dụng các giá trị

.card {
  clip-path: inset(20px 20px 50px 20px);
}

95 hoặc

.card {
  clip-path: inset(20px 20px 50px 20px);
}

96 cho

.card {
  clip-path: inset(20px 20px 50px 20px);
}

1 và bạn đã hoàn tất

clip là gì

clip là gì

có kẹp không

Làm cách nào để sử dụng đường dẫn trong CSS?