WebサイトやスマホアプリのUIデザインにぴったりなSVGアイコンを紹介します。「Humble」の名の通り、主張しすぎない控えめでシンプルなデザインです。 オープンソースで個人でも商用でも無料で利用できます。アイコンはSVGなので、サイズやカラーの変更はCSSで簡単にできます。さらに、Figma用も用意されているのは、嬉…
動く流体シェイプをコピペで作成 Blob Animation + SVGおすすめツール – PhotoshopVIP
液体が波打つような、ゆるやかなスライムのような曲線をもつBlob流体シェイプ。ウェブサイトに取り入れることで、直線的で無機質な印象から、ナチュラルで優しい印象を与えることができます。 スムーズでなめらかな動きを加えたBlog流体シェイプを手軽に作成できるオンラインツール「Blob Animation」が公開されています…
これならコピペで簡単！ HTMLはシンプル、CSSで実装された超軽量のおしゃれなローディング・スピナー -UI Ball
コピペで簡単に使用できる、HTMLとCSS（複雑なものはSVG）で実装されたWebサイトやスマホアプリ用のローディングアニメーションを紹介します。 さまざまなローディングやスピナーが揃っていますが、画像は一切使用されていません。必要な時にさくっと実装できるので、スニペットに登録しておくと便利です。 下記は静止画…
SVGのサイズを「縦のみ」または「横のみ」で固定したいとき
preserveAspectRatio="none"の追加で…
全部、商用利用無料！ UIデザイン用のSVGアイコンが1900種類以上、デザインに合わせてカスタマイズも簡単な優れもの
企業サイトやプロダクトページをはじめ、オンラインショップ、ポートフォリオ、ブログなど、WebサイトやアプリのUIデザインに適したSVGアイコンが無料で利用できるTabler Iconsを紹介します。 アイコンの種類はなん…記事の続きを読む
CSS？SVG？Canvas？動く背景アニメーションのサンプルや参考ページ
こういう背景ってどうやって作るんだろう？ 以下のホームページに使われていた背景の…
Tabler Icons: over 1550 vector icons for web design
Over 1550 pixel-perfect icons for web design Free and open source icons designed to make your website or app attractive, visually consistent and simply beautiful.