Lớp phủ hình nền thủ thuật CSS

Đây là một trang web đơn giản. Nó hoàn toàn ổn — đơn giản, nhiều thông tin và dễ đọc. Nó thậm chí còn có một số hình ảnh đẹp trong đó

Tuy nhiên, với một vài thủ thuật đơn giản, chúng ta sẽ biến Jane giản dị này thành giấc mơ ướt át của một nhà thiết kế web

Bây giờ trông khá mát mẻ, phải không? . Tất cả những gì bạn cần là một số CSS đơn giản. Bắt đầu nào

1. Văn bản Chọn màu

Đây là thứ có thể thay đổi trong rất ít dòng mã, nhưng lại thường bị bỏ qua. Các chi tiết nhỏ nhất đều có giá trị và nếu bạn thay đổi các màu tô sáng/chọn mặc định thành các màu phù hợp với chủ đề mà bạn đang theo đuổi, khách truy cập của bạn sẽ chọn nó và có trải nghiệm tốt hơn khi duyệt trang web của bạn

Để thay đổi màu chọn/tô sáng và màu văn bản, chỉ cần chỉ định chúng như vậy

::selection {background-color: #013896;color: #f1f1f1;}

2. thả mũ

Để có giao diện bài báo/bài báo chuyên nghiệp đó, bạn có thể sử dụng chữ hoa đầu dòng cho chữ cái đầu tiên của văn bản. Chữ hoa đầu dòng là chữ in hoa lớn và bạn có thể cách điệu theo bất kỳ cách nào bạn muốn để phù hợp với chủ đề trang web của mình. Có một số cách để triển khai drop cap trong CSS. Những gì tôi đang làm thực sự đơn giản

Tôi đặt chữ cái đầu tiên trong thẻ span như vậy

The places I dream of

Sau đó, với CSS, tôi trang trí lớp drop cap

.dropcap {float: left;font-size: 400%;color: #cf142b;margin: -13px 7px -13px 0;}

Chủ yếu, tôi cần đảm bảo rằng tôi đã đặt nó làm đối tượng nổi. Kích thước và màu sắc hoàn toàn tùy thuộc vào bạn, và để kết thúc mọi thứ ở đây, chỉ cần điều chỉnh lề để làm cho nó trông hoàn hảo

Một chữ cái thực sự tạo nên sự khác biệt

3. Lớp phủ hình ảnh

Lớp phủ hình ảnh là một cách xử lý trực quan khi chuột di chuột qua hình ảnh. Nó có thể phục vụ nhiều mục đích, từ trang trí đến tiết lộ một yếu tố ẩn như nút. Có rất nhiều phong cách mà bạn có thể tìm thấy trên internet và ở đây tôi đã chọn thay thế liên kết URL tới bài viết gốc bằng hình ảnh logo của nhà xuất bản gốc. Khi di chuột qua hình ảnh đó, một văn bản đơn giản sẽ mờ dần trong

Go to site.

Ý tưởng là đặt hình ảnh và lớp phủ (có thể là bất kỳ thứ gì) chồng lên nhau. Làm cho lớp phủ ẩn đi trừ khi chuột di chuột qua nó. Điều này có thể được thay đổi trong thuộc tính độ mờ. Để làm cho mọi thứ suôn sẻ, hãy chỉ định thời gian cho quá trình chuyển đổi. Lưu ý về quá trình chuyển đổi và độ mờ trong mã bên dưới

.overlay {position: absolute;top: 0;bottom: 0;left: 0;right: 0;height: 100%;opacity: 0;transition: 0.5s ease;background-color: #cf142b;}.container:hover .overlay {opacity: 0.8;cursor: pointer;}

4. Tô màu và phóng to hình ảnh khi di chuột

Đây là một trong những thủ thuật yêu thích của tôi — nó thay đổi hình ảnh từ nhàm chán và tĩnh thành thứ gì đó có tính tương tác. Trước tiên, bạn cần bọc hình ảnh của mình trong một thùng chứa. Hãy đặt cho vùng chứa tên lớp “image image-colorize. ” Bạn phải đặt thuộc tính tràn của vùng chứa thành ‘ẩn’ để hiệu ứng hoạt động

Thủ thuật thực chất là thủ thuật phủ ảnh. Đặt hình ảnh ở chế độ thang độ xám theo mặc định, sau đó loại bỏ bộ lọc đó khi di chuột qua hình ảnh. Thu phóng có thể được điều chỉnh bằng biến đổi. tỷ lệ (tỷ lệ của bạn);

.image {width: 100%;overflow: hidden;}.image-colorize img {transition: transform .5s, filter 0.5s ease-in-out;filter: grayscale(100%);}.image-colorize:hover img {filter: grayscale(0);transform: scale(1.1);}

Có nhiều thứ hơn thế này ngoài một thang màu nâu đỏ và xám đơn giản. Hãy xem bài đăng blog xuất sắc này về nhiều phong cách khác mà bạn có thể triển khai bằng thủ thuật gọn gàng này

5. Chơi với mặt nạ hình ảnh

Bây giờ chúng ta đang bước vào lĩnh vực chuyên nghiệp, nhưng bạn không cần có kỹ năng chuyên nghiệp để thực hiện hiệu ứng này. Tạo mặt nạ hình ảnh là một phương pháp cắt xén một hình ảnh ở dạng cụ thể. Hình thức đó được xác định bởi hình ảnh thứ hai, trong đó hình ảnh đó chỉ chứa hình dạng của mặt nạ và mọi thứ khác trong suốt. Dễ hiểu hơn với hình ảnh

Nếu đây là hình ảnh của tôi

Và đây là mặt nạ của tôi (phần màu trắng thực sự trong suốt)

Sau đó, đây sẽ là kết quả của việc che hình ảnh

Ưu điểm của việc che hình ảnh là hình ảnh không chính xác là một hộp hình chữ nhật tiêu chuẩn và do đó, điều này mang lại cho bạn nhiều không gian sáng tạo để khám phá (như đã thấy từ gif ở đầu bài viết). Ví dụ, hãy tưởng tượng cảnh mặt trời lặn/mọc phía sau Angkor Wat

Tất nhiên, sẽ không ai biết hình ảnh của bạn bị che trừ khi bạn đặt thứ gì đó đằng sau nó. Nếu không, nó sẽ trông giống như một nền trắng bình thường

Như bạn có thể thấy, những gì tôi đã làm là ẩn dòng chữ "Campuchia" phía sau Angkor Wat khi bạn cuộn xuống. Trong phiên bản gốc, nếu bạn cuộn xuống, “Campuchia” sẽ biến mất ở trên. Vì vậy chúng ta cần phải ngăn chặn điều đó. Những gì chúng ta có thể làm là dán văn bản để nó luôn ở trong tầm nhìn cho đến khi nó biến mất sau hình ảnh của chúng ta

Đây là phong cách cho văn bản

div.sticky {position: -webkit-sticky;position: sticky;top: 0;z-index: -999;padding: 50px;text-align: center;font-size: 150px;margin-bottom: -70px;}

"Chức vụ. dính” là thứ làm cho phần tử đó dính. Một điều quan trọng khác là chỉ số z. Thứ gì đó có chỉ số z cao hơn thứ khác sẽ được nhìn thấy ở trên cùng. Chúng tôi muốn văn bản biến mất phía sau hình ảnh và vì vậy chúng tôi đặt chỉ số z của nó nhỏ hơn (không nhất thiết phải là -999)

Một bước cuối cùng. Bọc hình ảnh và văn bản trong một thẻ tiêu đề, nếu không thì “Campuchia” cũng sẽ được nhìn thấy phía sau bài viết chính

// all those mask tricks// rest of document

Kết thúc (Ý định chơi chữ)

Tất cả những thủ thuật đẹp mắt này không chỉ là những thứ tốt đẹp để có. Nếu bạn là nhà phát triển web mới bắt đầu, chơi với CSS là một cách tuyệt vời để tìm hiểu về các khả năng và hạn chế của CSS, đồng thời tận hưởng quá trình thiết kế trong suốt quá trình. Nếu bạn muốn xây dựng một trang web cho doanh nghiệp của mình, thì những chi tiết nhỏ này sẽ giúp ích rất nhiều trong việc nâng cao trải nghiệm của khách hàng và lôi kéo họ ở lại trang web của bạn lâu hơn

Những gì chúng tôi làm việc với ngày hôm nay là CSS thuần túy và bạn có thể cải tiến các trang web khá tốt chỉ với điều đó. Kết hợp JavaScript sẽ đưa nó lên một tầm cao mới. Có rất nhiều tài nguyên để học trực tuyến và khi bạn đã nắm vững những điều cơ bản, đừng ngại đi sâu vào các phong cách đòi hỏi nhiều bí quyết kỹ thuật hơn

Đối với mã nguồn trước và sau của ví dụ này, hãy vào đây

Viết bởi Dalis, một sinh viên khoa học máy tính tại Đại học Quốc gia Singapore. Dalis đã tham gia Khóa thực tập CNTT mùa hè 2019 của chúng tôi