—»     —»   Большие фоновые изображения в веб-дизайне: советы и примеры реализации
  Раздел: Руководства   Комментариев: 1  

Большие фоновые изображения в веб-дизайне: советы и примеры реализации



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

Большие фоновые изображения в веб-дизайне: советы и примеры реализации

В сегодняшней статье мы хотим рассказать вам о нескольких техниках использования больших фоновых изображений. Это можно реализовать при помощи простой техники на CSS3/CSS2, либо за счет использования open source стороннего jQuery-плагина. Здесь нет правильных или неправильных ответов, разница лишь в поддержке среди устаревших браузеров.

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

CSS-хитрости

Для начала хотелось бы представить вам очень полезную статью на CSS Tricks, в которой рассказывается многое об этих идеях. Самое простое решение с отличным уровнем поддержки заключается в использовании CSS. Мы обнаружили, что метод с использованием CSS3 отлично работает в большинстве современных браузеров, и даже существуют специальные хаки, которые позволяют реализовать поддержку в Internet Explorer.

Давайте взглянем на CSS3-код для размещения этих фоновых изображения на всю ширину контейнера с адаптивными свойствами. Здесь мы будем использовать коды из статьи Chris Coyeir, чтобы вы видели, насколько просто здесь все реализовано.

html { 
background: url(http://media02.hongkiat.com/oversized-background-image-design/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://media02.hongkiat.com/oversized-background-image-design/bg.jpg', sizingMethod='scale')";
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.http://media02.hongkiat.com/oversized-background-image-design/bg.jpg', sizingMethod='scale');
}

* Демо

HTML-элемент определить гораздо проще, нежели тело документа, так как здесь мы можем быть уверенными в том, что все будет обернуто элементом. Затем мы применяем фоновое изображение с фиксированным позиционированием full-center, без повторений. Новое свойство CSS3 background-size – это то, что творит настоящие чудеса. Использование браузерных префиксов позволит нам добиться большей поддержки среди браузеров.

Важно отметить, что свойства filter не всегда отображаются приемлемо в IE. Некоторые люди сообщают, что у них возникают проблемы со скроллингами или выделением текста на странице. Чтобы обойти этот баг, вы можете попробовать поместить коды фонового изображения во внутренний div внутри тела документа, выставив 100% width и height.

Запасной вариант на CSS2

На удивление, мы обнаружили, что гораздо больше браузеров поддерживают CSS3, нежели старую версию стилей. Но мы все же расскажем вам о втором методе, подразумевающим под собой использование обычных CSS-свойств для элемента img.

Правда, самый главный нюанс здесь заключается в том, что при правом клике по фоновому изображению, пользователю будет отображаться контекстное меню, будто бы он нажимает по обычному изображению на сайте. Это может раздражать некоторых пользователей, которые не сразу поймут, в чем дело. Но если же вы испытываете какие-то проблемы с CSS3, но при этом ни в коем случае не хотите использовать javascript, то этот вариант может помочь вам.

img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;

/* Set up proportionate scaling */
width: 100%;
height: auto;

/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}

Демо

Тэг изображения должен быть расположен прямо в теле документа перед открывающими div-тэгами. Таким образом, изображение попадет в фон, и весь ваш контент будет расположен поверх. Этот метод должен работать во всех современных браузерах (Safari / Firefox / Chrome / Opera), но поддержка будет отсутствовать в IE6-7.

javascript-решения

Теперь давайте перейдем к более динамичным кодам, реализуемым при помощи jQuery-плагинов вместо обычного CSS. Зачастую эти плагины пишутся с учетом требований к гибкости, так что мобильные смартфоны и адаптивные шаблоны должны быть в приоритете №1. jQuery представляет собой довольно распространенный на сегодняшний день язык, и каждый веб-разработчик знаком с ним более или менее.

Существует множество jQuery-плагинов, из которых можно выбирать, но сегодня мы расскажем вам о наших любимых. Большинство из этих библиотек кода довольно просто использовать и настроить на сайте. Все они размещаются на GitHub, и представляют собой прекрасные решения, распространяемые по методу open source. Это означает, что здесь реже можно встретиться с багами и можно ощутить гораздо большую поддержку, так как в разработку кодовой базы этих плагинов вкладывают идеи и знания сразу несколько разработчиков.

Backstretch

Некоторые разработчики уже встречали название Backstretch. Это очень популярный плагин, появившийся 3 года назад – в декабре 2009 года. Разработчики постоянно обновляют этот плагин, и сегодня он поддерживает даже слайдер изображений и статичные фоновые изображения.

Чтобы встроить код самостоятельно, просто скачайте копию скрипта, и интегрируйте ее в страницу сайта используя тэг script. Если вы хотите воспользоваться облачным хостингом CDN, то воспользуйтесь этой cdnjs-ссылкой. Затем нам нужно будет просто открыть еще один тэг script и внести в него единственную строку jQuery-кода:

$.backstretch("http://media02.hongkiat.com/oversized-background-image-design/bg.jpg");

* Демо

Библиотека кода была написана таким образом, чтобы ее можно было использовать посредством всего лишь одной строки кода. Это делает Backstretch невероятно простым решением даже для тех, кто не знаком с технической стороной разработки сайтов. Вам не надо будет использовать дополнительную HTML-разметку или другие CSS-параметры. Изображения будут адаптироваться под размер окна браузера.

  // Duration is the amount of time in between slides,
// and fade is value that determines how quickly the next image will fade in
$.backstretch([
"http://media02.hongkiat.com/oversized-background-image-design/photo1.jpg",
"http://media02.hongkiat.com/oversized-background-image-design/photo2.jpg",
"http://media02.hongkiat.com/oversized-background-image-design/photo3.jpg"
], {duration: 3000, fade: 750});

Вышеприведенный код немного изменен, чтобы на фоне сайта было реализовано слайд-шоу. У вас будет возможность перечислить несколько путей до изображений, которые должны быть отображены в слайд-шоу, а за ними должны следовать некоторые мета-данные. Значение duration отвечает за время, через которое слайды перечисляются – указывается в миллисекундах. Значение 2nd fade определяет, сколько миллисекунд пройдет до того, как первое изображение сменится вторым и так далее.

Vegas

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

Вам нужно будет включить копию файлов Vegas JS и CSS, которые можно скачать на странице GitHub. Данный плагин работает за счет одной строки кода, но здесь представлено гораздо больше опций настройки, нежели в Backstretch. Вы можете ознакомиться со страницей документации здесь. А сейчас давайте приступим к разработке простенького демо при помощи данного кода:

$.vegas({
src:'/img/background.jpg'
});

* Демо

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

Anystretch

И последнее на сегодня jQuery-решение называется Anystretch, которое на самом деле работает в качестве форкинг-проекта от плагина Backstretch. Здесь можно видеть незначительные различия, которые помогают разработчикам обновлять фоновые изображения, либо применять фоновые изображения для разных элементов страницы.

Скрипт работает так же, как и вышеприведенные, и поэтому для начала вам понадобится скачать jQuery и выставить в проект файлы Anystretch. Затем вам нужно будет настроить синтаксис, как показано ниже, - поместить его внутрь еще одного набора тэгов
<script></script>
. Обратите внимание на то, что параметр speen определяет то, насколько быстро изображения будут затемняться и сменяться следующими (указывается в миллисекундах).

$.anystretch("http://media02.hongkiat.com/oversized-background-image-design/bg.jpg", {speed: 150});

* Демо

Данный метод также будет отлично работать и с div-элементами или другими элементами, которые располагаются в теле документа. Каждое изображения фона будет адаптироваться под размер окна браузера, и также будет отлично работать на мобильных устройствах. В нижеприведенном демо-коде фоновое изображение расположено в div-элементе с id #leftbox.

$('#leftbox').anystretch("http://media02.hongkiat.com/oversized-background-image-design/bg.jpg", {speed: 150});

Так что же выбрать?

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

Мы не можем однозначно сказать вам, какое решение является лучшим, так как все зависит от сайта. Но мы все же рекомендуем придерживаться HTML5/CSS3, и нам кажется, что CSS3-решение – это именно то, что нужно каждому современному веб-сайту. Но при этом следует признать, что многие из jQuery-плагинов отлично подойдут для разработки веб-сайтов, и предложат вам хорошую поддержку среди браузеров, которые до сих пор не умеют работать с CSS3.

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

Ключевые тэги: jQuery, CSS
Опубликовал Design FactoRy   Прочитано (раз): 19998   |   Оставлено комментариев: 1
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 14 мая 2016 @ 14:16
Написал: Людмила — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Спасибо за статью - прочитала с удовольствием.
Но, почему все ссылки в статье ведут на какие то левые сайты?
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

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

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


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


















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