デイトラweb制作中級編 DAY33~37⑤

最終課題:実践コーディング 5日目

今回進めた範囲(レスポンシブ) ↓

→ 完成したサイト

苦戦したところ

下方向だけ影をつける

box-shadow」プロパティの詳細

box-shadow: x y blur spread shadow-color;

x ・・・ 横

y ・・・ 縦

blur ・・・ぼかす度合い

spread ・・・ 広がり度合い

shadow-color ・・・ 色

今回の場合

box-shadow: 0px 5px 8px -8px rgba(73, 115, 255, 0.5);

ぼかしを8pxに指定した場合は、広がりを-8pxで指定して打ち消すことができる

まとめ

今回で最終課題を終わらせることができました。

とりあえず目立ったところは一通りできたと思うので、じっくり見直して何かあれば修正していきたいと思います。

途中で大きく躓いて終わるのか心配になる時もありましたが、目標の5日以内に終わらせることができたので、安心して今日はゆっくり寝れそうです。

コメントを残す

メールアドレスが公開されることはありません。