トレース08
対象サイト
憧れているTRYMOREさんが手がけたWEBサイトをトレースしました。デザインはもちろん、スマホで見た時の遊び心があるデザインにも心打たれました。
トレースしてみました
まとめ
気づいたことなど
- こういうの(呼称があるのでしょうか)のコーディングがどうなっているのか今まで調べていなかったので、確認してみました。
width:71px height:71pxの四角形が、 transformプロパティで回転され、position: absolute;で指定した位置に重なっていました。
- このボタンはaタグに指定されているshop-buttons liというclassで枠線が指定されていました。
.shop-buttons li { border: 3px solid #e34848; border-radius: 50px; height: 60px; text-align: center; width: 100%; position: relative; }
※一部省略