3 Awesome CSS3 Typography Techniques to Learn

Posted by Joe Burrill | On | March 14, 2013 | Filed under Design

It’s all around now; CSS3 has made an impact among the web designers. They are trying this technique to create many attractive design projects. The most amazing part to use CSS3 is – it gives your flexibility to use with any web design technology. You will feel the same lookout of Flash using CSS3 styling in your web projects. Playing with typography is very old fashion for the designers, using graphic application it is normal but with CSS3 it is expert’s fold.

 

3 Awesome CSS3 Typography Techniques to Learn

 

Using CSS3 you can spice up the normal typography and can turn those texts into attractive text effects. Following 3 CSS3 typography techniques are easier to learn and implement into web project. These will give your project stunning look and good visitor appeal. You have to use web-kit enabled browsers to see the actual effects of these CSS3 typography. Now, it’s old news to use Flash for designing rich text graphic, you can get the same result with right combination of color, font with CSS3 and HTML5.

 


 

1. Textured Shadow Effect

This is eye pleasing effect for your site visitors, just apply the following code to the text of your site get the response from your visitors.

Textured Shadow Effect

CSS Code:

body {
    background: #441369;   
}
 
h1#gradient {
    text-align:center;
}
h1#gradient span {
    position:relative;
    display: inline-block;
    color: #FF0052; /* Fallback Color */
    text-transform: uppercase;
    font-weight: bold;
    font-family: helvetica;
    text-align:center;
    font-size: 70px;
    letter-spacing: -4px;
    text-shadow: 4px 4px 0px #441369, 8px 8px 0px rgba(255,255,255,0.1);  /* Fallback Shadow */
}
@media  screen and (-webkit-min-device-pixel-ratio:0) {
    h1#gradient span{
      background: -webkit-gradient(linear,left top,left bottom,from(#FF0052),to(#802F7B));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow:none !important;
    }
    h1#gradient span:after {
        content: attr(data-text);
        left: 8px;
        position: absolute;
        background: url(http://i.imgur.com/RkDRMcJ.png); /* image source for your texture */
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: -4px -4px 0px #441369, -1px 0px 0px rgba(255, 255, 255, 0.1);
        top: 8px;
        z-index: -1;
        width: 100%;
    }
}

HTML Code:

<h1 id="gradient"><span data-text="CSS3 Rocks!">CSS3 Rocks!</span></h1>

Click here for Demo

 

2. Gradient on Text

If you want to create gradient background, then use the following CSS3 code to get the effect.

Gradient on Text

CSS Code:

h1#gradient {
    color: #FF0052; /* Fallback Color */
    text-transform: uppercase;
    font-weight: bold;
    font-family: helvetica;
    text-align:center;
    font-size: 70px;
    letter-spacing: -4px;
}
@media  screen and (-webkit-min-device-pixel-ratio:0) {
    h1#gradient {
    background: -webkit-gradient(linear,left top,left bottom,from(#FF0052),to(#802F7B));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    }
}

HTML Code:

<h1 id="gradient">CSS3 Rocks!</h1>

Click here for Demo

 

3. The Relief Shade Effect

You can extend gradient effect by using the Relief Shade effect to give some unique touch to your font. just try this piece of code to achieve this –

The Relief Shade Effect

CSS Code:

body {
    background: #441369;   
}
 
h1#gradient {
    text-align:center;
}
h1#gradient span {
    position:relative;
    display: inline-block;
    color: #FF0052; /* Fallback Color */
    text-transform: uppercase;
    font-weight: bold;
    font-family: helvetica;
    text-align:center;
    font-size: 70px;
    letter-spacing: -4px;
    text-shadow: 4px 4px 0px #441369, 8px 8px 0px rgba(255,255,255,0.1);  /* Fallback Shadow */
}
@media  screen and (-webkit-min-device-pixel-ratio:0) {
    h1#gradient span{
        background: -webkit-gradient(linear,left top,left bottom,from(#FF0052),to(#802F7B));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow:none !important;
    }
    h1#gradient span:after {
        background: none;
        content: attr(data-text);
        left: 0;
        position: absolute;
        text-shadow: 4px 4px 0px #441369, 8px 8px 0px rgba(255,255,255,0.1); //relief shade effect 
        top: 0;
        z-index: -1;
    }
}

HTML Code:

<h1 id="gradient"><span data-text="CSS3 Rocks!">CSS3 Rocks!</span></h1>

Click here for Demo

♂ Author Info ♀

Written by Joe Burrill

Joe Burrill has written 639 posts on Blogger's Path

Spread the ❤

Related Posts☟

Comments

  1. By Nizam Khan - March 14, 2013

    Awesome! These css3 typography techniques are excellent. The CSS and HTML codes are much useful . Thanks for sharing and tweeted :)

  2. By Rajkumar Jonnala - April 5, 2013

    great techniques and i am loving it. thanks for the share

Leave a comment