64x64 icon dark hosting
Choose a hosting plan here and get a free year's subscription to Tuts+ (worth $180).
Advertisement

Quick Tip: Nonintrusive CSS Text Gradients

by
Gift

Start a hosting plan from $3.92/mo and get a free year on Tuts+ (normally $180)

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