Saltar al contenido

Cuadrícula receptiva de hexágonos

Por fin luego de tanto batallar pudimos encontrar la solución de esta duda que agunos usuarios de nuestro sitio tienen. Si tienes algo que compartir no dejes de compartir tu información.

Solución:

Aquí está la demostración y el repositorio de la cuadrícula receptiva de hexágonos.
El código aquí no se mantiene. Se movió a github y se mejoró, por lo que los comentarios, informes de problemas y contribuciones deben hacerse allí.

Cuadrícula receptiva de hexágonos

Esta técnica utiliza:

Y más para crear el cuadrícula hexagonal con el etiqueta.

Características de la rejilla hexagonal:

  • La cuadrícula es sensible ya que se basa en anchos porcentuales. Los hexágonos mantienen su relación de aspecto con la técnica del fondo acolchado y las imágenes cambian de tamaño para adaptarse a la forma del hexágono.
  • A Efecto de desplazamiento sobre los hexágonos. : un texto se desliza con una superposición transparente sobre la imagen.
  • Cada hexágono mantiene sus límites: el efecto de desplazamiento (o evento de clic) de cada hexágono solo se activa dentro de la forma real.

Código completo

El siguiente fragmento no es la última versión de la cuadrícula. El repositorio de GitHub se mantiene y se actualiza. Allí se pueden realizar cuestiones y contribuciones.

* 
    margin: 0;
    padding: 0;


body 
    font-family: 'Open Sans', arial, sans-serif;
    background: rgb(123, 158, 158);


#hexGrid 
    overflow: hidden;
    width: 90%;
    margin: 0 auto;
    padding:0.707% 0;


#hexGrid:after 
    content: "";
    display: block;
    clear: both;


.hex 
    position: relative;
    list-style-type: none;
    float: left;
    overflow: hidden;
    visibility: hidden;
    -webkit-transform: rotate(-60deg) skewY(30deg);
        -ms-transform: rotate(-60deg) skewY(30deg);
            transform: rotate(-60deg) skewY(30deg);


.hex * 
    position: absolute;
    visibility: visible;


.hexIn 
    display:block;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    overflow: hidden;
    -webkit-transform: skewY(-30deg) rotate(60deg);
        -ms-transform: skewY(-30deg) rotate(60deg);
            transform: skewY(-30deg) rotate(60deg);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;



/* HEX CONTENT */

.hex img 
    left: -100%;
    right: -100%;
    width: auto;
    height: 100%;
    margin: 0 auto;


.hex h1, .hex p 
    width: 90%;
    padding: 0 5%;
    background-color: #008080;
    background-color: rgba(0, 128, 128, 0.8);
    font-family: 'Raleway', sans-serif;
    -webkit-transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;
            transition: top .2s ease-out, bottom .2s ease-out, .2s padding .2s ease-out;


.hex h1 
    bottom: 110%;
    font-style: italic;
    font-weight: normal;
    font-size: 1.5em;
    padding-top: 100%;
    padding-bottom: 100%;


.hex h1:after 
    content: '';
    display: block;
    position: absolute;
    bottom: -1px;
    left: 45%;
    width: 10%;
    text-align: center;
    z-index: 1;
    border-bottom: 2px solid #fff;


.hex p 
    padding-top: 50%;
    top: 110%;
    padding-bottom: 50%;



/* HOVER EFFECT  */

.hexIn:hover h1 
    bottom: 50%;
    padding-bottom: 10%;


.hexIn:hover p 
    top: 50%;
    padding-top: 10%;


/* SPACING AND SIZING */

@media (min-width:1201px) 
    .hex 
        width: 19.2%; /* = (100-4) / 5 */
        padding-bottom: 22.170%; /* =  width / sin(60deg) */
    
    .hex:nth-child(9n+6),
    .hex:nth-child(9n+7),
    .hex:nth-child(9n+8),
    .hex:nth-child(9n+9) 
        margin-top: -4.676%;
        margin-bottom: -4.676%;
        -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
            -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
                transform: translateX(50%) rotate(-60deg) skewY(30deg);
    
    .hex:nth-child(9n+6):last-child,
    .hex:nth-child(9n+7):last-child,
    .hex:nth-child(9n+8):last-child,
    .hex:nth-child(9n+9):last-child 
        margin-bottom: 0;
    
    .hex:nth-child(9n+6) 
        margin-left: 0.5%;
        clear: left;
    
    .hex:nth-child(9n+10) 
        clear: left;
    
    .hex:nth-child(9n+2),
    .hex:nth-child(9n+ 7) 
        margin-left: 1%;
        margin-right: 1%;
    
    .hex:nth-child(9n+3),
    .hex:nth-child(9n+4),
    .hex:nth-child(9n+8) 
        margin-right: 1%;
    


@media (max-width: 1200px) and (min-width:901px) 
    .hex 
        width: 24.25%; /* = (100-3) / 4 */
        padding-bottom: 28.001%; /* =  width / sin(60deg) */
    
    .hex:nth-child(7n+5),
    .hex:nth-child(7n+6),
    .hex:nth-child(7n+7) 
        margin-top: -6.134%;
        margin-bottom: -6.134%;
        -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
            -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
                transform: translateX(50%) rotate(-60deg) skewY(30deg);
    
    .hex:nth-child(7n+5):last-child,
    .hex:nth-child(7n+6):last-child,
    .hex:nth-child(7n+7):last-child 
        margin-bottom: 0;
    
    .hex:nth-child(7n+2),
    .hex:nth-child(7n+6) 
        margin-left: 1%;
        margin-right: 1%;
    
    .hex:nth-child(7n+3) 
        margin-right: 1%;
    
    .hex:nth-child(7n+8) 
        clear: left;
    
    .hex:nth-child(7n+5) 
        clear: left;
        margin-left: 0.5%;
    


@media (max-width: 900px) and (min-width:601px) 
    .hex 
        width: 32.666%; /* = (100-2) / 3 */
        padding-bottom: 37.720%; /* =  width / sin(60) */
    
    .hex:nth-child(5n+4),
    .hex:nth-child(5n+5) 
        margin-top: -8.564%;
        margin-bottom: -8.564%;
        -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
            -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
                transform: translateX(50%) rotate(-60deg) skewY(30deg);
    
    .hex:nth-child(5n+4):last-child,
    .hex:nth-child(5n+5):last-child 
        margin-bottom: 0;
    
    .hex:nth-child(5n+4) 
        margin-right: 1%;
        margin-left: 0.5%;
    
    .hex:nth-child(5n+2) 
        margin-left: 1%;
        margin-right: 1%;
    
    .hex:nth-child(5n+6) 
        clear: left;
    


@media (max-width: 600px) 
    .hex 
        width: 49.5%; /* = (100-1) / 2 */
        padding-bottom: 57.158%; /* =  width / sin(60) */
    
    .hex:nth-child(3n+3) 
        margin-top: -13.423%;
        margin-bottom: -13.423%;
        -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
            -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
                transform: translateX(50%) rotate(-60deg) skewY(30deg);
    
    .hex:nth-child(3n+3):last-child 
        margin-bottom: 0;
    
    .hex:nth-child(3n+3) 
        margin-left: 0.5%;
    
    .hex:nth-child(3n+2) 
        margin-left: 1%;
    
    .hex:nth-child(3n+4) 
        clear: left;

Cambiar el número de hexágonos por fila

La cuadrícula adapta el número de hexágonos por fila según el ancho de la ventana gráfica de 5 en pantallas de más de 1200 px a 2 en pantallas de menos de 600 px.

Si no necesita las consultas de medios pero solo desea cambiar el número de hexágonos por fila, puede mantener el CSS de la consulta de medios correspondiente y eliminar las innecesarias.

Para obtener más personalización, consulte el tamaño y el espaciado de los hexágonos.

Población

Para obtener una lista de todas las demostraciones, consulte esta colección de codepen: Cuadrículas receptivas de hexágonos con diferentes números de hexágonos por fila, opciones de centrado y más …

Aquí está la demostración de codepen original con el .pusher elemento para hacer una cuadrícula irregular de hexágonos. los .pusher El elemento se utiliza para hacer los “agujeros” en la cuadrícula con hexágonos vacíos.

Muy bien, aquí hay una solución limpia y compatible con todos los navegadores que incluso le permitirá agrupar los hexágonos:

Para que esto funcione, debe envolver cada imagen en 2 contenedores, ya que uno se usará para el corte superior izquierdo / inferior derecho y el otro para el corte superior derecho / inferior izquierdo.

Luego, el CSS le da a cada contenedor de corte un skew que agrega los ángulos a la imagen:

.outerclip 
    -webkit-transform: skew(-30deg);
    -ms-transform: skew(-30deg);
    -transform: skew(-30deg);
    overflow: hidden;
    display: inline-block;

.innerclip 
    -webkit-transform: skew(50deg);
    -ms-transform: skew(50deg);
    transform: skew(50deg);
    overflow: hidden;
    display: inline-block;

img 
    -webkit-transform: skew(-30deg);
    -ms-transform: skew(-30deg);
    transform: skew(-30deg);

Demostración: http://jsfiddle.net/XkQtF/3/

Nota: para mejorar la calidad del renderizado, le aconsejo que proporcione ambos .outerclip y .innerclip la misma altura fija.

Para obtener los panales, puede poner varias imágenes en un row contenedor y luego compensar cada fila impar por un par de píxeles como este:

Panales

Demostración: http://jsfiddle.net/XkQtF/4/

si se trata de panal de abejas,
nido de abeja css
aquí hay una posibilidad de CSS. http://codepen.io/gc-nomade/pen/eyntg/

Aquí puedes ver las reseñas y valoraciones de los usuarios

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)

Tags : / / / /

Utiliza Nuestro Buscador

Preguntas Relacionadas:

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *