英語が使えるおすすめの副業13選!在宅可の仕事や求められるスキルも解説
- 【PR】
- 副業
- 英語
春はクリエイティビティを刺激する季節です。Webデザインにおいても、春をテーマにした明るいデザインをよく見かけます。
今回は、パステルカラーや花など、春らしいデザインのコードスニペットを集めました。
目次
光り輝く春の庭を、多くのてんとう虫が歩きまわっています。3Dで作られた世界は、カーソルで視点を変えることも可能です。
See the Pen
Ladybugs in the Meadow by Paul J Karlik (@pjkarlik)
on CodePen.0
落ち着いた色あいで、春らしいフォークロア調のデザインを描き出しています。クリックやタップでアニメーションが変化するのが特徴。JavaScriptを活用し、最小限のbodyスタイルのみを適用しています。
See the Pen
Spring Folk by Sophia (@fractalkitty)
on CodePen.0
コードに手描きのデザインを組み合わせることで、あたたかみを演出しています。スライダーはインタラクティブで、ドラッグすると花が咲く仕組みです。
See the Pen
Flowerpot Slider 🌼🌼 by Chris Gannon (@chrisgannon)
on CodePen.0
パステルカラーのイースターエッグがつぎつぎと飛び出すスニペット。見ているだけでも楽しいですが、カーソルを動かすとカーソルに沿って飛び出すようになります。
See the Pen
Easter Eggs 🐇 by Nate Wiley (@natewiley)
on CodePen.0
任天堂のゲーム『とびだせ 動物の森』と、ゲーム機の『Nintendo Switch』をテーマにしたもの。このスニペットは『とびだせ 動物の森』の春を描いています。鮮やかな色彩と咲き誇る花を見ると、自然と暖かな気持ちになってきます。CSSのみで作られているのも特徴のひとつ。
See the Pen
Animal Crossing: Isabelle’s Day Off ☀️(Pure CSS) by Elisabéth (@elisabethdiang)
on CodePen.0
クリック&ドラッグすると、画面上に花を描くことができます。花がだんだん大きくなるギミックにも注目です。
See the Pen
Click and draw some flowers by Pogany (@giaco)
on CodePen.0
春は人の気持ちを浮き立たせる季節です。そんな春にぴったりなのが、遊び心にあふれた踊る花のスニペット。踊ってほしいダンスの種類を選んでみましょう。
See the Pen
Flower dance by agathaco (@agathaco)
on CodePen.0
CSSのみで制作されたスニペット。ピクセルのひよこが画面上をぐるぐると歩きまわり、カーソルをあてるとジャンプします。
See the Pen
Chick in 3D Pixel World (No Javascript) by Takane Ichinose (@takaneichinose)
on CodePen.0
暖かい春が来ると、新しいものを作りたいという意欲が湧いてくる人も多いはず。パステルカラーなどの色だけではなく、春という季節が持つエネルギーを、UIやインタラクティブ要素に反映させてみるのはいかがでしょうか。
(執筆:Eric Karkovack 翻訳:Asuka Nakajima 編集:少年B 提供元:speckyboy)
CSS/JavaScriptで文字に動きを!テキストアニメーション30選
Workship MAGAZINE
発想力/企画力/アイデアに関する本を8冊読み比べしてみた。学べることをマジの徹底解説!
Workship MAGAZINE
【基本無料】お花見・桜のかわいいイラスト/フリー素材配布サイト16選
Workship MAGAZINE