Hướng dẫn thêm hiệu ứng bóng lướt qua cho logo web

Hướng dẫn thêm hiệu ứng bóng lướt qua cho logo web

301 08/01/2020

Hướng dẫn thêm hiệu ứng bóng lướt qua cho logo web

Một chút hiệu ứng bóng sáng lướt qua trên logo sẽ giúp thanh menu trở nên sống động hơn. Đặc biệt với những bạn dùng logo thiết kế bằng chữ. Theo nhận xét của Lucid Gen thì hiệu ứng bóng sáng trên logo phù hợp cho các website logo có màu, và nền thanh menu là màu trắng. Bạn cứ thử trên logo của bạn, biết đâu web sẽ đẹp hơn. ^_^


Các bước thêm hiệu ứng cho logo website


Xác định phần tử CSS bao bọc logo

Trên website của bạn, hãy nhấp chuột phải vào logo và chọn Kiểm tra để mở cửa sổ xem phần tử (Elements) của trình duyệt.


Nhấp chuột phải vào logo và chọn Kiểm tra (hiệu ứng bóng logo web)Nhấp chuột phải vào logo và chọn Kiểm tra

Kiểm tra xem đâu là phần tử bao ngoài ảnh logo của bạn. Ví dụ của Lucid Gen là

thì xác định CSS có thể là .site-title hoặc h1.site-title. Bạn có thể lấy nhanh và chính xác bằng cách chọn dòng của phần tử và nhấp vào nút dấu cộng "+" như trong hình bên dưới đây.


Mẹo nhỏ: thông thường không phải là  hay mà sẽ là thẻ

hoặc cái gì đó nằm ngay trên đấy.


Kiểm tra xem đâu là phần tử cần thêm hiệu ứng bóng logo Kiểm tra xem đâu là phần tử cần thêm hiệu ứng bóng logo
Thay thế phần tử vào code hiệu ứng ánh sáng cho logo

Có 2 lựa chọn về hiệu ứng bóng lướt qua cho logo, kiểu 1 giống như của Lucid Gen là 2 tia sáng lướt qua nhau, kiểu 2 giống như của canhme.com là 1 tia sáng nằm nghiêng lướt từ trái qua phải. Chọn cái nào thì "tùy ý huynh" ^_^.


Hãy thay thế phần tử CSS của bạn vào 2 đoạn code bên dưới đây để xem cái nào phù hợp với logo của bạn nhé. Thay thế vào chổ có :before hay :after ấy, trước dấu hai chấm.


https://gist.github.com/lucidgen/9fa30ab53f06012400f7c019f0bf301e


Chèn vào website và xem thành quả

Sau khi chỉnh sửa đoạn code hiệu ứng bóng sáng logo xong, bạn hãy sao chép vào 1 trong 2 khu vực mình gợi ý là được nhé.


Chèn vào file style.css của theme.Chèn vào khu vực CSS tùy chỉnh của Tùy biến 
WordPress.

Nếu website của bạn không phải WordPress thì hãy thêm thẻ và ở trước và sau đoạn code rồi chèn ở dạng html là được.


Kết quả là đây, hơi khó thấy nếu chỉ xem bằng tấm hình mình chụp lại, bạn hãy nhìn lên logo của Lucid Gen phía trên menu nhé. ^_^


Hướng dẫn thêm hiệu ứng bóng lướt qua cho logo webHiệu ứng bóng sáng lướt qua cho logo
Hiệu ứng bóng logo trên mobileHiệu ứng bóng logo trên mobile

Lời kết


Chỉ với một vài thao tác, bạn đã có thể biến logo đơn điệu của mình trở nên sinh động hơn, sang hơn với hiệu ứng bóng lướt qua trên logo rồi. Nếu bạn làm không được, hay không xác định được phần tử CSS để sửa code thì hãy bình luận bên dưới, mình sẽ xác định giúp bạn miễn phí nha. Còn nếu bạn đã làm được, cũng bình luận để khoe logo đẹp nha ^_^.

BÌNH LUẬN

Ảnh đại diện của bạn