Một số liên kết về CSS Gradients

Thỉnh thoảng, nhóm viết blog dường như tập hợp lại về một chủ đề nhất định và nó giống như các bài báo đã lưu trong thư mục dấu trang của tôi đang có một cuộc trò chuyện. Cuộc trò chuyện ở đó bây giờ là tất cả về CSS Gradients và tôi nghĩ rằng tôi sẽ liên kết một số phần thú vị hơn.

• Ngày 22: chuyển màu conic - Manuel Matuzovic đã xem xét các độ dốc màu conic vào Ngày thứ 21 trong chuỗi 100 ngày của anh ấy về CSS hiện đại, mang đến một cái nhìn đẹp ở cấp độ cao về màu sắc, góc độ, vị trí và điểm dừng màu. Sau đó, trên Ngày 22, anh ấy sử dụng nó trên ::backdrop phần tử giả. (Nhân tiện, Twitter bất ngờ đình chỉ tài khoản của anh ấy - hãy giúp đỡ con tàu đó nếu chúng ta có thể.)
• Bạn có thực sự hiểu CSS radial-gradient? - Patrick Brosset đã hoàn thành công việc xứng đáng hướng dẫn ở đây và thành thật mà nói, tôi vẫn đang làm việc theo cách của mình. Nhưng tôi đã đánh giá cao những lời giải thích và trình diễn rõ ràng của anh ấy về những thứ mà tôi vẫn chưa hiểu, như các từ khóa về kích thước và hình dạng của một gradient xuyên tâm. Tôi đã liên kết điều này với riêng của chúng tôi Hướng dẫn CSS Gradients!
• Gradients nền có thể tùy chỉnh cao - Này, nói về gradient xuyên tâm, Scott Vandeheycông thức của một với nhiều màu dừng đã được thực hiện trong các vòng tuần trước. Thách thức của anh ấy là tạo ra một mẫu gradient có thể hỗ trợ các biến thể màu sắc khác nhau, thông thường sẽ là một mớ hỗn độn nóng của các lớp CSS và giá trị màu cho mỗi biến thể nếu không sử dụng Thuộc tính tùy chỉnh. Bằng cách này, anh ta có thể chỉ định một thuộc tính tùy chỉnh cho các màu và giá trị vị trí khác nhau cho mỗi điểm dừng màu, sau đó chỉ cần cập nhật các giá trị tùy thuộc vào ngữ cảnh. Và hơn thế nữa là cách các thuộc tính tùy chỉnh có thể được cập nhật bằng JavaScript đã cho phép Scott xây dựng một công cụ để tùy chỉnh mẫu gradient của anh ấy, được chia sẻ rộng rãi ở cuối bài.
• Mẫu bán sắc CSS - Michelle Barker với sự phân tích chi tiết về các mẫu "bán sắc" của Ana Tudor. Hiệu ứng là sắp xếp giống như bản in chấm mực của các tờ báo cũ. Trong khi Ana sử dụng Houdini dưới mui xe cho hiệu ứng hoạt hình và di chuột, Michelle xem xét cụ thể bản thân hiệu ứng bán sắc và cách nó được xây dựng với một gradient xuyên tâm. Tôi đặc biệt yêu thích cách Michelle chỉ ra cách đi từ một lưới các chấm đơn giản đến một nơi mà mô hình bị so le một chút. Và hãy chú ý đến phần cuối để xem cách cô ấy nhấn mạnh hiệu ứng với mask-image sử dụng gradient tuyến tính để tạo hiệu ứng mờ dần. Tôi đã xáo trộn với mô hình này một chút, và quấn lại bằng một thứ gì đó gọn gàng trông giống như một bộ lọc vết mực chảy.
• Giải pháp Dashing Navbar - Eric Meyer đã được đưa ra một thử thách thiết kế thú vị cho một menu trong đó một đường chấm xuất hiện từ liên kết “trang hiện tại” và trở thành một phần của đường viền chấm lớn hơn dọc theo cạnh trái của vùng chứa nội dung. Eric luôn là một ví dụ tuyệt vời về cách suy nghĩ như một nhà phát triển front-endvà anh ấy làm điều đó ở đây khi anh ấy mô tả tuyến đường thay thế mà anh ấy đã đi bằng cách sử dụng một gradient tuyến tính khi anh ấy gặp khó khăn với cách tiếp cận tiêu chuẩn của thiết lập border-style: dotted trên phần tử.
• Các đường nét đứt Gradient có mặt nạ - Eric theo dõi liên kết cuối cùng đó không chỉ cho thấy cách anh ấy kết nối các dấu gạch ngang của đường viền bên trái với các dấu gạch ngang của hình ảnh raster, mà còn cách con mắt thiết kế khéo léo của anh ấy thuyết phục anh ấy thay đổi giải pháp của mình để bắt chước độ phân giải thấp hơn của dấu gạch ngang của hình ảnh bằng cách sử dụng hai gradient nền tuyến tính lặp lại như một mask-image trên nền gradient. Thật là mọt sách và tuyệt vời!