- ブラウザごとに異なる見え方をする肖像画が発表される
- HTMLとCSSなどのコードを組み合わせて肖像画を作成することで、ブラウザごとに違う絵へ自動翻訳
一見普通に見える上の肖像画ですが、実はある秘密が隠されています。
「PureCSS Lace」というこの画像は、暗号を使って作成されており、開くブラウザの種類によって姿を変えるのです。
作成したのは、デジタル・アーティストのダイアナ・スミス氏。
スクリーンショットすればどのブラウザでも同じに見えますが、リンクを開くと、各ブラウザによって別々の絵に自動翻訳されるそうです。
果たしてどんな変化が起きるのでしょうか。
コードを組み合わせて絵を再現
ウェブ上では、最も一般的な画像形式である「JPG」を埋め込めばブラウザの種類に関わらず同じ画像が開けます。
しかしスミス氏は、JPGなどの画像としてではなく、HTMLとCSS(ウェブ上での表示方法を指定するコンピュータ言語)を組み合わせて肖像画を再現しました。
この肖像画は、なんと画像を読み込むブラウザの種類によって勝手に絵が変化してしまうのです。
数種類のブラウザで表示したものがこちら。以下はスクリーンショットなので、ブラウザに関係なく同じ画像に見えます。
例えば、「Safari」だとこうなります。
背後のレースが顔の前に来ます。
続いて、ノルウェーのソフトウェア開発会社の「Opera(2014年版)」ではこちら。
ピカソのキュビズムのようですね。首ももげちゃってます。
「Microsoft Edge」ではこちら。
皮肉なことに、醍醐味であるエッジ(起伏)が消えてしまいました。
「Netscape Navigator」ならこちら。
80年代のファミコンゲームっぽい仕上がりです。
このように、各ブラウザで肖像画は見え方が異なりますが、ChromeやVivaldi、Braveなら、オリジナルの絵が表示されるとのこと。
気になった方は、ぜひお手持ちの携帯やパソコンで試してみてください。
「PureCSS Lace」
https://diana-adrianne.com/purecss-lace/
ちなみに昨年5月に発表されたもう一つのバージョン「PureCSS Francine 」はこちら。
https://diana-adrianne.com/purecss-francine/