Resource - CSS3

CSS3による様々なマウスホバーアニメーションをまとめたスタイルシート・「Hover.css」

Hover.css Hover.cssはCSS3による様々なホバーアニメーションエフェクトをまとめたスタイルシートです。SASSとLESSにも対応。エレメントやアイコンなどにマウスホバーアニメーションが付けられており、classを振る...

Dribbbleに投稿されたデザインをCodopenで再現、比較している・「Give ’n’ Go」

Give ’n’ Go Give ’n’ GoはDribbbleに投稿されたものとCodepenで再現されたものを比較しているWebギャラリーサイトです。デザイナーの方がDribbbleに投稿したデザインコンセプトと、そのデザインをC...

CSSのみで作られたスマフォ向けのカレンダーアプリデザイン・「CSS-only Calendar App Concept」

CSS-only Calendar App Concept CSS-only Calendar App ConceptはCSSのみで作られたスマフォ向けのカレンダーアプリ用のスタイルです。日付の選択からカラー変更までをCSSのみで作れ...
Ads

ビジネス用Webアプリ構築の為のCSSフレームワーク・「Flakes」

Flakes Flakesはビジネス用のWebアプリ構築の為に公開されたCSS/JavaScriptフレームワークです。RWDやSASSにも対応済み。ダッシュボードに必要なUIやチェックボックス、フィルタ機能付きのテーブルなどのコンポ...

行単位でCSSを適応させるスクリプト・「LINING.JS」

LINING.JS LINING.JSは行単位でCSSを適応させる為のスクリプトです。非依存型で単体で動作してくれます。カスタムデータ属性を使って1行毎に任意のスタイルを作れる、みたいなやつ。上記のスクショは表示時に、1行毎にスライド...

シンプルで軽量なモバイルファーストのCSSフレームワーク・「Furtive」

Furtive Furtiveはシンプルで軽量なモバイルファーストのCSSフレームワークです。2.5KBという軽さながら、必要最低限のスタイルを保っています。これは個人的に好きかも。ライセンスはMITとの事。 Furtive

CSS3+HTML5のアニメーションを作成出来るOSSのエディタ・「Mixeek」

Mixeek MixeekはCSS3やHTML5を利用したアニメーションコンテンツを作成する為のエディタです。ブラウザで動くツールになります。MITライセンスの元、オープンソースとして公開されています。便利っちゃ便利ですが個人的にはも...

CSSのclip-pathプロパティで使うコードを手軽に作成出来る・「Clippy」

Clippy Clippyはclip-pathプロパティで使うコードを手軽に作成出来るツールです。用意されたサンプル画像に重ねて確認しながら作成するだけでコードを出してくれます。手軽で良いのでは。尚、画像をアップロードして~と言った類...

シンプルなアイコンのSVGコードを公開する・「SVG Icons」

SVG Icons SVG Iconsはシンプルなアイコンを描いたSVGのコードを公開するWebサイトです。まだ3セットほどですが、分かりやすくて良いですね。dribbbleで公開されているフリーのアイコンをSVG化しているようです。...

CSSフレームワーク・Foundation5のチートシート・「Foundation CheatSheet」

Foundation CheatSheet Foundation CheatSheetはzurb製のRWD対応CSSフレームワークFoundation Ver.5のチートシートです。とても簡潔に、わかりやすく纏められています。実装例も...

少しずつ色が変わるグラデーション背景をCSSで作成出来る・「CSS GRADIENT ANIMATOR」

CSS GRADIENT ANIMATOR CSS GRADIENT ANIMATORは少しずつ色が変わるグラデーション背景をCSSで作成出来るWebサービスです。keyframesを使ってアニメーションさせているみたいですね。なかな...

ドラッグ&ドロップにも対応のBootstrap向けWYSIWYGエディタ・「Azexo-Composer-WYSIWYG」

Azexo-Composer-WYSIWYG Azexo-Composer-WYSIWYGはD&Dによるコンテンツの配置変更等も可能なBootstrap向けのWYSIWYGエディタです。jQueryに依存しています。JSの動作やCSS...

シンプルで軽量なHTML5/CSS3フレームワーク・「Picnic CSS」

Picnic CSS Picnic CSSはシンプルで軽量なHTML5/CSS3のフレームワークです。RWDにも対応しています。まださほど見ていませんが、Hacker Newsでの議論で興味わいたのでメモ的に。今すぐでなくても将来的に...

美しいグラデーションカラーをまとめている・「uiGradients」

uiGradients uiGradientsは美しいグラデーションカラーをまとめているシンプルなWebサイトです。シンプルにグラデーションとCSSを纏めており、それ以上でも以下でも無いサイトです。単純ですがいいアイデアですね。インス...

Flexboxを使ったレイアウトを手軽に作成出来る・「Fibonacci」

Fibonacci FibonacciはFlexboxを使ったレイアウトを手軽に作成出来るOSSです。カラムを増やしてソースをコピペするだけのシンプルなもので、MITライセンスの下でソースが公開されています。使い方はすぐに分かると思い...

オープンソースのRWDなHTMLメール用テンプレート集・「Open Source Email Templates」

Open Source Email Templates Open Source Email TemplatesはOSSとして配布されているレスポンシブWebデザイン対応のHTMLメールテンプレートです。何種かのデザインが用意されており...

SASSベースの軽量なフロントエンド開発フレームワーク・「Concise.CSS」

Concise.CSS Concise.CSSは軽量なフロントエンド開発フレームワークです。SASSをベースに、オブジェクト指向CSSの原則に基づいて設計しているとの事。オールドブラウザに対応させる場合はModernizrやRespo...

CSSのbackground-blend-modeとgradientを使った背景パターンを公開する・「CSS Gradients with background-blend-mode」

CSS Gradients with background-blend-mode CSS Gradients with background-blend-modeはタイトル通り、background-blend-modeとgradie...

input要素のラベルにアニメーションエフェクトを追加するスクリプト・「FancyText」

FancyText FancyTextはformのinput要素に指定したラベルテキストにアニメーションエフェクトを追加するスクリプトです。jqueryに依存しています。フォーカスすると、ラベルが入力の邪魔にならないように外に出たり非...

Webサイトにシンプルなスクロールエフェクトを追加できるスクリプト・「ScrollMe」

ScrollMe ScrollMeはWebページにシンプルなスクロールエフェクトを追加する為のスクリプトです。jQueryに依存しています。特別な設定は必要なく、スクリプトを読み込んで指定のclassを追加、エフェクトを追加したい要素...

多数のコンポーネントが備わったCSSフレームワーク・「Maxmertkit」

Maxmertkit Maxmertkitはタイポグラフィやテーブル、ボタンやタブなどなどWebサイトに必要なコンポーネントを大量に備えたCSSデザインフレームワークです。RWDにも対応しています。Bootstrapのような使い方が出...

モバイル/デスクトップWebアプリ向けのリッチなUIを構築できるJavaScriptフレームワーク・「Webix」

Webix WebixはJavaScript、CSS、HTML5を使用した、インタラクティブなWebアプリケーションを構築するためのUIフレームワークです。クロスブラウザ、クロスデバイスとの事ですが、どれくらい対応しているかはちょっと...
Ads