以前どこかの晒しで見かけて、なるほどなぁと思った小技です。
（本人に確認したわけではないですが、こうやったんだろう、というものです。）
上から、普通のバー、光ってるバー、先端だけが光ってるバーです。
光っている部分はシャドウでX,Yのオフセット値を0にしてそれっぽく見せています。普通にバー全体にシャドウをかけるとバーの背景部分にまでそのシャドウが適用されています。では、値の部分だけにシャドウをかけるにはどうしたらいいの？ということです。
赤が普通のバー、緑が値部分だけ光るバー、青が先端だけ光るバーです。
値だけ光るバーは、普通のバーの上に背景を透明にしたバーを置いて、それにシャドウをかけています。
先端だけ光るバーは、同じように背景を透明にしたバーを置きますが、それのレベル領域で「開始位置のタイプ」を「現在の%からの相対指定」とし、開始位置を-2%に設定しています。これで先端部分だけのバーができますので、それにシャドウをかけます。
また、これだけだとバーの上にもシャドウがくるように見えることがあるので、もう1つ背景を透明にしたバーをかぶせています。
わかってしまえば簡単ですね。
本記事に記載された内容は記事公開時点のものであり、必ずしも最新の情報とは限りません。記事をご覧いただく際には、最新の情報を確認するようお願いいたします。
Google ニュース
OREFOLDER編集長。
1979年静岡県清水市生まれ、現静岡市清水区在住。
様々な巡り合わせから、このサイト1本で生活してる氷河期世代の一人。ガジェットに限らず広く浅く様々なものに興味があります。
スマートフォンは2010年にXperia SO-01Bを買ったのが最初。同時にb-mobile U300で格安SIMも始めました。これまでに数百台のスマホを手にし、格安SIMも常時20種類以上契約しています。
