CSS3 градиенты

Демо тут

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

Основная идея метода заключается в следующем (CSS3 Images spec) — если несколько градиентов имеют одинаковые позиции происходит резкий переход цвета. Например, градиент для горизонтальных полос будет таким:

background-color: #0ae;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);

Почему мы используем « transparent», а не фактический цвет? Для гибкости. А «background-color» служит для нескольких целей: он устанавливает цвет для полосы и служит основным цветом в браузерах, не поддерживающих свойства градиент. Для контроля размера можно использовать «background-size»:

-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
background-size: 50px 50px;

Для создания градиента в стиле «пикник», можно просто наложить горизонтальные полосы на вертикальные:

background-color: white;
background-image: 
    -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5))),
    -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5)));
background-image:
    -moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
    -moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
background-image:
    -o-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
    -o-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
background-image: 
    linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
    linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));

Самое трудное было нарисовать шахматную доску. Мне до сих пор не удалось найти способ как нарисовать правильную шахматную доску, не под углом 45°, без дополнительных градиентов. Но это будет довольно просто сделать, когда введут поддержку угловых градиентов (сейчас их нет даже в спецификации):

background-image:
    -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
    -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
    -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)),
    -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555));
background-image:
    -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
    -moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
    -moz-linear-gradient(45deg, transparent 75%, #555 75%),
    -moz-linear-gradient(-45deg, transparent 75%, #555 75%);
background-image: 
    -o-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
    -o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
    -o-linear-gradient(45deg, transparent 75%, #555 75%),
    -o-linear-gradient(-45deg, transparent 75%, #555 75%);
background-image: 
    linear-gradient(45deg, #555 25%, transparent 25%, transparent),
    linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
    linear-gradient(45deg, transparent 75%, #555 75%),
    linear-gradient(-45deg, transparent 75%, #555 75%);

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

CSS3 transition-свойства

CSS3 и HTML5 развиваются всё быстрее и быстрее, браузеры начинают поддерживать всё больше новых фишек и плюшек. В связи с этим, мне хотелось бы заглянуть в наш будущий рай верстальщиков и сделать цикл обзорных статей по новым плюшкам и фишкам этих технологий.
В этом цикле мне хотелось бы рассмотреть такие свойства CSS3, как transition, animate, opacity и модель rgba().

Использование CSS3.

Часто можно услышать от многих веб-дизайнеров слова «Я уже не могу дождаться, когда же можно будет использовать CSS3...». А между тем, использовать его можно уже сегодня. Да, использование CSS3 для критичных моментов сайта сейчас невозможно. Но использовать его для добавления мелких, некритичных для проекта деталей вполне реально, можно и нужно.


Пример: На вашем сайте прекрасно смотрится изменение цвета ссылки в меню при наведении мышкой. Цвет изменяется резко, без плавного перехода, но это никак не влияет на общий вид сайта, его юзабилити. Зато присутствие плавного перехода цвета может послужить именно той маленькой деталькой, которая добавит вашему сайту немного «жизни».

В данной статье мы рассмотрим CSS-свойство transition.
Все примеры приведены для движка webkit. Чуть ниже мы рассмотрим кроссбраузерность этих методов.

Transition

W3C даёт следующее определение transitions:

CSS Transitions allow property changes in CSS values to occur
smoothly over a specified duration.

CSS Transitions позволяют назначать изменения свойств CSS плавно и в течение некоторого времени.

Давайте начнем с самого простого примера — добавим плавный переход фона ссылки.
Тестовая страничка
Классическая реализация:

a.foo {
 padding: 5px 10px;
 background: #69f;
 color: #000;
 }
a.foo:hover {
 background: #33f;
 color: #fff;
 }

При наведении мышки на ссылку фон поменяет свой цвет со светло-синего на тёмно-синий, а цвет шрифта — с черного на белый. Обычная ситуация.
Теперь добавим плавную смену фона, используя CSS transitions:

a.foo {
 padding: 5px 10px;
 background: #69f;
 color: #000;
 -webkit-transition-property: background;
 -webkit-transition-duration: 0.5s;
 -webkit-transition-timing-function: ease;
 }
a.foo:hover {
 background: #33f;
 color: #fff;
 }

Теперь наш фон плавно меняет цвет в течение полусекунды! Как и с прочими свойствами CSS, мы можем объединить все transition-свойства в одно:

a.foo {
 padding: 5px 10px;
 background: #69f;
 color: #000;
 -webkit-transition: background 0.5s ease;
 }
a.foo:hover {
 background: #33f;
 color: #fff;
 }

Теперь добавим плавное изменение цвета шрифта:

a.foo {
 padding: 5px 10px;
 background: #69f;
 color: #000;
 -webkit-transition: background 0.5s ease, color 0.3s ease;
 }
a.foo:hover {
 background: #33f;
 color: #fff;
 }

Данный код при наведении мышки будет плавно менять цвет фона в течение полусекунды и цвет шрифта в течение 0.3 секунд. Если же нам нужны одинаковые свойства для всех элементов, мы можем заменить

-webkit-transition: background 0.5s ease;
-webkit-transition: color 0.3s ease;

на

-webkit-transition: all 0.5s ease;

Теперь Transition-эффект будет применяться ко всем изменяющимся при событии свойстам и с одинаковыми параметрами — 0.5 секунд, ease-эффект.

Так же, мы можем добавить задержку для эффекта:

a.foo {
 padding: 5px 10px;
 background: #69f;
 color: #000;
 -webkit-transition: all 0.5s ease;
 -webkit-transition-delay: 0.5s;
 }
a.foo:hover {
 background: #33f;
 color: #fff;
 }

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

Применять свойство transition можно к чему угодно — фону, цвету, длине, размеру шрифта и т.д. В основном это свойства, задающие цвет или свойства, которые могут быть выражены в единицах длины (px, em, ex) или в процентах. В качестве события мы так же можем использовать псевдоклассы :focus и :active. Вообще — использовать transition можно с любыми селекторами.

Итоговая сводная таблица:

transition-property	Свойство, к которому применяем анимацию	Практически любое свойство CSS: color, background, width, font-size и т.д.
transition-duration	Длительность анимации	Время в секундах: 0.5s — полсекунды, 60s — одна минута и т.д.
transition-timing-function	Временная функция, используемая для анимации	ease, linear, ease-in-out, ease-in, ease-out, cubic-bezier
transition-delay	Задержка анимации	Время в секундах: 0.5s — полсекунды, 60s — одна минута и т.д.

Браузеры

Chrome, Safari, Opera 10.5+, Firefox 4+
В тексте статьи использовались правила с префиксом только для WebKit-браузеров. Не забывайте добавлять в ваших проектах префиксы вендоров -moz- и -o-. На страничке-примере можно подсмотреть кроссбраузерный код (без IE, само собой).

Страничка с примером: Клац.

Если статья найдет своих заинтересованных читателей, в следующем посте мы рассмотрим keyframe-анимацию, свойство opacity и модель rgba(). Спасибо за внимание!