Hexágonos, romboides y otras formas de reparto web 5.2.13

Hexágonos, romboides y otras formas de reparto web

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

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.

Neolab

Jessica Caldwell

Tapmates

Rallyinteractive

Anet design

Apicula

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