Fun with CSS3 Transitions – Create Super Cool Text Effect using CSS3 and Lettering.js
written by Nikola LazarevicWhen 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.
Let’s take a look at the demo first: 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. Import Mensch font in css using @font-face. I decided to go a little further and insert audio when you hover over title. 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.
Web Designer, Blogger, M.Sc in Electronic Engineering from Nis, Serbia. Founder of webexpedition18.com. You can find me on Twitter.
DEMO
VIEW DEMO
HTML
<!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
@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;}
::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;
}
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
<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
11 Comments
ADD COMMENTGonzo the Great says:
November 7, 2011Hi 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, 2011Great and very creative Effect!
Thanks for sharing Nikola!
Praveen Gowda I V says:
November 7, 2011Superb
Lam Nguyen says:
November 7, 2011Very creative, Nik!
Vladimir says:
November 7, 2011hello man! this realy cool, thanx!
Ijal Fauzi says:
November 7, 2011What a great effect it was !
thanks for sharing, dude.
Beben Koben says:
November 7, 2011nice effect ? ?
Caparico says:
November 7, 2011Wow, Thanks for this. Very useful stuff.
Ines says:
November 11, 2011This is so freaking rad! Thanks for sharing!
shae says:
November 18, 2011Thanks so much that IS GREAT! That is certainly the coolest code of the day!
Tenman says:
November 19, 2011really cool effect with sfx too..
great tutorial bro! :)