Navigation
Archive / border, inner and outer shadow for image boxes
This is archived content. Visit our new forum.
  • Author
    Posts
  • May 10, 2014 at 10:54 am #42904

    Mark M
    Participant

    I have been trying to create a border, inner and outer shadow for image boxes, with the shadow appearing over the rounded style image.

    I have added this inline CSS;

    border: 4px solid #bbbbbb; box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.75) , inset 0px 0px 10px 0px rgba(50, 50, 50, 0.75);

    Problems I am getting are that the inner shadow doesn’t appear, I am guessing it is under the image. Also can I make the border have rounded corners like the image box style has already.

    May 11, 2014 at 5:04 pm #43263

    Rad
    Moderator

    Hi Mark,

    Thank you for writing in!

    I just tried your css directly on image and it works. Could you provide a url address?

    Also, to add rounder corner, you could just add :

    -webkit-border-radius: 10px; border-radius: 10px;

    Note, it should be directly applied to image.

    Hope this helps.

    May 20, 2014 at 4:48 am #46356

    Mark M
    Participant

    Thanks for the help I have things working as they should now.

    Could you tell me the RGB value which X uses for the shadows, so I can match my additions.

    May 20, 2014 at 8:28 pm #46631

    Support
    Member

    Hi Mark,

    It depends on the Stack you are using. Could you share us the link to your site?

    Thanks!

    May 21, 2014 at 5:15 am #46786

    Mark M
    Participant

    I am using the Integrity stack, sorry can’t share the site currently as it a shop and is restricted currently. I am just in the process of transferring it over to another server, but can make you a user so you will be able to see it via wp login when transferred.

    May 21, 2014 at 7:49 pm #47096

    Rad
    Moderator

    Hi Mark,

    It’s 

    -webkit-box-shadow: -2px 0 4px rgba(0, 0, 0, 0.1);
box-shadow: -2px 0 4px rgba(0, 0, 0, 0.1);

    You could send your login in private just in case.

    Thank you.

    May 22, 2014 at 2:28 am #47235

    Mark M
    Participant

    Hi,

    Thanks for that. When you get to my next message you will see that I had done exactly that.

    Regards,

    Mark

    May 22, 2014 at 4:10 pm #47492

    Alexander
    Keymaster

    Hi Mark,

    What specific images are you referring to? Can you please reference them in this topic? I checked your site, and I’m not sure exactly which ones we’re talking about. The selectors needed may be different depending on the images.

    You can share URLs in a private reply

    May 22, 2014 at 5:17 pm #47517

    Mark M
    Participant

    I have it all sorted now thanks due to the information you gave me above. Thanks.

    May 23, 2014 at 5:12 am #47717

    Support
    Member

    Glad you sorted it out Mark.

    Thanks!

  • Author
    Posts