soy Kseso y esto EsCSS

Hexágonos, romboides y otras formas de reparto web

Hexágonos, romboides y otras formas de reparto web

·Por Kseso ✎ 3

Si por algo se ha caracterizado el diseño web ha sido por casi la obligatoriedad de hacer las cosas de forma rectangular. Cajas cuadradas y rectangulares por doquier. Lateral(es) y contenedor principal, cabeza, cuerpo y pie, aside y article o ahora el main...

Por eso siempre es grato descubrir "otras formas". Y de esas otras va el artículo.

Hexágonos

Conseguidos con diversas técnicas, desde lo más sencillo o un sólo elemento, pasando por menús como el de este blog a páginas enteras

Hexágonos en puro Css

Elementos simples

Con marcado extra, y obra de dmac37 en codepen es la base del menú que en en este momento encabeza el blog. En su día realicé una demo en este pen y un artículo al respecto. Si le añades un borde al div verás el secreto.

Otra forma de conseguirlo, sin añadir etiquetado extra, es el hexágono realizado por Lea Verou, también basado en transformaciones Css y la propeidad clip.

Y como no hay dos sin tres, otro hexágono css, en esta ocasión quien sufre las transformaciones son los pseudoelementos :before y :after. Sólo tiene que cambiar el background de ellos para ver dónde está el "truco"

Check out this Pen!

Romboides Css de 4 lados

Otra figura que se está viendo son los romboides Css. Al ser sólo cuatro lados no son tan difíciles de lograr. Sólo se necesita un pequeño giro y en otros casos un poco de transform: skew.

Webs en hexágonos y romboides

Lo anterior, un elemento o grupo pequeño de ellos con un mínimo de contenido una vez que ves cómo se consigue es cosa de coser y cantar. Lo divertido viene al extender el concepto a una página y su contenido. O lo que es lo mismo, tirar las cajas rectangulares a la papelera y lograr páginas originales por su forma de ofrecer la información que contiene.

Diagonal Thumbnails Gallery

Demo realizada por Paulina Hetman (aka PeHaa) en pepsized.com.

Diagonal Thumbnails Gallery pure Css

Neolab

neolab

Jessica Caldwell

Jessica Caldwell

Tapmates

Tapmates

Rallyinteractive

Rallyinteractive

Anet design

Anet design

Apicula

apicula

avatar del Editor del blog

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