Как сделать подобный градиент с тенью на css?

Question

[Undrooleek]

Вот пример элемента списка.
Картинка
Не получается сделать градиентное затемнение или затухание по краям блока.
Есть идеи?

Вот css того, что есть

color: rgb(81, 134, 172);
    display: inline-block;
    text-decoration: none;
    outline: none;
    vertical-align: super;
    border-top: 2px solid rgb(81, 134, 172);
    border-bottom: 2px solid rgb(81, 134, 172);
    padding-top: 15px;
    padding-bottom: 15px;
    -webkit-box-shadow: inset 0px 0px 11px 3px rgb(86, 141, 180)

Answer 1

[Виталий Киренков]

#block {
	width: 200px; height: 50px; background-color: #fff; text-align: center; line-height: 50px; overflow: hidden; position: relative;

	&::before {
		display: block; content: ""; position: absolute; bottom: -12px; right: 5px; left: 5px; height: 1px;
		-webkit-box-shadow: 0 -10px 5px blue;
		   -moz-box-shadow: 0 -10px 5px blue;
				box-shadow: 0 -10px 5px blue;
	}
	&::after {
		display: block; content: ""; position: absolute; top: -12px; right: 5px; left: 5px; height: 1px;
		-webkit-box-shadow: 0 10px 5px blue;
		   -moz-box-shadow: 0 10px 5px blue;
				box-shadow: 0 10px 5px blue;
	}
}

Это очень сырой и на скорую руку вариант. Но задумка думаю должна быть понятной.

Comments

[Undrooleek]

Это при помощи scss?

[Виталий Киренков]

Эм... Less... но это не важно...

#block { width: 200px; height: 50px; background-colo ....}
#block::before { isplay: block; content: ...}
#block::after { isplay: block; content: ...}

Так это выглядит для просто ксс.

[Undrooleek]

пасиб, я понял вашу мысль) щас буду двигаться в этой области)

Answer 2

[Виталий Киренков]

Вы бы лучше картинку показали того, что нужно получить..

Comments

[Undrooleek]

вот, уже есть. сорри

Answer 3

[wdtime_ru]

Вся инфа с примерами, на тему css box-shadow