CSS3 Zoom out text for Blogger

It’s very easy to do, you shouldn’t find it too challenging. 
It use some multiple text shadows in a gradient of colors. 
You don’t have to be exact, and I quite liked the layered effect. 
So all we gotta do is set a small text shadow for the initial state, which then becomes bigger on hovering, and then disappears. 
We also want to keep the text in a constant position, so we’ll just use position: relative;.




I wanted to use transitions so it smoothly zoomed out, but webkit seemed to be the only browser that supported it properly, so I only used the webkit transition tag. It’ll work fine in the latest version of all other browsers.

 

The CSS

Add below CSS codes just above ]]></b:skin> in your Blogger template

#text {
    font-family: 'Tahoma', Helvetica, Arial, sans-serif;
    font-size: 8em;
    width: 100%;
    text-align: center;
    margin: 120px 0;
}
#text a {
    text-decoration: none;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 2px 0 #721e1e, 0px 2px 5px rgba(0,0,0,0.5);
    position: relative;
    -webkit-transition: all 0.1s ease-in;
}
#text a:hover {
    text-shadow: 0 2px 0 #d84f4f, 0 4px 0 #d54646, 0 6px 0 #ce3333, 0 8px 0 #b92e2e, 0 10px 0 #912525, 0 12px 0 #721e1e, 0px 12px 10px rgba(0,0,0,0.5);
    top: -12px;
}

#text a:active {
    text-shadow: none;
    bottom: 0;
    text-shadow: 0px 0px 7px rgba(0,0,0,0.5);
}

We have used different colours for each, but you could very easily pick your own, or just use the same one for all. If you only use one shadow you won’t create the illusion of depth.

Usage

In your Blogger post editor HTML mode you have to customize and paste below codes

<div id="text">
    <a href="#">SOME ZOOM TEXT</a>
</div>

And that’s it! Check out the Preview! Thanks.

Like Us.... Receive updates on your Facebook wall!!!!

If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

Kindly Bookmark and Share it: