• RSS

[CSS]CSS3 のグラデーション用ジェネレータ「Ultimate CSS Gradient Generator」が超便利

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

イラレやフォトショでデザインしたグラデーションのボタンなどを、CSS3 のグラデーションに落とし込む時などに使えるサービスが「Ultimate CSS Gradient Generator」です。

カラーピッカーとグラデーションバー付きで分かりやすく、しかもグラデーションの方向やカラーフォーマットも指定できますし、出来上がったソースコードをCSSファイル内にコピペするだけなので便利です。

Ultimate CSS Gradient Generator へアクセス

[CSS]CSS3 のグラデーション用ジェネレータ「Ultimate CSS Gradient Generator」が超便利

以下のページから Ultimate CSS Gradient Generator へアクセスします。


グラデーションの設定

グラーデーションのサンプルもいくつか用意されていますので、そのまま使うのも良いですし、
[CSS]CSS3 のグラデーション用ジェネレータ「Ultimate CSS Gradient Generator」が超便利

カラーとグラデーションの位置を直接入力することもできます。
[CSS]CSS3 のグラデーション用ジェネレータ「Ultimate CSS Gradient Generator」が超便利

オプションとして、「Orientation」の選択肢よりグラデーションの向き(水平か垂直か)も指定できます。
[CSS]CSS3 のグラデーション用ジェネレータ「Ultimate CSS Gradient Generator」が超便利

カラー「Color format」の選択肢より RGBa での設定も可能です。
[CSS]CSS3 のグラデーション用ジェネレータ「Ultimate CSS Gradient Generator」が超便利

「switch to scss」のリンクをクリックすることで、 SCSS (Sass) のコードも表示できます。
[CSS]CSS3 のグラデーション用ジェネレータ「Ultimate CSS Gradient Generator」が超便利

出来上がったソースコードをCSS ファイルにコピペすれば、簡単にグラデーションが実現できます。



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください