Geek Answers Handbook

Marker effect in css

I want to create a selection effect, similar to the selection made with a pen. those. has wavy tops and bottoms and a rough start and end, as in this figure.

Highlighted pen effect

What is the best way to do this in CSS? Is there any way to do this without using background images? Also, for it to work, the lines will be wrapped.

Ideally, the decision will be made by HTML, as shown below, and make it look like an image.

<p> <span class='green-highlight>So write with a combination of short, medium, and long sentences. Create a sound that pleases the reader ear. </span> <span class='pink-highlight'>Don't just write words. </span> <span class='yellow-highlight'>Write music. </span </p>
+7
html css css3
source share
4 answers

Do not use .no background color.

Backgrounds extend to the edges of the element that are always rectangular ( border-radius prohibition)

In this case, the background image is likely to be the best choice ... BUT :

You can achieve a similar effect using multiple text-shadow s.

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

+8
source share

Only using CSS, the closest to your screenshot can be found 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 ear. </span> <span class='pink-highlight'> Don't just write words. </span> <span class='yellow-highlight'> Write music. </span> </p>

If this is not close enough, I am afraid that you should use images.

+10
source share

If you are not limited to the tags available for sub-HTML5, you can also use the <mark>...</mark> 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 been</mark> highlighted. </p> </body> </html>
+2
source share

Just set the background with the addition see the demo here http://www.tutorialspark.com/css3/CSS_text_Shadow.php

  <!DOCTYPE HTML> <html> <head> <style> body{font-family:Arial; color:#666666; font-size:2em;} /* text-shadow:( x-offset, y-offset, blur-radius, color); */ h1{text-shadow: 0px 0px 20px #fa4b2a, 0px 0px 20px #fa4b2a; } </style> </head> <body> <h1>Glowing Text</h1> </body> </html>
0
source share

More articles:


All Articles