
CSS


Webアプリ向けにshadcn/uiとFramer Motionで作成されたUIコンポーネントを配布するプロジェクト・「ShapeX UI」

Webページ内の任意の要素のCSSの調査と編集機能を使いやすいUIで提供するオープンソースのブラウザ拡張・「Inspect CSS」

shadcn/uiにインスパイアされたArk UIベースのコピペで使えるReactコンポーネント集・「Djamla」

ネイティブなマークアップのみによって駆動するモダンなスタイルシート・「No_Class.css」

ユーティリティでclamp()を簡単に生成できるようにするTailwindプラグイン・「Fluid for Tailwind CSS」

コピペで簡単利用も出来るオープンソースのTailwindベースUIコンポーネントライブラリ・「Tailframes」

Webにおけるネオ・ブルータリズムの美学を取り入れたCSSフレームワーク・「NeoBrutalismCSS」

クラスやID、属性、疑似クラス、疑似要素等CSSセレクタの使い方をビジュアルで学べる・「CSS Selectors: A Visual Guide」

設定に合わせたデザイントークンを発行できるオープンソースのデザインシステムフレームワーク・「mirrorful」

ダークモードの切り替えを行うアニメーションエフェクト付きのトグルボタン集・「Theme Toggles」

CSSのビジュアル開発環境として開発された、Web上の要素のスタイルを編集できるオープンソースのビジュアルツールキット・「CSS GUI」

完成図を見て正しいコードを選択するクイズ形式でCSSを視覚的に学べる・「Guess CSS!」

class不要で見た目をミニマルスタイルに整えてくれるclass-lessなCSSフレームワーク・「DreamCSS」

任意のWebサイトのCSSを解析して詳細なデータを提供してくれるWebアプリ・「ANALYZE CSS」

複雑なグリッドレイアウトにも対応できるCSSグリッドフレームワーク・「Griddle」

読み込むだけでアクセシビリティチェックを行えるCSS・「Checka11y.css」

すりガラス風のCSSを、プレビューで確認しながらコードを生成できる・「Glassmorphism」

「CSSに足りない機能は?」に対する様々な回答を確認出来る・「What’s Missing From CSS?」

CSSのclip-pathを簡単な操作で生成できるオンラインツール・「CSS clip-path Editor」

CSSの用語を視覚的に学べる・「CSS Vocabulary」
