Warning: Trying to access array offset on value of type bool in /home/xs767097/orefolder.jp/public_html/wp-content/themes/orefolder2021/functions.php on line 324

Glaeja小ネタ:光るバー

以前どこかの晒しで見かけて、なるほどなぁと思った小技です。
(本人に確認したわけではないですが、こうやったんだろう、というものです。)

130116a
上から、普通のバー、光ってるバー、先端だけが光ってるバーです。

光っている部分はシャドウでX,Yのオフセット値を0にしてそれっぽく見せています。普通にバー全体にシャドウをかけるとバーの背景部分にまでそのシャドウが適用されています。では、値の部分だけにシャドウをかけるにはどうしたらいいの?ということです。

130116b
赤が普通のバー、緑が値部分だけ光るバー、青が先端だけ光るバーです。

値だけ光るバーは、普通のバーの上に背景を透明にしたバーを置いて、それにシャドウをかけています。

先端だけ光るバーは、同じように背景を透明にしたバーを置きますが、それのレベル領域で「開始位置のタイプ」を「現在の%からの相対指定」とし、開始位置を-2%に設定しています。これで先端部分だけのバーができますので、それにシャドウをかけます。
また、これだけだとバーの上にもシャドウがくるように見えることがあるので、もう1つ背景を透明にしたバーをかぶせています。

わかってしまえば簡単ですね。

  • 本記事に記載された内容は記事公開時点のものであり、必ずしも最新の情報とは限りません。記事をご覧いただく際には、最新の情報を確認するようお願いいたします。
OREFOLDERの最新情報をお届けします
author icon
orefolder

OREFOLDER編集長。
1979年静岡県清水市生まれ、現静岡市清水区在住。

様々な巡り合わせから、このサイト1本で生活してる氷河期世代の一人。ガジェットに限らず広く浅く様々なものに興味があります。

スマートフォンは2010年にXperia SO-01Bを買ったのが最初。同時にb-mobile U300で格安SIMも始めました。これまでに数百台のスマホを手にし、格安SIMも常時20種類以上契約しています。

⇨orefolderの記事一覧