Farbe des partiellen Textes ändern CSS oder Javascript

Gibt es eine Möglichkeit, eine andere Farbe auf einen Teil des Textes zu erreichen, über CSS oder Skript, basierend auf einer Form Umriss z. B. einen Kreis oder eine ovale Kurve ... nur mit CSS oder JS.Farbe des partiellen Textes ändern CSS oder Javascript

Ein Beispiel ist dies, wie sich die Farbe des S und ein Teil der U unterschiedlich sind basierend auf dem Bild - Beispiel Wirkung

Theres eine ähnliche Frage, aber das ist in Illustrator - https://graphicdesign.stackexchange.com/questions/20127/text-silhouette-change-color-in-middle-of-a-letter-illustrator

Instinct sagt nicht, aber es könnte einen magischen Clipping-Effekt geben, der dasselbe erreichen kann?

Quelle

2017-07-07 Rob

Es ist möglich, aber nicht einfach. Sie könnten SVG mit einem Pfad für beide Elemente (die Silhouette und den Text) verwenden und sie dann beide abschneiden, um einen Schnittpunktpfad zu erhalten, der dann gefärbt werden kann. –

Sie brauchen SVG und CSS, um das zu tun ... Eh, irgendwie zu breit oder hart für Stack Overflow Antwort. –

Ehrlich gesagt, denke ich nicht, dass dies eine schlechte Frage ist, auch wenn sie nicht genau den Regeln von SO folgt –

Es gibt zwei oder mehr Möglichkeiten, dies zu tun. Ich kann 2 auf der Stelle kommen.

Eine Lösung wäre die Verwendung von SVG-Text. Was ich nicht empfehlen kann, wenn Sie viele Orte oder dynamischen Text haben. Das Animieren von SVG-Text ist manchmal etwas kompliziert.

Was Sie stattdessen tun könnten, ist die Verwendung von Mix-Blend-Modus CSS. Es ermöglicht das Mischen von Farben von Text und Hintergründen. So wie Sie es vielleicht von Photoshop oder Illustrator kennen.

Sie können mehr darüber hier auf CSS tricks lesen. Vielleicht möchten Sie die Browser-Kompatibilität überprüfen, da der Mix-Blend-Modus im Allgemeinen schlecht unterstützt wird. Sie können hier unter Caniuse herausfinden, welcher Browser sie verwenden kann.

Wenn Sie Inspiration für Workarounds oder Anwendungsbeispiele benötigen, können Sie immer nach codepen.io für Mix-Blend-Modus oder etwas ähnliches suchen.

Quelle

2017-07-07 11:52:15

Ich war ein bisschen langsamer als Emil Østervig, aber ich wollte das gleiche schreiben :-) Ich habe ein kleines Beispiel für die Mix-Blend-Modus-Eigenschaft erstellt, die NICHT in IE und Edge funktioniert. Ich denke nicht, dass Sie Ihr Image mit reinem CSS genau reproduzieren können, aber es ist eine interessante Option, vielleicht ein wenig tiefer zu graben.

.image { 
 
    background: url(http://www.iconsdb.com/icons/preview/red/wolf-xxl.png); 
 
    background-repeat: no-repeat; 
 
} 
 

 
.inverted { 
 
    background-repeat: no-repeat; 
 
    color: blue; 
 
    width: 50%; 
 
    height: 256px; 
 
    mix-blend-mode: screen; 
 
    font-size: 64px; 
 
}

<div class="image"> 
 
    <div class="inverted"> 
 
    Wolf <br> 
 
    Wolf <br> 
 
    Wolf 
 
    </div> 
 
</div>

Quelle

2017-07-07 11:58:55

Farbe des partiellen Textes ändern CSS oder Javascript

Antwort

Verwandte Themen