こんにちは！
10月インターン生のOigamiです！
はやいものでインターンが始まって2週間経ちました。
コーディングでつまずき、図書館サイトも制作も滞っております。
そんな中、CSSで簡単に色々な効果を付けることが出来ましたので、紹介しておきます
マウスオーバーした時の効果
グローバルナビ、バナーなど、マウスオーバーした時に画像が差し替わる
よく使いますよね。
私は今までは画像を2枚用意して、それが差し替わる様にコーディングしてたんです。
CSSだけで画像に白い半透明のマウスオーバー
先人たちは偉大ですね。
こんな簡単に出来るとは思ってなかった・・・
html
<p id=”sample”><a href=”#”>
<img src=”sample.jpg” width=”640″ height=”480″ alt=”透明” />
</a></p>
普通にまず、画像を載せます
css
#sample a:hover img{
opacity: 0.7;
filter: alpha(opacity=70);
-ms-filter: “alpha(opacity=70)”;
}
「＃sample」のa要素がhoverした際のimgに対するスタイルが効くようにセレクタを書いています(赤字)
opacity: 0.7; でimgの透明度を指定します
filter: alpha(opacity=70);はIE用の指定で、IEにも対応するようになってます。
この設定だけで、今までは元画像と透明の画像の2枚を用意していたのが、画像一枚でCSSだけで同じように表現できます。
マウスオーバーすると画像透明のフィルターがかかったように少しぼけます。
マウスオーバーした時に文字を変える
図書館サイト作成でも使用しているのですが、マウスオーバーで文字が変わるCSSも紹介しておきます
英語表記の文字をマウスオーバーした時に日本語になる。みたいな使い方で重宝します
ｈｔｍｌ
<ｐ id=”sample01″><a href=”place/index.html”>
<span id=”sample01Off”>Sample</span>
/*元から表示されている文字*/
<span id=”sample01On”>サンプル</span></a></ｐ>
/*ホバーして出てくる文字*/
CSS
#Sample01Off{
display:inline;
}
#sample01:hover #sample01Off{
display:none;
}
#sample01On{
display:none;
}
#sample01:hover #sampleOn{
display:inline;
}
簡単に言うと通常時(マウスオーバー無し)には
「sample」という文字はdisplay:inline;を入れる事で表示していて
「サンプル」という文字はdisplay:noneで隠しています
逆にマウスオーバー時には
「sample」という文字はdisplay:noneで隠して、
「サンプル」という文字はdisplay:inline;を入れる事で表示されるようになります。
少しややこしいですが、今後もこれは使えそうかなと思います
まだまだ知らない事がたくさんありそうですね。
奥が深い・・・
ここまで読んでくださってありがとうございました
by Oigami