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: https://applicationprogram.blog.so-net.ne.jp/2019-07-03-1

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.

nice!(1)  コメント(0) 

昔のPC用デヴァイスの写真。 [電子機器]

収納箱を漁ったらこんな物が出て来ました。
USB2.0 CardBus PC Card_(2018_02_09)_1_resized_1 "USB2.0 CardBus PC Card" を撮影した写真。 "PC Card" スロット差し込み用端子の側を右向きにして置かれている。 向かって左側がUSB2.0用のコネクター部分である。
https://c1.staticflickr.com/5/4648/39261119355_81f149199a_o.png
" USB2.0 CardBus PC Card " という代物です。
昔、アップル社の " PowerBook G4 550MHz Titanium " というノートブック PCのPCカード スロットに挿してUSB ポートを増設するのに使用しておりました。

CompactFlash Adapter_(2018_02_09)_2_resized_1 "CompactFlash" アダプターを撮影した写真。 "PC Card" スロット差し込み用端子の側を右上向きにして置かれている。 向かって左下側に "CompactFlash" メモリー カードが装着されている。
https://c1.staticflickr.com/5/4606/26286976628_fe9e1feed8_o.png
" コンパクトフラッシュ " というメモリー カード用に、ノートブック PCのPCカード スロットに挿して使用したアダプターです。
64MB(メガバイト)の記憶容量のフラッシュ メモリーが装着されていますね。
今ではずっと小型で1,000倍の記憶容量である64GB(ギガバイト)のSD メモリー カードなどが普通ですね。

CompactFlash Adapter_(2018_02_09)_1_resized_1 "PC Card" スロット差し込み用端子の側を下向きにして置かれている。 向かって上側に "CompactFlash" メモリー カードが装着されている。
https://c1.staticflickr.com/5/4625/39261119615_7bd566111f_o.png
昔のデヴァイスはコネクターのコンタクトが沢山並んでいましたね。
nice!(0)  コメント(0) 

飴ゴム チューブの結び目。 [写真とカメラ]

今日の写真は、飴ゴム(アメ ゴム) チューブ結び目です。

Natural Rubber_(2018_02_08)_1_resized_1 飴色をした天然ゴム チューブが折り畳まれ結ばれている様を撮影した写真。
https://c1.staticflickr.com/5/4616/28372948119_3f96dc8c8e_o.png
天然ゴム製で、綺麗な飴色のチューブですね。

このゴム管は摩擦が強く、また静電気も帯びるので、塵や埃が付着し易く、撮影時にはセロファン粘着テープで塵や埃を除去しながら撮影致しました。

Natural Rubber_(2018_02_08)_5_resized_1 飴色をした天然ゴム チューブが折り畳まれ結ばれている様を撮影した写真。
https://c1.staticflickr.com/5/4712/28372947909_4beb79c558_o.png

Natural Rubber_(2018_02_08)_9_resized_1 飴色をした天然ゴム チューブが折り畳まれ結ばれている様を撮影した写真。
https://c1.staticflickr.com/5/4703/28372947699_84908abef7_o.png
この飴ゴム チューブは半透明に光が透けていて、何とも綺麗です。

ブログ記事: 100円ショップ材料で撮影ボックスを自作しました。
http://crater.blog.so-net.ne.jp/2018-01-19

nice!(0)  コメント(0) 

建設現場のタワー クレーンと電波塔の写真。 [写真とカメラ]

今回も、建設現場のタワー クレーンと電波塔を撮影致しました。

Tower Crane_(2018_02_04)_1_resized_1 タワー クレーンを下から見上げて撮影した写真。
https://c1.staticflickr.com/5/4695/40049436682_154bbe68e0_o.png
これは池袋の建設現場で撮影したタワー クレーンの写真です。
銀色に輝く下部と赤色白色に塗り分けられた鉄骨ジブがとても美しいです。

Tower_Kumagaya_(2018_02_03)_1_resized_1 4本の灰色の鉄の円柱で造られた大きな電波塔の写真。 上部には円形の部屋のような部分があり、その外側に右向きに円形のアンテナが取り付けられている。 鉄塔は一部茶色く汚れるなどしている。
https://c1.staticflickr.com/5/4603/25210041697_396fd0e02a_o.png
埼玉県のとある建物の屋上の電波塔です。
少々汚れているようです。

Tower_Kumagaya_(2018_02_03)_2_resized_1 赤色と白色に塗り分けられた電波塔の写真。 細い鉄骨が沢山組み合わさって造られている。 上部には様々なアンテナが設置されている。
https://c1.staticflickr.com/5/4665/26208417828_529f01df3d_o.png
先程の電波塔のある場所から近い場所にある建物の屋上の電波塔です。
とても綺麗です。

nice!(1)  コメント(0)