Sep 15, 2010

Text Morphing Effect with CSS

Here in this post i am trying to apply Text Morphing Effect with CSS3. Morphing is a special effect in animations that changes one object into another through a seamless transition.

Idea

As you know we can hide an child element, and can show it on the hover of its parent element. Yes i am talking about the Simplest tool tip idea. Here i am using the same thing with Css Blur hack with the -transition:ease that is not supported by all browsers, but working fine with Chrome and Safari. CSS transitions is a part of the draft CSS3 specification, and provide a way to animate changes to CSS properties, instead of instant change.

Code

CSS

a{
   text-decoration: none;
   font:  100px Georgia, sans-serif;
   letter-spacing: -5px;  
   text-align: center;
   color: transparent; text-shadow: 0px 0px 1px #FF33FF;
 }

.blur{
 display: block; 
 text-decoration: none;
 font:  100px Georgia, sans-serif;
 letter-spacing: -5px;  
 text-align: center;
 color: transparent; 
 text-shadow: 0px 0px 1px #FF33FF;
}
.blur span{
        text-shadow: 0px 0px 300px #FF33FF;
        display:none;
        font:  100px Georgia, sans-serif;
        letter-spacing: -5px;  
}

.blur:hover{
       text-shadow: 0px 0px 300px #FF33FF;
       -webkit-transition:ease 3s;
       -moz-transition:ease 3s;
}

.blur:hover span{
     -webkit-transition:ease 3s;
     -moz-transition:ease 3s;
     display:block;
     position:relative;
     margin-top:-114px;
}

span:hover{
     text-shadow: 0px 0px 1px #FF33FF;
     -webkit-transition:ease 3s;
     -moz-transition:ease 3s;
}

HTML

<a href="http://motyar.blogspot.com" class="blur">

Hover me

<span>Blur me</span>

</a>

Demo

When you hover on the text "Hover me" it morphs to "Blur me". And i need your help to test it with other browsers. Feedback and comments are welcome. You can see the working demo here.

Labels: Animation, css, Tip

By : Motyar+ @motyar