tags:

views:

7462

answers:

4
Q: 

Complex CSS Text-Shadow and cross browser compatibility 

<html>
<body>
    <style type='text/css'>
     body {
      font: 100% myriad, arial, sans-serif;
      font-size: 12px;
      color:white; 
      font-weight:bold;
     }
     .shadowtext {
      text-shadow:-0.1em 0 0.1em #626262, 0.1em 0 0.1em #626262, 0 -0.1em 0.1em #626262, 0 0.1em 0.1em #626262;
     }
     .shadowtext_text {
      text-shadow:0 0 0.3em #000
     }
    </style>
    <DIV class="shadowtext">0 %</DIV> 
    <DIV class="shadowtext">10 %</DIV> 
    <DIV class="shadowtext">25 %</DIV> 
    <DIV class="shadowtext">95 %</DIV> 
    <DIV class="shadowtext">0123456789</DIV> <br>
    <DIV class="shadowtext_text">0 %</DIV> 
    <DIV class="shadowtext_text">10 %</DIV> 
    <DIV class="shadowtext_text">25 %</DIV> 
    <DIV class="shadowtext_text">95 %</DIV> 
    <DIV class="shadowtext_test">0123456789</DIV> 
</body>
</html>

I am trying to get shadowtext_test to mimic the look of the text-shadow of shadowtext, without the over complicated longness. Anyone have any ideas?

Also... I want it to look about the same on all browsers, or atleast IE7, IE8 and older firefox. Anyone know the best way to approach this. I didn't see an easy way to do multiple blurs/shadows/glows on IE using filter.

+6  A: 

Believe me, it would be better if you go ahead with this jQuery plugin (Link no longer valid.). Because, we had tried doing it the CSS way, and we were almost dead trying to make it work the same in IE6/IE7/IE8/FF2/FF3/Safari :DOH:

Edit

As a side note, we weren't 100% successful in making this work using CSS and HTML tweaks in ALL the browsers ;( So, according to me, scripting is a way to go. You can try the jQuery library I've mentioned or you can use the one mentioned by Alexander & Jason.

Kirtan  2009-07-22 09:24:34
I believe the plugin this was about is located here: http://plugins.jquery.com/project/DropShadow and here: http://dropshadow.webvex.limebits.com/
BHare  2010-08-29 15:54:15
+1  A: 

jQuery can Help You

http://kilianvalkhof.com/2008/javascript/text-shadow-in-ie-with-jquery/

link text

Alexander Corotchi  2009-07-22 09:27:56
+1  A: 

First question:

you are really at the mercy of the browser to determine how the shadow gets rendered, and since the browser is concentrating most of the color right under the numbers, there isn't much you can easily do to darken it. Your initial approach is probably the most straight-forward. If anything, I would be a little more verbose to ensure the text glow was evenly distributed:

text-shadow: #777 0 0 0.1em, #777 0 1px 0.1em, #777 1px 1px 0.1em, #777 0 1px 0.1em, #777 -1px 1px 0.1em, #777 -1px 0 0.1em, #777 -1px -1px 0.1em, #777 0 -1px 0.1em, #777 1px -1px 0.1em;

Second:

The text-shadow css2 property is not supported in several browsers, including IE or Firefox (prior to 3.5). There are hacks to get it to work in those browsers, but they aren't always pretty.

You can use an IE filter property to add support for IE; here's a decent tutorial: http://kilianvalkhof.com/2008/design/almost-cross-browser-text-shadow/

Support for older versions of Firefox is a lot trickier, since any workaround you created would need to be hidden from Safari. If this is an issue, I could possibly suggest something.

Here is a list of browser support for css propoerties, if that would help you make your decision: http://www.quirksmode.org/css/contents.html

The jQuery solution that Alexander Corotchi links to implements the available css solutions without resorting to hacks.

Edit:

I've been thinking about this some more; here are additional thoughts:

The real problem is that you are trying to use the text-shadow property to recreate the effect of the css3-spec text-outline property (which has yet to be implemented by any of the browsers). Any solution you come up with will probably be less than ideal unless you can wait for the text-outline property.

It might be possible, though, to create an alpha-channel png and then use additional markup (or javascript) to make it the background for each character. You'd have to carefully control the dimensions of your text, but that could be a possible cross-browser solution (except for IE6 which doesn't support alpha transparency very well).

Jason Francis  2009-08-07 20:44:21
A: 

Wish I could vote down the above - Using jQuery for this is terrible as it just duplicates the text in the DOM. use text-shadow and a filter for ie.

text-shadow is visual enhancement and shouldn't need to look exactly the same in every browser.

 2009-12-05 01:03:31

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?