DreamHost Logo ala CSS

This was done by Clee, my coworker. I tweaked it, prefacing things with dh to make it more portable and then slapping it into a shortcode so I could embed it here:

The code is as follows (you can see his original code at codepen):

<div id="dhbackground">
  <div id="dhmoon">
    <div id="dheclipse">
      <div id="dhchevron">
      </div>
    </div>
  </div>
</div>

@dhbg: rgba(27, 53, 100, 1);
@size: 240px;
@corner: (0.16 * @size);
@offset: (@corner - 6px);
@chevron: (0.36 * @size);

div#background {
  background-color: @dhbg;
  width: @size;
  height: @size;
  border-radius: @corner;
  margin: auto;
}

div#moon {
  background-color: #fff;
  width: @size - (2 * @corner);
  height: @size - (2 * @corner);
  position: relative;
  top: @corner;
  margin: auto auto;
  border-radius: 50%;
}

div#eclipse {
  background-color: @dhbg;
  position: relative;
  width: @size - (2 * @corner);
  height: @size - (2 * @corner);
  top: -@offset;
  left: -@offset;
  border-radius: 50%;
}

div#chevron {
  background-color: rgba(51, 104, 156, 1);
  position: relative;
  width: @chevron;
  height: @chevron;
  left: @offset;
  top: @offset;
  border-radius: @corner 0px (2 * @corner) 0px;
}

Now actually that’s not CSS, it’s LESS, which I can’t inline apparently (or maybe I just don’t know how). Either way, it’s a funky cool CSS trick!

Ipstenu (Mika Epstein)

I’m Mika (aka Ipstenu) and I’m complicated. I’ve been on the net since the days of dedicated terminals and Novation CAT modems and solved Missionaries and Cannibals (or Goats and Cabbages) before I was six, and blog about WordPress and technical/computer things at Half Elf on Tech.

See Full Bio