Часть текста заголовка, наложенного на фотографию имеет заданный цвет, а выходящая за нее — её фон. Данное наложение происходит автоматически в зависимости от количества текста и размера букв, это можно проверить сузив окно браузера.
Пример:
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; } } |
Смотрите также:
Примеры создания ховер эффектов, используя наложенные друг на друга одинаковые изображения
Скрипт ComcastifyJS для эмуляции загрузки изображений как на модеме 56к
Пример создания модальной картины из изображения на CSS
Добавить комментарий: