"Shadow" effect inside the box

Asked

Viewed 400 times

1

Hello! I was trying to make a kind of "inner shadow" on a div of mine, but I can’t. Does anyone know?

The style is similar to the news boxes in the initial section of the keyboard (http://www.techtudo.com.br/)

html css

2 answers

1

The solution is quite simple and can be observed by inspecting the reference element. It is a background in the pseudo-element :after. Follow the code, already with an example image:

.exemplo {
  position: relative;
  width: 300px;
  height: 300px;
}

.exemplo:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    background: linear-gradient(0deg,rgba(0,0,0,.6),rgba(0,0,0,.2) 40%,rgba(0,0,0,.2) 80%,rgba(0,0,0,.4));
    z-index: 1;
}

img {
  width: 100%;
  height: 100%;
}
<div class="exemplo">
 <img src="https://i.stack.imgur.com/ZBWF6.jpg?s=300&g=1">
</div>

  • I have a problem inserting that code. Usually, the image is inside a link, but when inserting the "after" it is no longer "clickable" since the gradient layer is on top. How can I solve?

  • The link should come from outside the image with gradient. You could show your code?

1

You solve this with 3 lines of CSS... I don’t know what kind of use you need, but the solution can be even simpler, using the image and shadow in the same element as background.

Take the example. You will have two background, one with the image and the other with the "degrade" of the shadow above. 

.sombra {
    width: 300px;
    height: 300px;
    background-image: linear-gradient(0deg,rgba(0,0,0,.9),rgba(0,0,0,0) 40%,rgba(0,0,0,0) 80%,rgba(0,0,0,.9)), url(http://placecage.com/300/300);
}
<div class="sombra"></div>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.