275 На этот шаг нас вдохновила самая посещаемая страница в Интернет — главная страница поиска Google. К области поиска и размеру текста, в Google сделали уникальный дизайн кнопок для браузеров, поддерживающих Webkit (тот же Chrome).
Эти кнопки используют все технологии, что мы описывали в предыдущих шага, за одним исключением. Они не содержат в себе изображений. В Google применили новое свойство -webkit-gradient для генерации градиента на CSS.
Использование градиентов CSS
Градиенты в CSS клевые только потому, что они представляют из себя CSS функции, например как url (), что означает что их можно использовать абсолютно везде. В бэкрагундах или в бордюрах. Далее смотрите как работают градиенты:
|
1 2 3 4 5 |
.g-button { … background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 255, 255)), to(rgb(98,202,227))); … } |
Давайте рассмотрим:
- 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 на сайте автора.
