Comments on: Text-Shadow Exposed: Make cool and clever text effects with css text-shadow http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/ Home of designer, developer & photographer Matthias Kretschmann Thu, 11 Mar 2010 03:09:59 +0000 http://wordpress.org/?v=2.9.2 hourly 1 By: Oussama http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/#comment-49892 Oussama Mon, 08 Mar 2010 18:36:11 +0000 http://www.kremalicious.com/?p=41#comment-49892 OH my fucking shit !! you've got the best fucking website ever ! EVERY LINK OR SOME SHIT HAS A FADE EFFECT !! OMFG !! I LOVE THIS !!! OMFG !!! YOU ARE THE BEST CSS CODER !! OH my fucking shit !! you’ve got the best fucking website ever ! EVERY LINK OR SOME SHIT HAS A FADE EFFECT !! OMFG !! I LOVE THIS !!! OMFG !!! YOU ARE THE BEST CSS CODER !!

]]> By: Stew http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/#comment-49842 Stew Tue, 02 Mar 2010 13:17:12 +0000 http://www.kremalicious.com/?p=41#comment-49842 Fantastic tutorial thanks!! Fantastic tutorial thanks!!

]]> By: Jesse http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/#comment-49822 Jesse Sat, 27 Feb 2010 17:04:01 +0000 http://www.kremalicious.com/?p=41#comment-49822 Nice info for a beginner. I hope to keep learning and one day have a site to teach ppl techniques like this. Nice info for a beginner. I hope to keep learning and one day have a site to teach ppl techniques like this.

]]> By: sharath http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/#comment-49764 sharath Wed, 10 Feb 2010 22:48:51 +0000 http://www.kremalicious.com/?p=41#comment-49764 this is awesome :) i use the same for my headlines and it looks awesome.... check out my site for titles :) thanks sharath this is awesome :) i use the same for my headlines and it looks awesome…. check out my site for titles :)

thanks
sharath

]]> By: ANDY http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/#comment-49757 ANDY Wed, 10 Feb 2010 18:33:37 +0000 http://www.kremalicious.com/?p=41#comment-49757 Great help --- tks much. Just starting to learn CSS. I know some HTML but certainly not at the advanced stage! Great help — tks much. Just starting to learn CSS. I know some HTML but certainly not at the advanced stage!

]]> By: blog zone http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/#comment-49718 blog zone Fri, 29 Jan 2010 18:52:08 +0000 http://www.kremalicious.com/?p=41#comment-49718 great post, cool text...thanks great post, cool text…thanks

]]> By: 50 New CSS Techniques For Your Next Web Design « SUMERA’S Weblog http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/#comment-49698 50 New CSS Techniques For Your Next Web Design « SUMERA’S Weblog Tue, 26 Jan 2010 11:32:23 +0000 http://www.kremalicious.com/?p=41#comment-49698 [...] of images is a big advantage in terms of both file size and the time required for maintenance. This tutorial shows how to take advantage of the text-shadow property in CSS to style your text. While this [...] [...] of images is a big advantage in terms of both file size and the time required for maintenance. This tutorial shows how to take advantage of the text-shadow property in CSS to style your text. While this [...]

]]> By: Ruth @ WordPress Toronto http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/#comment-49659 Ruth @ WordPress Toronto Sun, 24 Jan 2010 04:35:34 +0000 http://www.kremalicious.com/?p=41#comment-49659 I tend to shy away from CSS that isn't cross browser compatible. If I want a shadow I would create an image so it looks the same for everyone. I took a css course last year and since then I have played with a few styles that aren't compatible with IE. Maybe I'll give this one a try. Thanks. I tend to shy away from CSS that isn’t cross browser compatible. If I want a shadow I would create an image so it looks the same for everyone. I took a css course last year and since then I have played with a few styles that aren’t compatible with IE. Maybe I’ll give this one a try. Thanks.

]]> By: Matthias http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/#comment-49545 Matthias Tue, 12 Jan 2010 05:36:48 +0000 http://www.kremalicious.com/?p=41#comment-49545 <strong>digof</strong>, well, it's possible with specific IE filters but usually they look horrible, so you definitely have to test it in your use scenario. <a href="http://perishablepress.com/press/2010/01/11/css3-progressive-enhancement-smart-design/#css3-06" rel="nofollow">Here's an example of how to achieve this in a post on Perishable Press</a> (the third code block in that section) digof, well, it’s possible with specific IE filters but usually they look horrible, so you definitely have to test it in your use scenario. Here’s an example of how to achieve this in a post on Perishable Press (the third code block in that section)

]]> By: digof http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/#comment-49541 digof Mon, 11 Jan 2010 18:06:21 +0000 http://www.kremalicious.com/?p=41#comment-49541 can any one help me i want drop shadow to show in IE plz..? can any one help me i want drop shadow to show in IE plz..?

]]> By: Zachstronaut http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/#comment-49257 Zachstronaut Thu, 31 Dec 2009 16:43:39 +0000 http://www.kremalicious.com/?p=41#comment-49257 Thanks for the really great, in-depth article on text-shadow, Matthias. There's a lot of really interesting things you can do if you combine CSS text-shadow with a little JavaScript. You can make <a href="http://www.zachstronaut.com/posts/2009/12/21/happy-xmas-winternet.html" rel="nofollow">snow</a>. You can make <a href="http://www.zachstronaut.com/lab/cooking-with-gas.html" rel="nofollow">fire</a>. You can make a <a href="http://www.zachstronaut.com/posts/2009/06/22/css-text-shadow-lighting-demo.html" rel="nofollow">spotlight effect</a>. The web is such an awesome place these days! Thanks for the really great, in-depth article on text-shadow, Matthias. There’s a lot of really interesting things you can do if you combine CSS text-shadow with a little JavaScript.

You can make snow. You can make fire. You can make a spotlight effect.

The web is such an awesome place these days!

]]> By: stacey http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/#comment-49202 stacey Tue, 29 Dec 2009 07:17:55 +0000 http://www.kremalicious.com/?p=41#comment-49202 I'm very new to webdesign, enrolled in a college cert course. I'm creating an ebay template, with dreamweaver & inline css. I would like to create a shadow that gives a bevel & emboss look to some of the colored text but I'm not using headings. just bold. Where would I place the code? above or below the the css text styles in the head tags? Thank you for the help, Stacey I’m very new to webdesign, enrolled in a college cert course. I’m creating an ebay template, with dreamweaver & inline css. I would like to create a shadow that gives a bevel & emboss look to some of the colored text but I’m not using headings. just bold. Where would I place the code? above or below the the css text styles in the head tags? Thank you for the help, Stacey

]]> By: Riley http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/#comment-48893 Riley Thu, 17 Dec 2009 06:33:26 +0000 http://www.kremalicious.com/?p=41#comment-48893 This is great - have heard recommendations from others before this post but now I'll definitely have to check it out. This is great – have heard recommendations from others before this post but now I’ll definitely have to check it out.

]]> By: 22 Advanced CSS Text Effects Tips « Caintech.co.uk http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/#comment-48869 22 Advanced CSS Text Effects Tips « Caintech.co.uk Sun, 06 Dec 2009 08:49:45 +0000 http://www.kremalicious.com/?p=41#comment-48869 [...] 11. Text-Shadow Exposed [...] [...] 11. Text-Shadow Exposed [...]

]]> By: Chris van Rensburg http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/#comment-48866 Chris van Rensburg Fri, 04 Dec 2009 06:10:35 +0000 http://www.kremalicious.com/?p=41#comment-48866 Just finished up with adding support for text shadow animation to the UIZE JavaScript Framework. I think you'll find something interesting to look at here... http://www.uize.com/examples/hover-fader-text-shadow-animation.html UIZE provides powerful ways to control the animation of the smallest components of CSS style property animations, allowing some mind-blowing effects to be produced. Just finished up with adding support for text shadow animation to the UIZE JavaScript Framework. I think you’ll find something interesting to look at here…

http://www.uize.com/examples/hover-fader-text-shadow-animation.html

UIZE provides powerful ways to control the animation of the smallest components of CSS style property animations, allowing some mind-blowing effects to be produced.

]]> By: Michael Martin http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/#comment-48621 Michael Martin Wed, 02 Sep 2009 07:02:12 +0000 http://www.kremalicious.com/?p=41#comment-48621 Thanks for dropping all this shadow business to the rest of us! I noticed it works great on a site I'm working on, until there's a link and its colored something other then white. A fix is just setting the values to 0 via Inline Style works. style="color:pink; text-shadow: 0 0 0 #000". but I don't want to fix every link manually( even tho there's not that many, but out of principle). The text-shadow doesn't seem to work in the link tag( goes to show what I know). body link="brown; text-shadow: 0 0 0 #000;"( is it heresy to post bad code?) But a:link { text-shadow: 0 0 0 #000; } does work as an Internal Style. The short version of text-shadow:; doesn't work, you need values. Thanks for dropping all this shadow business to the rest of us! I noticed it works great on a site I’m working on, until there’s a link and its colored something other then white. A fix is just setting the values to 0 via Inline Style works.

style=”color:pink; text-shadow: 0 0 0 #000″.

but I don’t want to fix every link manually( even tho there’s not that many, but out of principle).
The text-shadow doesn’t seem to work in the link tag( goes to show what I know).
body link=”brown; text-shadow: 0 0 0 #000;”( is it heresy to post bad code?)
But
a:link { text-shadow: 0 0 0 #000; } does work as an Internal Style.
The short version of text-shadow:; doesn’t work, you need values.

]]> By: xerron http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/#comment-48570 xerron Thu, 30 Jul 2009 13:09:31 +0000 http://www.kremalicious.com/?p=41#comment-48570 this is some pretty awesome stuff 5/5 thanks a lot for sharing. this is some pretty awesome stuff
5/5
thanks a lot for sharing.

]]> By: ZequeZ http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/#comment-48554 ZequeZ Wed, 22 Jul 2009 07:24:06 +0000 http://www.kremalicious.com/?p=41#comment-48554 Awesome blog =D And very util post =D Awesome blog =D
And very util post =D

]]> By: Kevin http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/#comment-48513 Kevin Wed, 17 Jun 2009 23:42:05 +0000 http://www.kremalicious.com/?p=41#comment-48513 I tried with both Firefox 3 and IE 7, shadows do not work. Am i missing something? I tried with both Firefox 3 and IE 7, shadows do not work.
Am i missing something?

]]> By: simona buzatu http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/#comment-48457 simona buzatu Wed, 27 May 2009 23:31:58 +0000 http://www.kremalicious.com/?p=41#comment-48457 Great examples and useful tips. Css is incredible! Great examples and useful tips. Css is incredible!

]]> By: Sandro http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/#comment-48382 Sandro Thu, 14 May 2009 10:31:36 +0000 http://www.kremalicious.com/?p=41#comment-48382 Hi Krema, nice article... I just developed a jQuery plugin for shadow and other effects on regular html font using more or less the same method Of course it is only a trick and not ALL the problems are resolved but it "works" and maybe you'll find interesting here http://iofo.it/jquery/fonteffect/ Hi Krema, nice article…

I just developed a jQuery plugin for shadow and other effects on regular html font using more or less the same method

Of course it is only a trick and not ALL the problems are resolved but it “works” and maybe you’ll find interesting

here http://iofo.it/jquery/fonteffect/

]]> By: nadia http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/#comment-41510 nadia Fri, 27 Mar 2009 03:36:10 +0000 http://www.kremalicious.com/?p=41#comment-41510 I use firefox 3.0.7 but text-shadow not work I use firefox 3.0.7 but text-shadow not work

]]> By: John Matula http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/#comment-37029 John Matula Fri, 27 Feb 2009 00:38:31 +0000 http://www.kremalicious.com/?p=41#comment-37029 Safari 4 beta brings a whole bunch of changes which unfortunately could throw some new information in and throw some old information out of this article (even though I have referred to it many a time! haha). Apparently if your shadow has no blur, then the text will be sub-pixel rendered. But more than 1px blurred uses the anti-alias rendering like "usual." So this means that the light-on-dark hack doesn't work anymore... at least as specified. But: the beta now supports multiple shadows! So, just thought I'd give you a taste on what is brewing in the beta. - John Safari 4 beta brings a whole bunch of changes which unfortunately could throw some new information in and throw some old information out of this article (even though I have referred to it many a time! haha). Apparently if your shadow has no blur, then the text will be sub-pixel rendered. But more than 1px blurred uses the anti-alias rendering like “usual.” So this means that the light-on-dark hack doesn’t work anymore… at least as specified. But: the beta now supports multiple shadows!

So, just thought I’d give you a taste on what is brewing in the beta.

- John

]]> By: Ashley Haussermann http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/#comment-37026 Ashley Haussermann Fri, 27 Feb 2009 00:16:00 +0000 http://www.kremalicious.com/?p=41#comment-37026 Aha, thanks, not sure if I'm advanced enough to screw with Firefox testing browsers. I'll be excited when it hits the general public though. Thanks for the reply. Ash. Aha, thanks, not sure if I’m advanced enough to screw with Firefox testing browsers. I’ll be excited when it hits the general public though. Thanks for the reply.

Ash.

]]> By: krema http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/#comment-36614 krema Mon, 23 Feb 2009 22:39:19 +0000 http://www.kremalicious.com/?p=41#comment-36614 Hi <strong>Ashley</strong>, the current stable release of Firefox (3.0) isn't capable of displaying text-shadow. You would have to use the <a href="http://www.mozilla.com/en-US/firefox/all-beta.html" rel="nofollow">latest beta of Firefox 3.1</a> for this to work. Or use Safari or Opera. Hi Ashley, the current stable release of Firefox (3.0) isn’t capable of displaying text-shadow. You would have to use the latest beta of Firefox 3.1 for this to work. Or use Safari or Opera.

]]> By: Ashley Haussermann http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/#comment-36594 Ashley Haussermann Mon, 23 Feb 2009 21:26:05 +0000 http://www.kremalicious.com/?p=41#comment-36594 Hey, I'm an newb to web design but have really gotten into it over the last few months. I love the stuff you do in this post, and I'm trying to utilize the "subtle glowing text" into my navbar but it seems like nothing is working. I'm using Firefox 3 for my browser and just using SciTE to edit my html and css files. Any chance you could email me and take a look at it? If you have the time, that is. Thanks a bunch. Ash. Hey, I’m an newb to web design but have really gotten into it over the last few months. I love the stuff you do in this post, and I’m trying to utilize the “subtle glowing text” into my navbar but it seems like nothing is working. I’m using Firefox 3 for my browser and just using SciTE to edit my html and css files. Any chance you could email me and take a look at it? If you have the time, that is. Thanks a bunch.

Ash.

]]> By: Gilles D. http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/#comment-36542 Gilles D. Mon, 23 Feb 2009 16:23:50 +0000 http://www.kremalicious.com/?p=41#comment-36542 Hey man, where is the button to switch light on for your website ? :-) Nice post anyway! Hey man, where is the button to switch light on for your website ?
:-)

Nice post anyway!

]]> By: krema http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/#comment-22757 krema Tue, 30 Dec 2008 15:43:46 +0000 http://www.kremalicious.com/?p=41#comment-22757 Hi <strong>Jay</strong>, thanks for pointing this out. Totally missed it and added it to the article. Hi Jay, thanks for pointing this out. Totally missed it and added it to the article.

]]> By: Jay Robinson http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/#comment-21194 Jay Robinson Sat, 20 Dec 2008 22:45:35 +0000 http://www.kremalicious.com/?p=41#comment-21194 Great article! I love WebKit! You can always use rgba instead of hex color values to make your shadows for the engraved effect look more subtle. The A in rgba stands for alpha transparency, and accepts values from 0.0 to 1.0. e.g. text-shadow: 0px 1px 0px rgba(255,255,255, .6); may be similar to the engraved effect above. Great article! I love WebKit! You can always use rgba instead of hex color values to make your shadows for the engraved effect look more subtle. The A in rgba stands for alpha transparency, and accepts values from 0.0 to 1.0.

e.g. text-shadow: 0px 1px 0px rgba(255,255,255, .6); may be similar to the engraved effect above.

]]> By: Alex http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/#comment-4700 Alex Wed, 27 Aug 2008 07:38:08 +0000 http://www.kremalicious.com/?p=41#comment-4700 They're aiming for the end of the year (December or so), with a beta next month (the nightlies are stable enough for me) About the AA, for me Safari is doing sub-pixel AA sometimes, and other times it's doing grey scale AA, Firefox always uses the system setting, so I'm getting some colour fringing on certain bits of text. It'd be nice if font-smooth allowed overriding the AA style (not just if it should perform AA) They’re aiming for the end of the year (December or so), with a beta next month (the nightlies are stable enough for me)

About the AA, for me Safari is doing sub-pixel AA sometimes, and other times it’s doing grey scale AA, Firefox always uses the system setting, so I’m getting some colour fringing on certain bits of text. It’d be nice if font-smooth allowed overriding the AA style (not just if it should perform AA)

]]> By: krema http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/#comment-4572 krema Tue, 26 Aug 2008 12:56:57 +0000 http://www.kremalicious.com/?p=41#comment-4572 Hi <strong>Alex</strong>, that's right, Firefox 3.1 is about to introduce support for text-shadow in the gecko-engine and I'm very excited about that. Do you know of any planned release date for this version? And indeed, something has changed in OS X causing different rendering today with Safari 3.1.2 and OS X 10.5.4. Hi Alex, that’s right, Firefox 3.1 is about to introduce support for text-shadow in the gecko-engine and I’m very excited about that. Do you know of any planned release date for this version?

And indeed, something has changed in OS X causing different rendering today with Safari 3.1.2 and OS X 10.5.4.

]]> By: Alex http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/#comment-4531 Alex Tue, 26 Aug 2008 07:25:08 +0000 http://www.kremalicious.com/?p=41#comment-4531 Great article, Most people don't go into this amount of depth (and you've provided a whole bunch of demo's, which is even better) Anyway, Firefox 3.1 supports text-shadow (and box-shadow with the -moz- prefix), it also supports multiple shadows (So does WebKit, in the nightlies anyway). The demo's don't really match the images you provide, but that's probably just a font issue. Great article, Most people don’t go into this amount of depth (and you’ve provided a whole bunch of demo’s, which is even better)

Anyway, Firefox 3.1 supports text-shadow (and box-shadow with the -moz- prefix), it also supports multiple shadows (So does WebKit, in the nightlies anyway). The demo’s don’t really match the images you provide, but that’s probably just a font issue.

]]> By: krema http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/#comment-16 krema Sat, 19 Apr 2008 16:31:21 +0000 http://www.kremalicious.com/?p=41#comment-16 thanks joe, i really missed this fact. never tried to highlight the text in the navigation on apple.com with the mouse... nevertheless it's exactly the same effect which you can easily achive with text-shadow. just seems that apple prefers the old (but solid cross-browser-compatible) photoshop way. thanks joe,

i really missed this fact. never tried to highlight the text in the navigation on apple.com with the mouse… nevertheless it’s exactly the same effect which you can easily achive with text-shadow. just seems that apple prefers the old (but solid cross-browser-compatible) photoshop way.

]]> By: Joe http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/#comment-15 Joe Sat, 19 Apr 2008 16:08:11 +0000 http://www.kremalicious.com/?p=41#comment-15 Just to point out, Apple don't utilise text-shadow CSS property in their navigation bar, it's an image sprite (http://images.apple.com/global/nav/images/globalnavbg.png). Just to point out, Apple don’t utilise text-shadow CSS property in their navigation bar, it’s an image sprite (http://images.apple.com/global/nav/images/globalnavbg.png).

]]> By: krema http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/#comment-14 krema Fri, 18 Apr 2008 01:55:48 +0000 http://www.kremalicious.com/?p=41#comment-14 hi Armen, this is a hack i also use for my white text on black cause Safari renders it a bit jaggy. So all white text on this website has a black text-shadow behind it to make the characters more slim. guess this is caused by the sub-pixel anti-aliasing in Mac OS X or something like that. thanks for reminding me of this other possible use of text-shadow. but i'm afraid this hack will be a problem when firefox finally supports text-shadow... and thanks for stumbling! hi Armen,

this is a hack i also use for my white text on black cause Safari renders it a bit jaggy. So all white text on this website has a black text-shadow behind it to make the characters more slim. guess this is caused by the sub-pixel anti-aliasing in Mac OS X or something like that. thanks for reminding me of this other possible use of text-shadow. but i’m afraid this hack will be a problem when firefox finally supports text-shadow…

and thanks for stumbling!

]]> By: Armen http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/#comment-13 Armen Fri, 18 Apr 2008 01:00:52 +0000 http://www.kremalicious.com/?p=41#comment-13 I'm actually using on the <a href="http://dietriffic.com/" rel="nofollow">Dietriffic</a> site I designed. The white text on the green wasn't very legible in Safari (fine in FF and IE) so I used the property as a kind of 'hack' to help the text in Safari. It's explained <a href="http://24ways.org/2006/knockout-type" rel="nofollow">here</a>. Stumbled! I’m actually using on the Dietriffic site I designed. The white text on the green wasn’t very legible in Safari (fine in FF and IE) so I used the property as a kind of ‘hack’ to help the text in Safari. It’s explained here.

Stumbled!

]]>