Digg

The Digg Crew wants to hear your thoughts!
Please take our short survey about Digg and potential feature ideas.

CSS3 ::selection used to hide any image in text

metaatem.net — This toy will let you put in any image url and text then use css to hide the image. It only works in browsers that support the CSS3 pesudo-selector ::selection (Firefox and Safari for now).

Bury

kastner 303 days ago, made popular 302 days ago

1623 diggs
digg it

131 Comments
Who Dugg It?

kastner, on 02/05/2008, -12/+144Disclosure: I made this, and it's got a donate button and google ads on it.
- optimusprime01, on 02/05/2008, -6/+34Well done buddy. Keep these cool stuff coming. We all will support you. One kickass CSS snippet.
- fkr3, on 02/05/2008, -19/+3Question: Why?
  
  Also I might be missing something but it seems to display the same in IE7, FF and Opera?
  - iofthestorm, on 02/05/2008, -1/+6Select the text, in Firefox the text is replaced by the digg logo, in IE7 it's not (at least, IE7 on Vista anyway, and I don't see why IE7 on XP would have better CSS support).
    - fkr3, on 02/05/2008, -5/+1Ooooh I get it. I still don't get the point though... who needs to secretly send an image to someone who is both using Firefox and unable to receive the image in a conventional way?
  - optimusprime01, on 02/05/2008, -4/+5It doesn't work in IE 7, coz IE7 renders things differently and also who lead IE7 Development team was a ***** head. It only works in FF and opera for the moment.
    - richardiscool, on 02/05/2008, -0/+4Safari.
    - SlechtValk, on 02/06/2008, -0/+1does this work in opera (which version???). I'm trying but it doesn't work for me in opera 9.25 (8827) it does in FF (2.0.0.11)
- saucedmike, on 02/05/2008, -1/+53I enjoy your honesty
- debuggercll, on 02/05/2008, -2/+50Now terrorists will use this method to communicate with each other.
- zephc, on 02/05/2008, -14/+2btw, the sound for the letter 'I' should probably be spelled 'ai' or 'aye'; 'ah' would the A sound in 'father' or 'lager'.
  - csfreakazoid, on 02/05/2008, -1/+3it doesn't look nearly as cool if you do aye
    - MtheoryX, on 02/05/2008, -0/+2Yarr!
  - ayeroxor, on 02/05/2008, -0/+2Maybe creator is a Kentucky hillbilly or something. "Lahk ah sed, boah, it's spelled dee ah dubble jee, ya'heah?"
- NJank, on 02/05/2008, -0/+4sweet! now, to use this to bring back something like the Boss key...
- superdog87, on 02/05/2008, -3/+10I'm turning off adblock plus to give you a click. You deserve the extra cash for this.
- sERIALeATER, on 02/05/2008, -0/+5Yay! we can now make ixelated porn with this :)
  Now I feel like on my old 28.8kbs modem, while waiting for a jpeg to load ^-^
- PimpinOnWelfare, on 02/05/2008, -1/+6Turned ad-block off out of respect and not a lot of sites get that my friend.
- Zaggynl, on 02/05/2008, -2/+6What are these ads you spea...oh wait, *turns off Adblock*
  Thanks buddy.
- optimusprime01, on 02/05/2008, -0/+1@kastner . Hopefully you would have gotten my email.
pixites, on 02/05/2008, -11/+2I kinda figured out that you made it, great, keep surprising;)
yonnage, on 02/05/2008, -8/+4very cool
garyv, on 02/05/2008, -8/+4kastner is a pimp...kinda;)...nah a pimp!
mikehill33, on 02/05/2008, -9/+3wow.
DarthDaddy, on 02/05/2008, -1/+74BTW, you need to highlight the block of code to see the image.....HOLY HELL SWEET!
- dbxz, on 02/05/2008, -0/+7haha! a new age of html porn is comming... lol anyone remember those images you could select to see hidden images in them?
  - KotZer, on 02/05/2008, -0/+2no, can you give us an example link?
defunktion, on 02/05/2008, -2/+60This is thinking... behind the box.
- andregriffin, on 02/05/2008, -2/+41Now you're thinking with portals!
  - benplaut, on 02/05/2008, -1/+4Highlight the text for delicious, moist cake.
    This is brilliant code.
    - kastner, on 02/06/2008, -0/+2HUGE SUCCESS
      http://urltea.com/2nin
    - taquitohater, on 02/18/2008, -0/+1EPIC
wontstoptalking, on 02/05/2008, -27/+10Mine: http://tinyurl.com/23rw83
- synaesthesia, on 02/05/2008, -2/+4Well that sucked.
- SpookyPig, on 02/05/2008, -0/+3Nice accurate spambot name
- arobar, on 02/05/2008, -2/+2I'm a Ron Paul supporter and everything, but that was just annoying.
- MtheoryX, on 02/05/2008, -4/+1Actually, as much as I hate Ron Paulian spam...that was pretty cool. I'll let it slide...just this once.
- quinlan, on 02/05/2008, -2/+2Ooh. Ooh. Now me.
  http://tinyurl.com/245w6q
tast01, on 02/05/2008, -15/+3i dont get what this does
- jord, on 02/05/2008, -0/+7try highlighting the block of text in FF or Safari... if you're using IE, well that's your problem
- arobar, on 02/05/2008, -1/+5Use a real browser.
irriadin, on 02/05/2008, -2/+28Too bad IE6 and IE7 don't support CSS3. Until people stop using those browsers, CSS3 won't become widely used. Still, that's a neat trick.
- yojiffyskippy, on 02/05/2008, -0/+4If this isn't a good enough reason to bring Microsoft on board then what is?
  - MtheoryX, on 02/05/2008, -0/+5Bring them on board? Do they need a hand holding? Do they need to be offered a sucker just to do what they should be doing? To hell with them, I say.
- falafelkiosken, on 02/05/2008, -0/+1will it ever?
- j4200, on 02/05/2008, -0/+3Neither do FF or Opera. It's only just one selector
zdiddy85, on 02/05/2008, -3/+25So I take it this isn't compatible with IE 6 or 7? What a surprise....
TH3W1R3D, on 02/05/2008, -14/+7Pretty cool but useless.
- SuperRoach, on 02/05/2008, -0/+8Who cares, its an example. Its up to you or the web developer to make it useful - which can be fun!
- unusualbob, on 02/05/2008, -2/+6anon can probably find a use...
  
  http://metaatem.net/highlite/?text=Hi+%24cientolog ...
  - unusualbob, on 02/05/2008, -1/+5actually nvm this one is better, http://metaatem.net/highlite/?text=Hi+%24cientolog ...
ElBeh, on 02/05/2008, -6/+1I love you.
optimusprime01, on 02/05/2008, -1/+15One kickass CSS snippet. Simply wow gives Steganography a whole new meaning. May be those using MatLab or C/C++ for Steganography should use it :).
http://en.wikipedia.org/wiki/Steganography
diggdiggerid, on 02/05/2008, -49/+2Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee
Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah D
ouble Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Doubl
e Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Ge
e! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! D
ee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee A
h Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Do
uble Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double
Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee
! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! De
e Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah
Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Dou
ble Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double
Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee!
Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee
Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah
Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Doub
le Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double G
ee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee!
Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee
Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah D
ouble Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Doubl
e Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Ge
e! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! D
ee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee A
h Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Do
uble Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double
Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee
! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! De
e Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah
Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Dou
ble Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double
Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee!
Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double
Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah
Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Doub
le Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double G
ee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee!
Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee
Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! Dee Ah Double Gee! D
- InspectorGadget, on 02/05/2008, -0/+29Doesn't work without the style rules on that site, Einstein.
- Dested, on 02/05/2008, -2/+23You gotta be some kinda idiot.
- digg0t, on 02/05/2008, -1/+2I thought it was funny :)
- dennison, on 02/09/2008, -0/+1LOL you got me there
phantasyhero, on 02/05/2008, -2/+6Whoah, that's neat.
kurupttek, on 02/05/2008, -3/+59WOW this is great
http://tinyurl.com/3xxbbz
- SpookyPig, on 02/05/2008, -1/+18*opera clap* Well done, well done good sir.
- MtheoryX, on 02/05/2008, -0/+14Wow, never been rolled like that before. Well done.
DaPaki1, on 02/05/2008, -0/+20Cool. So we can expect MS to implement this by IE 10 or so?
- falafelkiosken, on 02/05/2008, -0/+2which, according to my calculations, will be released in 2024, hurray
- Syphon8, on 02/05/2008, -0/+1We just need to find an exploit in IE to make it load Firefoxs rendering engine remotely somehow, then we're golden.
milas, on 02/05/2008, -1/+28It works in Opera as well!
- minigamer1896, on 02/05/2008, -8/+3I hate to say this, but we're in the minority of the browser users. :(
- laserone, on 02/05/2008, -7/+2It works in the Flock browser, too.
  - falafelkiosken, on 02/05/2008, -0/+3that's because it's using the gecko engine, if it works in Firefox, it works in Flock
- falafelkiosken, on 02/05/2008, -2/+11digg me down please
elfprince13, on 02/05/2008, -1/+18I can just see this being used to kill someone's browser with REALLY big invisible images
- Ludnix, on 02/05/2008, -0/+2Because there was no way to hide really big invisible images before?
benburned, on 02/05/2008, -8/+3Am I the only one who immediately thought to generate "*****" as the sample text?
- karipatila, on 02/05/2008, -0/+4Yes, you probably are.
Pg5of16, on 02/05/2008, -1/+5Just to let you know, the < character kinda screws things up.
http://tinyurl.com/38udc9
Fun to play with though!
- bizkit00, on 02/05/2008, -0/+4haha and "< ! - - " (minus the spaces) stops the site in its tracks
- kastner, on 02/05/2008, -0/+5Both are fixed! Thanks for finding those bugs :)
zaklampert, on 02/05/2008, -10/+4http://metaatem.net/highlite/?text=Ron+Paul+2008%2 ...
- Daniel591992, on 02/05/2008, -3/+4http://metaatem.net/highlite/?text=Ron+Paul+2008%2 ...
canthraxp, on 02/05/2008, -0/+34The new era where porn can be hidden in plain text.

Brilliant!
- sasquatchcrotch, on 02/05/2008, -3/+7It's not quite the same.
  
  NSFW
  
  http://preview.tinyurl.com/38wzrj
- 3rdfinger, on 02/05/2008, -0/+1now i'm gonna select every group of text i see...
  
  thanks?
- 3rdfinger, on 02/05/2008, -0/+0http://metaatem.net/highlite/?text=Rick+Roll&image ...
  
  on second thought... maybe not.
- daschupa, on 02/05/2008, -0/+2It looks like SNES porn.
undyboy91, on 02/05/2008, -0/+9That's pretty sexy if i do say so myself.
Krettis, on 02/05/2008, -8/+2Nice, but useless.
trestevenson, on 02/05/2008, -1/+2that's pretty badass.
TizzleDizz, on 02/05/2008, -3/+6CTRL + A
bemaniso, on 02/05/2008, -1/+3I broke it
http://tinyurl.com/2codj5
- SuperRoach, on 02/05/2008, -0/+5I see what you did there ;P
  
  Doesn't work though.
Flappy3, on 02/05/2008, -0/+2D-R-G-G?
snoonoo, on 02/05/2008, -2/+4Dee Ah Double Gee!

That will be my comment for every single future front page stories.
projectstartrek, on 02/05/2008, -0/+3Useful for hiding porn.
se1zure, on 02/05/2008, -5/+6how pointless is this? THe only application i could see this being is for hiding a spoiler or something.. myabe with some transparency altering the color of text highlighting on the page...

And the guy has his site spammed with google ads.
- kastner, on 02/05/2008, -0/+7Google and Text Link Ads. I resisted putting them up for as long as I could, but the reality of my current situation has won. Once I hit the digg lottery, I'll be taking them down ;)
TheWindBlows, on 02/05/2008, -0/+2Using a processor optimized version of Firefox This is my User agent.
Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9b3pre) Gecko/2007122901 Firefox/3.0b3pre (Swiftfox) MSIE/Bypass
Its stuck on " loading... " until I change my user agent string to something else like firefox's for linux's normal user agent.
Anyways nice none the less.

Actually it can have a use if you do that behind a company site with an image that states it is illegal to copy or reproduce this site etc it can be useful for that. Also I have a feeling it can be used for more than just hiding images behind text.
WaterSoul, on 02/05/2008, -0/+2Nice work, would be nice to see ascii images with the actual images as you select too.
BadMammaJamma, on 02/05/2008, -8/+2Paris Hilton Is Hot...

http://tinyurl.com/37u6tw
- dylanbathurst, on 02/05/2008, -0/+1Beeeeooooommmm.
- foooey, on 02/05/2008, -0/+1that was a silly thing to lose an account over
  would have been more clever if you'd have bothered to rename the image from goatse though
Logomachist, on 02/05/2008, -4/+0For those of us not gifted with futuristic browsers... what does it DO?
- DickyT83, on 02/05/2008, -0/+3lol futuristic browsers.
- ThirdPrize, on 02/05/2008, -2/+1I doubt if it does anything useful.
dpoon, on 02/05/2008, -0/+4You should be able to eliminate half of your CSS blocks by combining the selectors

.color-109::selection, .color-109::-moz-selection {
color: rgb(157, 157, 157);
background: rgb(157, 157, 157)
}
- kastner, on 02/05/2008, -0/+2OMFG, DUH! I'll make that change now (how the hell did I miss this?)
  - kastner, on 02/05/2008, -0/+3Actually it didn't work. For some reason, it breaks safari. Maybe the moz selector makes safari ignore the rule?
- Archeologist, on 02/05/2008, -0/+1I don't think there's a comma after "selection"
incd, on 04/18/2008, -0/+3Aww. A little guy with a shovel.
WhatsUpWithJack, on 02/05/2008, -0/+5When I clicked on the link in Safari, my browser crashed.
WhatsUpWithJack, on 02/05/2008, -6/+1Quite useful, actually.
http://tinyurl.com/357ejr
- quii, on 02/05/2008, -1/+1Die
- k0ster, on 02/05/2008, -1/+0wtf is wrong with you?
Xonay, on 02/05/2008, -0/+4Perfect for eastereggs...
Bramus, on 02/05/2008, -2/+1Don't think Snoop fancies an A in D O Double G ... fo shizzle!
tehxen3, on 02/05/2008, -0/+1WHOAAAAAA
um ok
NiX0n, on 02/05/2008, -2/+1http://metaatem.net/highlite/?text=*&image=http%3A ... (NSFW)
FredFredrickson, on 02/05/2008, -1/+1Kinda neat. Not worth a donation though, as it's uses are pretty limited.
- grinndaddy, on 02/07/2008, -0/+1Seriously. Anybody have any ideas for potential uses? Perhaps for a CAPTCHA of some sort... Select the text in the image to the left in the text to the right, then type what you see into the box below... or the sort.
perot9296, on 02/05/2008, -0/+1Nice idea. Not sure how useful it can be but nice. :)
Shoseki, on 02/05/2008, -0/+1WTS Epic Wang! http://metaatem.net/highlite/?text=WTS+my+epic+wan ...
- dennison, on 02/09/2008, -0/+1HAHA
dustedotnet, on 02/07/2008, -0/+1I'm glad it only takes up 1,068 lines of code. Anymore and I'd assume the internet would implode from excess code.
ikiblogku, on 02/08/2008, -0/+0cool!.. Nice work! DRGG
Show 51 - 52 of 52 discussions
Login or register to add a comment

Create a new account or login to join in the conversation on Digg. You'll also be able to Digg stories to help promote things you like.

CSS3 ::selection used to hide any image in text

Login or register to add a comment