Text Focus Effect with CSS and CSS3 Transitions

Category: CSS & CSS3 , Text | November 11, 2014
Author: tgideas
Views Total: 2,778
Official Page: Go to website
Last Update: November 11, 2014
License: MIT

Preview:

Text Focus Effect with CSS and CSS3 Transitions

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;
}

You Might Be Interested In:


Leave a Reply