3D Text and External Style Sheet (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

Edge -> 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



Tailslide -> RE: 3D Text and External Style Sheet (6/16/2006 14:38:11)

Changing colours is easy in an external stylesheet - you'll have something like:

h1 {color:red;}

Which you change to

h1 {color:blue;}

and it will change the h1 headings to blue across every page on your site that is linked to the stylesheet.

Shadows are harder (never tried this myself as it's too "hacky")

Here's an article on it though: http://www.workingwith.me.uk/articles/css/cross-browser-drop-shadows



Edge -> 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



jaybee -> RE: 3D Text and External Style Sheet (6/16/2006 17:32:50)

I'm not sure how well it's supported in the browsers. W3schools doesn't give any details which is odd. The only thing I've found so far is that Safari works with it.

OK, it's css3 and that's still in draft. This may help you do it, otherwise it's back to the grapics package.



Tailslide -> RE: 3D Text and External Style Sheet (6/17/2006 2:33:45)

To my knowledge the text-shadow CSS property only currently works in Safari.



Edge -> RE: 3D Text and External Style Sheet (6/17/2006 12:24:59)

Check this out: http://www.bigbold.com/snippets/posts/show/1860

I made a few additions and modifications and it works great in FF, but not IE.

See my tests here:
http://www.edgesz28.com/edgesz28/website-tools/atest2.htm
http://www.edgesz28.com/edgesz28/website-tools/atest.htm

Ed




Tailslide -> RE: 3D Text and External Style Sheet (6/17/2006 12:52:38)

IE doesn't support :after



Edge -> 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



Tailslide -> 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.



Edge -> 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



Tailslide -> RE: 3D Text and External Style Sheet (6/17/2006 13:11:58)

It's an awful lot of extra markup though!



curious monkey -> 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



Edge -> 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



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125