Оформления блока акций через CSS

Оформления блока акций через CSS

Owebs
14 декабря
Просмотры 360
Рейтинг 6
Время чтения Время чтения: 2 минуты

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

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

Как оформить блок объявления акции через CSS

 

старая цена: 2000 Р

Цена со скидкой: 1000 P

В данном уроке будем стилизовать текст для объявлений об акции. Необходимо сделать так, чтобы наше объявление привлекло потенциальных покупателей. И по этой причине, стили должны быть броскими и привлекающими взгляды пользователей. Мы рассмотрим вариант размещения на сайте с тёмной темой.

Для использования данных стилей для теста вашего сайта, вам надо перекопировать следующие части кодов:

HTML:
                <div class="strikethrough">
                    <p>
                        старая цена: <span>2000 Р</span>
                    </p>
                    <p>
                        Цена со скидкой <span class="sale">1000 P</span>
                    </p>
                </div>

            
CSS:
                .strikethrough {
                    font-family: Arial, Helvetica, sans-serif;
                    font-size: 40px;
                    color: #404040;
                    background-color: #222;
                    text-shadow: 1px 1px 1px #999;
                    box-shadow: inset 0 0 15px 0 #fff;
                    padding: 20px 40px;
                }
        
                .strikethrough p {
                    margin: 0 0 10px 0;
                }
        
                .strikethrough span {
                    position: relative;
                    z-index: 1;
                }
        
                .strikethrough span::before {
                    content: '';
                    position: absolute;
                    top: 50%;
                    left: 0;
                    width: 100%;
                    height: 2px;
                    background-color: rgb(190, 5, 5);
                    box-shadow: 0 0 10px 1px #f00;
                }
        
                .strikethrough span.sale {
                    color: #727272;
                }
        
                .strikethrough span.sale::before {
                    height: 0;
                    background-color: transparent;
                    box-shadow: 0 0 25px 3px #fff;
                }
            

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Согласен