html - How To Arrange CSS3 Hexagons in 2-3-2 tree order -
trying create gallery of hexagons, searched on internet , found examples, , created gallery-like this (this test hosting site, , galley designed me referring links)
i'm using code :
#hexgrid { overflow: hidden; width: 60%; margin: 0 auto; padding: 0.866% 0; font-family: 'raleway', sans-serif; font-size: 15px; } #hexgrid:after { content: ""; display: block; clear: both; } .hex { position: relative; list-style-type: none; float: left; overflow: hidden; visibility: hidden; outline: 1px solid transparent; /* fix jagged edges in ff on hover transition */ -webkit-transform: rotate(-60deg) skewy(30deg) translatez(-1px); -ms-transform: rotate(-60deg) skewy(30deg) translatez(-1px); transform: rotate(-60deg) skewy(30deg) translatez(-1px); } .hex * { position: absolute; visibility: visible; outline: 1px solid transparent; /* fix jagged edges in ff on hover transition */ } .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); } /*** hex content **********************************************************************/ .hex div { left: -100%; right: -100%; width: auto; height: 100%; margin: 0 auto; } .hex h1, .hex p { width: 102%; left: -1%; /* prevent line on right background doesn't cover image */ padding: 5%; box-sizing: border-box; background-color: rgba(0, 128, 128, 0.8); font-weight: 300; -webkit-transition: -webkit-transform .2s ease-out, opacity .3s ease-out; transition: transform .2s ease-out, opacity .3s ease-out; } .hex h1 { bottom: 50%; padding-top: 50%; font-size: 1.5em; z-index: 1; -webkit-transform: translatey(-100%) translatez(-1px); -ms-transform: translatey(-100%) translatez(-1px); transform: translatey(-100%) translatez(-1px); } .hex h1:after { content: ''; position: absolute; bottom: 0; left: 45%; width: 10%; text-align: center; border-bottom: 1px solid #fff; } .hex p { top: 50%; padding-bottom: 50%; -webkit-transform: translatey(100%) translatez(-1px); -ms-transform: translatey(100%) translatez(-1px); transform: translatey(100%) translatez(-1px); } @media (min-width: 1201px) { /* <- 5-4 hexagons per row */ .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%; } }<ul id="hexgrid"> <li class="hex"> <a class="hexin" href="#"> <div class="mono-green"></div> <!--empty hex--> </a> </li> <li class="hex"> <a class="hexin" href="#"> <div class="mono-violet"></div> <h1>2</h1> </a> </li> </ul> <!-- 11 hexagons i'll remove 4 of them create -->i want arrange hexagons :
i'm using 11 hexagons now, if remove 4 hex's in above structure, become :
but need 2-3-2 structure! should modify in code?
if want modify code ( have responsive hex grid ) changes (where changed something, wrote 'modified'). anyway think it's better write code scratch sometimes.
* { margin: 0; padding: 0; } body{ background:#f9f9f9; } #hexgrid { overflow: hidden; width: 60%; margin: 0 auto; font-family: 'raleway', sans-serif; font-size: 15px; background-color:rgba(0,0,0,0.1); /*modified*/ padding-bottom:5.3%; /*modified*/ } #hexgrid:after { content: ""; display: block; clear: both; } .hex { position: relative; list-style-type: none; float: left; overflow: hidden; visibility: hidden; outline:1px solid transparent; /* fix jagged edges in ff on hover transition */ -webkit-transform: rotate(-60deg) skewy(30deg) translatez(-1px); -ms-transform: rotate(-60deg) skewy(30deg) translatez(-1px); transform: rotate(-60deg) skewy(30deg) translatez(-1px); } .hex * { position: absolute; visibility: visible; outline:1px solid transparent; /* fix jagged edges in ff on hover transition */ } .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); } /*** hex content **********************************************************************/ .hex div { left: -100%; right: -100%; width: auto; height: 100%; margin: 0 auto; } .hex h1, .hex p { width: 102%; left:-1%; /* prevent line on right background doesn't cover image */ padding: 5%; box-sizing:border-box; background-color: rgba(0, 128, 128, 0.8); font-weight: 300; -webkit-transition: -webkit-transform .2s ease-out, opacity .3s ease-out; transition: transform .2s ease-out, opacity .3s ease-out; } .hex h1 { bottom: 50%; padding-top:50%; font-size: 1.5em; z-index: 1; -webkit-transform:translatey(-100%) translatez(-1px); -ms-transform:translatey(-100%) translatez(-1px); transform:translatey(-100%) translatez(-1px); } .hex h1:after { content: ''; position: absolute; bottom: 0; left: 45%; width: 10%; text-align: center; border-bottom: 1px solid #fff; } .hex p { top: 50%; padding-bottom:50%; -webkit-transform:translatey(100%) translatez(-1px); -ms-transform:translatey(100%) translatez(-1px); transform:translatey(100%) translatez(-1px); } /*** hover effect **********************************************************************/ .hexin:hover h1, .hexin:focus h1, .hexin:hover p, .hexin:focus p{ -webkit-transform:translatey(0%) translatez(-1px); -ms-transform:translatey(0%) translatez(-1px); transform:translatey(0%) translatez(-1px); } /*** spacing , sizing **************************************/ /*modified*/ .hex { width: 32.3333333333%; /* = (100-3) / 3 or use 'calc()' */ padding-bottom: 37.3353174076%; /* = width / sin(60deg) */ margin-bottom: -8.4%; } .hex:nth-child(5n+1), .hex:nth-child(5n+2), .hex:nth-child(5n+3) { -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+3), .hex:nth-child(5n+4), .hex:nth-child(5n+5) { -webkit-transform: translatex(0%) rotate(-60deg) skewy(30deg); -ms-transform: translatex(0%) rotate(-60deg) skewy(30deg); transform: translatex(0%) rotate(-60deg) skewy(30deg); } .hex:nth-child(5n+1){ margin-left: 1%; margin-right: 1%; } .hex:nth-child(5n+4){ margin-left: 1%; margin-right: 1%; } .hex:nth-child(5n+3) { clear: left; margin-left: 0.5%; } }<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="hexagons.css"> <link rel="stylesheet" type="text/css" href="http://supersevadeals.16mb.com/rak_code_hex/css/colors.css"> <link rel="stylesheet" type="text/css" href="css/materialize.min.css"> <link href='https://fonts.googleapis.com/css?family=raleway:300' rel='stylesheet' type='text/css'> </head> <body> <ul id="hexgrid"> <li class="hex"> <a class="hexin" href="#"> <div class="mono-orange"></div> <h1>1</h1> </a> </li> <li class="hex"> <a class="hexin" href="#"> <div class="mono-orange"></div> <h1>2</h1> </a> </li> <li class="hex"> <a class="hexin" href="#"> <div class="mono-orange"></div> <h1>3</h1> </a> </li> <li class="hex"> <a class="hexin" href="#"> <div class="mono-orange"></div> <h1>4</h1> </a> </li> <li class="hex"> <a class="hexin" href="#"> <div class="mono-orange"></div> <h1>5</h1> </a> </li> <li class="hex"> <a class="hexin" href="#"> <div class="mono-orange"></div> <h1>6</h1> </a> </li> <li class="hex"> <a class="hexin" href="#"> <div class="mono-orange"></div> <h1>7</h1> </a> </li> <li class="hex"> <a class="hexin" href="#"> <div class="mono-orange"></div> <h1>8</h1> </a> </li> <li class="hex"> <a class="hexin" href="#"> <div class="mono-orange"></div> <h1>9</h1> </a> </li> <li class="hex"> <a class="hexin" href="#"> <div class="mono-orange"></div> <h1>10</h1> </a> </li> <li class="hex"> <a class="hexin" href="#"> <div class="mono-orange"></div> <h1>11</h1> </a> </li> <li class="hex"> <a class="hexin" href="#"> <div class="mono-orange"></div> <h1>12</h1> </a> </li> </ul> </body> </html>
Comments
Post a Comment