Pen highlighter effect in css

问题

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>

回答1:

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,

回答2:

Using CSS only, the closest you can get to your screenshot is something like this :

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

If that's not close enough, I'm afraid you have to use images.

回答3:

If you're not limited to sub-HTML5 available tags, you could also use the <mark>...</mark> tag introduced in HTML5:

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

回答4:

This answer is closer to the original question:

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

Credit to: https://codepen.io/laurenvast/pen/JmOaNd

来源：https://stackoverflow.com/questions/33451683/pen-highlighter-effect-in-css

标签

html

css

css3

background-color

highlight