>> 
CSS3ジェネレーターを Firefox に搭載する CSSsir 0.1.20120618
 >> 
CSS3ジェネレーターを Firefox に搭載する CSSsir 0.1.20120618

スポンサーサイト

  • このエントリーをはてなブックマークに追加
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

CSS3ジェネレーターを Firefox に搭載する CSSsir 0.1.20120618

  • このエントリーをはてなブックマークに追加
簡単にCSS3プロパティを作成するCSS3ジェネレーターをFirefoxに搭載する CSSsir 0.1.20120618最近、Hideのギターサウンドに似た音作りに夢中な管理人です。エフェクターはG2.1Nuです。


今回は、プレビューしながら簡単にCSS3プロパティを作成するCSS3ジェネレーターをFirefoxに搭載する アドオンをインストールしました。オフラインでも使用できましたよ。




CSSsir 0.1.20120618

CSSsir」は、プレビューしながら簡単にCSS3プロパティを作成するCSS3ジェネレーターをFirefoxに搭載する アドオンです。

CSSsir :: Add-ons for Firefox

CSS3プロパティの値をプレビューしながらマウス操作(スライダー)でかんたんに指定し作成できます。
また、CSS3プロパティには各ブラウザに対応したベンダープレフィックスが付けられるのでそのままコピーしてスタイルシートに貼り付ける事ができます。

以下、実際に使ってみた様子です。




プレビューしながらマウス操作で簡単にCSS3プロパティを作成できます

プレビューしながらマウス操作で簡単にCSS3プロパティを作成できます - CSSsir 0.1.20120618

CSSsir」をインストールするとツールバーに ボタンボタン - CSSsir 0.1.20120618 が追加され、ボタン右側の をクリックすると各ジェネレーター一覧を表示して、選択するとジェネレーターがポップアップ表示されます。



ジェネレーター一覧
  • Text-shadow - テキストに影を付ける
  • RGBA - RGBAカラーで色を指定する
  • Text-rotation - テキストを回転させる
  • Transform - 要素を変形する
  • Box-shadow - ボックスに影をつける
  • Border-radius - ボックスのコーナーの角丸を指定する
  • Multiple Columns - 段組み
  • Gradient - グラデーション
  • Bonus - セレクタやCSSハックが記載されています



Text-shadow

CSSsir 0.1.20120618

Text-shadowテキストに影を付けるCSS3プロパティ です。

プレビューを見ながらスライダーを使い以下の 値 を指定すると Code 欄に各ブラウザに対応したベンダープレフィクス付きのコードが生成されます。

  • 水平(Horizon length)
  • 垂直(vertical length)
  • ぼかし(Blur Radius)
  • 影の色(Shadow Color)



RGBA

CSSsir 0.1.20120618

RGBARGBAカラーで色を指定します

プレビューを見ながらスライダーを使い以下の 値 を指定します。

  • R(赤)
  • G(緑)
  • B(青)
  • Opacity(透過)



Text-rotation

CSSsir 0.1.20120618

Text-rotationテキストを回転させるCSS3プロパティ です。

プレビューを見ながらスライダーを使い rotate(回転度) を指定します。



Transform

CSSsir 0.1.20120618

Transform要素を変形させるCSS3プロパティ です。

プレビューを見ながらスライダーを使い以下の 値 を指定します。

  • rotate(回転度)
  • Scale(縮尺)
  • Skew(斜め)
  • Translate(表示位置)



Box-shadow

CSSsir 0.1.20120618

Box-shadowボックスに影をつけるCSS3プロパティ です。

プレビューを見ながらスライダーを使い以下の 値 を指定します。

  • 水平(Horizon length)
  • 垂直(vertical length)
  • ぼかし(Blur Radius)
  • 影の色(Shadow Color)



Border-radius

CSSsir 0.1.20120618

Border-radiusボックスのコーナーの角丸を指定するCSS3プロパティ です。

プレビューを見ながらスライダーを使い以下の 値 を指定します。

  • Style(線種)
  • Width(線の太さ)
  • Radius T-Left(角丸 - 上部左)
  • Radius T-Right(角丸 - 上部右)
  • Radius B-Left(角丸 - 下部左)
  • Radius B-Right(角丸 - 下部右)
  • Color(線色)



Multiple Columns

CSSsir 0.1.20120618

Multiple Columns段組みを指定するCSS3プロパティ です。

プレビューを見ながらスライダーを使い以下の 値 を指定します。

  • Column's count(カラム数)
  • Column Gap(カラムの間隔)
  • Column rule(カラムの区切り線スタイル)



Gradient

CSSsir 0.1.20120618

Gradientグラデーションを指定するCSS3プロパティ です。

プレビューを見ながらスライダーを使い以下の 値 を指定します。

  • Orientation(方位)
  • From(グラデーション開始色)
  • to(グラデーション終了色)



Bonus

CSSsir 0.1.20120618

Bonus では CSSのセレクタやハックが記載されているのでわからない時などすぐ確認できます。

※ 参考 HTMLクイックリファレンス




インストールページ

関連記事
-0 comments
管理者にだけ表示を許可する
-0 trackbacks