Skip to page content or Skip to Accesskey List.

Work

Main Page Content

The Evolt Org Logo Using Only Css2 And Css3

Rated 4.21 (Ratings: 2)

Want more?

  • More articles in Code
 
Picture of aardvark

Adrian Roselli

Member info

User since: 14 Dec 1998

Articles written: 85

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.

A founder of evolt.org, Adrian Roselli (aardvark) is the Senior Usability Engineer at Algonquin Studios, located in Buffalo, New York.

Adrian has years of experience in graphic design, web design and multimedia design, as well as extensive experience in internet commerce and interface design and usability. He has been developing for the World Wide Web since its inception, and working the design field since 1993. Adrian is a founding member, board member, and writer to evolt.org. In addition, Adrian sits on the Digital Media Advisory Committee for a local SUNY college and a local private college, as well as the board for a local charter school.

You can see his brand-spanking-new blog at http://blog.adrianroselli.com/ as well as his new web site to promote his writing and speaking at AdrianRoselli.com

Adrian authored the usability case study for evolt.org in Usability: The Site Speaks for Itself, published by glasshaus. He has written three chapters for the book Professional Web Graphics for Non Designers, also published by glasshaus. Adrian also managed to get a couple chapters written (and published) for The Web Professional's Handbook before glasshaus went under. They were really quite good. You should have bought more of the books.

The access keys for this page are: ALT (Control on a Mac) plus:

evolt.org Evolt.org is an all-volunteer resource for web developers made up of a discussion list, a browser archive, and member-submitted articles. This article is the property of its author, please do not redistribute or use elsewhere without checking with the author.