|
Руст Кулматов
|
||||||||
|
Можно нарезать картинку на части и разложить элементы по слоям с помощью Сначала вырежем из картинки «наползающие» элементы. Так как у меня нет оригинала, я сделал это довольно грубо: |
||||||||
Фон без текста
Голова штангиста
Рука со штангой
|
Теперь разместим все элементы на полотне с помощью абсолютного позиционирования: |
||||||||
<!-- 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%;
}
Зачем
тренер
тренер
|
Благодаря порядку элементов в разметке почти всё получилось сразу, только последняя буква второй строки подлезает под руку, хотя не должна. Исправим, задав ей |
||||||||
<!-- 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. Это был совет о
|