Нужна помощь? ЗВОНИТЕ!

+7 920 230 2909
Сервисный IT-Центр

Как сделать градиент в Background CSS - учимся добавлять градиенты в стили.

Рейтинг:  5 / 5

Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда активна
 

background-gradientВсем привет. На этом уроке мы научимся создавать и добавлять в стили оформления сайт (CSS) градиентную заливку. 

Как добавить градиент в бекграунд оформления сайта (CSS)

how find backgroundНа самом деле учиться тут особо не придётся, так как этот процесс очень хорошо отладили специалисты в области Интернет-технологий. Так образом вопрос "Как сделать градиент в Background CSS" будет более правильно звучать "Как добавить градиенты в CCS файл" .

Итак. Что такое CSS объяснять не надо, если непонятно, добро пожаловать в раздел: Помощь начинающим web-мастерам. Для остальных продолжаем здесь. 

Иногда необходимо, чтобы фон, на котором что-либо располагается, плавно перетекал из одного цвета в другой. Это называется добавить градиент. Это можно сделать, добавив в стиль оформления сайта необходимый код. Я не стану описывать, как его придумывать. В Интернете так всё упростили, что достаточно воспользоваться онлайн сервисом генератором добавления градиента на наш сайт.

  1. Первый из них представлен новаторами Microsoft: Генератор градиента для добавления на сайт в CSS. Для облегчения доступа можете проделать это прямо на нашем сайте. (для просмотра используйте прокрутку)

     
  2. Второй полезный онлайн сервис, генерирующий код добавления градиента это:  CSS3 Gradient Generator от GalarzaТак же приводим его на этой странице.

     

addition of gradient in backgroundНу и теперь самое главное. Как это всё внедрить на наш сайт. Нашим подопытным будет сайт нашего клиента веломагазина в Тамбове Velomax-Tambov.ru. Задача состояит в том, что в подложку логотипа нам нужен добавить градиент, который будет гармонировать с цветом логотипа.

Итак. Заходим на один из вышепредставленных ресурсов и определяем код градиента. В нашем случае он будет выглядить так: 

background-image: -webkit-linear-gradient(left, #05A9E7 0%, #30E3FF100%);

Далее если вы работаете в браузере Chrome, то наводите мышку на объект и кликаете правой кнопкой мыши. В меню выбираете "Просмотр кода элемента". Откроется консоль web-разработчика. В левом блоке консоли находите строчку отвечающую на Background логотипа.

Она называется #gkLogo код background: #000000 - Находим его по FTP и меняем его на то, что нам сгенерировал онлайн генератор градиентов (код выше).

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

Ну, а для тех кто хочет научиться сам генерировать и добавлять градиенты на свой сайты могу посоветовать поизучать эту статью: Урок по добавлению градиентов и прозрачности в оформление Web-страниц. Если вдруг научитесь, добавляйте в комментарии к этой статье то, что сумели начудить. То есть хвалитесь! :)

Да. Чуть не забыл главное. Эти градиенты не всегда работают. А именно не все браузеры правильно понимают, что от них хотят при показе того или иного фона, поэтому надо всегда тестировать их на различных браузерах и желательно делать свой стиль для каждого из них. Как? Читайте в следующей статье, а пока можете просто добавлять префикс браузера к коду.

Спасибо за внимание. Удачи вам в ваших Web-разработках!

 

 

 

Печать E-mail

Здесь можете прокомментировать или что-то спросить