Верх страницы
Обложка к записи CSS анимация для «техники жёлтого затухания»
Время для прочтения: 0 мин. 4 сек.

CSS анимация для «техники жёлтого затухания»

Не думаю, что я первый, кому пришла в голову эта идея, но всё же задокументирую её.

Если вы не знакомы с этой техникой, прочтите статью «Web Interface Design Tip: The Yellow Fade Technique».

Этот дизайнерский эффект, ставший не так давно достаточно популярным, был использован 37 signals в ситуации, когда новый контент добавлялся на страницу и к нему пытались привлечь внимание пользователей.

Это всё то же самое, но с использованием CSS3 анимации.

:target {
	-webkit-animation: target-fade 3s 1;
	-moz-animation: target-fade 3s 1;
	animation: target-fade 3s 1;
}

@-webkit-keyframes target-fade {
	0% { background-color: rgba(0,0,0,.1); }
	100% { background-color: rgba(0,0,0,0); }
}
@-moz-keyframes target-fade {
	0% { background-color: rgba(0,0,0,.1); }
	100% { background-color: rgba(0,0,0,0); }
}
@keyframes target-fade {
	0% { background-color: rgba(0,0,0,.1); }
	100% { background-color: rgba(0,0,0,0); }
}

Ссылки

Автор: Кобзарёв Михаил

Русский разработчик с 20-ти летним стажем. Работаю с PHP, ООП, JavaScript, Git, WordPress, Битрикс, Joomla, Drupal, Opencart, DLE, Laravel, Moonshine, SuiteCRM.

Оптимизирую сайты под Google Page Speed, настраиваю импорты для больших магазинов на WooCommerce + WP All Import. Пишу плагины на заказ. Все мои услуги.

Веду блог о разработке, дайджест в телеграмме и в ВК.

Вы всегда можете нанять меня.

Комментарии
Подписаться
Уведомить о
guest

0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Предыдущая запись

Давайте дружить
в Телеграме

Авторский блог вашего покорного слуги в Telegram про web, программирование, алгоритмы, инструменты разработчика, WordPress, Joomla, Opencart, Laravel, Moonshine, фильмы и сериалы