Geek Speak
Geek Speak Tags:
analytics, asp, browser comparision, bug, css, css diagnostics, css hacks, css3, dual-boot, firefox, flash, font, function, google, howto, html, ie, internet explorer, javascript, jquery, json, microsoft, multi-boot, operating system, organization, os, page jump, pci.sys, quotes, rss, seo, setup, television, tri-boot, validation, web 2.0, xhtml, xml, xsl, youtube,
Subscribers
How To Create CSS Text/Font Gradients With CSS
Something that CSS is currently lacking is the ability to add gradients to our text blocks. Currently we can add drop shadows to text or change the color of it but not add gradients. I suspect that in the coming years this will be a new property but until then here is a method to do it.
HTML Setup
The HTML Setup is pretty simple. Just place an empty SPAN element inside your heading element:
<h3><span></span>Text Here</h3>
Using JQuery to Automatically Insert SPAN Elements
I think a few people might find the above code unsightly, so here's a method to leave the empty SPAN element out of your HTML and inject it via JQuery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("h3").prepend("<span><\/span>")
});
</script>
CSS Setup
The most important part of this code is setting the H3 element's position to relative. I'd also recommend setting the line-height to the same height as the font-size used and also reseting the margins back to zero.
h3
{
font-size: 25px;
line-height: 25px;
margin: 0px;
position: relative;
}
....Read More >>
Posted By: Neal Grosskopf @ Wednesday, July 01, 2009 8:04:44 PM
Replies: 0 | Views: 36
Archived Posts:
-
Posted: Sunday, June 28, 2009
Views: 1533
Replies: 0
Tags: No Tags ( Add Tag ) -
Posted: Wednesday, June 10, 2009
Views: 718
Replies: 4
Tags: youtube, ( Add Tag ) -
Posted: Wednesday, June 03, 2009
Views: 1370
Replies: 3
Tags: css, font, ( Add Tag ) -
Posted: Tuesday, May 26, 2009
Views: 768
Replies: 1
Tags: browser comparision, ( Add Tag ) -
Posted: Wednesday, May 13, 2009
Views: 365
Replies: 1
Tags: No Tags ( Add Tag ) -
Posted: Sunday, May 10, 2009
Views: 2554
Replies: 4
Tags: html, ( Add Tag ) -
Posted: Wednesday, May 06, 2009
Views: 10714
Replies: 18
Tags: css, css3, jquery, ( Add Tag ) -
Posted: Wednesday, April 22, 2009
Views: 4994
Replies: 6
Tags: css, css3, ( Add Tag ) -
Posted: Tuesday, April 14, 2009
Views: 887
Replies: 7
Tags: css, ( Add Tag )