Create A Skewed Title With CSS and Jquery

Posted on June 26th, 2011 by Kyle G

View Demo

Web typography sometimes seems limiting, but using jQuery combined with CSS 3 will you the ability to create something that breaks from the norm. The effect is to use jQuery and a plugin call Letting JS to wrap elements (letters) with a unique class and target each with unique styling. The styling is CSS 3; taking advantage of the transform property. This will allow us to move elements (letters) along the X and Y axis as well as skewing them around the Y axis.

Lettering JS Overview

If you visit the lettering.js website, you will find the title of the site is pure type and is a great example of what this plugin can do for you. It allows you to individually target either letters, words, or lines of content by assigning classes to each. The title on this site uses Lettering JS to individually target each character in the title allowing individual styling be applied to each.

CSS 3 transform

The CSS 3 transform property gives you the ability to: rotate elements, move elements along the X and Y axis, transform elements via a transformation matrix, scaling, and skewing around the X and Y axis. This property is recognized by most modern browsers and is supported by IE 9.

When using transform, you have the task of targeting each browser to ensure you style will be applied. Here is a quick look at one of the ways from the example that transform is used:

.char1 {
    -webkit-transform: translate(0px, -13px) skewY(-15deg);
    -o-transform: translate(0px, -13px) skewY(-15deg);
    -moz-transform: translate(0px, -13px) skewY(-15deg);
    -ms-transform: translate(0px, -13px) skewY(-15deg);
    transform: translate(0px, -13px) skewY(-15deg);
}

There are 5 different methods to ensure translate will be supported in the popular browsers; these are Webkit (-webkit-transform:), Opera (-o-transform), Mozilla Firefox (-moz-transform), IE (-ms-transform), and a general transform. The values for transform we use are translate and skewY and need more explanation.

Translate move elements along the X and Y axis. These values are surrounded by parenthesis with the first value is for the X axis and the second is the Y axis. In the example we use a value of -13px on the y axis which moves the element up, the opposite to a regular XY graph.

SkewY rotates an element around the Y axis and the value is the degree the element will be rotated. There is a general skew we could also use and it accepts values similar to translate, but there is no need because the Y axis is all we will need to create the look.

Creating the Skewed Title

To begin, we need to create a HTML document and include the jQuery library. I am also going to include an external style sheet and create a H1 title call “skew example” with an ID of “skew-title”. Here is the code:

<!doctype html>
<html lang=en>
<head>
    <ink href="css/syle.css" rel="stylesheet" media="all" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <title>Skew Example</title>
    <meta charset=utf-8>
</head>
<body>
    <h1 id="skew-title">Skew Example</h1>
</body>
</html>

Adding Lettering JS

Next, we need to download lettering JS and include it in our document. Then we use javascript to get “skew-title” and call the lettering function. By default this wraps each character in a span assigning it a class of “char” plus the number of the character. For example the first letter in the title would have the class of “char1″ representing that is is the first character in the string. These new classes created by lettering JS will allow us to style each character individually. Here is the code:

<html lang=en>>
<head>
    <link href="css/syle.css" rel="stylesheet" media="all" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.lettering.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#skew-title').lettering();
        });
    </script>

    <title>Skew Example</title>
    <meta charset=utf-8>
</head>
<body>
    <h1 id="skew-title">Skew Example</h1>
</body>
</html>

If we take a closer look at the result of calling Lettering JS on our title, we will find that each letter is now wrapped in a span. Each span has a class of char plus what ever number character it is. Here is the result:

Creating the CSS

To begin I just create some general styling of the H1 tag, giving it a certain font size and text-transform of uppercase.

h1 {
    font-size: 65px;
    text-transform: uppercase;
}

CSS Transform Methods

To create the skew on just the first letter, we are going to use the span class assigned by Lettering JS to target the first letter, char1. Here is the code from the example:

.char1 {
    -webkit-transform: translate(0px, -15px) skewY(-15deg);
    -o-transform:translate(0px, -13px) skewY(-15deg);
    -moz-transform:translate(0px, -13px) skewY(-15deg);
    -ms-transform:translate(0px, -13px) skewY(-15deg);
    transform: translate(0px, -13px) skewY(-15deg);
    display: inline-block;
    text-align: center;
    background: #5E6553;
    border: 1px solid #B6B9B0;
    color:#B6B9B0;
    width: 65px;
}

Reviewing the code, you will find the translate and skew methods from above but we have added more styling. We added color to the font, gave it a background color, width, aligned the text to the center, and gave it a border. One other property was used to change the display to inline-block. This is required to make each letter function like a block and without the styling would not properly be applied.

Styling the rest

After style the first letter you should be able to see how to style the rest. The best thing to actually do is to play with it. Try different scaling and skews to create something unique. Thanks for reading.

Refactord