2013/11/28

CSS3を知らなくてもOK！便利すぎるCSS3関連ツール＆ジェネレーター51

装飾関連

装飾関連のプロパティー以外のツールも大変豊富なcoveloping

13種類のプロパティをつくってくれるスグレモノCSS3 Generator

便利すぎるCSS関連ツール＆ジェネレーター43
CSS3 Generator

4種類のプロパティを簡単に生成できるCSSmatic

便利すぎるCSS関連ツール＆ジェネレーター43
グラデーション、角丸、ノイズ、ボックスシャドウを生成。
CSSmatic

ボタンの生成のほか、4種類のプロパティを作成してくれるCSS3 Gen

便利すぎるCSS関連ツール＆ジェネレーター43
ボタン、角丸、ボックスシャドウ、テキストシャドウ、グラデーションを生成。
CSS3 Gen

4種類のプロパティを生成してくれるUseful CSS3 Generator

UsefulCSS3Generator
角丸、ボックスシャドウ、背景のグラーデーション、透過を生成。
Useful CSS3 Generator

ボタンを作成するCSS Button Generator

テキストに3Dエフェクトをかける3D CSS text Generator

テキストにドロップシャドウをつけてくれるCSS Text Shadow

便利すぎるCSS関連ツール＆ジェネレーター43
CSS Text Shadow

3D状のリボンをつくってくれるCSS3 3D Ribbon Generator

切込みを入れたリボンが作れてしまう「Ribbon builder」

便利すぎるCSS関連ツール＆ジェネレーター43
リボンはリボンでも切り込みが入った少し複雑なリボンを作れてしまうジェネレーターです。
ステッチまで入れられるという芸の細かさも秀逸ですね。
Ribbon Builder

三角形を作れるジェネレーターCSS triangle generator

CSS-triangle-generator
CSSで三角形をつくるためのジェネレーターです。
CSS triangle generator

矢印や吹き出しをつくれるジェネレーター cssarrowplease

矢印や吹き出しをつくれるジェネレーターです。
なお、矢印部分にもhoverエフェクトをつけたいときには、:hover:before{値}といった書き方をします。ご注意くださいね。
cssarrowplease

矢印や吹き出しをつくれるジェネレーター CSS Speech Bubble Generator

Bubbler---CSS-Speech-Bubble-Generator---i-like-pixels--3
こちらも矢印や吹き出しをつくれるジェネレーターですが、
矢印の位置を細かく調整できるのが特長です。
CSS Speech Bubble Generator

ロングシャドウを簡単につくれるLong Shadow Generator

画像を使用したborderのプロパティを生成するBorder Image Generator

パスにそったテキストのプロパティを生成するCSS Text to Path Generator

文字スタイルの調整を簡単にできるCSS Type Set

便利すぎるCSS関連ツール＆ジェネレーター43
CSS Type Set

ソースをコピーして使うボックス要素のジェネレーターCSS3 Rule Generator

アニメーション

CSSによる3DシェイプをつくれるTridiv

便利すぎるCSS関連ツール＆ジェネレーター43
Tridiv

Magic CSS3 Animations

CSSアニメーションを使ったエフェクトライブラー9
素晴らしいアニメーションエフェクトを手軽に実装できてしいまうライブラリー！　「これはマジックだ！」と独り言ちること間違いなしの最強ともいえるライブラリーです。
Magic CSS3 Animations

Animate.css

CSSアニメーションを使ったエフェクトライブラー9
CSS3のアニメーション効果のすぐに使用できるライブラリ。その種類は60種類以上で、head内にanimate.min.cssを読み込み、効果に応じたクラス名をつけるだけで完了するお手軽さです。
Animate.css

Hover.css

CSSアニメーションを使ったエフェクトライブラー9
ホバーエフェクトに特化したアニメーションエフェクトを実装できるスタイルシートです。アニメーションの種類は40種類以上で、head内にhover-min.cssを読み込み、クラス名を加えるだけで簡単に実装できてしまいます。
Hover.css

CSSファイルを読み込んで、クラス名をつけるだけでアニメーションを実装できるCSS3 Animation Cheat Sheet

三角（トライアングル）を生成する三角形ジェネレーターCSS triangle generator

カラー

カラーコードを変換してくれるCSS Color Converter

CSSで使われているカラーコードを表示するCSSPrism

便利すぎるCSS関連ツール＆ジェネレーター43
CSSPrism

フラットデザインの配色がコピー可能なFlat UI Colors

便利すぎるCSS関連ツール＆ジェネレーター43
Flat UI Colors

CSSグラデーションをとっても簡単に生成するツール「Gradientoo」

gradientoo02
説明が不要なほど、直感的に操作可能なツール。
Optionsのチェックボックスにチェックを入れます。
続いて、バーを選択してカラーを選択し、Linear=線状、Radial＝円状を選び、Copy Codeボタンを押せば、コードをコピーすることができるという仕組みです。
カラーの微妙な明度や彩度についてももちろん変更可能です。
Gradientoo

グラデーションを簡単につくれるCSS3 Gradient Generator

グラーデーションを手軽に生成するUltimate CSS Gradient Generator

レイアウト関連

レスポンシブ対応のHTMLとCSSを簡単に作成できるResponsive Web CSS

グリッドベースのレスポンシブ対応のテンプレートを生成できるジェネレーター

ブラウザ上でフォントの組み合わせを確認できるThe Web Font Combinator

今使っているデバイスのメディアクエリを出力してくれるCSS Media Query Generator

IE6～8で一部のCSS3プロパティを可能にするCSS3 Pie

便利すぎるCSS関連ツール＆ジェネレーター43
CSS3 Pie

さまざまなメニューが簡単につくれるCSS Menu Makere

便利すぎるCSS関連ツール＆ジェネレーター43
CSS Menu Maker

圧縮・整形

YUI Compressorを使用してファイルを圧縮・軽量化してくれるJavaScript/CSS Compression Using YUI Compressor

CSSファイルを圧縮するCSS Compressor

便利すぎるCSS関連ツール＆ジェネレーター43
CSS Compressor

最小化＆最適化してくれるCSSO

便利すぎるCSS関連ツール＆ジェネレーター43
CSSO

CSSを美しく整形してくれるCode Beautifier

便利すぎるCSS関連ツール＆ジェネレーター43
Code Beautifier

その他

CSSの改善ポイントを指摘してくれるCSS LINT

便利すぎるCSS関連ツール＆ジェネレーター43
CSS LINT

チェックボックスを簡単にデザインできるCSS Checkbox Styles

ボタンとテキストフィールドを生成するCSS Button & Text Field Generator

フリップスイッチFlipSwitchが簡単に作れてしまう

CSS3を知らなくてもOK！便利すぎるCSS3関連ツール＆ジェネレーター45
フリップスイッチを簡単に生成するツールです。
カラー・サイズ以外にも、デバイスをiOS5、iOS4、Android、Windows8、カスタムと選択できます。
On/Off Flipswitch HTML5/CSS3 Generator

スプライト用の画像とCSSを作成するCSS Sprite Generator

CSS Sprite Generator

背景などに利用するパターン素材をつくれるPatternify

便利すぎるCSS関連ツール＆ジェネレーター43
Patternify

CSSで作成されたパターンを紹介するCSS3 Patterns Gallery

自動でベンダープレフィックスを付けてくれるExpress Prefixr

CSS3をお手軽・簡単にするCSS3関連ツール＆ジェネレーター43
ベンダープレフィックス系のツールでは、Prefixrというツールが誠に有名だったのですが、残念ながらサービスが終了してしまっていました。
無料のサービスってこれがこわい。
ほかに便利なものはないかと、探していたらこちらがありました。
Express Prefixr