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

HTML:

Карточка:

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

</div>

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

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

<a class="atuinCard-btn" href="#link">Подробнее</a>

</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: 100%;	
	}
}
@media (min-width: 768px) {
	.atuinCard-col {
		width: 50%;	
	}
}
@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 {
	height: 100%;
	position: relative;
	border-radius: 15px;
	border: 2px solid #fff;
	box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
	overflow: hidden;	
}
.atuinCard-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3)) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.2));
	pointer-events: none;
}
.atuinCard-img img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: center center;
	clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%, 0 0, 55% 65%, 73% 25%, 89% 25%, 80% 47%, 94% 47%, 73% 94%, 75% 65%, 55% 65%);
	transition: 0.4s;
}
.atuinCard:hover .atuinCard-img img {
	clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%, 0 0, 0 100%, 0 0, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%,0 100%);
}
.atuinCard-content {
	position: relative;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
	align-items: flex-start;
	min-height: 250px;
	height: 100%;
	padding: 0 20px;
	background: #fff;
}
.atuinCard-title {
	position: relative;
	top: 0;
	z-index: 2;
	left: 0;
	margin: 14px 6px;
	font-size: 20px;
	color: #fff;
	font-weight: 500;
	text-shadow: 0 5px 10px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.5);  
	transition: 0.4s;
	line-height: 1;
}
.atuinCard:hover .atuinCard-title {
	color: #337AB7;
	text-shadow: none;  
}
.atuinCard-content p {
	margin: 0 0 10px 0;
	line-height: 1.3;
	font-size: 16px;
}
.atuinCard-btn {
	position: relative;
	bottom: 0;
	z-index: 2;
	left: 0;
	margin: 6px 6px 16px;
	font-size: 14px;
	font-weight: 500;
	background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
    border-radius: 30px;
    padding: 10px 26px;
    text-decoration: none;
    text-transform: uppercase;
    overflow: hidden;
    color: #fff;
    transition: 0.5s;
	transition-delay: 0.1s;
    backdrop-filter: blur(15px);
	display: inline; 
}
.atuinCard-btn:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent);
    transform: skewX(45deg) translate(0);
    transition: 0.5s;
    filter: blur(0px);
}
.atuinCard:hover .atuinCard-btn {
    background: #337AB7;
	color: #fff;
}
.atuinCard .atuinCard-btn:hover {
    background: #2D6B9F;
}
.atuinCard:hover .atuinCard-btn:before {
    transform: skewX(45deg) translate(200px);
}
@media (min-width: 992px) {
	.atuinCard-title {
		font-size: 24px;
	}
	.atuinCard-content p {
		font-size: 18px;
	}
	.atuinCard-btn {
		font-size: 16px;
	}	
}

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

150

151

152

153

154

155

156

157

158

159

/* Сетка */

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

}

@media (min-width: 1200px) {

.atuinCard-col {

width: 33.33%;

}

@media (min-width: 1400px) {

.atuinCard-col {

width: 33.33%;

}

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

.atuinCard {

height: 100%;

position: relative;

border-radius: 15px;

border: 2px solid #fff;

box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);

overflow: hidden;

}

.atuinCard-img {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 1;

filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3)) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.2));

pointer-events: none;

}

.atuinCard-img img {

height: 100%;

width: 100%;

object-fit: cover;

object-position: center center;

clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%, 0 0, 55% 65%, 73% 25%, 89% 25%, 80% 47%, 94% 47%, 73% 94%, 75% 65%, 55% 65%);

transition: 0.4s;

}

.atuinCard:hover .atuinCard-img img {

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

}

.atuinCard-content {

position: relative;

display: flex;

flex-flow: column;

justify-content: space-between;

align-items: flex-start;

min-height: 250px;

height: 100%;

padding: 0 20px;

background: #fff;

}

.atuinCard-title {

position: relative;

top: 0;

z-index: 2;

left: 0;

margin: 14px 6px;

font-size: 20px;

color: #fff;

font-weight: 500;

text-shadow: 0 5px 10px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.5);

transition: 0.4s;

line-height: 1;

}

.atuinCard:hover .atuinCard-title {

color: #337AB7;

text-shadow: none;

}

.atuinCard-content p {

margin: 0 0 10px 0;

line-height: 1.3;

font-size: 16px;

}

.atuinCard-btn {

position: relative;

bottom: 0;

z-index: 2;

left: 0;

margin: 6px 6px 16px;

font-size: 14px;

font-weight: 500;

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

box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);

border-radius: 30px;

padding: 10px 26px;

text-decoration: none;

text-transform: uppercase;

overflow: hidden;

color: #fff;

transition: 0.5s;

transition-delay: 0.1s;

backdrop-filter: blur(15px);

display: inline;

}

.atuinCard-btn:before {

content: "";

position: absolute;

top: 0;

left: 0;

width: 50%;

height: 100%;

background: linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent);

transform: skewX(45deg) translate(0);

transition: 0.5s;

filter: blur(0px);

}

.atuinCard:hover .atuinCard-btn {

background: #337AB7;

color: #fff;

}

.atuinCard .atuinCard-btn:hover {

background: #2D6B9F;

}

.atuinCard:hover .atuinCard-btn:before {

transform: skewX(45deg) translate(200px);

}

@media (min-width: 992px) {

.atuinCard-title {

font-size: 24px;

}

.atuinCard-content p {

font-size: 18px;

}

.atuinCard-btn {

font-size: 16px;

}

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

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

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

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

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

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

Пример:

HTML:

Карточка:

Сетка:

CSS:

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

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