Efekt pióra zakreślacza w css

Chcę stworzyć efekt podświetlenia, który przypomina podświetlenie wykonane za pomocą pióra. tj. ma faliste wierzchołki i spody oraz nieostry początek i koniec, jak na tym zdjęciu.Efekt pióra zakreślacza w css

Jaki jest najlepszy sposób, aby to zrobić w CSS? Czy istnieje sposób, aby to zrobić bez użycia obrazów tła? Również po to, aby działał, będzie się owijał liniami.

Idealnie rozwiązanie wymaga HTML jak poniżej i sprawiają, że wygląda jak obraz.

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

Źródło

2015-10-31 chrisb

Nie używając koloru tła .. nie.

Tła rozciąga się na krawędzi elementu, które są zawsze prostokątne (wyjąwszy border-radius)

W tym przypadku obraz tła będzie prawdopodobnie optymalny wybór ... ALE:

Można osiągnąć podobny efekt przy użyciu wielu s. text-shadow.

Krótki przykład.

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

To tylko kwestia korzystania tyle cienie, jak trzeba, aby uzyskać pełny efekt trzeba,

Źródło

2015-10-31 13:17:47

Inspiring koncepcję THX! – collapsar

Za pomocą CSS tylko, najbliżej można dostać się do ekranu jest coś takiego:

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

Jeśli nie jest to na tyle blisko, obawiam się, trzeba używaj obrazów.

Źródło

2015-10-31 13:17:04

Wystarczy ustawić tło z wyściółką zobacz demo tutaj 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

Źródło

2015-11-01 21:36:12

Jeżeli nie jesteś ograniczony sub-HTML5 dostępnych znaczników, można również użyć tagu <mark>...</mark> wprowadzonego w 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>

Źródło

2017-05-04 14:20:23

Efekt pióra zakreślacza w css

Odpowiedz

Powiązane problemy