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

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

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

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

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

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

@media only screen and (min-width: 480px) {
}
@media only screen and (min-width: 600px) {
}
@media only screen and (min-width: 768px) {
}
@media only screen and (min-width: 992px) {
}
@media only screen and (min-width: 1382px) {
}

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

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

Переходы CSS3

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

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

section, h1, li, img {
    -moz-transition: width 1s ease-in-out, left 1.5s ease-in-out;
    -webkit-transition: width 1s ease-in-out, left 1.5s ease-in-out;
    -moz-transition: width 1s ease-in-out, left 1.5s ease-in-out;
    -o-transition: width 1s ease-in-out, left 1.5s ease-in-out;
    transition: width 1s ease-in-out, left 1.5s ease-in-out;
}

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

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

Автор: Jonny Schnittger

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree