CSS3 и HTML5 развиваются все быстрее и быстрее, браузеры начинают поддерживать все больше новых функций и преимуществ.
В связи с этим хотелось бы заглянуть в наш будущий рай верстальщиков и сделать серию обзорных статей о новых вкусностях и хитростях этих технологий.
В этой серии я хотел бы рассмотреть такие свойства CSS3, как переход , оживлять , непрозрачность и модель РГБА() .
Использование CSS3.
Вы часто слышите, как многие веб-дизайнеры говорят: «Мне не терпится использовать CSS3.».Между тем, вы можете использовать его сегодня.
Да, использовать CSS3 для критических областей сайта на данный момент невозможно.
А вот использовать его для добавления мелких, некритичных для проекта деталей вполне возможно, можно и нужно.
Пример: на вашем веб-сайте было бы здорово, если бы цвет ссылки в меню менялся при наведении на нее курсора.
Цвет меняется резко, без плавного перехода, но это никак не влияет на общий вид сайта и его удобство использования.
А вот наличие плавного перехода цвета может послужить именно той маленькой деталью, которая добавит немного «жизни» вашему сайту.
В этой статье мы рассмотрим свойство перехода CSS. Все примеры приведены для движка webkit. Ниже мы рассмотрим кроссбраузерную совместимость этих методов.
Переход
W3C определяет переходы следующим образом:CSS-переходы позволяют изменять свойства значений CSS. плавно в течение определенного периода времени.Начнем с самого простого примера — добавления плавного перехода к фону ссылки.CSS-переходы позволяют плавно и с течением времени назначать изменения свойств CSS.
Классическая реализация:
При наведении курсора мыши на ссылку цвет фона изменится со светло-голубого на темно-синий, а цвет шрифта — с черного на белый.a.foo { padding: 5px 10px; background: #69f; color: #000; } a.foo:hover { background: #33f; color: #fff; }
Обычная ситуация.
Теперь давайте добавим плавное изменение фона с помощью CSS-переходов: 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, мы можем объединить все свойства перехода в одно: 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;
Теперь эффект перехода будет применяться ко всем свойствам, изменяющимся во время события, и с теми же параметрами — 0,5 секунды, эффект легкости.
Также мы можем добавить задержку для эффекта: 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;
}
Теперь наша анимация будет работать через полсекунды после наведения мыши.
Вы можете применить свойство перехода к чему угодно — фону, цвету, длине, размеру шрифта и т. д. По сути, это свойства, определяющие цвет, или свойства, которые могут быть выражены в единицах длины (px, em, ex) или процентах.
Мы также можем использовать псевдоклассы :focus и :active в качестве события.
В общем, переход можно использовать с любыми селекторами.
Итоговая сводная таблица:
| свойство перехода | Свойство, к которому мы применяем анимацию | Практически любое свойство CSS: цвет, фон, ширина, размер шрифта и т. д. |
| Продолжительность перехода | Продолжительность анимации | Время в секундах: 0,5с – полсекунды, 60с – одна минута и т.д. |
| функция времени перехода | Функция синхронизации, используемая для анимации | легкость, линейная, легкость входа, легкость входа, легкость выхода, кубическая Безье |
| задержка перехода | Задержка анимации | Время в секундах: 0,5с – полсекунды, 60с – одна минута и т.д. |
Браузеры
Chrome, Safari, Opera 10.5+, Firefox 4+ В тексте статьи использованы правила с префиксом только для браузеров WebKit. Не забудьте добавить в свои проекты вендорные префиксы -moz- и -o-.На странице примера вы можете увидеть кроссбраузерный код (разумеется, без IE).
Если статья найдет своих заинтересованных читателей, в следующем посте мы рассмотрим анимацию ключевых кадров, свойство opacity и модель rgba().
Спасибо за внимание! P.S. Спасибо лахматий за исправления в комментариях.
Теги: #css3 #Переход #css 3 #CSS
-
Слова Английского Происхождения
19 Oct, 24 -
Украшаем Рабочий Стол В Windows 7
19 Oct, 24 -
Люди Как Дешевые Датчики Движения
19 Oct, 24 -
Ядро Ios Портировано На Nokia N900.
19 Oct, 24
