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

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

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

管理人が買って良かった一冊を紹介します!

Webデザイナーのお仕事が具体的に分かる!デザイン勉強中の人は読んで損なしの一冊。
¥2,497 (2024/11/12 17:28時点 | 楽天市場調べ)
\楽天ポイント4倍セール!/
楽天市場
\商品券4%還元!/
Yahooショッピング

こんにちは!

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

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

気が付いたらもう年末!

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

スポンサーリンク

お気に入りのCodePen

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

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

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

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

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

スポンサーリンク

雪を降らせたい

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

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

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

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

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

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

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

よいお年を!

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

もうすぐ新年ですね。

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

では~!

コメント