HTML Creative Codingを楽しむためのTipsをお伝えします。
アニメーション
CSSにはアニメーションの機能があり、多くのパラメータをアニメーションさせることが可能です。アニメーションさせることでグラフィックデザイン的な静的なものだけでなく、モーショングラフィックのような動的な面白さを探求できます。
See the Pen HTML SKETCHES by KitasenjuDesign (@kitasenjudesign) on CodePen.
フォントにこだわる
Google Fontを使うと、無料でさまざまなフォントが扱えます。以下はバリアブルフォントを使ってます。
See the Pen variable font animation by KitasenjuDesign (@kitasenjudesign) on CodePen.
絵文字
絵文字は入力するだけで「絵」を出すことができるので、コーディングには強い味方です。以下では絵文字をランダムな位置・角度で配置しています。 このコードは簡単なJSも使ってます。
See the Pen emojis by KitasenjuDesign (@kitasenjudesign) on CodePen.
フィルタ
フィルタ的な効果は色々あります。blur, contrast, hue-rotate, text-shadow, box-shadow, backdrop-filterなどなど。フィルタごとに使い方を考えるのも面白いです。以下はblurをアニメーションさせています。
See the Pen Blur Blink 2 by KitasenjuDesign (@kitasenjudesign) on CodePen.
最近ハマっていたのはneumorphismというスタイル。box-shadowで作られています。box-shadowは複数のパラメータを持つことができます。
See the Pen neumorphism shapes2 by KitasenjuDesign (@kitasenjudesign) on CodePen.
SVGで線を書く
SVGを使えば、線がかけます。円とか三角形など簡単なものならコードのみで書くことができます。以下ではSVGで円を並べたものにblurをかけて動かしています。
See the Pen overlay by KitasenjuDesign (@kitasenjudesign) on CodePen.
グラデを扱う
CSSでグラデも扱えて、背景などに指定できます。以下は赤と白をリピートさせたグラデーションです。
See the Pen gradation animation3 by KitasenjuDesign (@kitasenjudesign) on CodePen.
極端のパラメータを使う
文字サイズや文字の間隔、線の太さ、アニメーションの時間など、一般的なウェブサイトで使われていない極端な値を使いましょう。非日常を感じることができます。
See the Pen super blink css by KitasenjuDesign (@kitasenjudesign) on CodePen.
おわり
以上です。やってみてください！！
