В золотые дни Интернета у нас была небольшая вещь, называемая Flash, которая помогает нам сделать Интернет динамичным, веселым, интерактивным местом. Но Flash используется все реже и реже. Конечно, в определенных средах его все еще можно использовать удивительным образом, но в современной веб-среде вам нужен CSS, чтобы выполнить свою работу.
Один из самых простых способов сделать ваш сайт почти мгновенным — это перенести CSS3-переходы в таблицу (каламбур). Поскольку пользователи взаимодействуют с различными элементами на вашей странице, переходы позволяют получить задержанный ответ, который является гораздо более естественным и интересным, чем резкий мгновенный ответ. Например, наведите курсор на эти две коробки и скажите, что для вас более интересно.
Перетащите это в HTML-документ и проверьте это:
[sourcecode language = ”html”]
<HTML>
<Голова>
<Стиль>
# box-static {width: 250px; Высота: 170 пикселей; цвет фона: # 999; цвет фона: # 999; плыть налево; Запас: 10px;}
# box-static: hover {background-color: # 333;}
# box-dynamic {width: 250px; Высота: 170 пикселей; цвет фона: # 999; цвет фона: # 999; плыть налево; Маржа: 10px; переход: все 1с;}
# box-dynamic: hover {background-color: # 333;}
</ Стиль>
</ HEAD>
<Тело>
<div id = «box-container» style = «ширина: 600px; высота: 200px; отображение: блок;»>
<div id = «box-static»> </ div> <div id = «box-dynamic»> </ div>
</ DIV>
</ Body>
</ Html>
[/исходный код]
Да, я знаю, что серые прямоугольники не так уж и интересны, но дело в том, что переходы на прямоугольнике справа более интересны и придают дизайну более изысканный вид.
Псевдоклассы для CSS-переходов
Ключом к тому, чтобы заставить CSS-переходы работать, является использование псевдоклассов. Вы видели это раньше, даже если не знали, как они назывались. Наиболее распространенный пример — это псевдокласс a: hover .
[sourcecode language = ”css”]
{
цвет: #ccc;
цвет фона: # 333;
}
a: hover {
цвет: # 333;
цвет фона: #ccc;
}
[/исходный код]
Здесь у нас есть элемент CSS для ссылки и псевдокласс «hover», когда мышь находится над ссылкой. Псевдоклассы являются подмножествами классов. Они автоматически принимают родительский CSS и применяют новый или другой CSS при взаимодействии.
Некоторые другие важные псевдоклассы, которые вы должны знать для CSS-переходов:
- парить: очевидно.
- активный: когда элемент нажимается
- фокус: для выбора на основе вкладок (доступность и формы)
- цель: для сопоставления идентификатора на странице с целью ссылки
Я не буду затрагивать целевой псевдокласс в этой статье, потому что он встречается редко и все еще содержит ошибки в разных браузерах. Но hover, active и focus полностью функциональны (IE10 +) и просты в реализации.
Представляем CSS-переходы
Со всем этим фоном мы можем более подробно обсудить переходы CSS. Это просто свойство CSS, которое позволяет вам сделать так, чтобы различия между двумя различными элементами CSS изменялись медленно, а не мгновенно. Когда вы наводите указатель мыши на кнопку с псевдоклассом наведения с другим цветом текста и фона, кнопка немедленно изменяется. Переходы позволяют вам выполнять изменения медленнее, придавая вашим проектам гораздо более интерактивный вид.
Вы можете использовать переходы практически для любого элемента CSS, используя псевдоклассы: div, параграфы, span, таблицы и вложенные элементы таблиц, изображений. Просто примените соответствующий псевдокласс и определите изменение CSS. Я придерживаюсь background-color по большей части, так как он создает интересный эффект.
Свойства CSS-перехода
Чтобы быть точным, приведенный выше пример просто объединяет несколько свойств CSS Transition:
- Transition-свойство: CSS, который вы хотите использовать для перехода, например цвет, цвет фона, ширина, высота и т. Д.
- Продолжительность перехода: сколько времени в секундах или миллисекундах вы хотите, чтобы переход занял.
- Для секунд используйте ‘s’ как 2s
- в течение миллисекунд используйте «мс», например 2000 мс
- Функция перехода-хронометража: как происходит слияние перехода, что означает, что вы можете отрегулировать, чтобы иметь облегченный переход, ступенчатый или линейный. По умолчанию легкость, которая работает на 99% от того, что мне нужно, но вот основные атрибуты:
- замедление запускает переход медленно и заканчивается на полной скорости
- замедление запускает переход на полной скорости и заканчивается медленно
- замедление начинается медленно, становится самым быстрым в середине перехода и заканчивается медленно.
- легкость почти идентична легкости выхода, за исключением того, что она ближе к середине переходного периода
- Задержка перехода: также в секундах или миллисекундах, определяет количество времени для задержки перед началом перехода.
Или вы можете объединить все это в один переход, просто храните их в следующем порядке:
[sourcecode language = ”text”]
переход: задержка функции времени-функции свойства;
[/исходный код]
Полный пример будет выглядеть так:
[sourcecode language = ”css”]
{
цвет: #ccc;
цвет фона: # 333;
переход: цвет 1с — 500 мс; фоновый цвет — 1 мс; 500 мс;
-webkit-transition: цвет 1 с легкостью входа 500 мс, цвет фона 1 с легкостью входа 500 мс;
}
a: hover {
цвет: # 333;
цвет фона: #ccc;
}
[/исходный код]
Обратите внимание, что вам нужно будет использовать -webkit-transition, чтобы они работали в подавляющем большинстве браузеров.
В псевдокоде это выглядело бы примерно так: измените цвет ссылки, сделайте переход за 1 секунду до завершения, аккуратно облегчите переход и переход и задержите его на полсекунды (500 мс) перед выполнением перехода.
Вы можете использовать список с разделителями-запятыми при переходе, чтобы охватить все целевые свойства, которые вы хотите. Я предпочитаю объединить мои переходы в единый атрибут CSS, но если у вас есть несколько очень специфических переходов, которые вы хотите создать, вы можете разбить каждый из них.
Где разместить переходы
Некоторое время я задавался вопросом, должен ли я поместить переход в родителя или ребенка. В конце концов, следующие два примера имеют одинаковый точный эффект:
[sourcecode language = ”css”]
{
цвет: #ccc;
цвет фона: # 333;
переход: цвет 1с — 500 мс; фоновый цвет — 1 мс; 500 мс;
-webkit-transition: цвет 1 с легкостью входа 500 мс, цвет фона 1 с легкостью входа 500 мс;
}
a: hover {
цвет: # 333;
цвет фона: #ccc;
}
[/исходный код]
-ИЛИ-
[sourcecode language = ”css”]
{
цвет: #ccc;
цвет фона: # 333;
}
a: hover {
цвет: # 333;
цвет фона: #ccc;
переход: цвет 1с — 500 мс; фоновый цвет — 1 мс; 500 мс;
-webkit-transition: цвет 1 с легкостью входа 500 мс, цвет фона 1 с легкостью входа 500 мс;
}
[/исходный код]
Но вот что я нашел, я предпочитаю поместить переход в родительский элемент, чтобы все остальные дочерние элементы получили переход. Если вам нужны отдельные эффекты в зависимости от ситуации, вы всегда можете предоставить другой переход, специфичный для этого элемента. Но я нахожу это чрезвычайно редким. В 99% случаев мне нужен постоянный эффект перехода, поэтому я помещаю переход в родительский элемент.
Вне: парение и ссылки
Два других действительно важных псевдокласса должны быть обсуждены для того, чтобы это было подробным руководством: активный и фокус.
Активный — это когда элемент фактически щелкается и может иметь свои собственные отдельные переходы. Хотя это и не критично с точки зрения дизайна, это может добавить целый другой уровень интерактивности к вашим проектам.
Фокус для просмотра на основе вкладок. Я использую его в первую очередь в формах и элементах навигации, но это следует учитывать в любое время, когда вам нужно сделать свой сайт более доступным.
Мой фокус обычно отражает мое зависание, просто потому, что они примерно одинаковы с точки зрения функциональности. Именно здесь может быть полезно отсрочить эффект на 250-500 миллисекунд, чтобы пользователи не перелистывали то, что может выглядеть как рождественская елка, так как каждый элемент с вкладками проходит переход.
Рабочий образец
Давайте соберем все эти концепции вместе в полный рабочий образец. Мне нравится использовать переходы на пунктах меню:
[sourcecode language = ”html”]
<HTML>
<Голова>
<Стиль>
/ * сделать li встроенным для горизонтального меню * /
# menu li {
отображения: встроенный;
Размер шрифта: 18px;
поле: 3px 8px 3px 8px;
}
/ * начальные определения * /
# menu a {
цвет: # 333;
Граница внизу: # 333 2px solid;
цвет фона: #fff;
обивка: 5px;
текст-отделка: нет;
переход: замедление цвета 1 с 250 мс, замедление фона 1 с 250 мс;
-webkit-transition: цвет 1 с замедлением 250 мс, фоновый цвет 1 с замедлением 250 мс;
}
# меню a: hover {
цвет: #fff;
цвет фона: # 666;
}
# меню a: focus {
цвет: #fff;
цвет фона: # 666;
}
/ * обратите внимание, как я сделал задержку перехода 0 мс * /
# menu a: active {
цвет: # 333;
цвет фона: # 666;
переход: 1с 0мс;
}
</ Стиль>
</ HEAD>
<Тело>
<div id = «menu»>
<UL>
<li> <a href=»#» tabindex=»1″> Навигационный текст 1 </a> </ li>
<li> <a href=»#» tabindex=»2″> Nav Text 2 </a> </ li>
<li> <a href=»#» tabindex=»3″> Nav Text 3 </a> </ li>
<li> <a href=»#» tabindex=»4″> Nav Text 4 </a> </ li>
<li> <a href=»#» tabindex=»5″> Nav Text 5 </a> </ li>
</ UL>
</ DIV>
</ Body>
</ Html>
[/исходный код]
Вы полагаетесь на CSS3 переходы в своих проектах? Будете ли вы использовать его для основной функциональности, или просто добавьте слой лака для тех, кто поддерживает его в современных браузерах?