sta la sta このページをアンテナに追加 RSSフィード

2008-02-05

テキストをハイライトすると絵が出てくる!

※Firefox(推奨)またはSafariでご覧ください。(未確認ですがFlockでも良いようです。)

via Text + Image + CSS3 = Crazy Delicious

まずは以下のテキストをマウスでハイライトさせてみてください。(あるいはCtrl+Aでテキスト全選択ですね。)

One morning, when Gregor Samsa woke from
troubled dreams, he found himself trans
formed in his bed into a horrible vermin
. He lay on his armour-like back, and if
he lifted his head a little he could se
e his brown belly, slightly domed and di
vided by arches into stiff sections. The
bedding was hardly able to cover it and
seemed ready to slide off any moment. H
is many legs, pitifully thin compared wi
th the size of the rest of him, waved ab
out helplessly as he looked. "What's hap
pened to me? " he thought. It wasn't a d
ream. His room, a proper human room alth
ough a little too small, lay peacefully
between its four familiar walls. A colle
ction of textile samples lay spread out
on the table - Samsa was a travelling sa
lesman - and above it there hung a pictu
re that he had recently cut out of an il
lustrated magazine and housed in a nice,
gilded frame. It showed a lady fitted o
ut with a fur hat and fur boa who sat up
right, raising a heavy fur muff that cov
ered the whole of her lower arm towards
the viewer. Gregor then turned to look o
ut the window at the dull weather. Drops
of rain could be heard hitting the pane
, which made him feel quite sad. "How ab
out if I sleep a little bit longer and f
orget all this nonsense", he thought, bu
t that was something he was unable to do
because he was used to sleeping on his
right, and in his present state couldn't
get into that position. However hard he
threw himself onto his right, he always


ハイライトさせた箇所から絵が出てくるハズ。面白いですねぇ。CSSを使ったテクニックとのことです。

作り方は、適当な英文を用意して、変換したい画像のURLと色数、完成品の横幅を指定して『generate』をクリック。

めぼしい英文が手元に無い時は、|| Dummy Text Generator | Lorem ipsum for webdesigners ||といったサイトを利用するといいですよ。

するとコードを生成してくれるので『Get code』からコードをコピーしてブログ等に張り付ければOK。

SafariとFirefoxで表示を確認しましたが、Safariだとちょっと変に表示されるようなのでできたらFirefoxで見てみてください。

ちなみに元画像はコレです。