Sé que solo estaban pensando para ustedes mismos: hombre, espero que Chris publique un artículo súper nerd hoy con alguna técnica casi inútil que, si hablara en público, confirmaría el hecho de que no voy a tener sexo en el corto plazo. ¡No te preocupes, te cubro las espaldas! Echa un vistazo al generador de mensajes secretos CSS.
Usarlo es (espero) bastante sencillo. Hace clic en algunas letras, luego esas son las letras que se revelan en secreto cuando se selecciona el texto.
Hay algunas cosas interesantes que vale la pena mencionar, así que lo haremos en este artículo.
la gran idea
El concepto de empoderamiento aquí es el hecho de que puede cambiar el color de selección de texto (y el color de fondo) en los navegadores modernos. WebKit y Chrome usan ::selection { } y Mozilla usa ::-moz-selection { }.
En nuestro ejemplo, envolvemos cada letra de un gran bloque de texto en un . Luego tenemos un pequeño sistema de interfaz de usuario para marcar letras individuales. Todo lo que hace es alternar un nombre de clase específico en esos tramos. Los intervalos no marcados tienen un color y un color de fondo de color blanco, lo que significa que desaparecen efectivamente cuando se seleccionan. Los tramos marcados cambian de color. Entonces, cuando se resalta todo el bloque, las letras marcadas en secreto se revelan.
Para que conste, realmente no hay razón por la que se presenta en una cuadrícula, aparte de que es un poco más fácil hacer clic en las letras y se ve más como un mensaje secreto.
jQuery
Como todo lo elegante que hacemos aquí, usa jQuery. No voy a hacer un volcado de código. Si quieres verlo completo, son solo 85 líneas completamente comentadas.
He hecho un par de otras cosas de hacer clic en la cuadrícula en el pasado y una cosa que siempre quise descubrir (pero nunca pude) fue una forma de hacer clic y arrastrar para alternar celdas. Una forma finalmente se me ocurrió…
Enlacé un evento de “mousedown” a la cuadrícula misma. Cuando eso se dispare, configure algunos datos para indicar que el mouse está actualmente hacia abajo. Por el contrario, en “mouseup”, configure esos datos para indicar que el mouse ahora está arriba. Inútil por sí mismo, pero luego podemos adjuntar un evento “mouseenter” a todas las celdas. Si el mouse está “abajo” cuando ocurre ese evento de desplazamiento, haga el mismo cambio que sucedería con un clic. Por el momento, esto solo funciona para encender celdas (no para borrar en masa), pero probablemente podría modificarse para que también lo haga.
$("#grid")
// clicking on a cell toggles the selected state in the grid and the demo
.delegate("span", "click", function() {
// get the first class only (the position), otherwise would fail when it has that plus "selected"
attrTest = $(this).attr("class").split(" ")[0];
$(this).toggleClass("selected");
$("#secret-message ." + attrTest).toggleClass("selected");
})
// if the mouse is currently pressed, set some data so we can check for that
.bind("mousedown", function() {
$(this).data("mouseIsDown", true)
})
// when the mouse comes back up, change data to say so
.bind("mouseup", function() {
$(this).data("mouseIsDown", false)
})
// allows the "drawing by dragging"...
.delegate("span", "mouseenter", function() {
// which is only allowed while the mouse is pressed down
if ($("#grid").data("mouseIsDown")) {
attrTest = $(this).attr("class");
$(this).addClass("selected");
$("#secret-message ." + attrTest).toggleClass("selected");
}
});¿WebKit no permite fondos “ninguno” para la selección de texto?
Para la cuadrícula, debido a la capacidad de hacer clic y arrastrar, quería desactivar por completo el resaltado en esa área (es simplemente molesto mientras intenta “dibujar”). Configuré el color de selección de texto de la manera estándar, para ambos motores de renderizado. Firefox lo respeta, Opera lo respeta, pero ninguno de los grandes navegadores WebKit lo hará.
#grid-area ::-moz-selection { background: none; } /* Works */
#grid-area ::selection { background: none; } /* Doesn't Work */Esto puede ser algún tipo de problema de prevención de mala usabilidad por parte de WebKit, pero me parece más un error. Si escribo CSS específicamente para eliminar el color de fondo en la selección de texto, eso es lo que quiero.