Skip to content

Instantly share code, notes, and snippets.

@Artistan

Artistan/dabblet.css

Created February 21, 2015 19:40
Show Gist options
  • Save Artistan/fb0d395ab5631f356df1 to your computer and use it in GitHub Desktop.
Save Artistan/fb0d395ab5631f356df1 to your computer and use it in GitHub Desktop.
Download ZIP
Generate repeating hexagonal pattern with CSS3 (SO) - 1 element/ hexagon !!!
Raw
dabblet.css
/**
* Generate repeating hexagonal pattern with CSS3 (SO) - 1 element/ hexagon !!!
* http://stackoverflow.com/q/10062887/1397351
*/
* { box-sizing: border-box; margin: 0; padding: 0; }
.row { margin: -18.5% 0; text-align: center; }
.row:first-child { margin-top: 2.25%; }
.hexagon {
position: relative;
display: inline-block;
overflow: hidden;
margin: 0 8.5%;
padding: 16%;
transform: rotate(30deg) skewY(30deg) scaleX(.866); /* .866 = sqrt(3)/2 */
}
.hexagon:before, .content:after {
display: block;
position: absolute; /* 86.6% = (sqrt(3)/2)*100% = .866*100% */
top: 6.7%; right: 0; bottom: 6.7%; left: 0; /* 6.7% = (100% -86.6%)/2 */
transform: scaleX(1.155) skewY(-30deg) rotate(-30deg); /* 1.155 = 2/sqrt(3) */
background-color: rgba(30,144,255,.56);
background-size: cover;
content: '';
}
.content:after { content: attr(data-content); }
.row:first-child .hexagon:first-child:before {
background-image:
url(http://imgsrc.hubblesite.org/hu/db/images/hs-1996-07-b-web.jpg);
}
.row:nth-child(2) .hexagon:first-child:before {
background-image:
url(http://imgsrc.hubblesite.org/hu/db/images/hs-1998-28-a-web.jpg);
}
.row:nth-child(2) .hexagon:nth-child(2):before {
background-image:
url(http://imgsrc.hubblesite.org/hu/db/images/hs-2007-03-c-small_web.jpg);
}
.row:nth-child(3) .hexagon:first-child:before {
background-image:
url(http://imgsrc.hubblesite.org/hu/db/images/hs-2008-16-al-web.jpg);
}
.row:nth-child(4) .hexagon:first-child:before {
background-image:
url(http://imgsrc.hubblesite.org/hu/db/images/hs-2004-04-a-small_web.jpg);
}
.row:nth-child(4) .hexagon:nth-child(2):before {
background-image:
url(http://imgsrc.hubblesite.org/hu/db/images/hs-2004-10-a-small_web.jpg);
}
.ribbon:after {
overflow: hidden;
top: 50%;
margin: -1.2em 0;
width: 100%; height: 2.4em;
color: white;
font: 1em/2.4 Century Gothic;
}
.game:after {
margin: -.6em 0;
height: 1.2em;
background: rgba(25,25,112,.56);
color: lime;
font: 2em/1.2 monospace;
text-transform: uppercase;
}
.longtext:after {
left: 25%; right: 25%;
background: none;
color: white;
text-align: justify;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class='row'>
<div class='hexagon'></div>
</div>
<div class='row'>
<div class='hexagon content ribbon' data-content='This is a test!!!
9/10'></div><!--
--><div class='hexagon content longtext' data-content='Some longer text here. Bla
bla bla bla bla bla bla bla bla bla blaaaah...'></div>
</div>
<div class='row'>
<div class='hexagon'></div>
</div>
<div class='row'>
<div class='hexagon content ribbon game' data-content='game over!'></div><!--
--><div class='hexagon'></div>
</div>
Raw
settings.json
{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment