マウスで文字をハイライトすると絵が飛び出す仕組みを簡単に生成してくれるのが今回紹介する「Crazy Delicious」。一見何の変哲もないテキストなのですが、マウスで選択してハイライトすると絵が浮き出てるといった仕組みのHTMLを一枚の画像と任意のテキストから生成してくれます。
現在対応しているブラウザはSafariとFireFoxのみになります。CSS3の「selection pseudo-element. 」とPHPで実現させているみたいです。
詳しくは以下
使用方法はとても簡単で、並べたいテキストデータを打ちこんで、ハイライトで表示させたい画像をURLで指定します。その後はいろ数と出力の幅を決めて「Generate」のボタンを押せば生成してくれます。生成した後は「Get code」のテキストリンクを押せば、コードが取得できるようになっています。
テキストに日本語が使えないのが痛いですが、説明文をハイライトすると説明の内容の画像が浮き出てくるとか、アイデア次第では色々と使えそうな手法だと思います。
Text + Image + CSS3 = Crazy Delicious
Related Articles:
- 1000個以上のフリーCSSレイアウトテンプレートが利用できる「freelayouts」
- CSSギャラリーサイトをまとめた「The Great Website Design Gallery Roundup 」
- 実用度の高いCSSメニューを集めた「 7 Advanced CSS Menu」
- 最大2560×1920の高解像度テクスチャを無料配布する「Mayang's Free Textures」
- WEBデザイナーに役立つリンクを集めた「455 helpful links for webdesigners」
- レゴ感覚でマッシュアップができる「Popfly」を試してみました。
(7)
(2)
(4)
Total: 13
