Cách hiệu ứng lớp phủ chỉ CSS với Box-Shadow
Lớp phủ nội dung là một phần nổi bật của thiết kế web hiện đại. Họ giúp bạn ẩn một yếu tố trên một trang web và sau đó - với sự chấp thuận của người dùng - tiết lộ, và hiển thị thêm thông tin hoặc điều khiển, chẳng hạn như các nút phía sau nó.
Một lớp phủ điển hình là bán trong suốt, với một màu nền vững chắc (thường là màu đen) và có một số văn bản hoặc nút trên đó để người dùng xem hoặc tương tác. Sau khi tương tác (nhấp hoặc di chuột) xảy ra, lớp phủ được gỡ bỏ và tiết lộ nội dung bên dưới nó.
Trong bài viết này, chúng ta sẽ xem xét làm thế nào để thêm lớp phủ màu vào hình ảnh bằng cách sử dụng CSS thuần túy. Bạn có thể xem kết quả cuối cùng trên bản demo bên dưới. Di chuột các hình ảnh để làm cho các lớp phủ tiết lộ các pokemon. Mặc dù bài đăng này thảo luận về hình ảnh, kỹ thuật mà nó trình bày có thể được áp dụng an toàn cho các loại nội dung khác (chẳng hạn như khối văn bản)..
Tránh thêm các yếu tố HTML bổ sung
Lớp phủ thường được tạo bởi định vị một yếu tố HTML bổ sung với một độ mờ đục giá trị nhỏ hơn 1 ngay phía trên yếu tố được bảo hiểm. Vấn đề là kỹ thuật này liên quan đến việc sử dụng một thêm phần tử (hoặc phần tử giả) cho lớp phủ.
Nếu bạn không phải là người có kích thước HTML, thì việc có thêm một yếu tố cho lớp phủ có lẽ không phải là vấn đề lớn, vì rất có thể nó sẽ không đánh thuế băng thông của bất kỳ mạng nào nhiều như vậy. Tuy nhiên có tách rời quy tắc kiểu cho các phần tử & lớp phủ của chúng vẫn gây hại cho khả năng đọc và bảo trì CSS.
Để giữ mã của bạn theo thứ tự và không làm rối phác thảo HTML của bạn, nên sử dụng giải pháp chỉ CSS.
Tạo lớp phủ với bóng hộp
Vậy làm thế nào bạn thực sự có thể tạo một lớp phủ chỉ CSS? Với sự giúp đỡ của bóng hộp Thuộc tính CSS. Bóng hộp là hoàn hảo cho công việc này, vì lớp phủ là gì nhưng một bóng tối phủ lên một yếu tố?
Bóng hộp có một giá trị thuộc tính được gọi là hình nhỏ, làm cho cái bóng xuất hiện phía trong khung của hộp.
Một bóng hình hộp chèn với kích thước bóng bằng một nửa hoặc hơn một nửa chiều rộng và chiều cao của phần tử, tạo ra một bóng bao gồm toàn bộ thành phần.
.hộp chiều rộng: 200px; chiều cao: 200px; hộp bóng: màu xanh lá cây 0 0 0 100px in;
Vì lớp phủ thường có một số minh bạch, bạn cần thêm nó vào bóng hộp. Điều này có thể được thực hiện bằng cách sử dụng rgba () chức năng cho màu bóng.
Các rgb một phần của rgba, đại diện, giá trị kênh màu đỏ, xanh lá cây và xanh dương, trong khi một Đại diện cho kênh Alpha, đó là chịu trách nhiệm về tính minh bạch.
Đối với kênh alpha, giá trị 1 tạo ra một màu đục, trong khi 0 tạo ra một màu trong suốt.
Bằng cách chỉ định giá trị từ 0 đến 1 cho kênh alpha của giá trị màu rgba của bóng hộp, bạn có thể tạo lớp phủ bán trong suốt.
Tạo mã cho bản demo
Bản demo của chúng tôi sẽ hiển thị hình ảnh và tên của các Pokemon khác nhau. Ở đây chúng tôi sẽ chỉ tạo mã cho Bulbasaur, pokemon đầu tiên trong bản demo, vì những cái khác được tạo theo cùng một cách (trên Codepen bạn cũng có thể kiểm tra mã cho chúng).
HTML
Đối với HTML, chúng ta chỉ cần tạo một cái hộp mà chúng tôi sẽ thêm mọi thứ khác bằng CSS.
CSS
Trong CSS bên dưới, .pokemon các yếu tố hiển thị hình ảnh pokemon và .pokemon :: sau các phần tử giả mang tên của pokemon.
Kể từ khi bóng hộp bất động sản có thể lấy nhiều giá trị để mà làm cho nhiều bóng, ngoài bóng đổ, tôi cũng thêm các bóng màu xám khác vào .pokemon và .pokemon: di chuột yếu tố thẩm mỹ.
/ * hình ảnh pokemon * / .pokemon width: 200px; chiều cao: 200px; / * nội dung trung tâm sử dụng hộp flex * / display: flex; justify-content: trung tâm; align-item: trung tâm; / * lớp phủ * / hộp-bóng: 0 0 0 100px, 0 0 5px màu xám; / * chuyển đổi lơ lửng * / quá trình: hộp bóng 1s; / * tên pokemon * / .pokemon :: sau width: 80%; chiều cao: 80%; hiển thị: khối; font: 16pt 'bookman old syle'; màu trắng; viền: 2px solid; văn bản-align: trung tâm; / * nội dung trung tâm sử dụng hộp flex * / display: flex; justify-content: trung tâm; align-item: trung tâm; / * di chuột ra khỏi quá trình chuyển đổi * / quá trình: độ mờ 1s .5s; / * tiết lộ hình ảnh pokemon khi di chuột * / .pokemon: hover quá trình: hộp bóng tối 1s; box-Shadow: 0 0 0 5px inset, 0 0 5px xám, 0 0 10px xám inet; / * ẩn tên pokemon trên hover * / .pokemon: hover :: after quá trình: opacity .5s; độ mờ đục: 0;
Khi mà .pokemon các phần tử được di chuột, bóng hộp của chúng cần thay đổi để hiển thị hình ảnh phía sau.
Bạn có thể thấy rằng .pokemon: di chuột bộ chọn lấy một bóng hộp mới loại bỏ lớp phủ và .pokemon: hover :: sau bộ chọn ẩn tên của pokemon bằng cách sử dụng độ mờ đục bất động sản.
Bạn cũng có thể nhận thấy không có giá trị màu trong bóng hộp lớp phủ trong .pokemon và .pokemon: di chuột quy tắc phong cách. Màu bóng của lớp phủ của các pokemon riêng lẻ cần được chỉ định trong các quy tắc phong cách riêng của họ, vì tất cả đều khác nhau.
Như bóng hộp không có bất kỳ tài sản lâu năm, bạn không thể thiết lập màu bóng của nó cá nhân với một cái gì đó như, hộp bóng màu; thay vào đó - chúng tôi sử dụng màu bất động sản.
Theo mặc định, khi bạn đưa ra một giá trị cho màu tài sản, giá trị đó là áp dụng cho đường viền, đường viền và màu bóng hộp cũng. Vì vậy, bạn chỉ cần sử dụng màu thuộc tính để thêm màu vào bóng hộp.
#bulbasaur hình nền: url (https://assets.hongkiat.com/uploads/css-only-overlays-box-shadow/bulbasaur.jpg); / * giá trị màu được sử dụng cho màu bóng hộp * / màu: rgba (71, 121, 94, 0.9); #bulbasaur :: sau / * tên pokemon * / nội dung: 'Bulbasaur';
Màu của bóng phủ sử dụng như đã nói ở trên rgba () chức năng với 0,9 cho giá trị alpha để làm cho lớp phủ trong suốt.
Ngoài màu của bóng hộp lớp phủ, CSS ở trên còn thêm các quy tắc riêng cho từng pokemon - hình ảnh như hình nền và tên.
Và đó là tất cả, chúng tôi đã sẵn sàng với lớp phủ hình ảnh chỉ có màu CSS của chúng tôi. Hãy xem mã của tất cả các Pokemon trong bút dưới đây.
