cssのみで立体な球体を表現

背景

娘と公園に行って、木になっていた赤い実がキレイなのでCSSで表現してみました。

結論

このようになりました。

See the Pen akai mi by hashito (@hashito) on CodePen.

説明

CSSのmi1クラスにて実態の赤い実を表現して、疑似要素beforeで光の反射を白い丸とFilterで表現、afterで影部分をbox-shadowとFilterで表現しました。
Filter使いやすいですね。

ただ、ヒナまつりのイクラ丼とかをコレで表現するとクソ重そう…