Trying to get drop shadow on an image and text shadow on a single h1

[AzureSkeith]

I’ll start with the text. here is my code.

body > article h1 {
color: rgb(211, 211, 211);
text-shadow: 0px 0px 5px black;
}

I’m trying to get both the color and the shadow to apply to the first h1 which is located in the article. When I only use h1{} it applies just the shadow to the first h1 and both to all the others.

as for the drop shadow here is my code.

#mportrait {
filter: drop-shadow(-15px 0px 5px rgba(51, 51, 51, 0.9));
transform: scaleX(-1);
filter: grayscale(0.7);
opacity: 0.6;
}

Everything but the drop shadow has taken effect on the image.

https://codepen.io/anon/pen/bLqPLM

[Paulie_D]

body > article h1 

This won’t work because the article is not an immediate descendant of the body (>)…remove that and it works.

[Paulie_D]

As for this

#mportrait { 
    filter: drop-shadow(-15px 0px 5px rgba(51, 51, 51, 0.9));
    transform: scaleX(-1);
    filter: grayscale(0.7);
    opacity: 0.6;
}

The second filter is overriding the first…you’ll need to apply them as a single combined property..but remember that order is important…but perhaps not in this case.

#mportrait { 
    filter: grayscale(0.7) drop-shadow(-15px 0px 5px rgba(51, 51, 51, 0.9)) ;
    transform: scaleX(-1);
    opacity: 0.6;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/filter

[Author]

Posts