Text generator banner easter background border cool font

Just a simple demo to show how text can be transformed to look 'solid' and have a natural looking shadow effect without using any extra markup.

This makes use of CSS skew, multiple text shadows and the :before pseudo-class to apply the text shadow effect.

The full demo with solid text and shadow can be seen in Firefox, Safari and Chrome. The solid text only is seen in Opera and the skewed text only seen in IE9 and IE10.

WebKit supports the cool background-clip CSS3 property, which you can use to do some pretty neat stuff. The first time we touched on it was the iPhone Slide-to-unlock idea where we set a gradient to animate through the background of the text. Then we touched on it again for the transparent borders idea.

Let’s take a look at using it to have an image be visibile only through the letters of the text. One more cool thing that we no longer need to drool over print designers ability to do.