Карточки и блоки #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 {
	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;
	will-change: transform;
}
.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%;
}
.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-icon {
		width: 110px;
		height: 110px;
	}
	.atuinCard-content p {
		font-size: 18px;
	}
	.atuinCard-title {
		font-size: 20px;
	}
}

100

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

will-change: transform;

}

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

}

.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-icon {

width: 110px;

height: 110px;

}

.atuinCard-content p {

font-size: 18px;

}

.atuinCard-title {

font-size: 20px;

}

Сетка:

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

}

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

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

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

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

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

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

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

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

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

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

Ответить

Пример:

HTML:

Карточка:

Сетка:

CSS:

Карточка:

Сетка:

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

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

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