soy Kseso y esto EsCSS

Puede que no necesites Javascript... ni procesadores CSS

Recopilación de ejemplos propios realizados sólo con puro CSS y que en la mayoría de ocasiones son resueltos utilizando javascript o alguna de sus librerías como poco.

Puede que no necesites Javascript... ni procesadores CSS

·Por Kseso ✎ 3
You might not need javascript... nor CSS pre-processors

Hace unos días Una Kravets publicaba You might not need JavaScript. Una pequeña recopilación de casos resueltos con puro CSS sin necesidad de recurrir a Javascript.

Me gustó y me di cuenta que podría hacer la versión española usando lo publicado en este blog a lo largo del tiempo. Posíblemente no necesites usar javascript ni tampoco precesadores CSS... a mi manera podría ser el título en versión española y extendida de este artículo.

Aunque a poco que lo piense la verdadera versión extendida sería el propio blog prácticamente al completo. Pues la mayoría de artículos van de eso: de "hacer cosas" sólo con CSS.

Que como casi siempre resalto: el que se pueda hacer no quiere decir que debas hacerlo, pero qué menos que si andas por este mundillo de la web sepas que es posible.

Ya está en ti evaluar y sopesar si es acertado usar la versión "puro CSS" o apoyarte en otros lenguajes, como javascript o hasta incluso librerías tipo jQuery.

Así que permíteme que haga una selección de casos realizados con sólo CSS y que normalmente se ven resueltos con ayuda de javascrit. Algunos tienen ya su tiempo por lo que quizás su marcado HTML o la "técnica CSS" empleada en ellos hoy sería distinta.

Tabs o pestañas

El artículo en el blog: Navegación por pestañas (tabs) puro Css con :checked

El ejemplo de pestañas en puro CSS tiene la particularidad de usar un elemento deslizante para indicar cuál está activa.

See the Pen just another Css tabs (:checked) by Kseso (@Kseso) on CodePen.

Nota del Autor: estas demos son de 2013, en ellas uso iconos de weloveiconfonts.com que no verás en los pens embutidos en el blog por usar un protocolo no seguro: http://.

Basada en el uso de :checked con las label´s separadas de su input permite colocar las pestañas en cualquiera de los cuatro bordes:

<section> <input type="radio"... /> <!-- tantos inputs como pestañas se necesiten --> <nav><!-- las pestañas o tabs --> <label for="... </label> <!-- tantas labels como pestañas se necesiten --> </nav> <article class='uno'> <!-- el contenido a mostrar al seleccionar su tab --> </article> <article class='dos'> <!-- tantos `articles´ como pestañas --> ... </section>

El CSS asociado al pen anterior más significativo y comentado es el siguiente:

section { background: #FF7361; width: 80vw; max-width: 40rem; min-width: 390px; height: 24rem; margin: 2rem auto; padding-right: 5rem; box-shadow: 0 0 3px rgba(0,0,0,.4); } article { height: 100%; position: absolute; left: 0; top: 0; right: 5rem;/* Hacemos sitio a la derecha para las pestañas */ overflow: auto; transition: .7s; transform: scale(0);/* Para ocultar el contenido */ transform-origin: 0% 0%; transition-delay: .1s; } /* Para mostrar cada `article´ al :checked de su input asociado: */ #profile:checked ~ .uno, #settings:checked ~ .dos, #posts:checked ~ .tres, #books:checked ~ .cuatro { transform: scale(1); transition-delay: .4s; }

Modificando ligéramente el código anterior podemos situar las pestañas en la parte superior o en cualquier otro lado.

Dobles pestañas

Una vez que conoces el secreto del :checked o del :target sin salto para construir sistemas clásicos de pestañas o acordeones se puede rizar el rizo un poco más.

Nada impide usar estas técnicas para un sistema de doble selección. Esto es, tener dos conjuntos de pestañas para mostrar información por doble checked o por la combinación de ambos grupos.

Un ejemplo sería la demo del artículo The Css Mentalist.

Pero podemos ir un poco más allá y usar "novedades" como los filtros CSS para mostrar tres productos en siete colores diferentes usando sólo una imagen por producto:

See the Pen Stock: 1 pic for 100 references by Kseso (@Kseso) on CodePen.

Otros ejemplos de este uso de el doble checked podrían ser el Double checked pure Css

Otro uso creativo de la técnica del :checked es utilizarlo para filtrar información. En el artículo de 2013 "Filtrar resultados con Css para emular consultas a bases de datos" lo tienes explicado en detalle.

Pestañas sin marcado HTML para separar contenido

Artículo en el blog: Multicolumnas Css en pestañas

Una constante omnipresente en los sistemas de pestañas o tabs es la obligación de encerrar cada bloque de información en un contenedor padre y actuar sobre él para mostrar y ocultar el contenido.

Sin embargo es posible evitarse ese marcado si se utilizan las multicolumnas CSS junto a la técnica del :checked como puedes ver en este ejemplo:

<section> <input type="radio" id="col-1" name="tractor" checked="checked" /> <input type="radio" id="col-2" name="tractor" /> <!-- tantos como pestañas --> <nav> <label for='col-1'>Col-1</label> <label for='col-2'>Col-2</label> <!-- tantas como pestañas --> </nav> <article> <!-- Todo el contenido sin separar en bloques --> </article> </section>

See the Pen Multicolumns Css on slide by Kseso (@Kseso) on CodePen.

section { background: #fff; width: 45vw; max-width: 600px; min-width: 400px; margin: 3vh auto 0; overflow: hidden; border: 1px solid #aaa; box-shadow: 0 0 2px rgba(0,0,0,.3); } article { background: #fff; margin: 1rem 0 0; /* Mágico Css */ width: 600%; columns: 6; column-gap: 0; transition: .7s steps(6); }

Las declaraciones relevantes del Css previo las tienes precedidas por el comentario:

  • Width: 600%; La anchura será el 100% de su padre multiplicado por el número de slaides que deseemos tener.
  • columns: 6; El numero de columnas, 6 en la demo, que como ves coincide con el valor anterior.
  • column-gap: 0; La separación entre columnas. En mi caso opté por un valor de cero. El aire al texto en los laterales se lo asigno a los párrafos.
  • transition: .7s steps(6); Animamos un poco el paso de un bloque a otro. Y en vez de hacerlo lineal lo realizamos a saltitos steps(6)

Tablas imposibles con CSS

Un elemento fuente de quebrantos en su manejo actual son las tablas. Presentan una serie de desafíos que en algunos casos hoy en día aún no hay una solución universal satisfactoria y en la mayoría de las situaciones se termina recurriendo a engendros o su manejo con javascript como en este artículo de Furoya.

Tables & Responsive Times

Artículo en el blog: Tabla con scroll en Tbody y Thead fixed puro Css

Tabla RWD con encabezado fijo y scroll al cuerpo (tbody) sin necesidad de añadir elementos extras en el marcado Html o de tener que descomponer la tabla. Sólo con Css.

See the Pen Rwd table: Thead fixed & Tbody scrolled by Kseso (@Kseso) on CodePen.

Para lograrlo sólo se necesita utilizar los atributos de autor data-* en el HTML:

<table> <thead> <tr> <th data-campo='Nick'>Nick</th> <th data-campo='Mail'>Mail</th> <th data-campo='Web'>Web</th> <th data-campo='Twitter'>Twitter</th> <th data-campo='Id'>Id</th> </tr> </thead> <tbody> <tr> <td data-campo='Nick'>Fulano</td> . . . <!-- resto de la tabla --> <table>

Y en CSS jugar con la propiedad display y sus valores para los distintos elementos hijos de la tabla con ayuda de la oportuna @media query.

From Table to Tabs

Artículo en el blog: From Table to Tabs

Con un marcado a propósito y el uso de la misma técnica del :checked es posible hacer que un elemento table se muestre en pantalla como un sistema de pestañas o tabs.

<input class='hide' type="radio" id="uno" name="tractor" /> <!- tantos inputs como filas o pestañas sean necesarias --> <table> <caption>From Table to Tabs</caption> <tbody> <tr> <th><label for='uno' data-page='slide 1'>Opción 1</label></th> <td> <!-- contenido a mostrar --> </td> </tr> <tr> <!-- resto del contenido de la tabla --> </tr> </tbody> </table>

See the Pen From Table to Tabs by Kseso (@Kseso) on CodePen.

Todo el secreto está en cambiar el valor de la propiedad display que por defecto tienen asociado los elementos table y sus hijos

} tr { display: block; position: static;/* Ya sabes qué hacen sus hijos */ width: 100%; } th { display: block; width: 25%; } } label { display: block; } td { position: absolute; top: 0; left: 25%; right: 0; bottom: 0; padding: 1rem; transform-origin: center; animation: novertd 1.2s cubic-bezier(0.5,0.2,0.48,1) forwards; overflow: auto; z-index: 2; }

Galerías de imágenes

Una típica realización, no exenta de críticas, es el slider o galería animada. Normalmente se ven implementadas con javascript mediante, cuando no con ayuda de librerías y varios script más.

En el blog no es que puedas encontrar cientos, pero sí varias decenas de ellas con funcionamiento y técnicas dispares. Así que para que veas que es posible hacerlas sin necesidad de javascript he seleccionado 2 de lo más dispares.

Paso automático o manual

Artículo en el blog: Galería Automanual-K

En esta galería el paso de las diapositivas es automático mientras el usuario no realiza ninguna acción. La transición se para al hacer :hover sobre ella y el visitante tiene la posibilidad de seleccionar/ver cualquiera de ellas.

See the Pen automanual-K gallery by Kseso (@Kseso) on CodePen.

En cuanto al marcado HTML no deja de ser un contenedor general en el que estás colocadas los distintos frames o diapositivas además de los input´s y sus label´s que son utilizados para el control manual por el usuario.

La parte "automática" está encomendada a una animación CSS:

.visor { height: 100%; width: 500%; position: absolute; top: 0; transition: .5s linear; animation: deslizante 20s ease-out 0s backwards infinite alternate-reverse; } @keyframes deslizante { 0% {left: 0%; } 15% {left: 0%; } 20% {left: -100%; } 35% {left: -100%; } 40% {left: -200%; } 55% {left: -200%; } 60% {left: -300%; } 75% {left: -300%; } 80% {left: -400%; } 95% {left: -400%; } 100% {left: 0; } }

Respecto a la parte manual lo más significativo es en primer lugar parar la animación automática al entrar el cursor en ella con la propiedad animation-play-state y habilitar la navegación manual:

header .visor { animation-play-state: running; } header:hover .visor { animation-play-state: paused; } header:hover input[id='uno']:checked ~ .visor {left: 0;animation: ninguna;} header:hover input[id='dos']:checked ~ .visor {left: -100%;animation: ninguna;} header:hover input[id='tres']:checked ~ .visor {left: -200%;animation: ninguna;} header:hover input[id='cuatro']:checked ~ .visor {left: -300%;animation: ninguna;} header:hover input[id='cinco']:checked ~ .visor {left: -400%;animation: ninguna;}

Galería intercambiando posiciones

Artículo en el blog: Simple rwd gallery powered by Css

Esta es la típica galería de imágenes con miniaturas. La particularidad está en que sólo usa una imagen como fondo para mostrar en la miniatura y a tamaño grande por cada diapositiva y el baile que se traen las imágenes al pasar de miniatura a verse en grande dependiendo si picas la miniatura superior, la inferior o la que está en el centro.

See the Pen Powered by Css & by Kseso (@Kseso) on CodePen.

El CSS que hace posible este intercambio de posiciones sólo tiene como secreto un poco de lógica de combinaciones. Nota que en el pen están separados por cada una de los casos para facilitar su compresión cuando fue realizado (2014). LO lógico si se usase con otro fin que el divulgativo sería agruparlos:

#una:checked ~ section figure:nth-child(1), #dole:checked ~ section figure:nth-child(2), #tele:checked ~ section figure:nth-child(3), #catele:checked ~ section figure:nth-child(4) { width: 75%; height: 100%; left: -6px; top:0; z-index: 1; } #una:checked ~ section figure:nth-child(2), #dole:checked ~ section figure:nth-child(3), #tele:checked ~ section figure:nth-child(4), #catele:checked ~ section figure:nth-child(1) { top: -6px; } #una:checked ~ section figure:nth-child(3), #dole:checked ~ section figure:nth-child(4), #tele:checked ~ section figure:nth-child(1), #catele:checked ~ section figure:nth-child(2) { top: calc(100% / 3); } #una:checked ~ section figure:nth-child(4), #dole:checked ~ section figure:nth-child(1), #tele:checked ~ section figure:nth-child(2), #catele:checked ~ section figure:nth-child(3) { top: calc(100% / 1.5 + 6px); }

El resto del código creo que a estas alturas es más que comprensible a poco que lo observes.

Modales

¡Benditos modales! ¡Qué mal uso y abuso se ha hecho y se hace de él

Dejando de lado y sin entrar en cuestiones de mal uso y abuso de este tipo de realización del tipo modal es posible llevarlo a otro nivel sin necesidad de emplear javascript en su realización. Como por ejemplo las dos demos.

De icono a pantalla completa

Artículo en el blog: De icono a pantalla completa. Estudio para una landing page

See the Pen From icon to full in pure Css by Kseso (@Kseso) on CodePen.

En esta demo tengo que hacerte la misma advertencia por ser los iconos una fuente tipográfica desde weloveiconfonts.com. Mejor que lo veas diréctamente en codepen. Hoy no me cabe duda que hubiese empleado iconos en formato SVG.

Esta demo que fue concebida allá por 2013 y realizado el pen en Enero del 14 fue utilizada en la página de la artista bonaerense Paola Magariños Autos con Arte

Modal temporizada

Los ejemplos de ventanas madales realizados en puro CSS normalmente se muestran tras una intervención del usuario como en el ejemplo anterior. Y su cierre también precisa de alguna otra acción.

Sin embargo es totalmente posible lograr que se muestren de forma automática (por ejemplo tras cargar la página) y que su ocultación tampoco necesite acción por parte del usuario.

See the Pen Timed Modal pure Css by Kseso (@Kseso) on CodePen.

Todo se reduce a usar dos input´s: uno con el atributo checked que es el que dispara el modal al cargar la página (la animación tiene un pequeño retraso para asegurarse que no se adelante) y el segundo para que los usuarios poco amigos de ellas (como yo) puedan cerrarla:

<input type='radio' id='open' name='tractor' checked='checked' /> <input type='radio' id='close' name='tractor' /> <h1>Never, never, never<br/> put a modal over your content</h1> <div class='modal'> <label for='close'>× cerrar</label> <article> <!-- contenido del modal --> <article> <div>

Y dejar que el CSS asociado haga su magia:

.modal { background: rgba(255,255,255,.8); position: fixed; top:0;left:0;bottom:0;right:0; margin: auto; width: 40vw; min-width: 200px; max-width: 350px; height: 60vh; min-height: 200px; border-top: 10px solid #FFA43B; pointer-events: none; animation: hidden 2s forwards; box-shadow: 0 0 0 50rem rgba(0,0,0,.7) } #open:checked ~ .modal { pointer-events: auto; animation: show 12s forwards; } @keyframes show { 0% {transform: scale(0);} 10% {transform: scale(0);} 30% {transform: scale(1);} 95% {transform: scale(1);} 100% {transform: scale(0);} } @keyframes hidden { 60% { top:0;left:0;bottom:0;right:0; transform: scale(1) skewx(25deg); opacity: 1; border-radius: 0; } 100% { top:-200%;left:0;bottom:0;right:-200%; transform: scale(0) skewx(-45deg); opacity: 0; border-radius: 0 0 0 100px; } }

Pero por favor, uses la técnica que uses, procura que tus modales no sean demasiado intrusivas y molestas para el usuario. Por la cuenta que te tiene ;-)

Tanto para los modales como los lightbox todo se reduce a tener un elemento oculto y mostrarlo con position: fixed e un tamaño algo menor al viewport y utilizar su pseudoelemento ::before con un valor en su canal alfa oportuno (o jugando con opacity) para tener el efecto traslúcido típico

Lightbox

Artículo en el blog:Esto es todo, amigos. Un lightbox de dibujos animados

El lightbox no deja de ser una pequeña variante de las ventanas modales (o al revés). De hecho el primer ejemplo del modal que he elegido (De icono a pantalla completa) bien podría estar incluido en el apartado del "lightbox".

Sim embargo he preferido mostrarte este otro ejemplo porque es más evidente y por la temática de la demo ;-)

See the Pen Lightbox pure Css. by Kseso (@Kseso) on CodePen.

En este pen también uso icon fonts, así que para verlo en todo su esplendor mejor lo ves a pantalla completa en codepen.

Creo que todas las explicaciones que puedas necesitar las encuentras en el artículo de 2013 sobre él.

impoCSSibles en textos sin etiquetar

Otro campo donde CSS aún presenta lagunas e el manejo de texto sin etiquetar. Esto es, sin un marcado HTML al efecto que combierta una parte de él en elemento HTML (como por ejemplo usando multitud de span´s) CSS no puede aplicar estilos excepto con los pseudos first-letter y su relativamente nueva propiedad initial-letter, first-line y la separación de letras y palabras.

Elipsis y textos truncados con Css en cualquier línea

Artículo en el blog: Text-overflow:ellipsis en cualquier línea elegida a voluntad

Css define la propiedad text-overflow con el valor ellipsis para limitar el número de líneas generadas y añadir los tres puntos suspensivos para indicar que hay más texto no mostrados.

Sin embargo tiene una serie de particularidades que hay que tener presentes en su uso. Entre otras:

  • Hay que complementarla con overflow: hidden;
  • Hay que impedir la creación de nuevas líneas: white-space: nowrap;
  • Y la más limitante: sólo muestra una única línea. No es posible generar los puntos suspensivos en otra línea elegida a voluntad que no sea al final de la primera.

Esta última limitación del Css estándar puede ser superada por varias vías. Entre otras con propiedades privativas (no es Css) de algún navegador o con un poco de imaginación.

See the Pen Text-overflow:ellipsis in any line by Kseso (@Kseso) on CodePen.

article { background: #FFEEAA; width:/*la necesaria*/; margin: 2rem auto;/*no influye*/ line-height: 1.5rem; } p { max-height: 6rem;/*line-height por nº de líneas a mostrar*/ overflow: hidden; text-align: justify; } p::before { content:'...'; position: absolute; top: 4.5rem;/*max-height menos 1 line-height*/ right: 0; } p:before { content:'...'; position: absolute; top: 4.5rem; right: 0; } p::after { /* para evitar que se muestren los ... si la última línea está incompleta*/ content: ''; background: inherit; position: absolute; right: 0; width: 1rem; height: 1.5rem; z-index: 1; }

Reverse ellipsis multiline

Artículo en el blog: mostrar las últimas líneas de texto con ellipsis al inicio

O de cómo recortar un texto largo para mostrar las últimas líneas de él (en vez de las iniciales) con ellipsis (los tres puntos...) al inicio de la primera línea mostrada en vez de al final como es lo típico.

See the Pen Reverse Ellipsis multiline by Kseso (@Kseso) on CodePen.

Todo se reduce a utilizar la técnica del caso anterior de la elipsis en cualquier línea y usar una transformación en el padre del párrafo y contrarrestarla en sus hijos:

article { transform: rotate(180deg); } article * { transform: rotate(-180deg); }

Una palabra en cada línea

Artículo en el blog: Juegos tipográficos: Una palabra por línea en puro Css

Demo simple en codepen: one word by line pure Css

Utilizando CSS no podemos controlar cada palabra de un texto de forma independiente. Así que si ienes un texto y necesitas que se muestre con una palabra por línea (esto es, insertar un salto de línea después de cada palabra) puedes recurrir a llenar todo el HTML de <br />´s o <span>´s o utilizar la siguiente técnica:

.una_palabra_en_cada_linea { word-spacing: 100vw; }

Y voilá. No se necesita más. Con la ventaja añadida de que aunque la suma de word-spacing: 100vw; y la longitud de la palabra siempre será mayor que el viewport no fuerza la aparición del scroll.

Y con muy poquito CSS más (y de lo más básico) se puede llevar este efecto a otro nivel como es crear multicolumnas de una sóla palabra y que cada una tenga su fondo y bordes:

See the Pen MwjajX by Kseso (@Kseso) on CodePen.

Para lograr los tres efectos, columnas, 1 palabra en cada linea y fondos y bordes en cada palabra es necesario contar con dos elementos. El primero de bloque (en la demo el h1) para tener las columnas y el segundo de línea(en la demo el span) para los fondos y bordes:

<h1><span>Title: one word per each line two cols</span></h1>

h1 { font-size: 12vh; font-weight: 100; width: 100%; letter-spacing: 1vw; text-align: center; text-transform: uppercase; /* el pase de la varita mágica */ columns: 2; word-spacing: 100vw; } h1 span { background: rgba(0,32,122,0.7); padding: 0 1rem; border-left: 1rem solid rgba(240,0,255,0.8); border-right: 1rem solid rgba(240,0,255,0.8); line-height: 1.5; border-radius: 1rem; /* el pase de la varita mágica */ box-decoration-break: clone; }

Efectos letra a letra

Otro elemento sobre el que aplicar la creatividad e ingenio son los caracteres textuales o letras para manejarlos de uno en uno.

Con el paso del tiempo son varios los artículos del blog basados en esta premisa.

Palíndromos y bifrontes autoexplicados

Artículo en el blog: Palíndromos y bifrontes autoexplicados con "animation" Css

Una pena que no funcione la separacion de 100vw entre letras de un elemento como sí sucede con las palabras. Llegados a cierto valor el texto desaparece.

Pero usando un valor negativo para letter-spacing y una pequeña transformación CSS el efecto es de lo más vistoso. Por ejemplo te puedes ahorrar explicar qué son los Palíndromos y Bifrontes y dejar que sea ellos mismos quienes lo hagan:

See the Pen Palíndromos y bifrontes animados by Kseso (@Kseso) on CodePen.

Menú deslizante letra a letra

Artículo en el blog: Menú deslizante letra a letra y opción tras opción

La demo previa no deja de ser un mero divertimento. Pero en base a ella y con poco más se pueden lograr menús en los que el texto de sus opciones aparecen y se ocultan letra a letra. Como en el siguiente ejemplo:

See the Pen Sliding menu by Kseso (@Kseso) on CodePen.

.menu li { letter-spacing: -30rem; text-indent: -3rem; transition: 1s cubic-bezier(1,.1,.5,1.1); } #for_menu:checked ~ nav li { text-indent: 3rem; letter-spacing: .1rem; transition-timing-function: cubic-bezier(.8,-.9,.1,1.2); } /*Desfases inversos al mostrar y ocultar cada item del menú */ li:nth-child(6) { transition-delay:0s } li:nth-child(5) { transition-delay:.4s } li:nth-child(4) { transition-delay:.8s } /* Resto de ítems */ #for_menu:checked ~ nav li:nth-child(1) { transition-delay:0s } #for_menu:checked ~ nav li:nth-child(2) { transition-delay:.4s } #for_menu:checked ~ nav li:nth-child(3) { transition-delay:.8s } /* Resto de ítems */

Carga de web letra a letra y línea tras línea

Artículo en el blog: Carga de web línea a línea puro Css

Y para terminar, porque en algún momento he de hacerlo, con esta versión reducida (ya te dije al inicio que la extendida es el propio blog ;-) de casos en los que no se necesita de javascript en su realización un viejo divertimento.

See the Pen Añoranza by Kseso (@Kseso) on CodePen.

Css no permite un control en la carga para hacerla carácter a carácter y línea tras línea. Así que toca imaginarse cómo emularlo.

Lo que sigue es un explicación breve. Recuerda que la versión completa la tienes en este el artículo del blog

Dejamos pues que la carga se realice como debe y lo que hacemos es ocultar todo el contenido con ayuda de un pseudoelemento, en la demo recurro a html::after, posicionado y dimensionado, que será el que vaya dejando ver línea tras línea (revelado vertical). Sólo cubro "la ventana", con independencia de que haya o no scroll. "Lo que no se ve no existe", dicen xD ;-)

html:after { content: ''; background: #000084;/*el mismo color que el bg del html*/ position: fixed; bottom:-4.5vh; left:0; width: 100%; height: 100vh; }

Quizás te llame la atención los valores declarados en height y bottom. Estoy dejando un espacio en la parte superior de la ventana sin cubrir. Casualmente se corresponde con el primer renglón o línea.

Para ocultar esa primera línea y poder mostrar progresivamente "carácter tras carácter" o el revelado horizontal de cada línea recurro de nuevo a un pseudoelemento:

html:before { content: ''; background: #000084; position: absolute; top:0; left:0; width: 100%; border-left: 3vh solid #fff;/*el cursor intermitente*/ height: 4.5vh;/*La altura sin cubrir por html:after*/ z-index: 5; }

Revelado vertical: Para revelar cada línea es sencillo. Sólo necesitamos ir acortando la altura del html:after de forma animada:

html:after { animation: after 1 steps(22) 22s forwards; } @keyframes after { 0%{height: 100vh;} 100%{height: 0} }

Carácter a carácter en cada línea: Con lo anterior mostraríamos cada nueva línea de golpe. Así que para poder emular el revelado "carácter a carácter" animamos el otro pseudoelemento del html. Para ello son necesarias dos animaciones. Una que acorte su anchura y otra para que eso lo haga en todas y cada una de las líneas que se muestran en la ventana:

html:before { animation: ancho 22 linear 1s forwards, alto 1 steps(22) 22s; } @keyframes ancho { 0% {left:0} 100% {left: 100vw;} } @keyframes alto { 0% {top:0;} 100% {top: 100vh} }

Lo que CSS no da la imaginación lo presta: porque si sólo con CSS no se puede hacer nada impide que lo puedas emular.

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