Create Awesome Multiple Color Headings Using Lettering-jay-ess

Lettering Plugin Logo
Can you spot the difference between a blog title and Spicy Blogging title? (if yes:)), this small difference makes a huge difference to force a reader to stay at least few minutes (to some of you), it's actually a quite useful to make an eye-catching blog/webpage. Today we want to show you how to create these types of headings, the current version of the CSS3 doesn't support the complete control over the letters. Few days back i was searching for quick solution to create heading in different colors but unfortunately i have not found any easy and quick solution in CSS3, Except an Jquery plugin which is called "lettering-jay-ess", Plugin assumes basic counting abilities, but it's a very cool and quick way to manipulate every letter with css. We personally found this to be a pretty quick and elegant solution to stylize each letter in different color, animation and even transitions. You can achieve the same effect by breaking your browser if you try to wrap every letter on your page in a span tag, it's sound like headache so don't do that. The plugin has the ability to split words and lines as well.

The CSS-Tricks has a very good explanation related to our tutorial, for further references in CSS3 don't forget to read article.

CSS-Tricks: A call for nth-everything.

In this part of the tutorial we will create the spicy heading (H1) with CSS3 transitions and transform, you can use these effects even on h2, h3 and so on.

Live Demo

Let’s wrap a header, We have to keep in mind that we want to control the letters from the H1. So we will use the H1 tag (<h1>) as our control element and we give it the class spicy-title. So our HTML Markup will something like this:

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>How To Stylize Each Word in Headings.</title>
<meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0;'>
</head>

<body>

<header>
<hgroup>
<h1 class='spicy-title'>SpicyBlogging</h1>
</hgroup>
</header>

</body>
</html>

Let’s go on and load lettering Plugin and Jquery in body Section.

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>How To Stylize Each Word in Headings.</title>
<meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0;'>
</head>

<body>

<header>
<hgroup>
<h1 class='spicy-title'>SpicyBlogging</h1>
</hgroup>
</header>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script src='https://dl.dropboxusercontent.com/u/223738947/JavaScript/Lettering.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('#spicy-title').lettering();
});
</script>

</body>
</html>

Include lettering.js and then call the plugin with options.

<script type='text/javascript'>
$(document).ready(function(){
$('#spicy-title').lettering();
});
</script>

How it's Work

Lettering.js is Javascript span tag injector for typography, Plugin will churn out your ".class" and in output it will add classes inside the span with the name char#. In our case plugin churn our .spicy_title and output might be look like this:

<span class='char1'>S</span>
<span class='char2'>p</span>
<span class='char3'>i</span>
<span class='char4'>c</span>
<span class='char5'>y</span>
<span class='char6'></span> /* For space between word */
<span class='char7'>b</span>
<span class='char8'>l</span>
<span class='char9'>o</span>
<span class='char10'>g</span>
<span class='char11'>g</span>
<span class='char12'>i</span>
<span class='char13'>n</span>
<span class='char14'>g</span>

Plugin will generate .char# classes into span tag, then you can easily handle color and other CSS3 effects of every letter of the heading by using CSS and text will remain select-able. So now time to click on next step :).

In this tutorial we will only learn how to control the letters and in the coming tutorials words and then how to control lines, for the advance use of plugin you can read the documentation.

The CSS code for Spicy Blogging are as follow:

spicy-title span{display:inline-block;position:relative;letter-spacing: 1px; transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -webkit-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; text-shadow: rgb(71, 71, 71, 1.0) 1px 3px 1px;}
spicy-title span:hover{top:3px}
spicy-title .char1 {color: #62bd18; font-size: 1.5em; bottom: -3px; transform: rotate (-6deg); -webkit-transform:rotate(-6deg)}
spicy-title .char2 {color: #8ddd00;}
spicy-title .char3 {color: #ffbb00;}
spicy-title .char4 {color: #ff5300;}
spicy-title .char5 {color: #fc3d31; text-transform:uppercase; top: 3px; left: -2px; transform: rotate (6deg); -webkit-transform:rotate(6deg)}
spicy-title .char6 {color: #fff000; font-size: 1.5em; margin-left: 10px; transform: rotate (-6deg); -webkit-transform:rotate(-6deg)}
spicy-title .char7 {color: #eaa800;}
spicy-title .char8 {color: #dfe000;}
spicy-title .char9 {color: #ff5400; transform: rotate (6deg); -webkit-transform:rotate(6deg)}
spicy-title .char10{color: #d56500; transform: rotate (6deg); -webkit-transform:rotate(6deg)}
spicy-title .char11{color: #6dae2e;}
spicy-title .char12{color: #f2c700;}
spicy-title .char13{color: #fb8f3d; text-transform:uppercase; top: 3px; left: -2px; transform: rotate (-6deg); -webkit-transform:rotate(-6deg)}
spicy-title .char1:hover {color: #62bd18; font-size: 1em; transform: rotate (0deg); -webkit-transform:rotate(0deg)}
spicy-title .char6:hover {color: #fff000; font-size: 1em; transform: rotate (0deg); -webkit-transform:rotate(0deg)}
spicy-title .char13:hover{color: #fb8f3d; text-transform:none; top: 0px; left: -2px; transform: rotate (0deg); -webkit-transform:rotate(0deg)}
spicy-title .char9:hover {transform: rotate (0deg); -webkit-transform:rotate(0deg)}
spicy-title .char10:hover{transform: rotate (0deg); -webkit-transform:rotate(0deg)}
spicy-title .char5:hover { text-transform:none; top: 0px; transform: rotate (0deg); -webkit-transform:rotate(0deg)}


In our case we have used 13 letters in h1 (without Space), We aren't limited to only 13 here, we can manipulate as many letters (char14, 15,16) as we want. We will share some advance tutorials on lettering plugin, so till then stay updated by subscribing our email news feed or you can also join us on Facebook, Twitter, Google Plus.

Suggestions or need help?

If you have any feedback or suggestions, please leave those below in the comment form. I hope this spicy tutorial may help you make better understanding in web designing terms and techniques. Wishing you the best of blogging..! peace and blessing. :)
Author on

No comments Post Yours!

Post a Comment