—»     —»   Focal Point: css-фреймворк для уменьшения изображений в адаптивных дизайнах
  Раздел: Фреймворки и Платформы   Нет комментариев  

Focal Point: css-фреймворк для уменьшения изображений в адаптивных дизайнах



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

Focal Point: css-фреймворк для уменьшения изображений в адаптивных дизайнах

Вам наверняка известно, что центр изображения не всегда является центром композиции. Это означает, что самые важные элементы изображения не обязательно расположены в его центре. С помощью Focal Point вы можете определять область, которая отображает самую важную часть вашего изображения при маленьких разрешениях. Области, выделенные при помощи Focal Point, будут видны независимо от того, насколько придется уменьшить изображение.

Как определить параметры Focal Point

Принцип Focal Point прост: на каждое изображение помещается сетка. Эта сетка состоит из 12х12 секторов. При помощи CSS мы определяем один из этих секторов сетки в качестве элемента отображения, который всегда должен оставаться в поле видимости. Представьте себе изображение Uncle Hugo. Определите его голову в качестве элемента отображения. Хотя лицо Hugo на исходном изображении находится справа, при уменьшенных разрешениях именно оно будет отображаться в качестве изображения. Нам не кажется, что на своем сайте Uncle Hugo потерпел бы другой вариант.

Чтобы определить Focal Point, мы задаем изображению 2 класса. Эти классы выставляют Focal Point внутри сетки по горизонтали и вертикали. Начинаем отсчет от центра сетки. Таким образом, у нас получается 6 классов, если считать вверх, вниз, влево и вправо.

<div class="focal-point left-3 up-2">
<div>
<img src="img.jpg" width="400" height="300" alt="" />
</div>
</div>

В данном примере Focal Point находится на три сектора влево от центра, а затем на два сектора вверх. Класс focal-point обязателен для div-элемента, окружающего изображение.

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

Как работает Focal Point

Режим работы Focal Point довольно просто понять: разные CSS-классы обрезают изображение при помощи отрицательных значений полей. Единиц измерения значения – em. Используйте изображения с соотношением сторон 4:3, чтобы получить максимальный результат, а для соблюдения пропорций 3:4 используйте класс portrait.

Завершение

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

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

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

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


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930