Search code examples
shadowcssinsets

Box inset shadow with deg.. (see example)

While I was working on some picture layouts in css I had an idea for a box shadow over my images. The problem is that nowhere on the internet, or out of my own knowledge I can find the answer to my question.

Here you can see an iPhone with the effect that I want to get with CSS3 box shadow inset. http://en.wikipedia.org/wiki/IPhone_5

Does anyone have any idea how to make this? Tips are welcome too! Thanks in advance.

Solution

  • The trick is to set an overlay with a gradient image in a pseudo element.

    This overlay can be rotated to provide the sharp cutoff, and the parent overflow keeps it inside the rectangle

    #test {
  height: 390px;
  width: 200px;
  background-color: blue;
  position: absolute; 
  overflow: hidden;
}


#test:after {
  content: "";
  position: absolute; 
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  -webkit-transform: rotate(-28deg) translateX(75%) translateY(-10%);
  -moz-transform: rotate(-28deg) translateX(75%) translateY(-10%);
  transform: rotate(-28deg) translateX(75%) translateY(-10%);
  background-image: -ms-linear-gradient(240deg, rgba(250,250,250,0.85) 50%, transparent);
  background-image: -moz-linear-gradient(240deg, rgba(250,250,250,0.85) 50%, transparent);
  background-image: -webkit-linear-gradient(240deg, rgba(250,250,250,0.85) 50%, transparent);
   background-image: linear-gradient(208deg, rgba(250,250,250,0.85) 50%, transparent); 
}

    demo