Сегодня будем верстать анимированную карточку для товаров или фотографий. Карточки - один из самых частых элементов на сайтах и поэтому, чтобы удивить посетителей или запомниться им - надо сделать что-то совершенно новое. Это мы с вами и попробуем.
Для создания карточки вам надо перекопировать следующие часи кодов:
<div class="bb_card"> <div class="card_content"> <h3> Название карточки </h3> <div class="text"> Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Снова там, домах то ты алфавит дороге журчит прямо заголовок. Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Снова там, домах то ты алфавит дороге журчит прямо заголовок. </div> </div> </div>
.bb_card { display: flex; width: 300px; height: 400px; background: linear-gradient(45deg, rgb(0, 129, 6) 10%, transparent 10%, transparent 50%, rgb(0, 129, 6) 50%, rgb(0, 129, 6) 60%, transparent 60%, transparent 100%); background-size: 15px 15px; border: 5px solid rgb(0, 129, 6); padding: 20px 10px; animation: bb_card 5s linear infinite; } @keyframes bb_card { from { background-position: 0; } to { background-position: 15; } } .bb_card .card_content { display: flex; flex-direction: column; row-gap: 20px; font-family: Helvetica, sans-serif, serif; color: #fff; text-align: center; padding: 10px; } .bb_card .card_content>* { background-color: rgb(0, 129, 6); padding: 15px 10px; } .bb_card .text { flex-grow: 1; } .bb_card img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
После копирования вышеупомянутых кусков кода, у вас должна появиться такая карточка:
Наша карточка готова. Для корректной работы карточки, не рекомендуем менять стили (кроме цветов и шрифтов.) и Вносить изменения в структуру html (за исключением содержимого элемента с классом "card_content")