css 中的笔荧光笔效果

Question

我想创建一个类似于用钢笔制作的高光效果的高光效果。即它有波浪形的顶部和底部以及粗糙的开始和结束，就像这张照片一样。

在 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>

Answer 1

仅使用 CSS，最接近屏幕截图的是这样的：

.green-highlight, .pink-highlight, .yellow-highlight {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding-left: 3px;
 }

.green-highlight {
    background: #99FFCC; /* Default color, all browsers */
}

.green-highlight::selection {
    background: #99CCCC; /* Selection color, WebKit/Blink Browsers */
}

.green-highlight::-moz-selection {
    background: #99CCCC; /* Selection color, Gecko Browsers */
}

.pink-highlight {
    background: #FFCCFF; /* Default color, all browsers */
}

.pink-highlight::selection {
    background: #FF99FF; /* Selection color, WebKit/Blink Browsers */
}

.pink-highlight::-moz-selection {
    background: #FF99FF; /* Selection color, Gecko Browsers */
}

.yellow-highlight {
    background: #FFFFCC; /* Default color, all browsers */
}

.yellow-highlight::selection {
    background: #FFFF66; /* Selection color, WebKit/Blink Browsers */
}

.yellow-highlight::-moz-selection {
    background: #FFFF66; /* Selection color, Gecko Browsers */
}

<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>

如果不够接近，恐怕你必须使用图像。

Answer 2

不使用背景颜色..不.

背景延伸到始终为矩形的元素的边缘（除非 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>

只需使用尽可能多的阴影来获得所需的完整效果，

Answer 3

如果您不限于子 HTML5 可用标签，您还可以使用 HTML5:

中介绍的 <mark>...</mark> 标签

<!DOCTYPE HTML>
<html>
    <head>
        <style>
            mark {
                background-color: #069aaa;
                color: #fff;
                padding: 5px; /* optional... */
            }
        </style>
    </head>
    <body>
        <p>
            This is some <mark>text that's been</mark> highlighted.
        </p>
    </body>
</html>

Answer 4

这个答案更接近原问题：

 
.book-in-quest {
 font-size: 34px;
 letter-spacing: -2.5px;
 font-family: arial;
 line-height: 1.05;
 display: flex;
 flex-wrap: wrap;
 color: #523D13;
}

 .page {
  width:428px;
  height: 453px;
  margin: 20px;
  overflow: hidden;
  // margin-bottom: 50px;
  border-bottom: #846C3C dotted 1px;
}

  blockquote, p {
   padding-bottom: 10px;
  }

  blockquote {
   font-size: 28px;
   margin-top:0;
   margin-bottom:0;
   margin-inline-start: 30px;
  }

  p {
   margin: 0;
 }

   .highlight {
    font-size: 23px;
    background-color:#FFFF66;
    line-height: 23px;
    border-radius: 100px;
}
    .text {
     font-size: 34px;
     font-weight: 700;
    }

<div class="book-in-quest">
 <div class="page">
 <p>
 Roberta is <span class="highlight"><span class="text">creating</span></span> a statue in honor of <span class="highlight"><span class="text">T. Schmidt O. Ren and E. Dash</span></span>, but the photo is <span class="highlight"><span class="text">too old</span></span>. She'll need a better picture from Gary to finish the job! an unusual</span></span>
 </div>

</div>

感谢：https://codepen.io/laurenvast/pen/JmOaNd

Answer 5

超逼真的钢笔荧光笔！使用背景渐变的强度和文本阴影来赋予它水洗效果。

span {
    padding: 0.6em 13.7px;
    line-height: 1.8em;
    font-size: 23px;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial;
}
span.highlight {
font-weight: bolder;
background: linear-gradient(104deg, rgba(130, 255, 173,0) 0.9%, rgba(130, 255, 173,1.25) 2.4%, rgba(130, 255, 173,0.5) 5.8%, rgba(130, 255, 173,0.1) 93%, rgba(130, 255, 173,0.7) 96%, rgba(130, 255, 1732,0) 98%), linear-gradient(183deg, rgba(130, 255, 173,0) 0%, rgba(130, 255, 173,0.3) 7.9%, rgba(130, 255, 173,0) 15%);
padding: 0.6em 13.7px;
-webkit-box-decoration-break: clone;
margin: 0;
border-radius: 7.5px;
text-shadow: -12px 12px 9.8px rgba(130, 255, 173,0.7), 21px -18.1px 7.3px rgba(255, 255, 255,1), -18.1px -27.3px 30px rgba(255, 255, 255,1);
}

<span class="highlight">Lorem Ipsum is simply dummy text of the printing and</span> <span>typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled <span class="highlight">it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was<span>

Answer 6

我一直在寻找纯 CSS 的最佳效果，发现 Basecamp 使用的效果非常引人注目。不过仍有改进的空间。

这是我的改进版本：

这是代码：

mark {
  margin: 0 -0.4em;
  padding: 0.1em 0.4em;
  border-radius: 0.8em 0.3em;
  background: transparent;
  background-image: linear-gradient(
    to right,
    rgba(255, 225, 0, 0.1),
    rgba(255, 225, 0, 0.7) 4%,
    rgba(255, 225, 0, 0.3)
  );
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

Inside this text some words <mark>are highlighted</mark> and some aren’t.

如果您对其工作原理感兴趣：

我写了一个tutorial about how the marker pen highlighter effect is achieved.

css 中的笔荧光笔效果

Pen highlighter effect in css

html

css

highlight

background-color