Trong thiết kế web hiện đại, phông nền rất lớn [theo cả nghĩa đen và nghĩa bóng]. Với sự ra đời của màn hình HD [và bây giờ là 4K], các nhà thiết kế tạo ra các hình nền chiếm nhiều diện tích màn hình. Tại sao?
Nhưng còn nhiều thứ khác đối với nền hơn là chỉ ném một bức ảnh hoặc kết cấu vào một không gian rộng lớn — sự kết hợp giữa CSS và một chút sức mạnh JavaScript thỉnh thoảng tạo ra một số hiệu ứng đặc biệt tuyệt vời
Hãy cùng khám phá một số cách độc đáo mà các nhà thiết kế đang thêm gia vị cho hình nền. Chúng tôi cũng sẽ bao gồm một ví dụ cho từng kỹ thuật để bạn có thể thấy chính xác cách chúng hoạt động
Thay đổi màu chế độ hòa trộn CSS của Giana
Hiệu ứng nền này thú vị đến nỗi phần tử cố định ở trên cùng dường như thay đổi màu sắc khi người dùng cuộn. Việc sử dụng thuộc tính CSS mix-blend-mode
cho phép thay đổi màu sắc, điều này phụ thuộc vào nội dung của nền
Xem thay đổi nền Pen CSS khi cuộn của Giana
Hoạt hình cuộn của Jonathan Marzullo
Gợi nhớ đến các trò chơi video cuộn bên trong quá khứ, kỹ thuật này có hai hình ảnh riêng biệt – mỗi hình ảnh cuộn theo hướng ngược lại. Nó được thực hiện với sự trợ giúp của CSS transform
và một số JS
Xem Pen GSAP Animate CSS background-position của Jonathan Marzullo
Bị lệch bởi Marcel
Hình nền lệch là một trong những xu hướng nóng nhất trong thiết kế web. Đó là một hiệu ứng cực kỳ dễ thực hiện trong thiết kế in ấn và khó thực hiện trên web – cho đến tận bây giờ. Giải pháp HTML/CSS thuần túy này làm cho nó trở nên dễ dàng
Xem Pen skew bg của Marcel
Hình ảnh chuyển động của Kevin Lesht
Sử dụng một chút CSS khá đơn giản, nền này cho phép chuyển đổi mượt mà giữa nhiều hình ảnh. Nó tạo ra một thanh trượt nhẹ hơn nhiều so với JavaScript truyền thống
Xem Trình chiếu ảnh nền CSS toàn màn hình của Pen bởi Kevin Lesht
Gradient hoạt hình của Mario Klingemann
Nếu không được thực hiện cẩn thận, nền hoạt hình có thể làm sao lãng bất kỳ nội dung nào nằm trên nền đó. Ví dụ chuyển màu động này rất hay vì đó là một hiệu ứng tinh tế hơn. Sử dụng JavaScript, bạn có thể xác định màu gradient để phù hợp với bảng màu của mình
Xem Gradient nền hoạt hình bút của Mario Klingemann
Làm mờ trên cuộn bởi Zach Richard
Kỹ thuật này có thể khá hữu ích khi bạn thực sự muốn khách truy cập tập trung vào hình nền [như tiêu đề của một bài báo] và sau đó cho phép dễ dàng đọc văn bản ở trên cùng. Một chút jQuery thay đổi thuộc tính background-size
khi cuộn để tạo hiệu ứng
Xem hình ảnh nền Pen Zoom và Blur của Zach Richard
Hình ảnh anh hùng mờ dần với lớp phủ của Rand Seay
Có một vài điều xảy ra với ví dụ này. Đầu tiên, hình ảnh anh hùng có chiều rộng đầy đủ được thêm lớp phủ màu ở trên cùng để tạo ra màu sắc khác. Sau đó, một hoạt ảnh mờ dần được triển khai để giới thiệu hình ảnh một cách trực quan mượt mà. Cuối cùng, hiệu ứng cuộn kiểu thị sai được thêm vào hỗn hợp. Kết quả là một giao diện rất hiện đại sử dụng tương đối ít mã [và không có JS]
Xem xếp chồng hình nền Pen CSS với mờ dần và lớp phủ của Rand Seay
Thu phóng & Xoay nền của Krz Szzz
Đây là một hiệu ứng chúng ta thấy khá nhiều gần đây. Khi người dùng di chuột qua bảng điều khiển, hình nền sẽ phóng to và xoay cùng với bất kỳ chuyển động nào của con trỏ. Đó là một cách dễ dàng để thêm một số tương tác và duy trì sự quan tâm của người dùng
Xem Pen Zoom + pan hình ảnh khi di chuột & di chuyển chuột của Krz Szzz
Tiết lộ trên Hover của Eric Karkovack
Ví dụ này hiển thị một màn hình chia nhỏ trong đó nền được hiển thị dựa trên vị trí chuột của người dùng. Tuyệt vời để so sánh, chẳng hạn như ảnh 'trước' và 'sau'
Xem tiết lộ Nền CSS Pen của Eric Karkovack
Thay đổi màu sắc trên cuộn của Jack Harner
Đôi khi chúng ta quên mất việc sử dụng các màu đồng nhất đơn giản có thể mạnh mẽ như thế nào. Ở đây, chúng ta thấy tác động mà nó có thể tạo ra khi màu nền thay đổi dựa trên vị trí cuộn. Giải pháp gọn nhẹ này có thể mang lại hiệu quả trực quan như hình ảnh nặng
Xem Bút thay đổi màu nền khi cuộn của Jack Harner
Bối cảnh ở phía trước
Nền không còn chỉ là phương tiện để đóng khung nội dung – giờ đây chúng thường là một phần của chính nội dung
Với rất nhiều cách thú vị để sử dụng chúng, bạn nên thử nghiệm các kỹ thuật nền khác nhau và xem cách chúng có thể nâng cao trải nghiệm người dùng cho dự án tiếp theo của bạn
Thuộc tính CSS backdrop-filter
cho phép bạn áp dụng các hiệu ứng đồ họa như làm mờ hoặc chuyển màu cho khu vực phía sau một phần tử. Bởi vì nó áp dụng cho mọi thứ phía sau phần tử, để thấy được hiệu ứng, bạn phải làm cho phần tử hoặc nền của phần tử ít nhất trong suốt một phần
/* Keyword value */
backdrop-filter: none;
/* URL to SVG filter */
backdrop-filter: url[commonfilters.svg#filter];
/* values */
backdrop-filter: blur[2px];
backdrop-filter: brightness[60%];
backdrop-filter: contrast[40%];
backdrop-filter: drop-shadow[4px 4px 10px blue];
backdrop-filter: grayscale[30%];
backdrop-filter: hue-rotate[120deg];
backdrop-filter: invert[70%];
backdrop-filter: opacity[20%];
backdrop-filter: sepia[90%];
backdrop-filter: saturate[80%];
/* Multiple filters */
backdrop-filter: url[filters.svg#filter] blur[4px] saturate[150%];
/* Global values */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: revert;
backdrop-filter: revert-layer;
backdrop-filter: unset;
none
Không có bộ lọc nào được áp dụng cho phông nền
Danh sách được phân tách bằng dấu cách hoặc bộ lọc SVG sẽ được áp dụng cho phông nền
Giá trị ban đầu_______5_______Áp dụng cho tất cả các phần tử;