@Dealaxer

Как создать мультиградиент с помощью CSS?

Итак, гурычи!

Возможно ли создание мультиградента в одном блоке div?
То есть, имеем блок , и следует прописать CSS в виде разных градиентов и разных высот этих градиентов в данном блоке без побочных плагинов и других тегов!
5afb120869012517550418.jpegФон из градиентов в одном блоке

Все что видел, это один градиент на один блок. Можно конечно нарисовать картинку с градиентами, и потом вставить как фон, но не хотелось бы прибегать к методам 90-00х.

Всем зачет!
  • Вопрос задан
  • 131 просмотр
Реклама
Реклама
Решения вопроса 1
Пригласить эксперта
Ответы на вопрос 4
  • @forspamonly2
    именно такую конфигурацию, как у вас, градиентами на одном элементе сделать не получится.

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

    с другой стороны, если конкретный рисунок не догма (а он, прямо скажем, не шедевр), можно сделать похожий с горизонтальным градиентом в одну сторону и вертикальным поверх. примерно так:

    https://codepen.io/anon/pen/bMxvmV

    если постараетесь подобрать цвета, вполне может получиться довольно похоже на ваш рисунок.
    Ответ написан
  • Указывайте более 2х цветов в объявлении градиента
    Как пример - linear-gradient(to bottom, #39ff08 20%, #ffeb00 40%, #f50000 80%, #000);
    Лучше всего применение градиента описано по ссылке htmlbook.ru/CSS3-na-primerakh/lineinyi-gradient , там же пример узора background при помощи градиента.

    Upd: написал позднее Дмитрия Гончарова и увидел это опосля.
    Последую его примеру и приложу ещё одну ссылку на автоматическое создание градиента, но, как по мне, более удобный - https://www.css-gradient.com
    Ответ написан
  • @Froggyweb
    написать градиенты через запятую, например так
    background: 
        linear-gradient(to top, transparent, #b1b1b1 100%),
        gray repeating-linear-gradient(45deg, transparent, transparent 35px,
        rgba(255, 255, 255, 0.5) 35px, rgba(255, 255, 255, 0.5) 70px);
    Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Реклама