Follow
Lucid Gen
  • Marketing
    • Facebook
    • Google
    • Zalo
    • Content marketing
    • Email Marketing
    • Marketing tools
    • SEO
  • Website
    • WordPress
  • Technology
    • Computer
    • Phone
  • Life
No Result
View All Result
Lucid Gen
  • Marketing
    • Facebook
    • Google
    • Zalo
    • Content marketing
    • Email Marketing
    • Marketing tools
    • SEO
  • Website
    • WordPress
  • Technology
    • Computer
    • Phone
  • Life
No Result
View All Result
No Result
View All Result
Lucid Gen

Lucid Gen › Website › WordPress › How to add light sweep effect to website logo with CSS

How to add light sweep effect to website logo with CSS

Đánh giá bài viết
06/08/2021
0
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

14
SHARES
1.4k
VIEWS
Share to Facebook

A little light sweep effect to website logo will bring the menu bar to life, especially for those of you who use logo design in words. According to Lucid Gen’s comment, the light sweep effect to website logo is suitable for websites with colored logos, and the menu bar background is white. You try on your website logo, and maybe the web will be more beautiful. ^_^

Related posts

  • How to set up Contact Form 7 tracking
  • How to disable theme and plugin update notification WordPress
  • How to add Adsense Auto Ads and Sticky Ads to AMP
Table of contents
  1. Steps to add light sweep effect to website logo
    1. Defines the CSS element that wraps the logo
    2. Substitute element into code light sweep effect for logo
    3. Insert it on the website and see the result
  2. Epilogue

Steps to add light sweep effect to website logo

Defines the CSS element that wraps the logo

On your website, right-click on the logo and select Inspect to open the browser’s Elements view window.

Right click on the logo and select Inspect (web logo shadow effect)
Right-click on the logo and select Inspect

Check what the element that wraps your logo image is. Lucid Gen’s example is <h1 class=”site-title”> which defines the CSS as either .site-title or h1.site-title . You can get it quickly and accurately by selecting the element’s line and clicking the plus button “+” as shown in the image below.

Pro tip: usually it’s not an <img> or an <a> but an <h1> tag or something just above the <a> .

Check which element needs logo shadow effect
Check to see which element needs to add light sweep effect

Substitute element into code light sweep effect for logo

There are 2 options of light sweep effect for the logo. Style 1 is like Lucid Gen’s where 2 rays of light pass through each other, style 2 are like that of chungme.com is 1 ray of light lying sideways from left to right. Choose which one is “at your discretion” ^_^.

Replace your CSS element with the two code snippets below to see which one matches your logo. Replace it with :before or :after, before the colon.

Horizontal light sweep effect

/* CSS Horizontal light sweep effect logo by LucidGen.com */

/* Edit h1.site-title to your CSS element*/
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}}

Inclined light sweep effect

/* CSS Inclined light sweep effect logo by LucidGen.com */

/* Edit h1.site-title to your CSS element*/
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

Insert it on the website and see the result

After editing the light sweep effect to website logo code, copy it into one of the 2 areas I suggest.

  1. Insert into the theme’s style.css file.
  2. Insert in the custom CSS area of ​​the WordPress Customizer .

If your website is not WordPress, add <style> and </style> tags before and after the code and insert it in html form.

The result is here, a bit hard to see if you look at the picture I took. Look up the Lucid Gen logo above the menu. ^_^

Instructions to add a glide shadow effect for web logos
Glittering shadow effect for logos
Light sweep effect to website logo on mobile
Light sweep effect to website logo on mobile

Epilogue

With just a few taps, you can turn your monotonous logo into more vivid, more luxurious with a light sweep effect to website logo. Don’t forget to add your logo in the photo, so customers remember your brand more. If you can’t do it or can’t determine the CSS element to fix the code, please comment below. I will determine it for you for free. And if you have done it, please also comment to show off the beautiful logo ^_^.

Đánh giá bài viết
Share6Pin1Share1
Next Post
Hướng dẫn Google Drive với 3 kiểu chia sẻ file - How to share files on Google Drive

How to share files on Google Drive with 3 types of permissions

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

How to enable Two factor Authentication for WordPress

Leave a Reply Cancel reply

I will review and reply to all comments within the day. Please feel free to leave your comments on this article!

Your email address will not be published. Required fields are marked *

Recommend for you

  • Trending
  • Latest
Cách thêm CSS vào AMP trong WordPress - How to add custom CSS to AMP in WordPress

How to add custom CSS to AMP in WordPress

18/08/2021
0
Cách tạo khung ảnh Shopee hàng loạt cực nhanh - How to add Shopee photo frames in bulk

How to add Shopee photo frames in bulk

06/08/2021
0
Cách điều khiển Macbook bằng iPhone và Android - How to control Mac with iPhone and Android

How to control Mac with iPhone and Android

05/08/2021
0
Cách chèn code Google Tag Manager vào website - How to add Google Tag Manager to WordPress

How to add Google Tag Manager to WordPress Website

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

How to increase mouse tracking speed Mac

14/05/2022
0
Cách cài đặt Power BI trên Mac và Windows | How to download Power BI for Mac and Windows

How to download Power BI for Mac and Windows

15/10/2021
0
Cài đặt tracking chuyển đổi Contact Form 7 How to set up Contact Form 7 tracking

How to set up Contact Form 7 tracking

08/10/2021
0
Cách gỡ ứng dụng trên Mac và dọn dẹp sạch sẽ - How to uninstall apps on Mac completely

How to uninstall apps on Mac completely

08/10/2021
0

Lucid Gen

A blog sharing about digital marketing, miscellaneous about technology and what you might need that the author knows.

Developed by blogger
Minh Khue › Donate

228 Posts and 4146 Comments

Disclosure: This website has advertisements. If you don’t have money, how can you write?

 Google Play  Microsoft Store

Recent Comments

  • Minh Khuê on How to download Adobe on Mac for free for life
  • mm on How to download Adobe on Mac for free for life
  • Minh Khuê on How to download Adobe on Mac for free for life
  • danny on How to download Adobe on Mac for free for life
  • Elle Ambrose on How to uninstall Microsoft AutoUpdate on Mac

Image sources

Lucid Gen edits images from the following sources: Freepik, Unsplash & Pixabay.

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

  • About
  • Contact
  • Terms and policies

© 2019 Lucid Gen with by Minh Khue DMCAProtected

No Result
View All Result
  • Marketing
    • Facebook
    • Google
    • Zalo
    • Content marketing
    • Email Marketing
    • Marketing tools
    • SEO
  • Website
    • WordPress
  • Technology
    • Computer
    • Phone
  • Life

© 2019 Lucid Gen with by Minh Khue DMCAProtected