soy Kseso y esto EsCSS

Palíndromos y bifrontes autoexplicados con "animation" Css

¿Jugamos a explicar con ejemplos y sólo con los ejemplos qué es un palíndromo o un bifronte? Y ¿qué tal hacerlo sólo con puro Css?

Palíndromos y bifrontes autoexplicados con "animation" Css

Por Kseso ✎ 0

¿Que no es posible manipular letra a letra o palabra a palabra con Css sin tener que añadir marcado extra? Bueno, todo depende de qué se quiera lograr y de las propiedades elegidas.

Si tienes que explicar qué es un palíndromo o un bifronte quizás lo mejor sea poner ejemplos para verlo en vivo.

Pero con todo y con eso, vas a necesitar seguir dando explicaciones. Así que ¿qué tal si vamos un paso más allá y dejamos que sean esos mismos ejemplos los que se expliquen solos?

En el caso de los bifrontes tendremos que hacer que la primera letra sea la última, la segunda la penúltima... y así sucesivamente.

Si lo intentamos con algún tipo de transform (como alguna rotación) nos encontraremos con las letras reflejadas: vistas en espejo.

Así que la mejor forma es separar cada letra de su predecesora... un valor negativo: letter-spacing: -Xpx

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

Para los despistados: los tres últimos son en inglés, por aquello del imperio.

Para los palíndromos he suprimido los espacios en blanco. Así que añádelos tú donde corresponda para que cada uno mantenga su sentido.

Como curiosidad, al intentar jugar con palabras separadas para alterar el orden en el que aparecen me he topado con un pequeño inconveniente. Al sobrepasar cierto valor en negativo de word-spacing desaparecen por momentos. Con tiempo a ver si hallo la causa.

Aplicación a un caso práctico

Un poquito más tarde de publicar este artículo y tomando como base del juego la propiedad letter-spacing ocurrió uno de esos escasos milagros: se me encendió la bombilla y encontré a qué aplicarlo.

Menú deslizante letra a letra

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 Don Kseso Kseso

Comentarios: 0

EsCss RSS del Blog RSSS Comentarios ᛯ Licencia Beerware Humans.txt ᛯ Diseño por Kseso SiteMap