css switch shadow to the back of text

Question

I'm trying to make some text look a little more 3D by adding a shadow to it, but I can not make the shadow appear behind the text, I have tried switching it around but it always break in weird ways, the shadow is either on top or totally messed up, here is a JS Fiddle with my exact code: https://jsfiddle.net/2azp5z36/2/
As you see the problem is that the shadow is in front of the text instead of behind the text.

If you have a better suggestion than my current method I'm interested, as long as the end result look the same (except for the placement of the shadow, obviously),
I only have 1 requirement: the code for the solution must only use: HTML, CSS and/or JavaScript (preferably HTML5 & CSS3).

h1.CV:before {
  /*text-align: center;*/
  background: none;
  content: attr(data-text);
  /*left: 0;*/
  position: absolute;
  text-shadow: 5px 5px 2px rgba(0, 0, 0, 0.75); /*X,Y,BlurRadius,Color*/
  top: 0;
  z-index: -1;
}

h1.CV {
  /* http://jsfiddle.net/2GgqR/258/ */
  text-align: center;
  font-size: 10em;
  background-image: -webkit-linear-gradient(red, orange, yellow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position:relative;
  z-index: 0;
}

<h1 class="CV" data-text="CV">CV</h1>

I think it is because of your `background-image: -webkit-linear-gradient(red, orange, yellow);`. It may send the gradient to the back. I don't know how to solve it though. — Sank6, May 01 '17 at 15:58
This may give you a head start http://stackoverflow.com/questions/3802218/how-do-i-combined-css-text-shadow-and-background-image-webkit-gradient — Stephen C, May 01 '17 at 16:00
I think the same, but when I switch it, it becomes a black text with black shadow, I can't see if it fixes it or not because it's black on black, and even when I add the color gradient code to it it's still black. — Sebastian Norr, May 01 '17 at 16:02
@StephenC, Thanks! the answer to that question is the solution to my problem! How should I go about marking this tread as solved? Should I post a "special thanks" answer and include the answer from the other thread? Or do you want to make a comment and I mark it as the solution? — Sebastian Norr, May 01 '17 at 17:02

score 3 · Answer 1 · answered May 01 '17 at 16:01

3

It's because you're setting the z-index of the h1. Just leave it as z-index:auto and the negative z-index should work as intended. Note that based on the properties you're using, this effect will only work in a few browsers.

h1.CV:before {
  /*text-align: center;*/
  background: none;
  content: attr(data-text);
  /*left: 0;*/
  position: absolute;
  text-shadow: 5px 5px 2px rgba(0, 0, 0, 0.75); /*X,Y,BlurRadius,Color*/
  top: 0;
  z-index: -1;
}

h1.CV {
  /* http://jsfiddle.net/2GgqR/258/ */
  text-align: center;
  font-size: 10em;
  background-image: -webkit-linear-gradient(red, orange, yellow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position:relative;
  z-index: auto;
}

<h1 class="CV" data-text="CV">CV</h1>

answered May 01 '17 at 16:01

Joseph Marikle

76,418
17
112
129

Much easier way of doing it than mine. – Sank6 May 01 '17 at 16:04
Nice solution, but do you have any suggestions to what I should use instead that will work on more browsers? – Sebastian Norr May 01 '17 at 16:13
@SebastianNorr Unfortunately, the issue is with `-webkit-background-clip`. Clipping to text [isn't really well supported](https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip#Browser_compatibility). You could use an image instead or an SVG. – Joseph Marikle May 01 '17 at 16:17
@SebastianNorr Something like this: http://stackoverflow.com/questions/10846504/text-with-image-background-in-svg-or-css#10853878 – Joseph Marikle May 01 '17 at 16:19
@Joseph Marikle SVG might work, but I can't include other files like a background.jpg or something, I need to define the graphics in the code. – Sebastian Norr May 01 '17 at 16:38
@SebastianNorr SVG supports gradients. Also, if you absolutely have to you can inline an image using base64 encoding. It's basically encoding a file as base64 (alphanumeric characters with a few extra special characters) rather than as binary. It's not as efficient, so your file will be a little larger, but by storing the image data as text, it can be included in a CSS, HTML, JS, etc. file. – Joseph Marikle May 01 '17 at 18:04

score 0 · Answer 2 · answered May 01 '17 at 16:00

0

You're setting the text color to be transparent through -webkit-text-fill-color so that the background image can be used as the fill. The 'stacking order' means that the text itself is above anything in the background. The text-shadow is a property of the text, so it will also be above the background. I don't think this approach will work.

You'd probably need at least 1 more HTML element to make this work— would that be an acceptable solution?

answered May 01 '17 at 16:00

Nachiket Kumar

1
1

How do you mean with another HTML element? like the solution from Sankarsh Makam above? – Sebastian Norr May 01 '17 at 16:40
Yes, using a 2nd element, in his case he used a 2nd `h1` which depending on context might not be ideal (for example, SEO implications). – Nachiket Kumar May 01 '17 at 17:04

score 0 · Answer 3 · answered May 01 '17 at 16:04

Ok so, I hope this is what you wanted. I've tried to do it using 2 overlapping <h1> tags. Here is the JS Fiddle. Here is the code:

h1.CV:before {
  /*text-align: center;*/
  background: none;
  content: attr(data-text);
  /*left: 0;*/
  position: absolute;
  top: 0;
  z-index: -1;
}

h1.CV {
  /* http://jsfiddle.net/2GgqR/258/ */
  text-align: center;
  font-size: 10em;
  background-image: -webkit-linear-gradient(red, orange, yellow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: absolute;
  z-index: 0;
  top: 20px;
}



h1.CV2:before {
  /*text-align: center;*/
  background: none;
  content: attr(data-text);
  /*left: 0;*/
  position: absolute;
  text-shadow: 5px 5px 2px rgba(0, 0, 0, 0.75); /*X,Y,BlurRadius,Color*/
  top: 0;
  z-index: -1;
}

h1.CV2 {
  /* http://jsfiddle.net/2GgqR/258/ */
  text-align: center;
  font-size: 10em;
  background-image: -webkit-linear-gradient(red, orange, yellow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: absolute;
  z-index: 0;
  top: 20px;
}

<h1 class="CV2" data-text="CV">CV</h1>
<h1 class="CV" data-text="CV">CV</h1>

Aha, so you are just overwriting the shadow with another layer of gradient text? smart. — Sebastian Norr, May 01 '17 at 16:30
I have less than 15 reputation so my vote is "recorded but hidden" and I would prefer to solve the problem than bypass it. — Sebastian Norr, May 01 '17 at 16:44

score 0 · Answer 4 · edited May 23 '17 at 11:46

Thanks everyone for your suggestions, they have been very helpful!

The final solution that I will use comes from: Michael
in this thread: How do I combined CSS text-shadow and "background-image: -webkit-gradient"
And special thanks to: Stephen C
For pointing that tread out for me.

Additional thanks to: Joseph Marikle & Sankarsh Makam
For interesting working code solutions.

The final solution that I will use comes from Michael above and looks like this:
https://jsfiddle.net/2azp5z36/6/

h1 {
    position: relative;
    font-size: 100px;
    text-align: center;
}

h1 div {
    background-image: -webkit-gradient(linear, left top, left bottom, from(teal), to(black));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: absolute; 
    width: 100%;
}
h1:after {
    text-shadow: 5px 5px 2px #000000;
    color: transparent;
}

.gradient-shadow:after {
    content: attr(title); /* Pulls the text from the 'title' attribute to make the shadow */
}

<h1 class="gradient-shadow" title="Hello World">
  <div>Hello World</div>
</h1>

css switch shadow to the back of text

4 Answers4