Follow
Lucid Gen
  • Marketing
    • Facebook Marketing
    • Google Marketing
    • Zalo Marketing
    • Content Marketing
    • Email Marketing
    • Marketing tools
    • SEO
    • Website
      • Hướng dẫn WordPress
  • Công nghệ
    • Điện thoại
    • Máy tính
    • Tải video mạng xã hội
  • Sản phẩmHot
    • Tool quét SĐT Facebook
    • Tìm bài quảng cáo trên Facebook theo từ khóa
    • Bán tài khoản Grammarly Premium
    • Bán tài khoản quảng cáo Facebook bao lên camp
    • Dịch vụ
      • Dịch vụ quảng cáo Facebook cam kết doanh số
      • Mở tài khoản quảng cáo bị vô hiệu hóa
      • Kháng trang không được phép quảng cáo
      • Gửi tin nhắn hàng loạt trên fanpage
    • Khóa học
      • Khóa học quảng cáo Facebook bao lên camp – all tut
  • Tât cả
    • Cuộc sống
    • Đầu tư và Kinh doanh
    • Tiêu dùng thông minh
No Result
View All Result
Lucid Gen
  • Marketing
    • Facebook Marketing
    • Google Marketing
    • Zalo Marketing
    • Content Marketing
    • Email Marketing
    • Marketing tools
    • SEO
    • Website
      • Hướng dẫn WordPress
  • Công nghệ
    • Điện thoại
    • Máy tính
    • Tải video mạng xã hội
  • Sản phẩmHot
    • Tool quét SĐT Facebook
    • Tìm bài quảng cáo trên Facebook theo từ khóa
    • Bán tài khoản Grammarly Premium
    • Bán tài khoản quảng cáo Facebook bao lên camp
    • Dịch vụ
      • Dịch vụ quảng cáo Facebook cam kết doanh số
      • Mở tài khoản quảng cáo bị vô hiệu hóa
      • Kháng trang không được phép quảng cáo
      • Gửi tin nhắn hàng loạt trên fanpage
    • Khóa học
      • Khóa học quảng cáo Facebook bao lên camp – all tut
  • Tât cả
    • Cuộc sống
    • Đầu tư và Kinh doanh
    • Tiêu dùng thông minh
No Result
View All Result
No Result
View All Result
Lucid Gen

Lucid Gen › Website › WordPress › 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

5/5 - (85 bình chọn)
23/04/2021
19
Hướng dẫn thêm hiệu ứng bóng lướt qua cho logo web - How to add light sweep effect to website logo with CSS

Hướng dẫn thêm hiệu ứng bóng lướt qua cho logo web - How to add light sweep effect to website logo with CSS

15
CHIA SẺ
1.4k
LƯỢT XEM
Chia sẻ lên Facebook

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. ^_^

Tham khảo thêm

  • Chống copy hình ảnh website bằng code đơn giản
  • Cách thêm CSS vào AMP trong WordPress
  • Cài SSL cho website WordPress chuyển HTTP sang HTTPS
Nội dung
  1. Các bước thêm hiệu ứng cho logo website
    1. Xác định phần tử CSS bao bọc logo
    2. Thay thế phần tử vào code hiệu ứng ánh sáng cho logo
    3. Chèn vào website và xem thành quả
  2. Lời kết

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à <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

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.

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 ^_^.

5/5 - (85 bình chọn)
Xem thêm bài viết về chủ đề Chia sẻ codeCSSHTMLLogo
Share6Pin2Share1
Đừng bỏ lỡ
Hướng dẫn Google Drive với 3 kiểu chia sẻ file - How to share files on Google Drive

Cách chia sẻ file Google Drive với 3 kiểu cần phân biệt

Bảo mật 2 lớp WordPress bằng SMS và Authenticator - How to enable two factor authentication for wordpress

Bảo mật 2 lớp WordPress bằng SMS và Authenticator

Bình luận 19

  1. Gia Khang Fan cứng
    12 tháng trước

    Anh ơi, code này e dùng trên desktop thì ok mà lên mobile ko có hiệu ứng, có cần phải thêm code gì nữa ko ạ?

    Trả lời
    • Minh Khuê Fan cứng
      12 tháng trước

      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

      Trả lời
  2. ​Alex Fan cứng
    2 năm trước

    có đoạn code nào cho blogspot không admin

    Trả lời
    • Minh Khuê Fan cứng
      2 năm trước

      Shark nào đây? Ghi tên công ty sai kìa :v

      Trả lời
  3. Thang Fan cứng
    2 năm trước

    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}}

    Trả lời
    • Minh Khuê Fan cứng
      2 năm trước

      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é

      Trả lời
  4. kính Fan cứng
    2 năm trước

    sao web mình đã làm y như bạn mã vẫn ko dc , coi dùm m dc ko ạ,

    Trả lời
    • Minh Khuê Fan cứng
      2 năm trước

      Chào Kính, bạn thử thay thế .woodmart-logo-wrap vào h1.site-title trên code của mình xem nhé

      Trả lời
    • kính Fan cứng
      2 năm trước

      vẫn ko dc bạn, logo của mình là hình ảnh nha bạn.

      Trả lời
    • Minh Khuê Fan cứng
      2 năm trước

      Bạn thử thay thế thêm .woodmart-logo hoặc .site-logo xem sao

      Trả lời
  5. Đạt Fan cứng
    2 năm trước

    Chào bạn, mình đã xem qua bài viết của bạn mà tìm không được cái thuộc tính bao quanh bạn ạ. Bạn có thể vui lòng xác định giúp mình cái thuộc tính đó được không, mình cám ơn nhiều nhé, website của mình là mmosatellite .com

    Trả lời
    • Minh Khuê Fan cứng
      2 năm trước

      Chào Đạt, bạn thử thay div#header-logo-image vào code trên bài viết nhé

      Trả lời
  6. Luật sư Hình sự Fan cứng
    2 năm trước

    Hiệu ứng đẹp quá! Em cũng làm thành công

    Trả lời
    • Minh Khuê Fan cứng
      2 năm trước

      Đẹp đấy bác, hehe

      Trả lời
  7. Minh Khanh Fan cứng
    2 năm trước

    blog em cũng làm cái hiệu ứng này nè, hihi

    Trả lời
  8. WonderFit Fan cứng
    2 năm trước

    Trang của anh làm đẹp thật, phải nghiên cứu làm cho trang của em mới được.

    Trả lời
    • Minh Khuê Fan cứng
      2 năm trước

      Thử liền đi em

      Trả lời
  9. Thanh Bình Fan cứng
    2 năm trước

    Hay quá anh, em mò cái này mãi mà không biết làm sao. Thấy trên canhme có hay hay. Nhờ bài viết của anh em làm được rồi

    Trả lời
    • Minh Khuê Fan cứng
      2 năm trước

      Oke men

      Trả lời

Bình luận của bạn Hủy

Mình sẽ duyệt và trả lời bình luận ngay trong ngày. Hãy để lại ý kiến của bạn về bài viết này nhé!

Email của bạn sẽ không hiển thị công khai, có thể thêm ảnh đại diện nếu muốn. Các trường bắt buộc được đánh dấu *

Có thể bạn sẽ cần

Lấy số điện thoại từ Facebook chỉ 2 giây
Facebook

Lấy số điện thoại từ Facebook chỉ 2 giây

18/07/2021
157

Tool lấy số điện thoại từ Facebook trong 2 giây. Tặng 50 lần lấy SĐT từ Facebook. An toàn, dễ...

Xem thêm
Gửi tin nhắn hàng loạt fanpage Facebook

Cách gửi tin nhắn hàng loạt trên fanpage Facebook

11/04/2022
40
Bán tài khoản quảng cáo Facebook bao lên camp cắn tiền

Bán tài khoản quảng cáo Facebook bao lên camp

18/12/2021
81
Cách tìm bài quảng cáo trên Facebook

Cách tìm bài quảng cáo trên Facebook

17/08/2021
0
Bán tài khoản Grammarly Premium cực xịn

Bán tài khoản Grammarly Premium cực xịn

14/10/2021
8
Dịch vụ quảng cáo Faceobook cam kết doanh số

Dịch vụ quảng cáo Facebook cam kết doanh số

11/04/2022
0

Đề xuất cho bạn

  • Ngẫu nhiên
  • Mới nhất

Cách lấy lại mật khẩu Facebook khi mất số điện thoại và email

24/08/2021
13
Cài SSL cho website WordPress chuyển HTTP sang HTTPS - How to add SSL to website and redirect HTTP to HTTPS

Cài SSL cho website WordPress chuyển HTTP sang HTTPS

19/04/2021
4
Cách chèn Icon vào PowerPoint siêu đẹp - How to insert icons in PowerPoint beautifully

Cách chèn Icon vào PowerPoint siêu đẹp

05/08/2021
4
Cách định dạng số trong Mail Merge cực chuẩn - How to format numbers in Mail Merge exactly

Cách định dạng số trong Mail Merge cực chuẩn

03/06/2021
31
Cách chỉnh tốc độ chuột MacBook, Magic Mouse, Logitech trên MacBook

Cách chỉnh tốc độ chuột MacBook và Magic Mouse

14/05/2022
0
Cách tải video YouTube 4K HD MP3

Cách tải video YouTube 4K về điện thoại và máy tính

07/05/2022
3
Dịch vụ quảng cáo Faceobook cam kết doanh số

Dịch vụ quảng cáo Facebook cam kết doanh số

11/04/2022
0
So sánh nên mua MacBook Air hay Pro M1 13 14 16

So sánh nên mua MacBook Air hay Pro M1 13 14 16

14/01/2022
4

Lucid Gen

Một blog chia sẻ về digital marketing, linh tinh về công nghệ và những gì có thể bạn cần mà tác giả biết.

Phát triển bởi một người thích viết blog
Minh Khuê › Donate

Đã có 228 Bài viết và 4146 Bình luận

Tiết lộ: Website này đã có quảng cáo. Không có tiền thì viết làm sao.

 Google Play  Microsoft Store

Phản hồi gần đây

  • Minh Khuê trong Bán tài khoản quảng cáo Facebook bao lên camp
  • Minh Khuê trong Hướng dẫn cài Office miễn phí trên Macbook (có M1)
  • Minh Khuê trong Cách đăng bài trên Zalo máy tính đơn giản
  • Phương trong Cách đăng bài trên Zalo máy tính đơn giản
  • Minh Khuê trong Cách tải Final Cut Pro miễn phí cho Mac

Uống nước nhớ nguồn

Lucid Gen biên tập hình ảnh từ các nguồn: Freepik, Unsplash & Pixabay.

Bạn bè & đối tác

  • Blog Hữu Thuần
  • Hosting WordPress

Nếu bạn yêu thích blog này...

Nhập địa chỉ email của bạn để đăng ký nhận thông báo về các bài viết mới của Lucid Gen

  • Giới thiệu
  • Cộng đồng
  • Donate
  • Liên hệ
  • Điều khoản

© 2019 Lucid Gen with by Minh Khue DMCAProtected

No Result
View All Result
  • Marketing
    • Facebook Marketing
    • Google Marketing
    • Zalo Marketing
    • Content Marketing
    • Email Marketing
    • Marketing tools
    • SEO
    • Website
      • Hướng dẫn WordPress
  • Công nghệ
    • Điện thoại
    • Máy tính
    • Tải video mạng xã hội
  • Sản phẩm
    • Tool quét SĐT Facebook
    • Tìm bài quảng cáo trên Facebook theo từ khóa
    • Bán tài khoản Grammarly Premium
    • Bán tài khoản quảng cáo Facebook bao lên camp
    • Dịch vụ
      • Dịch vụ quảng cáo Facebook cam kết doanh số
      • Mở tài khoản quảng cáo bị vô hiệu hóa
      • Kháng trang không được phép quảng cáo
      • Gửi tin nhắn hàng loạt trên fanpage
    • Khóa học
      • Khóa học quảng cáo Facebook bao lên camp – all tut
  • Tât cả
    • Cuộc sống
    • Đầu tư và Kinh doanh
    • Tiêu dùng thông minh

© 2019 Lucid Gen with by Minh Khue DMCAProtected