音楽プレイヤーのタイトル表示部をCSSでモノクローム液晶画面のような表示にしました。

自作のHTML5音楽プレイヤーのアーティスト名、アルバム名、曲名を表示する部分 (スクリーンショット画像の最上部)をCSSのスタイルで昔のモノクローム液晶画面風にしてみました。

上に掲載したスクリーンショット画像は2021年10月31日のものです。

モノクロ液晶風のCSS スタイルのサンプル画像です。
枠を立体的にして、ボックス内に液晶っぽい色を付け、文字と枠の内側に影を付けただけですが、懐かしい液晶の見た目が再現出来たと思います。
ただ、タイトルの背景が明るいと目立ってしまい、Canvasのヴィジュアライザーの邪魔になるので、背景は大分暗く設定してあります。

Music Player

HTML5のCanvas要素とWeb Audio APIを利用してJavaScriptで作成した音楽プレイヤー。プレイリストとヴィジュアライザー、キーボード演奏機能があります。

widedeepspace.net

2019.07.03

[モノクローム液晶画面風のインラインstyle属性のサンプル コード]

<div id="monochromeLCD_outerFrame"
 style="position: relative; margin-right: auto; width: 480px;
 background-color: #8e8e8e;
 border-top: solid 4px #606060; border-left: solid 4px #4e4e4e;
 border-right: solid 4px #202020; border-bottom: solid 4px #0e0e0e;
 color: #aeaeae"
>

<div id="monochromeLCD_innerFrame"
 style="position: relative; padding: 2px;
 background-color: #2e2e2e;
 text-align: left; text-shadow: 1px 1px 1px #000000"
>

Monochrome LCD

<div id="monochromeLCD"
 style="position: relative; padding: 4px; height: 80px;
 background-color: #2e2e2e"
>

<div id="displayAreaOfMessage"
 style="width: 320px; position: absolute; bottom: 8px; padding: 4px 12px;
 background-color: #6c6e6a;
 border-top: solid 2px #0e0e0e; border-left: solid 2px #202020;
 border-right: solid 2px #4e4e4e; border-bottom: solid 2px #606060;
 box-shadow: 1px 1px 4px 4px #2c2e2a inset;
 text-align: left; color: #202020; font-size: 20px; text-shadow: 1px 1px 2px #202020"
>

I love you!<br />
How about you?

</div>
<div
 style="position: absolute; bottom: 2px; right: 0"
>

Old style.

</div>
</div>

<div
 style="border-top: solid 2px #0e0e0e; border-bottom: solid 2px #606060"
>
</div>

Retro Design.

</div>
</div>

[HTML5のインラインstyle属性による実際の表示]