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

Đóng góp bởi: Đinh Văn Tuấn Anh 134 lượt xem Đăng ngày 08/06/2023

Chào các bạn, mình mới sưu tầm được một đoạn code CSS khá hay cho website, giúp tạo vệt sáng lướt ngang qua logo website. Một thủ thuật nho nhỏ nhưng khá hữu ích cho các bạn muốn trang trí website thêm phần chuyên nghiệp. Hãy cùng mình tìm hiểu nhé!

Tiện ích này đặc biệt phù hợp với những bạn dùng logo thiết kế bằng chữ. Theo nhận xét của mình 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. Demo như logo giuseart.com luôn nha!

Bài viết thực hiện trên theme Flatsome, các theme khác các bạn làm tương tự nhé!

Giuseart.com – Tạo vệt sáng lướt qua logo website GiuseArt

Bước 1: Xác định phần tử CSS bao bọc logo trên website.

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.

Kiểm tra xem đâu là phần tử bao ngoài ảnh logo của bạn. Ví dụ của trên theme Flatsome thì logo sẽ nằm trong Header-main > Header Inner > Logo. Vậy sau khi tìm mình xác định được phần tử bao bọc logo sẽ là #logo.

Mẹo nhỏ: thông thường không phải là <img> hay <a> mà sẽ là thẻ <div> hoặc cái gì đó nằm ngay trên <a> đấy.

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

Bước 2: Chèn vào website và xem thành quả

Các bạn copy đoạn code CSS dưới đây và paste vào Giao diện – Tùy biến – Style – Custom CSS:

Đối với theme Flatsome, các bạn chỉ việc copy paste đúng y như mình chỉ, còn các bạn dùng theme khác thì copy miễn sao đúng vào phần Custom CSS của theme là được nha!

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. Cám ơn các bạn đã theo dõi, chúc các bạn thành công.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Mẫu web mới đăng

Mời bạn xem một số mẫu web mới đăng của Toptheme.info | NinhBinhweb