CSS Experiments with PHP logo

The optimistic motivation behind this experiment was to get a scalable pure CSS logo from a low-res image.

PHPAdvisories is a bot that tweets anything that ends up in the site's RSS digest. Its profile image is just a re-use of the old phpsecure.info logo that was created 11 years ago from the official PHP logo.

The recent addition of the challenge flair on reddit.com/r/css brought me some inspiration along with some confidence. While I was only looking for fun, participating in some of those challenges unexpectedly taught me a lot of new tricks.

So this is where I started looking for familiar grounds where to exercise this new digital wiseness that was recently unlocked to me...

Producing the PHP logo using only one div.

The closest result using web-safe fonts was with Arial. But I wasn't happy with the angle of the letters, even when using a @font-face version of Handel Gothic I found by searching on github.

The problem is that by using external vector-rendered elements such a fonts or svg, it stops being a pure CSS integration. If an external element is allowed, why bother with rendreing text and gradients when SVG can handle it?

Considering a few alternative options to avoid rendering browser fonts.

While the first attempt was using transparent innerText to size the div, and the ::before pseudo-class content to render the text, the second attempt had to get rid of any text content. How could I possibly draw a and a that look better than Arial's using only CSS ? The turing path was more like a tourette's path:

• Using SVG font by recycling the path found in the PHP SVG logo
  [fail] Same as using @font-face, the result is not pure CSS
• Drawing pixels using box-shadow
  [fail] results are not scalable
• CSS shapes
  [fail] Very seducing, but bad browser coverage

I was still bouncing between posts and tutorials when, with a perfect timing, CSS Sans popped up on /r/css.

While everybody was whining about the lack of support for bold, underline, shadow and even lowercase, I knew this was what I was looking for in order to shape the and .

I had to give up with the one-div limitation, and there's still room for improvement in the way the letters are shaped, but the result is far closer than the one with the @font-face and that's enough to call it a success.

For some reason, the best result for Chrome is with the @font-face example while Firefox prefers the vectorized exmple. While Chrome fails a emitting a consistent drop-shadow and even produces artefacts in the borders, Firefox fails at producing a good text-shadow on the webfont.

Conclusion

CSS3 is awesome and - unlike browsers - full of surprises.