TransWikia.com

Цвет постепенно исчезает с обеих сторон div

Stack Overflow на русском Asked on November 24, 2021

Мне нужно создать полосу с исчезновением цвета на каждой стороне div, как показано на рисунке ниже, используя CSS.

введите сюда описание изображения

Как это сделать?

2 Answers

Если не планируется поддержка старых браузеров, то linear-gradient - лучшее решение:

body {
  background-image: url('http://i.imgur.com/hPLqUtN.jpg');
  background-size: cover;
}

div {
  margin: 20px;
  height: 100px;
  padding: 5px 100px;
  background-image: linear-gradient(90deg, transparent, #D4D4CC 100px, #D4D4CC calc(100% - 100px), transparent);
}
<div></div>

Answered by UModeL on November 24, 2021

Над плоскостью

Чтобы сделать затухающий цвет с обеих сторон, вы можете использовать два inset box-shadows с положительным размытием и отрицательным радиусом распространения:

DEMO

body {
  background: #D4D4CC;
}
div {
  height: 100px;
  background: #fff;
  box-shadow: inset 100px 0px 100px -50px #D4D4CC, 
              inset -100px 0px 100px -50px #D4D4CC;
}
<div></div>

Над изображением:

Если вам нужно растушевать обе стороны над изображением или не простым цветом, вы можете использовать этот подход с псевдоэлементом и box-shadow:

Output :

введите сюда описание изображения

div{
    height:100px;
    overflow:hidden;
    padding:0 100px;
    margin:20px;
}
div:before{
    content:'';
    display:block;
    height:100%;
    background:#D4D4CC;
    box-shadow: 0px 0px 80px 50px #D4D4CC;
}

body{
    background: url('http://i.imgur.com/hPLqUtN.jpg');
    background-size:cover;
}
<div></div>

Обратите внимание, что box-shadows поддерживаются начиная с IE9

Answered by Alexandr_TT on November 24, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP