laptop CSS - ラップトップ風の枠を表示するCSS
同じ映像であっても、その見せ方によって受ける印象は大きく異なります。レトロな映像を、同じくレトロなテレビの枠に当てはめて再生すると雰囲気が出ます。人は単純に映像だけでなく、その周辺環境の影響も受けて楽しむことができます。 今回紹介するlaptop CSSはそんな映像を表示する枠のようなものです。何がマッチするのか考えさせられるソフトウェアでもあります。
laptop CSSの使い方
例えば以下のようにlaptopクラスを指定します。
<div class="laptop">
<img src="https://media3.giphy.com/media/4oCKJV82qxnjO/giphy.gif"/>
</div>
そうすると、以下のような表示になります。
小さいサイズもできます。
さらに大きなサイズも。なぜこのGIFを選んだのか…。
laptop CSSはCSSでラップトップ風の枠を描画しています。細かく計算された結果、生成されています。あえて罫線で書かれることでレトロなイメージを感じさせます。素材を選びますが、面白い使い方も考えられそうです。
laptop CSSはCSS製のオープンソース・ソフトウェア（MIT）です。