My blog's header is something that most of my readers asks 'how to make a header like that', this post is especially for them. You can use Flash to make a header animate but the problem is that flash makes website slower but with CSS it's too easy and comfortable, it's friendly with the page. Let's see how to make header like mines
This tutorial is for Blogger user, other's might use the CSS but remember to set the class at the right place.
The header on my has a good popularity and many readers wanted to know the key, how to make their header like this too, i said them wait for a post and now here it is. We will mainly work with CSS, as we have to only design the Header, HTML is already in the template.
This tutorial is for Blogger user, other's might use the CSS but remember to set the class at the right place.
The header on my has a good popularity and many readers wanted to know the key, how to make their header like this too, i said them wait for a post and now here it is. We will mainly work with CSS, as we have to only design the Header, HTML is already in the template.
The CSS we will use
To form an animation effect on hover, we have used the new CSS3 properties for better experience, CSS3 is a new version of CSS, with CSS3 it's not easy to create more attractive pages and designs and so as the header.
Actually there's two mode, one is that you can only set the effect for pages other than home-page. I will provide CSS for both the modes. You may only apply one CSS code block, adding all modes will cause errors.
No header Effect on Home Page - This CSS will make your header animated and designed only on post pages,pages, index pages etc. Your header will be default on Home Page.
Actually there's two mode, one is that you can only set the effect for pages other than home-page. I will provide CSS for both the modes. You may only apply one CSS code block, adding all modes will cause errors.
No header Effect on Home Page - This CSS will make your header animated and designed only on post pages,pages, index pages etc. Your header will be default on Home Page.
.Header h1 a
{
border-color:black !important;
text-decoration: none;
font-size: 70px;
font-family: consolas;
background-color: aliceblue ;
border-style: solid;
border-top-style: none;
border-bottom-style: none;
padding: 20px 25px 20px 25px;
border-radius: 15px;
border-width: 16px;
border-bottom-right-radius: 76px;
border-top-left-radius: 76px;
color: black !important;
transition:background-color 1s,border-style 1s,border-top-style 1s,border-radius 1s,border-width 1s,border-bottom-right-radius 1s,border-top-left-radius 1s;
-webkit-transition:all 1s,border-color 1s ease-in-out;
-ms-transition:all 1s,border-color 1s ease-in-out;
-moz-transition:all 1s,border-color 1s ease-in-out;
-o-transition:all 1s,border-color 1s ease-in-out;
}
.Header h1 a:hover
{
color: white !important;
border-style: solid;
border-top-style: none;
border-bottom-style: none;
border-width: 16px;
padding: 20px 25px 20px 25px;
border-radius: 15px;
border-bottom-left-radius: 76px;
border-top-right-radius: 76px;
background-color: Gainsboro !important;
border-color: Grey !important;
}
The CSS is long, but works great when applied to blog. Don't know where to add this CSS ? Click here to know how to add CSS in Blogger.
If you are feeling to lazy to paste such big CSS, then you might use the hosted CSS file to get the CSS styles. To do that you have to paste an HTML tag inside your <head> tag, for blogger user Go to Blogger Dashboard > Template > Edit HTML > Proceed > Using CTRL+F search for </head> in the template and paste this link tag just above it.
<link rel='stylsheet' href='http://dl.dropbox.com/u/80435960/header-linkeffect.css' type='text/css'/>
Effect on header on all pages and home page - If you have tried the last CSS, then you have seen that it only works on post-pages and other pages other than homepage, this CSS is universal and applies the effect on homepage also. Let's overview the CSS.
/************************************************
Design taken from http://stramaxon.blogspot.com
Designed by : Deepak Kamat
************************************************/
.Header h1 a
{
border-color:black !important;
text-decoration: none;
font-size: 70px;
font-family: consolas;
background-color: aliceblue ;
border-style: solid;
border-top-style: none;
border-bottom-style: none;
padding: 20px 25px 20px 25px;
border-radius: 15px;
border-width: 16px;
border-bottom-right-radius: 76px;
border-top-left-radius: 76px;
color: black !important;
transition:background-color 1s,border-style 1s,border-top-style 1s,border-radius 1s,border-width 1s,border-bottom-right-radius 1s,border-top-left-radius 1s;
-webkit-transition:all 1s,border-color 1s ease-in-out;
-ms-transition:all 1s,border-color 1s ease-in-out;
-moz-transition:all 1s,border-color 1s ease-in-out;
-o-transition:all 1s,border-color 1s ease-in-out;
}
.Header h1 a:hover
{
color: white !important;
border-style: solid;
border-top-style: none;
border-bottom-style: none;
border-width: 16px;
padding: 20px 25px 20px 25px;
border-radius: 15px;
border-bottom-left-radius: 76px;
border-top-right-radius: 76px;
background-color: Gainsboro !important;
border-color: Grey !important;
}
/***********************************
Both Link and Non-link
***********************************/
.Header h1
{
cursor:default;
border-color:black !important;
text-decoration: none;
font-size: 70px;
font-family: consolas;
background-color: aliceblue ;
border-style: solid;
border-top-style: none;
border-bottom-style: none;
padding: 20px 25px 20px 25px;
border-radius: 15px;
border-width: 16px;
border-bottom-right-radius: 76px;
border-top-left-radius: 76px;
color: black !important;
transition:background-color 1s,border-style 1s,border-top-style 1s,border-radius 1s,border-width 1s,border-bottom-right-radius 1s,border-top-left-radius 1s;
-webkit-transition:all 1s,border-color 1s ease-in-out;
-ms-transition:all 1s,border-color 1s ease-in-out;
-moz-transition:all 1s,border-color 1s ease-in-out;
-o-transition:all 1s,border-color 1s ease-in-out;
}
.Header h1:hover
{
color: white !important;
border-style: solid;
border-top-style: none;
border-bottom-style: none;
border-width: 16px;
padding: 20px 25px 20px 25px;
border-radius: 15px;
border-bottom-left-radius: 76px;
border-top-right-radius: 76px;
background-color: Gainsboro !important;
border-color: Grey !important;
}
If you think the CSS is very complicated and you don't just want to mess things up then you may try this. Adding this link tag inside your template's <head> then it will load the given CSS. This is an one line link tag.
For blogger user Go to Blogger Dashboard > Template > Edit HTML > Proceed > Using CTRL+F search for </head> in the template and paste this link tag just above it.
<link rel='stylsheet' href='http://dl.dropbox.com/u/80435960/header-effect.css' type='text/css'/>
So now you know how to make a cool looking header like mine, hope you will share the post.
Related Posts -
