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

Question

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

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

UModeL · Answer

Если не планируется поддержка старых браузеров, то 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>

Alexandr_TT · Answer

Над плоскостью Чтобы сделать затухающий цвет с обеих сторон, вы можете использовать два 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; }

Над изображением: Если вам нужно растушевать обе стороны над изображением или не простым цветом, вы можете использовать этот подход с псевдоэлементом и 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; }

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

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

2 Answers

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

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

Add your own answers!

Ask a Question