Chúng tôi sẽ bắt đầu với bản trình diễn trực tiếp, tiêu điểm, di chuột hoặc nhấp vào vòng tròn bên dưới và màu nền sẽ hoạt ảnh
Tôi là một nút tròn thú vị
Tôi sẽ để con mèo ra khỏi túi
Đây chỉ là một nút bình thường với SVG được sử dụng làm mặt nạ CSS
Thay vì thay đổi màu fill của SVG, chúng tôi thay đổi background-color của nút. Nhưng điều đó sẽ không làm hỏng niềm vui vì nó mở ra một thế giới đầy khả năng nhưng chúng ta sẽ đạt được điều đó
Sử dụng một SVG làm mặt nạ CSS
Chúng ta có thể thấy SVG mặt cười tuyệt vời của chúng ta bên dưới 😎
Điều tuyệt vời về dòng thời gian mà chúng ta đang sống là chúng ta có thể chuyển SVG sang hàm CSS url[] mà không cần mã hóa base64 hoặc thoát tất cả các loại ký tự
- Tiền tố SVG với
data:image/svg+xml, - Thêm một số cấu trúc bằng cách kết thúc một dòng bằng
\ - Cứ như vậy, một SVG có thể đọc được đã xuất hiện trong CSS của chúng tôi
Được rồi, trước tiên hãy gán SVG cho thuộc tính background để chúng ta có thể nhìn thấy nó, chúng ta sẽ biến nó thành mặt nạ trong vài phút nữa
button {
/* ...Other styles */
/* Color */
background-color: Crimson;
/* Store the SVG in a variable so it's easy to re-use */
--svg: url['data:image/svg+xml,\
\
\
\
\
\
'];
/* Assign the SVG variable */
background-image: var[--svg];
}
button:hover,
button:focus {
background-color: Turquoise;
}
button:active {
background-color: Gold;
}Chúng ta có thể tương tác với bản demo trực tiếp bên dưới để xem SVG đã được tải và các kiểu được áp dụng chính xác
Tôi là một nút tròn thú vị
Bây giờ là lúc loại bỏ thuộc tính background và gán biến
button {
/* ...Other styles */
/* Color */
background-color: Crimson;
/* Store the SVG in a variable so it's easy to re-use */
--svg: url['data:image/svg+xml,\
\
\
\
\
\
'];
/* Assign the SVG variable */
background-image: var[--svg];
}
button:hover,
button:focus {
background-color: Turquoise;
}
button:active {
background-color: Gold;
}button {
/* ...Other styles */
/* Color */
background-color: Crimson;
/* Store the SVG in a variable so it's easy to re-use */
--svg: url['data:image/svg+xml,\
\
\
\
\
\
'];
/* Assign the SVG variable */
background-image: var[--svg];
}
button:hover,
button:focus {
background-color: Turquoise;
}
button:active {
background-color: Gold;
}Các phần màu đen của SVG sẽ là các phần hiển thị của phần tử và các phần trong suốt sẽ trở nên vô hình
button {
/* ...Other styles */
/* Chrome, still requires prefix in 2022 */
-webkit-mask: var[--svg];
/* Firefox and Safari */
mask: var[--svg];
}Tadaa. 🥳
Tôi là một nút tròn thú vị
Nếu bạn gặp khó khăn trong việc sử dụng mặt nạ, một mẹo hữu ích là tạm thời chỉ định mặt nạ cho thuộc tính
button {
/* ...Other styles */
/* Color */
background-color: Crimson;
/* Store the SVG in a variable so it's easy to re-use */
--svg: url['data:image/svg+xml,\
\
\
\
\
\
'];
/* Assign the SVG variable */
background-image: var[--svg];
}
button:hover,
button:focus {
background-color: Turquoise;
}
button:active {
background-color: Gold;
}Điều này cho phép chúng tôi nhìn thấy trực quan vị trí của các phần màu đen và trong suốt trên mặt nạ của bạn, điều này trở nên đặc biệt hữu ích khi xây dựng các mặt nạ phức tạp hơn
Bất kỳ nền nào đi
Bởi vì chúng tôi đang che nút nên chúng tôi có thể sử dụng bất kỳ kiểu nền hoặc hiệu ứng nào mà chúng tôi có thể nghĩ ra
Tôi là một nút tròn thú vị
Tôi là một nút tròn thú vị
Tôi là một nút tròn thú vị
Đoạn mã phong cách hình nền SVG hoàn chỉnh
Bạn có thể tìm thấy nút sao chép ở phía bên tay phải của đoạn mã, hãy tận hưởng
I'm a cool circle button
button {
/* Base styles */
display: block;
width: 4rem;
height: 4rem;
border: none;
cursor: pointer;
/* Hide button caption text */
overflow: hidden;
color: transparent;
/* The fill animation */
background-color: Crimson;
transition: background-color 0.2s;
/* Store the SVG in a variable so it's easy to use */
--svg: url['data:image/svg+xml,\
\
\
\
\
\
'];
/* Chrome, still requires prefix in 2022 */
-webkit-mask: var[--svg];
/* Firefox and Safari */
mask: var[--svg];
}
button:hover,
button:focus {
background-color: Turquoise;
}
button:active {
background-color: Gold;
}
Phần kết luận
Chúng tôi đã học được một thủ thuật hay khi sử dụng thuộc tính CSS
button {
/* ...Other styles */
/* Color */
background-color: Crimson;
/* Store the SVG in a variable so it's easy to re-use */
--svg: url['data:image/svg+xml,\
\
\
\
\
\
'];
/* Assign the SVG variable */
background-image: var[--svg];
}
button:hover,
button:focus {
background-color: Turquoise;
}
button:active {
background-color: Gold;
}Trên hết, chúng ta biết được rằng thuộc tính
button {
/* ...Other styles */
/* Color */
background-color: Crimson;
/* Store the SVG in a variable so it's easy to re-use */
--svg: url['data:image/svg+xml,\
\
\
\
\
\
'];
/* Assign the SVG variable */
background-image: var[--svg];
}
button:hover,
button:focus {
background-color: Turquoise;
}
button:active {
background-color: Gold;
}background nên chúng ta có thể chuyển đổi chúng để giúp việc gỡ lỗi hình ảnh button {
/* ...Other styles */
/* Color */
background-color: Crimson;
/* Store the SVG in a variable so it's easy to re-use */
--svg: url['data:image/svg+xml,\
\
\
\
\
\
'];
/* Assign the SVG variable */
background-image: var[--svg];
}
button:hover,
button:focus {
background-color: Turquoise;
}
button:active {
background-color: Gold;
}