Как сделать линию градиент в css
Перейти к содержимому

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

  • автор:

Как сделать градиенты | 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 Спасибо за участие!

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

Подчеркивание текста линией с градиентом

Подчеркивание текста можно сделать с помощью нескольких свойств CSS3.

background-image: linear-gradient(to right, red, blue); Устанавливает цвет и направление градиента
background-size: 100% 1px; Высота линии
background-position: center bottom 2px; Смещение от низа

Ссылки

Пример .a-gradient < text-decoration: none; background-repeat: no-repeat; background-position: center bottom 1px; background-size: 100% 1px; background-image: linear-gradient(to right, red, blue); >.a-gradient:hover

Заголовки

Заголовки H1, H2 и т.д. придется обворачивать в т.к. свойство display: inline у элемента обязательно.

 
.h1-gradient < margin: 0 0 20px 0; >.h1-gradient h1

Также можно поменять направление градиента на вертикальный:

.h1-gradient h1

31.07.2018, обновлено 15.12.2022
Предыдущая запись После отправки формы сохранить позицию скролла
Следующая запись Текст с градиентом

Комментарии

Авторизуйтесь, чтобы добавить комментарий.

Другие публикации

Текст с градиентом

Градиент в цвет шрифта можно добавить с помощью CSS свойства background-clip: text, которое окрашивает текст в цвет или изображение указанного в background-image.

Contenteditable – текстовый редактор

Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а.

Генерация счета на оплату PDF PHP

С помощью расширения dompdf можно легко сформировать PDF файл. По сути, dompdf — это конвертер HTML в PDF который.

Мануал по созданию и форматированию excel файлов в PHPExcel

К сожалению разработчики прекратили поддержку и разработку проекта, но PHPExcel все равно остается популярной.

Отслеживание окончания доменов и SSL-сертификатов

При работе с множеством сайтов возникает необходимость в постоянном контроле срока окончания доменов и особенно.

PHP-класс для создания миниатюр изображений

PHP Thumb – это библиотека, основанная на PHP GD и предназначена для создания превью изображений для каталогов, товаров.

CSS → Линии с помощью linear-gradient

Благодаря тому, что градиент это фоновое изображение, ему (градиенту) можно задавать такие параметры как — размер, повторяемость и позицию. Таким образом для вывода линии достаточно создать одноцветный градиент нужного размера.

Пример подчёркнуто текста:

.underline

Пример двойного подчёркивания:

.double-underline

Пример dotted подчёркивания:

.dotted-underline

Пример диагональной линии:

.diagonal-line

Похожие записи

  • Прозрачный треугольный вырез в элементе
  • Стилизация checkbox-ов на чистом CSS
  • Подробно о CSS анимации (видео)
  • border-radius, box-shadow и linear-gradient в Internet Explorer 6+
  • Эмуляция box-shadow в IE6+ с помощью фильтра

Комментарии

смысл в том, чтобы не использоваться лишних элементов 🙂
ну и у box-shadow заметно меньше возможностей

Для полосочек его за глаза хватает 🙂
Про лишние элементы не понял.

Пост о линиях а не о полосочках. Попробуй сделать зачёркнутый текст на box-shadow с любой неоднородной картинкой в фоне.

Если есть доступ к html коду и возможность плодить теги, то никакого смысла в box-shadow как и в linear-gradient нет, любые линии выводятся дивом с бэкграундом.

Линии с прозрачностью тенью не сделать, факт. Но и редко надо.

Генератор градиента цвета

Цветовые градиенты CSS для классных фонов и элементов пользовательского интерфейса

выберите градиент
получить код CSS

Что такое цветовой градиент?

Цветовой градиент — это постепенное смешение двух или более цветов. Обычно градиент определяется двумя пользовательскими цветами, и компьютер автоматически вычисляет все промежуточные цвета. Цветовые градиенты могут состоять из двух или более используемых цветов. В коде CSS для веб-сайтов вы можете определять линейные и радиальные градиенты. Линейный градиент цвета смешивает цвета по прямой линии и приводит к постепенному переходу цвета из одной точки в другую. Радиальный градиент цвета смешивает цвета по кругу и приводит к цветовому переходу, который излучается из определенной точки.

Как сделать хороший CSS градиент цвета

Обычно дизайнер выбирает два или более цветов для создания градиента цвета. Это требует опыта проектирования и хорошего взгляда на гармонию цвета. Наш генератор цветовых градиентов использует алгоритмы цветовых градиентов нашего производителя логотипов My Brand New Logo, который автоматически создает красивые и хорошо сбалансированные цветовые градиенты. Вам просто нужно выбрать один цвет, и наш генератор градиента автоматически генерирует красивый градиент на основе этого. За кулисами происходит много науки о цвете, но будьте уверены, ваш градиент цвета всегда выглядит хорошо.

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

Наш генератор градиента фона CSS автоматически создает градиент цвета на основе выбранного вами цвета. У нас разные стили градиентов. Стиль света генерирует градиент цвета, который выглядит так, как будто он подсвечивается источником света. Идеально, чтобы добавить блеск в ваши цвета. «Глубокий стиль» продвигает эту концепцию немного дальше и добавляет больше оттенков в цветовую гамму. Стиль радуги идеально подходит для светлых цветов, чтобы создать образ перламутра. А интенсивный стиль создает интенсивный, глубокий и насыщенный цветовой градиент.

Регулировка градиента цвета

Когда вы выбрали цвет, вы можете перетащить ползунки, чтобы настроить градиент. Первый слайдер контролирует количество градиента. Второй ползунок контролирует вращение градиента цвета. Вы можете использовать это, чтобы имитировать, откуда исходит свет. Третий ползунок переключается с линейного на радиальный режим.

Если вы довольны своим градиентом, получите свой код CSS, скопировав сгенерированный код CSS с цветовым градиентом. Поместите его в свой собственный код CSS, чтобы получить точно такой же градиент в своем собственном веб-дизайне.

Советы по дизайну градиента цвета

Если вы хотите создать логотип с цветным градиентом, мы разработали для вас несколько рекомендаций:

Скопируйте код CSS

Используйте этот код CSS в своем веб-проекте, чтобы получить цветовой градиент:

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *