Сегодня будем верстать анимированную карточку для товаров или фотографий. Карточки - один из самых частых элементов на сайтах. Поэтому, чтобы удивить посетителей или запомниться, - надо сделать что-то совершенно новое. Это мы с вами и попробуем.
Для создания карточки перекопируйте следующие части кодов:
<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").
Вы будете получать статьи по нашим направлениям, советы и кейсы предпринимателей
Расскажем как написать анимированный индикатор для пунктов меню на сайте. Так портал станет более интерактивным и привлекательным для пользователей.
В данном уроке будем стилизовать текст для объявлений об акции. Необходимо сделать так, чтобы наше объявление привлекло потенциальных покупателей
Популярность нейросетей в 2024 году набирает обороты. Нет, они не заменяют полноценных специалистов. Зато существенно упрощают и ускоряют работу тех же копирайтеров, сеошников и дизайнеров.
Сегодня мы расскажем, какие нейросети можно использовать в работе, разберем их функционал и приведем примеры генерации.
Сегодня напишем с вами анимацию карточки-конверта.
*Условия акции: получить приз можно после заключения договора и реализации заказанной услуги.