Palíndromos y bifrontes autoexplicados con "animation" Css 4.11.15
¿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
¿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.
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