Радиальный градиент в CSS3

Верстка

Рисунок Радиальный градиент в CSS3
Радиальный градиент в CSS3 Радиальный градиент в CSS3
оценка: 5.0 из 5
оценок: 1

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

Радиальный градиент - это градиент, который выходит от определенной точки и расходится кругами. Пример вы можете видеть на рисунке материала.

В прошлом материале мы рассматривали линейный градиент. Радиальный градиент создается почти таким же способом с небольшими дополнениями.

Итак, начнем. Для начала возьмем привычную подложку с обычным DIV блоком:

Это блок с которым мы будем работать

Радиальный градиент содается в CSS-свойстве background или background-image при помощи определения radial-gradient:

Code
background: radial-gradient( [ [xpos] [ypos], ] [ [type] [size], ] color1, color2 [, colorN] );
  • xpos - позиция точки по горизонтали, от которой будет расходится градиент в блоке. Используются еденицы измерения, используемые в CSS. Возможно использование стандартных переменных позиционирования: left, center, right. По-умолчанию, позиционируется по-центру.
  • ypos - позиция точки по вертикали, от которой будет расходится градиент в блоке. Используются еденицы измерения, используемые в CSS. Возможно использование стандартных переменных позиционирования: top, center, bottom. По-умолчанию, позиционируется по-центру.
  • type - тип градиента. Может быть круговым или эллиптическим: circle или ellipse. По умолчанию используется тип ellipse.
  • size - масштабирование градиента. Может принимать одно из следующих значений:
    • contain - градиент масштабируется до ближайшего края блока.
    • closest-corner - градиент масштабируется до ближайшего угла блока.
    • farthest-side - градиент масштабируется до дальнейшего края блока.
    • cover - градиент масштабируется до дальнейшего угла блока.
    Значение по-умолчанию - cover
  • color1, color2,..., colorN - цвета, используемые в градиенте, в порядке от центра до края. Цвета задаются в любом CSS или CSS3 формате.

Цвет градиента можно масштабировать относительно других цветов. Делается это так:

Code
background: radial-gradient(red 0%, green 20%, blue 100%);

Эта запись означает, что красный переходит в зеленый с позиции 0% до позиции 20% от блока, а зеленый переходит в синий с позиции 20% до позиции 100% от блока. Позиции можно задавать не только в процентах, но и в любых других еденицах измерения CSS.

Для разных браузеров определение радиального градиента вызывается по-разному:

  • Opera 12+: -o-radial-gradient
  • FF3.6+: -moz-radial-gradient
  • Chrome 10+, Safari 5.1+: -webkit-radial-gradient
  • Internet Explorer 10: -ms-radial-gradient

Старые версии браузеров Chrome, Safari4+ и Konqueror понимают несколько иное определение радиального градиента:

Code
background: -webkit-gradient( radial, [startPosX startPosY,] [startSize,] [endPosX endPosY,] [endSize,] color-stop(pos, color1), color-stop(pos, color2) [, color-stop(pos, colorN)] );

background: -khtml-gradient( radial, [startPosX startPosY,] [startSize,] [endPosX endPosY,] [endSize,] color-stop(pos, color), color-stop(pos, color) [, color-stop(pos, color)] );
  • startPosX startPosY - стартовые координаты градиента. По-умолчанию: center center.
  • startSize - стартовая позиция относительно стартовых координат. По-умолчанию 0.
  • endPosX endPosY - конечные координаты градиента. По-умолчанию: center center.
  • endSize - конечная позиция относительно конечных координат. По-умолчанию 100%.
  • pos, color - позиция цвета и сам цвет в градиенте.

Я бы советовал не использовать это определение. Это лишний код, который нужно настраивать отдельно, а браузеры эти вполне неплохо обновляются.

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

Теперь соберем все определения и посмотрим, что получится:

Это блок с радиальным градиентом

Если градиент не виден, значит Ваш браузер его не поддерживает.

Код этого блока:

Code
<style="text/css">
  .myblock1{
    padding: 20px;
    border: 1px solid #aaaaaa;
    background: #ffffee; /* для неподдерживающих градиент */
    background: -o-radial-gradient(center center, circle contain, #ffffee, #ffff44); /* Opera 10+ */
    background: -moz-radial-gradient(center center, circle contain, #ffffee, #ffff44); /* Firefox 3.6+ */
    background: -ms-radial-gradient(center center, circle contain, #ffffee, #ffff44); /* Internet Explorer 10 */
    background: -webkit-radial-gradient(center center, circle contain, #ffffee, #ffff44); /* Chrome 10+, Safari 5.1+ */
    background: -webkit-gradient(radial, center center, 0, center center, 100%, color-stop(0, #ffffee), color-stop(100%, #ffff44)); /* старые Chrome, Safari 4+ */
    background: -khtml-gradient(radial, center center, 0, center center, 100%, color-stop(0, #ffffee), color-stop(100%, #ffff44)); /* Konqueror */
    background: radial-gradient(center center, circle contain, #ffffee, #ffff44); /* стандарт CSS3 */
  }
</style>

<div class="myblock1">
  Данные
</div>

Если описывать несколько цветов, то можно получить сложный градиент. Для примера, радиальный градиент в виде радуги:

Блок со сложным радиальным градиентом

Код блока со сложным радиальным градиентом:

Code
<style="text/css">
  .myblock1{
    padding: 20px;
    border: 1px solid #aaaaaa;
    background: #ffffee;
    background: -o-radial-gradient(center center, circle contain, #ff0000, #ff8000, #ffff00, #00ff00, #0080ff, #0000ff, #ff0080);
    background: -moz-radial-gradient(center center, circle contain, #ff0000, #ff8000, #ffff00, #00ff00, #0080ff, #0000ff, #ff0080);
    background: -ms-radial-gradient(center center, circle contain, #ff0000, #ff8000, #ffff00, #00ff00, #0080ff, #0000ff, #ff0080);
    background: -webkit-radial-gradient(center center, circle contain, #ff0000, #ff8000, #ffff00, #00ff00, #0080ff, #0000ff, #ff0080);
    background: -webkit-gradient(radial, center center, 0, center center, 100%, color-stop(0, #ff0000), color-stop(15%, #ff8000), color-stop(30%, #ffff00), color-stop(45%, #00ff00), color-stop(60%, #0080ff), color-stop(75%, #0000ff), color-stop(100%, #ff0080));
    background: -khtml-gradient(radial, center center, 0, center center, 100%, color-stop(0, #ff0000), color-stop(15%, #ff8000), color-stop(30%, #ffff00), color-stop(45%, #00ff00), color-stop(60%, #0080ff), color-stop(75%, #0000ff), color-stop(100%, #ff0080));
    background: radial-gradient(center center, circle contain, #ff0000, #ff8000, #ffff00, #00ff00, #0080ff, #0000ff, #ff0080);
  }
</style>

<div class="myblock1">
  Данные
</div>

На этой позитивной ноте заканчиваю. Удачи в свершениях!

Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.




Радиальный градиент в CSS3
Верстка
Скрипты, инструкции, справочники

rss
Категория:Верстка
Просмотрено:4773
Рейтинг:5.0/1
Дата добавления:2011-11-22 10:56, Вторник
Добавил:Szen
Теги:радиальный градиент, CSS3, градиент

Мини-форум

№ 02011-11-22 10:56
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "Радиальный градиент в CSS3".
Гость
Учавствовать в обсуждении "Радиальный градиент в CSS3" могут только зарегистрированные пользователи.
Реклама
Кнопка портала
Друзья портала
Вакантное место для вашей рекламы!
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Опрос
Сколько сайтов у вас есть?
Всего ответов: 1801
Статистика
Valid HTML 4.01 Transitional

Яндекс цитирования



Онлайн всего: 3
Гостей: 3
Пользователей: 0
Портал SzenProgs.ru © 2008 - 2017 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz