フリーランスWebデザイナー・ななふの
デザイン、コーディングの勉強記録やTIPSなど

2022年のクリスマスカード(サイト)

当ブログはアフィリエイト広告を利用しています。
HTML/CSS
スポンサーリンク
【PR】おすすめの本

実業務のデザインを事例にしている点が貴重。情報と情緒で切り分けて考える点が参考になります。

こんにちは!

かなり投稿の間が空いてしまいました・・・

今年度後半は、制作会社様から案件をいただけることになったので、案件対応を優先で過ごしてきました。(案件対応で色々とあり、かなり疲労してます?)

気が付いたらもう年末!

一応?クリスマス中にさささっと作ったクリスマスカード風サイトがあるので、簡単にですがご紹介させていただきます。

スポンサーリンク

お気に入りのCodePen

あまり時間もないので、一からデザイン~コーディングというのはできなかったので、

最近のお気に入りのCodePenをベースに作ってみました。

カードの回転に合わせてノイズっぽい背景をテキストでクリップしている動き!

どこかで取り入れてみたいと思ってました。

See the Pen Holographic type by Jimmy Chion (@cjimmy) on CodePen.

スポンサーリンク

雪を降らせたい

上記のCodePenにクリスマスらしく、雪を降らせる演出を追加したい!

以下のサイトから雪の結晶のアイコンをSVGでダウンロードして使用させていただきました。

そして、SVGで雪を降らせる手順は私の大好きなサイトの「フーノページ」様を参考にさせていただきました。

ななふのクリスマスカード、こんな感じにできました!

かなりシンプルですが、、、

こんな感じにできました!

デモサイトも是非ご覧ください。※レスポンシブ対応してます

よいお年を!

クリスマスはあっという間に終わってしまいましたね、

もうすぐ新年ですね。

皆様にとってよい年になります様、お祈り申し上げます。

では~!