Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS box-shadow: Inner Shadow on the right

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #37736
    djpic
    Participant

    I have been trying to search and find a way to make a shadow and only have it on the right side of the box. How would you go about doing this with box-shadow or is it even possible?

    Thanks.

    #101593

    The trick is to use a negative spread value: http://jsfiddle.net/joshnh/QYBtT/

    #101595
    djpic
    Participant

    That worked great! Could you maybe point me in the right direction on why that worked? I thought it could be done but was not sure how to visualize the shadows.

    #101596

    Here is a breakdown: http://jsfiddle.net/joshnh/gs52d/

    Feel free to play around with the values so that you understand what they do.

    #101600
    djpic
    Participant

    Awesome! Thanks. I do have another question with the box shadow. How can I make it so it only shows the top and bottom shadows? I have this which kind of works but doesn’t still has some ‘bleed’ on the left and right:

    box-shadow: 0px 5px 5px 0 #333, 0px -5px 5px 0 #333;
    #101601
    djpic
    Participant

    I actually just lowered the amount of ‘bleed’ on the right by using:

    box-shadow: -3px 5px 5px -3px #333, -3px -5px 5px -3px #333;

    But still has some on the left.

    #101602

    Make sure to increase the offset to account for the negative spread: http://jsfiddle.net/joshnh/AtM5U/

    #101603
    djpic
    Participant

    Oh ok good, I am on the right path then, just need to play with it more.

    Thanks!

    #101604

    No worries!

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.