Previous Message
Next Message

Solution: Drop shadow effect on Text with CSS

Sent by Peach Lynda L CTR USAF 96 CG/SCTA on 14 February 2006 19:07


Follow-up to original email sent 7 Feb 2006

Was working toward a shadow effect on text (especially in a header) but
could find nothing that didn't look "fuzzy". One solution at
http://www.psacake.com/web/bz.asp works in IE and Firefox (the primary
browsers that hit our site) but the solution requires the header be
entered twice. That wasn't acceptable to my needs.

The potential end result uses both IE and JavaScript. It works on both
IE & Firefox although the end result is NOT the same. Don't know why. I
suspect it has to do with the way padding is handled by the browsers.

The code within the page is simple:
<h1 id="siteName" class="shadow">Eglin Frequently Asked Questions
(FAQ)</h1>

Note that the id of siteName was something already in the page.
Everything that works the shadow is in the 'shadow' class and in the
JavaScript.

It works -- but how does it look really? Is it worth the trouble? Would
like feedback on both questions. 

Example using the JavaScript (view the source for the script) and CSS
http://www.eglin.af.mil/faq.shtml 
	
	CSS: http://www.eglin.af.mil/mastercss/master3col.css
	and: http://www.eglin.af.mil/misc/site3col.css
The two classes for shadow are on the page itself. Until I determine
whether this is a "keeper", they won't be placed in "master3col.css".

If you are searching for such a solution, this is one way to achieve it.
The psacake.com solution is another. TANSTAFLL - If you don't want
JavaScript, then you live with the double entry. No double entry, then
live with JavaScript.

And many many thanks to fellow reader Roger Roelofs for the concept and
code. His generosity is greatly appreciated.

Lynda Peach
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread: