Patrones de baldosas hidráulicas y su implementación en CSS
El modernismo en Barcelona no es solo de museo, está en bloques de viviendas, escaparates y carteles de hace cien años. La baldosa hidráulica es un suelo de cemento prensado, sin horno ni esmalte, que despegó en Cataluña desde la década de 1860 y alcanzó su punto álgido artístico con el Modernisme.
El truco del patrón reside en cuatro baldosas rotadas por una regla fija. Se reconstruyó una cuadrícula de 45 baldosas usando CSS Grid con 9 columnas de 1fr y un gap de 3px.
Se describen formas como Fan (un radial-gradient en una esquina), Lens (con border-radius en dos esquinas opuestas), Wedge (tres esquinas redondeadas), Star (un linear-gradient dividido en dos triángulos), Bloom (simétrico en todos los ejes) y Weave (un entramado de arcos y cuadrados).
Algunos patrones, como Weave, requieren bordes simétricos para que las formas de las baldosas adyacentes se fusionen y creen un patrón continuo a través de las juntas. Para colocar elementos como una estrella exactamente en una junta de cuatro baldosas se usa subgrid.
La paleta de colores se basa en pigmentos minerales históricos: óxido de hierro (rojo y ocre mostaza, baratos) y cobalto y cromo (azul y verde, más caros). La rotación de las baldosas se puede controlar con funciones CSS como atan2(), y el ancho de las columnas de la cuadrícula puede variar usando calc() con funciones trigonométricas como sin(), aunque usar unidades fr con trigonometría puede hacer que las columnas colapsen.
css · diseno web · diseno grafico · patrones · baldosas hidraulicas