发表新帖
发表新帖

Pen highlighter effect in css

前端 未结
关注
6 1469
北恋
北恋 2020-12-31 08:02

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.

相关标签:
6条回答
  • 耶瑟儿～
    2020-12-31 08:12

    for a hyper realistic pen highlighter! Play with the background gradients for the intensity and with text-shadow to give it a washed effect.

    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>

    0 讨论(0)
  • 耶瑟儿～
    2020-12-31 08:12

    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>

    0 讨论(0)
  • 迷失自我
    2020-12-31 08:15

    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.

    0 讨论(0)
  • 一整个雨季
    2020-12-31 08:18

    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

    0 讨论(0)
  • 不思量自难忘°
    2020-12-31 08:33

    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,

    0 讨论(0)
  • -上瘾入骨i
    2020-12-31 08:35

    I was looking for the best possible effect with pure CSS and found the one that Basecamp uses quite compelling. There was still room for improvement though.

    Here is my improved version:

    And here is the code:

    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.

    If you are interested in how this works:

    I wrote a tutorial about how the marker pen highlighter effect is achieved.

    0 讨论(0)
 看不清?
提交回复
热议问题