Фоновая картинка | htmlbook.ru
Современные браузеры позволяют добавлять к элементу произвольное число фоновых изображений, перечисляя параметры каждого фона через запятую. Достаточно воспользоваться универсальным свойством background и указать для него вначале один фон и через запятую второй.
Для масштабирования фона предназначено свойство background-size, в качестве его значения указывается 100%, тогда фон будет занимать всю ширину окна браузера. Для старых версий браузеров следует использовать специфические свойства с префиксами, как показано в примере 1.
Фоновые картинки достаточно активно используются для создания блоков, поскольку с их помощью формируется самый причудливый дизайн. В частности, можно добавлять к элементу скругленные уголки, декоративные вертикальные и горизонтальные линии, а также многое другое.
Добавление одновременно двух фоновых изображений обычно продиктовано дизайном веб-страницы. При этом, как правило, один фон повторяется по горизонтали или вертикали, а второй фон выводится без всякого повторения.
Впрочем, подобные детали зависят целиком и полностью от воли дизайнера, поэтому рассмотрим универсальную технологию добавления двух фоновых картинок.
Повторение фона обычно требуется для создания декоративных линий или градиентов, привязанных к высоте элемента или окна веб-страницы. В таких случаях повторение фона по вертикали обеспечивает цельную картинку независимо от размеров элементов. Только вначале следует побеспокоиться о том, чтобы фоновое изображение повторялось без стыков.
По умолчанию фоновая картинка повторяется по горизонтали и вертикали, выстраиваясь мозаикой на всем поле веб-страницы. Однако такое поведение фона не всегда требуется, особенно в случае размещения единственного изображения, поэтому на помощь придет значение no-repeat, добавляемое к стилевому свойству background.
Для управления положением фонового рисунка на странице применяется стилевое свойство background-position, оно одновременно устанавливает координаты изображения по горизонтали и вертикали.
Чтобы отменить повторение фоновой картинки используется свойство background-position со значением no-repeat.
Мультипликация это достаточно сильный прием, способный оживить любой документ, поэтому не удивительно, что огромную популярность приобрела технология Flash, которая добавляет на веб-страницы мультики, к тому же интерактивные. Графический формат GIF также поддерживает простейшую анимацию путем последовательной смены кадров. Так что используя изображение в этом формате допустимо анимировать не только отдельные картинки, но также фон веб-страницы или определенного элемента.
Вначале потребуется создать анимированную картинку в формате GIF, для чего можно воспользоваться программой Adobe Photoshop или другой подходящей для этой цели. Также существуют библиотеки готовых анимированных файлов, которые можно применять в качестве фоновой картинки. Далее изображение добавляется в качестве фона с помощью стилевого свойства background, как показано в примере 1.
Чтобы добавить фоновую картинку на веб-страницу, задайте путь к изображению внутри значения url стилевого свойства background, которое в свою очередь добавляется к селектору body.
Улучшаем оформление картинок для вашего сайта – Blog Imena.UA
Публикуя на сайте или в блоге иллюстрацию с текстом поверх изображения, следует особое внимание уделять читабельности всех слов. Важную роль играет правильно выбранная контрастность элементов. Небольшие хитрости в оформлении иллюстрации помогут улучшить восприятие текста без ущерба для общего дизайна веб-страницы.
Хорошо подобранная иллюстрация не только дополняет смысл опубликованного текста, но и создаёт общее приятное впечатление о веб-ресурсе. В Nielsen Norman Group провели исследования и выяснили, что пользователь надолго задерживает взгляд на иллюстрации текущей страницы, если фото содержит текст. Картинка, которая дополняет контент, но не имеет своего текста, почти всегда остаётся без внимания. Изображение может не только мгновенно привлечь внимание, но и конвертировать его в действие на сайте, потому многие дизайнеры стараются визуализировать интерфейс с текстом на фоне больших изображений или даже видео.
Стремление завлечь посетителя картинкой привело к тому, что текст часто стали помещать поверх изображения, не заботясь о читабельности всех слов. Согласно принятым нормам, текст поверх картинки, который не является частью изображения или логотипом должен соответствовать контрасту не менее 4,5:1 (или 3:1 для крупного шрифта). Есть несколько простых правил, соблюдая которые вы повысите контрастность текста, а вместе с ней — юзабилити своего ресурса.
Позаботьтесь о том, чтобы пользователям не приходилось выбирать между попыткой прочесть каждое отдельное слово и понять общий смысл послания. На примере с действующего сайта показано, как фоновое изображение снижает читабельность текста. Картинка имеет слишком много деталей, которые отвлекают внимание от текста. Специалисты из Nielsen Norman Group использовали специальное приложение чтобы продемонстрировать контрастность текста на заданном фоне. Места, где контрастность составляет меньше необходимых 4,5:1 затемнены:
Достаточно затемнить тот же фон несколькими слоями и белый текст тут же приобретает нужную контрастность.
При этом невооружённым глазом заметить изменение в дизайне веб-страницы не так-то просто. Плагин для отслеживания контрастности текста подтверждает, что затемнение фона помогло достичь необходимого уровня контрастности 4,5:1:
Следует обращать внимание на соответствие оттенков текста и фонового изображения. Белый текст вполне ожидаемо потеряется на светлом фоне или разноцветной картинке, намеренно «запыленной» фильтрами. В такой ситуации фон следует затемнить, а чтобы понимать, насколько сильно надо форматировать картинку используйте соответствующие инструменты, наподобие расширения для браузера Color Contrast Analyzer Chrome.
Ещё один пример — онлайн-каталог предметов интерьера с белым текстом поверх цветных картинок. Анализ контрастности текста чётко демонстрирует, какие из названий читабельны, а что пользователь скорее проигнорирует, так как контрастность не достигает необходимого для крупного шрифта соотношения 3:1:
Простой выход для иллюстраторов данного каталога — поместить надписи на однотонный фон для повышения читабельности.
Текст лучше сделать чёрным и перенести его в нижнюю часть изображения, чтобы однотонным фоном не закрывать весь предмет на фото. Анализ контрастности подтверждает эффективность этих нехитрых приёмов:
Фильтр размытого фона в определённом сектора изображения может испортить общее впечатление от дизайна страницы, но является удобной альтернативой, когда затемнение картинки никак нельзя применить, а контрастность надо повысить. К тому же, если вы применяете этот фильтр, у фонового изображения не появятся новые оттенки, как при затемнении, а значит уже выбранный вид текста не сольётся с новым фоном. В некоторых случаях подойдёт размещение текста поверх цветного изображения с полупрозрачной рамкой, которая создаст дополнительную контрастность. Следует помнить, что даже тёмная фоновая зона не добавит контрастности, если будет чересчур прозрачной:
Уменьшив прозрачность чёрных блоков всего на 20%, удалось повысить контраст текста на цветном фоне — плагин подтверждает контраст на необходимом для крупного текста уровне 3:1:
Нельзя говорить о том, что есть универсальные инструменты для повышения контрастности текста.
Затемнение подойдёт к одной фотографии, но может оказаться абсолютно бесполезным на другом сайте. Если плагин показывает низкую контрастность текста придётся опробовать несколько вариантов изменения дизайна, чтобы найти самый оптимальный вариант. Каждую вариацию следует повторно проверять через плагин — может оказаться, что фон вы затемнили или «замылили», но читабельность текста не только не улучшилась, а даже стала хуже.
Если всё описанное выше вызвало желание удалить с сайта замысловатые картинки с надписями — не поддавайтесь панике. На самом деле следить за юзабилити несложно. Достаточно взять за правило всегда ориентироваться на качественные изображения с читабельным текстом. Приучите себя проверять контрастность через приложения, тогда даже без профессионального дизайнера вы сможете оптимизировать страницу для чтения. Применяйте эффекты и фильтры, коллажи и фотографии с информационной составляющей, но в меру. Помните о том, что сайт должен быть не только удобным и понятным, но и приятным для глаз.
Источник: Nielsen Norman Group
#веб-дизайн #графический редактор #дизайн #Как это устроено #контент-маркетинг #полезные советы #работа с изображениями #сайты #фотографии #юзабилити
изображений | Контрольный список веб-доступности
| Тема | Техника | WCAG AA Требование |
|---|---|---|
| Информативные изображения и активные изображения (например, ссылки, кнопки или элементы управления) | Альтернативный текст: Изображение ДОЛЖНО иметь альтернативный текст. Обратитесь к методикам для различных типов изображений:
Методика испытаний 1. | Обязательно WCAG 1.1.1 |
Осмысленное описание: Альтернативный текст ДОЛЖЕН быть осмысленным (точно передавать цель изображения и замысел автора таким образом, чтобы это было полезно для тех, кто не может видеть изображение).
Методика испытаний 1.1.1.b | Обязательно WCAG 1.1.1 | |
| Краткость: Длина альтернативного текста для информативных изображений СЛЕДУЕТ быть краткой (не более 250 символов). | лучшая практика | |
Избегайте повторения того, что элемент является изображением: альтернативный текст НЕ ДОЛЖЕН включать слова, которые идентифицируют элемент как графику или изображение (например, избегайте таких фраз, как «графика» или «изображение» и т. | лучшая практика | |
| Несущественные изображения (исключительно декоративные или избыточные, а не активные) | Необязательные изображения: изображениям, которые не передают содержание, являются декоративными или избыточными по отношению к содержимому, которое уже передано в тексте, СЛЕДУЕТ указывать нулевой (пустой) альтернативный текст ( alt="" ), ARIA role="presentation" или реализованы как фоны CSS. | лучшая практика |
| Сложные образы | Сложные изображения: Сложные изображения ДОЛЖНЫ быть кратко описаны с использованием замещающего текста И ДОЛЖНЫ иметь более полное расширенное описание.
Методология тестирования 1.1.1.c | Обязательно WCAG 1.1.1 |
| Фоновые изображения | Информативные фоновые изображения: если фоновое изображение передает информацию, ДОЛЖЕН быть предоставлен альтернативный текст (например, с помощью обычного видимого текста, путем добавления role=»image» и aria-label или другими способами). Методика испытаний 1.1.1.b | Обязательно WCAG 1.1.1 |
Активные фоновые изображения: если фоновое изображение является единственным «содержимым» активного элемента (например, ссылки, кнопки или элемента управления), активный элемент ДОЛЖЕН иметь доступное имя (например, через Методология испытаний 1.1.1.a | Обязательно WCAG 1.1.1 | |
Цветовой контраст мелкого текста: Мелкий текст (менее 18 пунктов обычным шрифтом или 14 пунктов полужирным шрифтом) ДОЛЖЕН иметь коэффициент контрастности не менее 4,5 к 1 относительно фона. Методология тестирования 1.4.3.a | Обязательно | |
| Цветовой контраст крупного текста: Крупный текст (на уровне 18 пунктов или 14 пунктов полужирным шрифтом) ДОЛЖЕН иметь коэффициент контрастности по крайней мере 3 к 1 относительно фона. Методика испытаний 1.4.3.b | Обязательно WCAG 1.4.3 | |
| Необязательные фоновые изображения: Альтернативный текст НЕ ДОЛЖЕН предоставляться для необязательных фоновых изображений. | лучшая практика | |
| Изображения текста | Нет изображений текста: изображение НЕ ДОЛЖНО включать информативный текст, если эквивалентное визуальное представление текста может быть воспроизведено с использованием реального текста (за исключением случаев, когда текст является важным — например, логотип — или шрифт, размер, цвет и фон не являются обязательными). Методика испытаний 1.4.5.a | Обязательно WCAG 1.4.5 |
| Цветовой контраст мелкого текста: Мелкий текст (менее 18 пунктов обычным шрифтом или 14 пунктов полужирным шрифтом) ДОЛЖЕН иметь коэффициент контрастности не менее 4,5 к 1 относительно фона. | Обязательно WCAG 1.4.3 | |
| Цветовой контраст крупного текста: Крупный текст (на уровне 18 пунктов или 14 пунктов полужирным шрифтом) ДОЛЖЕН иметь коэффициент контрастности по крайней мере 3 к 1 относительно фона. Методика испытаний 1.4.3.b | Обязательно WCAG 1.4.3 | |
| Анимированные изображения | См. требования к анимации, движению и синхронизированному содержимому. | Обязательно Несколько |
Альтернативный текст: Элементы Image CAPTCHA ДОЛЖНЫ иметь альтернативный текст, описывающий назначение изображения. Методика испытаний 1.1.1.g | Обязательно WCAG 1.1.1 | |
| Сенсорные альтернативы: Элементы Image CAPTCHA ДОЛЖНЫ быть дополнены хотя бы одним слуховым альтернативным методом. Методика испытаний 1.1.1.g | Обязательно WCAG 1.1.1 | |
Доступ для слепоглухих: СЛЕДУЕТ предоставить по крайней мере одну текстовую альтернативу, позволяющую глухим и слепым пользователям проходить CAPTCHA.
| лучшая практика |
Как использовать изображение в качестве фона текста в PowerPoint
В предыдущем посте мы показали, что вам нужно добавить изображение в текст в PowerPoint.
На этот раз мы покажем вам, что вы можете сделать изображение фоном для текста на слайдах PowerPoint. Наличие подобных эффектов в ваших презентациях может добавить вашим слайдам неуловимый вау-фактор. Вместо скучных текстов и даже обычного цветного фона или формы позади вашего текста вы можете подняться на ступеньку выше с пользовательским изображением в качестве фона текста. Это может быть в новинку для большинства людей, которые привыкли видеть на слайдах обычную смесь текста и графики. Чтобы использовать изображение в качестве фона текста в PowerPoint, просто выполните шаги, указанные ниже.
Добавить изображение в качестве фона текста в PowerPoint
Первое, что вам нужно сделать, это открыть презентацию там, где вы хотите проделать этот «трюк» с PowerPoint. Или это может быть новая презентация, и вы можете добавлять свой контент по мере продвижения.
Если у вас есть пустой слайд вверх, просто добавьте текст, который вам нравится. Это может быть одно слово или короткая фраза.
Важно то, что оно имеет отношение к вашей теме или воплощает сообщение, которое вы хотите передать.
Напечатав текст, увеличьте его настолько, чтобы он выделялся перед целевой аудиторией. Просто убедитесь, что у вас достаточно места для фонового изображения позже.
Добавьте изображение с помощью эффекта заливки фигуры
Не забудьте выбрать краткий текст, будь то слово или фраза. Чем лаконичнее, тем сильнее эффект. Просто убедитесь, что это актуально и убедительно. Теперь выберите текст, чтобы выделить его. Затем перейдите к Формат на ленте -> Заливка формы -> Изображение . Как только вы выберете опцию «Изображение», ваше диалоговое окно заполнится.
Вы можете выбрать изображения из файла на своем компьютере, из файла OneDrive или выполнить поиск в Интернете с помощью поисковой системы, например Bing.
Выбрав нужное фоновое изображение, просто нажмите кнопку «Вставить» в нижней части диалогового окна.
Теперь изображение добавляется в качестве фона вашего текста. Вы можете настроить изображение, изменив размер текста. Вы также можете изменить шрифт.
Убедитесь, что ваш текст остается четким и читаемым
Здесь также есть сложная часть, с которой вам следует быть осторожным. Поскольку вы добавили к тексту фоновое изображение, сам текст может быть не виден. Для презентаций PowerPoint важна удобочитаемость. Ваша аудитория должна четко видеть, что вы хотите сказать. Вот почему, когда вы вставляете фоновое изображение, вы также должны корректировать текст.
Возможно, вам потребуется изменить шрифт. Вы также можете изменить цвет шрифта, чтобы он контрастировал с фоном. Если ваш текстовый фон занят, вы должны сделать свой шрифт простым, обычно подойдут Arial и другие шрифты без засечек. Если ваш фон абстрактный или простой, вы можете поиграть со стилями шрифта и даже добавить текстовые эффекты, если ваш текст остается читаемым.
Текст с фоновым изображением отлично подходит для заголовков презентаций, заголовков слайдов, подписей и для выделения основной мысли.