Анимированная карточка для товаров или фотографий на HTML и CSS

Анимированная карточка для товаров или фотографий на HTML и CSS

Owebs
4 апреля 2023
Просмотры 156
Рейтинг
Время чтения Время чтения: 4 минуты

Оглавление
Развернуть Свернуть

Название карточки

Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Снова там, домах то ты алфавит дороге журчит прямо заголовок. Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Снова там, домах то ты алфавит дороге журчит прямо заголовок.

Сегодня будем верстать анимированную карточку для товаров или фотографий. Карточки - один из самых частых элементов на сайтах. Поэтому, чтобы удивить посетителей или запомниться, - надо сделать что-то совершенно новое. Это мы с вами и попробуем.

Для создания карточки перекопируйте следующие части кодов:

HTML:
                <div class="bb_card">
                    <div class="card_content">
                        <h3>
                            Название карточки
                        </h3>
                        <div class="text">
                            Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Снова там, домах то ты алфавит дороге журчит прямо заголовок.
                            Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Снова там, домах то ты алфавит дороге журчит прямо заголовок.
                        </div>
                    </div>
                </div>

            
CSS:
                .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").

Ow
Имя:
Комментарий:
Развернуть все Скрыть
Декор Декор

Популярные Популярные

Анимированный индикатор для пунктов меню на сайте
Просмотры 183
Рейтинг 15
8 декабря
5 месяцев назад

Расскажем как написать анимированный индикатор для пунктов меню на сайте. Так портал станет более интерактивным и привлекательным для пользователей.

Оформления блока акций через CSS
Просмотры 344
Рейтинг 6
14 декабря
5 месяцев назад

В данном уроке будем стилизовать текст для объявлений об акции. Необходимо сделать так, чтобы наше объявление привлекло потенциальных покупателей

Создание сайтов через нейросети
Просмотры 366
Рейтинг 4
9 февраля
3 месяцев назад

Популярность нейросетей в 2024 году набирает обороты. Нет, они не заменяют полноценных специалистов. Зато существенно упрощают и ускоряют работу тех же копирайтеров, сеошников и дизайнеров.

Сегодня мы расскажем, какие нейросети можно использовать в работе, разберем их функционал и приведем примеры генерации.

Оставьте заявку СЕЙЧАС

Поставив галочку, Вы даете согласие на обработку ваших Персональных данных

Сookies-файлы на сайте

Наш сайт использует куки.
Продолжая им пользоваться, вы соглашаетесь на обработку данных в соответсвии с политикой конфидециальности.

Согласен