Как сделать линию градиент в css

Как сделать фон из вертикальных линий через linear-gradient?

введите сюда описание изображения

Не могу разобраться с linear-gradient, как сделать подобный фон? Нужна серая линия шириной в 1px через каждые 160px, бесшовно на всю ширину и высоту. Буду благодарен за помощь.

Отслеживать
задан 3 дек 2019 в 10:54
2,216 4 4 золотых знака 26 26 серебряных знаков 67 67 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Думаю, примерно так, с толщиной линии можно поиграться третьим параметром linear-gradient (#fff 99.5%).

.block < /* Решение */ background: linear-gradient(to left, #fff 0%, #fff 99.5%, #ccc 0%); background-size: 160px 50%; /* Вспомогательный код */ height:300px; >

Отслеживать
ответ дан 3 дек 2019 в 11:10
81 1 1 бронзовый знак
Спасибо. То, что нужно!
3 дек 2019 в 11:11
а почему бы сразу в пикселях не задать толщину?)
3 дек 2019 в 11:15
Есть еще repeating-linear-gradient()
3 дек 2019 в 11:15

@StrangerintheQ сказал интересную вещь, можете просто указывать толщину линии как вариант 🙂 background: linear-gradient(to left, #fff 159px, #ccc 1px);

3 дек 2019 в 11:28

css
sass
scss

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как сделать градиенты | CSS

цвета распределяются пропорционально по всей высоте фона. Через пробел можно указать их точку расположения от границы блока. Не плавные градиенты создаются путём написания одинаковых значений для смежных тонов

можно менять направление градиента, если задать градус угла deg или задать после to ключевые слова

[ left | right ] || [ top | bottom ]

Радиальный градиент radial-gradient

радиальный градиент распространяется по окружности

состоит из двух и более оттенков

чтобы сделать градиент прозрачным или частично просвечивающим следует применить функцию RGBA. Для перевода из формата HEX в RGB можно воспользоваться этим конвертором

цвета распределяются пропорционально по всей высоте фона. Через пробел можно указать их точку отсчёта. Не плавные градиенты создаются путём написания одинаковых значений для смежных тонов

по умолчанию точкой отсчёта является середина at center center. Её можно смещать аналогично background-position. Первое значение определяет расположение по горизонтали, второе — вертикали. Указываются после предлога at в любой единице измерения, в процентах или при использовании ключевых слов

[ left | center | right ] || [ top | center | bottom ]

пощёлкайте по прямоугольнику с градиентом

по умолчанию окружность имеет вид элипса, но её можно изменить на круг
ellipse circle
потяните за правый нижний угол прямоугольника с градиентом

Синтаксис радиального градиента:

background-image: -XXX-radial-gradient(позиция, форма размер, цвет %, цвет %);

размер принимает значения closest-side (или contain), closest-corner, farthest-side, farthest-corner (или cover). background: -moz-radial-gradient(110px 30px, circle closest-side, #FFF 10%, #000 30%, #42aaff); background: -ms-radial-gradient(110px 30px, circle closest-side, #FFF 10%, #000 30%, #42aaff); background: -o-radial-gradient(110px 30px, circle closest-side, #FFF 10%, #000 30%, #42aaff); background: -webkit-radial-gradient(110px 30px, circle closest-side, #FFF 10%, #000 30%, #42aaff);

background: -moz-radial-gradient(110px 30px, circle closest-corner, #FFF 10%, #000 30%, #42aaff); background: -ms-radial-gradient(110px 30px, circle closest-corner, #FFF 10%, #000 30%, #42aaff); background: -o-radial-gradient(110px 30px, circle closest-corner, #FFF 10%, #000 30%, #42aaff); background: -webkit-radial-gradient(110px 30px, circle closest-corner, #FFF 10%, #000 30%, #42aaff);

background: -moz-radial-gradient(110px 30px, circle farthest-side, #FFF 10%, #000 30%, #42aaff); background: -ms-radial-gradient(110px 30px, circle farthest-side, #FFF 10%, #000 30%, #42aaff); background: -o-radial-gradient(110px 30px, circle farthest-side, #FFF 10%, #000 30%, #42aaff); background: -webkit-radial-gradient(110px 30px, circle farthest-side, #FFF 10%, #000 30%, #42aaff);

background: -moz-radial-gradient(110px 30px, circle farthest-corner, #FFF 10%, #000 30%, #42aaff); background: -ms-radial-gradient(110px 30px, circle farthest-corner, #FFF 10%, #000 30%, #42aaff); background: -o-radial-gradient(110px 30px, circle farthest-corner, #FFF 10%, #000 30%, #42aaff); background: -webkit-radial-gradient(110px 30px, circle farthest-corner, #FFF 10%, #000 30%, #42aaff);

Как объединить градиенты CSS

В один background-image можно внести несколько фоновых изображений (подробней).

background-color: rgb(125, 167, 22); background-image: url("http://2.bp.blogspot.com/-ucwWGxkrync/TQqQM2MIxqI/AAAAAAAABJo/241YgHBwH2Y/s72-c/Logo-Blogger.png"), -moz-linear-gradient(#FFF, #42aaff); background-image: url("http://2.bp.blogspot.com/-ucwWGxkrync/TQqQM2MIxqI/AAAAAAAABJo/241YgHBwH2Y/s72-c/Logo-Blogger.png"), -ms-linear-gradient(#FFF, #42aaff); background-image: url("http://2.bp.blogspot.com/-ucwWGxkrync/TQqQM2MIxqI/AAAAAAAABJo/241YgHBwH2Y/s72-c/Logo-Blogger.png"), -o-linear-gradient(#FFF, #42aaff); background-image: url("http://2.bp.blogspot.com/-ucwWGxkrync/TQqQM2MIxqI/AAAAAAAABJo/241YgHBwH2Y/s72-c/Logo-Blogger.png"), -webkit-linear-gradient(#FFF, #42aaff); background-repeat: no-repeat; background-position: 0% 0%, 100% 100%;

background-color: red; background-image: -moz-linear-gradient(transparent, #fff, red), -moz-radial-gradient(transparent, red, #000); background-image: -ms-linear-gradient(transparent, #fff, red), -ms-radial-gradient(transparent, red, #000); background-image: -o-linear-gradient(transparent, #fff, red), -o-radial-gradient(transparent, red, #000); background-image: -webkit-linear-gradient(transparent, #fff, red), -webkit-radial-gradient(transparent, red, #000); background-repeat: no-repeat; background-position: 0% 0%, 100% 100%;

Пример

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

background-color: #000; background-image: radial-gradient(90% 50px at 30% 50%, rgba(255,255,255,.6), rgba(0,0,0,0)), linear-gradient(rgba(0,0,0,0), rgba(255,255,255,.3) 50%, #000 50%, rgba(255,255,255,.3) calc(50% + 2px), rgba(255,255,255,.3) calc(50% + 2px), rgba(0,0,0,0));

23 комментария:

Андрей Opera 11.10:
background-image:-o-linear-gradient(top,#000,#FFF); NMitra Спасибо большое, Андрей! Добавила замечание в статью. Анонимный у вас с версткой беда, код на текст наезжает ff 17.0.1 NMitra Спасибо! Обязательно исправлю. Это получилось после того, как поменяла дизайн. Не хватает пока времени. Анонимный ахахахах на твоей иконке как будто человек со своим членом балуется NMitra Такой ассоциации ещё не было. 🙂 Это же фига Анонимный Спасибо, очень помогли! NMitra Пока не осилила статью )) Чуть-чуть осталось Анонимный Спасибо за полезную статью! 🙂 алексей кленов Помогите пожалуйста с градиентом самого текста, а не фона NMitra Только для Хрома http://css-tricks.com/snippets/css/gradient-text/
Вот пример с тенями http://jsfiddle.net/2GgqR/5/ Oleg Aqausonick Круто. Что ещё можно сказать..) Я даже попытался всё это объединить на одной своей странице. ) http://tambov-computer.ru/information-for-first-web-developers/207-how-to-make-gradient-in-background-css
ИМХО немного растянуто но всёже круто! 🙂 Спаисбо. Анонимный С градиентом удобно работать в онлайн генераторе.
http://www.germansoft.ru/lesson/online/css-generation.php Вот тут например. Есть и образцы работ.Прикольно NMitra Вы не правы. Градиенты нужно понять, там не такая уж сложная разметка. А потом можно делать такие вот штуки http://shpargalkablog.ru/2013/02/home-css.html или такие http://shpargalkablog.ru/2011/07/ugol-css.html Анонимный В IE не работает( посоветуйте что можно сделать, пожалуйста) спасибо за полезную статью, очень пригодилась) NMitra Какая версия IE у вас? Вариант — помимо градиента использовать однотонный цвет.

background-color: red;
background-image: linear-gradient(#ff0000, #ffff00);

Есть ещё @supports. С помощью него можно показать как отображать элемент на устройствах, не поддерживающих градиент. NMitra Забыла сказать, раньше вместо linear-gradient использовали изображение jpeg. phpguru Познавательно спасибо! NMitra Сама как начинаю мучить градиенты, бегу к этой статье 🙂 Scarlet Я использую http://gradientgenerator.com Он простой, но содержит все необходимые настройки. NMitra Спасибо за инструмент Анонимный После: «Синтаксис радиального градиента» — «начинаются чудеса», что в мозиле, что в IE. NMitra Спасибо за участие!

Это я статью стала переписывать, половину сделала — на другую запала не хватила 🙁 Плюс возможно будут поддерживать канонические градиенты — пока не решила нужно ли разбивать на страницы или всё в одной публикации сделать. В общем, жду вдохновения 🙂

Как сделать линию градиент в css

Градиенты представляют плавный переход от одного цвета к другому. В CSS3 имеется ряд встроенных градиентов, которые можно использовать для создания фона элемента.

Градиенты в CSS не представляют какого-то специального свойства. Они лишь создают значение, которое присваивается свойству background-image .

Линейный градиент распространяется по прямой от одного конца элемента к другому, осуществляя плавный переход от одного цвета к другому.

Для создания градиента нужно указать его начало и несколько цветов, например:

background-image: linear-gradient(left,black,white);

В данном случае началом градиента будет левый край элемента, который обозначается значением left . Цвета градиента: черный (black) и белый (white). То есть начиная с левого края элемента до правого будет плавно идти переход из черного цвета в белый.

В использовании градиентов есть один недостаток — многообразие браузеров вынуждает использовать префикс вендора:

-webkit- /* Для Google Chrome, Safari, Microsoft Edge, Opera выше 15 версии */ -moz- /* Для Mozilla Firefox */ -o- /* Для Opera старше 15 версии (Opera 12) */

Так, полноценное использование градиента будет выглядеть следующим образом:

    Стилизация таблиц в CSS3 div < width: 200px; height: 100px; background-color: #eee; background-image: linear-gradient(left,black,white); background-image: -o-linear-gradient(left,black,white); background-image: -moz-linear-gradient(left,black,white); background-image: -webkit-linear-gradient(left,black,white); >p Линейный черно-белый градиент

Линейный градиент в CSS 3

Для установки начала градиента можно использовать следующие значения: left (слева направо), right (справа налево), top (сверху вниз) или bottom (снизу вверх). Например, вертикальный градиент будет выглядеть следующим образом:

background-image: linear-gradient(bottom,black,white);

Также можно задать диагональное направление с помощью двух значений:

background-image: linear-gradient(top left,black,white);

Настройка линейного градиента в CSS 3

Кроме конкретных значений типа top или left также можно указать угол от 0 до 360, который определит направление градиента:

background-image: linear-gradient(30deg,black,white);

После величины углы указывается слово deg .

К примеру, 0deg означает, что градиент начинается в левой части и перемещается в правую часть, а при указании 45deg он начинается в нижнем левом углу и перемещается под углом 45° в верхний правый угол.

После определения начала градиента, можно указать применяемых цветов или опрные точки. Цветов не обязательно должно быть два, их может быть и больше:

background-image: linear-gradient(top, red, #ccc, blue);

Все применяемые цвета распределяются равномерно. Однако можно также указать конкретные места фона для цветовых точек. Для этого после цвета добавляется второе значение, которое и определяет положение точки.

background-image: linear-gradient(left, #ccc, red 20%, red 80%, #ccc);

Повторяющийся градиент

С помощью repeating-linear-gradient можно создавать повторяющиеся линейные градиенты. Например:

background-image: repeating-linear-gradient(left, #ccc 20px, red 30px, rgba(0, 0, 126, .5) 40px); background-image: -moz-repeating-linear-gradient(left, #ccc 20px, red 30px, rgba(0, 0, 126, .5) 40px); background-image: -webkit-repeating-linear-gradient(left, #ccc 20px, red 30px, rgba(0, 0, 126, .5) 40px);

В данном случае градиент начинается с левого края элемента с полоски серого цвета (#ccc) шириной 20 пикселей, далее до 30 пикселей идет переход к красному цвету, а затем до 40 пикселей выполняется обратный переход к светло-синему цвету (rgba(0, 0, 126, .5)). После этого браузер повторяет градиент, пока не заполнит всю поверхность элемента.

Примеры CSS градиентов

При оформлении дизайна сайта бывает требуется делать линейный градиент на CSS стилях. Для этого используется атрибут linear-gradient стиля background. Подборка фонов на CSS стилях с линейным и радиальным градиентом.

Как сделать линию градиент в css

Как сделать фон из вертикальных линий через linear-gradient?

1 ответ 1

Похожие

Подписаться на ленту

Как сделать градиенты | CSS

Радиальный градиент radial-gradient

Как объединить градиенты CSS

Пример

23 комментария:

Как сделать линию градиент в css

Повторяющийся градиент

Примеры CSS градиентов

CSS градиент справа налево

CSS градиент слева направо

CSS градиент от центра

CSS градиент 85deg

CSS градиент 21deg

CSS градиент 4deg

CSS градиент 135deg 100%

CSS градиент 3deg

CSS градиент составной

CSS градиент screen limegreen

CSS градиент горизонтальные линии

CSS градиент вертикальный спектр

CSS градиент линии по горизонтали

CSS градиент линии 45deg

CSS градиент пятнами

CSS градиент области

КАТЕГОРИИ

Добавить комментарий Отменить ответ