I’ve been impressed with icons created in CSS3 and decided to have a go at it. As an experiment I took Dustin Curtis’ markdown mark and made a version using only HTML and CSS. This is the result (separate page):
Unfortunately, due to two issues in current browsers the icon is not pixel perfect.
The M portion of the icon is rendered using the
:before pseudo tag with a
content attribute. By default text in browsers on a Mac (I haven't tested on Windows) is rendered using sub pixel antialiasing. I was able to make the drawing of the M more accurate by setting
antialiased but the end result still has 1 pixel grayish border on both sides of the M. It should be possible to reproduce the M using CSS shapes, but that's outside the scope of my experiment.
-webkit-font-smoothing also allows
never but the result is awful:
Ironically, the second issue is the lack of antialiasing on borders. Dustin's original arrow shape is very crisp whereas my version has jacked edges. The most obvious solution is to render a div with a solid background and use
:after to overlay two rotated rectangle. This would create the same effect but probably without the jacked edges. I was however unable to get this to work without the rotated rectangles overlapping others parts of the icon.