Волна CSS3 все больше охватывает мир веб-дизайна. И это не удивительно, ведь CSS3 открывает перед нами множество возможностей, которые были недоступны раньше. Сегодня я расскажу Вам, как создавать разнообразные линейные градиенты посредствам CSS3.
Вопрос придания градиентной заливки для разных элементов веб-страниц всегда решался созданием этой заливки в программе Adobe Photoshop и последующем использовании этого изображения в качестве фонового цвета.
С CSS3 у нас появляется возможность создавать градиенты при помощи кода в таблице стилей.
Одним из преимуществ такого подхода является то, что мы можем создавать разнообразные градиенты с достаточно большой гибкостью. Здесь я имею в виду, что мы можем регулировать множество параметров, таких как: угол наклона градиента, количество цветов в градиенте, его повторяемость, и даже то, откуда градиент будет начинаться.
Если Вы интересуетесь новыми возможностями CSS3, то, я думаю, этот урок будет Вам интересен и полезен.
Сразу скажем о поддержке.
Все современные браузеры поддерживают линейные градиенты и отображают их достаточно корректно. Для некоторых браузеров мы будем использовать синтаксис с префиксами. А для совсем старых браузеров вполне можно сделать обходное решение при помощи создания однопиксельной градиентной картинки в Photoshop и прописывать это в таблице стилей в качестве альтернативного решения.
Давайте начнем создавать линейные градиенты с CSS3
1. Первое, что нам нужно сделать – это создать немного кода html. Нам нужны элементы, к которым мы будем применять наши линейные градиенты.
Я предлагаю создать очень простой документ, в котором будет 4 кнопки. Эти кнопки будут представлять из себя теги div, каждый из которых будет иметь свое имя класса. Это нужно для того, чтобы присваивать им различные градиентные заливки.
Кроме того, мы сразу пропишем в фале подключение файла таблицы стилей, который мы создадим уже очень скоро.
Итак, наш html-код будет выглядеть следующим образом:
<!doctype html> <html> <head> <meta charset="windows-1251"> <link rel="stylesheet" type="text/css" href="style.css"> <title>Линейные градиенты</title> </head> <body> <div class="one"><p>Button1</p></div> <div class="two"><p>Button2</p></div> <div class="three"><p>Button3</p></div> <div class="four"><p>Button4</p></div> </body> </html>
А если мы откроем наш файл в браузере, то пока что увидим следующее.
2. Сейчас мы создадим файл таблицы стилей и пропишем основные стили, прежде чем перейти к созданию градиентов.
Создайте файл с именем «style.css» и сохраните его в том же каталоге, что и наш основной файл.
Этот файл уже подключен, так что все, что остается сделать – это открыть его и прописать стили.
Для начала мы пропишем основные стили, которые придадут нашей странице ширину и выравнивание по центру.
Также мы оформим кнопки, задав им высоту, ширину, отступы, рамку, скругление для рамки, обтекание по левому краю.
Мы сразу же применим обходное решение для очень старых браузеров, присвоив для свойства «background-image» заливку из однопиксельного градиентного изображения. Ваши градиенты в последствии прекрасно отобразятся и без него, однако, я советую применять это обходное решение, ведь вполне возможно, что Вашу страницу решит просмотреть человек с очень старым браузером (хотя с каждым днем эта вероятность все больше уменьшается, но все же…), тогда, по крайней мере блок кнопки не будет пустым. Это однопиксельное изображение Вы также можете найти в исходниках (или создать свое).
Также мы придадим необходимые стили для надписей на кнопках.
Вот основные стили, которые нужно прописать в файл «style.css»:
body{width:800px; margin:0 auto;}
.one,.two,.three,.four{width:200px; height:100px; float:left;
border:2px solid #999; border-radius:5px; margin:50px; background-image:url(bg.jpg);}
.one p,.two p,.three p,.four p{text-align:center; margin-top:30px;
font-family:Verdana, Geneva, sans-serif; font-size:30px; color:#333;}
А вот то, что мы увидим на веб-странице, после применеия этих стилей:
Как видите, у нас теперь есть страница с четырьмя кнопками, которые залиты одинаковым однопиксельным градиентом, созданным в программе Photoshop. Сейчас Вы можете видеть, реализацию обходного решения.
Давайте теперь приступим к настоящему созданию линейных градиентов при помощи CSS3.
3. Но для начала, я предложу Вам посетить один очень полезный ресурс. Он будет особенно полезен для людей, осваивающих CSS3 и желающих знать об уровне поддержки различных свойств.
Этот ресурс называется caniuse.com .
Здесь Вы сможете найти уровень поддержки любого интересующего Вас свойства CSS3. После того, как зайдете на этот ресурс, перейдите в режим таблиц «Tables» и в форме для поиска пропишите «gradient».
Перед Вами появится следующая таблица:
Из нее мы можем узнать, какие браузеры поддерживают градиенты, какие нет, а для каких нужно использовать префикс.
Вы сможете увидеть, что поддержка градиентов на сегодняшний день достаточно приличная, так что можно их спокойно использовать (особенно учитывая, что у нас уже есть обходное решение). Однако, для некоторых версий браузеров необходимо использовать префикс, так что мы будет помимо задания основного правила также прописывать правило с префиксом –webkit-.
4. Давайте начнем с первой кнопки, имеющей класс «one».
Мы зададим ей градиент, идущий сверху вниз, и который будет включать в себя 5 цветов, плавно переходящих один в другой.
Для того, чтобы задать градиент, мы будем использовать свойство «background-image», в котором нам нужно будет прописать тип градиента, до какой стороны или угла он будет доходить. Это задается ключевыми словами «top», «bottom», «right» и «left». В случае стороны указывается одно ключевое слово, а если Вы хотите получить диагональный градиент, то нужно определить угол, то есть указать два слова. Также вместо слов можно указывать угол наклона.
Следующие параметры – это цвета с указанием процентов. То есть, если первый цвет начинается с начала, то рядом с ним будет стоять 0%; если второй цвет должен быть посередине заливаемой фигуры, то указываем рядом с ним 50%, а для третьего цвета 100% (это пример для 3-х цветного градиента, но цветов может быть столько, сколько Вы пожелаете).
Давайте раскрасим нашу первую кнопку в 5 цветов.
.one{background-image:linear-gradient(to bottom, #F60 0%, #F90 25%, #FC0 50%, #FF0 75%, #FFC 100%);}
После того, как Вы добавите этот код к Вашим стилям, то в браузере увидите следующее.
Ваша кнопка приобрела градиент из 5-и цветов идущий сверху вниз.
Для того, чтобы прописать то же самое свойство с префиксом –webkit- нужно будет использовать немного другой синтаксис.
background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, from(#F60), color-stop(25%,#F90), color-stop(50%,#FC0), color-stop(75%,#FF0), to(#FFC));
Здесь, как Вы видите: первое отличие – это префикс –webkit-; тип градиента указывается в скобках; дальше идёт начальная точка и конечная точка градиента (указываются в процентах через запятую); потом первый цвет (указывается при помощи специального слова «from»); промежуточные цвета указываются при помощи специального слова «color-stop» и должны содержать процент, показывающий в каком месте они будут начинаться; последний цвет в градиенте – это специальное слово «to».
Вот такие вот отличия в синтаксисе.
Таким образом полный код для нашей первой кнопки будет выглядеть так:
.one{background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, from(#F60), color-stop(25%,#F90),
color-stop(50%,#FC0), color-stop(75%,#FF0), to(#FFC));
background-image:linear-gradient(to bottom, #F60 0%, #F90 25%, #FC0 50%, #FF0 75%, #FFC 100%);}
5. Теперь, когда Вы знаете, как создавать градиенты, давайте попробуем создать диагональный градиент, то есть идущий от одного угла в другой.
Сделать это будет достаточно просто указав вместо одно ключевого слова два. Например, «to bottom right» будет означать, что градиент должен идти от верхнего левого угла к нижнему правому.
Кстати, для –webkit- мы помимо процентов, указывающих на начальную и конечную точку градиента можем также использовать эти специальные слова.
Давайте применит наши знания ко второй кнопке.
.two{background-image:-webkit-gradient(linear, left top, right bottom, from(#069), color-stop(30%,#099),
color-stop(50%,#0C9), color-stop(70%,#099), to(#069));
background-image:linear-gradient(to bottom right, #069 0%, #099 30%, #0C9 50%, #099 70%, #069 100%);}
Вот что у нас получится:
Согласитесь, такое при помощи однопиксельной заливки будет сделать уже не так просто.
6. Также мы можем делать градиенты со смещением. Для этого нам нужно указать для первого цвета позицию не 0%, а, например, 50%.
Направление градиента можно также указывать при помощи градусов (но не для правила с префиксом –webkit-. Там все также остаются проценты, которые, кстати, тоже можно подкорректировать должным образом).
Вот так можно реализовать один и тот же градиент со смещением (основное правило и правило для –webkit-).
.three{background-image:-webkit-gradient(linear,110% 0%, 80% 70%, from(#03F), color-stop(75%,#0F6), to(#03F));
background-image:linear-gradient(43deg, #03F 50%, #0F6 75%, #03F 100%);}
Вот, что из этого выйдет:
7. И последнее, о чем хочу рассказать – это повторяющийся линейный градиент. С его помощью можно замостить фигуру повторяющимися градиентами и получить интересный узор.
Здесь отличие в том, что вместо «linear-gradient» мы должны прописать «repeating-linear-gradient». Далее в скобках указать направление, нужные цвета и то, сколько места будет занимать один такой градиент до повторения (указывать можно в пикселях или в процентах).
Делается это следующим образом:
.four{background-image:repeating-linear-gradient(to bottom left, #CFC, #C90, #FF9 10%);}
А результат получается вот такой:
Теперь Вы знаете как создавать самые разнообразные градиенты.
Стоит немного попрактиковаться, и Вы создадите очень красивые заливки для элементов Ваших веб-страниц.
Надеюсь урок был Вам полезен. Не забывайте оставлять свои отзывы.
Не забывайте подписаться на обновления на блоге и делитесь уроком со своими друзьями при помощи кнопок социальных сетей.
Я желаю Вам успехов.
До новых встреч.
С Вами была Анна Котельникова.
