x
 
Бывший Студент
2 августа 2018
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

При разборе работ студентов вы указали, что заголовок на этой картинке можно сверстать текстом. Как?


Можно нарезать картинку на части и разложить элементы по слоям с помощью z-index. Попробуем!

Сначала вырежем из картинки «наползающие» элементы. Так как у меня нет оригинала, я сделал это довольно грубо:

Фон без текста
Голова штангиста
Рука со штангой

Теперь разместим все элементы на полотне с помощью абсолютного позиционирования:

<!-- index.html -->
<div class="bg">
  <h1 class="title">Зачем<br />тренер</h1>
  <div class="head"></div>
  <div class="hand"></div>
</div>
.bg {
  position: relative;
  width: 840px;
  height: 364px;
  background: url(bg.jpg) no-repeat center / 100%;
}

.title {
  position: absolute;
  top: 12%;
  left: 5%;
  font: bold 135px/.8 Arial;
  color: white;
}

.head {
  position: absolute;
  bottom: 17.9%;
  left: 55.7%;
  width: 10.4%;
  height: 29%;
  background: url(head.png) no-repeat center / 100%;
}

.hand {
  position: absolute;
  top: 28.5%;
  left: 36.3%;
  width: 14.7345612%;
  height: 47.5%;
  background: url(hand.png) no-repeat center / 100%;
}
Зачем
тренер

Благодаря порядку элементов в разметке почти всё получилось сразу, только последняя буква второй строки подлезает под руку, хотя не должна. Исправим, задав ей z-index:

<!-- index.html -->
<div class="bg">
  <h1 class="title">
    Зачем<br />трене<span>р</span>
  </h1>
  <div class="head"></div>
  <div class="hand"></div>
</div>
.title span {
  position: relative;
  z-index: 1;
}
Зачем
тренер

Теперь последняя буква налезла на голову, а надо наборот. Поднимем голову по оси Z ещё выше:

.head {
  /* ... */
  z-index: 2;
}
Зачем
тренер

Готово!

Приходите смотреть разборы: https://t.me/rusty_pixels

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

Поделиться
Отправить

Комментарии

Павел Радьков
2 августа 2018

Текст «трене<span>р</span>» поисковым роботом и читалками будет прочитан как «трене р».

Вставлять теги внутрь слова вредно для СЕО и скринридеров. А автоматические переводчики, скорее всего, не справятся с переводом такого слова.

Ситуацию можно исправить aria атрибутами.
codepen.io/paulradzkov/pen/QBrwjO

aria-hidden="true" спрячет от читалки порваный тегами текст.
aria-label="Зачем тренер" подскажет читалке правильный текст.

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


2 августа 2018

Руст!

Меня волнует несколько вещей.

1. Это жё всё поедет, если начать менять масштаб страницы?
2. Если в h1 важен текст, скажем, для индексации, то он же забит левыми тегами. Как с этим быть?


2 августа 2018

Коля!

1. Можно масштабировать кегль заголовка вместе с картинкой. Либо не масштабировать картинку, а продолжить её в сторону с помощью заливки или градиента, если фон позволяет. Либо пофлексить что-нибудь (например, наползание последней буквы), чтобы получить более универсальное решение.

2. На этот вопрос очень хорошо ответил Павел.

Андрей Ерес
2 августа 2018

Можно ли голову и руку сохранить в прозрачные пнг размером с исходную картинку, чтобы не расставлять их вручную с помощью процентов?


2 августа 2018

Андрей, можно. Правда, эти картинки перекроют весь блок и, например, выделить заголовок будет невозможно. Но это можно поправить, добавив новым картинкам pointer-events: none

Mykhailo Ivankiv
2 августа 2018

Можно попробовать сверстать другим методом, без использования дополнительных HTML элементов, и резки картинки. Для этого на текстовый элемент можно наложить SVG маску.

Это можно сделать двумя методами (зависит списка браузеров, которые вам нужно поддерживать).

Первый - через css свойство clip-path https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

Второй - это перенести текст в svg элемент, и в нем наложить маску. https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/clip-path


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

EM или REM? Можно ли достичь эффекта переливания без встраивания видео на сайт? 1 6




Недавно всплыло

Как попросить клиента помочь с дебагом? 1 Как понять, что наступил момент назвать цену? 3 На основе ролика о распознавании инсульта создан плакат. Вторая часть 1 1