4 replies [Last post]
fatfreddy
fatfreddy's picture
Offline
Enthusiast
Deep down under
Last seen: 13 years 43 weeks ago
Deep down under
Timezone: GMT+8
Joined: 2005-03-25
Posts: 390
Points: 0

http://www.webechodesigns.com/articles/css/heading-experiment.htm

Ok ... It's not perfect but there definitely potential here

I have been experimenting with 3D headings that work in both Firefox and IE

Any comments on other browsers would be great - It might get shot down in flames!

There's an explanation on the example page about what works and what doesn't so if any of the more talented CSS guru's here could chip in, maybe we can get it to work

Cheers

Freddy

The only reason for time is so that everything doesn't happen at once
--Albert Einstein

Accessible webdesign Australia - webechodesigns

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 7 years 10 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

3D Headings

I'm not seeing it in FF 1.5/ Mac Sad

I would add some padding over the footer and perhaps lighten the text in the footer as well. It looks too much like content gone askew.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 33 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

3D Headings

I guess I should have mentioned it on the other thread. In FF1.0.7 there is a gap in the borders of about 0.5em between #title and #wrapper. Perhaps some escaping, collapsed margin.

This is a case for position:absolute, not position:relative.

I'd put position:relative on the h2. Position the primary text normally without a span. Position the 3d effect text absolutely with a z-index of -1 and use left/top to establish your shadow amount. That should hold up through any amount of text resizes. See example. Ideally you'd implement this in javascript to avoid unstyled pages looking really messy.

fatfreddy
fatfreddy's picture
Offline
Enthusiast
Deep down under
Last seen: 13 years 43 weeks ago
Deep down under
Timezone: GMT+8
Joined: 2005-03-25
Posts: 390
Points: 0

3D Headings

Wolfcry911 - shame

Chris..S - I should have fixed that gap between HEader & Wrapper now - I'm using FF 1.5 and it doesn't show up?

Yeah the unstyled thing is going to be a problem

Stu Nicholls has a version of this here
but his doesn't work in IE

Therer must be a happy medium there.

Anyway, It's Australia day so beers and the beach are calling and this will have to wait until tomorrow

Will be a nnice litle trick if we can get it right

Freddy

Happy Australia Day!

The only reason for time is so that everything doesn't happen at once
--Albert Einstein

Accessible webdesign Australia - webechodesigns

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 33 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

3D Headings

My example page is now updated with javascript to add shadowed text unobtrusively.