1. Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела
    Скрыть объявление

[Помогите] Мягкий горизонтальный градиент

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем AlexGood, 15 окт 2018.

  1. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    Как добиться вот такого эффекта: https://prnt.sc/l69m9j
    Пробовал онлайн генераторами, вручную, но именно такой результат не получается.
    Максимум что получилось:

    Код:
    <div class="box"></div>

.box{
      width: 250px;
      margin: auto;
      background: #eee;

      border: 100px solid transparent;

      -moz-border-image: -moz-linear-gradient(left, #000 0%, #96874b 50%, #000 100%);
      -webkit-border-image: -webkit-linear-gradient(left, #000 0%, #96874b 50%, #000 100%);
      border-image: linear-gradient(to right, #000 0%, #96874b 50%, #000 100%);

      border-image-slice: 1;
    }
     
    AlexGood, 15 окт 2018
    #1
  2. pasha-b

    pasha-b

    Регистрация:
    9 янв 2013
    Сообщения:
    190
    Симпатии:
    109
    Вот статья по смешиванию слоев, подробно с примерами описано, как градиенты накладывать, скорее всего на скрине что-то подобное, радиальный градиент наложен на фон.
     
    pasha-b, 15 окт 2018
    #2
    AlexGood нравится это.
  3. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Что-то не то вы делали. Вам же радиальный нужен:

    Код:
    background: #3e2d23;
background: -moz-radial-gradient(center, ellipse cover, #3e2d23 0%, #3e2d23 32%, #211e2a 100%);
background: -webkit-radial-gradient(center, ellipse cover, #3e2d23 0%,#3e2d23 32%,#211e2a 100%);
background: radial-gradient(ellipse at center, #3e2d23 0%,#3e2d23 32%,#211e2a 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e2d23', endColorstr='#211e2a',GradientType=1 );
    Сгенерировано здесь: http://www.colorzilla.com/gradient-editor/
     
    Dotrox, 15 окт 2018
    #3
    AlexGood нравится это.
  4. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    AlexGood, 16 окт 2018
    #4
< При уменьшении размера браузера и разрешении <=1024 меню едет вниз | Докорректировать верстку >