GMW Responsive Web

Just about to launch the site as well!

Doing some fun responsive stuff and pushing the limits a bit using SVG hexagons as CSS3 masks, animating them, showing/hiding content within them. Pretty neat.

I'll post a final shot when we launch the site. Stoked!

Little bit of that SASS hex code:

.hex{
width:180px;
height:180px;
display:block;
margin:20px auto;
padding:0;
@extend .transition;
@extend .translate-3d;
@include mask(180px 180px, "../img/svg/svg-hex.svg");

&:hover, &.active, &.fixed {
width:(180px*2.5);
height:(180px*2.5);
@include mask((180px*2.5) (180px*2.5), "../img/svg/svg-hex.svg");
}

}

Posted on Jun 25, 2013

More by Mike Cummings

View profile