cott Cheng

"S" in CSS

By “S” I’m not referring to “style” or “sheets”… I’m talking about the “S” in my logo – I remade it with CSS (Take a look at upper left if you haven’t noticed it). It’s largely inspired by Nicolas Gallagher’s genius pure CSS GUI icons.

A closer look:

It’s one HTML element!
1

<div id="s"></div>

Here is how I did it:

First draw a circle using border-radius.

Base circle
1
2
3
4
5
6
7
8

#s {
  position: relative;
  width: 1em;  /* make it scale with font size */
  height: 1em;
  border: 1px solid $color;
  border-radius: 1em;  /* actually slightly over 0.5em is enough */
  /* vendor prefixes emitted for succinctness */
}

Then cover up the upper-right and lower-left part of the circle using a rotated :before pseudo element.

:before cover up
1
2
3
4
5
6
7
8
9
10
11
12

#s:before {
  content: ' ';
  position: absolute;
  display: block;

  width: 0.707em;  /* = sqrt(2) / 2 */
  height: 1.2em;  /* exceed 1em to cover the border */
  top: -0.1em;  /* = (1.2 - 1) / 2 */
  left: 0.1465em;  /* = (1 - 0.707) / 2 */
  background-color: #fff;  /* fill with white */
  transform: rotate(45deg);  /* rotate 45 degrees clockwise */
}

The :before element is actually like this:

Last, connect the two quarter circles with a solid :after pseudo element.

:after horizontal line
1
2
3
4
5
6
7
8
9
10
11

#s:after {
  content: ' ';
  position: absolute;
  display: block;

  height: 1px;
  left: 0;
  right: 0;
  top: 0.5em;
  background-color: $color;
}

That’s it! Now I can scale it, change its color, make it “bold” or add some drop shadow without touching Ai.

Comments