CODEWITHSUNDEEP
javascripthtmlcss
Tudor Ravoiu
Tudor Ravoiu

Reputation: 2150

Text invert based on background image

Is it even possible to obtain something like this only with CSS/CSS3 or with javascript? but no image for text.

enter image description here

Upvotes: 8

Views: 2794

Answers (2)

vals
vals

Reputation: 64214

With limited support from old browsers, you can achieve this with text clipping:

for this html:

<div class="filter">
<div class="base">SOME TEXT</div>
</div>

with that CSS:

.filter {
    width: 250px;
    height: 250px;
    background: -webkit-linear-gradient(-45deg, black 0%,black 50%,white 51%,white 100%);
}
.base {
    width: 100%;
    height: 100%;
    font-size: 80px;
    background: -webkit-linear-gradient(-45deg, white 0%,white 50%,black 51%,black 100%);
    -webkit-background-clip: text;
    color: transparent;
}

You will get the background from the base (that has the inverted colors of the first div) to show only thru the text.

webkit demo

Editing

Have found that it can be done in a single element. The style would be:

.base {
    width: 100%;
    height: 100%;
    font-size: 80px;
    background: -webkit-linear-gradient(-45deg, white 0%,white 50%,black 51%,black 100%), -webkit-linear-gradient(-45deg, black 0%,black 50%,white 51%,white 100%);
    -webkit-background-clip: text, border;
    color: transparent;
}

Upvotes: 4

Richard
Richard

Reputation: 22026

To achieve this in CSS you would need to use gradients. One for the background and one for the text, the gradient would be constant . see this for generating them: http://www.colorzilla.com/gradient-editor/ to produce this:

    background: #000000; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #000000 0%, #000000 50%, #ffffff 51%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#000000), color-stop(50%,#000000), color-stop(51%,#ffffff), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%); /* IE10+ */
background: linear-gradient(135deg,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

the main problem you still face though is not being able to "detect" the background image in order to make the text color opposite.

If you wanted to detect the background you could look into the webkit -webkit-background-composite which has an XOR and plus-darker and plus-lighter for composite effects

Hope this helps.

Upvotes: 2

Related Questions