So-net無料ブログ作成

音楽プレイヤーのタイトル表示部をCSSでモノクローム液晶画面のような表示にしました。 [音楽再生ウェブ アプリケーション]

JS_Music Player_SS_(2018_02_27)_1_cropped_1 黒い背景の上に緑色、黄色、青色の幾つもの二重の光の輪が広がり、輪と同色の粒子が無数に飛び散っている。 画面下部には高さがまちまちの水色の縦長の棒が横方向に沢山並んだ音楽スペクトラム アナライザーのヴィジュアライザーが表示されている。 画面最上部にはアーティスト名、アルバム名、曲名が表示されている。
https://c1.staticflickr.com/5/4740/25630768797_b7030543b7_o.png
自作のHTML5 ウェブ音楽プレイヤーのアーティスト名、アルバム名、曲名を表示する部分(スクリーンショット画像の最上部)をCSSのスタイルで昔のモノクローム液晶画面風にしてみました。
枠を立体的にして、ボックス内に液晶っぽい色を付け、文字と枠の内側に影を付けただけですが、懐かしい液晶の見た目が再現出来たと思います。
ただ、タイトルの背景が明るいと目立ってしまい、Canvasのヴィジュアライザーの邪魔になるので、背景は大分暗く設定してあります。

ブログ記事: "ウェブ音楽プレイヤー"
URL: http://musicvisualizer.blog.so-net.ne.jp/2017-06-26

SS_MonochromeLCD_CSS_(2018_02_27)_1 モノクローム液晶のように見える画面デザインのスクリーンショット画像。
https://c1.staticflickr.com/5/4724/25643650397_461ccceb8b_o.png
モノクロ液晶風のCSS スタイルのサンプル画像です。

[モノクローム液晶画面風のインライン 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>


[実際の表示]
Monochrome LCD
I love you!
How about you?
Old style.
Retro Design.


ブログ最終確認日: 2018年5月3日
nice!(1)  コメント(0) 

nice! 1

コメント 0

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

※ブログオーナーが承認したコメントのみ表示されます。

Facebook コメント