Author
R.U.I(ルイ)
ガジェットブロガー
ECサイト運営会社でWEBエンジニア&マーケターとして日々従事しており、会社ではWindows、お家ではmacの両刀遣い。SEOやWEBデザインが好き。ガジェットやモノで生活に刺激を与えたいという想いで人におすすめしたいモノの紹介記事を軸にブログ運営をしています。趣味でベースも嗜んでおり、F-Bassというハイエンドベースを愛用しています。
この記事のもくじ
CATEGORY
ルイログ愛用テーマSWELL

【コピペで簡単】CSSで雪を降らせる方法

cssだけで雪を降らせる方法

普段はECサイト運営会社でWEBエンジニア&マーケターとして従事しているR.U.Iです。

冬場のLP(ランディングページ)では、どうやって冬っぽくしよう?とか、どうやってクリスマスっぽくしよう?とか悩みますよね。

主にECサイト(ネットショップ)向けの記事になりそうですが、そこでオススメの方法が「ページ全体に雪を降らせる」です。

今回はコピペで簡単にページに雪を降らせる方法をご紹介します。ページの軽さを重視して HTML と CSS のみ!

お気づきでしょうか?そう、このページでは特別に雪を降らせています。

簡単に実装できるので、ぜひ活用してみてください。

それでは紹介していきましょう!

もくじ

CSSで雪を降らせるためのhtmlコピペ用コード

まずは html のサンプルを紹介します。

<div class="snow">●</div> 

はい、HTML はたったこれだけ!

適当なところに配置してあげてください。

コンテンツの最後へ配置しちゃって大丈夫です。

CSSで雪を降らせるためのCSSコピペ用コード

次にメインの CSS コピペ用コードがこちら。

.snow {
  color: snow; /*雪の色*/
  font-size: 18px; /*雪の大きさ*/
  position: fixed;
  top: -5%; /*初期位置*/
  text-shadow:
  5vw   -100px 2px,
  10vw  -400px 3px,
  20vw  -500px 4px,
  30vw  -580px 1px,
  39vw  -250px 2px,
  42vw  -340px 5px,
  56vw  -150px 2px,
  63vw  -180px 0,
  78vw  -220px 4px,
  86vw  -320px 9px,
  94vw  -170px 7px;
  animation: anim 5s linear infinite;
}

@keyframes anim {
  100% {
    color: transparent;
    top: 150%;
  }
}

color:snow; はカラーコード #fffafa; と同じになるかな。

でもどうせだったらsnowっていう雪色で指定したくなっちゃう!私は。

お好きな方でどうぞ。

これらをコピペするだけで、簡単に雪を降らせることができます。超簡単で便利!

あとは雪がわかりやすいように、少し色のついた背景にしたりすると良いです。

CSSで雪を降らせるページのオススメデザイン

私がクリスマス系のLPで使う色味などを紹介します。

当記事で外側の背景色として実装済なのですが、赤系の色はいつも #a51918 を利用しています。

文字などコンテンツの背景にこの赤色を設定すると文字色を #ffffff の真っ白にしても少々読みづらくなるので、文字を読ませるタイプのページだと赤をもう少し濃い目にするとか、工夫を入れた方が良いですね。

そして、文字(font-family)は明朝体もアリアリ

このページでは見出しだけ明朝体にしてみました。

ゴージャス系にするのか可愛い系にするのかなど、ページの雰囲気に合わせてフォントも変更し良き特集ページをコーディングしましょう!

【コピペで簡単】CSSで雪を降らせる方法についてまとめ

cssだけで雪を降らせる方法

こんな感じで冬のLP作成に役立つデザインコーディングとして、CSSをコピペするだけで簡単にページで雪を降らせる方法を紹介してみました。

アパレル系ECサイトとかだと、サンタのコスプレやクリスマスグッズを取り扱うLPを作ることになるはず。

そういうページでぜひ利用したいデザインコーディングです。

ページが一気におしゃれで華やかになるので、ぜひ利用してみてください!

 

良きWEBデザインをっ!

cssだけで雪を降らせる方法

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
もくじ
閉じる