Creating an overlapping text effect using CSS

Hi campers.

I’m currently working on the first of the Responsive Web Design certification projects. I’m wanting to be a little fancy with how I design the tribute page, and I’m trying to figure out the best way to achieve my desired effect.

I’m looking for an overlapping effect similar to the z-index example from the course:

z-index

I’m wanting to do that, but with my H1 element.

How should I go about doing this? I was going to set three H1 elements and give them different z-index values and change their position, but figured I would have two problems:

  1. that’s a poor solution given how screen readers work

  2. I’m not entirely sure which position value to use, relative maybe? but to what? each subsequent H1 element or the margins of the page?

What do you all think?

I’d consider wrapping them up in an enclosing element (div / article) and then setting the H1 position to absolute within that. Also, you may be interested in the CSS text-shadow effect. Happy Coding :slight_smile:

2 Likes

I don’t think text-shadow is necessarily what I want. Unless I’m just not understanding everything text-shadow can do?

The example I provided isn’t an approximation more suited to a text-shadow effect. I want literally the offset effect you see with those two boxes, repeated twice, instead of repeated one time like in the example.

I agree. Wrapping the h1 inside a div/section probably it’s the easiest option and consider the correct use of position relative/absolute. :slight_smile:

1 Like

If the words you want to display are the same, you can create two text-shadows for the same element using a comma to separate them. Like this:

text-shadow: 5px 5px green, 8px 8px red;
1 Like

Okay. I will try that out and if I have any other questions I will ask after I’ve tried a few ways. Thanks for all of your help guys.

Also, yes, I agree the div solution is obvious @francisco_1994 and I should have thought of that before asking :grin:

1 Like