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

Наклон карточек осуществляется случайным образом небольшим 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)";

}

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

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

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

Пример:

CSS:

HTML:

JS:

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

Размер шрифта в зависимости от ширины блока

Адаптивная таблица на CSS

Эффект фонарика на CSS и jQuery

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