いろいろなスタイルのボタンを実装出来るスタイルシート・「bttn.css」 bttn.css bttn.cssはいろいろなスタイルのボタンを実装出来るスタイルシートです。種類はそこまで多くないですが、それぞれのボタンは最小、小、中、大の太さが用意されており、ブロック要素/インライン要素、5色のカラーが用意され...2017.01.05 | 10時13分47秒
CSSで作る様々なメニューを大量にまとめた・「110 CSS Menu」 110 CSS Menu 110 CSS MenuはCSS(と、少しのJavaScript)で作るメニューを大量にまとめたWebページです。110個あるかは明記されてないし数えてもないので分かりませんが、読み込みがやたら重いので結構な...2017.01.04 | 10時13分12秒
大量のCSSフレームワークやライブラリ、スニペット、ツール等をコレクションしている・「CSSReflex」 CSSReflex CSSReflexは大量のCSSフレームワークやライブラリ、スニペットやツール等をコレクションしているWebサイトです。よくあるキュレーションサイトですね。レスポンシブの計算機やフィルターツールなどもありますが、特...2016.12.28 | 10時33分35秒
disple:tableを使ったモバイルファーストなCSSグリッドシステム・「Table Grid」 Table Grid Table Gridはdisple:tableを使ったモバイルファーストなCSSグリッドシステムです。といっても実用性を考えて作った重要性の高いプロジェクトではなく、単に実験的に作ったようです。floatやfle...2016.12.21 | 10時25分58秒
ラジオボタンにアニメーションエフェクトを付与する為のスタイルシート・「Radiobox.css」 Radiobox.css Radiobox.cssはラジオボタンにアニメーションエフェクトを付与するCSSです。上図のようにチェックを入れるとラジオボタンがアニメーションします。使い方は簡単で、CSSを読み込んでiinput要素にcl...2016.12.18 | 10時51分41秒
CSSで出来る画像エフェクトをまとめた・「Image Effects with CSS」 Image Effects with CSS Image Effects with CSSはCSSのみで出来る画像へのエフェクト効果を実装するコードをまとめているWebサイトです。主にブレンドモードやフィルターを使ったエフェクトを紹介...2016.12.04 | 10時25分00秒
設定したplaceholderにアニメーションエフェクトを付与する・「FoxHolder 」 FoxHolder FoxHolderはinput等に設定したplaceholderをフォーカス時にアニメーションエフェクトを付与する為のセットです。エフェクトは15種類用意されています。基本的にはCSSとJSファイル(jQuery...2016.11.28 | 10時22分00秒
HTML要素1つで、やや複雑な動きが出来るCSSスピナー・「CSSPIN」 CSSPIN CSSPINは1つの要素で、上のようなそこそこ複雑な動きが作れる、CSSのみで作れるスピナーです。それぞれの動きはそれぞれCSSファイルが用意されているので必要な動きのファイルだけ読み込めば使えます。なかなか使いやすそう...2016.11.22 | 10時33分00秒
使いやすさを意識したReactのWeb用UIコンポーネントのコレクション・「Blueprint」 Blueprint BlueprintはReactのWeb用UIコンポーネントをコレクションにして提供してくれるUIツールキットです。使いやすさを特に意識して構築したそう。汎用的なUIは一通り揃っている印象です。ドキュメントページに動...2016.11.17 | 10時42分23秒
Webアプリの開発スピードをサポートするレスポンシブな軽量HTML/CSSフレームワーク・「Base」 Base BaseはWebアプリの為のレスポンシブな軽量フレームワークです。盤石な基盤をつくることでWebアプリの開発スピードに貢献する事が目的のよう。IE8などのオールドブラウザを含むクロスブラウザ対応で、必要に応じて追加可能なモジ...2016.11.12 | 9時32分09秒
FlexboxベースのシンプルなCSSフレームワーク・「useful.ly」 useful.ly useful.lyはFlexboxベースのシンプルなCSSフレームワーク。グリッドやモーダルウィンドウ、ボタンやフォームのスタイルを提供してくれています。まで開発中でこれから頑張る!CDNも用意したから試しに触って...2016.11.02 | 10時54分44秒
CSSで作るベーシックなローダーのセット・「CSS loader」 CSS loader CSS loaderはCSSのみで作れるベーシックなローダーを簡単に設定できるスタイルシートです。画像でよく見かけるエレメントをCSSで作った、みたいなもの。他に、少し凝ったものもあります。ここ最近はCSSのみで...2016.10.22 | 11時11分30秒
CSSのみで出来たシンプルで実用的なアイコン集・「CSS ICON」 CSS ICON CSS ICONはCSSのみで出来たアイコン集です。それぞれのアイコンは上図のようにコードが紹介されており、各部位がハイライトされるようになっていて仕組みをわかりやすくしてくれています。スマフォの普及やオールドブラウ...2016.10.18 | 10時23分21秒
レスポンシブなオーバーレイメニュー構築のためのフレームワーク・「responsive-overlay-menu」 responsive-overlay-menu See the Pen Responsive overlay menu - full menu with second menu example by Mario Loncarek (@ri...2016.10.16 | 11時14分46秒
WebアプリのためのシンプルでフレキシブルなUIフレームワーク・「Agile CSS」 Agile CSS Agile CSSはWebアプリケーションのためのフレキシブルなUIフレームワークです。タブやテーブル、通知、ツールチップ、ナビゲーションなどの各UIコンポーネントやエフェクト等、アプリに必要そうなコンポーネントが...2016.10.14 | 10時34分21秒
CSSアニメーションの遅延をコントロールする為のシンプルなフレームワーク・「Shift.css」 Shift.css Shift.cssはCSSアニメーションの遅延で要素をコントロールするフレームワークです。上記サンプルのように要素にかかるアニメーションを遅延させてコンテンツの構築をサポートしよう、というもの。CSSとほんの少...2016.10.06 | 10時17分05秒
CSSのみで作るシンプルなツールチップ・「Wenk」 Wenk WenkはCSSのみのツールチップを実装するシンプル軽量なCSSライブラリ。ツールチップの位置やテキストはカスタムデータ属性で管理できます。手軽で良いですね。PostCSS、Less、SCSSに対応しています。ライセンスはM...2016.10.03 | 10時27分06秒
記号や特殊文字を使ったローディング時のスピナーをCSSで作る・「text-spinners」 text-spinners text-spinnersは記号や特殊文字を使ってCSSで作るスピナーです。上例は分かりやすくするために大きなフォントで表示しています。contentプロパティに複数テキストを設定してkeyframesで動...2016.09.29 | 10時19分57秒
Normalize.cssをベースに作られたCSSリセット・「ress」 ress ressはNormalize.cssをベースとしたモダンなCSSリセットです。Normalize.cssに加えて10前後の設定が追加されています。各要素へのbox-sizing: border-box;追加やボタンへのcur...2016.09.18 | 10時26分09秒
軽量シンプルなオープンソースのUIキット・「Css-mint」 Css-mint Css-mintはWebアプリ構築の開発をサポートする為に開発されたUIキットです。Normalize.cssを元に作成、OOCSSに沿ったクリーンな設計を心がけているそう。class名は確かに直感で分かるようにされ...2016.09.15 | 9時01分14秒
flexboxベースの軽量でレスポンシブなCSSフレームワーク・「Basis」 Basis Basisはflexboxベースの軽量でRWD対応CSSフレームワークです。軽量でモバイルファースト、クリーンなコード、ミニマルなスタイルの設計を特徴としています。各コンポーネントやユーティリティ、サンプルテンプレート等も...2016.09.12 | 10時04分00秒
Twitter公開の絵文字のtwemojiをFont Awesomeライクに使える・「Twemoji Awesome」 Twemoji Awesome Twemoji AwesomeはTwitterがOSSとして公開している絵文字、twemojiをFont Awesomeライクに使えるようにする為のプロジェクトです。カナダに在住されている日本の方(El...2016.09.07 | 9時59分16秒