A little shiny effect on the logo will help the menu bar become more vivid. Especially for those who use the logo design in words. According to Lucid Gen, the shiny effect on the logo is suitable for colored logo websites, and the menu bar background is white. You just try on your logo, maybe the web will be more beautiful. ^_^
Related posts
Steps to add effects to the website logo
Specify the CSS component that envelops the logo
On your website, right-click the logo and select Check to open the browser’s Elements window.
Check to see what’s the cover in addition to your logo image. Lucid Gen’s example is <h1 class=”site-title”> CSS can be identified as .site-title or h1.site-title.</h1> You can get it quickly and accurately by selecting the line of the elements and clicking the plus button “+” as shown in the image below.
Tip: usually it‘s not <img> good, it’s a card
Replace elements in light effect code for logo
There are 2 choices of shadow effects for the logo, the type 1 like Lucid Gen’s is two rays of light that glide past each other, type 2 like canhme.com’s is a ray of light lying on its side from left to right. Choose which one is “as you like” ^_^.
Please replace your CSS component in the 2 code below to see which one fits your logo. Replace it with “before or after,” in front of the colon.
Insert into website and see results
After editing the logo shadow code, please copy to one of the 2 areas you suggest.
- Inserts into the style.css file of the theme.
- Insert into the custom CSS area of WordPress Customization.
If your website isn’t WordPress, add a <style> và </style> tag before and after the code and then insert it in html.
As a result, it is a bit hard to see if you only look at the photo you took, look up at Lucid Gen’s logo above the menu. ^_^
Ending
With just a few actions, you can make your monotonous logo more live, more luxurious with a shadow effect on the logo. If you can’t do it, or you can’t identify the CSS component to fix the code, comment below, I’ll determine to help you for free. If you have done, also comment to show off the beautiful logo ^_^.
