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

冬場のLPではどうやって冬っぽくしよう？どうやってクリスマスっぽくしよう？と悩みますよね。そんなときにオススメなのが『雪を降らせる』です。一気に冬っぽい印象を与えることができます。CSSのコピペで簡単に実装する方法を紹介します。

Font Awesomeで絵文字を使う方法。アイコンの探し方は？綺麗な絵文字をWEBサイトで表示したい？それなら Font Awesome を使おう！ということで、本記事では WEBサイトで Font Awesome を利用する方法を紹介します。主に 3.

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

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

.snow < /*雪の色*/ color: snow; /*雪の大きさ*/ font-size: 10px; /*初期位置*/ 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; /*雪アニメーション1*/ animation: roll 5s linear infinite; >/*2つめの雪アニメーション*/ .snow2nd @keyframes roll < 0% 90% 100% > @keyframes anim < 100% >

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

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

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

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

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

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

そして、文字（font-family）は明朝体もアリアリ。