ブレンドモードを利用したカラフルなフィルタの為のCSS・「Colofilter.css」
Colofilter.css Colofilter.cssはcssのblend modesを使用したカラフルなフィルタの為のCSSです。mix-blend-modeプロパティを予め設定し、classでフィルタをかけられるようにしたCS...
Resource - CSS/HTML
CSSで変更できるカーソルとコードの一覧・「CSS Cursor」
CSS Cursor CSS CursorはCSSで変更できるカーソルとそのプロパティ、対応ブラウザの一覧ページです。思いの外しらないものもあったので備忘録的に。HTML製のWebアプリも増えているので以前よりも需要は高くなっているか...
WebベースなAirDropのオープンソースクローン・「Snapdrop」
Snapdrop SnapdropはAppleのAirDropクローンです。オープンソースとして公開されています。HTML5製のWebベースとなっており、ブラウザを利用して異なるデバイス間でのファイル転送が可能との事。ブラウザは同じも...
Flexboxのルールをライブプレビューでテスト、確認出来る・「Test CSS Flexbox Rules Live」
Test CSS Flexbox Rules Live Test CSS Flexbox Rules LiveはFlexboxのルールを学べるツールです。各プロパティの指示でどうレイアウトが変化するかをライブプレビューで確認出来ますの...
cssのflexboxを遊びながら学べるツール・「FLEXBOX FROGGY」
FLEXBOX FROGGY FLEXBOX FROGGYはflexboxをゲームで遊びながら学べるツールです。カエルをflexboxプロパティを使用して葉の上に持っていければOKというシンプルなもの。24レベルまで用意されています。...
Flexboxを使ったCSSグリッドシステム・「Gridlex」
Gridlex GridlexはFlexboxを使ったシンプルなCSSグリッドシステムです。親要素と子要素に特定のclassを追加して利用するみたいです。非常に簡単なものですが、シンプル故にカスタマイズしやすいかも。カラム数は.gri...
CSSのブレンドモードとフィルターを組み合わせて動作テストできる・「FilterBlend」
FilterBlend FilterBlendはCSSのbackground-blend-modeとfilterプロパティを組み合わせて動作テスト出来るツールです。任意の画像をアップロードしてblend-modeを設定し、filter...
Dropbox製のオープンソースSCSSフレームワーク・「Scooter」
Scooter ScooterはDropboxが提供するOSSのSCSSフレームワークです。Dropbox向けに開発した基本スタイルのSCSS及びUIフレームワークをオープンソースとしてもユーザーに公開しているようです。スタイルに関し...
CSSのみで棒グラフを作るためのチャートシステム・「chart.css」
chart.css chart.cssはCSSのみで棒グラフを作成する為のCSSチャートシステムです。上図のようなシンプルな棒グラフのみ作成可能となっています。用意されたclassやカスタムデータ属性によってパーセンテージの表示、太さ...
軽さを意識したシンプルなCSSフレームワーク・「Kickstart」
Kickstart Kickstartは軽さを重視したCSSフレームワークです。元々はKickstrapという名でBootstrapの拡張ツールだったそうですが、Ver.3で完全に独立したCSSフレームワークになったとの事です。Boo...
CSSで作られた様々なボタンをTumblrで紹介する・「CSS Buttons」
CSS Buttons CSS ButtonsはCSSで作られたボタンを紹介するTumblrです。アニメーションエフェクトのあるボタンはGifアニメで紹介されています。基本的にはCodePenへのリンクも貼られていますのでコードの確認...
flexboxを使ったシンプルでフレキシブルなCSSフレームワーク・「cssPlus」
cssPlus cssPlusはflexboxをベースにして構築されたフレキシブルでシンプルなCSSフレームワークです。各主要ブラウザにも対応しています。迅速で手軽な開発をサポートしたい、との事。ライセンスはMIT。 cssPl...
レスポンシブWedデザイン対応のスタイルガイドを作成出来るOSS・「Styleguide」
Styleguide StyleguideはWebサイトのスタイルガイドを作成出来るツール。OSSとして公開されています。RWDにも対応できるように、リサイズ機能も付与。動作デモを見たほうが早そうですね。ライセンスはMIT。 S...
Markdown向けのレスポンシブWebデザイン対応UIフレームワーク・「Markdown UI」
Markdown UI Markdown UIはMarkdown記法で構築出来るRWD対応のUIフレームワークです。UIのスタイルはフレームワークらしく、極めてシンプルなものになっていますので自分好みにカスタマイズする形で使用する感じ...
Google製のマテリアルデザインコンポーネントライブラリ・「Material Design Lite」
Material Design Lite Material Design Liteはマテリアルデザイン向けのGoogle謹製コンポーネントライブラリです。Webサイトのテンプレートも用意されていました。特定のライブラリにも依存しておら...
軽量でミニマルなCSSフレームワーク・「Thao Framework」
Thao Framework Thao Frameworkは軽量でミニマルなCSSフレームワークです。必要最低限のUIコンポーネントとスタイルが用意されており、すぐに開発を始めることが出来そうです。RWD対応ですがclassの変更で簡...
レスポンシブWebデザイン対応のミニマルなUIフレームワーク・「KATHAMO」
KATHAMO KATHAMOはRWD対応のミニマルなCSSフレームワークです。モバイルフレンドリーなフォームやテーブル、リストやアラートなどのコンポーネントが用意されていますが、本当に必要最低限しか用意されていない印象です。個人的に...
Twitter Bootstrapの有料/無料テンプレートを配布する・「ShapeBootstrap」
ShapeBootstrap ShapeBootstrapはBootstrapのテンプレート配布サイトです。有料と無料のものが用意されていますが、無料版も結構な数があるようです。ダウンロード出来るだけでなく、開発者による販売も可能なの...
Bootstrapの為のカード型UIフレームワーク・「Bootcards」
Bootcards BootcardsはBootstrapの為のカード型UIフレームワークです。カード型UIとは最近TwitterやGoogle等が提唱し始めたスタイル（？）です（参照：Twitterカード、Google Now カー...
ベーシックで使いやすそうなBootstrap向け管理画面テンプレート・「Gentallela」
Gentallela GentallelaはベーシックなBootstrap Adminテンプレートです。ゴチャゴチャしておらず、使いやすそうな印象でした。チャートやカレンダー、フォーム等だけでなく、請求書やデータグリッドなどのスタイル...
シンプルでクリーンなモバイルファーストのCSSフレームワーク・「Outline」
Outline OutlineはシンプルでクリーンなCSSフレームワークです。モバイルファースト設計のレスポンシブWebデザイン対応で、tableやタブ、ボタンなどの各UIコンポーネントもひと通り揃えられています。もちろんこれらもRW...
RWD対応のシンプルなUIキット・「Poly」
Poly See the Pen Poly – A simple, modular UI kit built with Sass by Guil H (@Guilh) on CodePen. PolyはレスポンシブWebデザイン対応...