超便利なCSSリソース 🌈
Webベースのツールを70個厳選。JSや外部ライブラリを使わずに純粋なCSSを生成します。
それぞれのアプリの背後にいる作者には全クレジットが行くべきです（可能な限り、彼らのGH/ソーシャルにリンクしています）
内容
プロパティジェネレータ
1. Neumorphism
インセットシャドウを使ったSoft-UI CSSスタイルを生成します。 by @adamgiebl
2. Shaddows Brumm
美しいスムーズなシャドウを作成しプレビューします。 by @brumm
3. Fancy Border Radius
border-radiusを使ってクールな形のオブジェクトを生成します。 by @9Elements BlobMakerと似ています
4. Glow Generator
クロスブラウザ対応の純粋なCSSグローエフェクトを生成します。
5. Clothoid Corners
CSS clip-pathによるクローストイドの丸められた角を生成します。 by Takehiko Ono
6. Glassmorphism
半透明でぼやけたガラス風の背景を作ります。 ui.glass/generatorと似たものです
7. Clipy
clip-pathを使って複雑な形のオブジェクトを生成します。 by @bennettfeely
8. CSS Filters
Instagram風のフォトフィルターを純粋なCSSで生成しプレビューします。 by @ghosh
9. Base64 Image
Base64で画像を直接CSSにエンコードします。
10. Quantity Queries
数量ベースのCSSクエリを生成します。 by @drewminns
アニメーション
11. Animista
CSSアニメーションの遊び場とジェネレータ。 by Ana T
12. Cubic-Bezier
上級者向けのキュービックベジエアニメーションをプレビューし生成します。 by @LeaVerou
13. Keyframes
上級者向けのキーフレームアニメーションメーカー。 by @mitchas
14. Wait Animate
animation-delayを使って遅延をシミュレートします。 by @will-stone
15. Transition.Style
コピーしてすぐに使用できるトランジションアニメーション。 by @argyleink
背景
16. Hero Patterns
単純な純粋なCSSのパターン背景を探してカスタマイズします。 by @steveschoger
17. Haikei
ユニークなオーガニックSVGバナーや背景を生成します。（Shape Dividerに似ています）
18. Pattern Generator
上級者向けのパターンジェネレータ
19. CSS Pattern
作成済みの純粋なCSSパターン背景のコレクション。 by @Afif13
20. Patternizer
縞模様の背景を作成します。 by @matthewlein
21. Patternify
自分だけのレトロなパターンを作成します。 by @SachaGreif
22. Animated BG
ぼやけたアニメーション背景を純粋なCSSで生成します。 by @Vincenius
23. Trianglify
幾何学背景デザイン（注：セミフリーです）。 by @qrohlf
24. Animated Backgrounds
純粋なCSSの背景アニメーションのコレクション
25. Magic Pattern CSS Backgrounds
再利用可能なSVGベースの純粋なCSS背景パターンのコレクション。
カラー
26. CSS Gradient
上級者向けのCSSグラデーションビルダー
27. Parametric Mixer
イコライザー風にCSSカラーをコンポーズする。 by @dawidwoldu
28. Palettte.
カラースキームを開発し調整する
29. Paletton
反対色または引き寄せ色をつかったパレットビルダー
30. Grabient
グラデーションサンプル。
CoolHue、WebGradients.com、GradientHunt、GradientButtons、UI gradientsと似ているものです
31. Color Hunt
もうひとつのカラーパレットデザイナー
32. Easing Gradients
キュービックベジエスタイルの純粋なCSSグラデーション。 by @larsenwork
33. Flat UI Colors
フラットスタイルの手選りカラーパレット。 by @ahmetsulek
34. Color Tools
カラーのミックス、抽出、変換、生成
35. ColorPalettes.Earth
自然からのナチュラルカラーパレット
タイポグラフィ
36. Font Joy
さまざまなフォントの組み合わせを発見しプレビューする。 by @Jack000
37. Type set With Me
タイポグラフィ＆可読性のサンドボックス。 by @tsmith512
38. Type Scale
見出し／本文のフォントサイズを生成する。 by @jeremychurch
39. Glyphter
SVGグラフィックスからアイコンフォントを作成する
40. Font-Library
Google Fontsのタグ付けされたライブラリ。 by @katydecorah
41. Glitter
90年代風のグリッターテキストをエクスポートする
ローダー
42. Spin Kit
クリーンなCSSローディングアニメーションのセレクション
43. Whirl
コピーしてすぐに使える100以上のCSSローディングアニメーション
44. Loader Generator
作成済みとカスタム純粋なCSSローダー
45. lukehaas - CSS-Loaders
シンプルな純粋なCSSローディングアニメーション
46. CSSLoaders
複雑な純粋なCSSローダー
47. loading.io/css
一般的なローダーのCSS実装
レイアウト
48. CSS Grid Garden
CSSグリッドを学ぶためのインタラクティブなゲーム。 by @thomaspark
49. FlexboxFroggy
flexboxを学ぶためのインタラクティブなゲーム。 by @thomaspark
50. Flexplorer
フレックスボックスのビジュアルデモ。 by @bennettfeely
51. Flexulator
インタラクティブなCSS Flexboxスペース配分計算機。 by @telagraphic
52. Grid Generator
CSSグリッドテンプレートプロパティを使ったグリッドの作成。 by @sdras (grid.layoutit.comに似ています)
53. Layout Generator
モダンなCSSレイアウトメーカー
54. Box Model Diagram
単なるビジュアルボックスモデルデモ
情報提供
55. CSS Timeline
CSSの歴史
56. Screen Size Map
レスポンシブデザインに使われる人気の画面サイズを見る
57. CSS Ruler
さまざまなCSS単位をお互いに比較してプレビューする
58. bada55
面白いCSSカラーコードのリスト
同様に、説明過多なカラーパレットを楽しむcolors.lolもチェックしてみてください。
59. Who can use?
与えられたカラーの組み合わせのアクセシビリティ等級をチェックします。Colorableに似ています
60. Can I use?
さまざまな、CSS、JS、HTML、ウェブ機能のブラウザ互換性チェック
61. Can I email?
与えられたCSSプロパティ（またはHTML要素）がメールクライアントと互換性があるかをチェックするCan I use?に似たものです
62. CSS Processing Tools
他のCSS言語からの変換および変換へ
63. Unused CSS
サイトを検索して使われていないCSSを探し、統計を表示します
64. Component.Gallery
グローバルコンポーネントの検索
65. Design System Gallery
インスピレーションのためのオープンデザインシステムのコレクション
66. Checklist.design
チェックリストとして整理されたデザインのベストプラクティスのコレクション
67. Glyphs
CSSグリフの文字コードのリスト（ライブラリアイコンについてはGlyphSearchも参照）
68. CSS-Tricks.com
そこら辺の最高のCSSブログ
69. Curated Design Tools
素晴らしいデザインツールのキュレーションされたリスト
70. Awesome-CSS-Frameworks
オープンソースのCSSフレームワークのリスト
71. CSS Reference
CSSプロパティのビジュアルガイド（htmlreference.ioに似ている）
72. MDN CSS Docs
利用可能なすべてのCSSプロパティの素晴らしいドキュメンテーション
こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/lissy93/super-useful-css-resources-1ba3
