Этот прием широко используется для фона различных кнопочек, меню, юзер-панелей и прочих элементов интерфейса, визуально придавая им объем и более кликабельный вид.
Данная статья посвящена тому, как добавить градиент к элементам страницы, а также о способах и преимуществах различных методов его добавления в коде 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*/
Итог этого стиля будет таким: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-градиента, который останется только лишь добавить к стилю нужного элемента в шаблоне.
Вот пожалуй и все.
Круто! Спасибо даже не знала что такое возможно и думаю не я одна. Этот способ довольно мало распространен. Жаль что разработчики браузеров не договорятся чтобы все распознавали одинаковый код, сколько лишних строк нужно для каждого прописывать.
ОтветитьУдалитьТут как раз все наоборот :) Разработчики-то договариваются, обновленные(современные) версии браузеров прекрасно понимают стандартное, без префиксов, свойство. Тут вопрос к пользователям, которые по тем или иным, часто глупым, причинам своевременно не обновляют свои интернет-обозреватели.
УдалитьСпасибо!
ОтветитьУдалитьЯ использую http://GradientGenerator.com, он простой, но содержит все необходимые настройки
ОтветитьУдалить