—»     —»   CSS3-анимированные Media Queries
  Раздел: Web-дизайн, CSS/Style Sheets   Нет комментариев  

CSS3-анимированные Media Queries



Сейчас стало очень модно применять в дизайне сайта media queries, так как в значительной степени возросло число устройств, посредством которых люди по всему миру выходят в интернет. Следовательно, все разработчики сайтов должны стремиться к тому, чтобы их творения одинаково превосходно работали на всех устройствах. Именно в этих случаях на помощь приходит адаптивный дизайн – процесс определения, с какого устройства был произведен заход на сайт, и дальнейшая адаптация дизайна под его возможности.

Например, пользователь открывает ваш сайт с помощью настольного ПК, разрешение экрана которого значительно больше, чем у смартфона, и ввиду наличия большого экрана мы можем отобразить веб-сайт с более высоким разрешением, растянув элементы на странице. Если же посетитель использует смартфон, то размер экрана ограничен, и поэтому нам нужно немного перестроить элементы, чтобы они идеально вписались под используемое разрешение.

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

Что же такое Media Queries

CSS3 предлагает нам много новый функций, которые можно использовать в веб-дизайнах, и одна из этих функций может сильно помочь нам в реализации удобного функционала нашего сайта. Сегодня речь пойдет о Media Queries.

Media Queries используются для определения максимального разрешения экрана устройства пользователя, и позволяет вам применять разные CSS-стили, кроме основного использующегося. Данную технологию прозвали «адаптивный дизайн», который подстраивается под разрешение экрана устройства, которое использует посетитель вашего сайта.

В прошлом единственный метод, посредством которого мы могли хоть как-то адаптировать веб-сайт под разрешение, заключался в разработке гибкого каркаса дизайна, но media queries позволяют нам делать гораздо больше. С помощью media queries вы можете скрыть боковую панель на странице, если она открывается с экрана с маленьким разрешением. Это позволит вам отобразить важный контент, и даже увеличить размер шрифтов, используемых на странице. Всё это было невозможно во времена гибких каркасов.

Альтернативы Media Queries

Если нам нужно, чтобы веб-сайт корректно отображался на всех экранах устройств, которые используют посетители, но не хотим применять Media Queries, что нам делать тогда?

CSS3-анимированные Media Queries

Мы можем использовать мобильные приложения – отличное решение, в рамках которого вы сможете создавать красивые приложения, которые способны даже оповещать пользователей, если контент на сайте был обновлен. Проблема здесь заключается в том, что для этого требуется гораздо больше ресурсов на разработку приложения, в отличие от того, когда мы просто используем Media Queries. Здесь также существует проблема разных операционных систем, установленных в устройствах. Если вы захотите разработать приложение, то вам придется разрабатывать сразу несколько версий, чтобы они корректно работали (да и вообще просто работали) на iOS, Android, Windows Mobile, Blackberry и т.д. Media Queries, в свою очередь, способны адаптировать ваш сайт под любое устройство.

CSS3-анимированные Media Queries

Еще одна альтернатива заключается в применении jQuery Mobile. В данном случае мы разрабатываем HTML5-веб-сайт, который может корректно отображаться на большинстве популярных мобильных устройствах. Проблема здесь заключается в том, что поверх вашего сайта будет оперировать еще одна другая система.

Схожее с jQuery Mobile решение заключается в том, чтобы на серверной стороне определять, какой браузер использует посетитель для того, чтобы иметь возможность предложить ему другие таблицы стилей, в зависимости от разрешения его экрана. Минус здесь заключается в том, чтобы нам опять же придется разрабатывать и сохранять несколько версий CSS-документа для различных браузеров.

Media queries позволяют нам держать всего лишь 1 файл, который может быть использован во всех современных браузерах и на всех мобильных устройствах, им очень просто управлять, и с ним сможет справиться любой веб-дизайнер, на случай если вам придется его сменить.

Media Queries Boilerplate

Предлагаем вам отрывок кода, полученного из предложенного ранее отрывка, который поможет вам начать работу с вашими Media Queries.

/*Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width : 320px)
and (max-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Анимируем изменения в CSS-коде

Используя CSS мы можем добавить анимацию к различным элементам, а также можем задать анимацию к отдельным параметрам этих элементов.

Если мы используем Media Queries, то мы, скорее всего, будем изменять ширину и высоту элемента таким образом, чтобы он вписался в страницу. Как нам известно, изменения в параметрах ширины и высоты мы можем облагородить анимацией, посредством следующего кода:

/* webkit */
-webkit-animation-property: -webkit-width;
-webkit-animation-property: -webkit-height;
-webkit-transition-duration: 1s;

/* moz */
-moz-animation-property: -moz-width;
-moz-animation-property: -moz-height;
-moz-transition-duration: 1s;

/* opera */
-o-animation-property: -o-width;
-o-animation-property: -o-height;
-o-transition-duration: 1s;

Применив предложенный код к элементу ваших Media Queries, вы добавите анимацию, которая приукрасит изменения в параметрах высоты и ширины вашего элемента.

Веб-сайты с анимированными Media Queries

Предлагаем вам ознакомиться с некоторыми веб-сайтами, демонстрирующими вам возможности, которые нам представляются за счет Media Queries + CSS.















Ознакомьтесь с представленными выше сайтами, и не забудьте изменить размеры окошка, чтобы увидеть анимацию в действии.

Как добавить анимацию в Media Queries

Выше в нашей статье мы предлагали вам 2 отрывка кода, один для Media Queries Boilerplate и второй для применения анимации к Media Queries. Теперь мы можем свести всё это воедино.

Сначала в нашем примере мы будем изменять шаблон веб-сайта под смартфон. Мы изменим ширину основного элемента и боковой панели таким образом, чтобы они стали одинаковой ширины, и вместо того, чтобы быть расположенными друг за другом, один элемент будет расположен поверх другого.

.main{
width:800px;
display:inline-block;
}
.sidebar{
width:300px;
display:inline-block;
}

/*Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width : 320px)
and (max-width : 480px) {
.main{
width:480px;
}
.sidebar{
width:480px;
}
}

Как видно по примеру сверху, у нас будет простенький шаблон, состоящий из основного div’а и div’а боковой панели, которые будут отображены рядом друг с другом на экранах настольного ПК, так как общая ширина в разрешении будет 1100 пикселей. Затем нам нужно изменить ширину данных элементов для отображения на смартфонах, так как им просто-напросто не хватит места на экране. Итак, мы изменяем ширину обоих элементов таким образом, чтобы она была 480 пикселей, и тогда они будут отображены друг над другом.

Теперь мы можем добавить отрывок кода для анимации, чтобы приукрасить изменения в ширине и высоте элементов.

.main{
width:800px;
display:inline-block;
}
.sidebar{
width:300px;
display:inline-block;
}

/*Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width : 320px)
and (max-width : 480px) {
.main{
width:480px;
/* webkit */
-webkit-animation-property: -webkit-width;
-webkit-animation-property: -webkit-height;
-webkit-transition-duration: 3s;

/* moz */
-moz-animation-property: -moz-width;
-moz-animation-property: -moz-height;
-moz-transition-duration: 3s;

/* opera */
-o-animation-property: -o-width;
-o-animation-property: -o-height;
-o-transition-duration: 3s;
}
.sidebar{
width:480px;
/* webkit */
-webkit-animation-property: -webkit-width;
-webkit-animation-property: -webkit-height;
-webkit-transition-duration: 3s;

/* moz */
-moz-animation-property: -moz-width;
-moz-animation-property: -moz-height;
-moz-transition-duration: 3s;

/* opera */
-o-animation-property: -o-width;
-o-animation-property: -o-height;
-o-transition-duration: 3s;
}
}

Заключение

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

Конечно же, вряд ли кто-то специально посещает сайты, чтобы изменить размер окошка браузера, поэтому самой важной причиной здесь можно выделить необходимость корректного отображения веб-сайта на экранах мобильных устройств. Теперь вы не просто можете предложить посетителям корректное отображение вашего сайта, но и приукрасить эффект перестройки посредством анимации.

Если у вас будут примеры, которые вы хотели бы показать нам, обязательно воспользуйтесь формой для комментариев!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Опубликовал Design FactoRy   Прочитано (раз): 11056   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Видеочат рулетка с девушками
Статья о том, как понравиться девушке. Подробности читайте на сайте
chatruletkaz.com
Автосервис на Васильевском острове
Все виды услуг по ремонту автомобиля. Автосервис европейского уровня
autohausnord.ru
Стяжки нейлоновые
Кабельные стяжки,хомуты металлические,хомуты пластиковые,термоусадка
techelectro.ru

















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июнь 2019    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930