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

7107 lượt xem
Mẹo nhỏ: Để tìm kiếm chính xác các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: "Từ khóa" + "giuseart". (Ví dụ: thiệp tân linh mục giuseart). Tìm kiếm ngay

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.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
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.
5/5 - (2 bình chọn)
Chia sẻ bài viết:

Thông báo chính thức: Ninh Bình Web (thuộc GiuseArt) không hợp tác với bất kỳ ai để bán giao diện Wordpress và cũng không bán ở bất kỳ kênh nào ngoại trừ Facebookzalo chính thức.

Chúng tôi chỉ support cho những khách hàng mua source code chính chủ. Tiền nào của nấy, khách hàng cân nhắc không nên ham rẻ để mua phải source code không rõ nguồn gốc và không có support về sau! Xin cám ơn!

Thẻ tìm kiếm:

Bài viết mới cập nhật:

Để lại một bình luận

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 *