Трансформации CSS в адаптивном шаблоне

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

Трансформации CSS являются отличным средством для добавления шарма вашему адаптивному дизайну сайта. Элементы, такие как текст и/или изображения, будут плавно перемещаться при изменении размера окна браузера. И хотя такие свойства шаблона часто остаются за рамками основного внимания, их легко реализовать и они выглядят существенно лучше, чем резкое "перепрыгивание" блоков текста и картинок.

В нашем примере мы изменяем размер текста, если размер окна браузера достигает определенных размеров.

Устанавливаем для текста следующие стили. Трансформация текста будет происходить с использованием анимации “ease-in-and-out”.

body {
    font-size:11em;
    transition:all .5s ease-in-out; 
    -o-transition:all .5s ease-in-out; 
    -moz-transition:all .5s ease-in-out; 
    -webkit-transition:all .5s ease-in-out;
}

Выше приведенный код CSS устанавливает правила трансформации для всего. Каждый стиль, который изменяется в медиа запросах ниже будет трансформироваться в течении .5s с использованием перехода по функции “ease-in-and-out”.

Разный размер шрифта устанавливается в медиа запросах в зависимости от размера окна браузера.

@media screen and (max-width:500px) {
body {
        font-size:8em;
    }
}

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

Правила действуют и в отношении цвета и прозрачности. Ниже приведенный пример выполняет трансформацию цвета.

body {
    font-size:11em;
    color:#000;
    transition:all .5s ease-in-out; 
    -o-transition:all .5s ease-in-out; 
    -moz-transition:all .5s ease-in-out; 
    -webkit-transition:all .5s ease-in-out;
}
 
@media screen and (max-width:500px) {
body {
        font-size:8em;
        color:#ff0000;
  }
}

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/3XQW9_DEjE0/lessons.php

Читать комменты и комментировать

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



Защитный код
Обновить

Трансформации CSS в адаптивном шаблоне | | 2012-11-18 22:14:47 | | Статьи Web-мастеру | | При использовании адаптивных шаблонов изменения размеров окна браузера обычно сопровождается бессистемным перемещением элементов по экрану в точках излома. Для пользователей такая работа интерфейса | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: