The CSS matrix: writing-mode Reloaded 5.11.15
El clásico salvapantallas del código verde de Matrix recreado en puro Css. En ti está tomar la píldora roja y contemplar la demo o elegir la azul y ver su código.
The CSS matrix: writing-mode Reloaded
Estas fechas de atrás he dedicado diversos artículos a los modos de escritura Css
. Y en especial a la escritura en vertical con la declaración writing-mode: vertical-rl
. Te recuerdo algunos:
- Modos de escritura Css y textos en vertical con writing-mode
- Una letra por línea sin marcado extra y menú horizontal con sus ítems verticales con writing-mode
En este último usaba la declaración writing-mode: vertical-rl
para conseguir textos en vertical, o lo que es lo mismo una letra en cada línea sin necesidad de destrozar el texto con un span
por cada letra. Y en base a ello en la segunda demo de las incluidas en el post construía un menú con sus opciones una al ladro de otras y el texto mostrado en escrito de arriba a abajo.
Pues hoy y como juego Css para explorar estas novedades Css
, utilizo esta misma técnica para recrear con puro Css una vieja realización creo que por todos conocida:
Salvapantallas de Matrix en puro Css
¿Quién no recuerda aquella escena de la película The Matrix en la que se mostraba su código fuente en pantalla? O los salvapantallas que surgieron emulándola
Bien, pues gracias a la declaración writing-mode: vertical-rl
es súmamente sencillo recrear el efecto sin nada más que Css. Bueno, y el traductor de Google para tener los caracteres apropiados xD
Eso y una sencilla animación Css para que el texto vaya cayendo.
Como es tan sencilla y las declaraciones que intervienen ya las hemos visto detenidamente en distintos artículos del blog, te dejo con la demo para que intentes descifrar y hackear al Arquitecto de Matrix.
¡Ah! No olvides tomate la pastilla para verla en todo su esplendor.
See the Pen CSS matrix: writing-mode Reloaded by Kseso (@Kseso) on CodePen.
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
Que divertido Kseso! Gracias! Se me ocurrieron varias ideas...
ResponderEliminar