パーツ別デザイン・アニメーションのコード集

CSSアニメーションは確実に進化している！キーフレームを使ったCSSアニメーションの実装ポイントまとめ

CSSアニメーションは確実に進化しています。 ユーザーを楽しませるだけでなく、ユーザーの注意をつかみ、サイトのゴールに導くための重要な手段にもなります。 単調なアニメーションではなく、キーフレームを使

coliss.com

アニメーションを導入する時に手っ取り早いのがボタン部分。様々なボタンアニメーションがコード付きで開設されているため、コピペですぐに使用できてしまう！！他にはないボタンアニメーションで差をつける！！！

Neumorphism/Soft UI CSS shadow generator

CSS code generator that will help with colors, gradients and shadows to adapt this new design trend or discover its posibilities.

neumorphism.io

トレンドのニューモーフィズムボタンが簡単設定ですぐに作成できる！

Page not found · GitHub Pages

jnkkkk.github.io

切り替えボタン（トグルボタン）を作成できる。

Demo: CSS image hover effects

Article -

codepen.io

画像にhoverした時のアニメーションが満載！

Hover Effect Ideas | Set 1

Hover Effect Ideas: Inspiration for subtle hover effects

tympanus.net

画像とその上にテキストを配置した時のhoverアクション集。

Clippy — CSS clip-path maker

bennettfeely.com

clip-pathを使用した画像マスクを、さまざまな形状で設定することができ、コードを自動生成してくれる！！！

Pure CSS Stripes Generator - No Flash, No Image, ONLY CSS

Pure CSS Stripes Generator - No Flash, No Image, ONLY CSS. Generate Striped backgrounds using only CSS

stripesgenerator.com

色・幅・角度を設定するだけで、背景ストライプのコードを作成してくれるスグレモノ！表示も確認できるので、すぐに導入できる！！

Shape Divider App

Create fully responsive shape dividers for your next web project

shapedivider.app

曲線や矢印、波型など複雑な背景の作成を、簡単な設定を行うだけで自動でコードを作成してくれる！これは是非使っていきたい！！

Pattern Generator | Create Seamless, Royalty-Free Patterns

Generate seamless, unique, royalty-free patterns to use for free in any project. Export as SVG, JPEG, or PNG.

doodad.dev

複雑なテクスチャの背景を簡単に作成してくれる。

eky.hk

This domain may be for sale!

apps.eky.hk

Webサイトのコーディングでも比較的使用頻度の高いCSSでの三角形作成。それがサイズを入力するだけで自動でCSSコードを作成してくれる優れもの！！

cssでborderを使わず三角形を描写する - Qiita

CSSで三角形を作るといえばborderを利用したものが有名だけどサイズの計算とか扱いとかがちょっとめんどいので普通のdivとかの背景を三角形にしたくなった。した。普通にwidth/heightを…

qiita.com

borderプロパティを使用しない三角形の作成方法です。場所によってはコチラを使用した方が良いこともあるので覚えておくと便利！

Fancy Border Radius Generator

Generator to build organic shapes with CSS3 border-radius

9elements.github.io

border-radiusを使用した複雑な図形の作成が簡単に行えます。

Blobmaker - Make organic SVG shapes for your next design

Make organic SVG shapes for your next design. Modify the complexity, contrast, and color, to generate unique SVG blobs every time.

www.blobmaker.app

トレンドになりつつある流体シェイプを簡単に作成し、SVGコードを生成してくれる！！

Dashed Border Generator

...

codepen.io

様々な枠線の作成を設定を行うだけで、コードを自動作成。アニメーションのコードを作成してくれるスグレモノ！！

コピペで簡単！Webパーツ屋

haniwaman.com

様々なパーツのデザインとコードを紹介してくれており、コピペでそのまま使用できる

ニューモーフィズム？CSSコピペ実装できる新Webトレンドの参考HTMLスニペット、ツールまとめ

Neumorphism（ニューモーフィズム）は、昨年末ごろより新しいデザイントレンドになるのではと話題となっている新しいデザイン手法です。この記事では、ニューモーフィズムの基本や作成上の注意点、コピペで実装できるHTML/CSSスタイリング、参考スニペットまでまとめてご紹介します。

photoshopvip.net

近年トレンドとなっているニューモーフィズムデザインをコピペで使用できる！

動くWebデザインアイデア帳 | 動くWebデザインアイディア帳

coco-factory.jp

CSSとjQueryを使用した多種多様のパーツデザインをコードと共に提供してくれている。

https://adexin.github.io/spinners/

adexin.github.io

ローディングアニメーションを簡単作成。

https://webparts.cman.jp/

webparts.cman.jp

様々なデザインやアニメーションが用意されており、視覚的に確認し、コード（HTML・CSS・JavaScript）を作成してくれる優れもの。アニメーションの速度や間隔、色なども視覚的に設定できるので、コーディング初心者にも導入できる。カスタマイズすれば自分だけのオリジナルも作成可能！！

CSSアニメーションは確実に進化している！キーフレームを使ったCSSアニメーションの実装ポイントまとめ

CSSアニメーションは確実に進化しています。 ユーザーを楽しませるだけでなく、ユーザーの注意をつかみ、サイトのゴールに導くための重要な手段にもなります。 単調なアニメーションではなく、キーフレームを使

coliss.com

Webサイトのアニメーションは今や必須！より細かくアニメーションを設定するにはキーフレームの使用方法を覚えましょう！！