LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

  

HOME


Home Sweet Home

ABOUT US


We Are The Experts

CONTACT US


We Open Everyday

CSS
/* CSS3-only Hexagons Shapes using COMPASS/SCSS.
Code derived from article 
http://www.queness.com/post/13901/create-beautiful-hexagon-shapes-with-pure-css3 
by Kevin Liew.

* The code shows the use of text, images and SVG inside CSS3 hexagons.
* Hexagons are scalable just modifying a SCSS variable.
* Simple hover behavior is included
* @TODO: Hexagons layout adapts to parent region dimensions, but the first hexagon of each "row" should include the class 'hex-gap' to fit in properly. This feature will need some Javascript, not included in this example.

* For not SCSS/COMPASS users, plain CSS3 code is attached at the end of this file.
*/
/* Customization vars */
/* Not changes needed from here */
.hex {
  width: 180px;
  height: 103.9231px;
  background-color: white;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  -moz-background-size: auto 126px;
  -o-background-size: auto 126px;
  -webkit-background-size: auto 126px;
  background-size: auto 126px;
  position: relative;
  float: left;
  margin-top: 36.24px;
  margin-right: 6px;
  margin-bottom: 36.24px;
  margin-left: 6px;
  text-align: center;
  zoom: 1;
  border-right: 1px solid black;
  border-left: 1px solid black;
  /* The class 'hex-gap' should be included in the 1st hexagon
  of each line, for avoiding overlaps between hexagon lines */
  /* Some Javascript code (not included in this example) 
  would be needed to change the DOM dinamically*/
  /* Custom styles*/
}
.hex.hex-gap {
  margin-left: 103.9231px;
}
.hex:hover {
  cursor: pointer;
  opacity: 0.5;
  -moz-box-shadow: red 2px 2px 10px;
  -webkit-box-shadow: red 2px 2px 10px;
  box-shadow: red 2px 2px 10px;
}
.hex a {
  display: block;
  width: 100%;
  height: 100%;
  text-indent: -9999em;
  position: absolute;
  top: 0;
  left: 0;
}
.hex .corner-1,
.hex .corner-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  z-index: -2;
  border-right: 1px solid black;
  border-left: 1px solid black;
  overflow: hidden;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.hex .corner-1:before,
.hex .corner-2:before {
  width: 207.6px;
  height: 207.6px;
  content: '';
  position: absolute;
  background: inherit;
  top: 0;
  left: 0;
  z-index: 1;
  background: inherit;
  background-repeat: no-repeat;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.hex .corner-1 {
  z-index: -1;
  -moz-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
}
.hex .corner-1:before {
  -moz-transform: rotate(-60deg) translate(-103.9231px, 0px);
  -ms-transform: rotate(-60deg) translate(-103.9231px, 0px);
  -webkit-transform: rotate(-60deg) translate(-103.9231px, 0px);
  transform: rotate(-60deg) translate(-103.9231px, 0px);
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
.hex .corner-2 {
  -moz-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
}
.hex .corner-2:before {
  -moz-transform: rotate(60deg) translate(-51.96155px, -14px);
  -ms-transform: rotate(60deg) translate(-51.96155px, -14px);
  -webkit-transform: rotate(60deg) translate(-51.96155px, -14px);
  transform: rotate(60deg) translate(-51.96155px, -14px);
  bottom: 0;
}
.hex .inner {
  color: #333;
}
.hex h4 {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 1.44em;
  margin: 0;
}
.hex hr {
  width: 60%;
  border: 0;
  border-top: 3px solid #eee;
  margin: 12px auto;
}
.hex p {
  font-size: 1.2em;
  font-family: 'Kotta One', serif;
  width: 80%;
  margin: 0 auto;
}
.hex.hex-1 {
  background: #74cddb;
}
.hex.hex-2 {
  background: #f5c53c;
}
.hex.hex-3 {
  background: #80b971;
}

/* SASS/COMPASS CSS OUTPUT:
.hex {
  width: 180px;
  height: 103.9231px;
  background-color: white;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  -webkit-background-size: auto 126.0px;
  -moz-background-size: auto 126.0px;
  -o-background-size: auto 126.0px;
  background-size: auto 126.0px;
  position: relative;
  float: left;
  margin-top: 36.24px;
  margin-right: 6px;
  margin-bottom: 36.24px;
  margin-left: 6px;
  text-align: center;
  zoom: 1;
  border-right: 1px solid black;
  border-left: 1px solid black;
}

.hex.hex-gap {
  margin-left: 103.9231px;
}

.hex:hover {
  cursor: pointer;
  opacity: 0.5;
  -webkit-box-shadow: red 2px 2px 10px;
  -moz-box-shadow: red 2px 2px 10px;
  box-shadow: red 2px 2px 10px;
}

.hex a {
  display: block;
  width: 100%;
  height: 100%;
  text-indent: -9999em;
  position: absolute;
  top: 0;
  left: 0;
}

.hex .corner-1,
.hex .corner-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  z-index: -2;
  border-right: 1px solid black;
  border-left: 1px solid black;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}

.hex .corner-1:before,
.hex .corner-2:before {
  width: 207.6px;
  height: 207.6px;
  content: '';
  position: absolute;
  background: inherit;
  top: 0;
  left: 0;
  z-index: 1;
  background: inherit;
  background-repeat: no-repeat;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}

.hex .corner-1 {
  z-index: -1;
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  transform: rotate(60deg);
}

.hex .corner-1:before {
  -webkit-transform: rotate(-60deg) translate(-103.9231px, 0px);
  -moz-transform: rotate(-60deg) translate(-103.9231px, 0px);
  -ms-transform: rotate(-60deg) translate(-103.9231px, 0px);
  -o-transform: rotate(-60deg) translate(-103.9231px, 0px);
  transform: rotate(-60deg) translate(-103.9231px, 0px);
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  transform-origin: 0 0;
}

.hex .corner-2 {
  -webkit-transform: rotate(-60deg);
  -moz-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);
  -o-transform: rotate(-60deg);
  transform: rotate(-60deg);
}

.hex .corner-2:before {
  -webkit-transform: rotate(60deg) translate(-51.96155px, -14px);
  -moz-transform: rotate(60deg) translate(-51.96155px, -14px);
  -ms-transform: rotate(60deg) translate(-51.96155px, -14px);
  -o-transform: rotate(60deg) translate(-51.96155px, -14px);
  transform: rotate(60deg) translate(-51.96155px, -14px);
  bottom: 0;
}

.hex .inner {
  color: #333;
}

.hex h4 {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 1.44em;
  margin: 0;
}

.hex hr {
  width: 60%;
  border: 0;
  border-top: 3px solid #eee;
  margin: 12px auto;
}

.hex p {
  font-size: 1.2em;
  font-family: 'Kotta One', serif;
  width: 80%;
  margin: 0 auto;
}

.hex.hex-1 {
  background: #74cddb;
}

.hex.hex-2 {
  background: #f5c53c;
}

.hex.hex-3 {
  background: #80b971;
}
*/
Host Instantly Drag and Drop Website Builder

 

Description

Code derived from article http://www.queness.com/post/13901/create-beautiful-hexagon-shapes-with-pure-css3
Term
Mon, 11/27/2017 - 22:03

Related Codes

Pen ID
Pen ID
Pen ID