Posted by RobElliott on 01 Jul 2009 10:17, last edited by GoVegan on 09 May 2010 06:04
The release of Firefox 3.5 has provided easier functionality to create text with shadows.
What we are trying to achieve
This is an example of a simple text shadow
This is an example of a harder edge text shadow
This is an example of a fuzzy blur
This is an example of multiple shadows
CSS
In the same way as with http://community.wikidot.com/howto:boxes-with-shadows you can create a class in your custom CSS giving the width, color and other properties for the text. For example, the black box above has a class called .shbox-black with the following properties and values. In this example we haven't added the text shadow property as we will add that into the page inside a div.
.shbox-black {
background: #000000;
border: 1px solid #000000;
text-align: center;
color: #ffffff;
width: 40%;
margin-left: 5%;
-moz-border-radius:25px;
font-size: 1.5em;
}Syntax
Unlike with the -moz-border-radius, you don't use -moz before the text shadow. It just gets entered as text-shadow then the values, for example text-shadow: 2px 2px 3px #000;
Values
- The first value is the horizontal offset. You must set this value.
- The second value is the vertical offset. You must set this value.
- The third value is the blur radius. This value is optional.
- You then set the colour for the shadow.
Adding a Div to your page
But you don't have to enter a custom class. You can just add the text shadow property into a div in your page as shown below:
Simple text shadow
[[div style="text-shadow: 2px 2px 3px #dddddd;"]]
This is an example of a simple text shadow
[[/div]]This is an example of a simple text shadow
hard edges - remove the blur:
[[div style="text-shadow: 2px 2px 0 #888;"]]
This is an example of a harder edge text shadow
[[/div]]This is an example of a harder edge text shadow
Fuzzy blur:
[[div style="text-shadow: 0px 0px 5px #000;"]]
This is an example of a fuzzy blur
[[/div]]This is an example of a fuzzy blur
Multiple text shadows:
This example uses the .shbox-black class as well as specifying the shadow parameters:
[[div class="shbox-black" style="text-shadow: 0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200;"]]
This is an example of multiple text shadows
[[/div]]This is an example of multiple shadows
Browser Suppport
- Firefox requires version 3.5+
- Opera requires version 9.5+
- Safari requires version 1.1+
- This is supported by Chrome
- Internet Explorer doesn't support the text-shadow property but degrades nicely and just gives the normal text.
Author
RobElliott. Please visit his/her userPage.
Rate this solution
If you think this solution is useful, please increase the rating.