LoginSignup
5

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-05-12

背景

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

結論

このようになりました。

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

説明

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5