画像マウスホバーの様々なエフェクトを組み合わせて管理できるCSSエフェクトライブラリ・「Izmir Hover Effects」
Izmir Hover Effects Izmir Hover Effectsは画像へのマウスホバーの際に様々なエフェクトを組み合わせて実装、管理できるCSSエフェクトライブラリです 20のボーダーアニメーションエフェクト、9の...
Resource - CSS3
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対応にな...
高パフォーマンス且つスケーラブルなWebアプリの為に設計された、!importantを持たず、依存ゼロのCSSツールキット・「Brevis」
Brevis Brevisは高パフォーマンス且つ拡張性の高いWebアプリの為に設計されたCSSツールキットです。セレクタファーストでレスポンシブWebデザイン対応、論理的な命名規則が特徴だそう。各classは1つの仕事だけを行うため、...
クリックでコードをコピーできるCSSアニメーションエフェクト集・「CSSFX」
CSSFX CSSFXはホバーやクリックでアニメーションエフェクトを確認、クリックでコードをコピーできるCSSアニメーションエフェクトのまとめです。エフェクトはマテリアルデザインなどで見かけるエフェクトやローダー、そのほかよく使われて...
jsfiddleやCodepenのようにブラウザでJavaScriptを実行テストできるオープンソースのWebアプリ・「Editor」
Editor EditorはjsfiddleやCodepenのようにブラウザでHTML/CSS/JSのコードを実行テストできるOSSです。emmetによるコード補完やLint機能、センターバーを動かす事でレスポンシブWebデザインの表...
軽量でレスポンシブ対応の、classを使わないCSSフレームワーク・「Water.css」
Water.css Water.cssは軽量でレスポンシブWebデザイン対応のCSSフレームワークです。classを使っていない為、セマンティックなHTMLのWebサイト制作に向いています。これといった装飾も無く、シンプルで見やすくす...
NES.cssにインスパイアされたターミナルスタイルのCSSフレームワーク・「UITerminal」
UITerminal UITerminalはNES.cssにインスパイアされた、ターミナルスタイルのCSSフレームワークです。ドットフォントにはNES.cssと同じくPress Start 2Pが用いられています。各ボタンやプログレス...
よく見かけるCSSアニメーションエフェクトのスニペットコードをコピーできる・「CSSeffectsSnippets」
CSSeffectsSnippets CSSeffectsSnippetsはちょいちょい見かけるホバーエフェクト等を実装できるCSSコードスニペットをクリックだけでコピーできるプロジェクトサイトです。特にそれ以上の機能はなく、単純にス...
どんなデバイスでも適切なフォントサイズにしてくれるスタイルシート・「RFS」
RFS RFSは様々なモニターサイズのデバイスでも適切なフォントサイズを計算するCSSです。RFSはresponsive font sizesの頭文字を取った略称だそう。Sass、PostCSS、Less、Stylusなどもサポートさ...
豊富なコンポーネントを含んだBootstrap 4向けのフリーUIキット・「Fire」
Fire Fireは豊富なコンポーネントを含んだBootstrap 4向けのフリーUIキットです。これからも増えるようでさらに期待できそうです。クリーンで見やすく、必要なUIも揃えられており、すべての要素が100%レスポンシブWebデ...
CSSで作られたポップでカラフルなフォント・「CSSans Pro」
CSSans Pro See the Pen CSSans Pro by kachibito (@kachibito) on CodePen. CSSans ProはCSSのみでポップでカラフルなフォントを作成、表...