Inverting a div render in CSS

Propolys Published at Dev

Propolys

I have two divs, one with a white background, one with a black background:

<style>
#leftside
{
float:left;
width:50%;
height:100%;
background:#fff;
}
#rightside
{
float:right;
width:50%;
height:100%;
background:#000;
}

<div id="leftside">

</div>
<div id="rightside">

</div>

What I wish to do is write a text that goes over both of the divs but has an inverted color depending on which div that letter's pixel is over.

Something like

I COULD just <span> and set the letter's color properly but this doesn't handle the situation when a single letter is on both divs.

Anything I could do? (if possible I'd like not to get down to CSS that only Chrome 47 and Firefox 43 support).

Jacob

You can do it but not without ugly hacky code.

Make two elements with two texts that are overlapping each other but hidden on the other element. Better explained by an example.

Check out the jsFiddle.

<div class="wrapper">

  <div id="left">

    <span>This is a long sentence as test.</span>

  </div>
  <div id="right">

    <span>This is a long sentence as test.</span>

  </div>
</div>

body {
  background: #CACACA;
}
.wrapper {
  width: 300px;
  height: 150px;
  position: relative;
  }
  .wrapper span {
    width: 300px;
    position: absolute;
    text-align: center;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
  .wrapper #left {
    width: 50%;
    height: 150px;
    background: #FFFFFF;
    display: inline-block;
    color: #000000;
    position: relative;
  }
  .wrapper #right {
    width: 50%;
    height: 150px;
    background: #000000;
    display: inline-block;
    margin-left: -4px;
    color: #FFFFFF;
    position: relative;
    overflow: hidden;
  }
  .wrapper #right span {
    left: -150px;
  }

https://jsfiddle.net/66t8zf9s/

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-02-21

Comments

0 comments

From Dev

Related Related

Article

Inverting a div render in CSS

Inverting a div render in CSS

Render Android layout into html div

"Fail Render" Javascript files and Css

AngularJs Render div onclick

TCPDF does not render external CSS

ValidatorCalloutExtender not render CSS properly

Render div over existing div

CSS Properties won't render

How does one set a css class on a div returned from react's render()

Prevent Render Blocking CSS

Inverting and re-inverting element with CSS/JS

Inverting a text not working in css

Inverting a dictionary?

Center DIV on DIV with CSS

AngularJs Render div onclick

Render div from Mvc Model

TCPDF does not render external CSS

css display:block will not render a div area as visable on @media screen width change

Why Does My CSS Not Render ?

Problems with Routing, Render and CSS in Flask

Prevent Render Blocking CSS

react render div if loop was empty

Eliminate render blocking css

CSS DIV inside DIV

ReactDOM does not render a simple div

CSS div and dot div

Not able to render a simple ReactDOM div

It is possible to render a DOM in a div?

render DIV in react app

Render multiple scene on multiple div