Crear un estilo "redactado"/"apagón" en CSS?

Question

que quieren crear un estilo CSS que permitirá a mis autores escriben markup como esto:

On <span class="redacted">September, 10 2011</span> the special operations agent, 
<span class="redacted">John Smith</span>, on orders from his commanding 
officer, <span class="redacted">Captain Kirk</span>, terminated the well known 
terrorist <span class="redacted">Fred Flinstone</span>. 

Actualmente tengo un estilo como este que hace el trabajo de una manera muy sencilla forma de baja tecnología:

span.redacted { 
    color: black; 
    background-color: black; 
} 

Un requisito es que yo quiero que los espectadores sean capaces de resaltar el texto y ver el contenido real "detrás". Entonces, solo usar una imagen no funcionará.

En lugar de mi esquema actual de simplemente cambiar los colores de fondo del texto &, quiero que el "apagón" parezca realmente aplicado con un rotulador. Con bordes irregulares y otras cosas.

¿Alguna sugerencia sobre cómo se puede hacer esto? Realmente quiero mantener mi XHMTL lo más puro posible y poner tanto de esto en CSS como pueda.

[EDIT: Ejemplos de texto redactado]

Este artículo de Wikipedia ofrece varios ejemplos de texto redactado reales. El primer ejemplo es realmente duro (demasiado duro, creo). El segundo muestra una cantidad excesiva de redacción, pero se puede ver que el 'marcador' no es recto/limpio.

http://en.wikipedia.org/wiki/Sanitization_(classified_information)

me encontré con este ejemplo, así: una imagen de fondo (enlosables) en el elemento utilizando background-image: url('location-of-the-image.png'); que parece un rotulador

http://2.bp.blogspot.com/_mJPzxRaCL64/S4X6Zn0MPKI/AAAAAAAAJdw/vX4MYNdUyIk/s400/ishot-2064.jpg

Answer 1

No estoy seguro de si este es el efecto que buscas, pero simplemente mezclé un montón de estilos sutiles para hacer que pareciera que un marcador había tachado las palabras, mirando ligeramente "imperfecto":

demo (para Firefox): http://jsfiddle.net/vzC96/2/

Vas a tener que traducir esto en algo entre navegadores:

.redacted { 
    color: black; 
    background-color: black; 
    white-space:nowrap; 
    -moz-transform: rotate(.8deg) skewx(-12deg); 
    -moz-box-shadow:3px 0 2px #444; 
    border:1px dotted #555; 
    background: -moz-linear-gradient(180deg, #000, #222); 
} 

/* Add a few more selectors with slightly varying styles */ 
.redacted:first-child { 
    -moz-transform: rotate(-.8deg); 
} 
.redacted:first-child + .redacted { 
    -moz-transform: rotate(3deg); 
} 

/* "Highlighter" effect */ 
.redacted::-moz-selection { 
    background:#e6ff3f; 
} 

lo hace sesgar el texto en sí, así, pero está normalmente oculta para que Puede que no te importe

El white-space:nowrap; es lo que evitará que se rompan los tramos (pasar a una nueva línea).

Si desea ir a la ruta de la imagen y usar una sola imagen, puede aprovechar el background-size de CSS3 y estirarlo en todo el tramo.

Answer 2

SET.

Answer 3

Si lo haces por diversión en un foro o en algún texto de tu página, puedes usar el carácter 'BLOQUE COMPLETO' (U + 2588) Un ... y luego copiarlo y pegarlo en un oración ████████ para parecer material redactado.

Si eso te ayuda.