Photoshop Question posted in
The official user guide can be found here.

box-shadow glitch when interacting – Photoshop

I have a vignette on my stock image created with box-shadow. It looks good, but sometimes when I press button that is on top of that vignette or when I select text then it dissapears only in the region of that selection which looks bad.

<div>
    <div class="stock-image flex-container">
      <div class="column">
        <div class="row column">
          <div>
            <h1 class="welcome">Connect with people</h1>
          </div>
         </div>
        </div>
     </div>
</div>

Css:

.stock-image {
    width: 100%;
    height: 32em;
    background: linear-gradient(90deg, rgba(22, 156, 202,0.65), rgba(22, 156, 202,0.45)),#00A7E1 url(../../assets/img/home/stock-image.jpg) no-repeat center center;
    background-size: cover;
    box-shadow: inset 0 0 30em 0.7em #000;
}

Sometimes when I select Connect with people it removes shadow inside the selected area and after deselecting it, the shadow is still missing.

Also I cannot just create vignette in photoshop, because the image is visible depending on device’s screen size that user uses, so often only part of the image is visible.

EDIT:
As a workaround I used two linear-gradients: 

linear-gradient(to right, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.15) 15%, rgba(0,0,0,0.0) 35%, rgba(0,0,0,0.0) 65%, rgba(0,0,0,0.15) 85%, rgba(0,0,0,0.75) 100%)
linear-gradient(to bottom, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.15) 15%, rgba(0,0,0,0.0) 35%, rgba(0,0,0,0.0) 65%, rgba(0,0,0,0.15) 85%, rgba(0,0,0,0.75) 100%)

It doesn’t look as good as I would want, but I guess it’s just a matter of tweeking parameters.

Tags:

2

Answers


  1. 0

    I don’t have a solution for your problem but it seems to be linked with a known issue of chrome : https://code.google.com/p/chromium/issues/detail?id=442335
    Also quoted in this post :
    border-radius with box-shadow inset pixelized / rugged

    So the design your using is considered as a rendering bug.

    Here you can compare the render of your code with different browser:
    chrome : http://imgur.com/Bu9b0hB
    firefox : http://imgur.com/ChJclHz
    The firefox one is considered ‘normal’.

    Also your issue with the shadow and selections doesn’t seems to appear on firefox.

    To get an extendible image you might want to use 9-patch images, which is a technology used notably on android. I don’t really know much about it…

    Login or Signup to reply.
  2. 0

    You might try addressing Chrome directly in your CSS via -webkit-box-shadow – e.g.:

    -webkit-box-shadow: 4px 4px 4px 4px rgba(22,156,202,0.65);
box-shadow: 4px 4px 4px 4px rgba(22,156,202,0.65);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search