Карточки и блоки #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>

Сетка:

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

</div>

</div>

</div>

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

CSS:

Карточка:

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

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

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;

}

Сетка:

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

}

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 / Обновлено: 12.09.2026
Рубрики: Коллекция карточек и блоков
1179 просмотров

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

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

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

Пример:

HTML:

Карточка:

Сетка:

CSS:

Карточка:

Сетка:

jQuery:

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

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