Stift Textmarker Effekt in CSS

Ich möchte einen Highlight-Effekt, der ein Highlight mit einem Stift gemacht ähnelt erstellen. h. es hat wellenförmige Ober- und Unterseiten und einen groben Anfang und Ende wie in diesem Bild.Stift Textmarker Effekt in CSS

Was ist der beste Weg, dies in CSS zu tun? Gibt es eine Möglichkeit, dies ohne Verwendung von Hintergrundbildern zu tun? Auch so, dass es funktioniert, wird Zeilenumbrüche.

Im Idealfall würde die Lösung HTML wie das folgende nehmen und es wie das Bild aussehen lassen. nur

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

Quelle

2015-10-31 chrisb

Keine Hintergrundfarbe verwenden ..nr.

Hintergrund erstreckt sich bis zu den Rändern des Elements, das immer rechteckig sind (abgesehen von border-radius)

In diesem Fall würde ein Hintergrundbild wahrscheinlich die die optimale Wahl ... ABER:

können Sie erreichen einen ähnlichen Effekt mit mehreren text-shadow s.

Ein kurzes Beispiel.

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

Es ist nur eine Frage von so vielen Schatten verwenden, wie Sie die volle Wirkung Sie brauchen erhalten müssen,

Quelle

2015-10-31 13:17:47

Inspiring Konzept, thx! – collapsar

CSS verwenden, können in der Nähe Sie Ihren Screenshot zu bekommen, ist so etwas wie dieses:

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

Wenn das nicht nahe genug ist, ich fürchte, Sie müssen benutze Bilder.

Quelle

2015-10-31 13:17:04

einfach der Hintergrund mit Polsterung stellen Sie die Demo sehen hier 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

Quelle

2015-11-01 21:36:12

Wenn Sie sich nicht auf Unter HTML5 verfügbaren Tags darauf beschränkt, können Sie auch das <mark>...</mark> Tag in HTML5 eingeführt verwenden:

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

Quelle

2017-05-04 14:20:23

Stift Textmarker Effekt in CSS

Antwort

Verwandte Themen