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 |
.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 20px rgba(0, 0, 0, 0.2), 0 0 40px rgba(0, 0, 0, 0.1); 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-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)"; } |
Замечательный пример, изумительные эффекты. Огромное спасибо автору!
Но у меня почему-то не работает наклон карточек.
Подключал скрипт отсюда, подключал скрипт с кода страницы - нет наклона. Карточки лепятся в ряды вплотную друг к другу без наклона.
Надеюсь на помощь. Заранее, спасибо!
Скрипт ниже самих карточек?
Если да, то даже не знаю, нужно результат посмотреть, почему не работает.
Да, действительно! После того, как перенёс скрипт ниже html - кода, всё стало по-писанному.
Огромное спасибо! По-возможности, буду немного помогать Вашему замечательному блогу...
И вам спасибо 🙂