CSSエフェクト

CSSエフェクト

角丸

CSSで角を丸くするエフェクト処理です。

border-radius:0~100px;
background-clip:padding-box;(角丸部分がにじむ場合は追加)

透過

CSSで透明にするエフェクト処理です。

opacity:0~1;(小数点も使用可能)


動的なCSSエフェクト

アクティブボタンの利用方法

現在表示中のページのボタンを変更する方法です。
表示中のボタン色を変更する事で、現在地を視覚的に判断しやすくできます。

  1. HTML:現在地のボタンだけclassやidをclass="active"id="active"に変更する
  2. CSS:.active {色、画像、サイズなどを指定する}、#active {色、画像、サイズなどを指定する}

マウスオーバーで表示を変化させる

ロールオーバーはマウスカーソルを画像や文字の上に移動した時に変化させる手法です。
CSSの場合はa:hover、display:block、スペイサーGIF(空要素回避用)、画像2種で作成できます。
spacer.gif

CSSの書式1:.rollover a {display:block; width:通常時の画像の横幅; height:通常時の画像の縦幅; background:url(通常時の画像ファイルのパス);}
CSSの書式2:.rollover a:hover {width:変化時の画像の横幅; height:変化時の画像の縦幅; background:url(変化時の画像ファイルのパス);}
HTMLの書式:<div class="rollover"><a href="変化時の画像ファイルのパス"><img src="spacer.gifのパス" alt=""></a></div>

その他の動的CSSテクニック

その他の動的CSSテクニック情報です。
CSSアニメーション

オンラインPC館
トップページテクニックウェブ制作 → CSSエフェクト