Smashing Magazine Logo
Smashing Magazine logo created in pure CSS3. To create the main logo, :after and :before pseudo elements of the span element are used. The first pseudo element is used to create the box while the second one is used to create the "S". The main problem that arised here was to replicate the background of the box, which is something like a gloss effect with a curved line which is obviously not possible with the linear-gradients or the box-shadows. So, I tried using two radial-gradients (one at the top right corner and other at the bottom left corner) which worked great.
Another problem was the "G" which has an arrow at it's end. So I used "C" instead of the "G" and created two arrows with :after and :before pseudo elements of the h1 element using the border trick and joined them together. Then finally placed them at the correct position and there I give you, Smashing Magazine's logo in pure CSS3!