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

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

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

Давайте взглянем на код CSS3 для размещения этих фоновых изображений на 100% -ной ширине. Я буду использовать коды из статьи Криса Койера, чтобы объяснить, насколько легко это можно реализовать.
html {
  background: url (https://assets.hongkiat.com/uploads/oversized-background-image-design/bg.jpg) фиксированный центр без повтора центра;
  -webkit-background-size: обложка;
  -moz-background-size: обложка;
  -o-background-size: обложка;
  размер фона: обложка;
  -ms-фильтр: “progid: DXImageTransform.Microsoft.AlphaImageLoader (src = ‘https: //assets.hongkiat.com/uploads/oversized-background-image-design/bg.jpg’, sizingMethod = ‘scale’)”;
  filter: progid: DXImageTransform.Microsoft.AlphaImageLoader (src = ‘. https: //assets.hongkiat.com/uploads/oversized-background-image-design/bg.jpg’, sizingMethod = ‘scale’);
}
Элемент HTML является гораздо более легкой целью, чем тело, так как мы знаем, что все заключено внутри. Затем мы применяем фоновое изображение с полным центральным положением, без повтора и фиксируем при прокрутке. Более новый CSS3 фон-размер свойство это то, что применяет всю магию позиционирования. Использование префиксов многих поставщиков также предоставит нам более широкий спектр поддержки.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Следует отметить, что свойства фильтра не всегда хорошо воспроизводились внутри IE. Некоторые люди сообщают о проблемах с полосами прокрутки или выделением текста на странице. Чтобы обойти эту ошибку, вы можете попробовать применить коды фонового изображения к внутреннему элементу div внутри тела, установив полную ширину / высоту 100%.
CSS2 Fallback
Удивительно, но я обнаружил, что больше браузеров поддерживают метод CSS3, чем любые другие стили. Но я все еще буду предлагать этот вторичный метод, используя обычные свойства CSS для элемента img.

Я чувствую, что самый большой нюанс с этим методом заключается в том, что при щелчке правой кнопкой мыши по фону открывается контекстное меню, как будто вы нажимаете на изображение, а не на веб-страницу. Это может раздражать посетителей, которые не могут понять, почему меню отличается. Но если вы боретесь с методом CSS3 и по-прежнему хотите избежать JavaScript, то это может быть вашим единственным вариантом.
img.bg {
  / * Установить правила для заполнения фона * /
  минимальная высота: 100%;
  минимальная ширина: 1024 пикселей;

  / * Настройка пропорционального масштабирования * /
  ширина: 100%;
  высота: авто;

  / * Настройка позиционирования * /
  положение: фиксированное;
  верх: 0;
  слева: 0;
}

Тег изображения должен быть расположен прямо внутри вашего тела, прежде чем открывать любые другие элементы. Изображение упадет на задний план, и весь ваш другой контент должен обернуться вокруг. Известно, что это работает во всех основных браузерах (Safari / Firefox / Chrome / Opera), но не поддерживается в IE6-7.
Решения JavaScript
Давайте перейдем к более динамичным кодам, используя плагины jQuery вместо типичных CSS. Они часто пишутся с гибкостью, поэтому мобильные смартфоны и адаптивные макеты должны быть приоритетом № 1. jQuery также является довольно распространенным языком, с которым большинство веб-разработчиков знакомы.

Можно выбрать из десятков плагинов jQuery, но я представлю три моих фаворита. Большинство из этих библиотек кода очень легко реализовать и настроить на новом веб-сайте. Все они размещены на Github и, таким образом, представляют собой отличное решение с открытым исходным кодом. Это означает, что вы можете ожидать меньше ошибок и большей поддержки, так как все больше разработчиков делятся своими знаниями в базе кода каждого плагина.
Бэкстретч
Некоторые разработчики видели название Бэкстретч появляются на других сайтах и ​​в блогах. Это очень популярный плагин, который существует уже почти 3 года, начиная с декабря 2009 года. Разработчики с нетерпением обновляли этот плагин, и теперь он даже поддерживает слайд-шоу изображений и статические фоновые изображения.

Чтобы реализовать код самостоятельно, просто скачать копию сценария и прикрепите его к своей веб-странице с помощью тега сценария. Если вы хотите использовать облачный хостинг CDN, попробуйте эта ссылка cdnjs вместо. Тогда нам просто нужно открыть другой тег сценария и набрать одну строку кода jQuery, например:
$ .Backstretch ( “https://assets.hongkiat.com/uploads/oversized-background-image-design/bg.jpg”);

Библиотека кода была написана для однострочного исполнения. Это делает Backstretch очень простым даже для нетехнических веб-разработчиков. Вам не нужно применять дополнительную HTML-разметку или другие свойства CSS. И изображения будут вести себя как 100% реагировать на окно браузера.
// Длительность – это промежуток времени между слайдами,
  // и fade – это значение, которое определяет, как быстро исчезнет следующее изображение
  $ .Backstretch ([
“https://assets.hongkiat.com/uploads/oversized-background-image-design/photo1.jpg”,
“https://assets.hongkiat.com/uploads/oversized-background-image-design/photo2.jpg”,
“https://assets.hongkiat.com/uploads/oversized-background-image-design/photo3.jpg”
], {длительность: 3000, затухание: 750});

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

Вам нужно будет включить копию файлов Vegas JS и CSS, которые можно найти на Страница Github, Этот плагин может работать, используя только одну строку кода, но есть так много возможных настроек по сравнению с Backstretch. А пока давайте создадим простой демонстрационный пример в коде:
$ .vegas ({
  ЦСИ: ‘/ IMG / background.jpg’
});

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

Этот скрипт работает так же, как и раньше, где вам понадобится копия jQuery и копия Anystretch файлы, Затем просто настройте синтаксис, как у меня ниже, помещенный в другой набор теги. Обратите внимание, что параметр скорости определяет, насколько быстро изображение исчезнет после завершения загрузки, измеряется в миллисекундах.
$ .anystretch (“https://assets.hongkiat.com/uploads/oversized-background-image-design/bg.jpg”, {скорость: 150});

Этот метод также отлично работает с элементами div или другими элементами, находящимися внутри тела. Размер каждой BG-фотографии будет по-прежнему изменяться при правильном соотношении сторон, и он будет полностью реагировать на мобильные браузеры. Демонстрационный код ниже помещает фоновое изображение в div с идентификатором #leftbox.
$ (‘# leftbox’). anystretch (“https://assets.hongkiat.com/uploads/oversized-background-image-design/bg.jpg”, {скорость: 150});

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

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

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

В этой витрине я собрал более 60 примеров веб-сайтов с использованием больших фоновых фотографий. Проверьте стили макета и посмотрите, как вы можете имитировать подобную технику в ваших собственных проектах.
Hiut Denim
Hiut Denim дизайн сайта компанииКерем Суер
Веб-сайт независимого дизайнера Kerem из Сан-ФранцискоGuns ‘n Roses
Фотографии музыкального сайта группы Guns n RosesН-Арт
работа дизайн продуктов брендинг студия макет сайтаCayena Agency
острый перец чили макет сайта фотографияДизайн Хаус Стокгольм
дизайн интерьера стокгольм макет сайтаМартин Коста
Мартин Коста сайт большие фотографии фонИнтерьер Davidia
сайт студии дизайна интерьера мебелиСайт интернет-маркетингового агентстваДаниэль Филлер
Верстка сайта Даниэля ФиллераWhitmans
Макет сайта магазина гамбургеров в Нью-ЙоркеТим Руссилье
Сайт Тима Руссилье дизайн больших фото фоновTag Interactive
большой видео фоновый эффект сайт агентства TAGАнна Сафрончик
Анна Сафрончик персональный макет сайта большие фото фоныDOJO Studio
Верстка сайта агентства немецкой дизайн-студииEncandle
дизайн студия агентства макет сайтаCreativePeople
студия креативных людей дизайн сайта агентствоДвенадцать Ресторан
ресторан еда бар готовка ужин макет сайтаde Certeau & Associates
архитектура макет сайта студия агентство большие фотоMedis Food & Bar
макет сайта ресторана еды большие фоновые изображенияЯн Студиос
полноэкранный большой сайт фоновые фотографии ян дизайн агентствоСлепой парикмахер
классический ретро фон фотографии веб дизайн Blind BarberReflexion Weddings
макет сайта свадебной европы большая фотографияCGRendering
сайт архитектуры студия портфолио агентстваШелли Сэндзер
Сайт Шелли Sandzer ресторан большой макет фотоМаркус Томас
идея дизайн агентства макет сайта большие фотоБиамар 2012
модная студия дизайн сайта большие фото фонInzeit
Inzeit сайт студии мобильной розничной торговли макетБлиц СФ
Сайт студии дизайна Сан-Франциско Калифорния БлицAu Petit Panisse
модный ресторан макет пекарни au petit panisse 2012Рингве Медиа
Макет сайта Ringve Media большой фото фон КитайШоу и Шоу Фотографии
Shaw Photography макет сайта большой фон фотографииWerkstette
Werkstette макет сайта большие фотографии фон CSS HTMLSalt Surf
макет сайта розничной продажи соль прибой калифорния океанПабло Гонсалес
Пабло Гонсалес директор персонального сайтаДэвид Маллетт
Верстка фото портфолио Дэвида МаллетаМокси созо
макси сайт макет сайта большие фотографии фонДэвид Нолан
Дэвид Нолан Нью-Йорк фотография портфолиоFlaek
Flaek обувь дизайн сайта макет большие фоныPizzaza
Итальянская пицца макет сайта большие фото фон вдохновение500 Вт
дизайн студия агентства макет сайта 500wattДельфины Общение
Дельфин Дизайн студия сайта агентства фоновых фотографийЛучшие фотографы доллара
топ доллар фотографы макет сайта дизайн креативЛучшие модели доллара
агентство модельного макета сайта Top Dollar ModelsРебекка Барри
писатель и режиссер Ребекка Барри верстка сайта 2012Истории исцеления
Информационная верстка сайта «История исцеления» в Новом ОрлеанеГолиаф Спортивная одежда
Голиаф спорт спортивный дизайн сайта большой фон фотоOnside Спортивное Агентство
Сайт агентства Onside Sports, студия классикаДжейсон Миллер
Студия Джейсона Миллера дизайн сайтаПоказать объявление
Италия Display Креативное агентство, студия макет сайтаИнес Паперт
большие фотографии фон макет сайта ines papertПрогулка по воздуху
Airwalk скейтборд дизайн макета сайтаХассе Бронтен
Хассе Бронтен на сайте комик немецкого фон фотографии CSSИнес Мария Гамлер
чистое удовольствие дизайн сайта Инес Мария ГамлерБригада убийц
интернет магазин одежды мода макет сайта большие фото фон35 мм дизайн
35мм дизайн студия большие фото фон макет сайтаВесна лето
Весна лето дизайн сайта вдохновениеSandlewood Homes
Сэндлвуд интерьер дома макет сайта портфолиоМэтт Портерфилд
Макет портфолио фотографий Мэтта ПортерфилдаАрхитектура ASAA
asaa архитектура дизайн интерьера студия макет сайтаAyerViernes
Агентство портфолио Ayer Viernesах asociados
asociados дизайн интерьера испанского макета сайта

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Похожие записи

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

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