Я с огромным наслаждением читаю статью Эрика Д. Кеннеди (Erik D. Kennedy)
# Тонирование
Изображение должно быть темным для большего контраста на границах текста.
Выбор картинки, которую вы показываете, конечно, зависит только от вас, но, как правило, в оригинале картинки очень светлые и текст при наложении становиться неразборчивым. Картинку можно затемнить, используя графические редакторы (Paint.NETએ, PhotoShopએ) или с помощью CSS тонирования. Самый чистый способ, скорее всего, заключается в использовании нескольких тонов, однако, реализация такого эффекта
.darken { background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(shoes.jpg); }
Хотя затемнение наиболее просто и универсально, но можно найти и другие подходящие цветовые решения.
Действительно, используя CSS, удобно подкрасить любую картинку:
# Белый текст
Текст на изображении должен быть белым! — Попробуйте найти чистый и простой пример для опровержения. Серьезно. Только белый и ни какой другой.
Считаю это аксиомой, по крайней мере в том случае, когда вы пытаетесь делать классный дизайн. Маргинальный дизайн, как правило,
# Картинка во весь экран
Когда у вас изображение во весь экран, то наложение текста неизбежно заставит подкрасить любую картинку.
body { background: /* здесь всё, что касается тонировки и прочее */; /* Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока */ background-size: cover; }
Кстати, если вы хотите закрыть изображением весь экран, но обеспечить прокрутку вниз, то можно установить атрибут верхней области height
в 100vh
единиц.
Здесь надо немножко подправить для поддержки всех браузеров. Но если нужен гарантированный вариант с высотой, то воспользуйтесь комбинацией JavaScript.
# Text-in-a-box (Текст в коробке)
Умирающий, но простой и очень надежный способ. Создайте умеренно-прозрачный тёмный прямоугольник и накладывайте на него белый текст. Если наложение не достаточно прозрачно, то можно разместить прямоугольник внизу изображения, текст будет по-прежнему полностью разборчив.
Срабатывает при любой контрастной комбинации цветов.
Это легко сделать для одной строки текста. Но если есть какой-то шанс деформации текста при адаптивном дизайне, то это сложнее. Можно оставить название, как, display: block;
, но это не очень элегантно, по сравнению с inline
. С inline необходимо позаботиться о том, что бы после разрыва не было расстояния между строками.
box-decoration-break
наилучшее:
.title { background-color: black; color: #fff; display: inline; padding: 0.5rem; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
# Размытие
Удивительно хороший способ для создания разборчивого наложенного текста — размыть фрагмент основного изображения.
Наложите на основное фоновое изображение требуемый фрагмент и затем размойте его.
.module { background: url(http://s3-us-west-2.amazonaws.com/s.cdpn.io/3/skyscrapers.jpg); background-attachment: fixed; overflow: hidden; } .module > header { position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px 10px; background: inherit; background-attachment: fixed; } .module > header::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: inherit; background-attachment: fixed; -webkit-filter: blur(12px); filter: blur(12px); }
В дополнение к размытию можно использовать подкрашивание, но это не обязательно. Достаточно хорошо работает простое размытие:
Смягчение только части изображения Эрик называет холстом.
Холст можно сделать с помощью специальных фото-приспособлений, которые смягчает контраст. Но сейчас это проще сделать визуальными приёмами при проектировании так, что-бы накладываемый текст стал более разборчивым.
# Floor Fade (Увядший подвал)
Увядшим подвалом называется эффект, когда фоновое изображение мягко затеняется к низу, а затем внизу накладывается белый текст.
Довольно очевидно, пожалуй, что используется подкрашивающий градиент, но …
.module { background: linear-gradient( to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6) ), url(skyscrapers.jpg); }
Возможно, получится и с меньшей плотностью затемнения, если добавить к тексту небольшую тень:
.title { text-shadow: 0 1px 0 black; }
В заключение…
- Довольно интересно поискать другие способы и поиграть с сочетаниями описанных методов;
- Уверен, что найдутся браузеры, где эти демки не работают. Может быть, есть предложения, как это избежать, тогда оставляйте свои комментарии.
По мотивам:
Рецепты наложения текста на изображения, опубликовано К ВВ, лицензия — Creative Commons Attribution-NonCommercial 4.0 International.
1 нравится это