Ist es möglich, in CSS eine Art horizontale „Invertierungsmaske“ zu erstellen?

7

Ich habe zwei Blöcke (div-Elemente) mit einem schwarzen oben background-color: blackund einem weißen unten.

Ist es möglich, einen Text zu haben, der die beiden Zonen mit umgekehrten Farben überspannt?

Beispiel: Der obere Teil des Textes "FOO" ist weiß auf schwarz und der untere Teil schwarz über einem weißen Bereich.

JoeD
quelle
1
Verwandte und nützliche: Ist es möglich, CSS auf die Hälfte eines Zeichens anzuwenden? und eine der besten Antworten auf das q als Plugin: Splitchar - Dieses Plugin macht auch das, was auf dieser Seite verlangt wird, kann aber auch 3 Farbstufen horizontal oder vertikal ausführen .
Dom

Antworten:

10

Wenn Sie so etwas meinen:

Geben Sie hier die Bildbeschreibung ein


Bearbeiten: Hier ist ein Weg, der nur ein HTML-Element erfordert und daher nicht seltsam ist, wenn er von Clients ohne CSS-Stil wie Suchmaschinen, Bildschirmleseprogrammen, RSS, Apps ohne Stil usw. gelesen wird (danke an Dominic für den Vorschlag, es zu versuchen :beforeund :after).

http://jsbin.com/UtUlIFO/2/edit

Der wichtige Code ( fügen Sie Ihre Farben hinzu ):

HTML: <div class="someclass" data-text="Some text">Some text</div>

CSS:

.someclass {     /* bottom half */
  position: relative;
  display: inline-block;
}

.someclass:after {     /* top half */
  content: attr(data-text);
  display: block;
  position: absolute;
  top: 0px;
  height: 50%;
  overflow: hidden;
}

Das HTML-Attribut kann alles sein - ich habe es verwendet, data-textweil es beschreibend ist und unerwünschte Nebenwirkungen vermeidet (z. B. könnten Sie es verwenden, titleaber es würde in einigen Browsern Mouseover erzeugen).

Wenn Sie display:block;das main ( .top) -Element verwenden möchten , fügen Sie width: 100%;dem inner ( .bottom) -Element etwas Ähnliches hinzu , damit es es ausfüllt.

Wenn Sie jQuery verwenden, können Sie diesen Stil ganz einfach auf jedes Element anwenden, ohne das data-textduplizierte Bit manuell eingeben zu müssen :

$('.someElement').each(function(){
  $(this).addClass('someclass').attr('data-text',$(this).text());
});

Demo davon plus einige andere Sachen wie mehrere Zeilen, Polsterung

user56reinstatemonica8
quelle
2
Ich versuche herauszufinden, ob es eine Möglichkeit gibt, dies zu tun, indem ich den doppelten Text mit einem Pseudoelement ( :afteroder :beforeirgendwelchen Ideen) erstelle .
Dom
2
Interessante Idee: Sie können dies tun (den in das CSS fest codierten Inhalt duplizieren) oder dies (den Inhalt in einem HTML-Attribut duplizieren und dann lesen), aber anscheinend ist es nicht möglich, den HTML-Inhaltstext einfach mit CSS zu lesen . Der Weg des HTML-Attributs scheint der beste zu sein, da er das maschinelle Lesen des HTML nicht durcheinander bringt. Ich habe oben einige Dinge wie diese hinzugefügt.
user56reinstatemonica8
5

Überraschenderweise ist es möglich, obwohl ich es nur empfehlen würde , wenn Du Website ist alles über die visuelle Wirkung und die Semantik des Codes nicht Angelegenheit, zusätzlich wird es wahrscheinlich nicht sehr konsistent über älteren Browser sein.

Das Ergebnis ist:

Invertierter Text

Dies ist keine schöne Lösung, und ich wette, es ist nicht die einzige da draußen, aber es macht, was Sie wollen.

Es ist erforderlich, dass Sie über zwei Instanzen des Textes verfügen. Mit absoluter Positionierung und einigen einfachen Berechnungen können Sie diesen Effekt erstellen.

Wenn wir also einen Container divhaben und innerhalb dieser zwei weiteren divsund innerhalb jeder dieser Instanzen eine Instanz des Textes, können Sie die folgende HTMLStruktur und CSSEigenschaften verwenden, um dies zu erreichen:

<div class="container">
    <div class="black">
       <div class="text">Invert</div>
    </div>
    <div class="white">
       <div class="text">Invert</div>
    </div>
</div>

.container{position:relative; width:200px; height:100px; display:block; margin:0px; padding:0px; }

.black, .white{position:absolute; left:0px; background:#000; width:200px; height:50px; margin:0px; padding:0px; overflow:hidden; }

.black{top:0px; }

.white{bottom:0px; background:#fff; }

.text{position:absolute; color:#fff; font-size:70px; padding:0px; }

.black .text{bottom:-40px; }

.white .text{top:-40px; color:#000; }

Hier ist eine JSFiddle des Ergebnisses. :) :)

Dom
quelle
Oooh hat geschrieben, als ich mit dem Tippen fertig war! Schöne Antwort, aber ich denke, es gibt einige Möglichkeiten, wie man es vereinfachen kann, mehr etwas zu sein, das überall hineingelegt werden kann. Ich denke, es gibt keine Möglichkeit, dies zu tun, ohne Text zu duplizieren.
user56reinstatemonica8
2

Es gibt auch eine CSS3-Eigenschaft , die nur vom Webkit unterstützt wird und die Farben invertiert:

image {
 -webkit-filter: invert(100%);  
}

Und es gibt einen HTML5 Canvas Invert , hier ein Beispiel und den vollständigen Code . Es iteriert über alle Pixel in einem Bild und invertiert Rot, Grün und Blau, indem jede Komponente vom maximalen Farbwert 255 subtrahiert wird.

Beide Lösungen würden immer noch 2 Bilder und CSS-Positionierung für sie erfordern. Da die Kompatibilität nicht sehr gut ist, würde ich definitiv eine der anderen Antworten wählen :)

Yisela
quelle