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

Статья поможет сделать градиент причём не картинкой а css стилями, без знаний данного языка, останется лишь присоединить к объекту на сайте. Писать руками долго, но на помощь приходят крутые инструменты, читаем ниже.

До появления CSS3 функцию перехода цвета осуществляли из картинки, вставляли изображение и размножали ее по вертикали или по горизонтали. Но прогресс не стоит на месте, и придумали глобальную заливку и с помощью css осуществить любой классный дизайн.

 Делаем градиент с помощью онлайн сервисов

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

1. Готовые образцы, используйте как начальные и редактируйте.
2. На этой площадке, настраиваем количество цветов, минимум два, максимум до бесконечности.
3. Нажимая на каждый бегунок из второго пункта, здесь можно настроить его цвет (color) и процент занимаемого места (location), по умолчанию место делится между всеми поровну.
4. Внешний вид и orientation, то есть настройка направления, горизонталь, вертикаль и диагональ. На пункт size не обращайте внимания, регулирует область просмотра. Чекбокс IE включает адаптацию с internet explorer.
5. Код в три столбика, каждый включает адаптацию к разным браузерам, вопрос кроссбраузерности решен.
6. Color format, это формат цвета, предпочтительнее hex. Галочка Comments добавляет и отключает подсказки.

Прикрепляем стили фона

Прикрепляем к внешнему виду ресурса, например, делаем градиент у фона заголовка h2. Задаем стиль для текста h2, например, “grad” переходим в файл style.css в низ вставляем его и задаем параметры, которые скопировали с colorzilla. В моем случае все будет выглядеть так

.grad{
background: #298c1c; /* Old browsers */
background: -moz-linear-gradient(left,  #298c1c 0%, #a01e1e 21%, #23dd42 43%, #23dd42 47%, #23dd42 47%, #1a0d54 66%, #82a358 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #298c1c 0%,#a01e1e 21%,#23dd42 43%,#23dd42 47%,#23dd42 47%,#1a0d54 66%,#82a358 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #298c1c 0%,#a01e1e 21%,#23dd42 43%,#23dd42 47%,#23dd42 47%,#1a0d54 66%,#82a358 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#298c1c', endColorstr='#82a358',GradientType=1 ); /* IE6-9 */
}

Далее берем стиль и приписываем к тексту заголовка h2.

<h2 class="grad">тут ваш текст</h2>

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

Тут ваш текст

Остальные генераторы градиентов на css

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

Sdelatlending лёгкий линейный генератор

Взялся обновлять статью только из-за [mask_link]sdelatlending[/mask_link], русскоязычный сервис, предлагающий много бесплатных услуг по построению линейных css элемнтов.

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

Virtuosoft умеет делать радиальный background

Инструмент [mask_link]virtuosoft[/mask_link] умеет делать радиальные градиенты, так же просто как и линейные. Интерфейс похож на первый сервис, но в разы проще.

Можно настраивать под разные устройства, если включить поддержку в настройках, но тогда код становиться громадным, а вероятность что на сайт зайдут со старого ie 7 или с андроида меньше версии 2.3 очень мала. Так же можно сделать картинкой, нажав на кнопку get png. Сервис имеет ряд дополнений, таких как генератор тени к элементам.

Сssmatic поддерживает sass

Прогрессивный инструмент [mask_link]cssmatic[/mask_link], поддерживает препроцессор sass, если вы не верстальщик, то не парьтесь, копируйте обычный код.

Радует простота настройки, и красивые предварительно заданные экземпляры, из которых можно слепить красивые элементы. Поддерживает разные направления (вверху, внизу, посередине и тому подобное), так же овальные и квадратные и их расположение в процентах.

Надеюсь вы подобрали градиент css генератор для своих целей и воплотили в жизнь свои задумки, успехов