soy Kseso y esto EsCSS

Auto Hexagonal CSS Grid Layout & CSS custom properties

Un juego y divertimento CSS para ver la potencia al usar conjuntamente varias novedades CSS como el Grid Layout, Custom Properties y otras.

Auto Hexagonal CSS Grid Layout & CSS custom properties

Por Kseso ✎ 2
Auto Hexagonal CSS Grid Layout & CSS custom properties

Todo lo que sigue, demo incluida, es sólo un mero divertimento. Un juego para ver la potencia de CSS sin necesidad de recurrir a otros lenguajes o herramientas para conseguir algo algo tan visto como un panal de ricos hexágonos.

El auto del título se refiere a que todo está en función del valor de la CSS custom property --Nhexa: elegir cuántos hexágonos se colocan en cada fila.

El resto todo cambia junto a ella, pues es la base para otras custom properties.

Conviene que Nhexa sea un número par. Ya sabes, múltiplo de 2. La razón es que desplazo los hexágonos pares con el selector :nth-child(2n) y que la dimensiones del elemento que crea el grid y su número de columnas y su anchuras están definidas para ello.

A continuación la demo. Y después de ellas un par de apuntes (o pequeñas inconsistencias). Pues esta vez no entraré a explicar los códigos.

Si quieres o necesitas explicación de alguno haz uso de los comentarios.

See the Pen Auto Hexagonal CSS Grid Layout by Kseso (@Kseso) on CodePen.

1º: los hexágonos no acaban de ser perfectos. Así como el gap entre ellas en todas las circunstancias. La razón: la relación entre sus lados y el radio de la circunferencia en la que están inscritos no es exacta.
2º: Hay algo de código basura. Especialmente el de las propiedades clip-path y shape-outside que he dejado sin borrar para un intento próximo de hacer que el texto aparezca con los laterales oblicluos. Ver el post CSS shape-outside: y el texto sigue el contorno
3º: Alguna otra cosilla que con las prisas me he olvidado.

Disfruta y mejora de este juego CSS

Auto Hexagonal CSS Grid Layout V2

Por seguir explorando un poco más este tipo de realizaciones, aquí una segunda versión. Las principales diferencias respecto a la primera son:

  • El hexágono está construido un poco mejor teniendo en cuenta la relación entre el radio de la circunferencia en la que se inscribe y la longitud de sus lados:

    --radio: calc(calc(100vw / var(--Nhexa)) - var(--gap)); --width: calc(var(--radio) * .866); --height: var(--radio);

  • Los hexágonos en viewports mayores de 601px se asientan sobre su vértice y en menores sobre un lado. La transición está animada.
  • Tanto las customproperties, como la recolocaión de los hexágonos (vía márgenes) para formar el panal y los valores de clip-path ahora están en su @media query correspondiente.

See the Pen Auto Hexagonal CSS Grid Layout by Kseso (@Kseso) on CodePen.

Aunque en el título incluyo la palabra auto realmente no está automatizado 100%. Especialmente en esta 2ª versión que en viewports mayores de 601px. Por la orientación de los hexágonos hay que recurrir a una lista de selectores para crear rangos y actuar en las filas pares e impares por separado

article:nth-child(4n), article:nth-child(4n - 1), article:nth-child(4n - 2), article:nth-child(4n - 3) { } article:nth-child(8n), article:nth-child(8n - 1), article:nth-child(8n - 2), article:nth-child(8n - 3) { }

Esto, como dejo entrever en el comentario 1.1, es imposible automatizar con puro CSS. La razón: las custom properties sólo se pueden usar en las declaraciones CSS (como propiedad al crearlas --Nhexa: 4; o como valor al utilizarla porpiedad: var(--Nhexa).

Una gran puerta se abriría si fuesen admitidas en selectores :nth-child(var(--Nhexa)n) {}. Este pequeño inconveniente lo solventarás si utilizas algún procesador de CSS.

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: 2

  1. Me puse a revisar el código y no entendi mucho, asi que me puse a hacerlo creo que logre una solucion interesante, revisa las variables

    https://codepen.io/bujurulu/pen/xqoPBX

    ResponderEliminar
    Respuestas
    1. Gracias por compartirlo, Daniel

      Veo que aún te falta dedicarle algo más de tiempo (como a mi demo) para terminar de pulirla.
      Para que nadie tenga que andar copiando y pegando el enlace a tu pen lo inserto:
      [pen]data-height="300" data-theme-id="299" data-slug-hash="xqoPBX" data-default-tab="result" data-user="bujurulu" data-embed-version="2" data-pen-title="Ejercicio hexagonos" class="codepen"[/pen]

      El problema de estas realizaciones en puro CSS es que las "custom properties sólo se pueden usar como valores de una propiedad.
      No se admiten en los selectores:
      [code]
      :nth-child(var(--Nhexa)n) {
      /* toda la regla queda invalidada */
      }
      [/code]
      Y eso impide automatizar completamente demos como éstas.

      Un saludo

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap