Effetto evidenziatore penna in css

Desidero creare un effetto di evidenziazione che assomigli a un'evidenziazione fatta con una penna. cioè ha cime e fondi ondulati e un inizio e una fine approssimativi, come in questa immagine.Effetto evidenziatore penna in css

Qual è il modo migliore per farlo in CSS? C'è un modo per farlo senza usare le immagini di sfondo? Inoltre, in modo che funzioni saranno gli involucri delle linee.

Idealmente la soluzione richiederebbe HTML come il seguente e renderlo simile all'immagine.

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

fonte

2015-10-31 chrisb

Non utilizzare un colore di sfondo ... no.

Sfondi estende ai bordi dell'elemento che sono sempre rettangolare (blocco border-radius)

In questo caso, un'immagine di sfondo sarebbe probabilmente la scelta ottimale ... MA:

Puoi ottenere un effetto simile usando più text-shadow s.

Un breve esempio.

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

E 'solo una questione di usare come tante ombre di cui hai bisogno per ottenere il pieno effetto si ha bisogno,

fonte

2015-10-31 13:17:47

Inspiring concetto, thx! – collapsar

Utilizzando i CSS solo, il più vicino si può arrivare a tuo screenshot è qualcosa di simile:

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

Se questo non è abbastanza vicino, ho paura che devi usa le immagini.

fonte

2015-10-31 13:17:04

sufficiente impostare lo sfondo con imbottitura vedere la demo qui 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; 
 
\t  } 
 
     
 
     
 
    </style> 
 
</head> 
 
<body> 
 
    <h1>Glowing Text</h1> 
 

 
</body> 
 
</html>                                                    
 
\t

fonte

2015-11-01 21:36:12

Se non si è limitato a sub-HTML5 tag disponibili, si potrebbe anche utilizzare il tag <mark>...</mark> introdotto 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>

fonte

2017-05-04 14:20:23

Effetto evidenziatore penna in css

risposta

Problemi correlati