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

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à <h1 class=”site-title”> 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à <img> hay <a> mà sẽ là thẻ <h1> hoặc cái gì đó nằm ngay trên <a> đấ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

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.

Hiệu ứng bóng logo lướt nang

/* CSS hiệu ứng bóng lướt NGANG cho logo by LucidGen.com */

/* Sửa h1.site-title thành phần tử CSS của bạn */
h1.site-title:after,h1.site-title:before{content:"";position:absolute;top:50%;width:10px;height:100%;transform:translateY(-50%);background-color:rgba(255,255,255,.75);z-index:999999999}
h1.site-title:before{left:-5%;animation:light-left 2.5s infinite alternate linear}
h1.site-title:after{right:-5%;animation:light-right 2.5s infinite alternate linear}

@keyframes light-left{0%{left:-5%;opacity:0}50%{left:50%;opacity:1}to{left:105%;opacity:0}}@keyframes light-right{0%{right:-5%;opacity:0}50%{right:50%;opacity:1}to{right:105%;opacity:0}}

Hiệu ứng bóng logo lướt nghiêng

/* CSS hiệu ứng bóng lướt NGHIÊNG chho logo by LucidGen.com */

/* Sửa h1.site-title thành phần tử CSS của bạn */
h1.site-title:before{content:"";position:absolute;width:300px;height:25px;background-color:rgba(255,255,255,.5);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-animation:searchLights 1.5s ease-out 1s infinite;-o-animation:searchLights 1.5s ease-out 1s infinite;animation:searchLights 1.5s ease-out 1s infinite}

@-webkit-keyframes searchLights{0%{left:-100px;top:0}to{left:250px;top:0}}@-o-keyframes searchLights{0%{left:-100px;top:0}to{left:250px;top:0}}@-moz-keyframes searchLights{0%{left:-100px;top:0}to{left:250px;top:0}}@keyframes searchLights{0%{left:-100px;top:0}to{left:250px;top:0}}
@lucidgen

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é.

  1. Chèn vào file style.css của theme.
  2. 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ẻ <style> và </style> ở 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 web
Hiệu ứng bóng sáng lướt qua cho logo
Hiệu ứng bóng logo trên mobile
Hiệ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. Đừng quên chèn logo vào ảnh để khách hàng nhớ thương hiệu của bạn nhiều hơn nha. 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 ^_^.

Trần Ngọc Minh Hiếu

Hiếu (sinh năm 1996) là Cử nhân Quản trị Kinh doanh (ĐH Công nghệ Sài Gòn), hiện là chuyên viên Phân tích Dữ liệu tại Ninja Van, với với kinh nghiệm dày dặn trong lĩnh vực Phân tích Dữ liệu và Digital Marketing. Blog này là nơi Hiếu chia sẻ những trải nghiệm thực tế từ công việc và cuộc sống.

20 bình luận

  1. Mình đã thử cái này cho web site của mình nhưng không thành công, chỉ muốn hiệu ứng chạy ở logo mà nó lại chạy luôn cả menu (nguyên phần header luôn) nên đã phải tắt đi. Cảm ơn đã hướng dẫn. Blog có giao diện đẹp và tải nhanh quá!

    Bình luận
    • Vậy cho do trên mobile ID hay Class logo của em bị thay đổi, em cần check ID hay Class trên mobile xem nếu khác thì em lặp lại code 1 lần nữa nhưng thay ID hay Class của mobile vào

  2. Cách 1 của admin bị thiếu rồi. Web mình logo bằng hình ảnh dùng code này được:

    .ABC {
    position:relative
    }

    .ABC:before, .ABC:after {
    content:””;
    position:absolute;
    top:50%;
    width:10px;
    height:100%;
    transform:translateY(-50%);
    background-color:rgba(255,255,255,.75);
    z-index:999999999;
    }

    .ABC:before{left:-5%;animation:light-left 2.5s infinite alternate linear}
    .ABC:after{right:-5%;animation:light-right 2.5s infinite alternate linear}

    @keyframes light-left{0%{left:-5%;opacity:0}50%{left:50%;opacity:1}to{left:105%;opacity:0}}
    @keyframes light-right{0%{right:-5%;opacity:0}50%{right:50%;opacity:1}to{right:105%;opacity:0}}

    Bình luận
    • Chào Thang, tuần rồi mình bận không trả lời được. Mình vào trang của bạn thấy đã làm được rồi kìa. Chúc mừng bạn nhé

Viết một bình luận

Hãy thoải mái để lại bình luận của bạn, chúng tôi sẽ kiểm duyệt và phản hồi trong thời gian sớm nhất. Vui lòng sử dụng email thật để đảm bảo bình luận được duyệt và nhận thông báo khi chúng tôi trả lời. Bạn cũng có thể thêm ảnh đại diện cho email của mình.