Programming: Layering Text Shadow and Fixing Text Shadow Covering

[EileenCruz]

I'm working on a Wordpress site and wanted to have the post title centered on the Featured Image, to have a layered text shadow. The problem I ran into is that when the post title wraps, the text shadow covers the text in the line above it.

Centering the text was a matter of overriding this particular theme's CSS. Every theme is different and quirky in its own way. But, you should be able to figure it out by poking through the site's code.

The CSS for the layered text shadow required a little more research because of the shadow covering text issue. Also, sometimes text is still hard to see over an image. So, I wanted to find out if there was a way to do a stroke around the text. There is, but there's no way to have it set to the outside. So, it send up looking janky. However, it's still possible to fake it by setting the paint order.

.loops-wrapper.overlay .post-image+.post-content a {
    color: #fff;
    -webkit-text-stroke-width: .2vw;
    -webkit-text-stroke-color: #00000070;
    paint-order: stroke fill;
    text-shadow:     0 0 10px #0900ac,
                    0 0 20px #0900ac,
                    0 0 42px #0900ac,
                    0 0 82px #0900ac,
                    0 0 92px #0900ac; }

To deal with the text shadow covering the previous lines in the post title, I used some jQuery to add the post title as a data attribute to the post title's link. And then I used CSS to add it AFTER the link element and then to format it. For each post title that is within a "'.loops-wrapper.overlay" container, it'll grab the text within and then add it as a data attribute to the link.

<script>
jQuery(document).ready(function(){
jQuery('.loops-wrapper.overlay .post-title a').each(function(){
var newTextstr = jQuery(this).first().text();
  jQuery(this).attr('data-content', newTextstr);   
});
});
</script>

Then, the following CSS inserts the text from the data attribute and formats it.

.loops-wrapper.overlay .post-image+.post-content a {
&:after {
    content: attr(data-content);
    position: absolute;
    top: 0; left: 0;
    color: #fff;
    text-shadow: none;
    padding: 4% 5%; } }

Here's the final result:

Remember that when you're working with wordpress and different themes that you're probably going to have to find additional workarounds that are unique to your theme.

 

[Jackbit]

It sounds like you're almost there with your design! For the text shadow issue, it seems like the problem is with the positioning of the title and the way the shadow is applied. One potential solution is to use z-index to layer the title above rickycasino-au the shadow. You could also try adding a slight padding or margin to the title to give it more space and prevent the shadow from overlapping. Additionally, adjusting the line-height property might help with the wrapping issue. You're right that every theme has its quirks, but tweaking the CSS further should solve the problem.