8

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

MaxArt
  • 22,200
  • 10
  • 82
  • 81
Tudor Ravoiu
  • 2,130
  • 8
  • 35
  • 56

2 Answers2

4

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;
}
vals
  • 61,425
  • 11
  • 89
  • 138
  • i'll mark this answer as the right one. Thank you! Hopefully mozilla, opera and ie10 will support in the future the text property of the background-clip. – Tudor Ravoiu Apr 23 '13 at 09:49
  • Glad it helped. Hopefully opera will suport that soon since they are changing to webkit. – vals Apr 23 '13 at 10:07
2

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.

Richard
  • 21,728
  • 13
  • 62
  • 101
  • i know how to use gradients for div's spans or other block elemnts, but how do i use it for text? I'll gie the -webkit-background-composite tag a try – Tudor Ravoiu Apr 22 '13 at 11:51
  • I would convert your text to svg in order to be able to use css background on it. see this http://stackoverflow.com/questions/7742148/how-to-convert-text-to-svg-paths – Richard Apr 22 '13 at 11:52
  • changing the text to svg wouldn't solve my problem, i need the text to be changeable via CMS and readable by search engines. I also tried the webkit composite but it didn't work either, the text would need to be also an image. – Tudor Ravoiu Apr 22 '13 at 11:59
  • So transform to SVG using javascript: http://stackoverflow.com/questions/5534128/converting-html-to-svg-using-javascript-jquery – Richard Apr 22 '13 at 12:07