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 {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.
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);
}
Usage
In your Blogger post editor HTML mode you have to customize and paste below codes<div id="text">And that’s it! Check out the Preview! Thanks.
<a href="#">SOME ZOOM TEXT</a>
</div>
Nice
ReplyDelete