Resource - CSS3

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タイ...
Ads

既存の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の...

1つの要素で出来るユニークな背景パターン集・「1 element card background patterns」

1 element card background patterns See the Pen 1 element card background patterns (see description) by kachibito ...

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...

CSSによるアニメーションエフェクトの動作確認しながらコードをコピーできる・「CSS Animo」

CSS Animo CSS AnimoはCSSによるアニメーションエフェクトの動作確認しながらコードをコピーできるWebサイトです コードはクリックのみでクリップボードにコピーされるので気に入ったエフェクトをコピペするだけで使え...

アスキーアートのラップトップを作って画像などを組み合わせて使えるCSS・「laptop.css」

laptop.css See the Pen RwbEorO by kachibito (@kachibito) on CodePen. laptop.cssはアスキーアートのラップトップを作って画像などを組み合わせて...

プロジェクトが止まってしまっているSemantic UIからフォークされ、コミュニティによって開発が進められているUIフレームワーク・「Fomantic UI」

Fomantic UI Fomantic UIは、ある程度使用者が多いにもかかわらず、開発がほぼ止まってしまっているSemantic UIからフォークされて開発が進みだしたプロジェクトです。 プロジェクトサイトではコミュニティフ...

任意のSVGのstrokeやfillをアニメーションさせるWebアプリ・「SVG Artista」

SVG Artista SVG Artistaは任意のSVGにアニメーションエフェクトを付与するWebアプリです。 SVGのコードを貼るか、読み込ませると、コードを解析してCSSを作成、アニメーションさせてくれる、というもの。 ...

ユニークなCSSグラデーションをコレクションしている・「Gradient Magic」

Gradient Magic Gradient MagicはユニークなCSSグラデーションをコレクションしているプロジェクトです。 ユニークなmのだけでなく、ベーシックなものから複雑なもの、境界線が暈されてないものやチェ...

軽量でカスタマイズ性重視の、カスタムプロパティを使ったモダンなCSSフレームワーク・「HiQ」

HiQ HiQは軽量でカスタマイズしやすいCSSフレームワークです。PostCSSで構築されており、カスタムプロパティを導入したモダン設計で管理もしやすい印象です。 カスタムプロパティをふんだんに使っており、直感的な変数...

コピペで使えてカスタマイズもしやすいCSSアニメーションコードをまとめている・「CSS WAND」

CSS WAND CSS WANDはコピペで使えるように工夫されたCSSアニメーションコードのまとめサイトです。HTMLとCSSをそれぞれコピーして簡単に利用できるようになっています。 まとめと言ってもまだ数は少ないですが、...

Flexboxでやりたいレイアウトを、ビジュアルを見ながら選択肢を選んで作成、コードをコピーできる・「Flex」

Flex FlexはFlexboxでやりたいレイアウトを、ビジュアルを確認しながら選択肢を選んで作成、コードをコピーできるシンプルなWebアプリです。設定項目の多いFlexboxは様々なレイアウトに対応できる反面で、覚えなければな...

Bootstrap 4と互換性のある、120以上のコンポーネントを揃えたWeb開発キット・「Uix Kit」

Uix Kit Uix KitはBootstrap 4と互換性のある、120以上のコンポーネントを揃えたWeb開発キットです。CSSフレームワークではないとの事。 これ単体でも開発を始められるし、Bootstrap 4を使い慣れ...

mediumライクなスタイルを提供するCSS・「medium.css」

medium.css medium.cssはmediumライクなスタイルを提供するスタイルシートです。タイポグラフィやレイアウト、各エレメントのスタイルなどをmediumのような見た目に出来る、というもの しっかりRWD対応にな...
Ads