Секция с заголовком и фотографией

Часть текста заголовка, наложенного на фотографию имеет заданный цвет, а выходящая за нее — её фон. Данное наложение происходит автоматически в зависимости от количества текста и размера букв, это можно проверить сузив окно браузера.

Пример:

Gems of War

Puzzle RPG

Gems of War

Puzzle RPG

HTML:

<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>

<div class="sec-s">Puzzle RPG</div>

</div>

<div class="sec-s">Puzzle RPG</div>

</div>

Тексты заголовков должны дублироваться в блоке sec-text-d. Реализовать левую его часть через атрибут data-text невозможно, т.к. в WebKit не работает свойство -webkit-background-clip: text; с position: relative; и для второй строки (Puzzle RPG) нужно было бы задавать точные координаты (не стоит забывать, что первая строка может не умещаться в одну линию).
Фотографию нужно будет подогнать под размер секции CSS-свойством background-size

CSS:

.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;
	} 
}

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;

}

Подписывайтесь на публикации Там наиболее интересные заметки без рекламы и другой ненужной информации.

Протестировать на смартфоне Открыть QR-код для перехода на эту страницу с телефона

Опубликовано: 13.12.2020
Рубрики: Секции, Фото, аудио и видео
Метки: CSS, Авторское
9273 просмотра

Смотрите также:

Имитация книги из фотографии

Трансформация фотографии в обложку объемной книги средствами CSS

Fancybox 3 с темой оформления

jQuery плагин Fancybox 3, его быстрое подключение, настройка и тема оформления

Отложенная загрузка контента

Дополнения плагина jquery.lazy для отложенной загрузки фреймов, скриптов, медийных файлов и т.д.

Добавить комментарий:

Ваш комментарий отправлен!