Overlooking typography is perhaps something you might have been running away from, all through your career of building remarkable websites. Right from paying attention to multiple website assets such as logo design, navigational structure and tone to working out the addition of special typographical effects; you might have put in your best efforts for building a website with a rich look and feel.
What is covered in this tutorial?
This tutorial is dedicated to all those who are inclined on gathering details about different ways of enhancing the typography as well as the ones who are getting awakened about the pros of including typography effects in their web design. Here, I will be explaining you the use of CSS3 and jQuery for creating specific typographic effects for a big headline.
We will be using an underline structure which is basically a div element containing an anchor. Here is the container which wraps the headline:
After this, we will be exploring the different styling options available for the headline.
Before moving forward, here is a glimpse of CSS3 Keyframe animations
The CSS3 Keyframe animations method is employed for creating animations by introducing a change between individual CSS styles. That means, as you animate using CSS keyframes, you can opt for manipulating the CSS styles as well. If you intend to generate fluid animations (the ones which don’t require extensive scripting) then CSS keyframe is for you.
The @keyframe rule
As an integral part of the CSS keyframes concept, @keyframe is a CSS rule the reference for which can be found in other CSS sections. This rule is followed by multiple CSS rules which are defined using curly braces.
A typical @rule is similar to this:
Knowing about the Keyframe Selectors
Keyframe Selectors come with their unique set of rules and values. Here’s a look at how you can define them:
As suggested by the above code, when the animation starts, the level is displayed as 0% and when it finishes off, the level scales to 100%. The intermediate levels are prepresented as 30% and 55%. Note that the different levels denote the different states of the animation in terms of appearance as well.
With each part of the keyframe, you can see different values that can be utilized for performing simple tweaks. For example, you may use the z-index for stacking the elements. Plus, you may even add the below code snippet for defining a name for the animation:
For my example, I will be using lettering.js which serves for styling the single letters of the words that need to go into the headline. There are situations when you might find it convenient to use .char# pattern for monitoring the text available in the CSS. This would allow you to change specific text pieces instantly.
Currently CSS does not offer complete down-to-the-letter control. So this is where the Lettering.js jQuery plugin give you that control.
Here is the complete code for implementing everything that has been covered in the above paragraghs:
Below, is the CSS code that I used for this demo.
Add the code below at the end of the HTML document just before the closed body tag (</body>)
Your Turn to Talk
So, that’s it. You can view the Wrapping letters with lettering() DEMO in the section below.
What’s your opinion about this tutorial? If you have anything to say, please share your opinion in the comments section. Your opinion matters, unless it is a Spam.
View Demo – Wrapping letters with lettering()
View the DEMO – Typography Effects Using jQuery and CSS3 by wrapping letters with lettering().
You can also: