LPgenerator — профессиональная Landing Page платформа для увеличения продаж вашего бизнеса

  • Более 500 шаблонов в галерее
  • Инструменты оптимизации конверсии
  • Статистика и сквозная аналитика
  • CRM для работы с заявками и телефония
  • Визуальный редактор с расширенным функционалом
  • Быстрая техническая поддержка
  • Множество интеграций
  • Окупаемость инструмента — от 7 дней

Изменение цвета шрифта и фона при выделении текста на странице

Фон выделенного текста

Одним из интересных псевдоселекторов в CSS3 является ::selection. Он позволяет изменить стандартный системный цвет фона при выделении текста на странице веб-сайта. Также, можно изменить и цвет шрифта при выделении. Поддерживается большинством браузеров, но IE версии 9 и выше.

Рассмотрим применение этого псевдоселектора на примере:

  • Цвет фона при выделении текста меняется на красный
  • Цвет фона при выделении текста меняется на синий
  • Цвет шрифта меняется на черный, а цвет фона меняется на желтый

Задаем класс “red” для параграфа

<p class="red">Текст</p>

Описываем класс “red” для параграфа и псевдоселектора:

p.red::selection {
 background: #ffb7b7;
}

Полный CSS код

Мы меняем цвет фона для красного и синего параграфов, а также допольнительно цвет шрифта для желтого. Добавляем -moz и -webkit для поддрежки другими браузерами:

p.red::selection {
 background: #ffb7b7;
}
p.red::-moz-selection {
 background: #ffb7b7;
}
p.red::-webkit-selection {
 background: #ffb7b7;
}
p.blue::selection {
 background: #a8d1ff;
}
p.blue::-moz-selection {
 background: #a8d1ff;
}
p.blue::-webkit-selection {
 background: #a8d1ff;
}
p.yellow::selection {
 background: #f2d119;
        color:#000;
}
p.yellow::-moz-selection {
 background: #f2d119;
        color:#000;
}
p.yellow::-webkit-selection {
 background: #f2d119;
       color:#000;
}

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

Высоких конверсий!

3 марта 2016

LPgenerator — профессиональная Landing Page платформа для увеличения продаж вашего бизнеса

  • Более 500 шаблонов в галерее
  • Инструменты оптимизации конверсии
  • Статистика и сквозная аналитика
  • CRM для работы с заявками и телефония
  • Визуальный редактор с расширенным функционалом
  • Быстрая техническая поддержка
  • Множество интеграций
  • Окупаемость инструмента — от 7 дней
blog comments powered by Disqus
copyright © 2011–2017 by LPgenerator LLC. Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "ЛПгенератор".