使い方
- グラデーションタブまたはボタンタブを選びます。
- コントロールを調整しながらライブプレビューを確認します。グラデーションは色・角度・種類、ボタンはテキスト・色・パディング・角の丸みを調整します。
- コードブロックの上にあるコピーアイコンをクリックし、スタイルシートに貼り付けます。
グラデーションタブでは、2色から背景を作ります。線形グラデーションと円形グラデーションから選べます。線形グラデーションには0~360度の角度スライダーがあります。円形を選ぶと、1色目から2色目へ向かう円形のグラデーションになります。プレビューの下のコードは、角度と2つのカラーストップを持つ linear-gradient のような単一の background 宣言で、そのまま貼り付けて使えます。
ボタンタブでは、custom-button というクラスの完全なルールを出力します。プレビュー用のラベルテキスト、背景色、文字色、横方向と縦方向のパディング(それぞれ0~100px)、角の丸み(0~50px)を設定します。生成されるCSSには、選んだ色、パディング、丸みに加えて、枠線なし、ポインターカーソル、中程度の太さのフォント、短い不透明度のトランジション、不透明度をわずかに下げるホバールールが含まれます。
色はカラーコントロールで選ぶか、テキストで入力できます。出力はベンダープレフィックスやフレームワークのない通常のCSSなので、どのプロジェクトでも使え、さらに編集できます。このツールは、カラーストップが3つ以上のグラデーションには対応していません。
サーバーには何も送信されません。プレビューとコードは、入力に合わせてブラウザ上で生成されます。
よくある質問
3色以上のグラデーションを作れますか?
いいえ。このツールは2色を使います。コピーしたCSSを編集すれば、ストップを追加できます。
角度コントロールは何をしますか?
線形グラデーションの方向を度単位で設定します。常に円形の円形グラデーションでは非表示になります。
ボタンCSSのクラス名は何ですか?
生成されるルールは custom-button クラスを使っており、プロジェクトに合わせて名前を変更できます。
ボタンにホバースタイルは追加されますか?
はい。コピーしたCSSには、不透明度を0.9にするホバールールが含まれます。
入力内容はアップロードされますか?
いいえ。CSSはブラウザ上で作成されます。