Webリンクの輝く下線を作成する

あなたは彼らが何を言うか... ... デザインは細部に宿る 。 いつのウェブサイトを設計している、ある機会はほとんど詳細を視覚的に利便性を高めるに集中することも多い。 このチュートリアルでは、どのように下線付きのリンクを作成する方法が表示されますは、"グロー"。

1。 フォトショッピンググロー：アニメーションGIF

新しいPhotoshopドキュメントを開きます。 その高さが1pxにします。 技術的には、我々はドキュメントのみ1pxワイドすぎると、しかし、この操作を行うことが簡単に私たちがやっている、この例では15px幅を参照するようにします。 ズームので、見ることができる、より良いとは、Window"アニメーションパレットを開きます。

ご希望の輝きの色を使用して文書領域の塗りつぶし、私はここでは濃い赤を使用。 また、層であることを確認するウィンドウでのロック解除"レイヤーパレット。 場合は、ダブルクリックするだけにロックが解除されます。 アニメーションパレットをクリックして、小さなストップウォッチ不透明度の横にあるレイヤ1の今の矢印をクリック。

今は、アニメーションパレットを転送する方法の上部にある青い矢印をドラッグします。 そう遠くない...遠くに引っ張ってあなたの輝きが遅くなります。 タイミングで試すことができます。 タイムラインにポインタをリードするような方法により、レイヤーパレットの下での層の0（ゼロ）に不透明度を調整します。 あなたは、新しいダイヤを参照してくださいタイムラインの場合は、不透明度を示すためには変更されて表示されます。 これら2つのダイヤモンドを当面の間、その層がこれら2つの透明度の間で自動的に"トゥイーン"、100、0％の透明性の間に段階的な移行を作成します。

今すぐ前にもう一度、あなたの前にいたのと同じamoundタイムポインタを移動してバックアップを100に不透明度を調整します。 それだよ！ 今、あなたはフェードアウトするアニメーションアウトとフェードして、この小さなラインです。

今、"Webおよびデバイス用のファイル"メニュー（下）を保存します。 GIFのオプションを選択することを確認します（これは、アニメーションをサポートする唯一のグラフィック形式）です。 右下では、"永遠に"ループオプションとして選択してください。

として"グローunderline.gif"あなたのWebプロジェクトのディレクトリの画像フォルダ内にファイルを保存します。

ここでは、最終的な製品です：

2。 マークアップ

チュートリアルのために、我々の輝き- Yをリンクに独自のクラスを適用するつもりだ。 ここでのリンクを使用した例の段落です：

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <a class="glow-hover" href="#">this link underline glows on hover</a> ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat <a href="#" class="glow">this link glows all the time</a>, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

通知は、この段落の2つのリンクは、1つの"グローホバー"のクラスと1つ"グロー"のクラスを使用しています。 これは異なる2つの可能性を示すことです。 グロー、私たちの唯一のときに、リンクを介してロールバックされるまでを見る下線輝くになるホバークラスです。 我々はすべての時間が下線輝く朝焼けのクラスがあります。

場合、実際の制作で使用する場合、特定のクラスを使用していない検討したいが、可能性だけで、直接全てを見る（）要素のアンカーには、このスタイルを適用する。 にも賢いと、お客様のメインのコンテンツ領域では良い考えかもしれない要素をアンカーするので、ここでそれらをしたくない輝く下線を取得しないに適用する！

3。 CSSの

私たちはクラスに背景画像を右に適用当社の"グロー"クラスは、必ずその下に整列し、x軸に沿って繰り返しをしてください。 のためのアンカー要素が、これは素晴らしいです複数行にわたって場合でも、リンクが切断作業をするインライン要素です。

私たちの"輝きは、ホバーしか：hover擬似クラスで背景画像を適用する"クラス（ただし、正確に同じ方法で）、これだけは、光ることが表示さを強調するときに、リンク上で推移している。

 a   { color: #3366cc; text-decoration: none; } .glow   { background: url(images/glow-underline.gif) bottom repeat-x; color: black; } .glow:hover  { color: #3366cc; } .glow-hover:hover { background: url(images/glow-underline.gif) bottom repeat-x; color: black; } 

例

迅速なライブたとえば、アクションでこれらのリンクを参照してくださいには、 ここをクリック 。