Стилизация списков с помощью псевдо-элементов
Стилизация списков с помощью CSS может стать головной болью. Если нужно изменить внешний вид меток пункта списка, то первое, что приходит на ум - свойство list-style: none;
. Но использование свойства list-style-image
может потребовать для себя много времени на попытки позиционировать вычурные метки. В качестве популярной альтернативы вспоминается background-image
для пунктов списка.
li { background: url(images/bullet.png) no-repeat left top; list-style: none; }
Такой подход дает возможность перемещать пункты списка без проблем. Хорошее решение. Но есть три назойливых (хотя и небольших) проблемы для данного метода:
- Нельзя эффективно использовать спрайты, так как возникает проблема со скрытием ненужных областей спрайта.
- Очевидно, что изображение нельзя использовать для нумерованного списка, так как потребуется отдельная картинка для каждого пункта. Конечно, можно сделать большую кучу отдельных изображений. Но такой подход весьма далек от понятия "эффективно".
- Дополнительные запросы HTTP. Данная проблема очень ярко проявляется, когда у вас есть много различных списков.
Но есть способ, который дает возможность обойти проблемы.
Стандартный метод с фоновым изображением
Сначала опишем обычное решение стилизации списка с использованием фоновых изображений.
Необходимый HTML код
<ul class="first-example"> <li>SEO</li> <li>Система управления содержанием</li> <li>Интеграция социальных сетей</li> <li>Выделение пунктов списка</li> </ul>
Необходимый CSS код
.first-example li { background: url(../img/tick.png) no-repeat left 8px; } .first-example li { border-bottom: 1px solid #eee; font-size: 14px; list-style: none; padding: 10px 0 10px 40px; }
Код простой. Пункты списка имеют фоновое изображение.
Используем псевдо-элементы
Псевдо-элементы - наши друзья. Они являются дополнительными ускорителями для ракеты проекта. Когда все выглядит скучно и нет способа улучшить внешний вид - используйте псевдо-элементы.
Мы можем использовать псевдо-элементы как метки. Такой подход снимает проблему использования спрайтов, так как для псевдо-элементов можно устанавливать значения для свойств width
и height
и позиционировать фон.
Код HTML
<ul class="second-example"> <li>SEO</li> <li>Система управления содержанием</li> <li>Интеграция социальных сетей</li> <li>Выделение пунктов списка</li> </ul>
Код HTML не изменяется.
Код CSS
li { border-bottom: 1px solid #eee; font-size: 14px; list-style: none; padding: 10px 0 10px 40px; position: relative; } ul.second-example li:before { content: ''; background: url(../img/sprite.png) no-repeat left top; height: 20px; width: 20px; position: absolute; left: 0; top: 8px; } ul.second-example li:nth-child(2n):before { background-position: -21px 0; }
Второе изображение используется по двум причинам:
- Даем возможность демонстрации возможностей спрайта в данном случае
- Делает внешний вид списка более стильным
Посмотрим, что будет, если спрайт использовать в первом примере:
Как выглядит список с применением спрайта для псевдо-элементов вы можете посмотреть на демонстрационной странице.
Используем счетчик CSS
Что такое счетчик CSS? Счетчик CSS - функция, которую можно использовать в свойстве content
для псевдо-элемнета. Можно считать все, что угодно. Количество элементов <section>
в статье или заголовков <h2>
, и так далее. В нашем примере мы подсчитываем количество элементов <li>
. Так мы можем динамически передавать псевдо-элемнетам :before/:after числовое значение, которое позволит нумеровать пункты списка.
Свойство CSS counter включено в спецификацию CSS 2.1. Таким образом, оно поддерживается в IE8. Конечно, оно не будет работать в IE7 & IE6, но для них можно просто определить числовой тип list-item-type
.
Код CSS
Код HTML не изменится. А в CSS мы будем использовать часть из предыдущих примеров (чтобы сохранить общий стиль демонстрационной страницы). А остальной код будет выглядеть следующим образом:
ol.third-example { counter-reset: li; } ol.third-example li { position: relative; } ol.third-example li:before { content: counter(li); counter-increment: li; background: #f692bb; color: #333; font: bold 14px/20px sans-serif; height: 20px; text-align: center; width: 20px; position: absolute; left: 0; top: 8px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: inset 0 0 5px #F0498D, 2px 2px 0 rgba(0,0,0,.15); -moz-box-shadow: inset 0 0 5px #F0498D, 2px 2px 0 rgba(0,0,0,.15); box-shadow: inset 0 0 5px #F0498D, 2px 2px 0 rgba(0,0,0,.15); }
Примечание: относительное позиционирование пункта списка является необходимым условием, так как псевдо-элемент внутри будет позиционироваться абсолютно.
Для правильного использования функции counter()
нужно три условия:
- Счетчик соответствующих элементов должен быть сброшен
- Счетчику нужно указать шаг увеличения (можно использовать любые значения, в демонстрации применяется значение по умолчанию)
- Функция
counter()
должна размещаться в свойствеcontent
, и ей надо указать, что считать
Первое условие выполняется добавлением свойства counter-reset
к родительскому контейнеру элемента, который надо считать. В значение свойства counter-reset
указывается элемент, который будет подсчитываться. Если вам нужно считать количество параграфов в статье, то счетчик нужно сбросить следующим образом в наборе правил CSS:
body { counter-reset: p; } /* Или */ article { counter-reset: p; }
Затем надо добавить свойство counter-increment
к псевдо-элемнету. Оно указывает, какой элемент считать и насколько увеличивать счетчик.
li:before { counter-increment: li 5; }
В данном примере счетчик увеличивается на 5. По умолчанию используется 1.
В завершении добавляем функцию counter()
в свойство content
псевдо-элемнета, чтобы использовать текущее значение счетчика для формирования содержания.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/ZPdxUBkq3Io/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
"Интернет не меняет бизнес-модели, он способен лишь дать новые мощные инструменты уже существующим." |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.