Как создать CSS градиент

Категория: CSS. 5 комментариев. 16.01.2013.

Здравствуйте, сегодня мы поговорим с вами о том как создать градиент в CSS, и это не просто так, градиент очень распространенный эффект на сайтах и применяется повсеместно. Поэтому, если мы с вами изучим все возможности задания градиентов, то непременно ускорим работу своего сайта. Также приемы рассмотренные в статье мы будем использовать при создании шаблона wordpress при верстке макета и поэтому если вы не хотите пропустить выход статьи то обязательно подпишитесь на обновления блога .

Как создать градиент в CSS.

Возможность задать градиент средствами CSS появилась недавно. До этого такая возможность реализовывалась следующим способом: сначала нужно было вырезать картинку с градиентом шириной в один пиксель потом эту картинку задают фоном для нужного блока и тиражируют ее в нужном направлении.
Вот как это выглядело в CSS:

.gradient{
background: url(picture.png) repeat-x #ссс;
}

Недостатки у этого метода очевидны – градиент можно задать только для блока с фиксированной шириной или высотой, подгружая картинку, хоть и маленькую мы снижаем скорость загрузки сайта, таким способом мы можем задать или вертикальный или горизонтальный градиент, все остальные виды такой способ не сможет реализовать.
Также более подробно про фон и его задание вы можете узнать из статьи задание фона в css где рассказано как задать фон для объекта и как тиражировать эту картинку.

Как задать градиент.

Ну а теперь давайте рассмотрим непосредственно свойства при помощи которых мы можем задавать градиент на сайтах. Сейчас в нашем распоряжении есть линейный и радиальный градиенты. По очереди мы рассмотрим эти виды градиентов, и все их возможности, а также посмотрим работу на примерах.

Линейный

Для его реализации у нас есть свойство linear-gradient (); в котором вы можете задать параметры:
bg-position – этот параметр задает координаты начала градиента, можно задавать во всех размерностях, которые приняты в веб, но лучше всего применять пиксели, так надежнее. Параметр не обязателен, по умолчанию будут заданы параметры top 0px left 0px.

Angle – благодаря этому параметру вы можете задать градус распространения, так как у нас линейный градиент то начальное значение будет 0deg.

color-stop – этот обязательный параметр, в нем нужно указать как минимум два цвета – верхнего и нижнего пикселя.

Пример:
.block{ background: linear-gradient(30deg, yellow, blue);}

Где 30deg угол распространения градиента.

Yellow и blue цвета первого и последнего пикселя в градиенте.

Мы все сделали, сохраняем открываем в браузере и… ничего не видим! Все это потому что стандарты еще не вступили в силу браузеры официально не поддерживают эту команду. Так как быть в данной ситуации? Есть выход из сложившейся ситуации, нужно явно указать каждому браузеру что нужно распознать эту команду.

background: -webkit-linear-gradient(30deg, yellow, blue);
background: -moz-linear-gradient(30deg, yellow, blue);
background: -o-linear-gradient(30deg, yellow, blue);
background: -ms-linear-gradient(30deg, yellow, blue);

Первая строчка задает градиент в браузерах Гугл Хром и Сафари.

Вторая – код для Мазилы.

Третья для оперы а четвертый для Интернет Эксплорер.

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

background: #999;
background: -webkit-linear-gradient(30deg, yellow, blue);
background: -moz-linear-gradient(30deg, yellow, blue);
background: -o-linear-gradient(30deg, yellow, blue);
background: -ms-linear-gradient(30deg, yellow, blue);

Теперь давайте посмотрим результат работы наших команд.

Линейный градиент в CSS, пример работы.

Во всех браузерах отображается одинаково, на этом наша работа можно сказать закончена.

Радиальный

Теперь давайте с вами поговорим про еще одну возможность, которая у нас сейчас есть – радиальный градиент. Он отличается от линейного тем, что распространяется от центра и во все стороны.
Синтаксис данной команды очень похож на линейный, с тем лишь отличием что добавилась форма градиента и размер.

Вот общий вид функции:

background: radial-gradient(
позиция или угол, форма или размер, от-стоп, стоп-цвет, до-стоп
);

В данной команде форму можно задать двумя параметрами circle – круг и ellipse – овал. Это не обязательный параметр, по умолчанию будет выбран ellipse.

closest-side — Ближайшая сторона. Градиент будет распространяется от центра к ближней стороне элемента (для circle), или к обоим, и к горизонтальной и к вертикальной стороне (для ellipse).

closest-corner — Ближайший угол. В этом случае градиент будет распространяться от центра к самому близкому углу элемента.

farthest-side — Самая дальняя сторона. Градиент будет идти от центра по направлению к наиболее дальней части элемента (для circle), или к обоим, горизонтальной и вертикальной, сторонам (для ellipse).

farthest-corner — Самый дальний угол. Размер градиента в таком случае будет распространяться от центра в дальний угол элементов.

contain — тоже что и closest-side.

cover — тоже что и farthest-corner.

Теперь посмотрим работу этого свойства на примере.

Circle closest-side.

background: radial-gradient(circle closest-side,#000,#FFF,#000);

Здесь как и в предыдущем случае напрямую браузеры не поддерживают команду и поэтому нужно написать следующий код:

background: -moz-radial-gradient(circle closest-side,#000,#FFF,#000);
background: -ms-radial-gradient(circle closest-side,#000,#FFF,#000);
background: -o-radial-gradient(circle closest-side,#000,#FFF,#000);
background: -webkit-radial-gradient(circle closest-side,#000,#FFF,#000);

Результат:

closest-corner

farthest-side

farthest-corner

Как видите, из статьи с вступлением новых стандартов в силу в руках верстальщика окажется много полезных элементов, и это не только линейный и радиальный градиенты в CSS, но и многое другое. Поэтому, с нетерпением ждем выхода новых стандартов и подписывайтесь на мой блог, все новшества я буду показывать на страницах своего блога.

С уважением, Василенко Александр

Похожие статьи:

5 в ответ на “Как создать градиент в ЦСС”:

  1. Александр Багров
    http://html-plus-css.ru
    пишет:

    1. -webkit- , -moz- , -o- и -ms- называются вендорными префиксами.

    2. По-моему, в отношении Internet-Explorer ваша информация выглядит слишком оптимистично. Вы сами проверяли кроссбраузерность?

  2. mishuta 2012
    http://cat-mishuta.ru
    пишет:

    Класс! И когда этим богатством CSS3 можно будет свободно пользоваться?

  3. Дмитрий пишет:

    Админ, в каком это IE у вас работают градиенты? с IE10 только работает, но префиксы уже не нужно. Дл того чтобы работало в IE9, то нужно добавлять костыль), а для более поздних версий добавлять фильтр. Не знаю как так у вас это умудрилось заработать в IE только с префиксом.

Оставить комментарий