Text + Image + CSS3 = Crazy Delicious
Tuesday, February 19th, 2008
Here 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
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