CSS製のボタンやチェックボックス、トグルボタンをその場で作成して共有できる・「cssbuttons.io」
cssbuttons.io cssbuttons.ioはCSS製のボタンやチェックボックス、トグルボタンをその場で作成して共有できるWebアプリです。 Githubのアカウントでログインすればエディタが使えるようになります。Co...
Resource - CSS3
リンクやボタンなどに使えるピュアCSSアニメーションのコレクション・「Annimay」
Annimay Annimayはリンクやボタンなどに使えるピュアCSSアニメーションのコレクションです。 ボタン等でよく使われているのを見かけるアニメーションが一通りそろえられています。CSSファイルの他、SCSS、LESSもサ...
CSSファイルを読み込むだけで見た目を整えられるclass-lessなCSSフレームワーク・「AttriCSS」
AttriCSS See the Pen by kachibito (@kachibito) on CodePen. AttriCSSは読み込むだけで見た目を整えられるclass-lessなCSSフレーム...
任意の画像で様々な種類のCSS製フィルターを確認、気に入ったフィルターをクリックするとCSSコードをコピーできるWebアプリ・「FilterSS」
FilterSS FilterSSは任意の画像で様々な種類のCSS製フィルターを確認、気に入ったフィルターをクリックするとCSSコードをコピーできるWebアプリです。 現在42種のフィルターが用意されており、全てCSSで書かれて...
背景をボカして透過させるすりガラス風コンテンツを作成、CSSをコピーできる・「Glassmorphism CSS Generator」
Glassmorphism CSS Generator Glassmorphism CSS Generatorは背景をボカして透過させるすりガラス風コンテンツを作成、CSSをコピーできるWebアプリです。 Windows Vis...
CSS製のすりガラスを見た目を確認しながら作れるWebアプリ・「css.glass」
css.glass css.glassはCSS製のすりガラスを見た目を確認しながら作れるWebアプリです。上の様な、後方レイヤーにblurがかかるやつを簡単に作れるやつ。 設定をいじりながら作りたいすりガラスをつくってコードをコ...
Windows7のUIを再現できるスタイルシート・「7.css」
7.css See the Pen QWpzrZb by kachibito (@kachibito) on CodePen. 7.cssはWindows7のUIを再現できるスタイルシートです。98.css、XP.cs...
読み込むだけでアクセシビリティチェックを行えるCSS・「Checka11y.css」
Checka11y.css Checka11y.cssは読み込むだけでアクセシビリティチェックを行えるCSSです。 よくあるアクセシビリティチェックツールのと同等の精度かどうかは個人的には少し懐疑的ですがCSS製とあって非常に手...
カスタマイズ性と柔軟性を意識したセマンティックで扱いやすいフロントエンドフレームワーク・「Madosel」
Madosel Madoselはカスタマイズ性と柔軟性を意識したセマンティックで扱いやすいフロントエンドフレームワークです。 レイアウトや各所サイズ、マージンなどを細かくclassで用意したユーティリティメインのCSSフレームワ...
独自属性で任意のHTML要素に様々なアニメーション遷移エフェクトを付与できるスタイルシート・「transition.css」
transition.css transition.cssは独自属性で任意のHTML要素に様々なアニメーション遷移エフェクトを付与できるスタイルシートです。 CDNも用意されていますが、配布サイトで数値を調整してコードをコピーす...
任意のCSSアイコンから別のCSSアイコンへの遷移アニメーションのコードを提供する・「CSS ICON animate」
CSS ICON animate CSS ICON animateは任意のアイコンから別のアイコンへの遷移アニメーションを、アイコンも含めて全てCSSで作れるサービスです。 以前ご紹介した、CSSのみで出来たアイコン集のCSS ...
大量のコンポーネントが用意されたTailwindベースのUIキット・「TUK」
TUK TUKは大量のコンポーネントが用意されたTailwindベースのUIキットです。Tailwind.cssで設計された様々な手プレートやコンポーネントが用意されており、開発をサポートしてくれます。 全てのコンポーネントは主...
クラスレスでHTML要素に基本的なスタイルを適応するCSS・「Bamboo CSS」
Bamboo CSS See the Pen XWNqrRE by kachibito (@kachibito) on CodePen. Bamboo CSSはHTML要素に基本的なスタイルを適応するclass-les...
データ可視化に貢献するチャートCSSフレームワーク・「Charts.css」
Charts.css Charts.cssはデータ可視化のためのチャートCSSフレームワークです。HTMLによるデータビジュアライズの際にスタイリングをサポートするクラスを提供してくれます。 面や棒、折れ線、円やドーナツなどよく...
モダンなCSSを使ったレイアウトのコードスニペットを紹介する・「SmolCSS」
SmolCSS SmolCSSはモダンなCSSを使ったレイアウトのコードスニペットを紹介するプロジェクトサイトです。 古いCSSをモダンなCSSに置き換えるヒントを紹介するModern CSS Solutionsの運営者の方が始...
CSSやJavScript等の便利なコードスニペットを収集している・「DevSamples」
DevSamples DevSamplesはCSSやJavScript等の便利なコードスニペットを収集しているWebサイトです。 CSSやJS、Node、Git、ReactやSvelte、HTMLなど開発時にたびたびググりがちな...
ユーティリティファーストなCSSを設計するためのCSS変数を提供する・「Pollen」
Pollen Pollenは一貫したスタイルやユーティリティファーストなCSSを設計するためのCSS変数を提供するスタイルシートです。 中身は全てCSS変数のみで構成されており、既に定義付けられていますので、classを変えるこ...
高速開発を意識して開発されたミニマリストの為のCSSフレームワーク・「Luxa CSS」
Luxa CSS See the Pen XWNrxOG by kachibito (@kachibito) on CodePen. Luxa CSSは高速開発を意識して開発されたミニマリストの為のCSSフレームワーク...
Tailwind.css向けに用意された200以上のオープンソースなコンポーネントのセット・「Tail-Kit」
Tail-Kit Tail-KitはTailwind.css向けに用意された200以上のオープンソースなコンポーネントのセットです。人気のCSSフレームワーク、Tailwindで使える汎用的なコンポーネントが大量に用意されています。 ...
classを組み合わせて任意のアニメーションエフェクトを作れるCSSアニメーション用スタイルシート・「AnimXYZ」
AnimXYZ See the Pen MWjQjJM by kachibito (@kachibito) on CodePen. AnimXYZはclassを組み合わせて任意のアニメーションエフェクトを作れるCSSア...
使用頻度の高そうなUIをその場で作ってコードを発行、コピーして使える・「CSSLab」
CSSLab CSSLabは使用頻度の高そうなUIをその場で作ってコードを発行、コピーして使えるWebサイトです。 ボタンやモーダルウィンドウ、各アニメーションエフェクト、矢印付きのボタンやリンクなどをその場でデザイン、CSSと...
カスタマイズ性の高い非依存のレスポンシブなグリッドレイアウトフレームワーク・「EasyGrid」
EasyGrid EasyGridはカスタマイズ性の高い非依存のレスポンシブなグリッドレイアウトフレームワークです。 依存性の無い軽量なJavaScrioptとCSSで様々なRWDのグリッドレイアウトを構築出来るようになっていま...