Resource - CSS3

ユーティリティも用意された超軽量なCSSレイアウトライブラリ・「lyt」

lyt See the Pen gOPXPLK by kachibito (@kachibito) on CodePen. lytはユーティリティも用意された超軽量なCSSレイアウトライブラリです。flexboxベース...

ブラウザで動作するオープンソースのテキストエディタ・「Writty」

Writty Writtyはブラウザで動作するオープンソースのテキストエディタです。HTML/JavaScript/CSSで作られています ライティングに集中できるよう、ミニマルなUIでツールバーも最小限に、且つサイドに寄せられ...

class不要で基本的なスタイルを提供するCSSフレームワーク・「Basic.css」

Basic.css See the Pen GRooBMO by kachibito (@kachibito) on CodePen. Basic.cssはclass不要で基本的なスタイルを提供するCSSフレームワーク...
Ads

Tailwind CSSで使えるコンポーネントを確認しながらコードをコピーできる・「tailblocks」

tailblocks tailblocksはTailwind CSSで使えるコンポーネントを確認しながらコードをコピーできるWebサイトです 色を変更できる以外に編集可能な箇所はありませんが、よく使うコンポーネントをビジュアルで...

Windows XPライクなUIを提供するCSS・「XP.css」

XP.css See the Pen jObdBOr by kachibito (@kachibito) on CodePen. XP.cssはWindows XPのようなUIを提供するCSSです。以前ご紹介した98....

シンプルで見やすいレイアウトをclass不要で作れるclasslessなCSSフレームワーク・「new.css」

new.css See the Pen oNjJXae by kachibito (@kachibito) on CodePen. new.cssはシンプルで見やすいレイアウトをセマンティックなHTMLだけで作れるcl...

Neumorphism(ニューモーフィズム)にインスパイアされたUIキット・「Neumorphism UI」

Neumorphism UI Neumorphism UIはNeumorphism(ニューモーフィズム)にインスパイアされたUIキットです。レイアウトにはBootstrapがベースに使われています Neumorphism、ニュー...

CSS製の斜めやジグザグなどの境界を手軽に作れる・「CSS Section Separator Generator」

CSS Section Separator Generator CSS Section Separator GeneratorはCSS製の斜めやジグザグなどの境界を手軽に作れるジェネレーターです セクションが変わる所を分かりやす...

Windows98を再現できるCSS・「98.css」

98.css See the Pen GRpWyyz by kachibito (@kachibito) on CodePen. 98.cssはWindows98のUIを再現できるCSSです。基本的にはフォーム回りやダ...

様々なタイプのCSS製の背景パターンを作成出来るスタイルシート・「pattern.css」

pattern.css pattern.cssはCSSだけで作れる様々な背景パターンを手軽に作れるスタイルシートです ドットや縦線、横線、斜めなどのストライプ、ジグザグなどを作成可能で、色やサイズも手軽に変更できるようになってい...

任意のWebサイトのURLを入力するだけでダークモード用のCSSを自動で作成してくれる・「Night Eye」

Night Eye Night Eyeは任意のWebサイトのダークモード用CSSを自動生成してくれるジェネレーターです 使い方も簡単でURLを入力するだけ。自動で解析し、ダークモードに対応したCSSを生成してくれます あと...

CSS製の円グラフを手軽に作れるWebアプリ・「CSS Pie Chart Generator」

CSS Pie Chart Generator CSS Pie Chart GeneratorCSS製の円グラフを手軽に作れるシンプルなWebアプリです 画像だと管理が面倒だしCSSだとコード書くのが面倒な円グラフなので地味に需...

classやidを使わないセマンティックなHTMLによるWeb開発をサポートするスタイルシート・「MVP.css」

MVP.css See the Pen xxGQKyx by kachibito (@kachibito) on CodePen. MVP.cssはclassやidを使わないセマンティックなHTMLによるWeb開発をサ...

ユーティリティに焦点を当てた、インタラクティブなUI開発をサポートするCSSフレームワーク・「Shorthand」

Shorthand Shorthandはユーティリティに焦点を当てたモダンなCSSフレームワークです。インタラクティブなUI開発をサポートしてくれそう いわゆるプロパティの一括指定(ショートハンド)に関するものではなく、単純に開...

トグルボタンの様々なスタイリングを提供するCSSライブラリ・「MoreToggles.css」

MoreToggles.css MoreToggles.cssはトグルボタンのスタイリング用のCSSライブラリです 様々なトグルボタンをclass付与だけで実装出来るようになっています。スタイルはiOSタイプやAndroidタイ...

既存のCSSフレームワーク等と併用も可能な軽量CSSライブラリ・「sscaffold」

sscaffold See the Pen BayGXYV by kachibito (@kachibito) on CodePen. sscaffoldは既存のCSSフレームワークと併用も可能な軽量CSSライブラリで...

CSSだけで作られた500以上ものカスタマイズ可能なミニマルアイコン・「css.gg」

css.gg css.ggはCSSだけで出来た500以上のミニマルなアイコンを使えるCSSライブラリです スケーラブルでカスタマイズ性のある設計で非常に使いやすい印象です。個人的にはアイコンフォントよりも軽量で好みな感じ ...

各ブラウザのCSSのデフォルトスタイルを検索できる・「Browser Default Styles」

Browser Default Styles Browser Default Stylesは各ブラウザのデフォルトスタイルを検索できるWebアプリです 主要なレンダリングエンジン(WebKit、Blink、Gecko、T...

アニメーションする背景をCSSで簡単に作れる・「Animated CSS Background Generator」

Animated CSS Background Generator Animated CSS Background Generatorはボケやレクタングルなどシンプルなオブジェクトがアニメーションする背景をCSSで簡単に作れるWebア...

よく使用されている汎用的なレイアウトとUIパターンのCSSコードをコレクションしている・「CSS Layout」

CSS Layout CSS Layoutはよく採用される汎用的なレイアウトやUIパターンのCSSコードを60ほどコレクションしているプロジェクトサイトです 例えばレイアウトなら3カラム、サイドバー2カラム、1カラムグリッドレイ...

開発したHTML/CSS/JS製のWebアプリを公開したり利用できる・「Outpan」

Outpan OutpanはHTML/CSS/JSで開発したWebアプリを公開、利用できる開発者向けのWebアプリ公開プラットフォームです ユーザーは様々なWebアプリを検索したり利用でき、開発者は公開したWebアプリの人気に応...

画像マウスホバーの様々なエフェクトを組み合わせて管理できるCSSエフェクトライブラリ・「Izmir Hover Effects」

Izmir Hover Effects Izmir Hover Effectsは画像へのマウスホバーの際に様々なエフェクトを組み合わせて実装、管理できるCSSエフェクトライブラリです 20のボーダーアニメーションエフェクト、9の...
Ads