スポンサーサイト

--/--/-- --:-- | カテゴリ:スポンサー広告

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

リンク文字の効果的表現

2006/09/10 22:13 | カテゴリ:htmlタグ | コメント (0) | トラックバック (0)

スタイルシートを利用してリンク文字を効果的表現にすることができます。
飾りとしても、リンクを強調するためにしても、使ってみると面白いと思います。

1.マウスが乗った時に色が変わるリンク文字
2.マウスが乗った時に浮き沈みするリンク文字
3.擬似ボタンリンク

1.マウスが乗った時に色が変わるリンク文字
a:hover{ color : ○○ }
○○にはカラーコードが入ります。
a:hover はマウスが乗ったときの表示方法を示します。他の a:link、a:visited、a:active と違う色を指定することで色が変わるリンク文字を表現します。


2.マウスが乗った時に浮き沈みするリンク文字
a:hover { position : relative; left(right) : 移動サイズ; top(bottom) : 移動サイズ; }
 left:右へ right:左へ top:下へ bottom:上へ 移動

【サンプルコード】
a:hover{ position : relative; left : 3px; top : 3px; }
このサンプルでは、右へ 3px、下へ 3px 移動します。
マウスが乗ったとき沈むリンク文字ができます。

3.擬似ボタンリンク
a {backgroud-color:○○;border-style: outset;}
a:hover {backgroud-color:○○;border-style:inset;}
基本リンク文字を outset で内容が浮き上がる枠線を表示し、マウスが乗ったときに inset で内容が沈む枠線を表示しています。
後は、背景色・枠線の太さを指定することでボタンのように表示されます。

【サンプルコード】
a {background-color:#FFFF66;border:5px outset;text-align:center;text-decoration:none;}
a:hover {background-color:#ffcc00;border:5px inset;}
基本リンク文字の背景を黄色、枠線太さを 5px に、文字をセンター配置、下線なしで表示しています。
マウスが乗ったときは、オレンジで少し暗めの色を指定して、沈んだ感じを強調しています。
一部リンク文字のみ表現したい場合は、セレクタを付けましょう。(.botton a {}、a.boton{~}など)

追加コンテンツ:HTML応用編 リンクの効果表現

スポンサーサイト

<< html 擬似フレーム | ホーム | エーハチやっててよかった!と思った瞬間 >>


コメント

コメントの投稿


管理者にだけ表示を許可する

 BLOG TOP 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。