¿Es posible crear una especie de "máscara invertida" horizontal en CSS?

Si te refieres a algo como esto:

Editar: aquí hay una forma que solo requiere un elemento HTML y, por lo tanto, no será extraño cuando lo lean clientes que no usan estilos CSS como motores de búsqueda, lectores de pantalla, RSS, aplicaciones 'sin estilo', etc. (gracias a Dominic por sugerir probar :beforey :after).

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

El código importante ( agregue sus colores a esto ):

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

El atributo HTML puede ser cualquier cosa: lo usé data-textporque es descriptivo y evita efectos secundarios no deseados (por ejemplo, podría usar titlepero crearía mouseovers en algunos navegadores).

Si desea display:block;en el .topelemento principal ( ), agregue algo como width: 100%;el .bottomelemento interno ( ) para que lo llene.

Si está utilizando jQuery, puede aplicar este estilo a cualquier elemento con mucha facilidad, evitando tener que escribir manualmente el data-textbit duplicado:

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

Demostración de eso más algunas otras cosas como líneas múltiples, relleno

Sorprendentemente, es posible, aunque solo lo recomendaría si su sitio web tiene que ver con el impacto visual y la semántica del código no importa, además, probablemente no será muy consistente en los navegadores más antiguos.

El resultado es:

Esta no es una solución bonita, y apuesto a que no es la única que existe, pero hace lo que quieres.

Requiere que tenga dos instancias del texto, y usando posicionamiento absoluto y algunas matemáticas simples, puede crear este efecto.

Entonces, si tenemos un contenedor div, y dentro de ese dos más divs, y dentro de cada uno de ellos una instancia del texto, puede usar la siguiente HTMLestructura y CSSpropiedades para lograr esto:

<div class="container">
    <div class="black">
       <div class="text">Invert</div>
    </div>
    <div class="white">
       <div class="text">Invert</div>
    </div>
</div>

.container{position:relative; width:200px; height:100px; display:block; margin:0px; padding:0px; }

.black, .white{position:absolute; left:0px; background:#000; width:200px; height:50px; margin:0px; padding:0px; overflow:hidden; }

.black{top:0px; }

.white{bottom:0px; background:#fff; }

.text{position:absolute; color:#fff; font-size:70px; padding:0px; }

.black .text{bottom:-40px; }

.white .text{top:-40px; color:#000; }

Aquí hay un JSFiddle del resultado. :)

También hay una propiedad CSS3 , solo compatible con webkit, que invierte los colores:

image {
 -webkit-filter: invert(100%);  
}

Y hay un HTML5 Canvas Invert , aquí hay un ejemplo y el código completo . Recorre todos los píxeles de una imagen e invierte el rojo, el verde y el azul restando cada componente del valor de color máximo, 255.

Ambas soluciones aún requerirían 2 imágenes y posicionamiento CSS para ellas. Como la compatibilidad no es muy buena, definitivamente elegiría una de las otras respuestas :)