Fun with CSS3 Transitions – Create Super Cool Text Effect using CSS3 and Lettering.js

    written by Nikola Lazarevic

    When I saw that simple but yet amazing effect, when you hover over title in “Unitasking” post by Trent Walton, I was immediately in love.
    So, in this post we will see how to achieve that effect with a little help of lettering.js and css3 transition property.

    Unitasking by Trent Walton

    DEMO

    Let’s take a look at the demo first:

    Create Super Cool Text Effect using CSS3 and Lettering.js

    VIEW DEMO

    HTML

    Typical HTML5 document is laid out complete with Doctype and link to the CSS stylesheet. I applied class “title” to <h1> so we can have individual letter control with lettering.js.

    <!DOCTYPE>
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Create Super Cool Text Effect using CSS3 and Lettering.js</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery.lettering-0.6.min.js" type="text/javascript"></script>
    <script>
    	$(document).ready(function() {
    	    $(".title").lettering();
    	  });
    </script>
    </head>
    <body>
    	<div id="container">
    		<h1 class="title">confessions3</h1>
    	</div><!--container-->
    </body>
    </html>
    

    @font-face

    Import Mensch font in css using @font-face.

    @font-face {
    	font-family: 'MenschThin';
    	    src: url('../fonts/mensch-thin-wf.eot');
    	    src: url('../fonts/mensch-thin-wf.eot?#iefix') format('embedded-opentype'),
    	         url('../fonts/mensch-thin-wf.woff') format('woff'),
    	         url('../fonts/mensch-thin-wf.ttf') format('truetype'),
    	         url('../fonts/mensch-thin-wf.svg#MenschMenschThin') format('svg');
    	    font-weight: normal;
    	    font-style: normal;
    	}
    	
    @font-face {
    	font-family: 'MenschBold';
    	    src: url('../fonts/mensch-bold-wf.eot');
    	    src: url('../fonts/mensch-bold-wf.eot?#iefix') format('embedded-opentype'),
    	         url('../fonts/mensch-bold-wf.woff') format('woff'),
    	         url('../fonts/mensch-bold-wf.ttf') format('truetype'),
    	         url('../fonts/mensch-bold-wf.svg#MenschMenschBold') format('svg');
    	    font-weight: normal;
    	    font-style: normal;
    }
    

    Style .char Classes Generated by Lettering.js

    h1.title {
    	font: 9em/1 'MenschThin';
    	text-transform: uppercase;
    	color: #e4b405;
    	display: inline-block;
    	width: 100%;
    	text-shadow: 0px 0px 30px rgba(235,191,16,0),
    				 0px 0px 30px rgba(235,191,16,0),
    				 1px 1px 0px #f8f7e5,
    				 1px -1px 0px #fdce25;
    	margin-bottom: 1.7em;
    	overflow: hidden;			 
    }
    
    .title span {
    	zoom: 1;
    	display: inline-block;
    	z-index: 1;
    	position: absolute;
    }
    .title .char1 {left: .1em; padding-left: .05em;}
    
    .title .char2 {left: .62em; padding-left: .05em;}
    
    .title .char3 {left: 1.13em; padding-left: .05em;}
    
    .title .char4 {left: 1.7em; padding-left: .05em;}
    
    .title .char5 {left: 2.19em; padding-left: .05em;}
    
    .title .char6 {left: 2.71em; padding-left: .05em;}
    
    .title .char7 {left: 3.24em; padding-left: .05em;}
    
    .title .char8 {left: 3.77em; padding-left: .05em;}
    
    .title .char9 {left: 4.07em; padding-left: .05em;}
    
    .title .char10 {left: 4.57em; padding-left: .05em;}
    
    .title .char11 {left: 5.14em; padding-left: .05em;}
    
    .title .char12 {left: 5.9em; padding-left: .05em;}
    

    Create Super Cool Text Effect using CSS3 and Lettering.js

    ::after Pseudo Class

    .char1::after {content: "C"; margin-left: -.478em;}
    
    .char2::after {content: "O"; margin-left: -.442em;}
    
    .char3::after {content: "N"; margin-left: -.49em;}
    
    .char4::after {content: "F"; margin-left: -.448em;}
    
    .char5::after {content: "E"; margin-left: -.448em;}
    
    .char6::after {content: "S"; margin-left: -.448em;}
    
    .char7::after {content: "S"; margin-left: -.448em;}
    
    .char8::after {content: "I"; margin-left: -.245em;}
    
    .char9::after {content: "O"; margin-left: -.447em;}
    
    .char10::after {content: "N"; margin-left: -.49em;}
    
    .char11::after {content: "S"; margin-left: -.448em;}
    
    .char12::after {content: "3"; margin-left: -.42em;}
    
    .char1::after, .char2::after, .char3::after, .char4::after, .char5::after, .char6::after, .char7::after, .char8::after, .char9::after,
    .char10::after, .char11::after, .char12::after {
    	color: #f8f7e5;
    	text-align: center;
    	position: absolute;
    	font-family: 'MenschBold';
    	font-size: 105.6%;
    	text-transform: uppercase;
    	margin-top: .06em;
    	z-index: -1;
    	*display: inline;
    	-webkit-mask-image: url('../img/mask.png');
    	-moz-mask-image: url('../img/mask.png');
    	-o-mask-image: url('../img/mask.png');
    	-ms-mask-image: url('../img/mask.png');
    	mask-image: url('../img/mask.png');
    	text-shadow: 10px 5px 0px rgba(0,0,0,0.4);
    	padding-right: .1em;	
    }
    

    Create Super Cool Text Effect using CSS3 and Lettering.js

    Transitions

    .title {
    	-webkit-transition: all 0.6s ease-in-out;
    	-moz-transition: color 0.6s ease-in-out;
    	-o-transition: color 0.6s ease-in-out;
    	-ms-transition: color 0.6s ease-in-out;
    	transition: color 0.6s ease-in-out;
    }
    
    .title:hover {
    	text-shadow: none;
    	color: #2b2a29;
    	cursor: pointer;
    }
    
    .title:hover span::after {opacity: .2;}
    
    .char1, .char6, .char11, .char12 {
    	-webkit-transition: all 1.2s ease-in-out;
    	-moz-transition: all 1.2s ease-in-out;
    	-o-transition: all 1.2s ease-in-out;
    	-ms-transition: all 1.2s ease-in-out;
    	transition: all 1.2s ease-in-out;
    }
    
    
    .title:hover .char1, .title:hover .char6, .title:hover .char11, .title:hover .char12 {
    	text-shadow: 0px 0px 10px rgba(235,191,16,1),
    	             0px 0px 20px rgba(235,191,16,1),
    	             0px 0px 30px rgba(235,191,16,1),
    	             0px 0px 40px rgba(235,191,16,1),
    	             0px 0px 50px rgba(235,191,16,1);
    	 color: #e4b405;
    }
    

    Create Super Cool Text Effect using CSS3 and Lettering.js

    Add Audio

    I decided to go a little further and insert audio when you hover over title.

    <div id="container">
    	<h1 class="title">confessions3</h1>
    	<audio id="electricity" preload="auto">
    	        <source src="audio/electricity.mp3"></source>
    	        <source src="audio/electricity.ogg"></source>
    	</audio>
    </div><!--container-->
    <script>
    var electricity = $("#electricity")[0];
    $(".title")
    	.mouseenter(function() {
    	electricity.play();
    });
    </script>
    

    DEMO

    Create Super Cool Text Effect using CSS3 and Lettering.js

    VIEW DEMO

    Be creative with this cracked text effect tutorial for high quality decal sticker printing.

    Get Exams Key latest CCIE Security Certification Preparation materials including CCIE Voice Certification Preparation and CCIE Wireless Certification Preparation sample Questions & Answers. Use our CCDP Certification Preparation and CISSP Certification Preparation training material with 100% exam pass guarantee.

     
    Authored by

    Web Designer, Blogger, M.Sc in Electronic Engineering from Nis, Serbia. Founder of webexpedition18.com. You can find me on Twitter.

    Enjoyed this story?

    Please leave your comment about this post on the comment section below. If you liked it tell your friends by tweeting it. You can also subscribe to our feed by rss or email.

11 Comments
ADD COMMENT
  • Gonzo the Great says:

    November 7, 2011

    Hi Nikola,

    .. just got one word for you: “Brilliant”! Thanks for sharing this freaky stuff, love the nifty javascript to add audio! Cheers & Ciao ..

  • Teylor Feliz says:

    November 7, 2011

    Great and very creative Effect!

    Thanks for sharing Nikola!

  • Praveen Gowda I V says:

    November 7, 2011

    Superb

  • Lam Nguyen says:

    November 7, 2011

    Very creative, Nik!

  • Vladimir says:

    November 7, 2011

    hello man! this realy cool, thanx!

  • Ijal Fauzi says:

    November 7, 2011

    What a great effect it was !
    thanks for sharing, dude.

  • Beben Koben says:

    November 7, 2011

    nice effect ? ?

  • Caparico says:

    November 7, 2011

    Wow, Thanks for this. Very useful stuff.

  • Ines says:

    November 11, 2011

    This is so freaking rad! Thanks for sharing!

  • shae says:

    November 18, 2011

    Thanks so much that IS GREAT! That is certainly the coolest code of the day!

  • Tenman says:

    November 19, 2011

    really cool effect with sfx too..
    great tutorial bro! :)