Наклон карточек осуществляется случайным образом небольшим 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 hic, perspiciatis unde minus error consectetur, quos sunt officiis ad repellendus pariatur eligendi.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum veritatis eaque necessitatibus, explicabo vero.
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.
CSS:
Размер для фотографий задается свойством aspect-ratio
и установлен как два к одному. Все что не умещается в это соотношение будет отрезаться.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
.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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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> |
JS:
1 2 3 4 5 |
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)"; } |
Смотрите также:
Фильтрация и сортировка элементов с библиотекой Isotope
Капли воды для оформления фона блока или секции
Подсветка фона и рамок блоков при движении по ним курсора мыши.
Замечательный пример, изумительные эффекты. Огромное спасибо автору!
Но у меня почему-то не работает наклон карточек.
Подключал скрипт отсюда, подключал скрипт с кода страницы - нет наклона. Карточки лепятся в ряды вплотную друг к другу без наклона.
Надеюсь на помощь. Заранее, спасибо!
Скрипт ниже самих карточек?
Если да, то даже не знаю, нужно результат посмотреть, почему не работает.
Да, действительно! После того, как перенёс скрипт ниже html - кода, всё стало по-писанному.
Огромное спасибо! По-возможности, буду немного помогать Вашему замечательному блогу...
И вам спасибо 🙂