Содержание

Где брать красивые фоны для сайтов? — Хабр Q&A

Комментировать

https://unsplash.com/ — природа, пейзажи и разные спокойные фото. Изображений очень много и все они высоком разрешении;
getrefe.tumblr.com — здесь меньше контента, но есть альтернативные категории;
www.splitshire.com — более серьёзная альтернатива предыдущему сайту;
https://picjumbo.com/ — кроме кучи качественных фото есть фича встраивания изображения в разные шаблоны для демонстрации. Для веб дизайна и верстки самое оно.

Ответ написан

Комментировать

Комментировать

Белый фон, беспроигрышный вариант. Можно разбавить чем-то таким.

Ответ написан

Комментировать

Комментировать

Вот восхитительные градиенты: uigradients.com
А вот старые добрые, прозрачные текстурки: www.transparenttextures.com
—
Можно подобрать неплохое сочетание, при непрозрачности текстуры в 15%-35%

Ответ написан

более трёх лет назад

Комментировать

Комментировать

Комментировать

pixabay. com — работают по лицензии Creative Commons (передача в общественное достояние. Бесплатно, большой выбор, примерно 620 000 изображений и векторов, не нужно ссылок на автора или источник)

Ответ написан

более трёх лет назад

Комментировать

https://creativemarket.com/inspirationfeed/144145-…
Бывают бесплатные фоны на раздаче.

Ответ написан

Комментировать

everypixel — поиск по бесплатным стокам

wallhaven — в основном обои, но это очень хорошая база пикч для веба

Ответ написан

Комментировать

Html цвет фона — Портал ON

портал on

Автор adm-pcst На чтение 3 мин Просмотров 280 Опубликовано

Содержание

  1. Как изменить цвет фона в HTML?
  2. Как задать цвет текста и цвет фона в HTML?
  3. Как задать цвет фона веб страницы?
  4. Как изменить фон на картинку в HTML?
  5. Как задавать цвет текста в HTML?
  6. Как выделить текст другим цветом в HTML?
  7. Как изменить цвет фона страницы в Word?
  8. Как изменить стиль шрифта в HTML?
  9. Какие команды способны изменить цвет шрифта?
  10. Как сделать фон для текста?

Как изменить цвет фона в HTML?

Цвет фона

  1. Цвет фона веб-страницы задается с использованием атрибута bgcolor тега <body>.
  2. В качестве фона можно использовать любое подходящее для этого изображение. …
  3. По умолчанию, при использовании полосы прокрутки, фоновый рисунок перемещается вместе с содержимым веб-страницы.

Как задать цвет текста и цвет фона в HTML?

Чтобы изменить цвет текста в любом элементе HTML-страницы надо указать внутри тега атрибут style. Общий синтаксис следующий: <тег>… </тег> — указание цвета текста по имени.

Как задать цвет фона веб страницы?

Для изменения цвета фона всей веб—страницы применяется свойство background-color (или универсальное background), которое добавляется к селектору body, а для цвета текста используется свойство color, как показано в примере 1.

Как изменить фон на картинку в HTML?

Фон на веб-странице

  1. Установка фонового рисунка на веб-страницу традиционно происходит через атрибут background тега <body>. …
  2. Добавление рисунка происходит путем установки адреса картинки через ключевое слово url.

Как задавать цвет текста в HTML?

Цвет шрифта на сайте можно задать при помощи HTML-кода. Для этого существует тег font.
…
Атрибуты тега FONT

  1. color – задает цвет текста;
  2. size – устанавливает размер текста;
  3. face – задает семейство шрифтов.

Как выделить текст другим цветом в HTML?

Как выделить другим цветом фрагмент текста? Создайте новый класс (например, colortext) и установите для него стилевое свойство color с желаемым значением цвета. После чего выделение фрагмента текста происходит с помощью тега <span>, класс которого совпадает с именем класса, созданным выше.

Как изменить цвет фона страницы в Word?

Добавление и изменение цвета фона

  1. Перейдите в конструктор > цвет страницы.
  2. Выберите нужный цвет в области Цвета темы или Стандартные цвета. Если нужного цвета нет, выберите другие цвета ,а затем в поле Цвета выберите нужный цвет.

Как изменить стиль шрифта в HTML?

Для того, чтобы изменить размер шрифта, воспользуйтесь атрибутом size тега <font>. Чтобы поменять цвет шрифта, воспользуйтесь атрибутом color тега <font>. Чтобы добавить шрифт, нужен атрибут face тега <font>.

Какие команды способны изменить цвет шрифта?

Ответ. С помощью атрибутов тега <FONT> можно менять цвет текста (атрибут color ), размер шрифта (атрибут size ) и гарнитуру шрифта (атрибут face ). Почему задавать конкретный шрифт для гипертекстового документа не рекомендуется?

Как сделать фон для текста?

Проделайте следующее:

  1. Выделите нужный фрагмент текста.
  2. Во вкладке «Главная», в группе «Абзац» нажмите на кнопку «Заливка».
  3. В окне «Цвета темы» выберите нужный цвет. Помимо стандартных цветов, здесь имеется возможность для выбора других цветов, которые можно использовать в качестве фона в документе.

 

примеров и лучших практик — Smashing Magazine

  • 17 минут чтения
  • Вдохновение, Витрины, Веб-дизайн, Фоны
  • Поделиться в Twitter, LinkedIn
Об авторе

Мэтт Кронин — заядлый графический дизайнер, веб-дизайнер/разработчик, программист Cocoa, фотограф, цифровой художник и т.п. Он также любит писать и делает… Больше о Мэтт ↬

Веб-дизайн прошел долгий путь с момента своего появления, особенно в плане стиля. Взгляните на сайт 10-летней давности и сравните его с сегодняшним. Различия огромны. Одно из основных изменений, которое вы заметите, — это фон. Сегодня фоны являются одной из основных функций, определяющих, насколько визуально интересен веб-сайт. Фон содержит тему веб-сайта, и существует огромное количество возможностей при разработке фона веб-сайта. Эта статья выходит за
лучшие практики и популярные тенденции фонов на современном этапе инновационного веб-дизайна . Вам также могут быть интересны следующие статьи по теме: * Тенденции веб-дизайна на 2009 г. * Тенденции мобильного веб-дизайна на 2009 год

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

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

Вас также могут заинтересовать следующие статьи по теме:

  • Фоны в CSS: все, что вам нужно знать
  • Почему и как использовать текстуры в веб-дизайне
  • Текстуры и шаблоны0004

Основные структуры фона

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

Больше после прыжка! Продолжить чтение ниже ↓

Фон тела Фон тела — самый «дальний» фон. Обычно это изображение, иллюстрация, текстура/узор или другой графический элемент.

Фон содержимого Другой уровень структуры — фон контента. Это фон текста, изображений и других базовых данных или информации.

Вариант 1: многослойный фон содержимого и тела

Первая структура представляет собой несколько слоев фона. Внизу — фон тела. Затем поверх него накладывается фон контента.

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

На приведенном выше рисунке показан макет, в котором элементы содержимого отделены друг от друга. Ниже приведена более распространенная форма слоистой структуры. Обертка и содержимое имеют фон заданной ширины, а за пределами установленной ширины виден нижний слой.

Вариант 2: содержимое непосредственно на основной иллюстрации или текстуре

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

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

Вариант 3: Тело и фон содержимого как единое целое

Наиболее простой и базовой структурой является та, в которой фон содержимого является фоном тела. Обычно это делается одним цветом или несколькими разными цветами, но ничего сложного.

На приведенном ниже веб-сайте показана эта структура с одноцветным фоном.

На веб-сайтах так много мест, где можно реализовать хороший дизайн фона. Два из этих мест — это заголовок и верхняя часть обертки. Вот несколько советов о том, как работать с фоном в этих двух областях.

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

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

Вот один из примеров заголовка, который красиво перетекает в фон содержимого. Вместо резкого и мгновенного перехода с изображением графика исчезает:

Следующий подход сильно отличается от эффекта перехода, но работает так же хорошо.

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

Flowing Illustrated Wrappers

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

Соответствие края изображения цвету кузова

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

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

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

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

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

Кроме того, рисунок заголовка продолжается внизу упаковки. Это поддерживает великую тему на всей странице.

Фоны всего тела

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

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

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

Использование бликов или скосов для разделения цветов Одним из широко используемых методов Web 2. 0 является выделение (по сути, скосов) для разделения разных цветов на фоне или элементе, если уж на то пошло. Сейчас мы просто сосредоточимся на фоновых бликах.

Итак, как использовать скосы? Это просто две 1-пиксельные линии, используемые для разделения цветов. Посмотрите на изображение ниже. Вы заметите, что при переключении цвета фона используется легкая подсветка. Это делает макет очень красивым и чистым, добавляя объем веб-сайту.

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

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

Этот метод также используется на веб-сайте Blog Action Day для разделения зеленого, серого и более темных цветов. Обратите внимание, что между светло-серым вверху и зеленым находится белая линия шириной 1 пиксель. Кроме того, ниже находится светло-зеленая 1-пиксельная линия, разделяющая зеленый и темно-серый.

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

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

Эта техника почти создает эффект параллакса. Я говорю «почти», потому что эффекты параллакса обычно имеют много слоев для создания эффекта движения. Самым известным примером веб-сайта с хорошим эффектом параллакса на основе CSS является Silverback.

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

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

Creattica Daily использует именно этот прием. В качестве фона используется тонкий повторяющийся узор, но он остается в контролируемом цветовом диапазоне.

Еще одним чистым дизайном является веб-сайт Product Planner, который имеет аналогичный шаблон и демонстрирует ту же технику небольшого контраста. Эта текстура обеспечивает более привлекательный визуальный опыт, помогая привлечь пользователя.

Сочетание текстуры и иллюстрации Некоторые веб-сайты используют только один или другой, но почему бы не комбинировать методы? Это создает еще более привлекательный и уникальный визуальный опыт. На приведенном ниже веб-сайте Web Design Ledger иллюстрация сочетается с текстурой дерева. Однако рисунок тонкий и не сильно контрастирует с текстурой дерева.

Добавить измерение Еще один отличный способ поднять дизайн веб-сайта на новый уровень — добавить объем с помощью методов освещения и иллюстраций. Dimension улучшает визуальный опыт и показывает истинное мастерство.

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

Изображения всего тела

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

Ниже приведен прекрасный пример этой техники от Nike. Он использует очень большое изображение в качестве фона, но фон фиксирован. Контейнер содержимого и фон содержимого прокручиваются, а фоновое изображение тела — нет. Кроме того, он использует изображение, которое передается во всех разрешениях, и изображение не масштабируется.

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

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

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

Я воспользуюсь тем же примером от Kraft еще раз. Если вы посмотрите очень внимательно, вы заметите, что изображение на самом деле не очень богатое цветом. Это не потому, что это плохой образ, а потому, что он должен быть немного скучным…

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

Создание бесшовных плиток или повторяющихся фонов

Самый простой способ сделать хороший фон — использовать повторы. Для этого не требуются большие изображения, но вы должны учитывать множество факторов при создании повторяющегося фона. Чтобы упростить объяснение, я буду использовать веб-сайт Брэда Колбоу в качестве примера, потому что он плавно разбивает изображение на части.

Использование больших изображений для повторения Чтобы сделать действительно хороший фон, вы должны использовать большие изображения. Фоновое изображение, используемое Брэдом Колбоу, имеет размер около 1000 пикселей, затем оно повторяется. Взгляните на изображение ниже. Красные линии показывают, где изображение заканчивается и повторяется.

Идеально выровняйте края Что еще более важно, края изображений должны идеально совпадать. Область, где встречается изображение, должна быть точно такого же цвета, что означает, что когда вы создаете фоновое изображение, правая и левая стороны должны совпадать. При использовании фигур они должны соединяться четко.

Взгляните на пример ниже. Первый снимок экрана — это точное изображение (в масштабе), используемое в качестве фона веб-сайта. Затем ниже приведен снимок экрана, показывающий, как изображение встречается, когда оно настроено на повторение. Края фонового изображения идеально совпадают. Обратите внимание, как облако течет без каких-либо перерывов и перерывов, а цвет воды на правом и левом краях одинаков.

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

Поместить рисунок в один раздел, но не в другой Другой способ замаскировать повторяющееся изображение — поместить элемент в одну часть фона, а не в другую. Что это значит? Что ж, возьмем еще раз пример с веб-сайта Брэда Колбоу.

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

Методы создания фона содержимого/оболочки

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

Простой градиент

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

Посмотрите на скриншот ниже и попробуйте представить его без градиентного фона. Это было бы очень скучно и пресно. Такой простой эффект может иметь большое значение.

Тонкая текстура

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

Ниже приведен достойный пример использования текстуры. Фон кузова очень сильно текстурирован. Фон содержимого соответствует этому стилю, но не так сильно текстурирован, как основной текст.

Переход оболочки к фону тела

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

Стиль границ обертки/модулей

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

Использование полупрозрачного фона содержимого в многоуровневых проектах

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

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

Витрина с элементами помощи

365 дней астрономии Красивый фон с причудливой фоновой иллюстрацией обертки.

TN Отпуск Очень красивая смесь стиля гранж и коллажа изображений.

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

Милость Александрийская Хороший пример узора, который дополняет тему дизайна.

IconDock Помимо красивой иллюстрации, на этом сайте отличная текстура дерева. Графика текстуры статична, поэтому проблем с прокруткой нет.

Старый лофт Вот очень хороший пример размещения контента непосредственно на иллюстрации.

Студиобанки Хороший фоновый рисунок с идеальным цветом.

ХатчХаус Забавный иллюстрированный фон, привлекающий внимание пользователя.

280 слайдов Удачное сочетание цветов и градиенты оживляют дизайн.

ИЮНЬСКОЕ ОБЛАКО Иллюстрированный заголовок и шаблон для его разделения.

Эндрю Грейг Красочный заголовок и удачное использование скоса для разделения контейнеров.

ГОТОЧИНА Очень красивое изображение, которое затемняется, и хорошее использование полупрозрачных элементов.

электронная свадьба Неконтрастные формы на фоне кузова идеально дополняют остальную часть дизайна.

Беллингем Недвижимость Хорошая графика заголовка и красиво текстурированный фон обертки.

Дуплика Отличный и яркий фон тела.

АНИдея Причудливый, но мощный фон тела со стилем оболочки, который работает с фоном.

Саммит флеш-игр Этот веб-сайт использует красочный статический фон тела.

твиступ Яркий и интенсивный статический фон под отдельными элементами контента.

Проектная болезнь Веселый и легкий, в этом дизайне контент накладывается прямо на фон.

РапидВивер Красивый фон-обертка, который постепенно превращается в простой белый фон.

Sony CES 2009 Мощный фон с наложенными на него отдельными модулями.

Медиокор Это потрясающий фон с хорошим размером.

Крис Мерритт Несколько световых эффектов с уникальным узором, наложенным сверху для создания крутого визуального эффекта.

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

Расширенный оздоровительный центр Цвета фона навигации сразу привлекают внимание пользователя, но при этом работают с остальным дизайном.

август Фоновое изображение не слишком отвлекает и хорошо исчезает.

Рекомендации по оптимизации фонового видео HTML

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

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

Делайте фоновые видео короткими

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

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

Уменьшить движение и скорость

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

Оптимизация видеофайла

Здесь нужно сделать три основных действия:

1) Сохранить размеры Standard HD

Ваше видео может быть HD (высокой четкости), то есть видео 720p (1280 x 720 пикселей). На самом деле нет причин экспортировать фоновое видео в формате Full HD (1920 x 1080) — это просто излишество и потеря пропускной способности.

2) Низкая частота кадров

Частота кадров 24 или 25 кадров в секунду достаточна. В конце концов, мы не продюсируем голливудский фильм! Меньшее количество кадров означает меньший размер файла.

3) Удалить аудиоканал

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

Что касается оптимизации видео, мы используем бесплатное приложение для Mac под названием Handbrake, которое существует уже много лет и имеет ряд предустановок и настроек, которые дают вам большой контроль. Если вы более техничны, вы можете оптимизировать видео с помощью командной строки, используя ffmpeg. Есть даже онлайн-сервисы, которые оптимизируют видео. Поиск в гугле выдаст десятки.

Оптимизация изображения афиши

Изображение афиши — это изображение, которое отображается во время загрузки видео. Обычно он совпадает с первым кадром видео, поэтому загрузка видео выглядит бесшовной. Не забывайте, что это изображение должно быть оптимизировано, как и любое другое изображение.

Поддержка нескольких форматов видео

Если вы хотите работать с различными браузерами, экспортируйте видео в формате mp4 и webm. Размеры сжатых файлов этих видео, вероятно, будут очень похожими. Вот простой пример того, как код может выглядеть на веб-странице: 

 <видеопостер="/bg-video-posterimage.jpg">

Мы предоставляем несколько форматов, поскольку не все браузеры поддерживают одни и те же форматы видео. Используя «исходные» элементы, браузер будет использовать первый из них, который он понимает (например, Safari будет использовать mp4, а Chrome — webm).

Теперь, когда видео готово для отображения на вашей странице, обратите внимание на следующие моменты:

Обеспечьте контрастность

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

Добавить кнопку паузы

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

Пример оптимизации фонового видео: Tesla

На момент написания этой статьи у Tesla есть фоновое видео на странице модели Y: https://www.tesla.com/modely

Это видео выглядит великолепно и демонстрирует их продукт в действие, похожее на рекламу. Несколько фактов об этом видео:

  • Оно длится всего 14 секунд
  • Звук отсутствует (хотя в этом видео есть стереофонические аудиоканалы без звука. Возможно, их удаление может еще больше уменьшить размер файла)
  • Видео зацикливается
  • Есть элементы управления видео, если вы наводите курсор на видео, что позволяет пользователю приостановить его
  • Достаточный контраст, чтобы прочитать текст над видео
  • Оно в формате mp4 (они даже не обслуживаются webm в качестве альтернативного источника на рабочем столе)
  • Размеры 1254 × 1080 (нечетные размеры, но ближе к квадрату, чтобы соответствовать дизайну их страницы)
  • Размер всего 2,9 МБ
  • Частота кадров 25 кадров в секунду
  • Битрейт составляет 1,68 Мбит/с
  • Они предоставляют альтернативную веб-версию для мобильных устройств

В целом, это хороший пример оптимизации фонового видео.

Окончательная оптимизация: мобильная версия

В зависимости от проекта может возникнуть необходимость показывать меньшее видео на мобильных устройствах или вообще не показывать видео (вместо этого использовать изображение) для экономии трафика ваших пользователей. Мы уделяем большое внимание Google Page Speed ​​Insights и Core Web Vitals, о которых я говорил в своем посте «Улучшение работы с Google Page с помощью Core Web Vitals». Это очень важно, если вы хотите, чтобы ваш сайт отображал страницы быстро.

Изучая Web Vitals в проектах с фоновыми видео, которые должны отображать изображение на мобильных устройствах, мы заметили, что даже несмотря на то, что видео не показывалось на мобильных устройствах (потому что мы скрывали его с помощью медиа-запросов CSS), оно все равно продолжало отображаться. загружаться в фоновом режиме, как и постер к видео. Мы не хотели, чтобы какая-либо часть видеоэлемента загружалась (мы хотели показать совершенно отдельное мобильное изображение, над которым у нас было больше контроля с помощью CSS, чем это позволяло изображение постера), поэтому нам пришлось сделать еще один шаг. Это было легче сказать, чем сделать — при поиске в Интернете было не так много информации о ленивой загрузке изображения видеопостера.

Для этого нам понадобилась помощь JavaScript. Мы уже использовали Lazy Sizes для отложенной загрузки изображений (это означает, что изображения не загружаются на страницу до тех пор, пока пользователь не прокрутит изображение, что позволяет страницам загружаться быстрее). Мы поняли, что существует плагин/расширение Lazy Sizes под названием Openhooks, которое расширяет lazySizes для дополнительной ленивой загрузки вещей, отличных от изображений, включая скрипты/виджеты, фоновые изображения, стили и видео/аудио элементы.

Вот пример того, как мы реализовали это для элемента видео. Пример кода находится в Twig, а рассматриваемый сайт был построен на Craft CMS, хотя этот метод также будет работать с другими языками шаблонов и другими системами: 

 {# Обратите внимание на атрибуты 'data-' и пустое автовоспроизведение для плагина lazysizes Openhooks, поэтому ничего из этого не загружается на мобильных устройствах.  #}


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

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

Надеюсь, вы сможете использовать эту статью в качестве справочного материала, если кому-то нужно создать видео и он задает такие вопросы, как «Как долго должна выполняться анимация, прежде чем она зациклится? Существуют ли технические параметры, которые должен знать аниматор, чтобы сделать файл « light’, чтобы сократить время загрузки? Какой формат файла предпочтительнее?» — именно те вопросы, которые вызвали этот пост.

No related posts.