このボタンは、web上で最も普遍的な要素です。モダンなwebデザインでは、ボタンは、フォームだけではなく、ページの重要な要素に注意を向ける視覚的な補助としても使用されます。CSSスプライトを使用するシンプルなボタンを作る方法を見ていきましょう。Photoshopから始まり、コードサンプルで終わります。
この記事は、初心者必見の記事です。
これから作成するボタンは、絶妙なグラデーションとアウトラインを使用した伝統的なスタイリングで、丸みを帯びた立体的なオブジェクトの印象を与えます。
ボタンは、アップ/ノーマル状態、視覚的な手がかりを与えるホバー状態、
および現実感の要素を与える押された状態の３つの状態も使用し、
ボタンを実際の生活の中でボタンのように機能します。
Photoshop作業を開始し、Rounded Rectangle Toolを使用し、オプションバーに大きな半径の図形を入力し、キャンバスに図形をドラッグします。
ダブルクリックし、Layer Styles windowを開きます。Gradient Overlayというスタイルを追加します。色を調整し、#a8a8a8から#ffffffへフェードインします。
次に、ボタンをストロー
スポンサーリンク
【初心者必見！】CSSスプライトでシンプルなボタンを作る方法
マーケティング最新
コメント