Making a pretentious logo using CSS

Date Tags css / html

My pride in not being a "front end guy" is notoriously obnoxious and obviously compensatory. On the other hand, having crappy front ends for my projects might help disguise deeper flaws and thus actually be an advantage.

Came a time, however, when I wanted to make myself a logo. Faced with the horrific prospect of doing actual art, I had no real choice but to use markup. Make no mistake, the linguae francae of our browsable universe -- html, css and javascript -- are a collective insult to science and beauty. But you can do cool stuff sometimes.

My new company, is what is known as a disregarded entity. It currently exists only so that I can feel some emotional distance from the large financial institution benefiting from my sage advice (and, as a free-and-easy consultant, skip out periodically to attend alumni day at Hacker School). But even a shell company deserves a pretentious logo that alludes to graph theory and functional programming.

The idea is that I want to spell out "Acyclic," but with the horizontal bar in the "A" replaced with a bar of a contrasting color. This resultant "$\Lambda$" alludes stylishly to my appreciation of functional programming, while the exiled cross bar emphasizes my abhorrence of topological cycles. Plus, you can read it without automatically pronouncing an "L." (KI$\Lambda$ Motors, I'm looking at you.)

To realize this aesthetic marvel, we will use the CSS position property to overlay three bits of text, from front to back:

  1. A maroon colored em-dash, surrounded by a thin line of shadow so it stands out.
  2. In phosphor green, the non-word $\Lambda$cyclic.
  3. The full word "Acyclic," properly spelled so the you can search for it on the page, but cloaked in the same color as the background.

Altogether, it looks like this:

Λcyclic LLC
—
Acyclic LLC
  • *
  • *
  • *

The html for the the three layers is just:

  <div id="title1">&Lambda;cyclic LLC</div>
  <div id="title2">&mdash;</div>
  <div id="title3">Acyclic LLC</div>

The three #title id's are more or less stolen from Github Pages "hack" theme, with very slight tweaks. The only change for the $\Lambda$cyclic layer is positioning dictated by the last four lines:

#title1 {
  background: #151515;
  font-size: 50px;
  line-height: 1.5;
  font-weight: bold;
  font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
  color: #b5e853;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1),
               0 0 5px rgba(181, 232, 83, 0.1),
               0 0 10px rgba(181, 232, 83, 0.1);
  letter-spacing: -1px;
  -webkit-font-smoothing: antialiased;
  /* Position absolutely at the upper left */
  position: absolute;
  z-index: 0;
  top: 0px;
  left: 0px;
}

In #title2, for the em-dash, there are a few additional changes:

  background: rgba(0, 0, 0, 0, 0);       /* transparent background */
  color: #800000;                        /* maroon */
  text-shadow: 0px 1px 0px #000000,      /* black shadow above and below 
               0px -1px 0px #000000;
  z-index: 1;                            /* one layer closer to the viewer */
  left: -2.5px;                          /* nudge it slightly to the left */

Finally #title3 governs the invisible but searchable and highlightable Acyclic:

  /* As #title1, but: */
  color: #151515;   /* same as background */
  z-index: -1;      /* furthest away, so it doesn't block anything */

One last trick is to extract a .png of the logo from a screen shot and then refer to it in the <head> of pages you need to show up properly in previews:

    <meta property="og:image" content="http://acyc.lc/images/bigA.png" />
    <link rel="image_src" href="http://acyc.lc/images/bigA.png" />

For extra credit, please tell me just what is the religious significance of a bisected A.

Comments

comments powered by Disqus