Как добавить градиент на сайт

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

Рис. 1
  Первый - с использованием заранее подготовленной картинки - очень простой и на сегодняшний момент, самый универсальный способ.
Подготовленное изображение (Рис. 1), загружается на хостинг, берется на него ссылка и добавляется в значение стилевого свойства для описания фона - background, в коде это выглядит следующим образом:
background: url(.../gradient-image.png) repeat-x;
  Метод хорош тем, что такой фон будет отображаться как задумано во всех версиях браузеров и в старых, и в новых.
  Однако, он имеет ряд минусов: с каждой новой ссылкой на картинку увеличивается количество запросов к серверу, замедляется скорость загрузки страницы, а это не есть хорошо.
  Второй способ - описания параметров градиента для свойства background, используя значения:
- linear-gradient - линейный градиент;
- radial-gradient - радиальный градиент.
  Но тут есть одно неудобство - чтобы различные версии браузеров понимали такую запись градиента, в коде нужно добавлять отдельно значение для каждого, используя соответствующие префиксы. Запись в итоге будет выглядеть так:
background: #ffa84c; /*фон для очень старых браузеров*/
background: -moz-linear-gradient(top, #ffa84c 0%, #ff7b0d 100%); /*FF 3.6+*/
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffa84c), color-stop(100%,#ff7b0d)); /*Chrome,Safari4+*/
background: -webkit-linear-gradient(top, #ffa84c 0%,#ff7b0d 100%); /*Chrome10+,Safari5.1+*/
background: -o-linear-gradient(top, #ffa84c 0%,#ff7b0d 100%); /*Opera 11.10+*/
background: -ms-linear-gradient(top, #ffa84c 0%,#ff7b0d 100%); /*IE10+*/
background: linear-gradient(top, #ffa84c 0%,#ff7b0d 100%); /*W3C, стандартное свойство, современные браузеры*/
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#ff7b0d',GradientType=0 ); /*IE6-9*/
Итог этого стиля будет таким:
В данном случаи используется два цвета, а точнее оттенки одного, но можно использовать 3-4 и больше, совершенно разных цвета, и даже прозрачность, записывая цвет с помощью rgba.
  С точки зрения оптимальности, такая запись градиента конечно же лучше и надежнее - вы не зависите от хостинга изображений и получаете чистый CSS код, но все упирается в длинный код... Однако, как известно мир не без добрых людей и на просторах интернета существуют отличные сервисы генераторов CSS кода, в том числе и градиента, коими я пользуюсь постоянно. Там вы можете подобрать нужные цвета, указать их количество, установить позиции, и получить готовый код созданного вами CSS-градиента, который останется только лишь добавить к стилю нужного элемента в шаблоне.



 Вот пожалуй и все.

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

  1. Круто! Спасибо даже не знала что такое возможно и думаю не я одна. Этот способ довольно мало распространен. Жаль что разработчики браузеров не договорятся чтобы все распознавали одинаковый код, сколько лишних строк нужно для каждого прописывать.

    ОтветитьУдалить
    Ответы
    1. Тут как раз все наоборот :) Разработчики-то договариваются, обновленные(современные) версии браузеров прекрасно понимают стандартное, без префиксов, свойство. Тут вопрос к пользователям, которые по тем или иным, часто глупым, причинам своевременно не обновляют свои интернет-обозреватели.

      Удалить
  2. Анонимный05.11.2013, 13:32

    Спасибо!

    ОтветитьУдалить
  3. Я использую http://GradientGenerator.com, он простой, но содержит все необходимые настройки

    ОтветитьУдалить

Следующее Предыдущее

BestProject