>> 
CSS3 グラデーションコードを自動生成してくれる Firefoxアドオン gradientoo 0.4
 >> 
CSS3 グラデーションコードを自動生成してくれる Firefoxアドオン gradientoo 0.4

スポンサーサイト

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

CSS3 グラデーションコードを自動生成してくれる Firefoxアドオン gradientoo 0.4

  • このエントリーをはてなブックマークに追加
CSS3 グラデーションコードを自動生成してくれる Firefoxアドオン HTML Color Coder 1.0あけましておめでとうございます。本年もどうぞよろしくお願い致します。

今回は、Firefox に CSS3 グラデーションジェネレータ 機能を装備し、CSS3 グラデーションコード を自動生成できるFirefoxアドオンをインストールしました。



インストールページのリンクが間違っていました。大変申し訳ありませんでした。




gradientoo 0.4

gradientoo」は CSS3グラデーションコード を自動生成してくれる Firefoxアドオン です。CSS3のグラデーション ジェネレータですね。

gradientoo :: Add-ons for Firefox

色見本を使いプレビューで確認しながら各ブラウザに対応されたCSS3のグラデーションコードを生成できます。以下、実際に使ってみた様子です。




ブラウザ画面上にグラデーションジェネレータを表示

HTML Color Coder 1.0

インストールするとアドオンバー右端にボタンが追加されます。そのボタンをクリックするとブラウザ画面上に グラデーション ジェネレータ が表示されます。

▼ ブラウザ画面上のグラデーションジェネレータ

HTML Color Coder 1.0





グラデーション ジェネレータ

HTML Color Coder 1.0

HEX、RGB、色見本 で色を指定し、グラデーションの上下を切り替えてプレビューで確認しながら作成できます。



HTML Color Coder 1.0

グラデーション ジェネレータ 下部の Lighter colorDarker color をクリックするとグラデーションの上下を切り替える事ができます。

Advanced Gradientoo をクリックすると新しいタブに公式サイトが表示されます。
Generate CSS Gradient Backgrounds Without Using Images



HTML Color Coder 1.0

グラデーションで指定後に自動生成されたコードの上でクリックするとクリップボードへコピーされます。



background-color:#ffffff;
background-image:-webkit-linear-gradient(top,rgb(255,255,255)3.1%,rgb(138,138,138)94.2%);background-image:-moz-linear-gradient(top,rgb(255,255,255)3.1%,rgb(138,138,138)94.2%);
background-image:-o-linear-gradient(top,rgb(255,255,255)3.1%,rgb(138,138,138)94.2%);
background-image:-ms-linear-gradient(top,rgb(255,255,255)3.1%,rgb(138,138,138)94.2%);
filter:progid:DXImageTransform.Microsoft.Gradient (startColorstr='#ffffff',endColorstr='#8a8a8a',GradientType=0);
/*To add gradient to whole background (for non-IE browsers), add this line in your css file : html {min-height:100%;} and (for IE)also define height of body element by 'height: ' attribute . Then add above gradient code in body tag.*/
上記は生成されたコードです。わかりやすくするために改行を入れました。
各ブラウザに対応するベンダープレフィックス付きで生成されます。あとはスタイルシートに貼り付けて CSS3 グラデーション の完成です。




インストールページ

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