Neumorphism(ニューモーフィズム)にインスパイアされたUIキット・「Neumorphism UI」 Neumorphism UI Neumorphism UIはNeumorphism(ニューモーフィズム)にインスパイアされたUIキットです。レイアウトにはBootstrapがベースに使われています Neumorphism、ニュー...2020.05.19 | 9時45分38秒
CSS製の斜めやジグザグなどの境界を手軽に作れる・「CSS Section Separator Generator」 CSS Section Separator Generator CSS Section Separator GeneratorはCSS製の斜めやジグザグなどの境界を手軽に作れるジェネレーターです セクションが変わる所を分かりやす...2020.05.05 | 10時10分08秒
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秒
任意のWebサイトのURLを入力するだけでダークモード用のCSSを自動で作成してくれる・「Night Eye」 Night Eye Night Eyeは任意のWebサイトのダークモード用CSSを自動生成してくれるジェネレーターです 使い方も簡単でURLを入力するだけ。自動で解析し、ダークモードに対応したCSSを生成してくれます あと...2020.04.21 | 9時35分48秒
CSS製の円グラフを手軽に作れるWebアプリ・「CSS Pie Chart Generator」 CSS Pie Chart Generator CSS Pie Chart GeneratorCSS製の円グラフを手軽に作れるシンプルなWebアプリです 画像だと管理が面倒だしCSSだとコード書くのが面倒な円グラフなので地味に需...2020.04.02 | 9時57分52秒
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のデフォルトスタイルを検索できる・「Browser Default Styles」 Browser Default Styles Browser Default Stylesは各ブラウザのデフォルトスタイルを検索できるWebアプリです 主要なレンダリングエンジン(WebKit、Blink、Gecko、T...2019.12.10 | 9時50分59秒
アニメーションする背景をCSSで簡単に作れる・「Animated CSS Background Generator」 Animated CSS Background Generator Animated CSS Background Generatorはボケやレクタングルなどシンプルなオブジェクトがアニメーションする背景をCSSで簡単に作れるWebア...2019.12.09 | 9時37分41秒
よく使用されている汎用的なレイアウトとUIパターンのCSSコードをコレクションしている・「CSS Layout」 CSS Layout CSS Layoutはよく採用される汎用的なレイアウトやUIパターンのCSSコードを60ほどコレクションしているプロジェクトサイトです 例えばレイアウトなら3カラム、サイドバー2カラム、1カラムグリッドレイ...2019.12.06 | 10時00分02秒
開発したHTML/CSS/JS製のWebアプリを公開したり利用できる・「Outpan」 Outpan OutpanはHTML/CSS/JSで開発したWebアプリを公開、利用できる開発者向けのWebアプリ公開プラットフォームです ユーザーは様々なWebアプリを検索したり利用でき、開発者は公開したWebアプリの人気に応...2019.11.18 | 9時55分05秒
画像マウスホバーの様々なエフェクトを組み合わせて管理できる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秒
プロジェクトが止まってしまっているSemantic UIからフォークされ、コミュニティによって開発が進められているUIフレームワーク・「Fomantic UI」 Fomantic UI Fomantic UIは、ある程度使用者が多いにもかかわらず、開発がほぼ止まってしまっているSemantic UIからフォークされて開発が進みだしたプロジェクトです。 プロジェクトサイトではコミュニティフ...2019.09.08 | 9時52分03秒
任意のSVGのstrokeやfillをアニメーションさせるWebアプリ・「SVG Artista」 SVG Artista SVG Artistaは任意のSVGにアニメーションエフェクトを付与するWebアプリです。 SVGのコードを貼るか、読み込ませると、コードを解析してCSSを作成、アニメーションさせてくれる、というもの。 ...2019.08.28 | 9時58分02秒