Своё оформление для выделения текста на сайте

Инструкция как на сайте при помощи CSS сделать своё уникальное оформление для выделения текста на сайте. Задайте свой цвет для выделения и текста

выделение текста

  Как на сайте изменить выделение текста и вместо стандартных браузерных стилей назначить свои.

  Если вы не знали что для выделения текста на сайте можно добавлять свои стили, то они есть. Я кстати тоже с этим столкнулся впервые только недавно.

  Для оформления выделения текста есть специальный псевдоэлемент CSS с названием selection.


Псевдоэлемент selection

  ::selection - это псевдоэлемент в CSS.

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

  Для псевдокласса selection доступны следующие CSS свойства:

color - цвет текста;

background - цвет фона выделяемого текста;

backgroud-color - цвет фона выделяемого текста;

text-shadow - тень текста

  Псевдоэлемент selection понимают все браузеры кроме iOS Safari. Детальную статистику о поддержке браузерами css-свойства selection смотрите тут.

  Для браузера Firefox до 62 версии (дата выхода 62 версии - конец 2018г) этот псевдоэлемент указывается с префиксом -moz-, а значит пишется как -moz-selection

  В CSS этот псевдоэлемент добавляется через два двоеточия:

::selection


Демо - попробуйте выделить мышкой текст в блоке ниже:

  Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Напоивший, сих букв проектах возвращайся коварный лучше океана. Города, точках, текстов. Безорфографичный первую маленькая бросил эта дорогу переписали, составитель там выйти коварных. Предложения его ручеек буквоград свою, своего лучше всеми, домах, lorem текста великий все. Коварных путь предупредила, вершину несколько?

 

  В примере использована следующая конструкция (сам текст я укоротил):

<div class="test-selection">
    <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут...</p>
</div>

 

CSS код:

.test-selection p::selection {
    background-color: #000;
    color: #ff6000;
}
.test-selection p::-moz-selection {
    background-color: #000;
    color: #ff6000;
}

  Я пробовал прописать классы через запятую чтобы два раза не писать одни и те же свойства - не заработало. Пришлось для Firefox повторно прописывать значения css-свойств для selection.

 

Записи по теме
3D кнопки для сайта
кнопки Анимированные кнопки для сайта с 3D эффектом нажатия, работающие на чистом CSS. Готовое решение: html и css код для добавления на сайт кнопок с 3D эффектом.
3D трансформации в CSS
куб Куб сделанный в 3D, видео урок - если понять как всё это работает и включить фантазию, то можно сверстать очень много самых разных прикольных штук.
CSS эффект подчёркивания от центра и слева направо
css 3 Данный эффект - это плавно появляющаяся подчёркивающая линия, которая появляется при наведении на ссылку или пункт меню. Эффект можно применять для чего угодно: для заголовков и названий, отдельных частей текста, иконок, картинок и т.д.
Как задать кодировку внутри файла css
Как задать кодировку внутри файла css Как правильно задать кодировку utf-8 внутри css-файла. В случаях когда внутри css файлов со стилями применяется вывод текста кириллическими буквами через css-свойство content, чтобы не было багов в виде кракозяб и прочих непонятностей, задают кодировку...
Падающий снег на сайте
снег Как на сайте сделать такую штуку как падающий снег. Отличное решение для любого сайта и CMS, реализованное на чистом CSS без использования JavaScript.
Фон для сайта в тетрадную клеточку на чистом CSS
тетрадная клетка Как сделать фон такой же как тетрадка в клеточку на чистом css. Примеры фонов в клеточку, а так же решения с размещением красных полей с левой или с правой стороны. Всё как в настоящей тетрадке.

 

 

Комментарии 0

*** чтобы писать комментарии.