Glaeja小ネタ:光るバー

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

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

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

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

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

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

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

この記事が気に入ったら
いいね!しよう
 シェアする  ツイートする
PREVIOUS POST
NEXT POST
ANDROID
GIVES YOU
MORE