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