Hexágonos, romboides y otras formas de reparto web 5.2.13
ejemplos y usos de formas no rectangulares en páginas webs: Hexágonos, romboides, tiángulos...
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
Otro sitio web bastante interesante, es http://unfold.no tambien usan romboides y eso. ¡Funciona en IE!
ResponderEliminarpara blogger vale¿¿
ResponderEliminarGracias Sergio por el enlace. Interesante también por la combinación con el efecto parallax scroll.
ResponderEliminarMiriam: ¿Lo pregunta o lo afirma?
Supongo que podría adaptarse, todo depende del grado de las particularidades de la plantilla, pues posíblemente sería necesario editar el código html.