Web Hexagon Builder
About this project:
Web HTML/CSS Hexagon Builder
This project is an attempt to automate the process of building hexagons for web design purposes. Hexagons are relatively straight forward objects on the surface, but have a fair number of moving parts and become rather finicky to work with as attributes are added. This tool lets you set up your hexagon how you'd like, and then copy the HTML and CSS to put onto your own site.
Currently the code output is based around IDs, but it's easy enough to switch the ID names over to class names if you need more than one hexagon on your page.
HTML: The hexagon is built purely in HTML from one anchor element and two divs (in depth explanation of everything in the Technical Talk section); three rectangles rotated to form the hexagon shape.
CSS: CSS dictates everything else in the hexagon outside of the existence of the three initial rectangles. CSS, with extensive use of the calc() function and pseudo-elements create a self scaling hexagon with no hidden changes to the CSS. Everything is based off properties of the parent element, which makes it super easy to manually adjust stuff if you want to get weird with your hexagons after they've been put in another site.
The HTML for the project consists mainly of three main sections. One at the top for holding input fields, one at the bottom for holding spots for the code output to be set, and the center hexagon. The hexagon itself consists of a container div for spacing and positioning, an anchor tag, a div containing a p tag, and the two rotated divs that form the rest of the hexagon. The anchor tag forms the central horizontal bar of the hexagon shape, and wraps the rest of the contents, so that it may be used as a link.
The CSS for the hexagon starts out by setting the size of the central anchor rectangle, the other divs are wrapped and can be set as 100% for both height and width, so they scale easily. The other divs are then rotated at 60° and -60° and positioned absolutely. Their background is set to inherit, which takes in both background colors and allows for seamless coverage of background images, which I'll discuss later.
Actually, I'll discuss the background images now. Background images, when applied to rotated objects, are also rotated. The workaround to this is to create a pseudo-element ::before, force it maintain a size a bit larger than the hexagon, and inherit the background of it's parent (goes back to the original a tag). I then could rotate the ::before element opposite to that of it's parent, and repositioned it so that the pseudo-element was centered on top of the hexagon. I did this for both of the rotated divs, set their overflow to hidden, and ended up with a set of elements that shared/ spanned a background image seamlessly.
Box shadows unfortunately do not work with stacked elements like a hexagon (they shadow all over each other), but the filter: drop-shadow function in CSS sure does. The nature of the drop-shadow mirroring the alpha channel of the hexagon allows it to work as one would hope it would, rather than dropping a shadow on the elements immediately below it.
The pick a color section tool comes from the Eyecon ColorPicker JQuery Plugin. It's responsive nature and customizable options made it a natural choice for the project.
The CSS is grabbed via looping stylesheet.cssRules[i] across the hexagon's css rule range (within the stylesheet) and outputting it below. Light RegEx Patterns are used to style this as well.