• EnglishEnglish
Theo dõi
Lucid Gen
  • Digital Marketing
    • Facebook Marketing
    • Hướng dẫn Google Ads
    • Email Marketing
    • Các tool cho Marketing
  • Website
    • Hướng dẫn WordPress
    • Đo lường Website
    • Tối ưu SEO
  • Công nghệ
    • Giới thiệu tiện ích hay
    • Thủ thuật di động
    • Thủ thuật máy tính
  • Review
  • Dịch vụHot
    • Tool quét SĐT Facebook
    • Gửi tin nhắn hàng loạt trên fanpage
    • Mở tài khoản quảng cáo bị vô hiệu hóa
    • Tool thao tác Facebook hàng loạt
    • Bán tài khoản quảng cáo Facebook bao lên camp
    • Phần mềm email marketing gửi mail hàng loạt vào inbox
No Result
View All Result
Lucid Gen
  • Digital Marketing
    • Facebook Marketing
    • Hướng dẫn Google Ads
    • Email Marketing
    • Các tool cho Marketing
  • Website
    • Hướng dẫn WordPress
    • Đo lường Website
    • Tối ưu SEO
  • Công nghệ
    • Giới thiệu tiện ích hay
    • Thủ thuật di động
    • Thủ thuật máy tính
  • Review
  • Dịch vụHot
    • Tool quét SĐT Facebook
    • Gửi tin nhắn hàng loạt trên fanpage
    • Mở tài khoản quảng cáo bị vô hiệu hóa
    • Tool thao tác Facebook hàng loạt
    • Bán tài khoản quảng cáo Facebook bao lên camp
    • Phần mềm email marketing gửi mail hàng loạt vào inbox
No Result
View All Result
Lucid Gen
No Result
View All Result

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

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

10
SHARES
879
VIEWS
Chia sẻ bài viết 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
  • Chia sẻ và hướng dẫn Wordfence Security Premium
  • Cách chèn code Google Tag Manager vào mọi website
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.

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

Tags: Chia sẻ codeCSSHTMLLogo
Share4Pin2Share1
Next Post
Hướng dẫn Google Drive với 3 kiểu chia sẻ file

Hướng dẫn 3 kiểu chia sẻ file Google Drive cần phân biệt

Bảo mật 2 lớp WordPress bằng SMS và Authenticator (Xác minh 2 bước WordPress)

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

Cách mua ứng dụng trên AppStore bằng MoMo và Visa

Cách mua ứng dụng trên AppStore bằng MoMo và Visa

Bình luận 17

  1. ​Alex Fan cứng
    4 tháng trước

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

    Trả lời
    • Minh Hiếu Fan cứng
      4 tháng trước

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

  2. Thang Fan cứng
    4 tháng 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 Hiếu Fan cứng
      4 tháng 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é

  3. kính Fan cứng
    8 tháng 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 Hiếu Fan cứng
      8 tháng 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é

    • kính Fan cứng
      7 tháng trước

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

    • Minh Hiếu Fan cứng
      7 tháng trước

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

  4. Đạt Fan cứng
    9 tháng 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 Hiếu Fan cứng
      9 tháng trước

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

  5. Luật sư Hình sự Fan cứng
    11 tháng trước

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

    Trả lời
    • Minh Hiếu Fan cứng
      11 tháng trước

      Đẹp đấy bác, hehe

  6. Minh Khanh Fan cứng
    11 tháng trước

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

    Trả lời
  7. WonderFit Fan cứng
    1 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 Hiếu Fan cứng
      1 năm trước

      Thử liền đi em

  8. Thanh Bình Fan cứng
    1 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 Hiếu Fan cứng
      1 năm trước

      Oke men

Trả lời Hủy

Mình sẽ duyệt và trả lời tất cả 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 được hiển thị công khai. Các trường bắt buộc được đánh dấu *

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

Gửi tin nhắn hàng loạt fanpage Facebook
Dịch vụ

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

03/01/2021
35

Cách gửi tin nhắn hàng loạt trên fanpage Facebook mà không bị spam. Tiếp cận 100% khách hàng đã nhắn tin, hiệu quả cao, chi phí thấp

Xem thêm
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

03/01/2021
Phần mềm email marketing gửi mail hàng loạt vào hộp thư chính

Phần mềm email marketing gửi mail hàng loạt vào inbox

18/01/2021
Tổng hợp tool thao tác Facebook hàng loạt

Tổng hợp tool cho Facebook ai cũng cần

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

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

18/01/2021

Đề xuất cho bạn

Biểu tượng cảm xúc trên status facebook

2950 biểu tượng cảm xúc trên status facebook

17/02/2020
Cách tăng like tự nhiên và mời người lạ thích trang (cách mới bạn bè thích trang và mời người lạ thích trang, tool mời like fanpage và tăng like tự nhiên trên facebook)

Cách tăng like tự nhiên và mời người lạ thích trang

17/02/2020
Thêm phương thức thanh toán Google Ads bằng thẻ Visa Master Card và ví MoMo e-wallet

Cách thêm thanh toán Google Ads bằng MoMo và Visa

26/04/2020
Có nên mua tên miền .vn

Có nên mua tên miền .vn, ưu điểm và nhược điểm

09/03/2020
Phần mềm email marketing gửi mail hàng loạt vào hộp thư chính

Phần mềm email marketing gửi mail hàng loạt vào inbox

18/01/2021

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
Trần Ngọc Minh Hiếu

Thống kê thời gian thực đã có 90 Bài viết và 1,932 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.

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

  • Minh Hiếu trong Cách chèn Icon vào PowerPoint siêu đẹp
  • Ý Như trong Cách chèn Icon vào PowerPoint siêu đẹp
  • Minh Hiếu trong 2 cách giả lập Windows trên Mac OS tốt nhất
  • Minh Hiếu trong Tắt Gatekeeper và System Integrity Protection (SIP) trên Mac
  • linh trong Tắt Gatekeeper và System Integrity Protection (SIP) trên 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 kiếm tiền online
  • Blog Hữu Thuần

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
  • Liên hệ
  • Tuyển CTV
  • Điều khoản

© 2019 Lucid Gen with by Minh Hieu DMCA Protected

No Result
View All Result
  • Digital Marketing
    • Facebook Marketing
    • Hướng dẫn Google Ads
    • Email Marketing
    • Các tool cho Marketing
  • Website
    • Hướng dẫn WordPress
    • Đo lường Website
    • Tối ưu SEO
  • Công nghệ
    • Giới thiệu tiện ích hay
    • Thủ thuật di động
    • Thủ thuật máy tính
  • Review
  • Dịch vụ
    • Tool quét SĐT Facebook
    • Gửi tin nhắn hàng loạt trên fanpage
    • Mở tài khoản quảng cáo bị vô hiệu hóa
    • Tool thao tác Facebook hàng loạt
    • Bán tài khoản quảng cáo Facebook bao lên camp
    • Phần mềm email marketing gửi mail hàng loạt vào inbox

© 2019 Lucid Gen with by Minh Hieu DMCA Protected