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

Пример:

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

HTML:

Карточка:

<div class="atuinCard-col">
	<div class="atuinCard">		
		<div class="atuinCard-icon">
			<svg enable-background="new 0 0 110 110" viewBox="0 0 110 110" xmlns="http://www.w3.org/2000/svg"><path id="Exclamation" d="m55 29c-14.3 0-26 11.7-26 26s11.7 26 26 26 26-11.7 26-26-11.7-26-26-26zm0 42c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4zm2-12h-4l-2-20h8zm-2-59c-30.4 0-55 24.6-55 55s24.6 55 55 55 55-24.6 55-55-24.6-55-55-55zm0 87c-17.6 0-32-14.4-32-32s14.4-32 32-32 32 14.4 32 32-14.4 32-32 32z"/></svg>
		</div>
		<div class="atuinCard-txt">	
			<strong>Заголовок карточки</strong>
			<p>Контент карточки</p>
		</div>
	</div>	
</div>

</div>

<strong>Заголовок карточки</strong>

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

</div>

Сетка:

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

</div>

</div>

</div>

Если используется своя сетка, родительский элемент для колонок должен иметь стиль counter-reset: num;

CSS:

/* Сетка */		
.atuinCard-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 10px -10px;
    counter-reset: num;
}
.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: 100%;	
	}
}
@media (min-width: 992px) {
	.atuinCard-col {
		width: 50%;		
	}
}
@media (min-width: 1200px) {
	.atuinCard-col {
		width: 33.33%;	
	}
}
@media (min-width: 1400px) {
	.atuinCard-col {
		width: 33.33%;	
	}
}


/* Карточка */
.atuinCard {
	position: relative;
	height: calc(100% - 10px);
	padding: 16px 10px;
	display: flex;	
	margin: 10px 32px 0 0;
	z-index: 1;
}	
.atuinCard:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	backdrop-filter: blur(4px);
	z-index: -1;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.7);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), inset 0 0 0 2px rgba(0, 0, 0, 0.1);
	transition: 0.5s;
}
.atuinCard:after {
	position: absolute;
	font-size: 60px;
	counter-increment: num;
	content: "0" counter(num);
	font-weight: 600;
	top: -30px;
	line-height: 1;
	right: -34px;
	color: rgba(0, 0, 0, 0.2);
	font-family: monospace;   
	z-index: -2;
}
.atuinCard-icon {
	flex: 0 0 40px;
	filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2))
}
.atuinCard-icon svg {
	width: 40px;
	fill: #337AB7;
}
.atuinCard-txt {
	padding-left: 10px;
}
.atuinCard-txt strong {
	color: #337AB7;
	font-size: 18px;
	line-height: 1.3;
	text-transform: uppercase;
}
.atuinCard-txt p {
	padding-top: 10px;
	margin: 0;
	font-size: 16px;
	line-height: 1.3;
}
.atuinCard:hover:before {
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2), inset 0 0 0 2px rgba(0, 0, 0, 0.1);
}
@media (min-width: 576px) {
	.atuinCard {
		height: calc(100% - 20px);
		margin: 10px 52px 10px 0;
		padding: 16px;
	}	
	.atuinCard:after {
		font-size: 80px;
		right: -54px;
	}
	.atuinCard-icon {
		flex: 0 0 60px;
	}
	.atuinCard-icon svg {
		width: 60px;
	}
	.atuinCard-txt {
		padding-left: 20px;
	}	
	.atuinCard-txt strong {
		font-size: 20px;
	}
	.atuinCard-txt 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

/* Сетка */

.atuinCard-container {

display: flex;

flex-wrap: wrap;

justify-content: center;

margin: 10px -10px;

counter-reset: num;

}

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

}

@media (min-width: 992px) {

.atuinCard-col {

width: 50%;

}

@media (min-width: 1200px) {

.atuinCard-col {

width: 33.33%;

}

@media (min-width: 1400px) {

.atuinCard-col {

width: 33.33%;

}

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

.atuinCard {

position: relative;

height: calc(100% - 10px);

padding: 16px 10px;

display: flex;

margin: 10px 32px 0 0;

z-index: 1;

}

.atuinCard:before {

content: "";

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

backdrop-filter: blur(4px);

z-index: -1;

border-radius: 12px;

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

box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), inset 0 0 0 2px rgba(0, 0, 0, 0.1);

transition: 0.5s;

}

.atuinCard:after {

position: absolute;

font-size: 60px;

counter-increment: num;

content: "0" counter(num);

font-weight: 600;

top: -30px;

line-height: 1;

right: -34px;

color: rgba(0, 0, 0, 0.2);

font-family: monospace;

z-index: -2;

}

.atuinCard-icon {

flex: 0 0 40px;

filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2))

}

.atuinCard-icon svg {

width: 40px;

fill: #337AB7;

}

.atuinCard-txt {

padding-left: 10px;

}

.atuinCard-txt strong {

color: #337AB7;

font-size: 18px;

line-height: 1.3;

text-transform: uppercase;

}

.atuinCard-txt p {

padding-top: 10px;

margin: 0;

font-size: 16px;

line-height: 1.3;

}

.atuinCard:hover:before {

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

box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2), inset 0 0 0 2px rgba(0, 0, 0, 0.1);

}

@media (min-width: 576px) {

.atuinCard {

height: calc(100% - 20px);

margin: 10px 52px 10px 0;

padding: 16px;

}

.atuinCard:after {

font-size: 80px;

right: -54px;

}

.atuinCard-icon {

flex: 0 0 60px;

}

.atuinCard-icon svg {

width: 60px;

}

.atuinCard-txt {

padding-left: 20px;

}

.atuinCard-txt strong {

font-size: 20px;

}

.atuinCard-txt p {

font-size: 18px;

}

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

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

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

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

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

Опубликовано: 04.04.2025 / Обновлено: 26.04.2025
Рубрики: Коллекция карточек и блоков
251 просмотр

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

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

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