Как сделать градиент в Background CSS - учимся добавлять градиенты в стили.
Рейтинг: 5 / 5
Всем привет. На этом уроке мы научимся создавать и добавлять в стили оформления сайт (CSS) градиентную заливку.
Как добавить градиент в бекграунд оформления сайта (CSS)
На самом деле учиться тут особо не придётся, так как этот процесс очень хорошо отладили специалисты в области Интернет-технологий. Так образом вопрос "Как сделать градиент в Background CSS" будет более правильно звучать "Как добавить градиенты в CCS файл" .
Итак. Что такое CSS объяснять не надо, если непонятно, добро пожаловать в раздел: Помощь начинающим web-мастерам. Для остальных продолжаем здесь.
Иногда необходимо, чтобы фон, на котором что-либо располагается, плавно перетекал из одного цвета в другой. Это называется добавить градиент. Это можно сделать, добавив в стиль оформления сайта необходимый код. Я не стану описывать, как его придумывать. В Интернете так всё упростили, что достаточно воспользоваться онлайн сервисом генератором добавления градиента на наш сайт.
-
Первый из них представлен новаторами Microsoft: Генератор градиента для добавления на сайт в CSS. Для облегчения доступа можете проделать это прямо на нашем сайте. (для просмотра используйте прокрутку)
-
Второй полезный онлайн сервис, генерирующий код добавления градиента это: CSS3 Gradient Generator от Galarza. Так же приводим его на этой странице.
Ну и теперь самое главное. Как это всё внедрить на наш сайт. Нашим подопытным будет сайт нашего клиента веломагазина в Тамбове Velomax-Tambov.ru. Задача состояит в том, что в подложку логотипа нам нужен добавить градиент, который будет гармонировать с цветом логотипа.
Итак. Заходим на один из вышепредставленных ресурсов и определяем код градиента. В нашем случае он будет выглядить так:
background-image: -webkit-linear-gradient(left,
Далее если вы работаете в браузере Chrome, то наводите мышку на объект и кликаете правой кнопкой мыши. В меню выбираете "Просмотр кода элемента". Откроется консоль web-разработчика. В левом блоке консоли находите строчку отвечающую на Background логотипа.
Она называется #gkLogo код background: #000000 - Находим его по FTP и меняем его на то, что нам сгенерировал онлайн генератор градиентов (код выше).
Если вы незнаете как работать с FTP-клиентом для работы с CSS стилями, то можете добавить код в HTML сайта или читайте другие мои статьи, ну или спрашивайте здесь.
Ну, а для тех кто хочет научиться сам генерировать и добавлять градиенты на свой сайты могу посоветовать поизучать эту статью: Урок по добавлению градиентов и прозрачности в оформление Web-страниц. Если вдруг научитесь, добавляйте в комментарии к этой статье то, что сумели начудить. То есть хвалитесь! :)
Да. Чуть не забыл главное. Эти градиенты не всегда работают. А именно не все браузеры правильно понимают, что от них хотят при показе того или иного фона, поэтому надо всегда тестировать их на различных браузерах и желательно делать свой стиль для каждого из них. Как? Читайте в следующей статье, а пока можете просто добавлять префикс браузера к коду.
Спасибо за внимание. Удачи вам в ваших Web-разработках!