Font Shadow

  • murcielagossi
  • Proficient
  • Proficient
  • User avatar
  • Posts: 457

Post 3+ Months Ago

How does the website: http://www.onwired.com/portfolio/healthlink-europe/

put a shadow on the text "Now we don't know much about Waste Electrical and Electronic Equipment or Clinical Trial Management, but these guys do."

I have no clue...i saw the code but didn't see anything. Thanks
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • UNFLUX
  • Genius
  • Genius
  • User avatar
  • Posts: 6376
  • Loc: twitter.com/unflux

Post 3+ Months Ago

I looked briefuly, but it doesn't look like it's used on all the pages. It's possible it's just using duplicate text with different properties, using padding to layer the text. That would have the desired effect.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

There is a CSS-2 property for this, but it's only supported in Safari I believe.
http://www.w3.org/TR/CSS2/text.html#text-shadow-props

There is also a proprietary IE method for this. http://msdn2.microsoft.com/en-us/library/ms533086.aspx

It looks like it would take some digging to figure out how these folks are doing it. I works in IE and FF for me.
  • grinch2171
  • Moderator
  • Genius
  • User avatar
  • Posts: 6807
  • Loc: Martinsburg, WV

Post 3+ Months Ago

They used flash for that it seems. Here is the code:
Code: [ Select ]
<h2 class="sIFR-replaced"><embed style="" type="application/x-shockwave-flash" class="sIFR-flash" src="/scripts/myriad-web.swf" quality="best" flashvars="content=Now%2520we%2520don%2527t%2520know%2520much%2520about%2520Waste%2520Electrical%2520and%2520Electronic%2520Equipment%2520or%2520Clinical%2520Trial%2520Management%252C%2520but%2520these%2520guys%2520do.&amp;antialiastype=&amp;width=890&amp;height=26&amp;fitexactly=false&amp;tunewidth=&amp;tuneheight=0&amp;offsetleft=&amp;offsettop=&amp;thickness=&amp;sharpness=&amp;kerning=&amp;gridfittype=pixel&amp;zoomsupport=false&amp;flashfilters=DropShadowFilter%252Cknockout%253Afalse%252Cdistance%253A2%252CblurX%253A2%252CblurY%253A2%252Ccolor%253A%2525220x000000%252522%252Cstrength%253A0.25%252Cangle%253A90&amp;opacity=100&amp;blendmode=&amp;size=26&amp;zoom=100&amp;css=.sIFR-root%257Bcolor%253A%2523c5d5b1%253Bleading%253A10%253B%257D&amp;selectable=true&amp;fixhover=false&amp;preventwrap=undefined&amp;link=&amp;target=&amp;version=318" wmode="transparent" bgcolor="transparent" name="sIFR_callback_0" id="sIFR_callback_0" allowscriptaccess="always" sifr="true" height="74" width="100%"><span id="sIFR_callback_0_alternate" class="sIFR-alternate">Now we don't know much about Waste Electrical and Electronic Equipment or Clinical Trial Management, but these guys do.</span></h2>
  • murcielagossi
  • Proficient
  • Proficient
  • User avatar
  • Posts: 457

Post 3+ Months Ago

Ah...thanks everyone, I thought it was flash too, because when you right-click on it has the same menu as flash (with many settings disabled). I skipped over that snippet of code I guess...and I was looking primarily in the CSS. But thanks to everyone anyways

Edit: thanks digitalMedia, I'll have to look into those, but they still are not as great as the flash... :(
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

grinch2171 wrote:
They used flash for that it seems. Here is the code...


Doh! I didn't even think about that because the text was selectable. Ha! :lol:
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

funny thats probably one of the better sIFR examples I've seen. Especially nice since it fooled enough of us that it was a css trick.
  • onwired
  • Born
  • Born
  • onwired
  • Posts: 2

Post 3+ Months Ago

graphixboy wrote:
funny thats probably one of the better sIFR examples I've seen. Especially nice since it fooled enough of us that it was a css trick.


Nice work, graphixboy! We had a little office pool to see who'd be first to get it... sIFR 3, though still in beta, allows for all kinds of goodies v2 didn't have, like drop shadows and, more importantly for our needs, control over multi-line leading (or "line-height", in CSS parlance). You can find more here:

sIFR

We've been especially busy, but fairly soon we'll put up a multi-part explanation/tutorial describing our approach to building the site. (I'm particularly pleased with how the portfolio part turned out, that's pure Javascript, no Flash at all!)

Cheers,
Nathan H.
Director of Development
OnWired, LLC
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

Haha, I'd have never gotten close if you hadn't named the class
Quote:
h2 class="sIFR-replaced"
10 points extra for firebug. Although the credit should go to Grinch. I just placed the name with the system.

I'm glad to see that sIFR is getting better. I tried to use it quite a while ago and it made me angry :-) Maybe I'll have to give it another go.

@onwired I love your site, combo of design and writing is great. However while I was wandering around I noticed that your blog page really doesn't like IE7. All the content floats funny, might want to take a look
  • murcielagossi
  • Proficient
  • Proficient
  • User avatar
  • Posts: 457

Post 3+ Months Ago

Yeah, you guys definitely answered my question.
Btw, really nice site onwired, how did you find this topic about your site so fast? coincidence. Anyways, good job.
  • onwired
  • Born
  • Born
  • onwired
  • Posts: 2

Post 3+ Months Ago

graphixboy wrote:
@onwired I love your site, combo of design and writing is great. However while I was wandering around I noticed that your blog page really doesn't like IE7. All the content floats funny, might want to take a look


Hi graphixboy,

Thanks for the tip! I opened up the page in IE7, but didn't notice anything unusual. I've attached a screenshot: is this what you're seeing?

http://onwired.com/images/ie7.jpg

murcielagossi wrote:
Btw, really nice site onwired, how did you find this topic about your site so fast? coincidence. Anyways, good job.


Well, we're pretty obsessive about our referrer logs: when you posted your original question and included the link to our portfolio it showed up referring to this post; we think it's fun to see where our site gets around to...

Regards,
Nathan H.
OnWired LLC
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

Heh well it looks like your screen shot now :-) I only use IE for testing and just happened to have it open that day. Funny thing is that I just got some IE updates so I assume that the issue was specific to my box. Sorry to cause panic.

Post Information

  • Total Posts in this topic: 12 posts
  • Users browsing this forum: No registered users and 93 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.