Join 3,572 readers in helping fund MetaFilter (Hide)


For all your css-based text shadowing needs
October 1, 2010 3:54 PM   Subscribe

MOTHER EFFING TEXT-SHADOW For all your css-based text shadowing needs
posted by GuyZero (27 comments total) 19 users marked this as a favorite

 
This would have actually been useful for me earlier this week. Thanks!
posted by Cool Papa Bell at 4:00 PM on October 1, 2010


This reminds me of something that I'm seeing on some designed websites these days, like the twitter blog. text-shadow: 0px 1px #fff; Please don't do that. It puts a little 1 pixel high white highlight just below the regular body text. It also looks awful, particularly in Windows with ClearType. I found this referred to as "Apple style": is this why iTunes text looks like shit?

Text-shadow: pretty much always a bad idea.
posted by Nelson at 4:01 PM on October 1, 2010


Being able to use HSL with CSS is AMAZING. No more color droppers needed. I can stay in my text editor and tweak colors as needed.

RGB = pain
posted by circular at 4:09 PM on October 1, 2010 [1 favorite]


Clicking the "all the way" button totally made me laugh.
posted by cobwebberies at 4:10 PM on October 1, 2010 [1 favorite]


I'm beta testing this Web3.0 and it's pretty wild stuff.
posted by Blazecock Pileon at 4:12 PM on October 1, 2010


Argh! I just finished filming my CSS course last night! This totally would have made it into my videos.
posted by brenton at 4:15 PM on October 1, 2010


You know what I hate? I hate that CSS3's box-shadow only gives you one horizontal and one vertical offset parameter -- and the very first designer I worked with on a CSS3 project wanted his drop shadows to be on three sides.

grar grar grar
posted by davejay at 4:22 PM on October 1, 2010


Ah, brings back memories of YTMND's heyday.
posted by fontophilic at 4:40 PM on October 1, 2010


So, what does the "wtf" checkbox do?
posted by Joakim Ziegler at 4:41 PM on October 1, 2010


Joakim - click it and discover the magic of CSS! It's trippy.

I'm studying XHTML and CSS right now, so this is feeding into what I'm learning.
posted by spinifex23 at 4:53 PM on October 1, 2010


                           ___           ___           ___           ___                     
                          /\  \         /\  \         /\  \         /\__\                    
               ___       /::\  \        \:\  \       /::\  \       /:/ _/_                   
              /|  |     /:/\:\  \        \:\  \     /:/\:\__\     /:/ /\__\                  
             |:|  |    /:/  \:\  \   ___  \:\  \   /:/ /:/  /    /:/ /:/ _/_                 
             |:|  |   /:/__/ \:\__\ /\  \  \:\__\ /:/_/:/__/___ /:/_/:/ /\__\                
           __|:|__|   \:\  \ /:/  / \:\  \ /:/  / \:\/:::::/  / \:\/:/ /:/  /                
          /::::\  \    \:\  /:/  /   \:\  /:/  /   \::/~~/~~~~   \::/_/:/  /                 
          ~~~~\:\  \    \:\/:/  /     \:\/:/  /     \:\~~\        \:\/:/  /                  
               \:\__\    \::/  /       \::/  /       \:\__\        \::/  /                   
                \/__/     \/__/         \/__/         \/__/         \/__/                    
                    ___           ___                    ___           ___           ___     
                   /\  \         /\__\                  /\  \         /\  \         /\  \    
      ___          \:\  \       /:/ _/_                |::\  \       /::\  \        \:\  \   
     /\__\          \:\  \     /:/ /\__\               |:|:\  \     /:/\:\  \        \:\  \  
    /:/  /      ___ /::\  \   /:/ /:/ _/_            __|:|\:\  \   /:/ /::\  \   _____\:\  \ 
   /:/__/      /\  /:/\:\__\ /:/_/:/ /\__\          /::::|_\:\__\ /:/_/:/\:\__\ /::::::::\__\
  /::\  \      \:\/:/  \/__/ \:\/:/ /:/  /          \:\~~\  \/__/ \:\/:/  \/__/ \:\~~\~~\/__/
 /:/\:\  \      \::/__/       \::/_/:/  /            \:\  \        \::/__/       \:\  \      
 \/__\:\  \      \:\  \        \:\/:/  /              \:\  \        \:\  \        \:\  \     
      \:\__\      \:\__\        \::/  /                \:\__\        \:\__\        \:\__\    
       \/__/       \/__/         \/__/                  \/__/         \/__/         \/__/    
      ___           ___           ___                                  ___           ___     
     /\  \         /\  \         /\  \                  _____         /\  \         /\__\    
     \:\  \       /::\  \       _\:\  \                /::\  \       /::\  \       /:/ _/_   
      \:\  \     /:/\:\  \     /\ \:\  \              /:/\:\  \     /:/\:\  \     /:/ /\  \  
  _____\:\  \   /:/  \:\  \   _\:\ \:\  \            /:/  \:\__\   /:/  \:\  \   /:/ /::\  \ 
 /::::::::\__\ /:/__/ \:\__\ /\ \:\ \:\__\          /:/__/ \:|__| /:/__/ \:\__\ /:/__\/\:\__\
 \:\~~\~~\/__/ \:\  \ /:/  / \:\ \:\/:/  /          \:\  \ /:/  / \:\  \ /:/  / \:\  \ /:/  /
  \:\  \        \:\  /:/  /   \:\ \::/  /            \:\  /:/  /   \:\  /:/  /   \:\  /:/  / 
   \:\  \        \:\/:/  /     \:\/:/  /              \:\/:/  /     \:\/:/  /     \:\/:/  /  
    \:\__\        \::/  /       \::/  /                \::/  /       \::/  /       \::/  /   
     \/__/         \/__/         \/__/                  \/__/         \/__/         \/__/    

posted by filthy light thief at 4:55 PM on October 1, 2010 [29 favorites]


(Early version of that damned site, BOTH with looping audio)
posted by filthy light thief at 4:56 PM on October 1, 2010


and i just finished redoing my portfolio. oh if only this had come a few days earlier.
posted by fuzzypantalones at 5:05 PM on October 1, 2010


The wonder of HTML5!

We are so fucked when middle managers discover this.
posted by Artw at 5:26 PM on October 1, 2010 [3 favorites]


I'm adding it to mine.

Know what your law firm website needs? RAINBOWS. What does it all mean?!

Hire me, and I'll tell you.
posted by spinifex23 at 5:28 PM on October 1, 2010 [2 favorites]


Same idea, but you know, actually useful.
posted by cjorgensen at 6:11 PM on October 1, 2010 [1 favorite]


spinifex23: "Joakim - click it and discover the magic of CSS! It's trippy."

Well, yeah, I didn't come here to ask about before trying it. It doesn't seem to do anything. Firefox 3.6.10 on Mac.
posted by Joakim Ziegler at 6:20 PM on October 1, 2010 [1 favorite]


Joakim - my apologies. I have the exact same version of Firefox, also on a Mac, and when I check the checkbox and click the button, it makes the words form huge technicolor rainbows.

No idea why that didn't work for you.
posted by spinifex23 at 6:42 PM on October 1, 2010


... It also looks awful, particularly in Windows with ClearType.
I agree. ClearType does look awful.
posted by i_have_a_computer at 6:47 PM on October 1, 2010 [1 favorite]


I can't wait until all the browsers support flowable column text. That's the rockingest thing in CSS3 as far as I'm concerned.
posted by Benny Andajetz at 6:48 PM on October 1, 2010


Joakim - my apologies. I have the exact same version of Firefox, also on a Mac, and when I check the checkbox and click the button, it makes the words form huge technicolor rainbows.

Does nothing on my machine either, and it's Windows 7 with Firefox 4 beta 6. (Red Sox 3)
posted by JHarris at 7:03 PM on October 1, 2010


I can't wait until all the browsers support flowable column text. That's the rockingest thing in CSS3 as far as I'm concerned.

Meanwhile vertically aligning stuff will still continue to suck.
posted by Artw at 7:12 PM on October 1, 2010 [1 favorite]


I agree. ClearType does look awful.

Huh? ClearType looks great. Maybe something's wrong with your computer?

The problem with the "Apple style" CSS hack is that while ClearType is doing lovely subpixel positioning, the 1px white drop shadow is not. So it looks janky. I suppose ClearType should be improved to do subpixel positioning of drop shadows, too, but then why do you want a white underlayer on your black-on-grey text anyway?
posted by Nelson at 8:21 PM on October 1, 2010


So, what does the "wtf" checkbox do?

For me, it allows putting shadows in multiple directions simultaneously, whereas with the box unchecked it only lets me use slider at a time. The crazy rainbow vomit appears to be independent of the checkbox state. (Using Chrome on OS X.)
posted by caaaaaam at 8:28 PM on October 1, 2010


"all the way" is the rainbow shit, "wtf" allows simultaneous "shadows"

Sheesh, people, ya every actually read the messages and correlate with what is on the screen?
posted by Bovine Love at 6:46 AM on October 2, 2010


Does nothing for me either, Firefox 3.0.19 on a Mac.
posted by MythMaker at 7:01 AM on October 2, 2010


With "wtf" checked, the drop-shadow effect can go in multiple directions at once. Unchecked, one slider sets the others to zero.
posted by mistersquid at 11:18 AM on October 2, 2010


« Older Rick Sanchez calls Jon Stewart a bigot....   |   Ron Paul asks "What if?"... Newer »


This thread has been archived and is closed to new comments