f

body { font: 75%/160% Arial, Helvetica, sans-serif; width: 700px; margin: 20px auto; } /* gradient 1 */ .gradient1 h1 { font: bold 330%/100% "Lucida Grande", Arial, sans-serif; position: relative; margin: 30px 0 50px; color: #464646; } .gradient1 h1 span { background: url(images/gradient-white.png) repeat-x; position: absolute; display: block; width: 100%; height: 31px; } /* gradient 2 */ .gradient2 h1 { font: bold 310%/100% "Lucida Grande", Arial, sans-serif; position: relative; margin: 30px 0 50px; color: #464646; text-transform: uppercase; letter-spacing: -2px; } .gradient2 h1 span { background: url(images/gradient-glossy.png) repeat-x; position: absolute; display: block; width: 100%; height: 18px; } .gradient2 a { color: #000; text-decoration: none; } .gradient2 a:visited { color: #000; } .gradient2 a:hover { color: #555; } /* gradient 3 */ .gradient3 { background: #d7e1e3; padding: 30px 10px; padding: 30px 0 30px 30px; } .gradient3 h1 { font: bold 280%/100% "Lucida Grande", Arial, sans-serif; position: relative; margin: 0; color: #000; letter-spacing: -2px } .gradient3 span { background: url(images/gradient-grey.png) repeat-x; position: absolute; display: block; width: 100%; height: 29px; } /* gradient 4 */ .gradient4 { background: #000 url(images/gradient4-bg.png) repeat-x left bottom; padding: 30px 0 60px 30px; margin: 30px 0 50px; } .gradient4 h1 { font: normal 340%/100% "Lucida Grande", Arial, sans-serif; position: relative; margin: 0; color: #fff; } .gradient4 h2 { font: normal 150%/100% "Lucida Grande", Arial, sans-serif; margin: 10px 0 0; color: #b7b7b7; } .gradient4 span { background: url(images/gradient-dark.png) repeat-x; position: absolute; bottom: -0.1em; display: block; width: 100%; height: 29px; } /* gradient 5 */ .gradient5 { background: #000; padding: 30px 0 30px 30px; margin: 30px 0 50px; } .gradient5 h1 { font: normal 330%/100% "Lucida Grande", Arial, sans-serif; position: relative; margin: 0; color: #fff; letter-spacing: -1px; } .gradient5 h1 span { background: url(images/gradient-shine.png) repeat-x; position: absolute; display: block; width: 100%; height: 64px; } /* gradient 6 */ .gradient6 { background: #000; padding: 30px 0 30px 30px; margin: 30px 0 50px; } .gradient6 h1 { font: bold 310%/100% "Lucida Grande", Arial, sans-serif; position: relative; margin: 0; color: #fff; text-transform: uppercase; letter-spacing: -2px; } .gradient6 h1 span { background: url(images/gradient-dark-stripe.png) repeat-x; position: absolute; bottom: -0.1em; display: block; width: 100%; height: 29px; } /* gradient 7 */ .gradient7 { background: #000; padding: 30px 0 30px 30px; margin: 30px 0 50px; } .gradient7 h1 { font: bold 310%/100% "Lucida Grande", Arial, sans-serif; position: relative; margin: 0; color: #fff; text-transform: uppercase; letter-spacing: -2px; } .gradient7 h1 span { background: url(images/gradient-dark-stripe-hz.png) repeat-x; position: absolute; bottom: -0.1em; display: block; width: 100%; height: 29px; } /* pattern */ .pattern { background: #000; padding: 30px 0 30px 30px; margin: 30px 0 50px; } .pattern h1 { font: bold 600%/100% "Lucida Grande", Arial, sans-serif; position: relative; margin: 0; color: #fff; text-transform: uppercase; letter-spacing: -6px; } .pattern h1 span { background: url(images/pattern-zebra.png); position: absolute; display: block; width: 100%; height: 100px; } /* gradient IE6 png hack */ .gradient-ie h1 { font: bold 320%/100% "Lucida Grande", Arial, sans-serif; position: relative; margin: 30px 0 50px; color: #464646; } .gradient-ie h1 span { background: url(images/gradient-white.png) repeat-x; position: absolute; display: block; width: 100%; height: 31px; } /* jquery */ .jquery h1 { font: bold 280%/100% "Lucida Grande", Arial, sans-serif; position: relative; margin: 30px 0 0; color: #464646; } .jquery h1 span { background: url(images/gradient-white.png) repeat-x; position: absolute; display: block; width: 100%; height: 31px; } .jquery p { margin: 10px 0 50px; } /* full example */ .full .leadin { background: url(images/leadin.jpg) no-repeat; padding: 140px 0 0 50px; height: 140px; overflow: hidden; } .full h1 { font: normal 340%/100% "Lucida Grande", Arial, sans-serif; position: relative; margin: 0; color: #fff; width: 390px; } .full h1 span { background: url(images/gradient-dark.png) repeat-x; position: absolute; bottom: -0.1em; display: block; width: 100%; height: 29px; } .full h2 { font: normal 150%/100% "Lucida Grande", Arial, sans-serif; margin: 10px 0 0; color: #b7b7b7; } .full .content { background: #e8e8e8 url(images/content.gif) repeat-x; padding: 30px 30px 10px; border: solid 1px #ccc; border-top: none; } .full h3 { font: normal 210%/100% Arial, sans-serif; position: relative; margin: 0; color: #464646; } .full h3 span { background: url(images/gradient-full.png) repeat-x; position: absolute; display: block; width: 100%; height: 21px; } .full p { margin: 10px 0 25px; }