lesjames · January 18, 2012 01:59
diff --git a/dabblet.css b/dabblet.css
 /*
 * CSS Gradient Text
 * currently webkit only
 * CMS must duplicate the text into the title attribute so the CSS can pull it into the pseudo-element
 */

 body { background: #333; font-family: Helvetica, sans-serif; font-size: 2em; padding: 3em 0; color: white; text-shadow: 0 -1px 1px rgba(0,0,0,.3); }
 h1 { position: relative; width: 10em; margin: 0 auto; font-weight: normal; }

 /* Duplicate the content and layer it over the original with a gradient mask */
 h1::before {
 	content: attr(title); position: absolute; color: hotpink;
 	mask-image: linear-gradient(100deg, rgba(0,0,0,0), black);
 }
diff --git a/dabblet.html b/dabblet.html
 <h1 title="When you're cool, the sun shines on you 24 hours a day.">When you're cool, the sun shines on you 24 hours a day.</h1>
diff --git a/settings.json b/settings.json
 {"view":"split","prefixfree":"1","page":"css"}
	/*
	* CSS Gradient Text
	* currently webkit only
	* CMS must duplicate the text into the title attribute so the CSS can pull it into the pseudo-element
	*/

	body { background: #333; font-family: Helvetica, sans-serif; font-size: 2em; padding: 3em 0; color: white; text-shadow: 0 -1px 1px rgba(0,0,0,.3); }
	h1 { position: relative; width: 10em; margin: 0 auto; font-weight: normal; }

	/* Duplicate the content and layer it over the original with a gradient mask */
	h1::before {
	content: attr(title); position: absolute; color: hotpink;
	mask-image: linear-gradient(100deg, rgba(0,0,0,0), black);
	}