Css подсветка текста: Как сделать эффект свечения с помощью CSS.

11.07.2023 Разное

Содержание

Текст и тень | htmlbook.ru

Одно время на текст с тенью была определённая мода и подобный эффект можно было встретить практически на любом сайте. В графическом редакторе тень добавляется просто, выглядит отлично, вот текст с тенью и пихали на веб-страницы независимо от стиля сайта и чувства меры дизайнера. Когда же большинство браузеров стало дружно поддерживать стилевое свойство text-shadow, мода уже прошла и теперь текст с тенью встречается довольно редко. Впрочем у text-shadow есть ряд других неявных способов применения, о которых мало кто подозревает. С помощью этого свойства можно делать контурный текст, «выдавливать» его, создавать свечение, размытие и многое другое.

Использование text-shadow

В качестве значений пишется четыре параметра: цвет тени, смещение по горизонтали и вертикали и радиус размытия тени (рис. 1).

Рис. 1. Параметры text-shadow

Цвет допускается писать в начале или в конце всех параметров в любом подходящем формате CSS. Так что можно сделать и полупрозрачную тень через формат rgba. Положительные значения смещения «отбрасывают» тень вправо и вниз, а отрицательные, соответственно, влево и вверх. Чтобы тень была вокруг текста, достаточно задать нулевые значения смещения. Радиус размытия устанавливает, насколько тень будет резкой. Чем больше радиус размытия, тем мягче выглядит тень.

Большим плюсом text-shadow является возможность добавлять сразу несколько разных теней, перечисляя их параметры через запятую. Эта особенность, в основном, и позволяет делать разные эффекты.

К сожалению, IE до версии 10.0 не поддерживает text-shadow, так что в этом браузере мы никаких красивостей не увидим.

Контурный текст

Контурный текст характерен тем, что каждая буква обводится линией, цвет которой отличается от цвета текста (рис. 2). Лучше всего этот эффект смотрится с рубленым шрифтом большого размера, например, заголовков. Для основного текста применение контура лишь ухудшает читабельность.

Рис. 2. Контурный текст

Контур можно создать двумя методами. В первом методе устанавливаем нулевое смещение тени и небольшой радиус её размытия, буквально, 1-2 пиксела (пример 1). Повышение значения размытия превращает контур в свечение вокруг текста, а это уже другой эффект.

Пример 1. Контурный текст

HTML5CSS3IE 9IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Текст</title>
  <style>
   .stroke {
    font: 2em Arial, sans-serif;
    text-shadow: red 0 0 2px;
   }
  </style>
 </head>
 <body>
   <p>Контурный текст</p>
 </body>
</html>

Контур, сделанный этим методом, продемонстрирован на рис. 1. Контур получается слегка размытым, поэтому для тех, кто хочет получить чёткую линию, предназначен второй метод. Он заключается в использовании четырёх резких теней одного цвета, они смещаются в разные углы на один пиксел (пример 2).

Пример 2. Четыре тени для контура

HTML5CSS3IE 9IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Текст</title>
  <style>
   . stroke {
    font: 2em Arial, sans-serif;
    text-shadow: red 1px 1px 0, red -1px -1px 0, 
                 red -1px 1px 0, red 1px -1px 0;
   }
  </style>
 </head>
 <body>
  <p>Контурный текст</p>
 </body>
</html>

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

Рис. 3. Контур с помощью четырёх теней

Трёхмерный текст

Для добавления эффекта трёхмерного текста показанного на рис. 4 применяется одновременно несколько теней которые смещаются относительно друг друга на один пиксел по горизонтали и вертикали.

Рис. 4. Трёхмерный текст

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

Число теней зависит от того, насколько вы хотите «выдвинуть» текст вперёд. Большее количество повышает «глубину» букв, меньшее, наоборот, понижает трёхмерность. В примере 3 используется пять теней одного цвета.

Пример 3. Тень для добавления трёхмерности

HTML5CSS3IE 9IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Текст</title>
  <style>
   .stroke {
    font: bold 3em Arial, sans-serif;
    color: #0d3967;
    text-shadow: #cad5e2 1px 1px 0, #cad5e2 2px 2px 0, 
                 #cad5e2 3px 3px 0, #cad5e2 4px 4px 0, 
                 #cad5e2 5px 5px 0;
   }
  </style>
 </head>
 <body>
  <h2>Десятикамерный холодильник</h2>
 </body>
</html>

Для всех теней ставим нулевой радиус размытия и одинаковый цвет. Различаются тени только значениями смещения.

Тиснение текста

Для создания эффекта тиснения текста или, по-другому, рельефа, цвет текста должен совпадать с цветом фона. Одна часть «выступающих» над поверхностью букв словно освещена, другая же часть находится в тени (рис. 5).

Рис. 5. Рельефный текст

Для добавления подобного эффекта нам понадобится две тени — белую тень мы смещаем влево вверх на один пиксел, а тёмно-серую вправо вниз (пример 4).

Пример 4. Рельефный текст

HTML5CSS3IE 9IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Текст</title>
  <style>
   body {
    background: #f0f0f0; /* Цвет фона веб-страницы */
   }
   .stroke {
    font: bold 3em Arial, sans-serif;
    color: #f0f0f0; /* Цвет текста, совпадает с цветом фона */
    text-shadow: #fff -1px -1px 0, 
                 #333 1px 1px 0;
   }
  </style>
 </head>
 <body>
  <h2>Рельефный текст</h2>
 </body>
</html>

Рельеф выигрышнее всего смотрится именно на сером фоне, поэтому эффект подойдёт не для каждой цветовой схемы сайта. Кстати, легко получить вдавленный, а не выдавленный текст, достаточно поменять местами цвета тени.

 text-shadow: #333 -1px -1px 0, 
              #fff 1px 1px 0;

Свечение

Свечение вокруг текста — это та же самая тень, только она яркая и контрастная. Таким образом, для создания эффекта свечения достаточно изменить цвет тени и поставить желаемый радиус размытия. Поскольку свечение вокруг текста должно быть равномерным, то смещение тени надо задать нулевым. На рис. 6 показан пример свечения разных цветов.

Рис. 6. Свечение текста

Пример 5. Свечение

HTML5CSS3IE 9IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Текст</title>
  <style>
   .light {
    text-shadow: #5dc8e5 0 0 10px; /* Свечение голубого цвета */
    color: #0083bd;
   }
   .dark {
    text-shadow: red 0 0 10px; /* Свечение красного цвета */
   }
  </style>
 </head>
 <body>
  <h2>Светлая сторона</h2>
  <h2>Тёмная сторона</h2>
 </body>
</html>

Размытие

Тень сама по себе размывается, так что если оставить только тень, а сам текст скрыть, то мы получим размытые буквы (рис. 7), причём степень размытия легко регулировать через параметр text-shadow.

Рис. 7. Текст с размытием

Для сокрытия оригинального текста достаточно задать цвет как transparent (пример 6). Цвет тени после этого выступает цветом текста, а радиус размытия устанавливает степень нерезкости букв.

Пример 6. Размытие текста

HTML5CSS3IE 9IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Текст</title>
  <style>
   .blur {
    text-shadow: #000 0 0 5px;
    color: transparent; /* Прозрачный цвет текста */
   }
  </style>
 </head>
 <body>
  <h2>Нерезкий текст</h2>
 </body>
</html>

Тень и псевдоклассы

Тень не обязательно добавлять непосредственно к тексту, свойство text-shadow прекрасно сочетается с псевдоклассами :hover и :first-letter. За счёт этого получаются интересные эффекты с текстом вроде контурной первой буквы абзаца или свечения ссылки при наведении на неё курсора мыши. В примере 7 показаны такие приёмы.

Пример 7. Использование псевдоклассов

HTML5CSS3IE 9IE 10+CrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Текст</title>
  <style>
   a:hover { /* Вид ссылки при наведении на неё курсора */
    text-shadow: #5dc8e5 0 0 5px;
    color: #000;
   }
   p:first-letter { /* Первая буква абзаца */
    font-size: 2em;
    text-shadow: red 1px 1px 0, red -1px -1px 0, 
                 red -1px 1px 0, red 1px -1px 0;
   }
  </style>
 </head>
  <body>
   <p>Нишевый проект тормозит <a href="1.
  html">традиционный канал</a>, не считаясь с 
      затратами. Структура рынка, отбрасывая подробности, стабилизирует 
      департамент маркетинга и продаж, используя опыт предыдущих кампаний. 
      Построение бренда, безусловно, спонтанно отталкивает конвергентный 
      PR, отвоевывая рыночный сегмент. Инвестиция синхронизирует ролевой 
      социальный статус, повышая конкуренцию. Торговая марка естественно 
      обуславливает план размещения, используя опыт предыдущих кампаний.</p>
 </body>
</html>

CSS-эффект свечения шрифта (с примерами)

1. CSS-эффект свечения шрифта:

CSS3 напрямую не устанавливает свойства эффекта свечения, но использует свойство text-shadow для достижения этого эффекта

1. text-shadow: этот атрибут добавляет эффект тени к тексту.

text-shadow: h-shadow v-shadow blur color;

2. Параметры:

имя параметра	объяснение
h-shadow	Требуется положение горизонтальной тени (горизонтальное смещение тени), которое может быть отрицательным значением
v-shadow	Требуется положение вертикальной тени (вертикальное смещение тени), которое может быть отрицательным
blur	Расстояние размытия тени (по умолчанию 0), необязательно
color	Цвет тени (по умолчанию используется текущий цвет шрифта), необязательно

3. Описание: Справочная статья
1. На первый взгляд атрибут text-shadow используется только для установки тени текста. Кажется, что эффект свечения шрифта не может быть достигнут, но это не так. Это тонкость атрибута text-shadow Офис.
2. Когда горизонтальное смещение и вертикальное смещение тени равны 0, тень совпадает с текстом. В это время, если расстояние размытия тени увеличивается, это может быть достигнуто Эффект свечения вне шрифта.

3. Конечно, чтобы сделать внешнее свечение более прохладным, вам нужно использовать еще одну функцию text-shadow: установить несколько теней одновременно (установить несколько теней, разделенных запятыми).

4. Примеры:Например, мы хотим установить эффект свечения статического текста:

HTML код:(Мы объявляем div и затем добавляем текст)

<div>Я буду сиять</div>

CSS стиль:(Для удобства установите черный фон, белый текст, а затем отобразите его в центре)

div{
		height : 600px;			// Установить максимум
		line-height : 600px;	// Устанавливаем высоту линии (центр по вертикали)
		background-color:black;	// Черный фон: черный
		font-size: 120px;		// шрифт 120 пикселей
		color : white;			// Цвет шрифта: белый
		text-align: center;		// Центрировать горизонтально
		text-shadow: 0 0 10px red,0 0 20px red,0 0 30px red,0 0 40px red;	// Установить эффект свечения
	}

Смотрите эффект:

Тест свойства размытия Text-shadow:
Значение атрибута, которое мы добавили выше: text-shadow: 0 0 10px red, 0 0 20px red, 0 0 30px red, 0 0 40px red; мы можем видеть, что мы находимся в text-shadow Четыре значения атрибутов были добавлены позже, — возможно, вы не сможете увидеть эффект напрямую, мы попробуем добавить одно за другим:

Слева направо	Добавленное значение атрибута
фигура 1	text-shadow：0 0 10px red;
фигура 2	text-shadow：0 0 10px red,0 0 20px red;
изображение 3	text-shadow：0 0 10px red,0 0 20px red,0 0 30px red;
Рисунок 4	text-shadow: 0 0 10px red,0 0 20px red,0 0 30px red,0 0 40px red;

Эффект: (Рисунок 1)

Эффект: (рисунок 2)

Эффект: (рисунок 3)

Эффект: (рисунок 4)

Если мы добавим только одну тень, цвет будет очень светлым. Мы добавим четыре тени для достижения эффекта свечения, но как мы можем подтвердить, что добавлено несколько теней?
Мы добавляем смещение в 10 пикселей для каждой тени шаг за шагом, а затем устанавливаем область размытия на 0, чтобы четко видеть:

text-shadow: 0 10px 0px red,0 20px 0 red,0 30px 0 red,0 40px 0 red;

Посмотрите на картинку: (очевидно, видите четыре тени)

На самом деле посмотрите, сколько теней нужно добавить, и определите область тени для каждой тени. Вы также можете смешивать цвета. (Попробуйте еще несколько цветов ниже)

text-shadow: 0 0 5px white,0 0 10px #00FFFF,0 0 15px #7FFF00,0 0 20px white;

Во-вторых, эффект динамического свечения шрифтов CSS:

В Интернете существует множество динамических эффектов, и мы можем на самом деле достичь их с помощью светящихся шрифтов CSS. Давайте сначала посмотрим на эффекты:Источник изображения

Ниже мы также реализуем пример динамического свечения, мы по-прежнему добавляем div, как указано выше, и затем устанавливаем стиль:

HTML код:

<div>Я буду сиять</div>

CSS стиль:(Это стиль статического свечения выше)

div{
		height : 600px;			// Установить максимум
		line-height : 600px;	// Устанавливаем высоту линии (центр по вертикали)
		background-color:black;	// Черный фон: черный
		font-size: 120px;		// шрифт 120 пикселей
		color : white;			// Цвет шрифта: белый
		text-align: center;		// Центрировать горизонтально
		text-shadow: 0 0 10px red,0 0 20px red,0 0 30px red,0 0 40px red;	// Установить эффект свечения
	}

Мы понимаем, что когда мышь находится над элементом div, шрифт динамически подсвечивается:

Идеи реализации:Мы добавляем событие наведения мыши в div, а затем используем свойства анимации CSS3 для достижения динамических эффектов. Если вы не особенно знакомы с анимацией, вы можете научиться этому.

1. На основе вышеуказанного CSS-эффекта сначала добавьте событие наведения мыши:

Обратите внимание на следующее при настройке свойства animation:
Internet Explorer 10, Firefox и Opera поддерживают правила @keyframes и свойства анимации.
Chrome и Safari требуют префикса -webkit-.

div:hover{	// Чтобы быть совместимыми с разными браузерами, объявляем два
	-webkit-animation: Glow 0.5s ease infinite alternate;	// Совместим с Chrome
    animation: Glow 0.5s ease infinite alternate;
}

Затем добавьте эффект тени (напишите два для совместимости)

@-webkit-keyframes Glow {	// Совместим с Chrome и Safari
    from {
        text-shadow: 0 0 10px #fff,
                     0 0 20px #fff,
                     0 0 30px #fff,
                     0 0 40px #00a67c,
                     0 0 70px #00a67c,
                     0 0 80px #00a67c,
                     0 0 100px #00a67c,
                     0 0 150px #00a67c;
    }
    to {
        text-shadow: 0 0 5px #fff,
                     0 0 10px #fff,
                     0 0 15px #fff,
                     0 0 20px #00a67c,
                     0 0 35px #00a67c,
                     0 0 40px #00a67c,
                     0 0 50px #00a67c,
                     0 0 75px #00a67c;
    }
}
@keyframes Glow {
    from {
        text-shadow: 0 0 10px #fff,
                     0 0 20px #fff,
                     0 0 30px #fff,
                     0 0 40px #00a67c,
                     0 0 70px #00a67c,
                     0 0 80px #00a67c,
                     0 0 100px #00a67c,
                     0 0 150px #00a67c;
    }
    to {
        text-shadow: 0 0 5px #fff,
                     0 0 10px #fff,
                     0 0 15px #fff,
                     0 0 20px #00a67c,
                     0 0 35px #00a67c,
                     0 0 40px #00a67c,
                     0 0 50px #00a67c,
                     0 0 75px #00a67c;
    }
}

Посмотрите на эффект: при наведении курсора мыши будет отображаться динамический светящийся шрифт, тень шрифта, который мы меняем в течение 0,5 с, время и изменение цвета можно настроить.

Хорошо, учиться всему вышеперечисленному можно в основном для удовлетворения всех потребностей, приобретенных знаний, не забудьте понравиться, спасибо!

Как выделить текст в CSS [и несколько удивительных примеров]

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

Выделенный текст (CSS) используется для ссылок, чтобы сделать их более заметными, для важных слов, чтобы привлечь к ним внимание, и для других целей, таких как текст, который чаще всего копируют или публикуют в Твиттере. популярный.

В реальной жизни вы бы использовали различные маркеры, но в веб-разработке мы будем использовать HTML и CSS.

Как выделить текст в CSS?

Чтобы выделить текст в HTML, вы должны использовать встроенный элемент, такой как элемент , и применить к нему определенный стиль фона. Это создаст эффект выделения, который вы можете настроить разными способами для создания разных образов.

Большинство примеров в этой статье имеют следующую структуру:

Обычный текст и выделенный текст.

 .highlight{ 
 display: inline-block; 
 заполнение: .25em 0; 
 фон: #FFC107; 
 цвет: #ffffff; 
 }

12 удивительных эффектов выделения текста с помощью CSS

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

1. Выделение текста желтым цветом

См. перо на КодПене.

Предварительный просмотр

Прекрасный пример того, как стильно выделить текст.

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

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

Помните, что весь смысл выделения чего-либо в том, чтобы облегчить чтение.

2. Наклонный текстовый эффект выделения CSS

См. перо на КодПене.

Предварительный просмотр

Этот классный наклонный текстовый эффект выделения CSS очень классный и выглядит привлекательно.

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

Очень прост в использовании и поставляется с хорошим примером кода для обучения.

3. Текст выделения блока (CSS)

См. перо на КодПене.

Предварительный просмотр

С помощью HTML-элемента span вы можете создать этот прекрасный эффект выделения заблокированного текста CSS.

Вам просто нужно применить класс CSS к элементу span, и тогда эффект будет применен.

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

4. Выделение текста с анимацией при загрузке страницы

См. перо на КодПене.

Предварительный просмотр

В этом примере мы видим совершенно другой подход к эффекту подсветки.

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

Если вы ищете анимацию при загрузке страницы, этот пример для вас.

5. Анимированное выделение текста CSS при наведении курсора

См. перо на КодПене.

Предварительный просмотр

Статические эффекты выделения текста CSS — это круто, но использование простой анимации может привлечь больше внимания.

Этот фантастический эффект наведения делает слова более интерактивными, что очень важно.

Вы даже можете адаптировать это для работы с кнопкой, которая появляется на слове вместе с этим эффектом.

Не пропустите и эти эффекты при наведении кнопок CSS

6. Выделение текста с помощью анимации кругового пера

См. перо на КодПене.

Предварительный просмотр

Крутой эффект выделения текста с помощью CSS, создающий впечатление, будто вы обвели слово ручкой.

Этот CSS CodePen показывает, как легко можно настроить таргетинг только на одно слово в предложении внутри тега HTML P.

Используемый здесь CSS также достаточно прост, вы можете легко изменить цвет и размер круга.

7. Подсветка текста CSS Sketch

См. перо на КодПене.

Предварительный просмотр

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

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

8. Реалистичный эффект выделения при наведении маркера

См. перо на КодПене.

Предварительный просмотр

Сделано Джеффри, это еще один классный эффект наведения в сочетании с реалистичным эффектом маркера.

Он использует SVG для реалистичного вида, но его достаточно просто использовать на веб-странице, он масштабируется до текста любого размера.

Чистый CSS, поэтому он очень легкий.

Вы также можете найти классную анимацию с CSS-гамбургер-меню, ознакомьтесь с нашей статьей об этом тоже

9. Выделение текста с переходом подчеркивания

См. перо на КодПене.

Предварительный просмотр

Когда мы говорим о выделении текста, мы обычно думаем о добавлении чего-то поверх текста. Тем не менее, еще один способ подчеркнуть что-то может заключаться в том, чтобы сделать его ниже.

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

10. Реалистичный эффект маркера

См. перо на КодПене.

Предварительный просмотр

Если вы ищете суперреалистичный эффект маркера, это для вас.

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

Для этого используется SVG и создаются специальные края выделенного текста, но он по-прежнему достаточно прост в использовании и не сложен.

11. Выделение текста градиентом цвета

См. перо на КодПене.

Предварительный просмотр

Если вам нравятся градиенты, почему бы не использовать цвет градиента и для выделенного текста?

В этом примере используется функция linear-gradient внутри background-image для создания эффекта выделения градиента. Не стесняйтесь играть с ним и настраивать градиенты!

12. Разноцветное мелирование внахлест

См. перо на КодПене.

Предварительный просмотр

Немного сложнее, но результат очень интересный и может быть именно тем, что вы ищете.

Требуется использование всего HTML, CSS и JS, чтобы реализовать этот эффект.

Однако вы можете легко изменить цвета с помощью значений RGB в коде JS.

13. Градиент выделения текста (CSS)

См. перо на КодПене.

Предварительный просмотр

Необычный способ выделения HTML-текста классным градиентом.

Вы можете выбрать любой понравившийся градиент и придать своему тексту гладкий вид.

CSS прост, но результат просто фантастический.

14. Большой реалистичный эффект маркера

См. перо на КодПене.

Предварительный просмотр

Выделение текста может быть отличным способом выделить определенные вещи, в данном случае примером является цена.

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

В этом примере используется простой SVG, чтобы получить реалистичный вид, но CSS по-прежнему относительно прост.

15. Граница Текстовый эффект выделения CSS

См. перо на КодПене.

Предварительный просмотр

Очень простой эффект выделения текста с помощью CSS.

По сути, просто рамка вокруг текста с использованием элемента span для выделения определенных частей текста.

Вы также можете легко изменить цвет и отступ вокруг текста выделения CSS.

16. Текстовый эффект выделения стрелки CSS

См. перо на КодПене.

Предварительный просмотр

Еще один классный эффект подсветки текста CSS с другим стилем.

Показывает, как выделить определенные слова в предложении.

Используется простой CSS и просто элемент span с классом CSS для использования на всей веб-странице.

17. Текстовый эффект подсветки ленты CSS

См. перо на КодПене.

Предварительный просмотр

Есть много способов выделить текст с помощью CSS, здесь у нас есть эффект зеленой ленты, который выделяет несколько слов.

Использование другой формы поможет сделать ваш текст более заметным.

CSS также прост, при необходимости легко изменить цвет или эффект.

18. Бонусный текстовый эффект выделения CSS (jQuery)

См. перо на КодПене.

Предварительный просмотр

Мы видели несколько удивительных текстовых эффектов выделения CSS, и все они предлагают что-то свое. Они могут помочь выделить определенные части вашего текста и привлечь внимание к чему-либо.

Этот бонус был добавлен, потому что он показывает вам, как вы можете использовать jQuery для программного использования этих текстовых эффектов для выделения текста, проверьте это!

Примеры анимации прокрутки текста с помощью CSS и JS
Лучшие эффекты анимации текста CSS
Лучшие способы сделать шрифт жирным в CSS
Как выделить текст в Carrd Builder
Календари на чистом CSS

Об авторе:

Люк Эмбри — разработчик полного стека, бакалавр компьютерных наук, проживающий в Великобритании.
Подробнее о нем можно узнать на https://lukeembrey.com/

Псевдонимы выделения CSS

Полтора года назад меня попросили помочь создать патч для Chromium, позволяющий авторам перекрашивать орфографические и грамматические ошибки в CSS. В то время я не осознавал, что это было частью гораздо более амбициозной попытки переосмыслить орфографические и грамматические ошибки, выделенный текст и многое другое в виде целостной системы, которой еще не существовало как таковой ни в одном браузере. Эта система известна как выделите псевдонимы , и этот пост будет посвящен дизайну указанной системы и ее последствиям для авторов.

Это третья часть серии (часть первая, часть вторая) о работе Игалии, направленной на то, чтобы сделать реальностью псевдоподсветку CSS.

Содержимое

Какие они?
Могу ли я их использовать?
Как их использовать?
Как они работают?
Гочки
Удаление декораций и теней
Доступ к глобальным константам
Проблемы со спецификацией

Что это такое?

CSS имеет четыре псевдо-подсветки и открытый набор определяемых автором пользовательских псевдо-подсветок. Они берут свое начало в ::selection, который был рудиментарным и нестандартным, но широко поддерживаемым способом стилизации текста и изображений, выбранных пользователем.

Встроенные выделения: ::selection для содержимого, выбранного пользователем, ::target-text для ссылок на текстовые фрагменты, ::spelling-error для слов с ошибками и ::grammar-error для текста с грамматическими ошибками, а пользовательские выделения известны как ::highlight( x ), где x — это имя выделения, определенное автором.

Могу ли я их использовать?

::selection уже давно поддерживается всеми основными браузерами, а ::target-text появился в Chromium 89. Но большую часть этого времени ни один браузер еще не реализовал более надежную псевдосистему подсветки в псевдоспецификации CSS.

::highlight() и настраиваемый API выделения, поставляемый в Chromium 105, благодаря работе членов ¹ команды Microsoft Edge. Они также доступны в Safari 14.1 (включая iOS 14. 5) в качестве экспериментальной функции (Highlight API). Вы можете включить эту функцию в меню «Разработка» или для iOS в разделе «Настройки» > «Safari» > «Дополнительно».

Поддержка Safari в настоящее время имеет несколько особенностей, начиная с TP 152. Range пока не поддерживается для пользовательских выделений, только StaticRange, а в конструкторе Highlight есть ошибка, из-за которой требуется передать только один диапазон, игнорируя любые дополнительные аргументы. Чтобы создать Highlight без диапазонов, сначала создайте его с фиктивным диапазоном, а затем вызовите методы clear или delete .

Chromium 105 также реализует подавляющее большинство новой псевдосистемы подсветки. Это включает рисование с наложением бликов, которое было включено для всех псевдообъектов бликов, и наследование бликов, которое было включено только для ::highlight().

Chromium 108 включает в себя ::spelling-error и ::grammar-error в качестве экспериментальной функции, а также новые значения text-decoration-line, орфографическую ошибку и грамматическую ошибку. Chromium 111 включает наследование выделения для ::selection и ::target-text в качестве экспериментальной функции, в дополнение к ::highlight() и псевдограмматике орфографии (которые всегда используют наследование выделения). Вы можете включить эти функции по адресу

.
chrome://flags/#enable-experimental-web-platform-features
Поддержка Chromium
также в настоящее время имеет некоторые ошибки, начиная с r1041796. Примечательно, что подсветка еще не работает в ::first-line и ::first-letter ² , ‘text-shadow’ еще не включена для ::highlight(), результаты ComputedStyleMap неверны для ‘currentColor’ и подчеркивает, что разделенные лигатуры (например, для сложных скриптов) точно отображаются только в ::selection ² .
Нажмите на таблицу ниже, чтобы узнать, поддерживает ли ваш браузер эти функции.
Как их использовать?
Несмотря на то, что вы можете написать правила для псевдоподсветки, нацеленные на все элементы, как это обычно делалось для предстандартного ::selection, выбор определенных элементов может быть более мощным, позволяя потомкам полностью переопределять стили подсветки.
Раньше тот же код выдавал…
(в старых браузерах)
Обратите внимание, что none текста — белое на черном, потому что между корнем и текстом всегда есть другие элементы (body, p, aside, sup).
… если вы также не выбрали потомков :root и aside:
Обратите внимание, что голое правило ::selection по-прежнему означает *::selection и, как любое универсальное правило, может мешать наследованию при смешивании с неуниверсальными правилами выделения.
sup::selection унаследовал бы darkred от aside::selection, но универсальное правило ::selection соответствует ему напрямую, поэтому он становится черным.
::selection в основном контролируется пользовательским вводом, хотя страницы могут как читать, так и записывать активные диапазоны через Selection API с помощью getSelection().
::target-text активируется путем перехода к URL-адресу, оканчивающемуся на директиву фрагмента, которая имеет собственный синтаксис, встроенный в #fragment. Например:
#foo:~:text=bar нацелен на #foo и выделяет первое вхождение «bar»
#:~:text=the,dog выделяет первый диапазон текста от «the» до «dog»
::spelling-error и ::grammar-error контролируются программой проверки орфографии пользователя, которая используется только там, где пользователь может вводить текст, например, с textarea или contenteditable , с учетом атрибута проверки правописания (который также влияет на проверку грамматики). Из соображений конфиденциальности страницы не могут читать активные диапазоны этих основных моментов, несмотря на то, что они видны пользователю.
::highlight() управляется через Highlight API с помощью CSS.highlights. CSS.highlights — это объект , похожий на карту , что означает, что интерфейс такой же, как у карты строк (имен выделения) для объектов выделения. Выделять объекты, в свою очередь, setlike объектов , которые можно использовать как объекты Set of Range или StaticRange.
Вы можете использовать getComputedStyle() для запроса разрешенных стилей подсветки для определенного элемента. Независимо от того, какие части (если они есть) выделены, возвращаемые стили выглядят так, как будто данное выделение активно, а все остальные выделения неактивны.
Этот код всегда печатает «rgb(255, 0, 255)», хотя активен только ::selection.
Как они работают?
Псевдоэлементы Highlight определяются как псевдоэлементы, но на самом деле они имеют очень мало общего с другими псевдоэлементами, такими как ::before и ::first-line.
В отличие от других псевдонимов, они генерируют оверлеи выделения , а не блоки, и эти оверлеи подобны слоям поверх исходного контента. Там, где текст выделен, наложение подсветки может добавить фоны и текстовые тени, а сам текст и любые другие украшения «поднимаются» на самый верх.
quikc коричневая лиса исходный элемент
quikc коричневая лиса :: орфографическая ошибка
quikc коричневая лиса :: целевой текст
quikc коричневая лиса
quikc коричневая лиса ::выбор
quikc коричневая лиса
Вы можете думать о псевдоэлементах выделения как о самых внутренних псевдоэлементах, которые всегда существуют внизу любого дерева элементов и других псевдоэлементов, но, в отличие от других псевдоэлементов, они не наследуют свои стили от этого дерева элементов.
Вместо этого каждая псевдоподсветка формирует собственное дерево наследования, параллельное дереву элементов. Это означает, что body::selection наследуется от html::selection, а не от самого body.
На данный момент вы, вероятно, можете видеть, что псевдо-подсветка сильно отличается от остальной части CSS, но есть также несколько особых случаев и правил, необходимых для того, чтобы сделать их согласованной системой.
Для типичного появления орфографических и грамматических ошибок псевдонимы подсветки должны иметь возможность добавлять свои собственные украшения, и они должны иметь возможность оставлять основной цвет переднего плана без изменений. Наследование подсветки происходит отдельно от дерева элементов, поэтому нам нужен какой-то способ сослаться на базовый цвет переднего плана.
Этот аварийный люк должен установить для самого «цвета» значение «currentColor», которое является значением по умолчанию, если ничто в дереве выделения не устанавливает «цвет».
Это частный случай внутри особого случая.
Видите ли, ‘currentColor’ обычно определяется как «вычисленное значение ‘color'», но мне нравится думать об этом так: «не изменять цвет переднего плана», и большинство свойств с цветовым значением, таких как ‘text -decoration-color по умолчанию имеет это значение.
Для самого «цвета» это не имело бы смысла, поэтому вместо этого мы определяем «цвет: текущий цвет» как эквивалент «цвет: наследовать», что все еще соответствует этой ментальной модели. Но для бликов это определение больше не подходит, поэтому мы переопределяем его как «цвет» следующего активного блика ниже.
Чтобы сделать наследование выделения действительно полезным для ‘text-decoration’ и ‘background-color’, все свойства в стилях выделения наследуются, даже те, которые обычно не наследуются.
Это противоречило бы обычным правилам ³ для украшения ящиков, потому что потомки получат два украшения, одно передающееся и одно унаследованное. Мы решили эту проблему, сделав украшения, добавленные бликами, не распространяющимися ни на какие потомки.
Синее украшение распространяется на элемент из поля украшения, поэтому на нормальной базовой линии должна быть одна линия. С другой стороны, украшение правописания унаследовано от sup::spelling-error, поэтому должны быть отдельные строки для «quikc» и «fxo» в их соответствующих базовых линиях.
Псевдонимы выделения без стиля обычно не меняют внешний вид исходного содержимого, поэтому по умолчанию «цвет» и «фоновый цвет» в выделении — «currentColor» и «transparent» соответственно, причем последнее является начальным значением свойства. Но два псевдовыделения, ::selection и ::target-text, имеют цвета переднего плана и фона UA по умолчанию.
Для совместимости с ::selection в старых браузерах «цвет» и «фоновый цвет» UA по умолчанию (например, белый на синем) используются только в том случае, если автор не установил ни , ни . Это правило известно как парный каскад , и для согласованности оно также применяется к ::target-text.
Обычно выделенный текст почти инвертирует исходные цвета текста, например, превращая черный на белом в белый на синем. Чтобы исходные украшения оставались такими же разборчивыми, как и текст при выделении, что особенно важно для украшений со смысловым значением (например, сквозных), исходные украшения перекрашиваются в «цвет» выделения. Это не относится к украшениям, добавленным бликами, потому что это нарушит типичный внешний вид орфографических и грамматических ошибок.
Это сквозное оформление становится белым, как и остальной текст, когда оно выделено, хотя в исходном содержимом оно было явно задано как «темно-красное».
Правила стиля по умолчанию для псевдонимов подсветки могут выглядеть примерно так. Обратите внимание на новые декорации «орфографическая ошибка» и «грамматическая ошибка», которые авторы могут использовать для имитации нативных орфографических и грамматических ошибок.
Это не полностью описывает ::selection и ::target-text из-за парного каскада.
То, как были спроектированы псевдо-подсветки, естественно, приводит к некоторым ограничениям.
Попался
Удаление декораций и теней
Старые браузеры с ::selection, как правило, рассматривают его исключительно как способ изменить стили исходного содержимого, включая тени текста и другие украшения. Для этого даже был написан некоторый обучающий контент:
Одним из наиболее полезных применений ::selection является отключение text-shadow во время выделения. Текстовая тень может конфликтовать с цветом фона выделения и затруднять чтение текста. Установить text-shadow: нет; , чтобы сделать текст четким и легко читаемым во время выделения.
Согласно спецификации, псевдообъекты подсветки больше не могут удалять или реально изменять декорации и тени оригинального контента. Установка этих свойств в псевдонимах подсветки на значения, отличные от «none» , добавляет украшений и теней к наложениям, когда они активны.
Этот код означает, что ::highlight(undelete) не добавляет украшений или теней, а не удаляет сквозную линию и красную тень при выделении del .
Хотя может показаться, что новый селектор :has() предлагает решение этой проблемы, селекторы псевдоэлементов не разрешены в :has(), по крайней мере, пока.
Этот код не работает.
Удаление теней, которые могут конфликтовать с выделенным фоном (как предложено в руководстве выше), в любом случае больше не будет столь необходимым, так как выделенный фон теперь рисуется поверх теней оригинального текста.
Если вы по-прежнему хотите, чтобы эти тени не конфликтовали с бликами в старых браузерах, вы можете установить для text-shadow значение none, что безвредно в новых браузерах.
Это правило может быть полезно для старых браузеров, но учтите, что, как и любое универсальное правило, оно может мешать наследованию «тени текста» в сочетании с более конкретными правилами.
Что касается оформления строк, если вы действительно полны решимости, вы можете обойти это ограничение, используя «-webkit-text-fill-color», стандартное свойство (верите или нет), которое управляет цветом заливки текста на переднем плане ⁴ .
Этот хак скрывает любые оригинальные украшения (в визуальных средствах массовой информации), потому что эти украшения перекрашиваются в «цвет» выделения, но он также может изменить цвет текста.
Забавный факт: из-за ‘-webkit-text-fill-color’ и его братьев и сестер, связанных с обводкой, не всегда возможно выделить псевдонимы, чтобы избежать изменения цветов переднего плана текста, по крайней мере, не без внеполосных знание того, что это за цвета.
Если слово в em написано с ошибкой, оно станет синим, как и остальные p , если только свойства заливки и обводки не установлены в ::spelling-error соответственно.
Доступ к глобальным константам
Псевдонимы Highlight также не имеют автоматического доступа к пользовательским свойствам, установленным в дереве элементов, что может усложнить задачу, если у вас есть система дизайна, которая предоставляет цветовую палитру через пользовательские свойства в :root.
Этот код не работает.
Это можно обойти, добавив селекторы для необходимых псевдонимов подсветки в правило, определяющее константы, или, если необходимые псевдообъекты подсветки неизвестны, переписав каждую константу как пользовательское правило @property.
Проблемы со спецификацией
Несмотря на то, что дизайн псевдонимов основных моментов в основном решен, все еще есть некоторые нерешенные проблемы, на которые следует обратить внимание.
как использовать украшения орфографии и грамматики с цветами UA по умолчанию (#7522)
значения неприменимых свойств, например. «текстовая тень» с единицами измерения em (#7591)
значение свойств, связанных с подчеркиванием и выделением, в выделениях (#7101)
, разрешены ли ‘-webkit-text-fill-color’ и друзья в основных моментах (#7580)
некоторые браузеры «изменяют» цвета или альфа-каналы, установленные в стилях выделения (#6853)
как псевдонимы подсветки должны взаимодействовать с SVG (svgwg#894)
Что теперь?
Псевдонимы выделения радикально отличаются от старых браузеров с ::selection и имеют некоторые существенные отличия от известного нам CSS.