Mobile Friendly Website


Doing it with style

two tone headings COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}

Post a comment

Current posts

Steve Williams:-
Very cool... :-)
Think you need to check the second example tho' (at least in Safari anywayz) ?
(10.12.2005, 20:34)

Steve, no access to Safari for testing. Any chance of a screenshot (anybody)?
(10.12.2005, 21:56)

Stu, you've done it again. I did not think it was possible to do something like this with just css so I've been having to make pictures for stuff like that.

one thing I did notice with firefox is when I highlight the top text and then move the cursor down the text scrolls, is there any way to keep that text in that spot and not scroll?
(10.12.2005, 22:06)

John, thanks for the comment. Are you using Firefox v1.5?
(10.12.2005, 22:30)

naw, I havent updated to the new firefox yet, I'm still using firefox 1.07. Do you think that it could be because of this version?
(11.12.2005, 01:14)

John, Firefox v1.5 fixes the mousewheel scroll bug in previous versions. It's a simple task to update and there are many benefits (including increased security).
(11.12.2005, 08:43)

Very nice using of content property and fixed height/overflow:hidden and absolute positioning in a relative box :P
(12.12.2005, 12:38)

will fix john's problem...
(13.12.2005, 21:51)

dexus - awesome fix! I knew mozilla had a lot of their own css2/3 codes but I never came across that one before. works like a charm

Stu, I prolly will update sooner or later.. I've just been being lazy lately ;o
(16.12.2005, 10:52)

nick may:-
Mac Safari Version 2.0.2 (416.13) (the latest, on Tiger 10.4.3) works fine and displays the same as Firefox 1.5 (Actually, the DeerPark special compile for g4 macs, but it is the same engine)
(18.12.2005, 14:09)

Hi Stu
I have a version of this I'd like you to have a look at if you have time

3D Headings


It's not perfect hence the cry for help

It works in both Mozilla / Firefox and IE

Let me know what you think
(26.01.2006, 03:27)

webecho, it would be better if you had the repeated text in the same heading.
<h1>SHADOW TEXT<em>SHADOW TEXT</em></h1> this way you could give the h1 style a position:relative; and the h1 em style a position:absolute to place it on top of the previous text. This way you only have the normal h1 margins (and it is easier to style).
But I think someone has already done this ;o)
(27.01.2006, 20:22)

No this is odd, in IE7B2 I only see the top half of the heading. The bottom half is cut out.
(08.02.2006, 21:24)

If you drag over and select the text in IE7, you can see that the line's where it should be ... but as for the text, where's the bottom half?!?
(20.03.2006, 12:16)

actually, IE6 shows this as a solid colored text, no split, and IE 7 only shows the upper split in color.
(23.01.2007, 20:36)

brandon, this is in the mozilla section so will not work in IE. I state in the information that IE will only see monotone text. This demo was done pre IE7 so I have now incorporated this browser into the stylesheet.
(23.01.2007, 21:47)


Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'


Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


Facebook Twitter rss feed Facebook Fan Page