надпись css-трюки

Привет, сегодня будет первый пост про HTML/CSS верстку, веб-дизайн и вот это всё.

Я тут пытался сделать аналог Clipping Mask из фотошопа только в живой верстке. То есть чтобы буквы заполнились изображением, а за их границами оно исчезло. Это не так сложно сделать с помощью “экспериментального” значения свойства background-clip: text; (поддерживается в современных браузерах, почти везде с префиксом -webkit , в лисе просто так). Но просто это только, если использовать одно изображение. А что, если вы хотите несколько? Конечно, можно составить background-image из нескольких картинок, но в этом случае вы лишаетесь определенной гибкости. Например, выравнивания каждого фото с помощью background-position. Если же составлять фон из div’ов, то тогда вы лишаетесь возможности обтравить его текстом… или нет?

Кому не терпится, можно сразу посмотреть результат на Jsfiddle.

Мне удалось добиться желаемого эффекта вроде бы без особых хаков (не считая того самого background-clip: text;). Суть такова. В каждый div с фоном вкладывается надпись (в примере через span). Блокам присваиваем background-clip: text; , сам текст должен быть прозрачный. Ширину блоков задаем в процентах в зависимости от их количества, чтобы в сумме вышло 100%. Если их 4, то по 25%. Теперь самое главное: каждую надпись, начиная со второй, мы сдвигаем влево с помощью отрицательной margin-left в процентах. Второму блоку задаем значение -100%, третьему -200% и так далее. Суть в том, что отступы в процентах высчитываются от размера родительского блока, а не самого элемента. Таким образом 0.25 умножаются на 1 и получается та же ширина блока. Соответственно каждый следующий блок надо сдвигать на расстояние в 2 раза больше. Размер шрифта можно подбирать на глаз в vw единицах, чтобы надпись влезла и при этом заняла необходимую ширину. В итоге все это не только собирается в единую, будто бы бесшовную, надпись, но и автоматически масштабируется. Чтобы выровнять картинки по горизонтальному центру задайте background-position: 50%;. Не забудьте задать блокам overflow: hidden;.

В чем смысл:

  1. Ну, во-первых это красиво:) Плюс я учусь чему-то новому.
  2. Вы можете выравнивать каждое изображение независимо от других. В примере выше у первой картинки background-position не 50%, а 20%, чтобы был виден сюжетно важный объект. К другим параметрам вроде масштаба это, конечно, тоже относится.
  3. Можно заменять картинки на лету без фотошопа.

С какими проблемами я столкнулся:

  1. В лисе могут возникнуть проблемы с выделением текста (в хроме вроде нет). Так как использовать этот прием есть смысл только в декоративных целях можно выключить выделение через user-select: none; (работает только с префиксами). Для доступности можно присвоить контейнеру роль role=”presentation”.
  2. Чтобы избавиться от ненужного переноса слов используйте white-space: nowrap;.
  3. Использовать тут простой одноцветный фон я особо смысла не вижу, но с background-color никаких проблем быть не должно. А вот с градиентами они есть. Точнее они появляются, если использовать на id универсальное свойство background, которое начинает конфликтовать с классом. Поэтому нужно задавать для id полный список значений общего блока. Это будет выглядеть как-то так: background: 50% no-repeat linear-gradient(to right, red , yellow) text;.
  4. Ну и для браузеров без поддержки значения text, можно убрать прозрачность с надписи (не забудьте выбрать подходящий цвет).

PS Я не утверждаю, что я первый, кто до такого додумался. Но в ходе гугления решения, ничего не нашел.