—»     —»   Градиенты на CSS3: круговые и эллиптические
  Раздел: CSS/Style Sheets   Комментариев: 1  

Градиенты на CSS3: круговые и эллиптические



Сегодня мы хотим продолжить рассказывать о CSS3, а именно – о градиентах. В предыдущих статьях мы рассказывали вам о различных параметрах в CSS3, позволяющих создавать незамысловатые фигуры или наносить эффекты. На этот раз давайте поговорим о двух типах градиентов – круговых и эллиптических.

Градиенты на CSS3: круговые и эллиптические

Синтаксис градиентов

Градиенты в CSS3 объявляются при помощи параметра background-image. Это связано с намерением обеспечить лучшую совместимость, когда нам также, в одном правиле, нужно будет использовать background-color. Затем, для того чтобы создать радиальный градиент, мы просто вызываем его при помощи функции radial-gradient(). Есть 4 значения, которые нужно включить в функцию, чтобы градиент был создан правильно.

Градиенты на CSS3: круговые и эллиптические

Первое значение определяет позицию градиента. Мы можем использовать описательные ключевые слова вроде top, bottom, center и left, либо мы можем указывать более конкретные значения вроде 50% 50% для того, чтобы градиент был по центру или 0% 0% для того, чтобы градиент начинался в верхнем левом углу.

Второе значение определяет форму и размер градиента. Существует два аргумента формирования градиентов, первый отвечает за эллипс (который используется по умолчанию), и второй отвечает за круговые градиенты.

Что касается параметра размера градиента, то здесь мы можем использовать следующие 6 аргументов:

* closest-side – Форма градиента рассчитана по направлению к стороне блока, которая находится ближе всего к центру градиента (для круговых градиентов), либо по направлению к вертикальным и горизонтальным сторонам (для эллипсов).
* closest-corner - Форма градиента рассчитана по направлению к ближайшему углу блока от его центра.
* farthest-side – аргумент немного похож на closest-side, за исключением того, что форма градиента направлена к дальней стороне блока от центра градиента (либо вертикальные, либо горизонтальные).
* farthest-corner - Форма градиента направлена к дальнему углу блока от центра градиента.
* contain – то же самое, что и closest-side.
* cover – то же самое, что и farthest-corner.

Наконец, третий и четвертый параметры определяют комбинацию цветов. Итак, давайте посмотрим, каким образом мы пишем код для создания эллиптических градиентов, и на этот раз мы будем использовать значение cover в параметре gradient size, чтобы градиент распространялся очень широко, покрывая контейнер.

body {
background-image: radial-gradient(center center, ellipse cover, #ffeda3, #ffc800);
}

Градиенты на CSS3: круговые и эллиптические

Для создания круговых градиентов мы можем сделать следующее:

body {
background-image: radial-gradient(center center, circle cover, #ffeda3, #ffc800);
}

Как видно из названия, форма градиента будет образовывать круг.

Градиенты на CSS3: круговые и эллиптические

Браузерная поддержка

Только учтите, что на данный момент практически все браузеры вряд ли смогут полностью поддерживать данный параметр, поэтому для многих браузеров понадобится прописывать префиксы. Итак, полный код, который будет работать во всех перечисленных браузерах будет выглядеть так (IE10+, Firefox 3.6+, Chrome 4.0+, Safari 4.0+ и Opera 11+).

body {
background-image: radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);
background-image: -o-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);
background-image: -ms-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);
background-image: -moz-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);
background-image: -webkit-radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);
}

Не забудьте посмотреть демо, и скачать исходный код.

Смотреть демо | Скачать исходный код

В завершение

Создавать радиальные градиенты при помощи CSS3 не так сложно, как кажется, особенно если для создания кода вы будете использовать следующие инструменты:

* Colorzilla Gradients
* Gradientoo
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 5419   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 4 ноября 2012 @ 18:37
Написал: fortune — группа: Читатели  
На сайте с: 19.11.2009   |   Публикаций: 0   |   Комментариев: 59
ICQ: 190783170
Ненавижу IE! Из него от столького количества красоты приходится отказываться или делать двойную работу, что бы этот браузер - тупица отобразил все как надо! Вот и в этом случае "осел" еще не видит, а 10-я версия хрен знает когда появится у большинства юзеров!


--------------------
я дизайнер - http://imdesigner.ru
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31