Add Text Shadow Effect in Blog Post Title on Mouse Hover

Add Text Shadow Effect in Blog Post Title on Mouse Hover

0
data:blog.title
CSS effect

By the Bless of CSS we can create enormous effects and decorate our Blog site.  Formerly we were depended on images for Blog designing. But now by using CSS Blog developer able to create different design. In case of Google Blogger we see many widget developing by developer and most of the design can be create and moderate by CSS.

In this tutorial I will show you a simple text design with Pure CSS that will add an effect on Blog post title. After applying this trick while a visitor click on Blog Post title then it will display a shadow of post title. And when user will release the mouse then shadow will disappear. This is really amazing.


Every Blogger template has its own post title design but I have added another script for better looks of your Blog post title. Post title script is below-

.post-title {
color: #333;
font-family: 'Oswald', sans-serif;
font-size: 24px;
line-height: 30px;
padding-bottom: 10px;
font-weight: 400;
}

here I have used Oswald font for post title. Because this font is best for displaying Blog post title. So you should find and remove any previous Post title code first. Just find the code like above and remove it.

long shadow

Though this trick is completely based on CSS coding so you don't have to worry about Blog loading speed. For applying this trick just follow the below steps-

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on  Now click on -> Template -> Edit HTML->

Step 3
 Now find the ]]></b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac)


Step 4 Copy the script from below and Paste it above/before ]]></b:skin>

.post-title {
color: #333;
font-family: 'Oswald', sans-serif;
font-size: 24px;
line-height: 30px;
padding-bottom: 10px;
font-weight: 400;
}

h3.post-title a, h2.post-title a, h1.post-title a, h2.post-title, h1.post-title {color: #333;
text-decoration: none;
transition: all 0.7s linear;
-webkit-transition: all 0.7s linear;
-moz-transition: all 0.7s linear;
-o-transition: all 0.7s linear;
-ms-transition: all 0.7s linear;}

h3.post-title a:hover, h2.post-title a:hover, h1.post-title a:hover {
color: #000;
text-shadow: 2px 2px 5px #eee, 5px 5px 5px #707070;
}

Step 5 hit the Save template button.

Now visit your Blog and mouse over on post title and see a shadow is appearing. This is looks amazing and your Blog visitors will love it. Actually the total tutorial is about creating a text shadow so thanks to CSS for helping to make this beautiful effect. 
Add Text Shadow Effect in Blog Post Title on Mouse Hover
4 Stars stars - "Add Text Shadow Effect in Blog Post Title on Mouse Hover" By the Bless of CSS we can create enormous effects and decorate our Blog site.  Formerly we we...

Post a Comment

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *