Shadow effect in box interior

Question

Shadow effect in box interior

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

Hello! I was trying to make a kind of "inner shadow" on my div, but I can not. Anybody know?

The style is similar to the news box's in the initial section of techtudo ( link )

html css

asked by anonymous 16.02.2018 / 15:29

2 answers

How to target the google bookmark for a page? How to rename a folder added to the current date to the name

score 1 · Answer 1

The solution is quite simple and can be observed by inspecting the reference element. It is a background in pseudo-element :after . Here is the code, 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>

score 0 · Answer 2

You can do this with 3 lines of CSS ... I do not 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 .

See the example. You will have two background , one with the image and another with the "degrade" of the shadow on top.

.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>