Forums

This topic contains 2 replies, has 2 voices, and was last updated by  Paulie_D 11 months, 1 week ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #266635

    AzureSkeith
    Participant

    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.

    #266637

    Paulie_D
    Moderator
    body > article h1 
    
    

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

    #266638

    Paulie_D
    Moderator

    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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star