Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.
Ok so in this article i'll teach you 7 cool CSS Text Effects.....you can use'em all on your blogger/wordpress and all blogs.....so first of all the method of adding CSS/HTML on blog is same for all effects so first start with it.
How To Add :
CSS : Go To Blogger > Template > Edit HTML > Paste CSS Script Just Above ]]></b:skin>
HTML : You can add HTML on Posts/Pages/Template/ HTML/Javascript Widget.
Effect 1 Fade Block :
Demo : Place mouse on me i will fade!
HTML :
<div id="fade">Place mouse on me i will fade!</div>
CSS :
#fade{opacity: 1;-webkit-transition: opacity 1s linear;}
#fade{opacity: 1;-moz-transition: opacity 1s linear;}
#fade{opacity: 1;-o-transition: opacity 1s linear;}
#fade:hover{opacity: 0;}
Effect 2 Pulsate Block :
Demo : Place mouse on me i will pulsate!
HTML :
<div id="pulsate">Place mouse on me i will pulsate!</div>
CSS :
#pulsate:hover {-webkit-animation-name: pulsate;-webkit-animation-duration: 20s;-webkit-animation-timing-function: ease-in-out;}
@-webkit-keyframes pulsate {
0% { width:140px; }
5% { width:190px; left:-25px; }
10% { width:140px; left:0px; }
15% { width:190px; left:-25px; }
20% { width:140px; left:0px; }
40% { width:140px; }
45% { width:190px; left:-25px; }
50% { width:140px; left:0px;}
55% { width:190px; left:-25px;}
60% { width:140px; left:0px;}
80% { width:140px; }
100% { width:140px; }
}
#pulsate:hover {-moz-animation-name: pulsate;-moz-animation-duration: 20s;-moz-animation-timing-function: ease-in-out;}
@-moz-keyframes pulsate {
0% { width:140px; }
5% { width:190px; left:-25px; }
10% { width:140px; left:0px; }
15% { width:190px; left:-25px; }
20% { width:140px; left:0px; }
40% { width:140px; }
45% { width:190px; left:-25px; }
50% { width:140px; left:0px;}
55% { width:190px; left:-25px;}
60% { width:140px; left:0px;}
80% { width:140px; }
100% { width:140px; }
}
#pulsate:hover {-o-animation-name: pulsate;-o-animation-duration: 20s;-o-animation-timing-function: ease-in-out;}
@-o-keyframes pulsate {
0% { width:140px; }
5% { width:190px; left:-25px; }
10% { width:140px; left:0px; }
15% { width:190px; left:-25px; }
20% { width:140px; left:0px; }
40% { width:140px; }
45% { width:190px; left:-25px; }
50% { width:140px; left:0px;}
55% { width:190px; left:-25px;}
60% { width:140px; left:0px;}
80% { width:140px; }
100% { width:140px; }
}
Demo : Place mouse on me my text will shift!
HTML :
<div id="nudge">Place mouse on me my text will shift!</div>
CSS :
#nudge{-webkit-transition-property:color,background-color,padding-left;-webkit-transition-duration:500ms,500ms,500ms}
#nudge{-moz-transition-property:color,background-color,padding-left;-moz-transition-duration:500ms,500ms,500ms}
#nudge{-o-transition-property:color,background-color,padding-left;-o-transition-duration:500ms,500ms,500ms}
#nudge:hover{background-color:#efefef;color:#333;padding-left:50px}
Effect 4 Expand Block :
Demo : Place mouse on me my border will expand
HTML :
<div id="expand">Place mouse on me my border will expand</div>
CSS :
#expand{background-color:#eee;-webkit-transition: all 500ms linear; border:10px solid black}
#expand{background-color:#eee;-moz-transition: all 500ms linear; border:10px solid black}
#expand{background-color:#eee;-o-transition: all 500ms linear; border:10px solid black}
#expand:hover{border:30px solid #800}
Effect 5 Bounce Block :
Demo : Place mouse on me i will bounce!
HTML :
<div id="bounce">Place mouse on me i will bounce!</div>
CSS :
#bounce:hover {-webkit-animation-name:bounce;-webkit-animation-duration:1s;-webkit-animation-iteration-count:2;-webkit-animation-direction:alternate}
@-webkit-keyframes bounce{from{margin-left:0px;}
to{margin-left:250px;}
}
#bounce:hover {-moz-animation-name:bounce;-moz-animation-duration:1s;-moz-animation-iteration-count:2;-moz-animation-direction:alternate}
@-moz-keyframes bounce{from{margin-left:0px;}
to{margin-left:250px;}
}
#bounce:hover {-o-animation-name:bounce;-o-animation-duration:1s;-o-animation-iteration-count:2;-o-animation-direction:alternate}
@-o-keyframes bounce{from{margin-left:0px;}
to{margin-left:250px;}
}
Effect 6 Spin Block :
Demo : Place mouse on me i will spin
HTML :
<div id="spin">Place mouse on me i will spin</div>
CSS :
#spin{-webkit-transition: -webkit-transform 3s ease-in;}
#spin:hover{-webkit-transform:rotate(360deg)}
#spin{-moz-transition: -moz-transform 3s ease-in;}
#spin:hover{-moz-transform:rotate(360deg)}
#spin{-o-transition: -o-transform 3s ease-in;}
#spin:hover{-o-transform:rotate(360deg)}
Effect 7 Accordion :
Demo : This Is First Tab
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Demo : This is second tab
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Demo : This is third tab
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
HTML :
<div id="accordion" class="accordion">
<a href="#first">This is first tab</a><div id="first"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div>
<a href="#second">This is second tab</a><div id="second"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div>
<a href="#third">This is third tab</a><div id="third"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div>
</div>
CSS :
.accordion a{display:block;padding:5px 10px;background-color:#333;color:#eee;text-decoration:none}
.accordion a:hover{background-color:#999}
.accordion div{background-color:#ccc;color:#222;}
.accordion div p{padding:20px}
#accordion div{height:0;overflow:hidden;-webkit-transition:height 600ms ease}
#accordion div{height:0;overflow:hidden;-moz-transition:height 600ms ease}
#accordion div{height:0;overflow:hidden;-o-transition:height 600ms ease}
#accordion div:target{height:110px}
That's all for this time.....Comment for any help or report.....Thanks
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
