イラレやフォトショでデザインしたグラデーションのボタンなどを、CSS3のグラデーションに落とし込む時などに使えるサービスがUltimate CSS Gradient Generatorです。
カラーピッカーとグラデーションバー付きで分かりやすく、しかもグラデーションの方向やカラーフォーマットも指定できますし、出来上がったソースコードをCSSファイル内にコピペするだけなので便利です。
Ultimate CSS Gradient Generator へアクセス
![[CSS]CSS3のグラデーション用ジェネレータ「Ultimate CSS Gradient Generator」が超便利](https://webantena.net/wp-content/uploads/2013/06/gradientgenerator01.png)
以下のページからUltimate CSS Gradient Generatorへアクセスします。
Ultimate CSS Gradient Generator
グラデーションの設定
グラーデーションのサンプルもいくつか用意されていますので、そのまま使うのも良いですし、![[CSS]CSS3のグラデーション用ジェネレータ「Ultimate CSS Gradient Generator」が超便利](https://webantena.net/wp-content/uploads/2013/06/gradientgenerator02.png)
カラーとグラデーションの位置を直接入力することもできます。
![[CSS]CSS3のグラデーション用ジェネレータ「Ultimate CSS Gradient Generator」が超便利](https://webantena.net/wp-content/uploads/2013/06/gradientgenerator03.png)
オプションとして、「Orientation」の選択肢よりグラデーションの向き(水平か垂直か)も指定できます。
![[CSS]CSS3のグラデーション用ジェネレータ「Ultimate CSS Gradient Generator」が超便利](https://webantena.net/wp-content/uploads/2013/06/gradientgenerator04.png)
カラー「Color format」の選択肢より RGBa での設定も可能です。
![[CSS]CSS3のグラデーション用ジェネレータ「Ultimate CSS Gradient Generator」が超便利](https://webantena.net/wp-content/uploads/2013/06/gradientgenerator05.png)
「switch to scss」のリンクをクリックすることで、 SCSS (Sass)のコードも表示できます。
![[CSS]CSS3のグラデーション用ジェネレータ「Ultimate CSS Gradient Generator」が超便利](https://webantena.net/wp-content/uploads/2013/06/gradientgenerator06.png)
出来上がったソースコードをCSS ファイルにコピペすれば、簡単にグラデーションが実現できます。
コメント