Карточки и блоки #15

HTML:

Карточка:

<div class="atuinCard">
	<a href="#link" class="atuinCard-link-image">
		<div class="atuinCard-image-part">
			<img src="image.webp" alt="image">
		</div>
		<div class="atuinCard-image-part">
			<img src="image.webp" alt="image">
		</div>
		<div class="atuinCard-image-part">
			<img src="image.webp" alt="image">
		</div>		
		<div class="atuinCard-date">
			<span class="atuinCard-date-day">5</span>
			<span class="atuinCard-date-my">Окт 2026</span>
		</div>
	</a>			
	<div class="atuinCard-content">
		<a href="#link" class="atuinCard-title">Заголовок карточки</a>
		<p>Контент карточки</p>
	</div>
</div>

</div>

</div>

</div>

</div>

</a>

<a href="#link" class="atuinCard-title">Заголовок карточки</a>

<p>Контент карточки</p>

</div>

Сетка:

<div class="atuinCard-container">
	<div class="atuinCard-col">
		<!-- Карточка -->
	</div>	
	<div class="atuinCard-col">
		<!-- Карточка -->
	</div>
	<!-- ... -->
	<!-- Еще колонки  -->	
</div>

</div>

</div>

</div>

CSS:

Карточка:

.atuinCard {
	background: white;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	transition: box-shadow 0.3s ease;
	height: 100%;
	display: flex;
	flex-direction: column;
	position: relative;
}
.atuinCard:hover {
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}
.atuinCard-link-image {
	position: relative;
	overflow: hidden;
	aspect-ratio: 2 / 1;
}
.atuinCard-image-part {
	position: absolute;
	inset: 0;
	overflow: hidden;
	transition: clip-path 0.8s;
	will-change: clip-path;
}
.atuinCard-image-part img {
	position: absolute;
	inset: 0;
	object-fit: cover;
	transition: transform 0.5s, opacity 0.3s;
	will-change: transform;
	width: 100%;
}
.atuinCard:hover .atuinCard-image-part:nth-child(2) img {
	transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.atuinCard-image-part:nth-child(1) {
	clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 100%);
}
.atuinCard-image-part:nth-child(2) {
	clip-path: polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%);
}
.atuinCard-image-part:nth-child(3) {
	clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
}
.atuinCard:hover .atuinCard-image-part:nth-child(1) {
	clip-path: polygon(0% 0%, 9.5% 0%, 10% 100%, 0% 100%);
}
.atuinCard:hover .atuinCard-image-part:nth-child(2) {
	clip-path: polygon(9.5% 0%, 90% 0%, 90.5% 100%, 10% 100%);
}
.atuinCard:hover .atuinCard-image-part:nth-child(3) {
	clip-path: polygon(90% 0%, 100% 0%, 100% 100%, 90.5% 100%);
}
.atuinCard:hover .atuinCard-image-part:nth-child(1) img,
.atuinCard:hover .atuinCard-image-part:nth-child(3) img {
	transform: scale(1.2) translateX(-5%);
	opacity: 0.6;
}
.atuinCard:hover .atuinCard-image-part:nth-child(3) img {
	transform: scale(1.2) translateX(5%);
}
.atuinCard:hover .atuinCard-image-part:nth-child(2) img {
	transform: scale(1.4);
}
.atuinCard-date {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	background: rgba(255, 255, 255, 0.75);
	backdrop-filter: blur(4px);
	border-radius: 10px;
	padding: 6px 12px;
	text-align: center;
	line-height: 1;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.atuinCard-date-day {
	display: block;
	font-size: 22px;
	font-weight: 600;
	color: #337AB7;
}
.atuinCard-date-my {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	color: #333;
	margin-top: 4px;
	letter-spacing: 0.5px;
	font-weight: 600;
}
.atuinCard-content {
	padding: 16px 20px;
}
.atuinCard-title {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: 12px;
	display: inline-block;
	text-decoration: none;
	background: linear-gradient(90deg, #337AB7 0%, #337AB7 50%, #333 50%, #333 100%);
	background-size: 200% 100%;
	background-position: 100% 0;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	transition: background-position 0.6s ease, color 0.4s;
	text-transform: uppercase;
	position: relative;
}
.atuinCard-title::before {
	content: '';
	position: absolute;
	bottom: -5px;
	left: 0;
	width: 0;
	height: 2px;
	background: #ddd;
	transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.atuinCard:hover .atuinCard-title {
	background-position: 0 0;
}
.atuinCard-title:hover::before {
	width: 100%;
}
.atuinCard-title:hover {
	color: #1f4a6f;
}
.atuinCard-content p {
	line-height: 1.4;
	font-size: 16px;
	margin: 0;
}
@media (min-width: 992px) {
	.atuinCard-date-day {
		font-size: 30px;
	}
	.atuinCard-title { 
		font-size: 20px; 
	}
	.atuinCard-content p { 
		font-size: 18px; 
	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

.atuinCard {

background: white;

border-radius: 16px;

overflow: hidden;

box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

transition: box-shadow 0.3s ease;

height: 100%;

display: flex;

flex-direction: column;

position: relative;

}

.atuinCard:hover {

box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);

}

.atuinCard-link-image {

position: relative;

overflow: hidden;

aspect-ratio: 2 / 1;

}

.atuinCard-image-part {

position: absolute;

inset: 0;

overflow: hidden;

transition: clip-path 0.8s;

will-change: clip-path;

}

.atuinCard-image-part img {

position: absolute;

inset: 0;

object-fit: cover;

transition: transform 0.5s, opacity 0.3s;

will-change: transform;

width: 100%;

}

.atuinCard:hover .atuinCard-image-part:nth-child(2) img {

transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);

}

.atuinCard-image-part:nth-child(1) {

clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 100%);

}

.atuinCard-image-part:nth-child(2) {

clip-path: polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%);

}

.atuinCard-image-part:nth-child(3) {

clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);

}

.atuinCard:hover .atuinCard-image-part:nth-child(1) {

clip-path: polygon(0% 0%, 9.5% 0%, 10% 100%, 0% 100%);

}

.atuinCard:hover .atuinCard-image-part:nth-child(2) {

clip-path: polygon(9.5% 0%, 90% 0%, 90.5% 100%, 10% 100%);

}

.atuinCard:hover .atuinCard-image-part:nth-child(3) {

clip-path: polygon(90% 0%, 100% 0%, 100% 100%, 90.5% 100%);

}

.atuinCard:hover .atuinCard-image-part:nth-child(1) img,

.atuinCard:hover .atuinCard-image-part:nth-child(3) img {

transform: scale(1.2) translateX(-5%);

opacity: 0.6;

}

.atuinCard:hover .atuinCard-image-part:nth-child(3) img {

transform: scale(1.2) translateX(5%);

}

.atuinCard:hover .atuinCard-image-part:nth-child(2) img {

transform: scale(1.4);

}

.atuinCard-date {

position: absolute;

top: 12px;

left: 12px;

z-index: 2;

background: rgba(255, 255, 255, 0.75);

backdrop-filter: blur(4px);

border-radius: 10px;

padding: 6px 12px;

text-align: center;

line-height: 1;

box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);

}

.atuinCard-date-day {

display: block;

font-size: 22px;

font-weight: 600;

color: #337AB7;

}

.atuinCard-date-my {

display: block;

font-size: 11px;

text-transform: uppercase;

color: #333;

margin-top: 4px;

letter-spacing: 0.5px;

font-weight: 600;

}

.atuinCard-content {

padding: 16px 20px;

}

.atuinCard-title {

font-size: 16px;

font-weight: 600;

line-height: 1.3;

margin-bottom: 12px;

display: inline-block;

text-decoration: none;

background: linear-gradient(90deg, #337AB7 0%, #337AB7 50%, #333 50%, #333 100%);

background-size: 200% 100%;

background-position: 100% 0;

-webkit-background-clip: text;

background-clip: text;

color: transparent;

transition: background-position 0.6s ease, color 0.4s;

text-transform: uppercase;

position: relative;

}

.atuinCard-title::before {

content: '';

position: absolute;

bottom: -5px;

left: 0;

width: 0;

height: 2px;

background: #ddd;

transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

}

.atuinCard:hover .atuinCard-title {

background-position: 0 0;

}

.atuinCard-title:hover::before {

width: 100%;

}

.atuinCard-title:hover {

color: #1f4a6f;

}

.atuinCard-content p {

line-height: 1.4;

font-size: 16px;

margin: 0;

}

@media (min-width: 992px) {

.atuinCard-date-day {

font-size: 30px;

}

.atuinCard-title {

font-size: 20px;

}

.atuinCard-content p {

font-size: 18px;

}

Сетка:

.atuinCard-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 10px -10px;
}
.atuinCard-container *,
.atuinCard-container *::before,
.atuinCard-container *::after {
	box-sizing: border-box;
}
.atuinCard-col {
	width: 100%;
	padding: 10px;
}
@media (min-width: 576px) {
	.atuinCard-col {
		width: 100%;	
	}
}
@media (min-width: 768px) {
	.atuinCard-col {
		width: 50%;	
	}
}
@media (min-width: 992px) {
	.atuinCard-col {
		width: 33.33%;		
	}
}
@media (min-width: 1200px) {
	.atuinCard-col {
		width: 33.33%;		
	}
}
@media (min-width: 1400px) {
	.atuinCard-col {
		width: 33.33%;		
	}
}

.atuinCard-container {

display: flex;

flex-wrap: wrap;

justify-content: center;

margin: 10px -10px;

}

.atuinCard-container *,

.atuinCard-container *::before,

.atuinCard-container *::after {

box-sizing: border-box;

}

.atuinCard-col {

width: 100%;

padding: 10px;

}

@media (min-width: 576px) {

.atuinCard-col {

width: 100%;

}

@media (min-width: 768px) {

.atuinCard-col {

width: 50%;

}

@media (min-width: 992px) {

.atuinCard-col {

width: 33.33%;

}

@media (min-width: 1200px) {

.atuinCard-col {

width: 33.33%;

}

@media (min-width: 1400px) {

.atuinCard-col {

width: 33.33%;

}

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

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

Опубликовано: 05.10.2026
Рубрики: Коллекция карточек и блоков
89 просмотров

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

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

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

Пример:

HTML:

Карточка:

Сетка:

CSS:

Карточка:

Сетка:

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

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