Follow
Lucid Gen
  • Marketing
    • Facebook
    • Google
    • Zalo
    • Content marketing
    • Email Marketing
    • Marketing tools
    • SEO
  • Website
    • WordPress
  • Technology
    • Computer
    • Phone
No Result
View All Result
Lucid Gen
  • Marketing
    • Facebook
    • Google
    • Zalo
    • Content marketing
    • Email Marketing
    • Marketing tools
    • SEO
  • Website
    • WordPress
  • Technology
    • Computer
    • Phone
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

21
SHARES
2.1k
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
Share8Pin2Share1Share
Trần Ngọc Minh Hiếu

Trần Ngọc Minh Hiếu

I am currently working as a Data Analyst; before that, I worked in Digital Marketing. Blogging is a joy, helping me share my knowledge and experiences from life and work.

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 cài mail công ty vào Outlook trên điện thoại và máy tính - How to set up domain email in Outlook

How to set up domain email in Outlook

05/08/2021
1
Cách mua ứng dụng trên AppStore bằng MoMo và Visa - How to buy apps in App Store

How to buy apps in App Store with Visa and Momo E-wallet

06/08/2021
0
Tạo danh mục bảng biểu và mục lục tự động trong Word

How to create an automatic table of contents in Word with headings

04/08/2021
2
Cách tạo và sử dụng tài khoản MCC Google Ads - How to create Google MCC account and use it

How to create Google MCC account and use it

06/08/2021
0
Cách tạo tài khoản ChatGPT và OpenAI chi tiết - How to create a ChatGPT (OpenAI) account

How to create a ChatGPT (OpenAI) account

16/01/2023
4
Download Navicat Premium for Mac free for life - Tải Navicat Premium cho Mac miễn phí

Download Navicat Premium for Mac free for life

14/02/2023
2
How to create Service Account and enable Google Cloud API - Cách tạo Service Account và bật API Google Cloud

How to create Service Account and enable Google Cloud API

08/01/2023
0
How to run a Python file in CMD or Terminal - Cách chạy file Python trên CMD và Mac

How to run a Python file in CMD or Terminal

20/11/2022
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 Hieu › Donate

254 Posts and 233 Comments

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

 Google Play Microsoft Store

Recent Comments

  • Steve on How to download Adobe on Mac for free for life
  • Vincent Nguyen on How to download Adobe on Mac for free for life
  • Cristina on How to download Adobe on Mac for free for life
  • Jinx on How to download Adobe on Mac for free for life
  • Josse on How to download Adobe on Mac for free for life

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 Tran Ngoc Minh Hieu DMCAProtected

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

© 2019 Lucid Gen with by Tran Ngoc Minh Hieu DMCAProtected

Click to Copy