CSS에서 마커 하이라이트 효과를 만드는 방법은 무엇입니까?

카피에서 텍스트를 강조 표시하는 것은 상대적으로 긴 텍스트에서 특정 구에 주의를 끌 수 있는 좋은 방법입니다. 그리고 더 효과적으로 만드는 더 좋은 방법이 있습니다. 강조 표시를 실제로 표시한 것처럼 보이게 만드는 것입니다. Hotjar의 방문 페이지에서 예를 볼 수 있습니다.



나는 SVGBox 이라는 사이드 프로젝트를 실행하는데, 여기에서 아이콘 사용을 시작하는 가장 간단한 방법을 제공합니다. 최근에 아이콘 세트pen-burshes를 추가했는데 이를 사용하여 브러시를 배경 이미지로 사용하고 채우기 색상을 사용자 정의하여 동일한 효과를 만들 수 있습니다. 방법을 살펴보겠습니다.

마커 효과 만들기

가장 간단한 효과를 내기 위해 brush-1을 사용하겠습니다.

<style>
    .highlight {
        background: url(//s2.svgbox.net/pen-brushes.svg?ic=brush-1&color=ffff43);
    }
</style>

<div>
    This is a <span class="highlight">
        highlighted part
    </span> of the text
</div>

괜찮아 보이지만 강조 표시된 배경의 위치와 크기를 더 잘 조정할 수 있습니다. 양쪽이 늘어나고 Y축도 약간 늘어납니다.

<style>
    .highlight {
        background: url(//s2.svgbox.net/pen-brushes.svg?ic=brush-1&color=ffff43);
        margin: -2px -6px;
        padding:  2px  6px;
    }
</style>

<div>
    This is a <span class="highlight">
        highlighted part
    </span> of the text
</div>

이것은 훨씬 더 좋아 보이고 이미 꽤 사용 가능합니다. 다양한 색상으로 실험해볼 수도 있습니다. 밝기를 훨씬 더 쉽게 조정할 수 있기 때문에 여기에서 HSL 색상 형식을 사용하는 것이 정말 좋습니다. SVGBox는 가장 일반적인color formats을 지원하여 이 프로세스를 더 쉽게 만듭니다.



또한 다른 브러시:



이것이 바로 이 효과를 웹 페이지에 추가하는 정말 쉬운 방법입니다.