CODEWITHSUNDEEP
jqueryhtmlcss
jPO
jPO

Reputation: 2552

Border color blending

I'd like to ask you if anybody ever tried to achieve similar thing. Let's say I have a DOM structure consisting only of div elements, where there can be parents and children in only max 1 level. E.g

<div style="background-image:url(foo.bar)">
    <div style="border:2px dashed black">
    </div>
    <div style="border:2px dashed black">
    </div>
    <div style="border:2px dashed black">
    </div>
</div>
<div style="background-image:url(foo1.bar)">
    <div style="border:2px dashed black">
    </div>
    <div style="border:2px dashed black">
    </div>
    <div style="border:2px dashed black">
    </div>
</div>

Notice the difference between the backgrounds. Let's say the first one is a bright one and the second one very dark or black.

The struggle is to see the borders of the children on the dark background so the question would be.

Is there any possibility to make the border take some kind of negative color of it's parents background? Regardless if the parent has a picture or just a color as background. Some kind of multiply blending mode from ps?

I don't care if it is achievable with pure css (if even possible) or jquery plugin or some other sort of solution.

Thank you for any advices!

Upvotes: 2

Views: 3074

Answers (4)

spencer.sm
spencer.sm

Reputation: 20526

To create a color inverted border use mix-blend-mode: difference;

* {margin:0px; padding:0px; }

#border {
  position: absolute;
  top:0px;
  box-sizing: border-box;
  width: 300px;
  height:125px;

  border:10px solid white;
  mix-blend-mode:difference;
}
<img src="https://i.sstatic.net/ekz0d.jpg" width="400">
<div id="border"></div>

Upvotes: 3

vals
vals

Reputation: 64164

The option that you request (some blend mode) is achievable, but it is not supported in IE.

How to use it:

.base { 
    width: 500px;
    height: 330px;
    background: linear-gradient(45deg, black 15%, red, green, yellow, white 80%);
    position: absolute;
    top: 40px;
    left: 40px;
}

.test {
   color: wheat;
   font-size: 150px;
   position: absolute;
   left: 120px;
   top: 118px;
}

.test:after {
    content: "";
    position: absolute;
    left: -20px;
    top: -20px;
    right: -20px;
    bottom: -20px;
    border-width: 20px;
    border-color: white;
    border-style: dashed;
    mix-blend-mode: difference;
}
<div class="base"></div>
<div class="test">TEST</div>

Upvotes: 1

Alvaro Men&#233;ndez
Alvaro Men&#233;ndez

Reputation: 9012

There's a blending color css option to use at backgrounds but it may be very difficult to adapt it to your borders as the background-image AND the property needs to be same container (which it's not your html).

The easiest way would be to use an RGBA color for your border:

border-color: rgba(255, 255, 255, 0.5);

Imo white at 50% transparency would make the trick... just a very, very light image would give you problems as in this jsfiddle

Upvotes: 0

cvsguimaraes
cvsguimaraes

Reputation: 13240

Just use a semi-transparent color in your border and set the border to start from inside the content box.

div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    height: 362px;
    width: 465px;
    border: 20px solid rgba(0,0,0,0.5);
    background: url(http://www.vanseodesign.com/blog/wp-content/uploads/2011/10/background-4.jpg) -20px -20px no-repeat;
    margin: 10px;
    text-align: center;
}
<div>WooHoo!</div>

Upvotes: 1

Related Questions