Эффект плавного изменения размера с помощью CSS3

Эффект плавного изменения размера с помощью CSS3

От автора: обращали когда-нибудь внимание, что при изменении размера окна браузера в открытом Gmail (или Asana, или других сайтов) элементы экрана автоматически изменяют свой размер с плавной анимацией? Такое можно сделать с помощью JavaScript’а или jQuery, а можно – с применением переходов CSS3 и селекторов @media.

скачать исходникидемо

Введение в селекторы @media

Если вы имели дело с адаптивным дизайном, то, возможно, уже знакомы с селекторами @media. Если нет, то знайте, что они по своей сути являются способом применения специальных классов CSS к различным видам экранов и разрешений. Это означает, что можно приспособить один и тот же сайт и его содержимое так, чтобы они смотрелись совершенно по-разному на экранах разного размера или в разных устройствах. Посмотреть полный список разных условий можно здесь

Я обычно пользуюсь «заготовкой» 320 и более от Эндрю Дойла (Andrew Doyle).

Методология «320 и более» состоит в том, что по умолчанию вы создаете дизайн самого маленького разрешения (320px), а затем выстраиваете на его основе каждое более высокое разрешение экрана. Я считаю, что это ведет к более чистому и пригодному в применении CSS.

Переходы CSS3

Переходы CSS3 меняют поведение смены стиля или свойства так, что оно становится анимацией. Можно задать ‘width’, и при любом изменении ширины элемента будет запускаться анимация определенной протяженности. На анимацию можно настроить множество других свойств, все что угодно, от ширины и высоты до фонового цвета. Если захотите побольше узнать о переходах, можете почитать здесь несколько моих статей.

Для этого учебника я обработал простую домашнюю страницу. При большом разрешении она состоит из двух колонок, навигации слева и содержимого справа с верхним колонтитулом. После применения медиаселекторов на более маленьких экранах навигация находится вверху, а контент – внизу. С помощью следующего класса CSS3 при изменении размера браузера элементы меняют свой размер через определенный период времени (1 секунда для ширины и 1,5 секунды для левой стороны)

Посмотреть демо-страницу можно здесь, попробуйте менять размер окна вашего браузера и увидите разную анимацию.

Для тестирования адаптивного дизайна я считаю бесценным инструментом адаптивный тест Мэтта Керсли (Matt Kersleys).

Автор: Jonny Schnittger

Источник: //www.developerdrive.com/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: