Shadow text
If you are using Firefox 3.5+, Opera 9, Safari 1.1 or a pretty new version of Google Chrome, you will see some shadows around the text above. That's all done with CSS. This is the code used for the above font:
{ text-shadow: 2px 2px 2px #BFBFBF; }
Playing around with this, you can achieve some other cool effects like:
Some random text
{text-shadow:0 0 4px #fff, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;color:#fff;}
text-shadow was included in CSS2, removed from CSS2.1 and returns in CSS3. Also, CSS3 introduced the
box-shadow property which is supported by Firefox 3.5+, Safari 3.1 only:
There should be a nice grey fading shadow under this box..
CSS for the above shadow box:
{ box-shadow: 10px 10px 5px #888; -webkit-box-shadow: 10px 10px 5px #888; -moz-box-shadow: 10px 10px 5px #888; padding: 5px 5px 5px 15px; background-color: #EEEEEE; }
Or this:
There should be a hard black shadow above this one, and the shadow should follow the rounded corners.
Which has the following CSS code:
{ box-shadow: -10px -10px 0px #000; -webkit-box-shadow: -10px -10px 0px #000; -moz-box-shadow: -10px -10px 0px #000; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 5px 5px 5px 15px; background-color: #EEEEEE; }
Note: Adding -moz- and -webkit- in front of box-shadow and border-radius is required so that the shadow and rounded corners will render proprely in Firefox and Safari.
In case you don't use a CSS3 compatible browser, here is a screenshot of Firefox 3.5 browsing this post:
For creating advanced text-shadow and box-shadow, try this website.
