Digital Life ~デジタルライフ~(Field)

PREV | PAGE-SELECT | NEXT

≫ EDIT

スポンサーサイト

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

| スポンサー広告 | --:-- | comments(-) | trackbacks(-) | TOP↑

≫ EDIT

触れると文字が変化 スタイルシート

 触れるとリンク文字が変化する。リンク文字に効果を与える。その①

※このスタイルシートはヘッダ、または外部リンク用のCSSファイルに記述してください。

<style type="text/css">
<!--

a{text-decoration:none;}
-->
</style>


リンクに付く下線を消します。 ※以降オレンジ部分は略します






a:link{color:通常文字色;}
a:active{color:クリック瞬間文字色;}
a:visited{color:リンク後文字色;}
a:hover{color:触れた時の色;text-decoration:none;}


触れるとリンクの下線が消えます。






a{text-decoration:none;}
a:link{color:通常文字色;}
a:active{color:クリック瞬間文字色;}
a:visited{color:リンク後文字色;}
a:hover{color:触れた時の色;text-decoration:underline;}


リンク文字に触れると下線出現します。






a:link{color:普通文字色;}
a:visited{color:リンク後文字色;}
a:active{color:クリック中文字色;}
a:hover{border-bottom:線の太さpx 線の種類 線の色;}


リンク文字に触れると色付きの下線を出現させます。

 線の種類









a:link{color:普通文字色;font-size:普通文字サイズpt;}
a:active {color:クリック瞬間の文字色;font-size:クリック瞬間のサイズpt;}
a:visited{color:リンク後文字色;font-size:リンク後文字サイズpt;}
a:hover{color:触れた時の色;font-size:触れた時のサイズpt;}


リンク文字に触れると文字の大きさが変化します。







a:link{color:普通文字色;}
a:active {color:クリック瞬間文字色;}
a:visited{color:リンク後文字色;}
a:hover{font-weight:bolder;color:触れた時の文字色;}


リンク文字に触れると太字になります。







a:link{color: 普通文字色;}
a:active{color: クリック瞬間文字色;}
a:visited{color: リンク後文字色;}
a:hover{font-style: italic;color: 触れた時の文字色;}


リンク文字に触れると斜体になります。








サイト上部へ↑  トップページへ



 触れるとリンク文字が変化する。リンク文字に効果を与える。その②

※このスタイルシートはヘッダ、または外部リンク用のCSSファイルに記述してください。

<style type="text/css">
<!--
a:link{color:普通文字色;}
a:active{color:クリック瞬間文字色;}
a:visited{color:リンク後文字色;}
a:hover{color:触れた時の文字色;filter:Glow(color='まわりの色',strength='数字');position:absolute;}

-->
</style>

リンク文字に触れると発光します。 ※以降オレンジ部分は略します







a:link{color:普通文字色;}
a:active{color:クリック瞬間文字色;}
a:visited{color:リンク後文字色;}
a:hover{color:触れた時の文字色;background-color:触れた時背景色;}


リンク文字に触れると背景に色が付きます。








a:link{color:普通文字色;}
a:active {color:クリック瞬間文字色;}
a:visited{color:リンク後文字色;}
a:hover{background-image:url("画像のURL");position:relative;}


リンクに触れると背景に画像。







a{text-decoration:none;}
a:link{color:普通文字色;}
a:active {color:クリック瞬間文字色;}
a:visited{color:リンク後文字色;}
a:hover{color:触れた時の文字色;border:線の太さpx 線の種類 色;}


リンクに触れると額縁。

 線の種類










サイト上部へ↑  トップページへ



 触れるとリンク文字が変化する。リンク文字に効果を与える。その③

※このスタイルシートはヘッダ、または外部リンク用のCSSファイルに記述してください。

<style type="text/css">
<!--
a:link{color:普通文字色;}
a:active{color:クリック瞬間文字色;}
a:visited{color:リンク後文字色;}
a:hover{border-top:上線の太さpx 上線の種類 上線の色;border-bottom:
下線の太さpx 下線の種類 下線の色;}

-->
</style>


リンクに触れると上下線。 ※以降オレンジ部分は略します

 線の種類








a:link{color:普通文字色;}
a:active{color:クリック瞬間文字色;}
a:visited{color:リンク後文字色;}
a:hover{color:触れた時の文字色;border-right:線の太さpx 線の種類 右線色;
border-left:線の太さpx 線の種類 左線色;}


リンクに触れると左右線。







a:link{color:普通文字色;}
a:active{color:クリック瞬間文字色;}
a:visited{color:リンク後文字色;}
a:hover{color:触れたときの文字色;border:枠の太さpx 枠の種類 枠の色;}


リンクに触れると囲み線。







a:link{color:リンク文字色;text-decoration:none;}
a:active {color:クリック瞬間文字色;text-decoration:none;}
a:visited{color:リンク後文字色;text-decoration:none;}
a:hover{color:リンクに触れた時の文字色;text-decoration:underline;
border-bottom:下線の太さpx 下線の種類 下線の色;}


リンクに触れると二重線。







a:link{color:最初の文字色;}
a:active{color:クリック中の文字色;}
a:visited{color:リンク後の文字色;}
a:hover{position:relative;top:下へずれる大きさの数字px;left:右にずれる数字px;}


リンクに触れるとへこむ。








| CSSスタイルシート | 17:52 | comments(-) | trackbacks(-) | TOP↑

PREV | PAGE-SELECT | NEXT

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