Auto Hexagonal CSS Grid Layout & CSS custom properties 24.9.17
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
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. Y no te olvides de disfrutar con la versión 3 de: Auto hexagonal CSS Grid Layout V3 en panal
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 declip-pathahora están en su@media querycorrespondiente.
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.
Ecos y menciones
Con el paso del tiempo desde su publicación [7.4.17] estas realizaciones han sido objeto de menciones y recogidas en diversas páginas como ejemplo de lo que se puede lograr de forma sencilla con el CSS Grid Layout
. Entre otras te reseño:
- Smashing Magazine: The CSS Grid Challenge
- Speckyboy: 10 Creative Examples of CSS Grid in Action
- Tuiteada por CSS-Tricks
Auto Hexagonal CSS Grid Layout & CSS custom properties :: https://t.co/5gPA3z9EIj pic.twitter.com/8KB1LQukyQ
— CSS-Tricks (@Real_CSS_Tricks) 23 de septiembre de 2017
Adenda
En fechas posteriores a la realización y publicación de estas demos seguí jugando con el tema. El resultado fue el artículo "Auto hexagonal CSS Grid Layout V3 en panal" que puedes disfrutar en el siguiente enlace:
Auto hexagonal CSS Grid Layout V3 en panal
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
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
ResponderEliminarhttps://codepen.io/bujurulu/pen/xqoPBX
Gracias por compartirlo, Daniel
EliminarVeo 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
can you please explain the meaning of
ResponderEliminar--Nhexa: 4;
--gap: 2vw;
--size: calc(calc(100vw / var(--Nhexa)) - var(--gap));
}
Hi, namelesswonder
EliminarThese are CSS custom properties
I use them for made the hexagons.
--Nhexa
How many hexagons do you want by each line?
I want (need) four. Then --Nhexa:4
--gap
The value for CSS property grid-gap.
--size
I used that on the first demo only. But I changed the way I build the hexagons.
I calculate the size of the hexagon (width and height) depending on the radius of the circumference in which the hexagon is inscribed.
--radio: calc(calc(100vw / var(--Nhexa)) - var(--gap));
100vw = the viewport width or the window of the browser width
var(--Nhexa) = haw many hexagons I want by line
var(--gap): gutter between hexagons.
If I need vertical hexagons (its bottom supported on a vertex), I use this custom properties:
--width: calc(var(--radio) * .866);
--height: var(--radio);
And if I need horizontal hexagons (its bottom supported on one side) I exchange the custom properties.
All these questions are basic mathematical geometry handled with CSS custom properties ��
Regards