Карточки в виде стикеров для заметок

Наклон карточек осуществляется случайным образом небольшим JS-кодом.

Пример:

Название карточки

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum veritatis eaque necessitatibus, explicabo vero hic, perspiciatis unde minus error consectetur, quos sunt officiis ad repellendus pariatur eligendi tempora praesentium.

Название карточки

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum veritatis.

Название карточки

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum veritatis eaque necessitatibus, explicabo vero hic, perspiciatis unde minus error consectetur, quos sunt officiis ad repellendus.

Название карточки

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum veritatis eaque necessitatibus, explicabo vero hic, perspiciatis unde minus error consectetur, quos.

Название карточки, которое не умещается в одну строку

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum veritatis eaque necessitatibus.

Название карточки без фото

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum veritatis eaque necessitatibus.

Название карточки

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum veritatis eaque necessitatibus, explicabo vero.

Название карточки

CSS:

Размер для фотографий задается свойством aspect-ratio и установлен как два к одному. Все что не умещается в это соотношение будет отрезаться.

.stcard-container {
	display: flex;
	justify-content: center;  
	flex-wrap: wrap;
	padding: 20px 0;
}
.stcard {
	display: flex;
	flex-direction: column;
	padding: 12px 12px 6px;
	background: #f8f3e8;
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.2), 0 0 40px rgba(0, 0, 0, 0.2);
	border-radius: 6px;
	flex: 1 0 300px;
	max-width: 400px;
	align-self: center;
}
.stcard img {
	width: 100%;
	aspect-ratio: 2/1;
	object-fit: cover;
	border-radius: 6px;
	filter: sepia(100%);
	transition: filter 0.5s;
	margin-bottom: 10px;
}
.stcard:hover img {
	filter: sepia(0)
}
.stcard .stcard-title {
	margin: 6px 10px 10px;
	font-family: 'Roboto', sans-serif;
	font-weight: bold;
	font-size: 19px;
	line-height: 1.1;
	color: #a18342;
	text-align: center;
}
.stcard p {
	font-size: 15px;
	text-align: center;
	margin: 0 0 10px 0;
	line-height: 1.3;
}

.stcard-container {

display: flex;

justify-content: center;

flex-wrap: wrap;

padding: 20px 0;

}

.stcard {

display: flex;

flex-direction: column;

padding: 12px 12px 6px;

background: #f8f3e8;

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

border-radius: 6px;

flex: 1 0 300px;

max-width: 400px;

align-self: center;

}

.stcard img {

width: 100%;

aspect-ratio: 2/1;

object-fit: cover;

border-radius: 6px;

filter: sepia(100%);

transition: filter 0.5s;

margin-bottom: 10px;

}

.stcard:hover img {

filter: sepia(0)

}

.stcard .stcard-title {

margin: 6px 10px 10px;

font-family: 'Roboto', sans-serif;

font-weight: bold;

font-size: 19px;

line-height: 1.1;

color: #a18342;

text-align: center;

}

.stcard p {

font-size: 15px;

text-align: center;

margin: 0 0 10px 0;

line-height: 1.3;

}

HTML:

<div class="stcard-container">
	<div class="stcard">
		<img alt="image" src="image.jpg"/>
		<div class="stcard-title">Название карточки</div>
		<p>Описание карточки</p>
	</div>
	
	<!-- Еще карточки -->
	
	<div class="stcard">
		<img alt="image" src="image.jpg"/>
		<div class="stcard-title">Название карточки</div>
		<p>Описание карточки</p>
	</div>
</div>

<div class="stcard-title">Название карточки</div>

<p>Описание карточки</p>

</div>

<div class="stcard-title">Название карточки</div>

<p>Описание карточки</p>

</div>

JS:

let stcard = document.querySelectorAll(".stcard"), rotate;
for(let i = 0; i < stcard.length; i++){
    rotate = Math.random() * 5 * (Math.round(Math.random()) ? 1 : -1);
    stcard[i].style.transform = "rotate("+ rotate +"deg)";
}

let stcard = document.querySelectorAll(".stcard"), rotate;

for(let i = 0; i < stcard.length; i++){

rotate = Math.random() * 5 * (Math.round(Math.random()) ? 1 : -1);

stcard[i].style.transform = "rotate("+ rotate +"deg)";

}

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

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

Опубликовано: 08.09.2022
Рубрики: Вкладки, блоки и списки
Метки: CSS, JavaScript, Авторское
4319 просмотров

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

Блоки с разноцветными пузырями

Анимированные разноцветные пузыри вокруг информационных блоков на JS

Уголки и рамки на CSS

Варианты оформления уголков и рамок у информационных блоков на CSS

Новогодняя открытка

Блок-секция с поздравительной открыткой к Новому Году.

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

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