soy Kseso y esto EsCSS

Secuencias progresivas en Transformaciones y otras propiedades Css 12.3.15

Es tu cabeza y no tu software el que te facilita el trabajo. Nada como aprovecharse de algunas particularidades sobre la herencia y/o valores iniciales de algunas propiedades para ahorrarnos trabajo.

Secuencias progresivas en Transformaciones y otras propiedades Css

La propagación de los valores de padres a hijos es un aspecto que, aunque sencillo, da lugar a confusiones, malentendidos o asunciones no del todo exactas.

Un par de datos claves en las tablas del W3c sobre cada propiedad es la información relativa a su herencia (inherited) y sobre su valor inicial y el computado final.

Sobre esta cuestión hablaba en detalle hace un tiempo en el artículo "Desheredando opacity" para explicar las particularidades de esa propiedad.

Entre aquellas propiedades que no son heredadas por los hijos, hay dos tipos:

Unas cuyo valor computado (el resultante final aplicado al padre) no influye en el valor inicial del hijo. Como por ejemplo margin. El margen inicial y base del cálculo para el del hijo no depende del que tenga declarado el padre. Así, si declaras un margen del 5% al padre, la base del cómputo es la anchura de su ancestro. Y si al hijo le declaras un margen del 10% el resultado final es totalmente independiente del margen de su padre. Vuelve a la misma base para el cálculo: la anchura de su padre y en ausencia de declaración será cero o el valor que por defecto, naturaleza del elemento o práctica del navegador le corresponda.
Para otras sin embargo sí es determinante el valor computado de la propiedad del padre. Por ejemplo, y de nuevo, opacity. El valor base para calcular el valor final del hijo (si la tiene declarado) es el valor computado (o final) del padre. Así, si declaramos expresamente al padre, al hijo y al nieto opacity: .5 el valor final o computado de cada uno será igual al valor inicial multiplicado por valor declarado. Padre: 1 * 0.5 = 0.5 | Hijo: 0.5 * 0.5 = 0.25 | Nieto: 0.25 * 0.5 = 0.125

Valores de las transformaciones

La mayoría de las propiedades del grupo de transform se comportan de la segunda forma. No se heredan pero el valor final del padre es el inicial del hijo.

Esta es una particularidad que en determinado momento puede ser útil para simplificar y hacer más fácil nueelstro trabajo. Sólo es cuestión de pararse a pensar un poco antes empezar a hacer nada.

Transformaciones uniformes y secuenciales de elementos

Supongamos que tienes N elementos (una frase por ejemplo) que quieres colocar formando un círculo. Quizás tu idea inicial sea colocar cada letra en un span y crear tantas reglas Css como caracteres tengas para hacer la doble rotación: colocarlas en su lugar correspondiente en el perímetro del círculo y girarla sobre su propio eje si quieres conservar la orientación al centro del círculo.

Trabajo tedioso y arduo y doblemente tedioso y arduo en caso de modificar el texto.

Sin embargo, si contamos con el detalle que exponía antes, podemos aprovecharnos de él para anidar (nested) cada span en los precedentes.

  <span>T
  <span>h
  <span>a'
  <span>s
  <span>-
  <span>A
  <span>l
  <span>l
  <span>,
  <span>F
  <span>o
  <span>l
  <span>k
  <span>s
  <span>-
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

Haciendo el marcado de esa forma sólo se necesita una regla Css para lograr el resultado deseado:


span {
  transform: rotate(24deg);
}

A cada span le aplicamos una rotación de 24 grados (360º divididos entre tantos span como tenemos más 1 -para la separación entre el último y el primero-). Y como el valor inicial para aplicar el giro de 24º es el que ya tiene cada uno por estar girado su padre se lograr una secuencia perfectamente homogénea y progresiva. En caso de variar el número de caracteres o querer que no rellenen los 360º (todo el círculo) sólo es necesario varías el valor de rotate.

Lo anterior, junto a un poco más de Css para lograr el resultado visual final, nos permiten construir sin necesidad de preprocesadores o cálculos complejos algo como el ejemplo de abajo:

See the Pen Circular Text pure Css by Kseso (@Kseso) on CodePen

Ver demo a full

Otros ejemplos

Basándonos en esta característica y construyendo de igual forma el marcado html podemos jugar para obtener resultados de los más variopinto. Por ejemplo, este juego con tipografías y formas.

En este juego Css o estudio sobre tipografías y transformaciones juego con el escalado scale() en X e Y y la traslación translate de cada letra para lograr las formas:

See the Pen Typographical plays by Kseso (@Kseso) on CodePen

Ver demo a full

Lo más seguro es que para los más veteranos y viejos conocedores de este blog y sus demos esta técnica no le es nueva. Entre otros muchos, yo ya la utilicé en algún que otro juego como:

La espiral logarítmica
En algún detalle de mi viejo reloj Casio.
En estos Gráficos circulares, lineales y de barras en puro Css

De todo esto, sólo necesitas quedarte con un detalle:

Es tu cabeza y no tu software el que te facilita el trabajo

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.