3 Awesome CSS3 Typography Techniques to Learn

0
4282

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:
[sourcecode language=”css”]
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(https://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%;
}
}
[/sourcecode]

HTML Code:
[sourcecode language=”html”]
<h1 id="gradient"><span data-text="CSS3 Rocks!">CSS3 Rocks!</span></h1>
[/sourcecode]
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:
[sourcecode language=”css”]
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;
}
}
[/sourcecode]

HTML Code:
[sourcecode language=”html”]
<h1 id="gradient">CSS3 Rocks!</h1>
[/sourcecode]
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:
[sourcecode language=”css”]
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;
}
}
[/sourcecode]

HTML Code:
[sourcecode language=”html”]
<h1 id="gradient"><span data-text="CSS3 Rocks!">CSS3 Rocks!</span></h1>
[/sourcecode]
Click here for Demo