The Evolt Org Logo Using Only Css2 And Css3

While spending some time hacking through experiments with CSS3, I ran across this example of a hexagon using only CSS as tweeted by Chris Coyier. As I looked at it, I figured that since a hexagon defines the shape of each evolt.org cube I could just co-opt this and build the evolt.org logo using the example. Except I realized that the method he used for the hexagon does not translate to drawing a cube with lines and one differently-colored face.

So I set out to re-create the evolt.org logo using the bare minimum mark-up and many of the new styles available in CSS3. In addition, I wanted to make sure that the links themselves rendered fine in a text browser (mostly because I still surf in Lynx).

I started with this block of links:

evolt.org
lists.evolt.org
browsers.evolt.org

Using this very simple mark-up (using only one id attribute for the block and no other attributes or unnecessary elements):

<p id="evolt">
    <a href="http://evolt.org">evolt.org</a><br>
    <a href="http://lists.evolt.org">lists.evolt.org</a>><br>
    <a href="http://browsers.evolt.org">browsers.evolt.org</a>
    </p>

With the magic of CSS (2 and 3) I was able to create this totally sweet logo (must be using Internet Explorer 9, recent versions of Firefox, Chrome, Opera, Safari to see the cubes):

evolt.org
lists.evolt.org
browsers.evolt.org

I wanted each hyperlink to correspond to the lighter-colored face of its cube, especially since I am using a CSS transition to slowly highlight the face on hover. As a result, I ended up creating three different cubes using a combination of CSS generated content, rotations, skews, and some selectors that, thanks to a typo, had me scratching my head for some time.

Unfortunately because of the floats and negative margins, that last paragraph had to be pushed down 450px to keep the cubes from overlapping the content.

To spare you wading through the code of the page to find the CSS block, here it is in its entirety:

    #evolt a:first-child, #evolt a:nth-of-type(2), #evolt a:last-child
     { display: block;
       position: relative;
       float: left;
       text-indent: -1000px;
       padding: 0;
       border: 4px solid #000;
       -webkit-transition: background-color 0.25s ease-in;
       -moz-transition: background-color 0.25s ease-in;
       -ms-transition: background-color 0.25s ease-in;
       -o-transition: background-color 0.25s ease-in;
       transition: background-color 0.25s ease-in; }
     
    #evolt a:first-child:hover, #evolt a:nth-of-type(2):hover, #evolt a:last-child:hover
     { background-color: #fff; }
     
    #evolt a:first-child:before, #evolt a:first-child:after, #evolt a:nth-of-type(2):before, #evolt a:nth-of-type(2):after, #evolt a:last-child:before, #evolt a:last-child:after
     { content: "";
       position: absolute;
       margin: 0;
       padding: 0;
       border: 4px solid #000;
       -webkit-transition: background-color 0.25s ease-in;
       -moz-transition: background-color 0.25s ease-in;
       -ms-transition: background-color 0.25s ease-in;
       -o-transition: background-color 0.25s ease-in;
       transition: background-color 0.25s ease-in; }
     
    #evolt a:first-child
     { width: 95px;
       height: 110px;
       margin: 110px 0 0 100px;
       background-color: #f99;
       -webkit-transform: skew(0, -30deg);
       -moz-transform: skew(0, -30deg);
       -ms-transform: skew(0, -30deg);
       -o-transform: skew(0, -30deg);
       transform: skew(0, -30deg); }
     
    #evolt a:first-child:before, #evolt a:first-child:after
     { left: -103px;
       top: -61px;
       width: 95px;
       height: 110px;
       background-color: #f00; }
     
    #evolt a:first-child:hover:before, #evolt a:first-child:hover:after
     { background-color: #f99; }
     
    #evolt a:first-child:before
     { -webkit-transform: skew(0, 49deg);
       -moz-transform: skew(0, 49deg);
       -ms-transform: skew(0, 49deg);
       -o-transform: skew(0, 49deg);
       transform: skew(0, 49deg); }
     
    #evolt a:first-child:after
     { top: -119px;
       left: -53px;
       width: 94px;
       -webkit-transform: skew(41deg, 0);
       -moz-transform: skew(41deg, 0);
       -ms-transform: skew(41deg, 0);
       -o-transform: skew(41deg, 0);
       transform: skew(41deg, 0); }
     
    #evolt a:nth-of-type(2)
     { width: 95px;
       height: 110px;
       margin: 110px 0 0 -4px;
       background-color: #9f9;
       -webkit-transform: skew(0, 30deg);
       -moz-transform: skew(0, 30deg);
       -ms-transform: skew(0, 30deg);
       -o-transform: skew(0, 30deg);
       transform: skew(0, 30deg); }
     
    #evolt a:nth-of-type(2):before, #evolt a:nth-of-type(2):after
     { left: 95px;
       top: -61px;
       width: 95px;
       height: 110px;
       background-color: #0f0; }
     
    #evolt a:nth-of-type(2):hover:before, #evolt a:nth-of-type(2):hover:after
     { background-color: #9f9; }
     
    #evolt a:nth-of-type(2):before
     { -webkit-transform: skew(0, -49deg);
       -moz-transform: skew(0, -49deg);
       -ms-transform: skew(0, -49deg);
       -o-transform: skew(0, -49deg);
       transform: skew(0, -49deg); }
     
    #evolt a:nth-of-type(2):after
     { top: -119px;
       left: 47px;
       width: 94px;
       -webkit-transform: skew(-41deg, 0);
       -moz-transform: skew(-41deg, 0);
       -ms-transform: skew(-41deg, 0);
       -o-transform: skew(-41deg, 0);
       transform: skew(-41deg, 0); }
     
    #evolt a:last-child
     { clear: left;
       width: 110px;
       height: 95px;
       margin: -25px 0 0 142px;
       background-color: #99f;
       -webkit-transform: rotate(30deg) skew(-30deg, 0);
       -moz-transform: rotate(30deg) skew(-30deg, 0);
       -ms-transform: rotate(30deg) skew(-30deg, 0);
       -o-transform: rotate(30deg) skew(-30deg, 0);
       transform: rotate(30deg) skew(-30deg, 0); }
     
    #evolt a:last-child:before, #evolt a:last-child:after
     { left: 36px;
       top: 108px;
       width: 145px;
       height: 70px;
       background-color: #00f; }
     
    #evolt a:last-child:hover:before, #evolt a:last-child:hover:after
     { background-color: #99f; }
     
    #evolt a:last-child:before
     { -webkit-transform: rotate(41deg) skew(-49deg, 0);
       -moz-transform: rotate(41deg) skew(-49deg, 0);
       -ms-transform: rotate(41deg) skew(-49deg, 0);
       -o-transform: rotate(41deg) skew(-49deg, 0);
       transform: rotate(41deg) skew(-49deg, 0); }
     
    #evolt a:last-child:after
     { left: 93px;
       top: 58px;
       width: 145px;
       height: 70px;
       -webkit-transform: rotate(41deg) skew(41deg, 0);
       -moz-transform: rotate(41deg) skew(41deg, 0);
       -ms-transform: rotate(41deg) skew(41deg, 0);
       -o-transform: rotate(41deg) skew(41deg, 0);
       transform: rotate(41deg) skew(41deg, 0); }
     
    #evolt br { display: none; }
    

As you can see, I am leaning on vendor prefixes for the transformations, but I was pleased to see that all my selectors and styles applied across the range of browsers I stated above — even Internet Explorer 9. In IE8, it's just a string of links (because the br tag is hidden) and the first link has the light red background. Otherwise it degrades very gracefully for IE8.

Even better, it looks awesome in Lynx — just a list of links.

I probably could have approached the styles differently, and I could have used an ordered or unordered list for the links, but this was just an experiment to see how simple I could keep everything. You are, of course, welcome to make comments, suggestions and corrections in the comments.