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

HTML:

Карточка:

<div class="atuinCard">
	<div class="atuinCard-top">
		<div class="atuinCard-avatar">
			<img alt="avatar" src="avatar.jpg">
		</div>
		<div class="atuinCard-data">
			<div class="atuinCard-rating-5"></div>
			<div class="atuinCard-name">Автор</div>
			<div class="atuinCard-date">Дата</div>
		</div>
	</div>		
	<div class="atuinCard-middle">
		<p>Контент карточки</p>
	</div>
	<a class="atuinCard-bottom" href="#link" target="_blank" rel="nofollow noreferrer">Ссылка</a>
</div>

</div>

<div class="atuinCard-name">Автор</div>

</div>

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

</div>

<a class="atuinCard-bottom" href="#link" target="_blank" rel="nofollow noreferrer">Ссылка</a>

</div>

Если у автора нет аватара, то удаляем картинку <img alt="avatar" src="avatar.jpg">, и в окошке будет показываться фоновая иконка.
Рейтинг устанавливается классами atuinCard-rating-1 - atuinCard-rating-5 (1 - 5 звезд соответственно).
Кнопка "Еще" добавляется автоматически и показывается, если текст не умещается в заданную область.

Сетка:

<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: 25%;	
	}
}
@media (min-width: 1400px) {
	.atuinCard-col {
		width: 25%;	
	}
}


/* Карточка */
.atuinCard {
    position: relative;
    padding: 12px 12px 34px;
    border-radius: 18px;
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.2);
    background-color: #fff;
    transition: box-shadow 0.3s;
	height: 100%;
}
.atuinCard:hover {
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.4);
}
.atuinCard-top {
    display: flex;
    gap: 8px;	
}
.atuinCard-avatar {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='%23337AB7' d='m2.006 64h59.987c-.448-12.917-9.261-23.913-21.806-27.129l-7.464 7.329c-.401.394-1.045.394-1.446 0l-7.464-7.329c-12.546 3.216-21.358 14.212-21.807 27.129zm29.994-32.123c-8.788 0-15.938-7.15-15.938-15.939 0-8.788 7.15-15.938 15.938-15.938s15.938 7.15 15.938 15.938c0 8.789-7.15 15.939-15.938 15.939z'/%3e%3c/svg%3e");
	background-size: 90%;
	background-position: center bottom;
	background-repeat: no-repeat;
	height: 60px;
	width: 60px;
	flex: 0 0 60px;
	overflow: hidden;
	border: 4px solid #ddd;
	border-radius: 50%;
}
.atuinCard-avatar img {
	height: 60px;
	width: 60px;
	object-fit: cover;
	object-position: center top;
}
.atuinCard-data {
	display: flex;
    flex-direction: column;
    gap: 2px;
}
.atuinCard-data div:first-child {
	background-size: contain;
	height: 20px;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg enable-background='new 0 0 512 512' viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3e%3cg%3e%3cpath d='m512 198.769-177.221-25.591-78.779-159.624-78.779 159.624-177.221 25.591 128.544 124.248-30.088 175.429 157.544-82.822 157.544 82.822-30.088-175.429z' fill='%23fed843'/%3e%3cpath d='m383.456 323.017 128.544-124.248-177.221-25.591-78.779-159.624v402.07l157.544 82.822z' fill='%23fabe2c'/%3e%3c/g%3e%3c/svg%3e");
}
.atuinCard-rating-1 {
	width: 20px;
}
.atuinCard-rating-2 {
	width: 40px;
}
.atuinCard-rating-3 {
	width: 60px;
}
.atuinCard-rating-4 {
	width: 80px;
}
.atuinCard-rating-5 {
	width: 100px;
}
.atuinCard-name {
    font-size: 15px;
    font-weight: bold;
	color: #337AB7;
}
.atuinCard-date {
    font-size: 14px;
	color: #909090;
}
.atuinCard-middle {
	max-height: 220px;
	overflow: hidden;
	position: relative;
}
.atuinCard-middle.atuinCard-close {
	max-height: none;
}
.atuinCard-middle.atuinCard-gradient:after {
    content: "";
    position: absolute;
    pointer-events: none;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #FFF 75%)    
}
.atuinCard-middle p {
	padding: 10px 0 0 4px;
	margin: 0;
	font-size: 16px;
	line-height: 1.3;
}
.atuinCard-middle button {
	display: none;
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 0 10px;
	border: none;
    color: rgba(0, 0, 0, 0.7);
    font-weight: bold;
    font-size: 15px;
    transition: color 0.4s;
    cursor: pointer;
    background: transparent;
	z-index: 1;
}
.atuinCard-middle.atuinCard-close button {
	position: static;
	padding: 10px 10px 0;
}
.atuinCard-middle button:hover {
    color: rgba(0, 0, 0, 1);
}
.atuinCard-bottom {
	position: absolute;
	bottom: 10px;
	right: 20px;
	font-size: 14px;
	color: #909090;
	transition: color 0.4s;
	text-decoration: none;
}
.atuinCard-bottom:hover {
	color: #000;
}

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

160

161

162

163

164

165

166

167

168

169

170

/* Сетка */

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

}

@media (min-width: 1400px) {

.atuinCard-col {

width: 25%;

}

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

.atuinCard {

position: relative;

padding: 12px 12px 34px;

border-radius: 18px;

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

background-color: #fff;

transition: box-shadow 0.3s;

height: 100%;

}

.atuinCard:hover {

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

}

.atuinCard-top {

display: flex;

gap: 8px;

}

.atuinCard-avatar {

background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='%23337AB7' d='m2.006 64h59.987c-.448-12.917-9.261-23.913-21.806-27.129l-7.464 7.329c-.401.394-1.045.394-1.446 0l-7.464-7.329c-12.546 3.216-21.358 14.212-21.807 27.129zm29.994-32.123c-8.788 0-15.938-7.15-15.938-15.939 0-8.788 7.15-15.938 15.938-15.938s15.938 7.15 15.938 15.938c0 8.789-7.15 15.939-15.938 15.939z'/%3e%3c/svg%3e");

background-size: 90%;

background-position: center bottom;

background-repeat: no-repeat;

height: 60px;

width: 60px;

flex: 0 0 60px;

overflow: hidden;

border: 4px solid #ddd;

border-radius: 50%;

}

.atuinCard-avatar img {

height: 60px;

width: 60px;

object-fit: cover;

object-position: center top;

}

.atuinCard-data {

display: flex;

flex-direction: column;

gap: 2px;

}

.atuinCard-data div:first-child {

background-size: contain;

height: 20px;

background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg enable-background='new 0 0 512 512' viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3e%3cg%3e%3cpath d='m512 198.769-177.221-25.591-78.779-159.624-78.779 159.624-177.221 25.591 128.544 124.248-30.088 175.429 157.544-82.822 157.544 82.822-30.088-175.429z' fill='%23fed843'/%3e%3cpath d='m383.456 323.017 128.544-124.248-177.221-25.591-78.779-159.624v402.07l157.544 82.822z' fill='%23fabe2c'/%3e%3c/g%3e%3c/svg%3e");

}

.atuinCard-rating-1 {

width: 20px;

}

.atuinCard-rating-2 {

width: 40px;

}

.atuinCard-rating-3 {

width: 60px;

}

.atuinCard-rating-4 {

width: 80px;

}

.atuinCard-rating-5 {

width: 100px;

}

.atuinCard-name {

font-size: 15px;

font-weight: bold;

color: #337AB7;

}

.atuinCard-date {

font-size: 14px;

color: #909090;

}

.atuinCard-middle {

max-height: 220px;

overflow: hidden;

position: relative;

}

.atuinCard-middle.atuinCard-close {

max-height: none;

}

.atuinCard-middle.atuinCard-gradient:after {

content: "";

position: absolute;

pointer-events: none;

left: 0;

bottom: 0;

height: 100px;

width: 100%;

background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #FFF 75%)

}

.atuinCard-middle p {

padding: 10px 0 0 4px;

margin: 0;

font-size: 16px;

line-height: 1.3;

}

.atuinCard-middle button {

display: none;

position: absolute;

bottom: 0;

left: 0;

padding: 0 10px;

border: none;

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

font-weight: bold;

font-size: 15px;

transition: color 0.4s;

cursor: pointer;

background: transparent;

z-index: 1;

}

.atuinCard-middle.atuinCard-close button {

position: static;

padding: 10px 10px 0;

}

.atuinCard-middle button:hover {

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

}

.atuinCard-bottom {

position: absolute;

bottom: 10px;

right: 20px;

font-size: 14px;

color: #909090;

transition: color 0.4s;

text-decoration: none;

}

.atuinCard-bottom:hover {

color: #000;

}

jQuery:

Скрипт (для библиотекиjQuery) нужен для ограничения больших текстов, он засветляет его нижнюю часть и показывает кнопку "Еще" для его полного отображения и сворачивания.
При ресайзе страницы, все карточки переходят в изначальный вариант.

$(".atuinCard-middle").append("<button>");
function atuinCard() {  	
	$(".atuinCard-middle").each(function() {
		let th = $(this);
		let more = th.find("button");	
		more.text("Еще").hide();
		th.removeClass("atuinCard-gradient").removeClass("atuinCard-close");
		if (th.prop('scrollHeight') > Math.round(th.height())) {
			more.show();	
			th.addClass("atuinCard-gradient");
			more.unbind('click').click(function() {
				th.toggleClass("atuinCard-gradient").toggleClass("atuinCard-close");
				more.text(more.text() == "Скрыть" ? "Еще" : "Скрыть");
			});
		}
	});	
}
$(atuinCard);        
$(window).resize(atuinCard);

$(".atuinCard-middle").append("<button>");

function atuinCard() {

$(".atuinCard-middle").each(function() {

let th = $(this);

let more = th.find("button");

more.text("Еще").hide();

th.removeClass("atuinCard-gradient").removeClass("atuinCard-close");

if (th.prop('scrollHeight') > Math.round(th.height())) {

more.show();

th.addClass("atuinCard-gradient");

more.unbind('click').click(function() {

th.toggleClass("atuinCard-gradient").toggleClass("atuinCard-close");

more.text(more.text() == "Скрыть" ? "Еще" : "Скрыть");

});

}

});

}

$(atuinCard);

$(window).resize(atuinCard);

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

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

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

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

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

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

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

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

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

Пример:

HTML:

Карточка:

Сетка:

CSS:

jQuery:

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

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