CSS has come a long damned way from the days of having to use tables because positioning wasn’t available. (Sure, dating myself a bit, but as they say: you’re only young once but you can be immature forever.) Time was that if one wanted any sort of effect on text – and we’re talking system installed fonts here, nothing fancy – you had to create an image. Once the semantic web was encouraged, you then had to replace a heading tag with said image to get the best SEO as well as have the creative look. Of course, every browser had different support for the technique so there were dozens of image replacement hacks. (If you’re interested in a history lesson, CSS-Tricks has an entire page dedicated to the different techniques.) Nowadays CSS can do a helluva lot of basic text effects directly in the browser, with fantastic cross-browser support.
In my travels around the internet, I see many interesting portfolios for both designers and developers. Often these portfolios include images of the web site or application as it would look in a desktop window, usually an OSX (Mac) window. I really liked the effect, and I wanted to recreate it in CSS. Once I had done that I thought it was pretty cool, and I wanted to share it so I made a Sass mixin, which proved to be more enlightening that I had originally anticipated.