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

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

Красивая замена блока на фотографию при наведении и движении курсора мыши

Сетка из шестиугольников на CSS

Адаптивная сетка из шестиугольников для фотогалереи или кратких информационных блоков

Открытие и закрытие контента на jQuery

Кнопки "показать полностью" и "показать еще" для открытия и закрытия дополнительного контента

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

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

Александр: 05.06.2024 в 22:32

Замечательный пример, изумительные эффекты. Огромное спасибо автору!
Но у меня почему-то не работает наклон карточек.
Подключал скрипт отсюда, подключал скрипт с кода страницы - нет наклона. Карточки лепятся в ряды вплотную друг к другу без наклона.
Надеюсь на помощь. Заранее, спасибо!

Ответить
- Alexander: 06.06.2024 в 08:22
  
  Скрипт ниже самих карточек?
  Если да, то даже не знаю, нужно результат посмотреть, почему не работает.
  
  Ответить
  - Александр: 06.06.2024 в 09:17
    
    Да, действительно! После того, как перенёс скрипт ниже html - кода, всё стало по-писанному.
    Огромное спасибо! По-возможности, буду немного помогать Вашему замечательному блогу...
    
    Ответить
    - Alexander: 06.06.2024 в 09:37
      
      И вам спасибо 🙂
      
      Ответить

Пример:

CSS:

HTML:

JS:

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

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

Комментарии: