Еженедельная подборка красивых эффектов на CSS/SVG/JS #50
0
Cтатьи по тегу «анимация»
Еженедельная подборка красивых эффектов на CSS/SVG/JS #49
Подборка свежих эффектов, интересных идей и полезных наработок.
Эффект отражения пейзажа в надписи
Анимация работает при наведении курсора
Технологии: CSS.
Автор: Алекс (@alexpopovich)
Еженедельная подборка красивых эффектов на CSS/SVG/JS #48
Подборка свежих эффектов, интересных идей и полезных наработок.
Анимация с мармеладкой
Удерживая курсор, можно перемещать мармеладку. (Для работы анимации требуется высота окна браузера не менее 500px.)
Технологии: canvas, JS: matter, p5
Автор: Мариуш Дабровски (@MarioD)
Еженедельная подборка красивых эффектов на CSS/SVG/JS #47
Подборка свежих эффектов, интересных идей и полезных наработок.
Слайдер с эффектом размытия при смене изображений
Технологии: CSS анимация, трансформации, SVG фильтры, JS
Автор: Дамиан Мути (@damianmuti)
Еженедельная подборка красивых эффектов на CSS/SVG/JS #46
Подборка свежих эффектов, интересных идей и полезных наработок.
Два новых первых публичных черновика CSS
Сегодня W3C опубликовал первые публичные черновики двух новых модулей CSS: изоляции (CSS Containment level 1) и временных функций (CSS Timing Functions level 1).
CSS-модуль изоляции позволяет отделить часть дерева отрисовки от остальной страницы, сделать ее полностью независимой, благодаря чему можно много чего оптимизировать. За это отвечает новое свойство contain. Хотя у спецификации до сих пор был только редакторский черновик, это свойство уже работает в последних версиях Blink-браузеров. У нас был перевод статьи о нем, а недавно мы опять вспоминали его в связи со способами создания контекста форматирования.
Временные функции (они же функции плавности) нам хорошо знакомы по анимациям и переходам, откуда их и вынесли в отдельный модуль для удобства. К знакомым значениям steps(), cubic-bezier() и ключевым словам для ее конкретных значений добавилась новая функция — frames(). Она очень похожа на steps() (значение тоже меняется ступенчато), но каждое состояние (начальное, конечное и все промежуточные) длится одинаковое время, что удобно для зацикленных анимаций. Правда, браузеры эту новую функцию, похоже, пока не поддерживают.
Анимации: ищем общий язык
Перевод статьи Communicating Animation с сайта alistapart.com для css-live.ru. Автор — Рэйчел Нейборс.
Анимации в едином стиле крайне важны как для рекламы, так и для хорошего впечатления от продукта. Интерфейсы подчиняются законам «физики дизайна»: если анимации всё время выдержаны в одном стиле, то пользователей охватывает иллюзия естественности, реальности. Анимации, выбивающиеся из ряда, нарушают это ощущение и кажутся неряшливыми, а то и просто раздражают. Но поскольку анимация «сидит» аккурат на пересечении дизайна, разработки и прикладной психологии, на пути к такому единообразию встают особые преграды:
- Из-за трудностей коммуникации в больших разнородных командах нелегко понимать и решать вопросы анимаций сообща.
- Из-за недостаточных вводных разработчикам бывает трудно к чему-то продвигаться.
- Из-за недостатка внимания или уважения к другим членам команды выходят однобокие реализации, где учтены голоса одних ценой других. Когда речь заходит об анимации, важно, чтобы каждый был услышан.
Материальный дизайн — Макет: Метрики и контуры
Перевод раздела Metrics & keylines официальной документации Google: http://www.google.com/design/spec/material-design/.
Основная сетка
Все компоненты выравниваются по основной сетке, состоящей из квадратов со стороной 8 dp. Шрифт и иконки на панели инструментов выравниваются по сетке, состоящей из квадратов со стороной 4 dp. Эти правила применимы для приложений для мобильных устройств, планшетов и ПК.
Подробная информация о компонентах представлена здесь.
Материальный дизайн — Макет: Единицы измерения и размеры
Перевод раздела Units and measurements официальной документации Google: http://www.google.com/design/spec/material-design/.
Некоторые единицы измерения в различном контексте имеют различные значения. В этой главе описано использование устройство-независимых пикселей, масштабируемых пикселей, а также таких идей как плотность пикселей.
Плотность пикселей
Количество пикселей, помещающихся в одном дюйме, называют «плотностью пикселей». Экраны с высокой плотностью имеют больше пикселей на дюйм, чем экраны с низкой плотностью. В результате элементы UI (например, кнопка) выглядят крупнее на устройствах с экранами с низкой плотностью и меньше на экранах с высокой плотностью.
Dpi, или разрешение экрана, обозначает количество пикселей конкретного дисплея.
Материальный дизайн — Макет: Принципы
Перевод раздела Principles официальной документации Google: http://www.google.com/design/spec/material-design/.
В основе материального дизайна лежат элементы печатного дизайна — типографика, сетки, пространство, масштаб, цвет и изображения, создающие иерархию, особый смысл и центры внимания, погружающие пользователя в эту реальность. Материальный дизайн использует приемы из области печатного дизайна, такие как базовая сетка и структурные шаблоны. Эти приемы повторно используются на множестве страниц. Эти макеты масштабируются до размеров любого экрана, что упрощает процесс создания масштабируемых приложений.
Эти макеты способствуют единообразию, используя повторяющиеся визуальные элементы, структурные сетки и свободное пространство на всех возможных платформах и размерах экрана. Это единообразие создает узнаваемый пользователями образ на различных устройствах.
Материальный дизайн — Типографика
Перевод раздела Typography официальной документации Google: http://www.google.com/design/spec/material-design/.
После релиза Android Ice Cream Sandwich, стандартным шрифтом, используемым в Android, стал Roboto. После релиза Froyo штрифт Noto стал стандартным шрифтом, используемым в Android для всех языков, не поддерживаемых шрифтом Roboto. Кроме того, Noto — это стандартный шрифт для всех языков в Chrome OS.
Содержание
Материальный дизайн — Изображения
Перевод раздела Imagery официальной документации Google: http://www.google.com/design/spec/material-design/.
Изображения – это не просто украшение. Это мощный инструмент, который может помочь вам донести свои идеи и выделить свой продукт. Смелые, яркие и осмысленные изображения помогают привлечь внимание пользователя.
Материальный дизайн — Иконки
Перевод раздела Icons официальной документации Google: http://www.google.com/design/spec/material-design/.
Иконки приложений
Иконки приложений являются средством визуального выражения приложений, сервисов и инструментальных средств бренда. Простые, выразительные и удобные, они сообщают основную идею и цель приложения. Несмотря на то, что иконка каждого приложения визуально уникальна, все иконки определенного бренда должны быть едины в своей концепции и в исполнении.
Иконки приложений являются основным средством для создания связи с вашим брендом. Используя данное руководство в качестве отправной точки, не забудьте удостовериться, что цвета и прочие ключевые элементы иконки вашего приложения отражают индивидуальность вашего бренда.
Материальный дизайн — Цвет
Перевод раздела Color официальной документации Google: http://www.google.com/design/spec/material-design/.
Цвет в материальном дизайне пропитан духом смелых оттенков, стоящих бок о бок с приглушенным окружением, глубокими тенями и яркими светлыми участками. В качестве примеров использовались современная архитектура, дорожные знаки, маркировочная лента тротуаров и спортивные площадки. Используйте неожиданные и полные жизни цвета.
Материальный дизайн — Приятные мелочи
Перевод раздела Delightful details официальной документации Google: http://www.google.com/design/spec/material-design/.
Анимация может присутствовать во всех компонентах приложения, какого бы размера они ни были. От высокодетализированных иконок до ключевых переходов и действий. Все элементы работают сообща, создавая единое восприятие и прекрасное функциональное приложение.