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秒
Bootstrap 4と互換性のある、120以上のコンポーネントを揃えたWeb開発キット・「Uix Kit」 Uix Kit Uix KitはBootstrap 4と互換性のある、120以上のコンポーネントを揃えたWeb開発キットです。CSSフレームワークではないとの事。 これ単体でも開発を始められるし、Bootstrap 4を使い慣れ...2019.06.05 | 10時18分22秒
Font Awesomeから派生したオープンソースのアイコンプロジェクト・「Fork Awesome」 Fork Awesome Fork AwesomeはFont Awesomeから派生したオープンソースのアイコンプロジェクトです。Font Awesomeのバージョン5あたりから、その方向性に疑問を感じ始めた製作者がFont ...2019.05.28 | 11時02分59秒
mediumライクなスタイルを提供するCSS・「medium.css」 medium.css medium.cssはmediumライクなスタイルを提供するスタイルシートです。タイポグラフィやレイアウト、各エレメントのスタイルなどをmediumのような見た目に出来る、というもの しっかりRWD対応にな...2019.05.25 | 10時11分58秒
高パフォーマンス且つスケーラブルなWebアプリの為に設計された、!importantを持たず、依存ゼロのCSSツールキット・「Brevis」 Brevis Brevisは高パフォーマンス且つ拡張性の高いWebアプリの為に設計されたCSSツールキットです。セレクタファーストでレスポンシブWebデザイン対応、論理的な命名規則が特徴だそう。各classは1つの仕事だけを行うため、...2019.05.08 | 10時06分29秒
クリックでコードをコピーできるCSSアニメーションエフェクト集・「CSSFX」 CSSFX CSSFXはホバーやクリックでアニメーションエフェクトを確認、クリックでコードをコピーできるCSSアニメーションエフェクトのまとめです。エフェクトはマテリアルデザインなどで見かけるエフェクトやローダー、そのほかよく使われて...2019.05.06 | 10時36分16秒
軽量でレスポンシブ対応の、classを使わないCSSフレームワーク・「Water.css」 Water.css Water.cssは軽量でレスポンシブWebデザイン対応のCSSフレームワークです。classを使っていない為、セマンティックなHTMLのWebサイト制作に向いています。これといった装飾も無く、シンプルで見やすくす...2019.04.08 | 10時15分17秒
NES.cssにインスパイアされたターミナルスタイルのCSSフレームワーク・「UITerminal」 UITerminal UITerminalはNES.cssにインスパイアされた、ターミナルスタイルのCSSフレームワークです。ドットフォントにはNES.cssと同じくPress Start 2Pが用いられています。各ボタンやプログレス...2019.04.02 | 11時53分39秒
よく見かけるCSSアニメーションエフェクトのスニペットコードをコピーできる・「CSSeffectsSnippets」 CSSeffectsSnippets CSSeffectsSnippetsはちょいちょい見かけるホバーエフェクト等を実装できるCSSコードスニペットをクリックだけでコピーできるプロジェクトサイトです。特にそれ以上の機能はなく、単純にス...2019.03.23 | 9時08分15秒