Resource - CSS/HTML

いろいろなスタイルのボタンを実装出来るスタイルシート・「bttn.css」

bttn.css bttn.cssはいろいろなスタイルのボタンを実装出来るスタイルシートです。種類はそこまで多くないですが、それぞれのボタンは最小、小、中、大の太さが用意されており、ブロック要素/インライン要素、5色のカラーが用意され...

CSSで作る様々なメニューを大量にまとめた・「110 CSS Menu」

110 CSS Menu 110 CSS MenuはCSS(と、少しのJavaScript)で作るメニューを大量にまとめたWebページです。110個あるかは明記されてないし数えてもないので分かりませんが、読み込みがやたら重いので結構な...

大量のCSSフレームワークやライブラリ、スニペット、ツール等をコレクションしている・「CSSReflex」

CSSReflex CSSReflexは大量のCSSフレームワークやライブラリ、スニペットやツール等をコレクションしているWebサイトです。よくあるキュレーションサイトですね。レスポンシブの計算機やフィルターツールなどもありますが、特...
Ads

disple:tableを使ったモバイルファーストなCSSグリッドシステム・「Table Grid」

Table Grid Table Gridはdisple:tableを使ったモバイルファーストなCSSグリッドシステムです。といっても実用性を考えて作った重要性の高いプロジェクトではなく、単に実験的に作ったようです。floatやfle...

ラジオボタンにアニメーションエフェクトを付与する為のスタイルシート・「Radiobox.css」

Radiobox.css Radiobox.cssはラジオボタンにアニメーションエフェクトを付与するCSSです。上図のようにチェックを入れるとラジオボタンがアニメーションします。使い方は簡単で、CSSを読み込んでiinput要素にcl...

CSSで出来る画像エフェクトをまとめた・「Image Effects with CSS」

Image Effects with CSS Image Effects with CSSはCSSのみで出来る画像へのエフェクト効果を実装するコードをまとめているWebサイトです。主にブレンドモードやフィルターを使ったエフェクトを紹介...

設定したplaceholderにアニメーションエフェクトを付与する・「FoxHolder 」

FoxHolder FoxHolderはinput等に設定したplaceholderをフォーカス時にアニメーションエフェクトを付与する為のセットです。エフェクトは15種類用意されています。基本的にはCSSとJSファイル(jQuery...

HTML要素1つで、やや複雑な動きが出来るCSSスピナー・「CSSPIN」

CSSPIN CSSPINは1つの要素で、上のようなそこそこ複雑な動きが作れる、CSSのみで作れるスピナーです。それぞれの動きはそれぞれCSSファイルが用意されているので必要な動きのファイルだけ読み込めば使えます。なかなか使いやすそう...

使いやすさを意識したReactのWeb用UIコンポーネントのコレクション・「Blueprint」

Blueprint BlueprintはReactのWeb用UIコンポーネントをコレクションにして提供してくれるUIツールキットです。使いやすさを特に意識して構築したそう。汎用的なUIは一通り揃っている印象です。ドキュメントページに動...

Webアプリの開発スピードをサポートするレスポンシブな軽量HTML/CSSフレームワーク・「Base」

Base BaseはWebアプリの為のレスポンシブな軽量フレームワークです。盤石な基盤をつくることでWebアプリの開発スピードに貢献する事が目的のよう。IE8などのオールドブラウザを含むクロスブラウザ対応で、必要に応じて追加可能なモジ...

FlexboxベースのシンプルなCSSフレームワーク・「useful.ly」

useful.ly useful.lyはFlexboxベースのシンプルなCSSフレームワーク。グリッドやモーダルウィンドウ、ボタンやフォームのスタイルを提供してくれています。まで開発中でこれから頑張る!CDNも用意したから試しに触って...

CSSで作るベーシックなローダーのセット・「CSS loader」

CSS loader CSS loaderはCSSのみで作れるベーシックなローダーを簡単に設定できるスタイルシートです。画像でよく見かけるエレメントをCSSで作った、みたいなもの。他に、少し凝ったものもあります。ここ最近はCSSのみで...

CSSのみで出来たシンプルで実用的なアイコン集・「CSS ICON」

CSS ICON CSS ICONはCSSのみで出来たアイコン集です。それぞれのアイコンは上図のようにコードが紹介されており、各部位がハイライトされるようになっていて仕組みをわかりやすくしてくれています。スマフォの普及やオールドブラウ...

レスポンシブなオーバーレイメニュー構築のためのフレームワーク・「responsive-overlay-menu」

responsive-overlay-menu See the Pen Responsive overlay menu - full menu with second menu example by Mario Loncarek (@ri...

WebアプリのためのシンプルでフレキシブルなUIフレームワーク・「Agile CSS」

Agile CSS Agile CSSはWebアプリケーションのためのフレキシブルなUIフレームワークです。タブやテーブル、通知、ツールチップ、ナビゲーションなどの各UIコンポーネントやエフェクト等、アプリに必要そうなコンポーネントが...

CSSアニメーションの遅延をコントロールする為のシンプルなフレームワーク・「Shift.css」

Shift.css Shift.cssはCSSアニメーションの遅延で要素をコントロールするフレームワークです。上記サンプルのように要素にかかるアニメーションを遅延させてコンテンツの構築をサポートしよう、というもの。CSSとほんの少...

CSSのみで作るシンプルなツールチップ・「Wenk」

Wenk WenkはCSSのみのツールチップを実装するシンプル軽量なCSSライブラリ。ツールチップの位置やテキストはカスタムデータ属性で管理できます。手軽で良いですね。PostCSS、Less、SCSSに対応しています。ライセンスはM...

記号や特殊文字を使ったローディング時のスピナーをCSSで作る・「text-spinners」

text-spinners text-spinnersは記号や特殊文字を使ってCSSで作るスピナーです。上例は分かりやすくするために大きなフォントで表示しています。contentプロパティに複数テキストを設定してkeyframesで動...

Normalize.cssをベースに作られたCSSリセット・「ress」

ress ressはNormalize.cssをベースとしたモダンなCSSリセットです。Normalize.cssに加えて10前後の設定が追加されています。各要素へのbox-sizing: border-box;追加やボタンへのcur...

軽量シンプルなオープンソースのUIキット・「Css-mint」

Css-mint Css-mintはWebアプリ構築の開発をサポートする為に開発されたUIキットです。Normalize.cssを元に作成、OOCSSに沿ったクリーンな設計を心がけているそう。class名は確かに直感で分かるようにされ...

flexboxベースの軽量でレスポンシブなCSSフレームワーク・「Basis」

Basis Basisはflexboxベースの軽量でRWD対応CSSフレームワークです。軽量でモバイルファースト、クリーンなコード、ミニマルなスタイルの設計を特徴としています。各コンポーネントやユーティリティ、サンプルテンプレート等も...

Twitter公開の絵文字のtwemojiをFont Awesomeライクに使える・「Twemoji Awesome」

Twemoji Awesome Twemoji AwesomeはTwitterがOSSとして公開している絵文字、twemojiをFont Awesomeライクに使えるようにする為のプロジェクトです。カナダに在住されている日本の方(El...
Ads