Как сделать текст под картинкой
CSS: работа с текстом на изображениях
Вы можете встретить компонент пользовательского интерфейса, у которого есть текст над изображением. В некоторых случаях в зависимости от используемого изображения текст будет трудно прочитать. У этой проблемы есть несколько различных решений, таких как добавление градиента или затемнение изображения, наложение тени на текст и другие. Этот прием будет полезен не только frontend и веб-разработчикам, но и ui/ux-дизайнерам. Написать эту статью меня вдохновил твит от Эдди Османи, работающего над Google Chrome.
Здесь я рассмотрю различные подходы и решения этой проблемы, а также то, как передать пользовательский интерфейс фронтенд разработчику таким образом, чтобы гарантировать, что UI реализован в соответствии с макетом дизайна, поскольку некоторые детали в CSS можно легко упустить.
Как Spotify делает текст на изображениях более читабельным: наложение CSS с линейным градиентом. В наши дни более распространенный, но все же эффективный метод улучшения цветового контраста
Вступление
Давайте посмотрим на нашу задачу. При разработке компонента с текстом над изображением мы должны позаботиться о том, чтобы текст было легко прочитать.
Слева без оверлея, справа с оверлеем.
Обратите внимание, что версия без наложения градиента читается плохо. Для пользователя это нехорошо. Чтобы решить эту проблему, нам нужно добавить слой под текстом так, чтобы текст читался легко. Добавление этого слоя может быть сложной задачей, и я видел многих, кто внедряет это решение, не принимая во внимание доступность.
Обзор возможных решений
Давайте посмотрим на возможные решения.
Есть решения, требующие большего внимания, — это градиентные решения. Почему? Потому что добавить слой градиента — это очень просто, но текст не будет удобным.
Решения
Наложение градиента
Вообще говоря, наложение градиента — это наиболее распространённое решение, позволяющее сделать текст на изображении более чётким. Учитывая это, я остановлюсь на нём немного подробнее.
При реализации наложения градиента у нас есть два варианта:
Использовать отдельный элемент для градиента (псевдоэлемент или пустой
Применить градиент как фоновое изображение.
У каждого из вышеперечисленных есть свои плюсы и минусы, давайте рассмотрим их.
Элемент содержимого позиционируется абсолютно, его фоновым изображением служит градиент. Это означает, что размер градиента равен высоте элемента.
На первый взгляд может показаться, что градиент хорошо работает. Это не так. Я протестировал тот же градиент с большим количеством изображений, и вот результат.
Обратите внимание, что контраст между белым текстом и изображениями не всегда чёткий. Некоторые люди прочитают текст, но использовать такой градиент — огромная ошибка.
Причина в том, что градиент должен покрывать больше пространства по вертикали, поэтому должен быть выше. Если градиент равен размеру контента, он будет работать не во всех случаях. Чтобы решить эту проблему, мы можем использовать min-height, как показано ниже:
Flexbox для перемещения содержимого вниз.
Другое решение — большой padding-top, с ним не нужны min-height и flexbox.
Обратите внимание на разницу между левой и правой карточками. Градиент больше по высоте.
Выглядит хорошо. Можем ли мы сделать лучше? Определённо да!
Смягчение градиента
Присмотревшись, вы заметите, где заканчивается градиент, то есть у него резкая граница.
Чтобы сделать лучше, мы можем применить смягчение градиента. Таким образом градиент будет выглядеть естественнее, и вы не заметите резких краёв в его конце.
Чтобы достичь плавности, в CSS нам нужно несколько границ перехода градиента, но на момент написания этой статьи в CSS нет нативного способа сделать несколько границ. Хорошая новость заключается в том, что рабочая группа CSS обсуждает возможность реализации нативного смягчения градиентов на CSS, но остаётся неясным, когда эту возможность внедрят.
К счастью, г-н Андреас Ларсен создал удобные плагины PostCSS и Sketch, которые помогают преобразовывать резкий градиент в более мягкий.
Вот градиент CSS для примера выше:
Сравните карточки со смягчением градиента и без него.
Горизонтальные градиенты
Работа с текстом поверх изображения не может касаться только вертикального градиента, можно работать и с горизонтальным.
Вот CSS градиента для раздела выше. Чтобы добиться смягчения градиента, я использовал упомянутый ранее инструмент.
Смешивание сплошного цвета и градиента
Я узнал об этом приёме на сайте Netflix. На домашней странице для незарегистрированного пользователя есть заголовок с большим фоновым изображением.
Мне это нравится, но он скрывает многие детали изображения. Используйте этот приём только в том случае, если изображение должно быть декоративным (не приносит реальных преимуществ конечному пользователю).
Вот наглядное объяснение того, как работает этот паттерн.
Наложение градиента и тень текста
Есть небольшая полезная деталь, которая может сделать текст поверх изображений ещё лучше. Всё дело в добавлении к тексту лёгкой тени. Даже когда заметить её нелегко, она может быть очень полезной, если изображение не загружается. Посмотрим на такой пример.
Наложение градиента, тень текста и непрозрачность
Это закономерность, которую я заметил в проигрывателе видео на Facebook. Мне понравилось, что они использовали несколько техник, чтобы сделать текст и другие элементы пользовательского интерфейса чёткими. При работе с проигрывателем очень важно гарантировать, что элементы поверх него заметны.
Что в этом нового? Значки и проигрыватель имеют непрозрачность в 90 %. Это помогает им смешаться с фоном под ними. Создаётся ощущение, что элементы управления вмешаны в изображение.
Кроме того, белая тень у белого текста — эффективный способ сделать текст чётче. Вы хотите доказательства того, что всё вышесказанное будет работать, даже если фон полностью белый? Ну, вот.
Текст и элементы интерфейса хорошо читаются, даже когда изображение полностью беое
Youtube делает то же самое со своими видео.
Вот что мне понравилось в подходе Youtube:
Тёмная рамка для каждого значка, чтобы он лучше выделялся.
Чёрная тень вместо белой для времени видео.
Радиальный градиент
Интересное решение, о котором я узнал от Netflix, — радиальный градиент. Вот как он работает:
Установите основной цвет заднего фона.
Поместите изображение в верхний правый угол с шириной 75 %.
Наложение соответствует размеру и положению изображения.
Выбор удобного пользователю цвета наложения
Я покажу отличный инструмент, который помогает выбрать правильную непрозрачность наложения в зависимости от изображения. Посмотрите его на Codepen. Интересная задача — сделать градиент удобным.
В общем, если вы гарантируете, что наложение градиента правильно заполняет текст и имеет подходящий цветовой контраст, всё готово.
Тестирование
Решение нельзя считать хорошим, пока оно не протестировано, верно? Один из способов, который я использую для проверки наложения градиента, — добавление белого фона ниже градиента. Если текст после этого читаемый, то градиент будет работать с любым изображением, а если нет, вам нужно настроить и улучшить его.
В приведённом выше примере я выбрал сплошной цвет под заголовком, а коэффициент контрастности составляет 4,74, такой коэффициент считается хорошим.
Работа с Firefox DevTools
Спасибо Гийсу Вейфейкену: он рассказал мне, что Firefox может тестировать цветовой контраст на градиентах. Это отличная функция.
Если хотите прокачать себя в веб-разработке, освоить специальность frontend-разработчика или стать настоящим Fullstack-универсалом — приходите учиться, а наши опытные менторы и внимательные кураторы помогут вам дойти до финала.
Узнайте, как прокачаться в других специальностях или освоить их с нуля:
Как сделать в HTML подпись под картинкой?
Дата публикации: 2016-08-24
От автора: как сделать в html подпись под картинкой? Действительно, как? С первого взгляда все кажется проще некуда, но на деле не каждый может сам додуматься до того, как же все-таки разместить текст ровно под картинкой, ведь она является строчным элементом.
Самый примитивный вариант
Сразу после изображения поставьте тег br и напишите нужный текст. Конечно, он не будет располагается по центру, но зато будет под картинкой, так что его уже можно назвать подписью. Вариант не годится для тех случаев, когда фото располагается в строке не в самом начале, потому что в таком случае по напечатанному тексту непонятно будет, к чему он вообще относится.
Тег br ставить необязательно, можно просто заключить подпись в тег абзаца, тогда текст сам перенесется на следующую строку, так как абзац – блочный элемент.
Ладно, это был самый простой способ, который не всегда подойдет, поэтому предлагаю рассмотреть более правильные.
Соединение изображения и подписи в блок
Все очень просто. Мы поместим картинку и подпись к ней в отдельный блок.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
При таком способе вы легко сможете выровнять текст подписи ровно по центру изображения, но при этом нужно ограничить ширину главного контейнера, поставить ее ровно такой, каковой является ширина изображения:
В моем случае это 200 пикселей.
Использование тега figure
Следующее решение является наиболее оптимальным, так как в нем используются теги html5 – figure и figcaption. Они предназначены для группировки каких-либо элементов вместе.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
По сути, нам даже практически полностью подходит код предыдущего примера, нужно только заменить div на figure и p на figcaption:
Все остальное актуально и для этого варианта. В частности, само по себе нахождение текста в теге figcaption не выравнивает его по центру. Чтобы выровнять, нужно сделать то же самое, что мы делали в предыдущем способе. Я изменил цвет текста, чтобы подпись в этом примере хоть чем-то отличалась от того, что мы сделали в предыдущем примере.
Как видите, оба способа дают одинаковый результат. Ну и еще 1 вариант вдогонку
В этом примере не нужно помещать картинку и подпись в блок или фигуру, они могут быть просто самостоятельными элементами, но при этом должны стоять друг за другом в разметке.
Теперь стилевой класс я прописал не блоку, а изображению, потому что блока то и нет. Вся загвоздка тут в стилях, вот они:
Значит, мы делаем наше изображение блочным. В принципе, в случае с абзацем это было делать необязательно, но если бы подпись вы бы писали, например, в теге span, то необходимость задать блочное поведение была бы, потому что иначе картинка и подпись находились бы на одной строке.
Результат аналогичен предыдущим способам, даже скриншот не буду показывать. Что ж, это все способы сделать в html подпись под изображением, которые я хотел вам показать. Дело то на самом деле очень мелочное, поэтому особо над его решением нет смысла задумываться, просто выбирайте любой способ и делайте.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Верстка. Быстрый старт
Практический курс по верстке адаптивного сайта с нуля!
Каскадные таблицы стилей CSS советы & приёмы
Смотрите также указатель всех приёмов работы.
Иллюстрации & подписи
Масштабированная модель Эйфелевой башни в Парке Мини-Франция
В HTML5 включен новый элемент для вставки иллюстрации с подписью. (Мы покажем, как сделать тоже самое в HTML4 ниже.)
Например, чтобы сместить изображение вправо на расстояние, равное 30% от ширины окружающих абзацев, используйте следующие правила:
На самом деле, действительно необходимы только две первые декларации (float и width), а остальные использованы исключительно для оформления.
Масштабирование изображения
Здесь только одна проблема, и она заключается в том, что изображение может быть слишком широким. В этом случае, ширина изображения всегда будет составлять 136 px и иллюстрация будет занимать 30% от окружающего текста. И если вы сузите окно, то изображение может не поместиться и вылезти за рамку (попробуйте!).
Если вы знаете ширину всех изображений в документе, вы можете указать минимальную ширину иллюстрации следующим образом:
Сен-Тропе и его форт в вечернем солнце
Другой способ — это задать масштаб самого изображения. Именно это мы и сделали с изображением справа. Как вы, возможно, видете, если вы сделаете окно браузера слишком широким, изображения в формате JPEG масштабируются не очень хорошо. Но если это изображение — диаграмма или график в формате SVG, то масштабирование работает просто великолепно. Вот разметка, которую мы использовали:
А вот таблица стилей:
И в дополнение последнее правило: этот приём делает изображение настолько широким, насколько позволяет пространство внутри иллюстрации (область внутри рамок и отступов — border и padding).
Размещение подписи сверху
Средиземное море около Кап Ферра
HTML позволяет элементу figcaption быть либо первым, либо последним элементом внутри иллюстрации. Если не применять каких-либо правил CSS, это приведёт к тому, что подпись будет размещена либо над иллюстрацией, либо под ней соответственно.
Однако, независимо от разметки текста, вы можете указать в CSS, чтобы подпись появилась либо над изображением, либо под ним. Этого можно достичь, указав браузеру, что изображение должно быть отформатировано как таблица, в которой картинка является единственной ячейкой, а подпись становится заголовком таблицы. Просто добавьте эти правила в таблицу стилей из предыдущей секции:
Стиль, который мы использовали на этой странице, содержит рамку серого цвета. Она обрамляет иллюстрацию. К сожалению, когда мы используем табличную разметку, чтобы поместить подпись сверху или снизу, мы должны указать рамку другим способом, потому что подпись размещена за пределами границы таблицы. Мы можем исправить это, поместив часть границы на саму подпись:
Иллюстрации & подписи в HTML4
Масштабированная модель Эйфелевой башни в Парке Мини-Франция
HTML4, в отличие от HTML5, не имеет элементов, которые бы позволили вставить в документ изображение с подписью. Это предлагалось сделать (см HTML3), но в итоге в HTML4 предложение не вошло. Вот единственная возможность воспроизвести элемент figure:
Затем в таблице стилей вы используете класс «figure» для форматирования иллюстрации так, как вам необходимо. Например, чтобы сместить иллюстрацию вправо на расстояние, равное 30% от ширины окружающих абзацев, необходимо применить следующие правила:
Как и ранее, необходимы только две первые декларации (float и width), а остальные использованы исключительно для оформления.
Масштабирование изображения в HTML4
Чтобы избежать выхода изображения за рамки иллюстрации и при условии, что вы знаете ширину всех изображений в документе, вы можете добавить минимальную ширину DIV следующим образом:
Сен-Тропе и его форт в вечернем солнце
Чтобы смасштабировать изображение на всю ширину иллюстрации (как мы сделали с изображением справа), вы можете добавить атрибут КЛАССА и соответствующее правило CSS, очень похожее на пример с HTML5 выше. Вот разметка, которую мы использовали:
А вот таблица стилей:
Одно дополнение: этот приём делает изображение настолько широким, насколько позволяет DIV (площадь внутри border и padding).
Размещение описания сверху в HTML4
Средиземное море около Кап Ферра
Чтобы разместить подпись сверху, добавьте эти правила в таблицу стилей из предыдущих секций:
‘+’ приводит к тому, что правило действует на элемент P, который следует за другим P. Что означает, что условие действует на второй элемент P иллюстрации, который содержит описание картинки.
(Эта техника может привести к ошибкам в некоторых браузерах, разработанных ранее 2003, особенно в комбинации с масштабированием изображений, как в примере выше)
Как и прежде, серая рамка, которую мы выбрали для обрамления иллюстраций на этой странице, будет обрамлять только само изображение. Чтобы рамка была вокруг изображения и подписи, добавьте эти правила:
Навигация по сайту
Created 17 January 2001;
Last updated Ср 06 янв 2021 05:40:49
Как добавить текст на фото
При создании собственного профиля в соцсети, разработке логотипа, подготовке поздравительной открытки, визитной карточки и для других целей на изображение требуется наложить текст. Это может быть цитата из известного произведения, четверостишие, инициалы. Посмотрим, как добавить надпись на фото в разных графических редакторах.
В программе Microsoft Paint
Один из наиболее очевидных способов сделать надпись на фото — воспользоваться стандартной программой Microsoft — Paint. Растровый графический редактор интуитивно прост, но при этом многофункционален. Следуйте инструкции:
Найдите Paint в меню «Пуск».
Выберите во вкладке «Файл» в верхней левой части окна пункт «Открыть».
Загрузите исходное изображение с компьютера.
В верхней панели инструментов программы выберите «Текст».
Определите место, где хотите разместить на изображении надпись, кликнув левой кнопкой мыши на экране.
Наберите необходимый текст.
Меняйте размер кегля и цвет шрифта. Задать нужные параметры поможет верхняя панель инструментов.
После получения желаемого результата, сохраните изменения.
В редакторе Photoshop
Рассмотрим еще один способ, с помощью которого можно разместить текст на фото — воспользоваться программой Photoshop. Редактор требует дополнительного времени на изучение, но дает больше возможностей.
Установите фоторедактор на компьютере или воспользуйтесь онлайн-версией.
Загрузите нужное изображение на рабочую поверхность.
Выберите «Текст» на панели инструментов слева. Он отобразится как отдельный слой.
Можно менять цвет, прозрачность, кегль шрифта, добавить к нему тень и др.
Не забудьте сохранить изменения после того, как сделали надпись.
В приложении Phonto
Добавить текст на фото также можно в одном из редакторов, которые легко установить на смартфон. Это, к примеру, Fonteee, PixelLab для Android, Word Swag, Typorama — для iPhone.
Например, в редакторе Phonto добавить текст к фотографии можно за две минуты. Для этого:
Скачайте приложение на смартфон из Google Play.
Загрузите фотографию из Галереи, которую нужно дополнить текстом.
Наберите исходный текст.
Определитесь с цветом и размером надписи.
Передвигая по поверхности изображения, найдите лучшее место для слов.
Мы рассмотрели несколько способов, позволяющих добавить текст к картинке на десктопе или в приложении.
Придумайте яркие надписи к фотографиям, а затем воспользуйтесь программой моментальной печати фото Mimigram, чтобы создать памятный сувенир: МимиБокс, Пати-Пазл, МимиБук и много других.
Позиционирование текста на картинке в CSS
Я часто вижу в комментариях к урокам или на форумах, когда новички спрашивают: «Я хочу разместить текст поверх картинки, а он оказывается под или над картинкой. Помогите.» Давайте рассмотрим на конкретном примере, как написать текст на картинке в любом месте.
Нам надо рядом с каждым овощем, на иллюстрации ниже, подписать его название. Задача вроде бы простая, но поверьте, может свести с ума любого начинающего веб-мастера.
Я умышленно для примера взял большую картинку 1280×733, чтобы заодно показать, как её адаптировать под разные разрешения экранов. Уже прошли те времена, когда достаточно было научиться верстать только под десктопные разрешения. Делая верстку, следует сразу позаботиться об адаптивности.
HTML-разметка
Первым делом создаем контейнер для овощной картинки и для надписей. Обратите внимание, что каждую надпись мы помещаем в отдельный блок с разными классами. И это логично, поскольку все надписи будут иметь свои координаты на странице, а мы будем управлять ими, прописывая свойства в дивах.
После сделанной HTML-разметке, мы видим только фрагмент картинки и текст, оказавшийся под картинкой. Знакомая картина, не правда ли?
Картинка разъехалась на все свои немаленькие пиксели и появилась горизонтальная полоса прокрутки, но к счастью это легко исправить, задав ширину картинке 100%, тем самым сделав её адаптивной. Хотя бы одну проблему решили.
Теперь займемся текстом.
CSS-стили
В стилях контейнера, ключевым будет свойство position: relative. Этим мы меняем правила и просим вести отсчет координат не от верхнего левого угла окна браузера, а от угла контейнера, который является родителем для всех вложенных в него элементов и занимает 90% окна.
.container <
width: 90%;
position: relative;
text-align: center;
color: #000;
font-family: arial black;
font-size: 250%;
>
Дальше будем позиционировать надписи, просто подбирая в системе X/Y нужные координаты, делать подбор удобно в Chrome / Инструменты разработчика, копируя и вставляя код в файл со стилями.
.left <
position: absolute;
top: 26%;
left: 6%;
>
.center <
position: absolute;
top: 17%;
left: 42%;
>
.right <
position: absolute;
top: 1%;
right: 27%;
>
Мы задали координаты не в пикселях, а в % не случайно, при уменьшении размеров экрана, тогда текст будет оставаться там же, где мы его закрепили. Это хорошая новость, а плохая это то, что размер текста не уменьшается вместе с картинкой. Картинка сама уменьшается, а текст надо уменьшать принудительно.
Медиа-запросы
На разрешении равным или меньше 768 пикселей, уменьшить размер шрифта до 150%. Откуда мы узнали, что надо уменьшать именно на 768 пикселях? Через инспектор кода, мы увидели, на какой отметке текст наскакивает на соседние элементы.
@media screen and (max-width: 768px) <
.container <
font-size: 150%;
>
>
Одного запроса оказалось недостаточно, уменьшили размер текста и на 470 пикселях.
@media screen and (max-width: 470px) <
.container <
font-size: 90%;
>
>
Конечный результат
Посмотрите на реальной странице, как прекрасно смотрится текст на картинке на разных разрешениях.
Демонстрация.
Из данного видео-курса «HTML5 и CSS3 с Нуля до Гуру»вы получите систематизированные знания о том, как делаются сайты, на простых примерах.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.