How to create a stylish header using CSS3

CSS can be used for a lot of styling purposes today. In fact, CSS can now be  used in place of such software as photoshop and corel draw when manipulated correctly. In this article, I'll show you how to create a fancy header using CSS3.
During the days of CSS2.1, you could only use the standard font types such as serif, sans-serif, cursive, fantasy, et cetera. And the only way any of such fonts would display on the users browser is if the font is installed on the computer, thus if you applied, say Georgia fonts to your CSS rule and perhaps that font isn't installed on your user's PC, the browser uses the default serif font thus you lose all your styles and impression you would have made.
CSS3 introduced a new element which is the @font-face. With it, you can apply web fonts to your CSS rules, that way, the font displays on your user's PC irrespective of whether the font is installed or not. Great right? sure, it is. Not just that, you can include some fancy styles to the font.
Get ready to learn some cool ways to create headers using CSS3.
You can add a cool header to your website using the code below.
<style rel="stylesheet">
/* @font-face tutorials by BthemesandTricks */
@font-face {
font-family: 'Crafty Girls';
font-style: normal;
font-weight: 400;
src: local('Crafty Girls'), local('CraftyGirls'), url(http://themes.googleusercontent.com/static/fonts/craftygirls/v2/0Sv8UWFFdhQmesHL32H8o3hCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
header {
font-size: 50px;
padding: 15px;
height: 100px;
text-align: left;
text-shadow: -4px 4px 3px #999, 1px -1px 2px #000;
margin-top: 0;
margin-bottom: 0;
}
</style>
<header>
<h1>Stylish Header</h1>
</header>

Stylish Header