Практический online-курс

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

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

Одним из интересных псевдоселекторов в 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 тэге.

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

03-03-2016

Продающие лендинги от отдела
дизайна LPgenerator

Используем технологии:
4U, AIDA, ХПВ, психология влияния Р. Чалдини, управление взглядом
  • 4U
  • AIDA
  • ХПВ
  • психологии влияния Р. Чалдини
  • управления взглядом
  • нейромаркетинг
Готовность от 7 дней
blog comments powered by Disqus
copyright © 2011–2017 by LPgenerator LLC. Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "ЛПгенератор".