Many designers resist using header tags (H1, H2, etc.) on their Web pages because the spacing around the tags can break a tight page layout.
Heading tags (H1 through to H6) are given more weight by search engines than regular body copy. So they should be used wisely to reinforce the page’s overall keyword theme……By SEO
I have used header tags and applied some css effects, it easy to write with 10-12 line of css and html Output will look like image shown.
First we need to add a div tag to our html page to put header on it.
Css for div:
#container {
background: #6699FF;
margin: auto;
width: 500px;
height: 700px;
padding-top: 30px;
font-family: helvetica, arial, sans-serif;
}
We will use this as
h1 {
background: red; /*Background color to header*/
background: -moz-linear-gradient(top, red, FFFFFF);
/*from to colors, I have used simple name it can be replaced by color codes*/
background: -webkit-gradient(linear, left top, left bottom, from(red), to(white));
padding: 10px 20px;
margin-left: -20px;
margin-top: 0;
position: relative;
width: 70%;
/*from droping box shadow at the bottom of header*/
-moz-box-shadow: 1px 1px 3px #292929;
-webkit-box-shadow: 1px 1px 3px #292929;
box-shadow: 1px 1px 3px #292929;
color: #454545;
text-shadow: 0 1px 0 white;
}
Arrow class for dropping shadow.
.arrow {
width: 0; height: 0;
line-height: 0;
border-left: 20px solid transparent;
border-top: 10px solid #c8c8c8;
top: 104%;
left: 0;
position: absolute;
}
Now just create a html Page and put a header and you have done assuming that you have written css in separate file named jstyle.css.
Example:
<html >
<head>
<link rel="Stylesheet" type="text/css" href="jstyle.css" />
<title>CSS Header</title>
</head>
<body>
<div id="container">
<h1> H1 - Heading <span class="arrow"></span> </h1>
</body>
</html>
Note: This will not work on browsers which does not support CSS3.
About Author:
Jayant Bramhnakar
Sr. Web Developer
Sahyadri Technologies Pvt. Ltd(Satara)
jayantbramhankar@gmail.com
jayant@sahyadritechnologies.com
Leave a Reply