Блог

Я пытаюсь добиться следующего эффекта тени с помощью CSS:

Я попытался оформить <hr> элемент линейным градиентом в качестве фонового изображения в качестве альтернативы использованию box-shadow правила для изображения, однако это не создает желаемого эффекта изогнутой тени.

Возможно ли то, что я пытаюсь сделать, только с помощью CSS?

Вот мой текущий код:

HTML

 <section class="section-categories section-fruits">
    <div class="row">
        <figure class="categories">
            <img src="res/img/category/fruits.png" alt="Offers" class="categories__fruits">
        </figure>
        <div class="categories__explore">
            <p>Fruits amp; Vegetables</p>
            <p>A variety of fresh fresh and vegetables</p>
            <button>Explore fruit and veg</button>
        </div>
    </div>
</section>
  

CSS

 /* Using Box Shadow, but didn't get the desired effect */    
.section-categories{
    height: 250px;
    margin: 20px 0px;
    box-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}
  

Одним из чисто CSS-подходов может быть использование radial-gradient функции для псевдоэлемента следующим образом:

 /* The shadow CSS class element */
.shadow {
  position:relative;
}

/* The CSS peseudo element that achieves the shadow effect */
.shadow:after {
  content:'';
  display:block;
  position:absolute;
  bottom:-1rem;
  /* The main idea with this technique is to use a radial gradient to simulate the 
  desired effect */
  background:radial-gradient(farthest-corner at 50% 0px, grey 0%, transparent 50%);
  width:100%;
  height:1rem;
  
}

/* The styling below is not part of the technique and is included to support the snippet */
div {
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
}

div button {
  background:red;
  
}  

 <div class="shadow">
<img src="https://i.pinimg.com/originals/2b/1c/f5/2b1cf5525873467315eaa0c07394d302.jpg" height="100px" />
<button>Explore</button>
</div>  

Идея здесь в том, чтобы определить псевдоэлемент, :after который фактически отбрасывает тень (т.Е. элемент <div> из приведенного выше фрагмента), который содержит radial-gradient . Для имитации желаемого эффекта radial-gradient окрашивается темным внутренним и прозрачным внешним, при этом центр этого градиента смещается к верхнему краю псевдоэлемента с помощью farthest-corner at 50% 0px параметров.

Надеюсь, это поможет