Author: | tgideas |
---|---|
Views Total: | 1,463 views |
Official Page: | Go to website |
Last Update: | November 11, 2014 |
License: | MIT |
Preview:

Description:
A pure CSS/CSS3 focus effect that blurs the unnecessary text when you hover over a link, with a smooth CSS3 transition effect.
How to use it:
Create a list of links.
<ul> <li><a href="#">CSSScript</a></li> <li><a href="#">CSSScript</a></li> <li><a href="#">CSSScript</a></li> <li><a href="#">CSSScript</a></li> </ul>
Add the blur effect on all links using text-shadow property.
a { text-shadow: #fff 0 0 25px; -webkit-transition: all .8s ease-out; -moz-transition: all .8s ease-out; transition: all .8s ease-out; }
Create the link text focus effect on hover.
a:hover { text-shadow: #fff 0 0 0; -webkit-transition: all .1s ease-out; -moz-transition: all .1s ease-out; transition: all .1s ease-out; } a:active { text-shadow: #fff 0 0 50px; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; transition: all .2s ease-out; }