Text-Shadow in Safari 1.1

Hate to ask, but can we non Mac (only two more weeks) folk please get a screenshot.

Even some of us Mac folks who aren't using Panther (yet) would like one...

And what about a "Disable Antialias" property? Does somebody know if it gonna works in CSS2?

Why is the markup so weird? The "align=center" and the use of p:firstline like it's an html tag? Wrapped in another p?

As requested, here's a screenshot (~42kB).

Interestingly, text-shadow has been removed from CSS2.1, but will be in CSS3.

Oh, that's great - what a gas!

Ah! How are you going to just add another page with a crazy effect and no screenshot for us poor, misguided Windows-users? A screenshot of what you just posted, Marc? Pretty please?

And good call on the markup... what's the deal?

Okay, Todd was first, meanwhile I´ve done some more exploring the text-shadow property and the CSS 3 alpha transparency support in Safari 1.1 (with screenshots). Have a look...;-)

That is a beautiful thing. I can't wait to implement it and see it (and of course have all the other souls out there see it as well).

I've just installed 10.3 on the iMac on my desk (even though I primarily use Windows XP) and what was already a fondness for OS X has become something approximating full-on infatuation. Safari is fast becoming my favourite browser. Here's a screenshot of how lovely that page Frank made looks in Safari...

This is what the web was meant to be!

Nice, but if Safari's the only browser that supports it, it's hard to get excited, right? I haven't seen the latest stats on how many Mac users have made the switch to OSX, much less to Panther, but I think we're only talking at most a fraction of 1 percent of the entire Web-browsing population.

Brad-

No doubt, but still...this kind of built-in effect will go a long way towards encouraging web developers to only set text in images when absolutley necessary. It's a BIG deal, IMHO. Safari is the only browser that supports it NOW

The great thing is, you can use it right now. Safari users will see it and others won't. But, in a few months, when compatible versions of Moz come out, it'll just start woriking, with no intrevention from you.

Jeff

By the way...

Does CSS have a version of this property for box-level elements? I love text-shadow, but what it I want a shadow for my entire DIV?

It's been in IE/Win for some time:

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/filters/shadow.asp

As for the 'real world' application of this, make no mistake about it -- without broad browser support (read: IE/Win) chances are this will never make it off the ground. I created the demo not only b/c it's really cool to see drop-shadows drawn on screen by a web browser, but to further illustrate how non-Microsoft browsers continue to move forward, while IE grows mold.

...thanks Stephen for the IE 'Shadow Filter' link. Although technically, yes, IE could simulate drop shadows, the solution Microsoft provides is a proprietary, Internet Explorer-only element instead of an open standard like CSS2.

There is more than "text-shadow". Safari 1.1 now supports CSS 3 opacity (for almost every element with a color) and the ::selection pseudo-element to name a few. That´s all fully web standard compliant stuff that can be used to provide some additional eye-candy for Mac users (and maybe KHTML-Linux users), but of course it´s necessary to be nice to the IE/Win users as well. To satisfy both target groups should be possible without pain.

Wait, wait, wait a minute. What happened to the Devil? Or could they possibly occupy the same space?

But... If you make the font size really large (big enough that it must wrap), then the text on the second line is black not white (and a smaller size without shaddow).

frank, the :selection pseudo seems to be quite well supported in Firebird 0.7 on Win :)

Brian - screenshot

What can I say? Awesome. What else? Microsoft. . .uhh. . Internet Explorer is weak.

Not sure if a special effect will curb me from "only setting text in images when absolutely necessary" just yet--even with wide browser adoption. More typographic choices and tools might though ;)

Interesting...

This may not be widely supported yet, but it's monumental because it goads other browser-makers into compliance. Considering the bruised egos when Mac chose KHTML over Gecko, support for text-shadow in Safari might get the feature implemented in MozBird sooner rather than later. Then we're looking at roughly 4 percent support--enough to grab the attention of mainstream designers.

I'm tired of Apple spending their time on this crap when they totally ignore more pertitnent issues, like consistency of page-element size display in Safari (like form elements) and, especially, Flash Player optimization. Text shadows. Yipee.

text-shadow took me about 1 hour to implement, and all it does is call into a new Panther CoreGraphics API. It didn't take away time from bug fixing or from other feature development.

The form element size problem, as I've blogged about repeatedly is extremely hard to solve given Aqua widgets' inablity to scale to arbitrary widths/heights, but rest assured we're working on it.

Drop shadow is passe in design some years ago.

If you want a screenshot...

For everyone who wants to see what their pages look like in Safari 1.1, you just have to check out: http://www.danvine.com/icapture/

You can type in a URL and have a png of your site from his Mac within minutes. Until my copy of Panther arrives, this is a great way to test my pages out.

Thanks Dan!