CSS Gradient Generatorの紹介

CSS Gradient Generatorは、ウェブデザインにおいて重要な役割を果たす便利なツールです。このアプリケーションは主に4つの部分から構成されています。

グラデーションリスト

左側にはレイヤーのリストがあります。このリストに少なくとも1つのレイヤーがある場合、ボタンをクリックすることで最終的なコードをダウンロードできます。このパネルでは、レイヤーの順序を管理し、削除し、表示をオフにすることができます。特定のレイヤーが不可視に設定されている場合、最終的なコード生成時にそれは考慮されません。レイヤーをクリックすると、アプリケーションの下部に設定パネルが表示されます。

レイヤー設定パネル

画面下部のレイヤーパネルで特定のレイヤーをクリックすると、設定パネルが表示されます。このパネルの左上隅には、グラデーションのタイプを設定するためのボタンがあります。その隣には、グラデーションのサイズ、繰り返し、全体の透明度、ブレンドモードなどの設定パネルを開くボタンがあります。入力欄の値は、タイピング、マウスホイールを使う、またはフィールドをクリックしてカーソルを上下にドラグすることで変更できます。このパネルのタイトルの隣にはアイコンがあり、クリックするとメニューが表示され、そこで特定のレイヤーの設定を他のレイヤーに適用することなどができます。パネルの上部の端をつかむと、全体のパネルを移動できます。その隣には、スライダーに自動的にポイントを追加するパネルを開くボタンがあります。パネルの主要な部分はグラデーションスライダーで占められています。スライダーの特定のポイントをダブルクリックすると、新しいポイントを追加できます。ポイントはマウスまたは矢印キーで移動でき、Ctrlキーを使って複数のポイントを選択できます。スライダーの上の右隅にはいくつかのボタンがあります。これらのボタンを使って、スライダー上の次/前のポイントを選択できます。また、選択したポイントでグラデーションを切断することもでき、これは選択したポイントで滑らかな遷移を無効にしたい場合に便利です。また、選択したポイントの左/右側に単色を設定することもでき、また、選択したポイントから色をコピー/貼り付けることもできます。これらの操作は適切なキーを使って行うことができ、最善の方法はこのヘルプのキーボードタブを見ることです。さらに、ボタンを使ってスライダーの精度モードをオンにすることもできます。

メインボード

左側のパネルからレイヤーを選択すると、メインボードでその焦点、グラデーションの方向、およびグラデーションの位置を設定できます。これらのオプションは、与えられたグラデーションのタイプとそのサイズに応じて利用可能です。与えられたオプションはメインボードの下部に表示されます。ボードの下部に表示されているキー（Q、W、E）を使って他のモードに切り替えることができます。また、マウスキーを使ってこれらのモード間を切り替えることもできます。デフォルトでは、左キーはグラデーションの中心点を移動するために使われ、右キーはグラデーションを回転するために使われます。また、Sキーを使ってグリッドとスナップモードをオン/オフすることができます。

ライブラリ

ライブラリは保存された作品を保存するために使われます。アイコンをクリックすると表示できます。少なくとも1つのレイヤーを作品に追加すると、現在の全体の作品をライブラリに保存できます。ライブラリリストの項目をクリックすると、そのレイヤーが現在の作品に追加され、既存のレイヤーは削除されません。作品を続けて作業し、それを新しい要素としてライブラリに保存することができます。ライブラリの右上隅にはメニューアイコンがあります。このメニューではいくつかのオプションがあります。最初のオプション「ライブラリを管理する」は、新しいグループを追加し、既存のグループを名前を変更し、またはグループ間で項目をドラグすることを可能にします。インポートとエクスポートは、ファイルから選択した要素をインポートし、ファイルにエクスポートすることを可能にします。このメニューの最後のオプションは、オンラインライブラリを開くことを可能にします。このパネルから、他のユーザーが作成した要素を追加できます。自分の作品を共有したい場合、オンラインライブラリパネルの上部のテキスト内のリンクをクリックして開くことができる追加のフォームを使うことができます。