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
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
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]
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]
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
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
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
grar grar grar
posted by davejay at 4:22 PM on October 1, 2010
So, what does the "wtf" checkbox do?
posted by Joakim Ziegler at 4:41 PM on October 1, 2010
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
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
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
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]
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]
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]
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]
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
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
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
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]
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
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
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
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
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
posted by mistersquid at 11:18 AM on October 2, 2010
« Older An "elite Northeast establishment liberal" | Google Military Industrial Complex Newer »
This thread has been archived and is closed to new comments
posted by Cool Papa Bell at 4:00 PM on October 1, 2010