ダークモードの切り替えを行うアニメーションエフェクト付きのトグルボタン集・「Theme Toggles」
Theme Toggles Theme Togglesはライトモード/ダークモードの切り替えを行うアニメーションエフェクト付きのトグルボタン集です。MITライセンスの元OSSとしてソースコードが公開されています。 太陽と月のアイ...
Resource - CSS/HTML
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コンポーネントを収集し、コードをコピーして使えるようになっていま...
Tailwind製のECサイト向けコンポーネント集・「Tailwind Ecommerce」
Tailwind Ecommerce Tailwind EcommerceはTailwind製のECサイト向けコンポーネント集です。Tailwind.cssベースのE-commerceで使えるWebコンポーネントといくつかのWebペー...
Sassベースの軽量でモダンなオープンソースCSSデザインシステム・「Spruce」
Spruce SpruceはSassベースの軽量でモダンなオープンソースCSSデザインシステムです。多様なプロジェクトの確かな土台となるミニマルなフレームワークを目指しているそうです。 このフレームワークの開発者としてのミニマル...
class属性を利用するCSSライクなデザインエンジン・「Master Styles」
Master Styles Master Stylesはclass属性を利用するCSSライクなデザインエンジンです。本サイトでは拡張された構文を持った仮想CSS言語と説明しています。 実際に見た方がどういう事か把握できると思うの...
軽量で非依存のモダンなCSSフレームワーク・「Uimini」
Uimini Uiminiは軽量で非依存のモダンなCSSフレームワークです。フルRWD対応、テーマのカスタマイズや他フレームワークとの併用も可能です。 JS不要、圧縮版でわずか4kbの超軽量なスタイルシートとなっており、パフォー...
見やすくシンプルなWebサイトをクラスレスで構築するための軽量スタイルシート・「Almond.CSS」
Almond.CSS See the Pen Untitled by kachibito (@kachibito) on CodePen. Almond.CSSは見やすくシンプルなWebサイトをクラスレスで構築...
モダンなWebサイト構築の為のTailwind.css向けUIコンポーネントライブラリ・「TailGrids」
TailGrids TailGridsはモダンなWebサイト構築の為のTailwind.css向けUIコンポーネントライブラリです。よく使われるUIの他にカードや認証、フォームやモーダル、テーブル、価格表などなどWebアプリや企業サイ...
最小限のコードで実装できるCSS製のローダーをまとめたCSSライブラリ・「Whirl」
Whirl Whirlは最小限のコードで実装できるCSS製のローダーをまとめたCSSライブラリです。100以上のローダーが纏められています。 どれもユニークで実用的なローダーですが、タイトル通り最小限のコードで実装できるようにな...
タブやスライドメニュー、アコーディオンなどJavaScriptを使わずCSSのみで実装できるインタラクティブUIコンポーネントのライブラリ・「CSSUI」
CSSUI CSSUIはタブやスライドメニュー、アコーディオンなどJavaScriptを使わずCSSのみで実装できるインタラクティブUIコンポーネントのライブラリです。 タブ、ドロップダウン、モーダル、スライドアウトメニュー、ア...
軽量、シンプルで使いやすく様々なユーティリティも備えられたCSSフレームワーク・「Beercss」
Beercss See the Pen Untitled by kachibito (@kachibito) on CodePen. Beercssは軽量、シンプルで使いやすく様々なユーティリティも備えられたC...
タイプライター風のエフェクトを管理、実装できるスタイルシート・「Typed.css」
Typed.css Typed.cssはタイプライター風のエフェクトを管理、実装できるスタイルシートです。上のように文字が打ち込まれたように徐々に表示される的あエフェクトを管理できます。 テキストはcontentプロパティで管理...
目に見える部分のHTMLタグ全てにスタイリングされたclass不要のスタイルシート・「gd.css」
gd.css gd.cssは目に見える部分のHTMLタグ全てにスタイリングされたclass不要のスタイルシートです。CSSリセットの代替としても利用できるそう。 HTML要素だけでスタイリング可能な、いわゆるクラスレスなCSSで...