Advertisement
Advertisement
Advertisement
Advertisement
by Jeffrey Way
Difficulty:IntermediateLength:QuickLanguages:
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
<h1 data-text="Hello World"> Hello World </h1>
By using custom attributes, we can then hook into these values from within our stylesheet by using the attr()
function.
Final CSS
/* Select only h1s that contain a 'data-text' attribute */ h1[data-text] { position: relative; color: red; } h1[data-text]::after { content: attr(data-text); z-index: 2; color: green; position: absolute; left: 0; -webkit-mask-image: -webkit-gradient( linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(40%, rgba(0,0,0,0)) );
Note: Paul referenced an even more succinct method in the comments. Be sure to check that out as well!
Advertisement
Advertisement
Weekly email summary
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyAdvertisement
Translations
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this postPowered by![Native Native]()

Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.