A good[ish] website
Web development blog, loads of UI and JavaScript topics
Here’s some text shadow effects like outline, fake bold, and blurry text.
The length and the color values can have following two orders:
offset-x | offset-y | blur-radius | color
color | offset-x | offset-y | blur-radius
text-shadow: 6px 6px 6px #33ffcc;
You can put the color first and skip the blur-radius:
text-shadow: #33ffcc 6px 6px;
You can also skip the color and it uses the text color:
text-shadow: 6px 6px;
You can have multiple shadows, this way you can make outlines and other more crazy things:
text-shadow:
4px 4px 0 #33ffcc,
-4px -4px 0 #33ffcc,
4px -4px 0 #33ffcc,
-4px 4px 0 #33ffcc;
You can see it better if they all have a different color (kind of cool effect):
text-shadow:
4px 4px 0 red,
-4px -4px 0 blue,
4px -4px 0 gold,
-4px 4px 0 green;
This way you can also do fake bold text, it won’t look as good as real bold, but it’s passable in smaller sizes. This might come handy when you’re forced to use a font that doesn’t have a bold cut, like Monaco.
text-shadow:
2px 2px 0,
-2px -2px 0,
2px -2px 0,
-2px 4px 0;
Using the same pattern than above, but adding some blur, you can get a nice out-of-focus effect:
text-shadow:
2px 2px 3px,
-2px -2px 3px,
2px -2px 3px,
-2px 4px 3px;
The embossed effect only works on a background color.
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
You could go berserk with the amount of shadows. These are just the basics.
Comments would go here, but the commenting system isn’t ready yet, sorry.