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

超逼真的荧光笔！ 使用背景渐变来提高强度，并使用文本阴影来赋予其水洗效果。

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;
box-decoration-break: clone;
-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 2

我一直在寻找纯 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.

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

我写了一篇

关于如何实现记号笔荧光笔效果的教程。

Answer 3

仅使用 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 4

不使用背景颜色..不。

背景延伸到元素的边缘，这些边缘始终是矩形（除了

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 5

这个答案更接近原来的问题：

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

如果您不限于 sub-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>