Resource - CSS/HTML

1つのHTML要素とCSSだけで作れる様々なスタイルの吹き出しを作るためのコードをコピーできる・「CSS Generators: Tooltips & Speech Bubbles」

CSS Generators: Tooltips & Speech Bubblesは1つのHTML要素とCSSだけで作れる様々なスタイルの吹き出しを作るためのコードをコピーできるWebサイトです。

Tailwind.cssとの併用も可能な、ミニマルで汎用的なCSSコンポーネント・「Winduum」

WinduumはTailwind.cssとの併用も可能な、ミニマルで汎用的なCSSコンポーネントです。単体でも利用可能ですがTailwind.cssのプラグインとしても使えるようになっています。リセットを含むレイアウト向けのCSS、各ユーティリティ、各UI、コンポーネントなどなどWinduumだけでしっかり様々なタイプのWebサイトやWebアプリに対応できるようになっています。

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

Fluid for Tailwind CSSはユーティリティでclamp()を簡単に生成できるようにするTailwindプラグインです。コードの記述量を減らし、より見栄えのいいRWDの対応をサポートします
Ads

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

Tailframesはシンプルで使いやすいオープンソースのTailwindベースUIコンポーネントライブラリです。コピペで簡単利用できるよう各コンポーネントのコードやサンプルも公開されています。

Tailwind.cssの様々なUIコンポーネントのデザインサンプルを大量に公開している・「Tailwind CSS Components」

Tailwind CSS ComponentsはTailwind.cssの様々なUIコンポーネントのデザインサンプルを大量に公開しているプロジェクトサイトです。プロジェクトサイトでは特に何か機能がある訳ではなく、純粋にCSSスタイリングのサンプルを表示しているのみで、ソースコードはGithubで公開しています。

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

NeoBrutalismCSS NeoBrutalismCSSはWebにおけるネオ・ブルータリズムの美学を取り入れたCSSフレームワークです。 デザインにおける「ネオ・ブルータリズム」は20世紀半ば頃のブルータリズム建築運動(W...

1つのHTML要素で実装できるCSSローダーのコードを500以上紹介している・「CSS Loaders」

CSS Loaders CSS Loadersは1つのHTML要素で実装できるCSSローダーのコードを500以上紹介しているCSSローダーのコレクションサイトです。動作デモをクリックすればコードのコピーが完了します。 全てのロー...

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

CSS Selectors: A Visual Guide CSS Selectors: A Visual GuideはクラスやID、属性、疑似クラス、疑似要素等CSSセレクタの使い方をビジュアルで学べるWebサイトです。 テキ...

AIアプリ等のプロジェクト向けにTailwindベースで作られたオープンソースのUIコンポーネント・「LangUI」

LangUI LangUIはAIアプリ等のプロジェクト向けにTailwindベースで作られたオープンソースのUIコンポーネントです。 AIアプリと言うか、ほぼAIチャット向けのUIという感じで、プロンプトの入力フォームや対話UI...

Tailwind.cssベースのパワフルで軽量なオープンソース管理画面テンプレート・「Tailbreeze」

Tailbreeze TailbreezeはTailwind.cssベースのパワフルで軽量なオープンソース管理画面テンプレートです。 この手のテンプレートはご存知のように数えきれないほど出回っていますが、Tailbreezeは中...

オープンソースで公開されているTailwind.cssベースの管理画面テンプレート・「TailAdmin」

TailAdmin TailAdminはオープンソースで公開されているTailwind.cssベースの管理画面テンプレートです。 プロジェクトのページは有償版の特徴で、OSSとして公開されているものはGithubに詳細が書かれて...

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

Theme Toggles Theme Togglesはライトモード/ダークモードの切り替えを行うアニメーションエフェクト付きのトグルボタン集です。MITライセンスの元OSSとしてソースコードが公開されています。 太陽と月のアイ...

Tailwind.cssとAlpine.jsで作られた161ものUIやレイアウトを無償公開している・「Windstatic」

Windstatic WindstaticはTailwind.cssとAlpine.jsで作られた161ものUIやレイアウトを無償公開しているWebサイトです。 UI、というかセクション単位でカテゴライズされていて、ヒーローイメ...

Tailwind.cssのためのオープンソースのモダンなUIコンポーネントライブラリ・「Sailboat UI」

Sailboat UI Sailboat UIはTailwind.cssのためのオープンソースのモダンなUIコンポーネントライブラリです。150以上の汎用的でシンプルなコンポーネントが揃えられています。 具体的には、アコーディオ...

モダンで美しいオープンソースのTailwind.cssコンポーネント集・「Ripple UI」

Ripple UI See the Pen Untitled by kachibito (@kachibito) on CodePen. Ripple UIはモダンで美しいオープンソースのTailwind.cs...

要素にメタリックなスタイルを提供するスタイルシート・「MetalliCSS」

MetalliCSS See the Pen Untitled by kachibito (@kachibito) on CodePen. MetalliCSSは要素にメタリックなスタイルを提供するスタイルシー...

マウスの動きに応じて輝くホログラフを実装できる・「pokemon-cards-css」

pokemon-cards-css pokemon-cards-cssはマウスの動きに応じて輝くホログラフを実装できるスタイルシートです。名前の通りでポケモンのトレカのホログラフを再現したものになります。 と言っても自分自身でポ...

必要最低限だけ用意されたclass-lessな軽量スタイルシート・「Bolt.css」

Bolt.css Bolt.cssは必要最低限だけ用意されたclass-lessな軽量スタイルシートです。HTML要素のみでミニマルなスタイリングが可能となっています。 従来のクラスレスなCSSと異なり、どちらかというとスタータ...

CSS変数ベースで一貫したデザインのコンポーネント構築できるCSSフレームワーク・「Open Props」

Open Props Open PropsはCSS変数ベースで一貫したデザインのコンポーネント構築できるCSSフレームワークです。 Google Chormeの開発に関わっている方が開発されたみたいでMITライセンスの元でソース...

1つのdiv要素で作れる実用的なCSSローダーのコレクション・「one `div` loaders」

one `div` loaders See the Pen Untitled by kachibito (@kachibito) on CodePen. one `div` loadersは1つのdiv要素で作...

コピー&ペーストで使えるHTML/CSS/SVGのローダーのコレクション・「Loaders」

Loaders Loadersはコピペで使えるHTML/CSS/SVGのローダーのコレクションです。Reactもサポートされています。 24種用意されていて軽量、スタイリングはCSSなのでカスタマイズも簡単です。例えば以下のよう...

コピペで使えるオープンソースのTailwind.css用コンポーネントのコレクション・「HyperUI」

HyperUI HyperUIはコピペで使えるオープンソースのTailwind.css用コンポーネントのコレクションです。WebサイトやWebアプリ等でよく使われるWebコンポーネントを収集し、コードをコピーして使えるようになっていま...
Ads