Bạn có thể tạo các sọc nền trong CSS bằng cách sử dụng tuyến tính-gradient. Chúng ta thường nghĩ về một gradient như một sự mờ dần từ màu này sang màu khác, nhưng mẹo đối với các đường sọc là không có bất kỳ sự phai màu nào cả. Thay vào đó, chúng tôi có thể chỉ định “điểm dừng màu” tại cùng một vị trí, sao cho màu sắc thay đổi ngay lập tức từ một (…)
Bạn có thể tạo sọc nền trong CSS bằng cách sử dụng linear-gradient. Chúng ta thường nghĩ về một gradient như một sự mờ dần từ màu này sang màu khác, nhưng mẹo đối với các đường sọc là không có bất kỳ sự phai màu nào cả. Thay vào đó, chúng ta có thể chỉ định "điểm dừng màu" tại cùng một vị trí, sao cho màu sắc thay đổi ngay lập tức từ điểm này sang điểm tiếp theo.
Sau đó, mẹo để làm cho điều này thậm chí còn dễ dàng hơn là sử dụng repeating-linear-gradientđể chúng ta có thể mô tả một vài sọc đầu tiên và nó sẽ lặp lại một cách tự nhiên:
.element ( background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px ); )
Để làm sinh động các sọc theo kiểu cột cắt tóc, vấn đề là tạo hoạt ảnh cho background-position. Đây cũng chỉ là một mẹo nhỏ. Nếu kích thước phần tử của bạn không khớp với kích thước của các sọc lặp lại, việc di chuyển vị trí nền có thể dẫn đến một số sọc khó xử như sau:
Thay vì cố gắng khớp các kích thước này một cách hoàn hảo, sẽ dễ dàng hơn để tăng lên background-position200% và sau đó làm sinh động vị trí của nó lên 100%.
div ( background-image: repeating-linear-gradient( -45deg, transparent, transparent 1rem, #ccc 1rem, #ccc 2rem ); background-size: 200% 200%; animation: barberpole 10s linear infinite; ) @keyframes barberpole ( 100% ( background-position: 100% 100%; ) )