web-tiki / responsive-grid-of-hexagons Goto Github PK
View Code? Open in Web Editor NEWCSS responsive grid of hexagons
License: Apache License 2.0
CSS responsive grid of hexagons
License: Apache License 2.0
.hexLink {
background: red;
}
Just add this code and see what happened (some time you can see red color). It seems like hexagons not "pixel perfect".
Hello, I'm trying to rotate them 30 degrees so they have a straight top (as per our design instructions).
However, this causes an issue like this:
What I've done there is update these rotate values:
.hex {
position: relative;
list-style-type: none;
float: left;
overflow: hidden;
visibility: hidden;
outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
-webkit-transform: rotate(-30deg) skewY(30deg) translatez(-1px);
-ms-transform: rotate(-30deg) skewY(30deg) translatez(-1px);
transform: rotate(-30deg) skewY(30deg) translatez(-1px);
}
Note the overlapping, bad alignment and the skewed content.
Can you point me in the right path to rotating the hex and its contents accurately so they all line up but with a straight top?
Much appreciate any guidance.
Thanks.
@web-tiki , would you mind showing the equation of margin as below?
#categories li:nth-child(9n+6),
#categories li:nth-child(9n+7),
#categories li:nth-child(9n+8),
#categories li:nth-child(9n+9) {
margin-top: -4.2%;
margin-bottom: -4.2%;
-webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
transform: translateX(50%) rotate(-60deg) skewY(30deg);
}
Is there an easy way to increase the spacing between the hexagons?
I've started getting into Flexbox and most recently also into Grid and was wondering if using Grid would be better suited for this project? Could it eliminate the use of media queries? Making the manipulation (adding/removing/resizing/etc) of hexagons easier? Is there a specific reason flexbox was used here?
The images are slightly blurry. Really shows up if images have small text in them. Is this a necessary evil of using CSS3 tranforms with scew/rotate?
On hexagon hover, transition transforms rather top/botom
I'm using your grid as follows:
<div id="honeycomb"><ul id="hexGrid"></ul></div>
and then dynamically append the list items with jquery like this: $("#hexGrid").append('<li class="hex"><a class="hexIn" href="#"><img src=' + data[i].photo + ' alt="" />' + '<h1>' + data[i].employee_id + '</h1><p></p></a></li>');
And even though the parent div is larger the hexGrid does not stretch as nicely as in your examples. I did not change any code and took the code from this codepen: https://codepen.io/web-tiki/pen/wWGeEM
Hopefully one of you can help me to figure this out, because it looks not so nice now :(
When I attempt to replace images in hexagon (in responsive grid code) with images from my local file directory, the hexagon no longer will display in browser. What can I do to overcome this issue?
Thank you
GFiggins
Is it possible to flip the grid row count so the odd rows have one fewer hexagons than the even rows?
Hi,
This is a very cool bit of code here. But I am wondering how to make the calculations work so that the hexagons are actually flat-topped (horizontal) rather than pointed upward (vertical). I can't seem to adjust the rotations in a way to make this work.
Rotating the .hex div will change the hexagon's orientation, but getting everything inside the .hexLink div to look right is the tricky part...
I have adjusted hexagon code to fit desired design for my project and migrated the hexagon html/css into my project website code that is using Cold Fusion/bootstrap. When I test hexagon in project website, I see that hexagon hover "shutter" will not completely close and font color on hover "shutter" has changed to grayish color. It appears there is conflict between website css and hexagon css? What do you suggest? Please help
HTML
<!DOCTYPE html>
<html lang="en">
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<cfinclude template="/head.cfm">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/css/hexgrid1.css">
<link href='https://fonts.googleapis.com/css?family=Raleway:300' rel='stylesheet' type='text/css'>
</head>
<body>
<cfinclude template="/header.cfm">
<div class="main">
<div class="introduction">
<div class="container">
<h1>Resources</h1>
</div>
</div>
<ul id="hexGrid">
<li class="hex">
<div class="hexIn">
<a class="hexLink" href="https://ceitraining.org/resources/hiv/">
<img src="../images/shadowblue/hiv shadow.jpg" alt="hiv" />
<h1>HIV</h1>
<p>HIV Resources</p>
</a>
</div>
</li>
<li class="hex">
<div class="hexIn">
<a class="hexLink" href="https://ceitraining.org/resources/prep/">
<img src="../images/shadowblue/prep shadow.jpg" alt="prep" />
<h1>PrEP</h1>
<p>PrEP Resources</p>
</a>
</div>
</li>
<li class="hex">
<div class="hexIn">
<a class="hexLink" href="https://ceitraining.org/resources/hcv/">
<img src="../images/shadowblue/hcv shadow.jpg" alt="hcv" />
<h1>HCV</h1>
<p>HCV Resources</p>
</a>
</div>
</li>
<li class="hex">
<div class="hexIn">
<a class="hexLink" href="https://ceitraining.org/std-resources/">
<img src="../images/shadowblue/std shadow.jpg" alt="std" />
<h1>STD</h1>
<p>STD Resources</p>
</a>
</div>
</li>
<li class="hex">
<div class="hexIn">
<a class="hexLink" href="https://ceitraining.org/resources/echo/">
<img src="../images/shadowblue/echo shadow.jpg" alt="echo" />
<h1>ECHO</h1>
<p>ECHO Resources</p>
</a>
</div>
</li>
<li class="hex">
<div class="hexIn">
<a class="hexLink" href="https://ceitraining.org/resources/clinical resources/">
<img src="../images/shadowblue/clinical shadow.jpg" alt="clinical resources" />
<h1>CEI Clinical</h1>
<p>CEI Clinical Resources</p>
</a>
</div>
</li>
<li class="hex">
<div class="hexIn">
<a class="hexLink" href="https://ceitraining.org/resources/substance use/">
<img src="../images/shadowblue/substance shadow.jpg" alt="substance" />
<h1>Substance Use</h1>
<p>Substance Use Resources</p>
</a>
</div>
</li>
<li class="hex">
<div class="hexIn">
<a class="hexLink" href="https://ceitraining.org/resources/ai/">
<img src="../images/shadowblue/ai shadow.jpg" alt="ai" />
<h1>AIDS Institute</h1>
<p>AIDS Institute Resources</p>
</a>
</div>
</li>
<li class="hex">
<div class="hexIn">
<a class="hexLink" href="https://ceitraining.org/resources/other/">
<img src="../images/Shadowblue/other shadow.jpg" alt="other" />
<h1>Other</h1>
<p>Other Resources</p>
</a>
</div>
</li>
<li class="hex">
<div class="hexIn">
<a class="hexLink" href="https://ceitraining.org/sp2/index.cfm?action=home.tutorials§ion_id=0">
<img src="../images/shadowblue/tour shadow1.jpg" alt="tour" />
<h1>Tour</h1>
<p>MyCEI Tutorial</p>
</a>
</div>
</li>
<img src="../images/medi folks.jpg" alt="tour" />
</ul>
</div>
</div>
</div>
<!--- CONTENT END --->
</div>
</div>
</div>
</div>
<cfinclude template="/footer.cfm">
</body>
</html>
CSS
* {
margin: 0;
padding: 120;
}
body {
background: rgb(667, 667, 667);
}
#hexGrid {
display: flex;
flex-wrap: wrap;
width: 50%;
margin: 0 auto;
overflow: hidden;
font-family: 'Raleway', sans-serif;
font-size: 15px;
list-style-type: none;
}
.hex {
position: relative;
visibility:hidden;
outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
}
.hex::after{
content:'';
display:block;
padding-bottom: 88.2%; /* = 100 / tan(60) * 1.5 */
}
.hexIn{
position: absolute;
width:96%;
padding-bottom: 110.851%; /* = width / sin(60) */
margin:0 2%;
overflow: hidden;
visibility: hidden;
outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
-webkit-transform: rotate3d(0,0,1,-90deg) skewY(30deg);
-ms-transform: rotate3d(0,0,1,-90deg) skewY(30deg);
transform: rotate3d(0,0,1,-60deg) skewY(30deg);
}
.hexIn * {
position: absolute;
visibility: visible;
outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
}
.hexLink {
display:block;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
overflow: hidden;
-webkit-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
-ms-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
transform: skewY(-30deg) rotate3d(0,0,1,60deg);
}
/*** HEX CONTENT **********************************************************************/
.hex img {
left: -100%;
right: -100%;
width: auto;
height: 100%;
margin: 0 auto;
-webkit-transform: rotate3d(0,0,0,0deg);
-ms-transform: rotate3d(0,0,0,0deg);
transform: rotate3d(0,0,0,0deg);
}
.hex h1, .hex p {
width: 100%;
padding: 5%;
box-sizing:border-box;
background-color: rgba(0, 75, 226, 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:translate3d(0,-100%,0);
-ms-transform:translate3d(0,-100%,0);
transform:translate3d(0,-100%,0);
}
.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:translate3d(0,100%,0);
-ms-transform:translate3d(0,100%,0);
transform:translate3d(0,100%,0);
}
/*** HOVER EFFECT **********************************************************************/
.hexLink:hover h1, .hexLink:focus h1,
.hexLink:hover p, .hexLink:focus p{
-webkit-transform:translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
}
/*** HEXAGON SIZING AND EVEN ROW INDENTATION *****************************************************************/
@media (min-width:1201px) { /* <- 5-4 hexagons per row */
#hexGrid{
padding-bottom: 4.4%
}
.hex {
width: 25%; /* = 100 / 5 */
}
.hex:nth-child(7n+1){ /* first hexagon of even rows */
margin-left:12.5%; /* = width of .hex / 2 to indent even rows */
}
}
@media (max-width: 1200px) and (min-width:901px) { /* <- 4-3 hexagons per row */
#hexGrid{
padding-bottom: 5.5%
}
.hex {
width: 25%; /* = 100 / 4 */
}
.hex:nth-child(7n+5){ /* first hexagon of even rows */
margin-left:12.5%; /* = width of .hex / 2 to indent even rows */
}
}
@media (max-width: 900px) and (min-width:601px) { /* <- 3-2 hexagons per row */
#hexGrid{
padding-bottom: 7.4%
}
.hex {
width: 33.333%; /* = 100 / 3 */
}
.hex:nth-child(5n+4){ /* first hexagon of even rows */
margin-left:16.666%; /* = width of .hex / 2 to indent even rows */
}
}
@media (max-width: 600px) { /* <- 2-1 hexagons per row */
#hexGrid{
padding-bottom: 11.2%
}
.hex {
width: 50%; /* = 100 / 3 */
}
.hex:nth-child(3n+3){ /* first hexagon of even rows */
margin-left:25%; /* = width of .hex / 2 to indent even rows */
}
}
@media (max-width: 400px) {
#hexGrid {
font-size: 13px;
}
}
There is a blurry text on hover appears on chrome. Can this be fixed ?
I have tried adding a box-shadow / border to the hexagons and understand this is probably not the simplest task to achieve. Any chance you can figure out how to do this or edit the documentation?
I've been working a lot with CSS grid and I'm considering to make some contributions in the future to make the code more flexible when changes are needed and relying more an stuff like calc()
which might help resolve issues like #35 and custom css properties
Hi,
in the customization section in the readme their is a formula for setting the vertical space. In this formula you have to use the height of the hexagon:
1/2 height of hexagon
Where do i find the height of the hexagon? In the css there is only a selector for the a tag inside the hexagon with height: 100%
Did you use scss or sass to generate the css file? If yes, it would be great if you could share those files too.
Thank you for your work and help!
hi
thanks a lot for this plugin.
i have a question???
can i set a border for hexa shapes?
a think like :
http://jamepush.ir/views/site/e.jpg
set a border and remove spaces.
hi
i want to resize the hexagon to smaller shapes and add number of hexa per row.
how to do this?
thanks.
When hexagons become small, the text content overflows.
Hi folks! Firstly, thank you for open sourcing this - it is super helpful. There aren't too many resources combining hexagon and images.
Just one question - for my usecase, I was using your technique of displaying the image in a hexagon without the grid feature. I needed to specify a fixed width and height for the image. So, for my example I specifed the width and height both as .hex
as 128px. However, I noticed that .hexIn
and the image exceed those sizes (apart from the sizing, image displays great).
Any ideas on how might I achieve with the markup and styling that you provide?
Thank you!
Hi - thank you so much for posting this! I'm trying to customize it, and I'd like the h1 to always display below each hexagon, rather than sliding up in the middle on hover.
I have it placed where I want and removed the animation, but because of the overflow: hidden
property of the elements that contain it, the text is entirely invisible when moved outside the hexagon. Is there a way you'd recommend getting it to show up?
This issue may not occur to all of you. It happens to me because of my particular case, I modified the breakpoints a bit to suit my case better. But now the problem is; the hover effect does not work in the mobile version (and other device sizes).
You can find the issue on devgroup.se
I'm not sure if it is something you want to work on? I plan to look into it myself when I have time, I will post a solution when I do, if I do for you guys.
The issue occurs in IE when you hover over the entire #categories li shape, including the hidden end parts. This causes issues when hovering over one hexagon to the next.
I resolved this on another pen where the hexagon was made from rectangles by reducing the rectangle height. This pen looks better but the shape doesn't look as easy to tweak for this.
No issues in Chrome/FF.
Hi guys,
Thanks for sharing the script.
Is it possible to have the indentations starting on the first row instead of the second row?
I also don't know how to change the space between the hexagons.
Can you help me?
Thanks in advance!
Hello, Im working on a layout and I was wondering if it is possible to give the hexagons just a border, with no background color. Thanks!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.