{"id":594,"date":"2010-07-06T10:41:41","date_gmt":"2010-07-06T05:11:41","guid":{"rendered":"http:\/\/JitendraZaa.com\/blog\/?p=594"},"modified":"2010-07-06T10:41:41","modified_gmt":"2010-07-06T05:11:41","slug":"create-gradient-header-using-css","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/create-gradient-header-using-css\/","title":{"rendered":"Create Gradient Header using CSS"},"content":{"rendered":"

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.<\/p>\n

\n

\"Create<\/a>
Create attractive headers in HTML using CSS<\/figcaption><\/figure>\n

Heading tags (H1 through to H6) are given more weight by search engines<\/strong> than regular body copy. So they should be used wisely to reinforce the page’s overall keyword theme……By SEO<\/strong><\/p>\n

I have used header tags and applied some css effects, it easy to write with 10-12 line of css and html\u00a0Output will look like image shown.<\/p>\n

First we need to add a div tag to our html page to put header on it.<\/p>\n

Css for div:<\/p>\n

\n#container {\n\tbackground: #6699FF;\n\tmargin: auto;\n\twidth: 500px;\n\theight: 700px;\n\tpadding-top: 30px;\n\tfont-family: helvetica, arial, sans-serif;\n\t}\n<\/pre>\n
We will use this as<\/p>\n
Css for Header Tag..<\/p>\n
\nh1 {\n\t background: red;             \/*Background color to header*\/\n\t background: -moz-linear-gradient(top, red, FFFFFF);\n              \/*from to colors, I have used simple name it can be replaced by color codes*\/\n\t background: -webkit-gradient(linear, left top, left bottom, from(red), to(white));\n\t padding: 10px 20px;\n\t margin-left: -20px;\n\t margin-top: 0;\n\t position: relative;\n\t width: 70%;\n       \/*from droping box shadow at the bottom of header*\/\n\t-moz-box-shadow: 1px 1px 3px #292929;\n\t-webkit-box-shadow: 1px 1px 3px #292929;\n                 box-shadow: 1px 1px 3px #292929;\n\tcolor: #454545;\n\ttext-shadow: 0 1px 0 white;\n}\n<\/pre>\n
Arrow class for dropping shadow.<\/p>\n
\n.arrow {\n\t width: 0; height: 0;\n\t line-height: 0;\n\t border-left: 20px solid transparent;\n\t border-top: 10px solid #c8c8c8;\n\t top: 104%;\n\t left: 0;\n\t position: absolute;\n}\n<\/pre>\n
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.
\nExample:<\/p>\n
\n<html >\n<head>\n    <link rel="Stylesheet" type="text\/css" href="jstyle.css" \/>\n\t<title>CSS Header<\/title>\n<\/head>\n<body>\n\t <div id="container">\n\t\t<h1> H1 - Heading <span class="arrow"><\/span> <\/h1>\n<\/body>\n<\/html>\n<\/pre>\n
Live Demo of CSS Header<\/a><\/p>\n
Note: This will not work on browsers which does not support CSS3.<\/p>\n
<\/a>About Author:<\/strong>
\nJayant Bramhnakar
\nSr. Web Developer
\nSahyadri Technologies Pvt. Ltd(Satara)
\n jayantbramhankar@gmail.com
\njayant@sahyadritechnologies.com <\/span><\/span><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Create a Gradient effect in heading tag of HTML using simple CSS trick<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[26],"tags":[67],"class_list":["post-594","post","type-post","status-publish","format-standard","hentry","category-web","tag-css"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":2173,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/create-pure-css-based-menu-step-by-step-tutorial\/","url_meta":{"origin":594,"position":0},"title":"Create Pure CSS based Menu – Step by Step Tutorial","author":"Jitendra","date":"May 23, 2011","format":false,"excerpt":"Tutorial on creating step by step pure CSS based Menu without any javaScript and Why CSS Hover property is not working in Internet explorer","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"Pure CSS based menu","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2011\/05\/Pure-CSS-based-menu.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":2657,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/create-simple-drag-and-drop-widget-like-igoogle-using-jquery\/","url_meta":{"origin":594,"position":1},"title":"Create Simple Drag and Drop Widget like iGoogle using JQuery","author":"Jitendra","date":"January 20, 2012","format":false,"excerpt":"Live Demo with source code on creating Simple Drag and Drop Widget using JQuery plugin like iGoogle","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"jQuery Drag and Drop Widgets","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/01\/jQuery-Drag-and-Drop-Widgets.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/01\/jQuery-Drag-and-Drop-Widgets.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2012\/01\/jQuery-Drag-and-Drop-Widgets.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":65,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/highlight-current-field-using-jquery\/","url_meta":{"origin":594,"position":2},"title":"Highlight Current field using JQuery","author":"Jitendra","date":"May 10, 2010","format":false,"excerpt":"Write below HTML code : This will create two text boxes. [sourcecode lang=\"css\"]