CSS中的笔荧光笔效果 [英] Pen highlighter effect in css

问题描述

我想创建一个类似于笔的高光效果的高光效果.即，它具有波浪状的顶部和底部，以及一个粗糙的起点和终点，就像这张图片一样.

在CSS中执行此操作的最佳方法是什么?有没有办法在不使用背景图像的情况下做到这一点?另外，为了使它起作用，将自动换行.

理想情况下，该解决方案将采用如下所示的HTML，并使其看起来像图像.

<p>
  <span class='green-highlight>So write with a combination of short, medium, and long sentences. Create a sound that pleases the reader's ear. </span>
  <span class='pink-highlight'>Don't just write words. </span>
  <span class='yellow-highlight'>Write music. </span
</p>

解决方案

不使用背景色.

背景延伸到始终为矩形的元素的边缘(禁止border-radius)

在这种情况下，背景图片可能是最佳选择... 但:

您可以使用多个text-shadow达到类似的效果.

一个简单的例子.

 .green-highlight {
  text-shadow: 
     3px 0px 3px green,
    -3px 0px 3px green,
     6px 0px 6px green,
    -6px 0px 6px green;

}

.red-highlight {
  text-shadow: 
     3px 0px 3px red,
    -3px 0px 3px red,
     6px 0px 6px red,
    -6px 0px 6px red;
}

.yellow-highlight {
  text-shadow: 
    -3px 0px 3px yellow,
     3px 0px 3px yellow,
     6px 0px 6px yellow,
    -6px 0px 6px yellow;
} 

 <p>
  <span class="green-highlight">So write with a combination of short, medium, and long sentences. Create a sound that pleases the reader's ear. </span>
  <span class="red-highlight">Don't just write words. </span>
  <span class="yellow-highlight">Write music. </span
</p> 

只需要使用尽可能多的阴影即可获得所需的全部效果，

I want to create a highlight effect that resembles a highlight made with a pen. i.e. it has wavy tops and bottoms and a rough start and end, like in this picture.

What's the best way to do this in CSS? Is there a way to do it without using background images? Also so that it works will line wraps.

Ideally the solution would take HTML like the below and make it look like the image.

<p>
  <span class='green-highlight>So write with a combination of short, medium, and long sentences. Create a sound that pleases the reader's ear. </span>
  <span class='pink-highlight'>Don't just write words. </span>
  <span class='yellow-highlight'>Write music. </span
</p>

解决方案

Not using a background color..no.

Backgrounds extends to the edges of the element which are always rectangular (barring border-radius)

In this case, a background image would probably the the optimal choice...BUT:

You can achieve a similar effect using multiple text-shadows.

A brief example.

.green-highlight {
  text-shadow: 
     3px 0px 3px green,
    -3px 0px 3px green,
     6px 0px 6px green,
    -6px 0px 6px green;

}

.red-highlight {
  text-shadow: 
     3px 0px 3px red,
    -3px 0px 3px red,
     6px 0px 6px red,
    -6px 0px 6px red;
}

.yellow-highlight {
  text-shadow: 
    -3px 0px 3px yellow,
     3px 0px 3px yellow,
     6px 0px 6px yellow,
    -6px 0px 6px yellow;
}

<p>
  <span class="green-highlight">So write with a combination of short, medium, and long sentences. Create a sound that pleases the reader's ear. </span>
  <span class="red-highlight">Don't just write words. </span>
  <span class="yellow-highlight">Write music. </span
</p>

It's just a matter of using as many shadows as you need to get the full effect you need,

这篇关于CSS中的笔荧光笔效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！