CSS
@import "compass/css3";
@import url('http://fonts.googleapis.com/css?family=Lobster');
@font-face {
font-family: 'ModernPictogramsNormal';
src: url("http://www.bradysammons.com/codepen/fonts/modernpics-webfont.eot");
src: url("http://www.bradysammons.com/codepen/fonts/modernpics-webfont.eot?#iefix") format("embedded-opentype"), url("http://www.bradysammons.com/codepen/fonts/modernpics-webfont.woff") format("woff"), url("http://www.bradysammons.com/codepen/fonts/modernpics-webfont.ttf") format("truetype"), url("http://www.bradysammons.com/codepen/fonts/modernpics-webfont.svg#ModernPictogramsNormal") format("svg");
font-weight: normal;
font-style: normal;
}
body{
background: url('http://www.vancouverad.com/bgimg/img/office.png') repeat;
padding: 20px;
}
ul,li{
margin:0;
padding:0;
list-style: none;
}
/* -------------------
Variables
-------------------- */
///////////Change Size//////////////
$height:45px;
///////////Change Size//////////////
$color:#444;
$width:$height * 2; //Dont change height it auto calculates, bnased on width
$border_color: lighten($color, 40%);
/* -------------------
Variables
-------------------- */
a.hexicon, a.hexicon span{
z-index: 10;
display: block;
width:$width;
height: $height;
background:$color;
position: absolute;
margin-top:0px;
font-family: 'ModernPictogramsNormal', Arial, sans-serif;
text-decoration: none;
line-height: $height;
text-align: center;
font-size: $width/1.5;
// text-shadow:0 1px 0 rgba(255,255,255,.5);
color: $border_color;
}
a.hexicon:before, a.hexicon span:before{
content: '';
position: absolute;
top: -$height/1.52;
left: 0;
width: 0;
height: 0;
border-left:$height solid transparent;
border-right:$height solid transparent;
border-bottom:$height/1.5 solid $color;
}
a.hexicon:after, a.hexicon span:after{
content: '';
position: absolute;
bottom: -$height/1.52;
left: 0;
width: 0;
height: 0;
border-left:$height solid transparent;
border-right:$height solid transparent;
border-top:$height/1.5 solid $color;
}
a.hexicon span{
margin-left: 50%;
left:-$width /2;
margin-top: $height /20;
@include transition-property(all);
@include transition-duration(.4s);
}
/* -------------------
The "a" element acts as the border (back element)
-------------------- */
a.hexicon{
z-index: 0;
position: relative;
background: $border_color;
width:$width*1.1;
height: $height*1.1;
top: $height;
float: left;
margin: 0 $height/2 $height*2 0;
}
a.hexicon:before{
top: -$height/1.38;
border-left:$height*1.1 solid transparent;
border-right:$height*1.1 solid transparent;
border-bottom:$height/1.37 solid $border_color;
}
a.hexicon:after{
bottom: -$height/1.38;
border-left:$height*1.1 solid transparent;
border-right:$height*1.1 solid transparent;
border-top:$height/1.37 solid $border_color;;
}
/* -------------------
Colors!!
-------------------- */
////Greeen///
$color_grn:#37AC37;
$border_color_grn: lighten($color_grn, 40%);
a.hexicon.green span{
background: $color_grn;
color: $border_color_grn;
}
a.hexicon.green span:before{
border-bottom-color: $color_grn;
}
a.hexicon.green span:after{
border-top-color: $color_grn;
}
a.hexicon.green{
background: $border_color_grn;
}
a.hexicon.green:before{
border-bottom:$height/1.37 solid $border_color_grn;
}
a.hexicon.green:after{
border-top:$height/1.37 solid $border_color_grn;
}
////red///
$color_red:#AC3737;
$border_color_red: lighten($color_red, 40%);
a.hexicon.red span{
background: $color_red;
color: $border_color_red;
}
a.hexicon.red span:before{
border-bottom-color: $color_red;
}
a.hexicon.red span:after{
border-top-color: $color_red;
}
a.hexicon.red{
background: $border_color_red;
}
a.hexicon.red:before{
border-bottom:$height/1.37 solid $border_color_red;
}
a.hexicon.red:after{
border-top:$height/1.37 solid $border_color_red;
}
////Orange///
$color_orange:#CC6D26;
$border_color_orange: lighten($color_orange, 40%);
a.hexicon.orange span{
background: $color_orange;
color: $border_color_orange;
}
a.hexicon.orange span:before{
border-bottom-color: $color_orange;
}
a.hexicon.orange span:after{
border-top-color: $color_orange;
}
a.hexicon.orange{
background: $border_color_orange;
}
a.hexicon.orange:before{
border-bottom:$height/1.37 solid $border_color_orange;
}
a.hexicon.orange:after{
border-top:$height/1.37 solid $border_color_orange;
}
////Pink///
$color_pink:#C64AD1;
$border_color_pink: lighten($color_pink, 40%);
a.hexicon.pink span{
background: $color_pink;
color: $border_color_pink;
}
a.hexicon.pink span:before{
border-bottom-color: $color_pink;
}
a.hexicon.pink span:after{
border-top-color: $color_pink;
}
a.hexicon.pink{
background: $border_color_pink;
}
a.hexicon.pink:before{
border-bottom:$height/1.37 solid $border_color_pink;
}
a.hexicon.pink:after{
border-top:$height/1.37 solid $border_color_pink;
}
////teal///
$color_teal:#38A2BD;
$border_color_teal: lighten($color_teal, 40%);
a.hexicon.teal span{
background: $color_teal;
color: $border_color_teal;
}
a.hexicon.teal span:before{
border-bottom-color: $color_teal;
}
a.hexicon.teal span:after{
border-top-color: $color_teal;
}
a.hexicon.teal{
background: $border_color_teal;
}
a.hexicon.teal:before{
border-bottom:$height/1.37 solid $border_color_teal;
}
a.hexicon.teal:after{
border-top:$height/1.37 solid $border_color_teal;
}
////blue///
$color_blue:#3866BD;
$border_color_blue: lighten($color_blue, 40%);
a.hexicon.blue span{
background: $color_blue;
color: $border_color_blue;
}
a.hexicon.blue span:before{
border-bottom-color: $color_blue;
}
a.hexicon.blue span:after{
border-top-color: $color_blue;
}
a.hexicon.blue{
background: $border_color_blue;
}
a.hexicon.blue:before{
border-bottom:$height/1.37 solid $border_color_blue;
}
a.hexicon.blue:after{
border-top:$height/1.37 solid $border_color_blue;
}
/* -------------------
Hover
-------------------- */
a:hover span{
@include scale(1.15);
}
HTML
<ul>
<li>
<a class='hexicon green' href='#'><span>K</span></a>
</li>
<li>
<a class='hexicon red' href='#'><span>j</span></a>
</li>
<li>
<a class='hexicon orange' href='#'><span>2</span></a>
</li>
<li>
<a class='hexicon pink' href='#'><span>8</span></a>
</li>
<li>
<a class='hexicon teal' href='#'><span>t</span></a>
</li>
<li>
<a class='hexicon blue' href='#'><span>m</span></a>
</li>
</ul>
Comment With The Topic