Выделение текста — отличный способ привлечь внимание к определенным фразам в относительно длинном тексте. И есть еще лучший способ сделать это более эффективным: сделать так, чтобы выделение выглядело как будто оно выделено настоящим маркером.
В статье разберем как можно создать эффект выделения маркером CSS с помощью готовых иконок, установленных в SVG Box, используя их в качестве фоновых изображений и настраивая цвет заливки. Разберем на примерах с кодом.
Создаем эффект маркера
Создадим простой эффект маркера с помощью Brush 9
<style>
.highlight {
background: url(https://s2.svgbox.net/pen-brushes.svg?ic=brush-9&color=ff0000)
}
</style>
<div>
Это та <span class="highlight">выделенная маркером</span> часть текста
</div>Демонстрация примера:
Это та выделенная маркером часть текста
Это выглядит прилично, но фон можно было бы расположить немного лучше. Растянем его с обеих сторон, а также немного по оси Y.
<style>
.highlight {
background: url(https://s2.svgbox.net/pen-brushes.svg?ic=brush-9&color=ffff43);
margin: -2px -6px;
padding: 2px 6px;
}
</style>
<div>
Это та <span class="highlight">выделенная маркером</span> часть текста
</div>Что получилось:
Это та выделенная маркером часть текста
Это выглядит намного лучше и уже вполне пригодно для использования. Мы также можем экспериментировать с разными цветами. Например, использовать здесь цветовой формат hsl, так гораздо легче регулировать яркость. SVGBox поддерживает большинство распространенных цветовых форматов, что упрощает этот процесс.
Примеры выделения маркером с цветовым форматом hsl:
hsl(349,100%,87%)
Это та выделенная маркером часть текста
hsl(74,54%,84%)
Это та выделенная маркером часть текста
И с использованием других кистей (brushes):
brush-5
Это та выделенная маркером часть текста
brush-9
Это та выделенная маркером часть текста
Вот и все, это действительно простой способ добавить этот эффект на ваш сайт.