Часть текста заголовка, наложенного на фотографию имеет заданный цвет, а выходящая за нее — её фон. Данное наложение происходит автоматически в зависимости от количества текста и размера букв, это можно проверить сузив окно браузера.
Пример:
Gems of War
Puzzle RPG
Gems of War
Puzzle RPG
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="sec-wr"> <div class="bg-img"></div> <div class="sec-text"> <div class="sec-f">Gems of War</div> <div class="sec-s">Puzzle RPG</div> </div> <div class="sec-text-d"> <div class="sec-f">Gems of War</div> <div class="sec-s">Puzzle RPG</div> </div> </div> |
- Тексты заголовков должны дублироваться в блоке
sec-text-d. Реализовать левую его часть через атрибутdata-textневозможно, т.к. в WebKit не работает свойство-webkit-background-clip: text;сposition: relative;и для второй строки (Puzzle RPG) нужно было бы задавать точные координаты (не стоит забывать, что первая строка может не умещаться в одну линию). - Фотографию нужно будет подогнать под размер секции CSS-свойством
background-size
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 |
.sec-wr { display: grid; grid-template-columns: 1fr 1fr; height: 500px; max-width: 1000px; margin: 20px auto; position: relative; } .bg-img { grid-area: 1/1/2/2; background: url("background.jpg"); background-size: auto 560px; background-repeat: no-repeat; background-position: 0 50%; border-radius: 40px; } .sec-text { grid-area: 1/1/-1/-1; background:url("background.jpg"); -webkit-background-clip: text; background-clip: text; background-size: auto 560px; background-repeat: no-repeat; background-position: 0 50%; margin: 0; padding: 60px 26px 0 26px; position: relative; } .sec-f, .sec-s { color: transparent; text-align: right; font-family: impact, sans-serif; text-transform: uppercase; font-weight: bold; font-size: 150px; line-height: 1; } .sec-text-d { position: absolute; padding: 60px 26px 0 26px; top: 0; bottom: 0; left: 0; right: 0; } .sec-text-d .sec-f, .sec-text-d .sec-s { content: attr(data-text); text-align: right; clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%); color: white; text-shadow: 0 0 12px #000; } .sec-s { font-family: Tahoma, sans-serif; font-size: 73px; line-height: 1; } @media screen and (max-width: 1000px){ .sec-wr { width: 100%; height: 400px; margin: auto; } .sec-f { font-size: 100px; } .sec-s { font-size: 60px; } } @media screen and (max-width: 680px){ .sec-wr { height: 320px; } .bg-img, .sec-text { background-size: auto 460px; } .sec-f { font-size: 90px; } .sec-s { font-size: 40px; } } @media screen and (max-width: 580px){ .sec-f { font-size: 60px; } .sec-s { font-size: 40px; } } @media screen and (max-width: 480px){ .sec-wr { grid-template-columns: 1fr; } .bg-img { background-size: auto 320px; } .sec-text { display: none; } .sec-text-d .sec-f, .sec-text-d .sec-s { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } .sec-f { font-size: 40px; } .sec-s { font-size: 26px; } } |
Смотрите также:
Сборник разделителей для перехода между секциями разного цвета.
3D hover-эффект ориентированный на направление движения курсора мыши
Красивая анимация фона блока или страницы, создаваемая с помощью заданной картинки
Добавить комментарий: