Text + Image + CSS3 = Crazy Delicious

Tuesday, February 19th, 2008

css3Here is a cool CSS3 trick.

By the creator of Spell with Flickr and Befuddlr (addictive!), this little program sets up the code to hide an image in plain sight. Point to the url of your favorite image and add some text. The program uses Safari and Firefox’s support of CSS3’s ::selection pseudo-element to render the image using the highlight color of the text.

Highlight the text below to see what I mean:
(only works in newer versions of Safari and FF)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut ac nisi sit amet tortor pellentesque auctor. Vivamus at est

vitae urna pulvinar malesuada. Curabitur mollis. Donec congue pellentesque lorem. Donec sagittis rhoncus quam. Mauris p

retium vestibulum ante. In eget metus. Vivamus turpis lectus, bibendum id, volutpat eu, scelerisque a, sapien. Aliquam e

rat volutpat. Donec vestibulum, dolor consectetuer elementum consectetuer, urna urna aliquet nisl, non eleifend neque me

tus nec magna. Duis nibh. Donec congue erat eget elit. Nunc ultrices, sapien ac ultrices nonummy, risus mauris pharetra

erat, ac porttitor orci eros a enim. Nunc rhoncus imperdiet ligula.Lorem ipsum dolor sit amet, consectetuer adipiscing e

lit. Ut ac nisi sit amet tortor pellentesque auctor. Vivamus at est vitae urna pulvinar malesuada. Curabitur mollis. Don

ec congue pellentesque lorem. Donec sagittis rhoncus quam. Mauris pretium vestibulum ante. In eget metus. Vivamus turpis

lectus, bibendum id, volutpat eu, scelerisque a, sapien. Aliquam erat volutpat. Donec vestibulum, dolor consectetuer el

ementum consectetuer, urna urna aliquet nisl, non eleifend neque metus nec magna. Duis nibh. Donec congue erat eget elit

. Nunc ultrices, sapien ac ultrices nonummy, risus mauris pharetra erat, ac porttitor orci eros a enim. Nunc rhoncus imp

erdiet ligula.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut ac nisi sit amet tortor pellentesque auctor.

Vivamus at est vitae urna pulvinar malesuada. Curabitur mollis. Donec congue pellentesque lorem. Donec sagittis rhoncus

quam. Mauris pretium vestibulum ante. In eget metus. Vivamus turpis lectus, bibendum id, volutpat eu, scelerisque a, sap

ien. Aliquam erat volutpat. Donec vestibulum, dolor consectetuer elementum consectetuer, urna urna aliquet nisl, non ele

ifend neque metus nec magna. Duis nibh. Donec congue erat eget elit. Nunc ultrices, sapien ac ultrices nonummy, risus ma

uris pharetra erat, ac porttitor orci eros a enim. Nunc rhoncus imperdiet ligula.Lorem ipsum dolor sit amet, consectetue

r adipiscing elit. Ut ac nisi sit amet tortor pellentesque auctor. Vivamus at est vitae urna pulvinar malesuada. Curabit

ur mollis. Donec congue pellentesque lorem. Donec sagittis rhoncus quam. Mauris pretium vestibulum ante. In eget metus.

Vivamus turpis lectus, bibendum id, volutpat eu, scelerisque a, sapien. Aliquam erat volutpat. Donec vestibulum, dolor c

onsectetuer elementum consectetuer, urna urna aliquet nisl, non eleifend neque metus nec magna. Duis nibh. Donec congue

erat eget elit. Nunc ultrices, sapien ac ultrices nonummy, risus mauris pharetra erat, ac porttitor orci eros a enim. Nu

nc rhoncus imperdiet ligula.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut ac nisi sit amet tortor pellent

esque auctor. Vivamus at est vitae urna pulvinar malesuada. Curabitur mollis. Donec congue pellentesque lorem. Donec sag

ittis rhoncus quam. Mauris pretium vestibulum ante. In eget metus. Vivamus turpis lectus, bibendum id, volutpat eu, scel

erisque a, sapien. Aliquam erat volutpat. Donec vestibulum, dolor consectetuer elementum consectetuer, urna urna aliquet

nisl, non eleifend neque metus nec magna. Duis nibh. Donec congue erat eget elit. Nunc ultrices, sapien ac ultrices non

ummy, risus mauris pharetra erat, ac porttitor orci eros a enim. Nunc rhoncus imperdiet ligula.Lorem ipsum dolor sit ame

t, consectetuer adipiscing elit. Ut ac nisi sit amet tortor pellentesque auctor. Vivamus at est vitae urna pulvinar male

suada. Curabitur mollis. Donec congue pellentesque lorem. Donec sagittis rhoncus quam. Mauris pretium vestibulum ante. I

n eget metus. Vivamus turpis lectus, bibendum id, volutpat eu, scelerisque a, sapien. Aliquam erat volutpat. Donec vesti

bulum, dolor consectetuer elementum consectetuer, urna urna aliquet nisl, non eleifend neque metus nec magna. Duis nibh.

Donec congue erat eget elit. Nunc ultrices, sapien ac ultrices nonummy, risus mauris pharetra erat, ac porttitor orci e

ros a enim. Nunc rhoncus imperdiet ligula.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut ac nisi sit amet

tortor pellentesque auctor. Vivamus at est vitae urna pulvinar malesuada. Curabitur mollis. Donec congue pellentesque lo

rem. Donec sagittis rhoncus quam. Mauris pretium vestibulum ante. In eget metus. Vivamus turpis lectus, bibendum id, vol

utpat eu, scelerisque a, sapien. Aliquam erat volutpat. Donec vestibulum, dolor consectetuer elementum consectetuer, urn

a urna aliquet nisl, non eleifend neque metus nec magna. Duis nibh. Donec congue erat eget elit. Nunc ultrices, sapien a

c ultrices nonummy, risus mauris pharetra erat, ac porttitor orci eros a enim. Nunc rhoncus imperdiet ligula.Lorem ipsum

dolor sit amet, consectetuer adipiscing elit. Ut ac nisi sit amet tortor pellentesque auctor. Vivamus at est vitae urna

pulvinar malesuada. Curabitur mollis. Donec congue pellentesque lorem. Donec sagittis rhoncus quam. Mauris pretium vest

ibulum ante. In eget metus. Vivamus turpis lectus, bibendum id, volutpat eu, scelerisque a, sapien. Aliquam erat volutpa

t. Donec vestibulum, dolor consectetuer elementum consectetuer, urna urna aliquet nisl, non eleifend neque metus nec mag

na. Duis nibh. Donec congue erat eget elit. Nunc ultrices, sapien ac ultrices nonummy, risus mauris pharetra erat, ac po

rttitor orci eros a enim. Nunc rhoncus imperdiet ligula.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut ac

nisi sit amet tortor pellentesque auctor. Vivamus at est vitae urna pulvinar malesuada. Curabitur mollis. Donec congue p

ellentesque lorem. Donec sagittis rhoncus quam. Mauris pretium vestibulum ante. In eget metus. Vivamus turpis lectus, bi

bendum id, volutpat eu, scelerisque a, sapien. Aliquam erat volutpat. Donec vestibulum, dolor consectetuer elementum con

sectetuer, urna urna aliquet nisl, non eleifend neque metus nec magna. Duis nibh. Donec congue erat eget elit. Nunc ultr

ices, sapien ac ultrices nonummy, risus mauris pharetra erat, ac porttitor orci eros a enim. Nunc rhoncus imperdiet ligu

la.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut ac nisi sit amet tortor pellentesque auctor. Vivamus at

est vitae urna pulvinar malesuada. Curabitur mollis. Donec congue pellentesque lorem. Donec sagittis rhoncus quam. Mauri

s pretium vestibulum ante. In eget metus. Vivamus turpis lectus, bibendum id, volutpat eu, scelerisque a, sapien. Aliqua

m erat volutpat. Donec vestibulum, dolor consectetuer elementum consectetuer, urna urna aliquet nisl, non eleifend neque

metus nec magna. Duis nibh. Donec congue erat eget elit. Nunc ultrices, sapien ac ultrices nonummy, risus mauris pharet

ra erat, ac porttitor orci eros a enim. Nunc rhoncus imperdiet ligula.Lorem ipsum dolor sit amet, consectetuer adipiscin

g elit. Ut ac nisi sit amet tortor pellentesque auctor. Vivamus at est vitae urna pulvinar malesuada. Curabitur mollis.

Donec congue pellentesque lorem. Donec sagittis rhoncus quam. Mauris pretium vestibulum ante. In eget metus. Vivamus tur

pis lectus, bibendum id, volutpat eu, scelerisque a, sapien. Aliquam erat volutpat. Donec vestibulum, dolor consectetuer

elementum consectetuer, urna urna aliquet nisl, non eleifend neque metus nec magna. Duis nibh. Donec congue erat eget e

lit. Nunc ultrices, sapien ac ultrices nonummy, risus mauris pharetra erat, ac porttitor orci eros a enim. Nunc rhoncus

imperdiet ligula.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut ac nisi sit amet tortor pellentesque aucto

r. Vivamus at est vitae urna pulvinar malesuada. Curabitur mollis. Donec congue pellentesque lorem. Donec sagittis rhonc

us quam. Mauris pretium vestibulum ante. In eget metus. Vivamus turpis lectus, bibendum id, volutpat eu, scelerisque a,

sapien. Aliquam erat volutpat. Donec vestibulum, dolor consectetuer elementum consectetuer, urna urna aliquet nisl, non

eleifend neque metus nec magna. Duis nibh. Donec congue erat eget elit. Nunc ultrices, sapien ac ultrices nonummy, risus

mauris pharetra erat, ac porttitor orci eros a enim. Nunc rhoncus imperdiet ligula.Lorem ipsum dolor sit amet, consecte

tuer adipiscing elit. Ut ac nisi sit amet tortor pellentesque auctor. Vivamus at est vitae urna pulvinar malesuada. Cura

bitur mollis. Donec congue pellentesque lorem. Donec sagittis rhoncus quam. Mauris pretium vestibulum ante. In eget metu

s. Vivamus turpis lectus, bibendum id, volutpat eu, scelerisque a, sapien. Aliquam erat volutpat. Donec vestibulum, dolo

r consectetuer elementum consectetuer, urna urna aliquet nisl, non eleifend neque metus nec magna. Duis nibh. Donec cong

ue erat eget elit. Nunc ultrices, sapien ac ultrices nonummy, risus mauris pharetra erat, ac porttitor orci eros a enim.

Nunc rhoncus imperdiet ligula.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut ac nisi sit amet tortor pell

entesque auctor. Vivamus at est vitae urna pulvinar malesuada. Curabitur mollis. Donec congue pellentesque lorem. Donec

sagittis rhoncus quam. Mauris pretium vestibulum ante. In eget metus. Vivamus turpis lectus, bibendum id, volutpat eu, s

celerisque a, sapien. Aliquam erat volutpat. Donec vestibulum, dolor consectetuer elementum consectetuer, urna urna aliq

uet nisl, non eleifend neque metus nec magna. Duis nibh. Donec congue erat eget elit. Nunc ultrices, sapien ac ultrices

One Response to “Text + Image + CSS3 = Crazy Delicious”


  1. fish Says:

    Boring!!!! You should write about urban lumberjacking, or strange plant, bed building. Maybe wax removal, or the great mushroom scam!!! Now that something we can sink our teeth into. LOL

Leave a Reply

You know you want to...