soy Kseso y esto EsCSS

The CSS matrix: writing-mode Reloaded

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

·Por Kseso ✎ 1
CSS matrix: writing-mode reload

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:

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.

'La Pastilla, Neo!

avatar del Editor del blog

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