Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Text shading, position of txt? 1

Status
Not open for further replies.

Mark411

Technical User
Sep 12, 2000
22
0
0
CA
Hi I tried searching for examples of how to shade text with the <H1> tag, but came up empty. I would like to creat a shading behind the H1 text. Does anyone know the right tags for cascade style sheets?
I have tried;
<style type=&quot;text/css&quot;>
h1
{
position: absolute;
top: 150px;
left: 100px
}
h2
{
position: absolute;
top: 152px;
left: 102px
}
</style>
but this looks crappy because the H2 is in front of the h1 text, I wanted behind green h1. The style sheet code below;
H1 {
font-family : &quot;Lucida Calligraphy&quot;;
color: Green;
}
H2 {
font-family: Lucida Calligraphy;
font-size: x-large;
font-style: normal;
color : Gray;
white-space: normal;
}
Also is there any way to shade it a lighter grey?
Thanks for any help.
regards Mark
 
Have you tried: <h1 style=&quot;background-color: #color_value&quot;>text</h1> ?
 
If you design exclusively in IE then there are some css filters that will add a drop shadow (which is what I think you're trying to do. Check out faq215-3207

You could also try setting the z-index values of your headers - that might make it possible to place the h1 over the h2.

Use hex or rgb values for your colours has you have greater choice than naming them

MrBelfry
 
Hi!

Add the following to your css code. z-index tells which element is above and which below. higher numbers are above the lower.

<style type=&quot;text/css&quot;>
h1
{
position: absolute;
top: 150px;
left: 100px;
font-family : &quot;Lucida Calligraphy&quot;;
color: Green;
z-index: 1;
}
h2
{
position: absolute;
top: 152px;
left: 102px;
font-family: Lucida Calligraphy;
font-size: x-large;
font-style: normal;
color : #CCCCCC;
white-space: normal;
z-index: 0;
}
</style>

Hope it helps. Great looking trick though. As for the color, normal html codes apply to css as well.
 
Thanks MrBelFry, exactly what I was looking for!
Thanks to Vragabond & mrDrive as well:-D
 
Looks like I need to learn to type a little faster :)

Started my reply before MrBelfry's otherwise wouldn't even bother :)
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top