Hostinicon
GET HOSTING FROM $3.95/MO PLUS A FREE YEAR ON TUTS+ (RRP $180). HURRY OFFER LIMITED. Check it out
Advertisement

Quick Tip: Nonintrusive CSS Text Gradients

by
Gift

Get a free year on Tuts+ this month when you purchase a Siteground hosting plan from $3.95/mo

Though not completely cross browser compatible, there are ways to nonintrusively create pure CSS text-gradients with a bit of trickery. The key is to use a mix of attribute selectors, webkit-specific properties, and custom HTML attributes.


Final Simple HTML

By using custom attributes, we can then hook into these values from within our stylesheet by using the attr() function.


Final CSS

Note: Paul referenced an even more succinct method in the comments. Be sure to check that out as well!

Advertisement