but

Создаем кнопки на CSS3. Шаг 3: красивые, простые, дружелюбные Google кнопки

На этот шаг нас вдохновила самая посещаемая страница в Интернет — главная страница поиска Google. К области поиска и размеру текста, в Google сделали уникальный дизайн кнопок для браузеров, поддерживающих Webkit (тот же Chrome).

Эти кнопки используют все технологии, что мы описывали в предыдущих шага, за одним исключением. Они не содержат в себе изображений. В Google применили новое свойство -webkit-gradient для генерации градиента на CSS.

Использование градиентов CSS

Градиенты в CSS клевые только потому, что они представляют из себя CSS функции, например как url (), что означает что их можно использовать абсолютно везде. В бэкрагундах или в бордюрах. Далее смотрите как работают градиенты:

Давайте рассмотрим:

  • linear означает, что это линейный градиент, в противоположность радиальному. Он изменяет цвет по одной из осей, а не по концентрическим кругам.
  • 0% 0%, 0% 100% — координаты. Это означает, что градиент начинается в 0% X, 0% Y и заканчивается в 0% X, 100% Y: их верхнего левого угла в левый нижний. Мы можем ипользовать top-left, bottom-left.
  • from (rgb (255, 255, 255)) является начальным цветом градиента. Если синтаксис кажется вам знакомым, то конечно он похож на синтаксис для @-webkit-keyframes.
  • to (rgb (221, 221, 221)) является конечным цветом. Пока мы использовали только RGB, но по настящему интересными они станут тогда, когда применим RGBa. Добавится возможность контроля прозрачностью градиента.

Всё в этих кнопках обычно: отступы, закругленные края и т.п. Все это мы прошли, кроме градиента, возможности которого безграничны. Давайте посмотрим Demo на сайте автора.

Посмотреть demo на сайте автора


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