CSS envelope and letter

I came across a tutorial online that caught my eye. It wasn’t the tutorial itself that I liked, though; it was the image they used in the header.

September 25, 2013

I thought to myself, self, we can make that entirely in CSS. So I did. It works in Chrome, Firefox, and Internet Explorer.

This is the original image:

And this is the result. (I added a slight drop shadow to make the contrast a bit gentler on my eyes.)

Everything looks nice except for the diagonal edges of the envelope. Those are really jaggy. How do you fix that? The answer is surprisingly easy. Simply use this CSS on the offending element (accounting for vendor prefixes as necessary):

transform: rotate(360deg);

The idea is that when you do a transform on an element, the browser will do its best to smooth out any rough edges. So we simply rotate it completely – not changing its position, but taking advantage of the browser smoothing out the edges after the rotation. Nice, huh? (And no, rotating it zero degrees does not do anything.)

And here is the finished result.