Code, CSS, Design, Web
Nov 10, 2011
Mojo
No Comments

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

Tweet />

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:

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

src="http://blog.webexpedition18.netdna-cdn.com/wp-content/uploads/2011/11/transitions03.jpg" alt="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;
}

src="http://blog.webexpedition18.netdna-cdn.com/wp-content/uploads/2011/11/transitions04.jpg" alt="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;
}

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

VIEW DEMO

Go to Source

Recent Posts

Categories

Recent Comments

Archives

Blogroll