2012年7月15日日曜日
最近色々CSS事でググっても
なかなかヒットしない情報があったので
ここで紹介したいと思います。
【マウスを当てると換わる効果】
CSSの指定でhoverを使うとマウスがあたると変わる効果を
指定できます。
例えば メニューにマウスを当てると背景が変わったり
画像にマウスを当てると画像が拡大するとか
CSSで出来る事なら何でも出来ます。
使い方例
このCSSは、背景を変えるCSSです
画像の周りの境界線の色を変える場合のCSS
【リンク文字の下線消去とリンク色変更】
下線消去
リンクの色は、普通に字の色指定といっしょです。
なかなかヒットしない情報があったので
ここで紹介したいと思います。
【マウスを当てると換わる効果】
CSSの指定でhoverを使うとマウスがあたると変わる効果を
指定できます。
例えば メニューにマウスを当てると背景が変わったり
画像にマウスを当てると画像が拡大するとか
CSSで出来る事なら何でも出来ます。
使い方例
#mame:hover{ background-color: #FF00FF; }
このCSSは、背景を変えるCSSです
画像の周りの境界線の色を変える場合のCSS
<style type="text/css">
img{ border-width: 10px; border-color: #66FFFF; border-style: solid; }
img:hover{ border-width: 10px; border-color: #FF00FF; border-style: solid; }
</style>
img{ border-width: 10px; border-color: #66FFFF; border-style: solid; }
img:hover{ border-width: 10px; border-color: #FF00FF; border-style: solid; }
</style>
【リンク文字の下線消去とリンク色変更】
下線消去
<style type="text/css">
a{ text-decoration: none; }
</style>
a{ text-decoration: none; }
</style>
リンクの色は、普通に字の色指定といっしょです。
