Showing posts with label engraved text. Show all posts
Showing posts with label engraved text. Show all posts

Tuesday, November 17, 2009

tickerTXT site re-design: the engraved header text

It shouldn't be a problem, text / font effects such as text-shadow or font-effect were defined in CSS2 , omitted in 2.1 and re-introduced in CSS3.  Unfortunately only Chrome, Safari and Konquerer are supporting text-shadow.  Firefox only from 3.1 onwards and Internet Explorer, well...

The engrave effect using the text-shadow setting would be likte this

h1 {
text-shadow: 1px 1px white, -1px -1px #333;
}

But unfortunately, the only way to make shadow, engrave, emboss effects work for everybody is to use CSS-hacks (workarounds) or javascript. Just google "CSS-hack text-shadow" and you will find some, though to us they all look mighty complicated.  Mike Matas has used a Javascript and so will we.