-2

Фото

Ребят, подскажите, как сделать такую так сказать выпуклость разделов? Там где новости , знакомства.

И как чтоб цвет находился внизу блока? То есть не на весь блок, а как-бы распыление шло.

4
  • там не выпуклость, а фоном - картинка с размазанным по вертикали цветом
    – user176262
    17 июн 2016 в 17:19
  • А где эту картинку можно найти?
    – mnweb
    17 июн 2016 в 17:21
  • 1
    jqueryui.com/themeroller
    – user176262
    17 июн 2016 в 17:24
  • как по мне это не очень красиво...Почитай про псевдо елемент hover.Мне кажеться он идеальный для меню и всего такого.
    – darkwoolf
    18 июн 2016 в 12:31

2 ответа 2

2

Такой эффект получается с помощью вертикального градиента. Вот пример:

.line {
    position: relative;
    padding: 10px;
    background: -webkit-linear-gradient(#cfe7fa 0%, #6393c1 100%);
    background: -moz-linear-gradient(#cfe7fa 0%, #6393c1 100%);
    background: -o-linear-gradient(#cfe7fa 0%, #6393c1 100%);
    background: linear-gradient(#cfe7fa 0%, #6393c1 100%);
}
<div class="line">
    123
</div>
<div class="line">
    123
</div>
<div class="line">
    123
</div>
<div class="line">
    123
</div>

0

.div {
  height: 200px;
  position: relative;
  width: 100%;
  border: 1px solid black;
}
.div:after {
  content: '';
  height: 30px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background: -webkit-linear-gradient(#cfe7fa 0%, #6393c1 100%);
  background: -moz-linear-gradient(#cfe7fa 0%, #6393c1 100%);
  background: -o-linear-gradient(#cfe7fa 0%, #6393c1 100%);
  background: linear-gradient(#cfe7fa 0%, #6393c1 100%);
}
<div class="div">

</div>

Это если нужно, чтоб фон был не на всю ширину блока. Если на этом фоне ещё должен быть контент то можно оформить отдельным блоком

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.