Feature: Implement text-shadow about pie HOT 17 OPEN

I haven't worked out all of the details yet, and it uses the copy method, but instead of using the shadow filter, the blur filter yields better results.

HTML:

CSS:

div {
color: #f0f0f0;
font-size: 18px;
width: 255px;
text-align: center;
text-shadow: 2px 2px 2px #000;
padding-top: 3px;
line-height: 22px;
}

and then on a child div
div span.ie-shadow-span {
filter: progid:DXImageTransform.Microsoft.blur(pixelradius=2.2 enabled='true', makeShadow='true', shadowOpacity='0.75');
position: absolute;
z-index: -1;
margin-left: -1px;
margin-top: -1px;
}

Like I said, its not a perfect implementation, but the result in IE8 is very very close to the result in FF4.

As far as memory goes, a few instances of this would be no issue. Everything in moderation.

For dynamic text it would require calling an update function of some sort unless it would be possible to use something similar to the jquery live methods.

from pie.

Any movement on this feature?

from pie.

+1

I used the text-shadow branch, and it works perfectly on IE6-8 but not on IE9 at all.
Why has IE9 been excluded?

EDIT: I tried using filters on IE9 but the text-edges get all black-ish. Is this why there's no IE9 support in PIE.htc yet?

from pie.

IE9 requires a separate implementation because PIE's rendering in IE9 does not produce a positioned element behind the main element like it does in IE6-8, and therefore there's nothing into which to place the cloned text nodes.

I'm hoping that in IE9 I can leverage SVG text with SVG filters to avoid the need for cloned text in the main document altogether.

from pie.

Sound great, will you apply that on IE6-8 too, i noticed that a black line get stuck on the screen if text-shadow is applied to links that has text-decoration:underline;

Is the SVG technique faster than the positioning? I noticed some quite severe lag on IE8 using the current text-shadow branch.

EDIT: Also, does the SVG technique support fluid designs?

from pie.

SVG would likely be faster, yes. Canvas is another possibility. I think there will always be some real slowness to it, just because it has to do so much -- this text-shadow support will definitely come with some caveats one of which is do not use it on large amounts of text.

Keep in mind that the code in the branch for this is very early and rough and totally experimental. It could change completely in the future, this is just one possible direction. I would not suggest relying on it for production sites, and for sure you will find bugs. Let it get further along before reporting them though.

Fluid designs should be supported by both approaches.

from pie.

Great, thanks for your answers! I find this text-shadow problem quite fascinating. And a good learning experience.

Unfortunately it was quite a chunk of text, that's probably why it lags. I think i will have to set for supporting IE7-8 with filter's for now, and wait for IE9 support. I guess that since IE9 have accelerated rendering, it should be faster.

This filter works great for IE7-8 btw, it's just a simple shadow, but that's all i need.
filter:progid:DXImageTransform.Microsoft.Shadow(color=#242424,direction=135,strength=1);

from pie.

I remember Cufon made very nice text-shadows, any chance we can copy Cufon's implementation?

from pie.

I'm not too familiar with Cufon's shadow implementation, but I found this on their shadows example page:

"Please note that offsets can only be defined in pixels and that blur is not supported at all.

Additional limitations since the release of Internet Explorer 8: One element may only have two shadows, and they may not have varying levels of opacity."

(from http://cufon.shoqolate.com/examples/text-shadow.html)

This seems way too limited to be of use in a CSS3 implementation.

from pie.

I see your point in that Cufon only does a small part of what CSS3 but I do not agree that it's of no use. On the contrary...

In most of my designs, and most designs I find in the wild text-shadow is used to offset the text from the background and increase contrast. This technique is very commonly used and does not use blurred shadow.

An example of this can be seen on the green comment button under the textarea I'm writing in at the moment.

Here are some examples of non-blurred textshadow that I found on Dribble:
http://dribbble.com/shots/66392-Book-a-Flight
http://dribbble.com/shots/186729-Infinite-Scalability
http://dribbble.com/shots/161290-Shiny-text

The last sample does use blurred shadow on the big text, big display text is a use-case that does sometimes need blurred shadow but still non-blured shadow is a good fallback.

Here you can see some of my themes that use the Cufon text-shadow:

http://demo.sooperthemes.com/synopsis/
http://demo.sooperthemes.com/syan/ (in the slider)

I would be very happy with the addition of text-shadow if it really is possible. I'm using PIE now on this design: jurriaanroelofs.com/themebox7/ and it would only need the Cufon quality of text shadow to emulate the good browsers.

from pie.

I suppose I should clarify: I did not mean that simple non-blurred shadow is of no use to web page authors, I meant that Cufon's implementation will not be of use to PIE. There are other existing techniques that do handle blur and the other missing things, so we can do better -- Cufon's just not going to help us get there. :)

You might be interested to check out the "text-shadow" branch in GitHub...

from pie.

Also, if all you want is simple drop shadow then you can use IE's DropShadow filter to do that without a polyfill. See http://heygrady.com/blog/2011/03/10/css-text-shadows-in-internet-explorer/ for some examples.

from pie.

I should note that IE's dropshadow filter is borken on IE9, works "fine" for IE7-8 though. Only minor positioning problems.

from pie.

oh ok cool. though I'm using the post-beta6 PIE with the selective loading PIE scripts, so the text-shadow branch would be incompatible right?

from pie.

A note on the shadow support currently in PIE, it has problems with speed (if you have much text) and positioning if your doing "responsive" design.

Please report your tests, i'm very curious on your results.

Good luck!

from pie.

At first, let me thank you for all your amazing work at css3pie. Thanks a lot for it.

I just tried text-shadow branch and discovered one small bug:

Shadow ignores "text-transform: uppercase;" defined on source element

I hope you understand, what I mean

from pie.

Will this ever be implemented? Thanks :)

from pie.