Rejilla de Hexagon responsive en CSS puro
| Autor: | web-tiki |
|---|---|
| Views Total: | 6,617 |
| Sitio oficial: | Ir a la web |
| Actualizado: | June 15, 2016 |
| Licencia: | MIT |
Vista prévia
Descripción
Una solución CSS pura para renderizar un diseño de rejilla hexagonal totalmente receptivo con efectos de mouse de lujo en su página HTML.
See also:
Funcionamiento
Sólo tiene que incluir la hoja de estilo de núcleo hexágonos. CSS en el encabezado de su documento HTML y ya está listo para ir.
<link rel="stylesheet" href="hexagons.css">
Cree una rejilla hexagonal con imágenes, títulos y descripciones personalizados de la siguiente manera:
<ul id="hexGrid"> <li class="hex"> <a class="hexIn" href="#"> <img src="1.jpg" alt=""> <h1>This is a title 1</h1> <p>This is description 1</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="2.jpg" alt=""> <h1>This is title 2</h1> <p>This is description 2</p> </a> </li> <li class="hex"> <a class="hexIn" href="#"> <img src="3.jpg" alt=""> <h1>This is title 3</h1> <p>This is description 3</p> </a> </li> </ul>
Eso es todo. Reemplace y modifique las reglas CSS en el hexágonos. CSS para crear sus propios estilos.
