Neumorphism(ニューモーフィズム)にインスパイアされたUIキット・「Neumorphism UI」 Neumorphism UI Neumorphism UIはNeumorphism(ニューモーフィズム)にインスパイアされたUIキットです。レイアウトにはBootstrapがベースに使われています Neumorphism、ニュー...2020.05.19 | 9時45分38秒
Windows98を再現できるCSS・「98.css」 98.css See the Pen GRpWyyz by kachibito (@kachibito) on CodePen. 98.cssはWindows98のUIを再現できるCSSです。基本的にはフォーム回りやダ...2020.04.25 | 10時13分48秒
様々なタイプのCSS製の背景パターンを作成出来るスタイルシート・「pattern.css」 pattern.css pattern.cssはCSSだけで作れる様々な背景パターンを手軽に作れるスタイルシートです ドットや縦線、横線、斜めなどのストライプ、ジグザグなどを作成可能で、色やサイズも手軽に変更できるようになってい...2020.04.24 | 9時20分19秒
あらゆる画面サイズに対応できるよう設計されたモバイルファーストなscssフレームワーク・「Honeycomb」 Honeycomb Honeycombはあらゆる画面サイズに対応できるよう設計されたモバイルファーストなscssフレームワークです フォントやレイアウトなど、どんなサイズのモニタでも見栄えがよく分かりやすいUIを提供してくれると...2020.04.11 | 9時58分11秒
classやidを使わないセマンティックなHTMLによるWeb開発をサポートするスタイルシート・「MVP.css」 MVP.css See the Pen xxGQKyx by kachibito (@kachibito) on CodePen. MVP.cssはclassやidを使わないセマンティックなHTMLによるWeb開発をサ...2020.03.26 | 11時25分33秒
ユーティリティに焦点を当てた、インタラクティブなUI開発をサポートするCSSフレームワーク・「Shorthand」 Shorthand Shorthandはユーティリティに焦点を当てたモダンなCSSフレームワークです。インタラクティブなUI開発をサポートしてくれそう いわゆるプロパティの一括指定(ショートハンド)に関するものではなく、単純に開...2020.03.12 | 10時10分31秒
トグルボタンの様々なスタイリングを提供するCSSライブラリ・「MoreToggles.css」 MoreToggles.css MoreToggles.cssはトグルボタンのスタイリング用のCSSライブラリです 様々なトグルボタンをclass付与だけで実装出来るようになっています。スタイルはiOSタイプやAndroidタイ...2020.03.07 | 10時02分54秒
既存のCSSフレームワーク等と併用も可能な軽量CSSライブラリ・「sscaffold」 sscaffold See the Pen BayGXYV by kachibito (@kachibito) on CodePen. sscaffoldは既存のCSSフレームワークと併用も可能な軽量CSSライブラリで...2020.01.22 | 9時58分40秒
CSSだけで作られた500以上ものカスタマイズ可能なミニマルアイコン・「css.gg」 css.gg css.ggはCSSだけで出来た500以上のミニマルなアイコンを使えるCSSライブラリです スケーラブルでカスタマイズ性のある設計で非常に使いやすい印象です。個人的にはアイコンフォントよりも軽量で好みな感じ ...2019.12.29 | 10時10分49秒
マルチレイヤーな複雑なCSSグラデーションのコードをコピーできる・「Gradienta」 Gradienta Gradientaはマルチレイヤーの複雑なCSSグラデーションを紹介、コードもコピーできるプロジェクトサイトです 各グラデーションはCSSだけでなくjpgとしても配布されており、それぞれダーク、ライト、シンプ...2019.12.22 | 10時13分58秒
よく使用されている汎用的なレイアウトとUIパターンのCSSコードをコレクションしている・「CSS Layout」 CSS Layout CSS Layoutはよく採用される汎用的なレイアウトやUIパターンのCSSコードを60ほどコレクションしているプロジェクトサイトです 例えばレイアウトなら3カラム、サイドバー2カラム、1カラムグリッドレイ...2019.12.06 | 10時00分02秒
画像マウスホバーの様々なエフェクトを組み合わせて管理できるCSSエフェクトライブラリ・「Izmir Hover Effects」 Izmir Hover Effects Izmir Hover Effectsは画像へのマウスホバーの際に様々なエフェクトを組み合わせて実装、管理できるCSSエフェクトライブラリです 20のボーダーアニメーションエフェクト、9の...2019.11.06 | 10時03分24秒
1つの要素で出来るユニークな背景パターン集・「1 element card background patterns」 1 element card background patterns See the Pen 1 element card background patterns (see description) by kachibito ...2019.10.16 | 9時41分29秒
CSS GridとGradientsを使ってランダムにパターンを作成、コードをコピーできる・「CSS Grid-ient」 CSS Grid-ient See the Pen CSS Grid-ient by Jordan Marshall (@TheCSSKing) on CodePen. CSS Grid-ientはCSS GridとG...2019.10.02 | 10時04分01秒
CSSによるアニメーションエフェクトの動作確認しながらコードをコピーできる・「CSS Animo」 CSS Animo CSS AnimoはCSSによるアニメーションエフェクトの動作確認しながらコードをコピーできるWebサイトです コードはクリックのみでクリップボードにコピーされるので気に入ったエフェクトをコピペするだけで使え...2019.09.23 | 9時37分03秒
アスキーアートのラップトップを作って画像などを組み合わせて使えるCSS・「laptop.css」 laptop.css See the Pen RwbEorO by kachibito (@kachibito) on CodePen. laptop.cssはアスキーアートのラップトップを作って画像などを組み合わせて...2019.09.22 | 10時05分09秒
スタートアップ企業向けに商用でもクレジット不要のランディングページテンプレートを提供する・「Shade」 Shade Shadeは予算に苦しむスタートアップ企業向けに無償提供されたLPテンプレートです。クレジット表記も歓迎はするけど必須ではないそうです。(この旨は同梱されているライセンスファイルに記載されています) 用意され...2019.08.30 | 9時54分47秒
ユニークなCSSグラデーションをコレクションしている・「Gradient Magic」 Gradient Magic Gradient MagicはユニークなCSSグラデーションをコレクションしているプロジェクトです。 ユニークなmのだけでなく、ベーシックなものから複雑なもの、境界線が暈されてないものやチェ...2019.08.04 | 10時16分19秒
軽量でカスタマイズ性重視の、カスタムプロパティを使ったモダンなCSSフレームワーク・「HiQ」 HiQ HiQは軽量でカスタマイズしやすいCSSフレームワークです。PostCSSで構築されており、カスタムプロパティを導入したモダン設計で管理もしやすい印象です。 カスタムプロパティをふんだんに使っており、直感的な変数...2019.07.09 | 10時32分12秒
シンプルさ重視の軽量CSSフレームワーク・「TypeSafe CSS」 TypeSafe CSS TypeSafe CSSはシンプルさ重視の軽量なCSSフレームワークです。見出し、パラグラフ、リスト、引用、テーブルとコードハイライトのみのスタイルを提供します。 日々複雑化していくWebの世界はそれは...2019.06.30 | 9時34分23秒
コピペで使えてカスタマイズもしやすいCSSアニメーションコードをまとめている・「CSS WAND」 CSS WAND CSS WANDはコピペで使えるように工夫されたCSSアニメーションコードのまとめサイトです。HTMLとCSSをそれぞれコピーして簡単に利用できるようになっています。 まとめと言ってもまだ数は少ないですが、...2019.06.24 | 10時13分13秒
Bootstrapに基づいて設計されたミニマルデザインなオープンソース管理画面テンプレート・「Spur」 Spur SpurはBootstrapに基づいて設計されたダッシュボードテンプレートです。ミニマルなスタイルで装飾もほとんどありませんのでフレームワークライクに使う事が出来そうです。チャートを表示したい時はCharts.jsを読み込め...2019.06.14 | 9時41分18秒