Back To Website Design Forum

Font Shadow

  • murcielagossi
  • Proficient
  • Proficient
  • User avatar
  • Joined: Jul 28, 2006
  • Posts: 457
  • Status: Offline

Post December 17th, 2007, 9:01 am

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
Image
/* My Logic Is Undeniable */
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post December 17th, 2007, 9:01 am

  • UNFLUX
  • Genius
  • Genius
  • User avatar
  • Joined: Dec 20, 2002
  • Posts: 6382
  • Loc: twitter.com/unflux
  • Status: Offline

Post December 17th, 2007, 9:22 am

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.
UNFLUX.FOTO
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Joined: Dec 29, 2003
  • Posts: 5169
  • Loc: SC-USA
  • Status: Offline

Post December 17th, 2007, 10:55 am

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.
- dM
  • grinch2171
  • Moderator
  • Genius
  • User avatar
  • Joined: Feb 11, 2004
  • Posts: 6741
  • Loc: Martinsburg, WV
  • Status: Offline

Post December 17th, 2007, 11:47 am

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>
‎"Be polite, be professional, but have a plan to kill everybody you meet." Maj. Gen. James Mattis
  • murcielagossi
  • Proficient
  • Proficient
  • User avatar
  • Joined: Jul 28, 2006
  • Posts: 457
  • Status: Offline

Post December 17th, 2007, 4:08 pm

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... :(
Image
/* My Logic Is Undeniable */
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Joined: Dec 29, 2003
  • Posts: 5169
  • Loc: SC-USA
  • Status: Offline

Post December 17th, 2007, 5:07 pm

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:
- dM
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Joined: Jul 11, 2005
  • Posts: 1828
  • Loc: In the Great White North
  • Status: Offline

Post December 18th, 2007, 3:20 pm

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.
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com
  • onwired
  • Born
  • Born
  • No Avatar
  • Joined: Dec 18, 2007
  • Posts: 2
  • Status: Offline

Post December 18th, 2007, 3:43 pm

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
  • Joined: Jul 11, 2005
  • Posts: 1828
  • Loc: In the Great White North
  • Status: Offline

Post December 18th, 2007, 4:02 pm

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
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com
  • murcielagossi
  • Proficient
  • Proficient
  • User avatar
  • Joined: Jul 28, 2006
  • Posts: 457
  • Status: Offline

Post December 19th, 2007, 8:56 am

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.
Image
/* My Logic Is Undeniable */
  • onwired
  • Born
  • Born
  • No Avatar
  • Joined: Dec 18, 2007
  • Posts: 2
  • Status: Offline

Post December 19th, 2007, 9:22 am

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
  • Joined: Jul 11, 2005
  • Posts: 1828
  • Loc: In the Great White North
  • Status: Offline

Post December 20th, 2007, 8:36 am

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.
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com

Page 1 of 1

Post Information

  • Total Posts in this topic: 12 posts
  • Users browsing this forum: No registered users and 127 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
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.