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ướchệ 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ốngVớ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];
}
1Các giá trị .card {
clip-path: inset[20px 20px 50px 20px];
}
1
.card {
clip-path: inset[20px 20px 50px 20px];
}
đầ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];
}
4Nế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ướiCâ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];
}
3Khô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];
}
0Vò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];
}
2Bá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 yhì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];
}
1Chú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];
}
6Trong 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];
}
40Bâ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];
}
1Bạ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];
}
41Trong 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];
}
42Sau đó, 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];
}
02Sau 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];
}
43Nhiề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 đợiTrong 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];
}
45Chú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];
}
29Hiể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ậtTrong 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];
}
47Nó 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ụ sauNhữ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];
}
48Xem 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];
}
0Xem 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
.card {
clip-path: inset[20px 20px 50px 20px];
}
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