Using jQuery and CSS to Design Marvelous Typography

Presentation is the key to success in this web world and to create stupefying effect on your reader you need to master the art of typography. For making an effective typography for big title or headlines we can harness CSS3 and jQuery to get some typography marvels.

Using jQuery and CSS to design marvelous typography

Let’s find out!

The HTML

There is an anchor inside the h2 element with a simple structure. We will use a container to wrap up the title of your post as shown below:

<div id=”letter-container element” class=”letter-container element”>

        <h2><a href=”#”>Fun</a></h2>

</div>

In order to wrap up every letter in a span we will use Lettering.js plugin.

To explain it further we can take help of examples. We can further see that whether these styles are relevant to the effects or not. To check out things such as position of the title, font , size, color and many such features you can check out the downloaded file.

In this blog we will discuss few examples of CSS vendor prefixes and downloadable files.

Example 1:

In this typography effect we will apply animation which will run when the page is loaded. This will be applied on the span class and we intend to make turn the letter from blurry to sharp. In order to add a texture on the letter we will make use of a mask .

.letter-container element h2 a span {

        font-size: 106px;

        color: #666;

        opacity: 1;

        text-shadow: 0px 1px 2px #666, 1px 2px 3px rgba(0,0,0,0.6);

        mask-image: url(../images/mark2.png);

        transition: all 0.2s linear;

        animation: sharpen 0.5s linear backwards;

}

We will change the color of a one particular letter:

.letter-container element h2 a span:hover{

        color: #3f7f75;

}

In order to randomize the appearance of the letter we can make some time delay in their animation.

.letter-container h2 a span:nth-child(1) {

        animation-delay: 1.6s;

}

.letter-container h2 a span:nth-child(2) {

        animation-delay: 0.5s;

}

.letter-container h2 a span:nth-child(3) {

        animation-delay: 1s;

}

/* … and so on for all the letters */

In order to make a letter appear blurry you can add animation to the text and along with is apply shadow to the text with fuzziness and add a transparent color. This is how it will eventually emerge as a letter with a solid color with a shadow .

@keyframes sharpen {

0% {

        opacity: 0;

        text-shadow: 0px 0px 90px #666;

        color: transparent;

}

90% {

        opacity: 0.9;

        text-shadow: 0px 0px 09px #666;

        color: transparent;

}

100% {

   color: #555;

        opacity: 1;

        text-shadow: 0px 0px 1px #666, 1px 1px 4px rgba(0,0,0,0.6);

}

}

Example 2

Now if you wish to give an elevated look to the text shadow then you should try this example. In this we will harness shadows to give an elevated look to the letters. Along with it we need to create a pseudo element with a cool background.

.letter-container h2 a:before{

        content: ”;

        position: absolute;

        z-index: 0;

        width: 425px;

        height: 516px;

        background: transparent url(../images/hero.png) no-repeat center center;

        background-size: 30%;

        top: 0px;

        left: 40%;

        margin-left: -258px;

        transition: all 0.2s ease-in-out;

}

To make the back ground look larger we can animate the background:

.letter-container h2 a:hover:before{

        background-size: 99%;

}

Now so as to elevate the letter we will have a span on the text shadow and next we will add a pad and change the shadow for moving the letter down

.letter-container element h2 a span{

        color: #ff3de6;

        float:left;

        position: relative;

        z-index: 100;

        transition: all 0.2s ease-in-out;

        text-shadow:

        0px -1px 4px #cb4aba,

        0 4px 2px #934589,

        2px 10px 5px rgba(0, 0, 0, 0.2),

        1px 20px 10px rgba(0, 0, 0, 0.3);

}

.letter-container element h2 a span:hover{

        color: #e929d0;

        padding-top: 10px;

        text-shadow:

        0px -1px 3px #cb4aba,

        0 4px 2px #934589,

        1px 1px 10px rgba(0, 0, 0, 0.2);

}

Example 3:

For a clean look you can also animate your alphabets in order rather than in a random order. Further, you can also apply a mask to induce a texture to the letters.

.letter-container element h2 a {

        text-align: center;

        font-size: 120px;

        line-height: 150px;

        display: block;

        padding-bottom: 30px;

        mask: url(../images/mask.png) repeat;

}

Animation adds sharpness to the letter and for further innovation we can apply some animation delay to the child.

.letter-container element h2 a span {

        color: #fff;

        opacity: 1;

        text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.6);

        transition: all 0.2s linear;

        animation: sharpen 0.9s linear backwards;

}

.letter-container element h2 a span:hover{

        text-shadow: 0px 0px 30px #fff;

}

.letter-container element h2 a span:nth-child(1) {

        animation-delay: 0.1s;

}

.letter-container element h2 a span:nth-child(2) {

        animation-delay: 0.2s;

}

.letter-container element h2 a span:nth-child(3) {

        animation-delay: 0.3s;

}

/* …and so on for all the letters */

 

@keyframes sharpen {

0% {

        opacity: 0;

        text-shadow: 0px 0px 100px #fff;

        color: transparent;

}

90% {

        opacity: 0.9;

        text-shadow: 0px 0px 08px #fff;

        color: transparent;

}

100% {

   color: #fff;

        opacity: 0.6;

        text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);

}

}

Example 4:

Now we will discuss something very different from what we have discussed earlier. Here we will skew the letters and further we will modify the word on hover. To do this we need to add an additional link element in the <h2> tag. The effect will work at its best when the word has same number of letters. Thus, here we have chosen 2 words.

<div id=”letter-container element” class=”letter-container”>

        <h2><a href=”#”>Chaos</a></h2>

        <h2><a href=”#”>Order</a></h2>

</div>

We will assign an absolute position to link element and assign zero opacity to the second word making it look as if it disappeared.

 .letter-container element h2 a{

        text-align: center;

        text-transform: uppercase;

        font-size: 150px;

        position: absolute;

        width: 800px;

        height: 180px;

        top: 0px;

        left: 50%;

        margin-left: -400px;

        transition: all 0.3s linear;

}

.letter-container h2 a:nth-child(2){

        opacity: 0;

}

Further you need to add characteristic text shadow to the spans. Skew the letters on the even position by 10 degrees:

.letter-container element h2 a span{

        display: inline-block;

        position: relative;

        width: 120px;

        margin: 0px;

        transition: all 0.3s linear;

        text-shadow:

                2px 2px 2px rgba(0,0,0,0.6),

                1px 1px 2px rgba(0,0,0,0.4),

                0px 0px 2px rgba(255,255,255,0.9);

}

.letter-container element h2 a span:nth-child(odd){

        transform: skewY(10deg);

        background: #333;

        box-shadow: 0px 4px 7px rgba(0,0,0,0.5);

        z-index: 10;

}

.letter-container element h2 a span:nth-child(even){

        transform: skewY(-10deg);

        background: #666;

        box-shadow: 0px 4px 7px rgba(0,0,0,0.5);

        z-index: 10;

}

To give a criss cross look to our text, you need to make the second link element appear first and then the fist one to disappear.

.letter-container element h2:hover a:nth-child(1){

        opacity: 0;

}

.letter-container element h2:hover a:nth-child(2){

        opacity: 0.5;

}

Also, we want to straighten the letters out:

.letter-container element h2:hover a span{

        transform: skewY(0deg);

        background: #686121;

}

.letter-container element h2 a span:hover{

        color: #f7b0c6;

}

This is all I had to share. Moreover, you can add some tweaks and creativity to get some similar stunning typography effects.

Author Biography:

Samuel Dawson is a perfect professional in the company like Designs2HTML Ltd. This is the fifth year since he is being associated with this company. He is responsible to convert psd to html with responsive outlook.

Add Comment