Tuesday, 25 December 2012

CSS3 Zoom out text for Blogger

Posted by shakeel asghar at 00:29:00
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:

0 comments:

Have any question? Feel Free To Post Below:

Related Posts Plugin for WordPress, Blogger...
 

Author

My Photo
My Name is Shakeel Asghar. I am Computer Graphics Designer, Web Designer  from Lahore, Pakistan.

Popular Posts

Live Score

© 2011. All Rights Reserved | SHAKEEL ASGHAR |

Home | About | Top