Edited at

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

More than 1 year has passed since last update.


背景

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


結論

このようになりました。

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


説明

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

Filter使いやすいですね。

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