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

HTML:

Карточка:

<div class="atuinCard">
	<a class="atuinCard-link" href="#link">
		<span class="atuinCard-img">
			<img src="image.jpg" alt="image">
		</span>
		<span class="atuinCard-icon"><span></span></span>
	</a>
	<div class="atuinCard-content">
		<div class="atuinCard-title">Заголовок карточки</div>
		<p>Контент карточки</p>
	</div>
</div>

</span>

</a>

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

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

</div>

Сетка:

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

</div>

</div>

</div>

CSS:

/* Сетка */		
.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: 50%;	
	}
}
@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: 25%;	
	}
}

/* Карточка */
.atuinCard {
	height: 100%;
	background: #fff;
	padding-bottom: 10px;
}
.atuinCard-link {
	position: relative;
	width: inherit;
	aspect-ratio: 4 / 3;
	background: #fff;
	border-radius: 24px;
	border-bottom-right-radius: 0;
	overflow: hidden;
	display: block;
}
.atuinCard-img {
	position: absolute;
	inset: 0;
	transition: 2s;
}
.atuinCard-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.atuinCard-icon {
	position: absolute;
	bottom: -7px;
	right: -7px;
	width: 90px;
	height: 90px;
	background: #fff;
	border-top-left-radius: 50%;
}
@media (min-width: 768px) {
	.atuinCard-icon {
		width: 110px;
		height: 110px;
	}
}
.atuinCard-icon::before {
	position: absolute;
	content: "";
	bottom: 7px;
	left: -25px;
	background: transparent;
	width: 25px;
	height: 25px;
	border-bottom-right-radius: 25px;
	box-shadow: 7px 7px 0 7px #fff;
}
.atuinCard-icon::after {
	position: absolute;
	content: "";
	top: -25px;
	right: 7px;
	background: transparent;
	width: 25px;
	height: 25px;
	border-bottom-right-radius: 25px;
	box-shadow: 7px 7px 0 7px #fff;
}
.atuinCard-icon span {
	position: absolute;
	inset: 10.5px;
	font-size: 0;
	background-color: #337AB7;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg enable-background='new 0 0 100 100' fill='%23fff' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3e%3cg%3e%3cpath d='m27.787 81.51c-.397 0-.779-.158-1.061-.439l-7.402-7.402c-.586-.585-.586-1.535 0-2.121l31.389-31.39-11.479-11.478c-.393-.393-.536-.971-.373-1.502s.607-.928 1.153-1.032l40.107-7.629c.491-.093.989.062 1.341.413s.506.853.413 1.341l-7.627 40.108c-.104.546-.501.99-1.032 1.153-.533.161-1.109.02-1.502-.373l-11.478-11.478-31.388 31.389c-.282.282-.663.44-1.061.44zm-5.281-8.903 5.281 5.281 31.389-31.39c.586-.586 1.535-.586 2.121 0l10.534 10.534 6.686-35.157-35.157 6.688 10.534 10.533c.281.281.439.663.439 1.061s-.158.779-.439 1.061z'/%3e%3c/g%3e%3c/svg%3e");
	background-size: 70%;
	background-repeat: no-repeat;
	background-position: center center;
	border-radius: 50%;
	transition: 0.5s;
	transform: scale(0.9);
}
.atuinCard-link:hover .atuinCard-icon span {
	transform: scale(1) rotate(45deg);
}	
.atuinCard-link:hover .atuinCard-img {
	transform: scale(1.3);
}
.atuinCard-content p {
	font-size: 15px;
	line-height: 1.3;
	margin: 8px 0;
}
.atuinCard-title {
	font-size: 18px;
	line-height: 1.3;
	margin: 20px 0 10px;
	color: #337AB7;
	font-weight: bold;
}
@media (min-width: 768px) {
	.atuinCard-content p {
		font-size: 18px;
	}
	.atuinCard-title {
		font-size: 20px;
	}
}

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

/* Сетка */

.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: 50%;

}

@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: 25%;

}

/* Карточка */

.atuinCard {

height: 100%;

background: #fff;

padding-bottom: 10px;

}

.atuinCard-link {

position: relative;

width: inherit;

aspect-ratio: 4 / 3;

background: #fff;

border-radius: 24px;

border-bottom-right-radius: 0;

overflow: hidden;

display: block;

}

.atuinCard-img {

position: absolute;

inset: 0;

transition: 2s;

}

.atuinCard-img img {

width: 100%;

height: 100%;

object-fit: cover;

}

.atuinCard-icon {

position: absolute;

bottom: -7px;

right: -7px;

width: 90px;

height: 90px;

background: #fff;

border-top-left-radius: 50%;

}

@media (min-width: 768px) {

.atuinCard-icon {

width: 110px;

height: 110px;

}

.atuinCard-icon::before {

position: absolute;

content: "";

bottom: 7px;

left: -25px;

background: transparent;

width: 25px;

height: 25px;

border-bottom-right-radius: 25px;

box-shadow: 7px 7px 0 7px #fff;

}

.atuinCard-icon::after {

position: absolute;

content: "";

top: -25px;

right: 7px;

background: transparent;

width: 25px;

height: 25px;

border-bottom-right-radius: 25px;

box-shadow: 7px 7px 0 7px #fff;

}

.atuinCard-icon span {

position: absolute;

inset: 10.5px;

font-size: 0;

background-color: #337AB7;

background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg enable-background='new 0 0 100 100' fill='%23fff' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3e%3cg%3e%3cpath d='m27.787 81.51c-.397 0-.779-.158-1.061-.439l-7.402-7.402c-.586-.585-.586-1.535 0-2.121l31.389-31.39-11.479-11.478c-.393-.393-.536-.971-.373-1.502s.607-.928 1.153-1.032l40.107-7.629c.491-.093.989.062 1.341.413s.506.853.413 1.341l-7.627 40.108c-.104.546-.501.99-1.032 1.153-.533.161-1.109.02-1.502-.373l-11.478-11.478-31.388 31.389c-.282.282-.663.44-1.061.44zm-5.281-8.903 5.281 5.281 31.389-31.39c.586-.586 1.535-.586 2.121 0l10.534 10.534 6.686-35.157-35.157 6.688 10.534 10.533c.281.281.439.663.439 1.061s-.158.779-.439 1.061z'/%3e%3c/g%3e%3c/svg%3e");

background-size: 70%;

background-repeat: no-repeat;

background-position: center center;

border-radius: 50%;

transition: 0.5s;

transform: scale(0.9);

}

.atuinCard-link:hover .atuinCard-icon span {

transform: scale(1) rotate(45deg);

}

.atuinCard-link:hover .atuinCard-img {

transform: scale(1.3);

}

.atuinCard-content p {

font-size: 15px;

line-height: 1.3;

margin: 8px 0;

}

.atuinCard-title {

font-size: 18px;

line-height: 1.3;

margin: 20px 0 10px;

color: #337AB7;

font-weight: bold;

}

@media (min-width: 768px) {

.atuinCard-content p {

font-size: 18px;

}

.atuinCard-title {

font-size: 20px;

}

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

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

Помощь по установке кода Ответы на часто задаваемые вопросы и решение типовых ошибок и проблем

Страница находится в стадии разработки

Поддержать блог Любые Ваши (пусть даже и скромные) суммы значительно повышают мотивацию развивать блог, делиться наработками и придумывать новые.

Опубликовано: 01.04.2025 / Обновлено: 01.05.2025
Рубрики: Коллекция карточек и блоков
627 просмотров

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

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

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

Николай: 04.05.2025 в 19:34

Все разобрался, в мобильном варианте тоже норм стало.

Ответить
Николай: 04.05.2025 в 18:54

Красивое решение для сайта на ПК. А как в мобильной версии сделать так, чтобы тоже смотрелось так же как на ПК?

Ответить

Пример:

HTML:

Карточка:

Сетка:

CSS:

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

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

Комментарии: