- Quy tắc @property được hỗ trợ trên mọi trình duyệt hiện đại và cung cấp khả năng định nghĩa tường minh cú pháp, giá trị khởi tạo và tính kế thừa của các thuộc tính tùy biến trong CSS
- Đã khá nhiều thời gian trôi qua kể từ khi CSS Houdini và CSS Properties and Values API lần đầu được giới thiệu
- Bài viết khám phá khả năng của @property thông qua các bản demo để xem thế hệ CSS tiếp theo có thể mang lại điều gì
Calls to action (yếu tố kêu gọi hành động)
- CTA nổi bật trên trang web đang được sử dụng trên nhiều website
- Tác giả đã trực tiếp thử kiểu này và có thể xem kết quả trên CodePen
- Nếu mở bảng CSS của bản demo, bạn có thể thấy quy tắc @property liên quan đến các thuộc tính tùy biến cần được animate
@property --gradient-angle {
syntax: "";
initial-value: 0deg;
inherits: false;
}
- Quy tắc @property cho trình duyệt biết cú pháp nào được chấp nhận và đặt giá trị khởi tạo là 0deg
- Nhờ vậy, trình duyệt có thể chuyển mượt từ 0deg sang 360deg và hiển thị gradient quay
@keyframes rotate-gradient {
to {
--gradient-angle: 360deg;
}
}
.rotate-gradient {
background: conic-gradient(from var(--gradient-angle), transparent, black);
animation: rotate-gradient 10s linear infinite;
}
- Bản demo xoay gradient đơn giản cho thấy chỉ cần vài dòng mã để hiện thực hóa ý tưởng này
Chuyển tiếp hover mượt mà
- Cần một vài yếu tố đặc biệt để tạo chuyển tiếp gradient mượt khi hover lên phần tử
- Mỗi thuộc tính tùy biến cần animate đều khai báo cú pháp trong định nghĩa @property để trình duyệt có thể chuyển đổi giá trị một cách mượt mà
.shiny-cta {
background: linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg)) padding-box,
conic-gradient(from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
transparent, var(--shiny-cta-highlight) var(--gradient-percent),
var(--gradient-shine) calc(var(--gradient-percent) * 2),
var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3),
transparent calc(var(--gradient-percent) * 4)) border-box;
}
- Giá trị
--gradient-percent quyết định kích thước của vùng phát sáng; khi hover, tăng phần trăm này sẽ làm vệt sáng dài hơn
- Giá trị
--gradient-angle-offset điều chỉnh lại góc gradient để ánh sáng không bị quay ngược lại khi hover
Điều chỉnh tốc độ quay
- Mẹo CSS làm chậm chuyển động quay khi hover rất hữu ích
- Khai báo cùng một animation quay hai lần, animation thứ hai đặt ngược chiều, tạm dừng và chia đôi thời lượng
- Khi phần tử được hover,
animation-play-state: running sẽ ghi đè trạng thái tạm dừng và làm chuyển động quay chậm lại còn một nửa tốc độ
Những chấm sáng nhỏ
- Thêm hiệu ứng các chấm nhỏ phát sáng bên trong nút
- Để làm điều này, tạo một nền
radial-gradient
.shiny-cta::before {
--position: 2px;
--space: calc(var(--position) * 2);
background: radial-gradient(circle at var(--position) var(--position),
white calc(var(--position) / 4),
transparent 0) padding-box;
background-size: var(--space) var(--space);
background-repeat: space;
}
- Thuộc tính tùy biến
--gradient-angle được dùng trong mặt nạ conic-gradient để vừa xoay vừa hé lộ một phần của mẫu chấm
Tăng cường màu sắc khi hover
- Cải thiện kiểu hover để tạo chiều sâu hơn và nổi bật hơn
- Bọc văn bản của nút trong phần tử
span, rồi áp dụng box-shadow làm mờ để nó nở ra và co lại khi hover
Đưa phong cách mới vào sử dụng
- Nhiều kỹ thuật ở trên cho đến cách đây không lâu gần như là không thể thực hiện
- Việc định nghĩa tường minh các thuộc tính tùy biến mở ra rất nhiều cơ hội
- Rất đáng chờ đợi xem @property sẽ được tận dụng như thế nào trong các ứng dụng quy mô lớn và các design system
Tổng hợp của GN⁺
- Quy tắc @property cung cấp khả năng định nghĩa tường minh cú pháp, giá trị khởi tạo và tính kế thừa của các thuộc tính tùy biến trong CSS
- Tính năng này cho phép lập trình viên web triển khai các animation và kiểu dáng phức tạp, tinh vi hơn
- Đặc biệt, nó có tiềm năng được sử dụng rất hữu ích trong các ứng dụng quy mô lớn và design system
- Các dự án khác cung cấp khả năng tương tự gồm có CSS Houdini và CSS Properties and Values API
1 bình luận
Ý kiến trên Hacker News
Cảm thấy như não mình đang chống lại khi tiếp cận một khái niệm mới
@propertyđể hiểuKhông phải là nhà phát triển web, nhưng có thể sử dụng các web framework cơ bản
Gần đây thấy hứng thú với công việc liên quan đến CSS, đặc biệt là Houdini
Không phải cứ làm được là nên làm
Những gì có thể làm bằng CSS animation mang lại cảm giác như phép màu
Đây là một demo thú vị về mặt kỹ thuật, nhưng không nên animate nút theo cách này
Các bài đăng trước đây không được chú ý nhiều, nhưng vẫn thú vị và mang tính giáo dục
Website này mang lại niềm vui
Thích làm việc với CSS, nhưng thấy đồng nghiệp gặp khó khăn với nó
Đã không làm web development một thời gian và mất khá lâu để hiểu tính năng này làm gì
@property --gradient-angle {...}inherits: false;thì rõ là làm gì, nhưng không hiểu tại sao lại cần@property@propertyđược sử dụng hay không