CSS moz fade effects can win the heart of any web developer. There is always a room for an extra bit of tweaks and improvements to our blog templates. Today's moz fade effects is really addition that we could make to our templates to make it look more elegant and interactive. The more the effects we use in our blogs, the more is the chance that we would engage the visitors. Every time i notice extra bit of styles and effects on various blogs/websites, i tend to never forget it. And thats what every webmasters dreams of.
That their blogs never get out of the priority list of the visitors. By adding the below CSS code to your templates, you would notice a huge bump in overall beauty of your blog. Each time a person would hover (visit) a link, they would notice a fade effect that uses simple CSS fade properties.
In case you're in Blogger, navigation to Dashboard >> Design >> Edit HTML and find the following code (CTRL+F).
You'll probably find this code in various sections of your template. Say you tend to find it some where in footer section code as shown below.
That is responsible for footer links visited property. That is 'what happens' when the readers moves his cursor over the links in footer. So now if you wish to add the CSS fade property to these footer links, you can simply make an extra addition to the above code as shown below:
This would make the links in footer have ease in effect delay of 0.2 seconds. You could keep on adding the above fade property to any other section of your template too.
In case you wish to see this fade effect running on your entire template, regardless of any specific region, you can find the a:visited code that is not accompanied by anything else like in the previous example of #footer a:visited.
Simply search for a:visited and mark the code that shows this link property along. That is the code which is generalized to the entire template links.Check out the picture below:
Hope that was easy to follow. Leave out your queries in the comment section and ill get back to you as soon as possible.
Stay safe buddies.
That their blogs never get out of the priority list of the visitors. By adding the below CSS code to your templates, you would notice a huge bump in overall beauty of your blog. Each time a person would hover (visit) a link, they would notice a fade effect that uses simple CSS fade properties.
Demo Video
Step #1 Go to your Edit HTML section OR The style.css file in WordPress
In case you're in Blogger, navigation to Dashboard >> Design >> Edit HTML and find the following code (CTRL+F).
a:visited
You'll probably find this code in various sections of your template. Say you tend to find it some where in footer section code as shown below.
Apply Fade Property To Any Specific Region Of Template
#footer a:visited { color: #B4B4B4; text-decoration: none; }
That is responsible for footer links visited property. That is 'what happens' when the readers moves his cursor over the links in footer. So now if you wish to add the CSS fade property to these footer links, you can simply make an extra addition to the above code as shown below:
#footer a:visited { color: #B4B4B4; text-decoration: none; -moz-transition: all 0.2s ease-in-out 0s; }
This would make the links in footer have ease in effect delay of 0.2 seconds. You could keep on adding the above fade property to any other section of your template too.
Apply Fade Property To All Links In Template
In case you wish to see this fade effect running on your entire template, regardless of any specific region, you can find the a:visited code that is not accompanied by anything else like in the previous example of #footer a:visited.
What do you need to do?
Simply search for a:visited and mark the code that shows this link property along. That is the code which is generalized to the entire template links.Check out the picture below:
Hope that was easy to follow. Leave out your queries in the comment section and ill get back to you as soon as possible.
Stay safe buddies.
