Is it possible to create a kind of horizontal “invert mask” in CSS?

by

I have two blocks (div elements) with one black on the top background-color: black and one white on the bottom.

Is it possible to have a piece of text that straddles the two zones with inverted colors?

For example: the top part of the text “FOO” will be white on black and the bottom part black over a white region.

Answer

If you mean something like this:

enter image description here

Edit: here’s a way which only requires one HTML element and so won’t be weird when read by non-CSS-styling clients like search engines, screen readers, RSS, ‘no style’ apps etc (thanks to Dominic for suggesting trying :before and :after).

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

The important code (add your colours to this):

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;
}

The HTML attribute can be anything – I used data-text because it’s descriptive and avoids undesirable side effects (e.g. you could use title but it would create mouseovers in some browsers).

If you want display:block; on the main (.top) element, add something like width: 100%; to the inner (.bottom) element so it fills it.

If you’re using jQuery, you can apply this style to any element really easily, avoiding having to manually type out the data-text duplicated bit:

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

Demo of that plus some other stuff like multiple lines, padding

Attribution
Source : Link , Question Author : joeD , Answer Author : user56reinstatemonica8

Leave a Comment