3

Here's what I need to pull off in CSS (it's terribly ugly, but it shows my problem well as an example):

Gradient example

We've got a gradient over text with a drop shadow on a background that has a slight gradient.

I've tried every method I could find.

This method won't work with a text-shadow.

The PNG overlay method won't work because I don't have a solid color background.

This method won't work because it requires me putting the text string in the CSS and my text will be dynamic.

So, I'm stumped.

It doesn't need to work in every browser (I'm fine with ignoring IE, if necessary). If it only works in Webkit browsers, that'd be fine as well.

1 Answer 1

3

That should be the answer:

HTML

<h1><span>Filthy</span></h1>

CSS

h1 {
   position: relative;
   font-size: 300px;
   line-height: 300px;
   text-shadow: -3px 0 4px #006;
}
h1 span {
   position: absolute;
   top: 0; 
   z-index: 2;
   color: #d12;
   -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
h1:after {
   content: attr(cssFilthyHack);
   color: #000;
   text-shadow: 3px 3px 1px #600;
}

JS

$('h1').each(function(i, e){
    var el = $(e);
    el.attr('cssFilthyHack', el.find('span').html());
});

The important thing is to use content: attr(cssFilthyHack); to extract the text from the h1 text. You could add the text a second time in html like this

<h1 cssFilthyHack="Filthy"><span>Filthy</span></h1>

Or you use the js jQuery method to do this automatically.


UPDATE

Replaced the a tag with span, added js function.

See the example here in action: http://jsfiddle.net/alligator/Gwd3k/

3
  • I just copied the example from your link
    – Marc
    Oct 27, 2011 at 13:54
  • So close. Can you think of a way to text-align:center the text? Absolute positioning might make that impossible.
    – Shpigford
    Oct 27, 2011 at 14:20
  • Sorry, no idea how to center it, just copied your example and solved your problem
    – Marc
    Oct 27, 2011 at 16:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.