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:
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:
that’s a poor solution given how screen readers work
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?
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
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.