ナビゲーション内の区切りなどでよく見かける立体的なラインがありますね。
難しい技術でもないので普通に使われていますが、解説しているサイトが見つからなかったので、今さらながら図説してみました。

上の図は、凹んだラインを立体化して拡大したものです。
光源が左側にあった場合、左から順に“最も暗い部分”、“最も明るい部分”となっています。
そのため1pxのラインをその順に引くと、凹んだ線が引かれているように見えます。

下の図は、飛び出したラインを立体化して拡大したものです。
光源が左側にあった場合、今度は逆に左から順に“最も明るい部分”、“最も暗い部分”となっています。
そのため1pxのラインをその順に引くと、飛び出した線が引かれているように見えます。

もし光源が右側にあった場合凸凹が逆になるはずなんですが、そのように見える方は少ないのではないかと思います。
それは“ふつう光源は左側にある”という子供のころからの刷り込みによるもの…ではないかと予想しています。

上の図は、凹んだラインを立体化して拡大したものです。
光源が左側にあった場合、左から順に“最も暗い部分”、“最も明るい部分”となっています。
そのため1pxのラインをその順に引くと、凹んだ線が引かれているように見えます。

下の図は、飛び出したラインを立体化して拡大したものです。
光源が左側にあった場合、今度は逆に左から順に“最も明るい部分”、“最も暗い部分”となっています。
そのため1pxのラインをその順に引くと、飛び出した線が引かれているように見えます。

もし光源が右側にあった場合凸凹が逆になるはずなんですが、そのように見える方は少ないのではないかと思います。
それは“ふつう光源は左側にある”という子供のころからの刷り込みによるもの…ではないかと予想しています。