Ersatz CSS outline-color: vor

Lange Zeit umkehren, mit veralteten Browser (chrome38) Menschen Boxen machen könnten ...Ersatz CSS outline-color: vor

Es war möglich, outline-color: invert zu verwenden, um eine Farbe zu wählen, die das genaue Gegenteil von dem Hintergrund war .

heute so ein großartiges Feature existiert nicht mehr :(Do yo eine Idee für mich, die wollen nur Box von der entgegengesetzten Farbe des Hintergrunds mit Grenzen angezeigt werden?

(heute Chrom (39) berechnen outline-color: invert-outline-color:transparent.

vor, dass outline-color: invert auf einem schwarzen brackground zu outline-color: rgb(255,255,255) gemacht.)

Vielen Dank für Ihre Ideen.

Quelle

2015-01-13 Xavier Haniquaut

Haben Sie JavaScript zur Verfügung haben? –

Ja sicher;) Aber darum ging es nicht. –

Ich kann mir keinen Weg vorstellen, dies mit reinem CSS zu tun. Ein CSS Pre-Prozessor könnte es tun; oder JavaScript. In jedem Fall wäre es kompliziert. –

Vielleicht thi S macht den Trick für dich?

.background { 
 
    display: inline-block; 
 
    margin: 10px; 
 
    padding: 20px; 
 
} 
 
.box { 
 
    border: 3px solid white; 
 
    height: 100px; 
 
    width: 160px; 
 
} 
 
.invert { 
 
    mix-blend-mode: difference; 
 
}

<div class="background" style="background: #ff0000"> 
 
    <div class="box invert"></div> 
 
</div> 
 

 
<div class="background" style="background: #000000"> 
 
    <div class="box invert"></div> 
 
</div> 
 

 
<div class="background" style="background: #ffffff"> 
 
    <div class="box invert"></div> 
 
</div>

http://codepen.io/Frikki/pen/BNpKYb

Quelle

2015-05-29 00:06:47

Ich bin ziemlich beeindruckt davon ([erweiterte Demo ] (http://jsfiddle.net/davidThomas/Lzru6mgt/)); Ich war vorher noch nicht auf den Mix-Blend-Modus gestoßen. –

Selben wie DavidThomas, ziemlich beeindruckt von dem Trick und nie zuvor gesehen. Danke @FrederikKrautwald für diesen netten Trick;) –

Ersatz CSS outline-color: vor

Antwort

Verwandte Themen