|
| |
|
|
Edge
Posts: 164
Joined: 10/12/2004
From: South Carolina
Status: offline
 |
3D Text and External Style Sheet - 6/16/2006 14:32:38
Is it possible to create 3D text effects using external linked style sheets?
Like the embossed or shadow text here: http://www.dynamicdrive.com/dynamicindex10/3dtext.htm
I would like to have my H1 text have some embossed or shadow effect, and have the ability to change colors using the style sheet for all pages.
If so, please help me with the code. Thanks, Ed
_____________________________
Time is short, are you ready?
|
|
|
|
Edge
Posts: 164
Joined: 10/12/2004
From: South Carolina
Status: offline
|
RE: 3D Text and External Style Sheet - 6/16/2006 17:24:54
Thanks,
I understand changing the colors, but meant I'd like to use the external style sheet to set up the shadow and colors (including the shadow).
I found the link below, but cannot get it to work. Seems pretty straightforward, but I am not having any luck with it.
http://www.w3.org/TR/REC-CSS2/text.html#text-shadow-props
Ed
_____________________________
Time is short, are you ready?
| |
|
|
|
Edge
Posts: 164
Joined: 10/12/2004
From: South Carolina
Status: offline
|
RE: 3D Text and External Style Sheet - 6/17/2006 12:58:17
Okay. I found one that works in both IE and FF.
http://www.killersites.com/mvnforum/mvnforum/viewthread?thread=3574
Now check this out: http://www.edgesz28.com/edgesz28/website-tools/atest3.htm
CSS:
.shadow {position: relative; font: 1.5em verdana, arial; font-weight: bold; font-size: 18pt; color: gray;}
.text {position: absolute; left: -2px; top: -2px; font-weight: bold; font-size: 18pt; color: red;}
HTML:
<div class="shadow">MY SHADOW TEXT<span class="text">MY SHADOW TEXT</span></div>
My only problem now is getting it centered. Just trying to center it using FP's center icon doesn't work. How can I get it centered and both the text and shadow center together?
Thanks, Ed
< Message edited by Edge -- 6/20/2006 14:47:29 >
_____________________________
Time is short, are you ready?
| |
|
|
|
Tailslide
Posts: 5972
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
RE: 3D Text and External Style Sheet - 6/17/2006 13:04:16
Add this into your stylesheet .shadow class
width:10.5em;margin:0 auto;text-align:center;
(text-align center for IE and the width and margin:0 auto for all standard compliant browsers)
edit: changed the px measurement for the em width that way it expands properly with the text when resized.
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Edge
Posts: 164
Joined: 10/12/2004
From: South Carolina
Status: offline
|
RE: 3D Text and External Style Sheet - 6/17/2006 13:10:18
I had another thought while you were responding. I can just put the code into a table which is centered. That works too.
<div align="center">
<table border="0" cellspacing="0" cellpadding="0" id="table1">
<tr>
<td><div class="shadow">MY SHADOW TEXT<span class="text">MY SHADOW TEXT</span></div></td>
</tr>
</table>
</div>
Thanks, Ed
_____________________________
Time is short, are you ready?
| |
|
|
|
curious monkey
Posts: 543
Joined: 4/28/2006
From: The lower handle of US
Status: offline
|
RE: 3D Text and External Style Sheet - 7/10/2006 14:41:26
no offense.... but why not just make a gif the heading you want.... it just seems like so much extra coding for something that can easily be done using an image...
just my .03 copper Abes
_____________________________
The way it is now, the asylums can hold all the sane people but if we tried to shut up the insane we should run out of building materials.
| |
|
|
|
Edge
Posts: 164
Joined: 10/12/2004
From: South Carolina
Status: offline
|
RE: 3D Text and External Style Sheet - 7/10/2006 15:12:06
A couple websites I do are for race car drivers. Their sponsorship is prone to vary from year to year, so I decided to redo their sites using an external CSS file.
After reading abbeyvet's CSS tuturial and talking with a friend, I was convinced to use as much CSS as possible with an external style sheet so that if sponsors change (and they will), I can update the sites colors with one sheet.
I wanted 3-d titles on the pages, but with a jpg or gif file, the color will not update. The CSS code will.
Otherwise, I would have never thought about and just used a picture instead.
The more I learn about the power of CSS, the more excited I get! I really like CSS menus and buttons, for there are so many options with relatively simple code.
Ed
_____________________________
Time is short, are you ready?
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
