Trying to target images with a CSS shadow

  • Resolved tuxmob

    (@tuxmob)


    3 years ago

    Hi, I am trying to have a convenient way to apply drop shadows to my images so they stand out better from my backgrounds. I found a great online generator and here is what it outputs:

    box-shadow:
  0px 0px 4.9px rgba(0, 0, 0, 0.155),
  0px 0px 11.8px rgba(0, 0, 0, 0.222),
  0px 0px 22.3px rgba(0, 0, 0, 0.275),
  0px 0px 39.8px rgba(0, 0, 0, 0.328),
  0px 0px 74.4px rgba(0, 0, 0, 0.395),
  0px 0px 178px rgba(0, 0, 0, 0.55)
;

    I have the Neve child theme installed and activated but I don’t know what I need to do to have this be, maybe a class? I am guessing, not sure how to add a class.. that could be applied to images easily from within the wordpress editor once that class had been added.

    • This topic was modified 3 years ago by tuxmob.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Meena Kumari

    (@poojafornet)

    Hi, tuxmob

    You can generate box shadow using an online tool. It will lets you quickly and easily generate CSS box-shadow declarations for any element.

    https://www.cssgenerator.me/box-shadow-css-generator.html

    luciamarinescu

    (@luciamarinescu)

    Hi @tuxmob,

    Thanks for choosing Neve!

    This depends on which images you want to apply the shadow, for example on which page or section they can be found, because their classes differ depending on that, so they have to be targeted in different ways. You could try to add the code below in the Additional CSS section within the Customizer and check if it helps achieve the style you want.

    .container img {
  box-shadow:
  0px 0px 4.9px rgba(0, 0, 0, 0.155),
  0px 0px 11.8px rgba(0, 0, 0, 0.222),
  0px 0px 22.3px rgba(0, 0, 0, 0.275),
  0px 0px 39.8px rgba(0, 0, 0, 0.328),
  0px 0px 74.4px rgba(0, 0, 0, 0.395),
  0px 0px 178px rgba(0, 0, 0, 0.55)
;
}

    If this doesn’t help achieve the desired style, please provide us the URL to a page where you want the shadow to be applied.

    Have a nice day!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Trying to target images with a CSS shadow’ is closed to new replies.