CSSとHTMLだけで作れる様々なUIのコードを公開しているCSSスニペットコレクション・「CSS Stock」 CSS Stock CSS StockはCSSとHTMLだけで作れる様々なUIのコードを公開しているCSSスニペットコレクションサイトです。 現在、ボタンやローディング、アコーディオンやFAQ、ツールチップ、TOC、モーダルウィ...2023.04.25 | 10時01分48秒
オープンソースで公開されているTailwind.cssベースの管理画面テンプレート・「TailAdmin」 TailAdmin TailAdminはオープンソースで公開されているTailwind.cssベースの管理画面テンプレートです。 プロジェクトのページは有償版の特徴で、OSSとして公開されているものはGithubに詳細が書かれて...2023.04.18 | 10時02分13秒
Tailwind.cssのためのオープンソースのモダンなUIコンポーネントライブラリ・「Sailboat UI」 Sailboat UI Sailboat UIはTailwind.cssのためのオープンソースのモダンなUIコンポーネントライブラリです。150以上の汎用的でシンプルなコンポーネントが揃えられています。 具体的には、アコーディオ...2023.01.06 | 10時01分25秒
ダークモードやナビゲーションバーも用意されている10kbほどの軽量なクラスレスCSS・「Bahunya」 Bahunya Bahunyaはダークモードやナビゲーションバーも用意されている10kbほどの軽量なクラスレスCSSです。ナビゲーションはネストにも対応しています。 セマンティックなHTML要素でWebサイトやWebアプリを設計...2022.12.09 | 10時01分41秒
スクロールに連動した演出をサポートするオープンソースの軽量スクロールライブラリ・「Lenis」 Lenis Lenisはスクロールに連動した演出をサポートするオープンソースの軽量スクロールライブラリです。LocomotiveやGSAP ScrollSmootherといった先発ライブラリをリスペクトしつつ、より使いやすく欠点も補っ...2022.11.22 | 9時55分06秒
デザイントークンを作成し、まとめてCSS変数にしてくれる・「Design Tokens Generator」 Design Tokens Generator Design Tokens Generatorはデザイントークンを作成し、まとめてCSS変数にしてくれるWebアプリです。 デザイントークンとは?については以下のAdobe blo...2022.11.12 | 10時02分59秒
マウスの動きに応じて輝くホログラフを実装できる・「pokemon-cards-css」 pokemon-cards-css pokemon-cards-cssはマウスの動きに応じて輝くホログラフを実装できるスタイルシートです。名前の通りでポケモンのトレカのホログラフを再現したものになります。 と言っても自分自身でポ...2022.10.28 | 10時09分47秒
必要最低限だけ用意されたclass-lessな軽量スタイルシート・「Bolt.css」 Bolt.css Bolt.cssは必要最低限だけ用意されたclass-lessな軽量スタイルシートです。HTML要素のみでミニマルなスタイリングが可能となっています。 従来のクラスレスなCSSと異なり、どちらかというとスタータ...2022.10.26 | 9時56分53秒
CSS変数ベースで一貫したデザインのコンポーネント構築できるCSSフレームワーク・「Open Props」 Open Props Open PropsはCSS変数ベースで一貫したデザインのコンポーネント構築できるCSSフレームワークです。 Google Chormeの開発に関わっている方が開発されたみたいでMITライセンスの元でソース...2022.09.14 | 10時01分28秒
1つのdiv要素で作れる実用的なCSSローダーのコレクション・「one `div` loaders」 one `div` loaders See the Pen Untitled by kachibito (@kachibito) on CodePen. one `div` loadersは1つのdiv要素で作...2022.08.27 | 10時04分16秒
見やすいUIで編集も可能な用語集ページを作成できるHTML/CSS/JavaScriptテンプレート・「Glossary Page Template」 Glossary Page Template Glossary Page Templateは見やすいUIで編集も可能な用語集ページを作成できるページテンプレートです。HTML/CSS/javascriptで構成されており、レスポンシブ...2022.07.02 | 10時08分20秒
様々なタイプのCSSアニメーションを、その場で動作確認し、コードをコピーできる・「AnimatiSS」 AnimatiSS AnimatiSSは様々なタイプのCSSアニメーションを、その場で動作確認し、コードをコピーできるWebサイトです。 スクロールアップ/ダウン、回転、回転+拡大縮小、スィング、スライド、シャドウなどなど大量の...2022.05.25 | 10時04分30秒
Sassベースの軽量でモダンなオープンソースCSSデザインシステム・「Spruce」 Spruce SpruceはSassベースの軽量でモダンなオープンソースCSSデザインシステムです。多様なプロジェクトの確かな土台となるミニマルなフレームワークを目指しているそうです。 このフレームワークの開発者としてのミニマル...2022.03.31 | 10時07分48秒
class属性を利用するCSSライクなデザインエンジン・「Master Styles」 Master Styles Master Stylesはclass属性を利用するCSSライクなデザインエンジンです。本サイトでは拡張された構文を持った仮想CSS言語と説明しています。 実際に見た方がどういう事か把握できると思うの...2022.03.26 | 10時01分00秒
見やすくシンプルなWebサイトをクラスレスで構築するための軽量スタイルシート・「Almond.CSS」 Almond.CSS See the Pen Untitled by kachibito (@kachibito) on CodePen. Almond.CSSは見やすくシンプルなWebサイトをクラスレスで構築...2022.03.07 | 10時00分23秒
モダンなWebサイト構築の為のTailwind.css向けUIコンポーネントライブラリ・「TailGrids」 TailGrids TailGridsはモダンなWebサイト構築の為のTailwind.css向けUIコンポーネントライブラリです。よく使われるUIの他にカードや認証、フォームやモーダル、テーブル、価格表などなどWebアプリや企業サイ...2022.02.21 | 9時53分43秒
最小限のコードで実装できるCSS製のローダーをまとめたCSSライブラリ・「Whirl」 Whirl Whirlは最小限のコードで実装できるCSS製のローダーをまとめたCSSライブラリです。100以上のローダーが纏められています。 どれもユニークで実用的なローダーですが、タイトル通り最小限のコードで実装できるようにな...2022.02.13 | 10時08分08秒
タブやスライドメニュー、アコーディオンなどJavaScriptを使わずCSSのみで実装できるインタラクティブUIコンポーネントのライブラリ・「CSSUI」 CSSUI CSSUIはタブやスライドメニュー、アコーディオンなどJavaScriptを使わずCSSのみで実装できるインタラクティブUIコンポーネントのライブラリです。 タブ、ドロップダウン、モーダル、スライドアウトメニュー、ア...2022.02.10 | 10時12分17秒
軽量、シンプルで使いやすく様々なユーティリティも備えられたCSSフレームワーク・「Beercss」 Beercss See the Pen Untitled by kachibito (@kachibito) on CodePen. Beercssは軽量、シンプルで使いやすく様々なユーティリティも備えられたC...2022.01.22 | 9時52分34秒
タイプライター風のエフェクトを管理、実装できるスタイルシート・「Typed.css」 Typed.css Typed.cssはタイプライター風のエフェクトを管理、実装できるスタイルシートです。上のように文字が打ち込まれたように徐々に表示される的あエフェクトを管理できます。 テキストはcontentプロパティで管理...2022.01.17 | 9時48分06秒
目に見える部分のHTMLタグ全てにスタイリングされたclass不要のスタイルシート・「gd.css」 gd.css gd.cssは目に見える部分のHTMLタグ全てにスタイリングされたclass不要のスタイルシートです。CSSリセットの代替としても利用できるそう。 HTML要素だけでスタイリング可能な、いわゆるクラスレスなCSSで...2021.12.28 | 9時49分39秒
導入も楽々な手書き風のスタイリングが可能なスタイルシート・「doodle.css」 doodle.css doodle.cssは手書き風のスタイリングが可能なスタイルシートです。CSSを読み込んでbodyタグにclass="doodle"を付与するだけと導入も簡単です。テーマに近いものだと思います。 フォームや...2021.12.16 | 10時04分07秒