CSS Rollover

2008/03/09 1 コメント カテゴリ: DESIGN

cssCSSでタブブロックのロールオーバー 使用画像2個 タブブロックを横に4つ並べているところがカッコイイ

via: Kansas City Homes for Sale | Prudential Kansas City Real Estate

via: CSS hover effect | Veerle's blog

:) サンプル

CSS:
  1. #differences {
  2. margin:0.5em 0 1.5em 0;
  3.  padding:0;
  4.  list-style:none;
  5. width:100%;
  6. float:left;
  7. }
  8. #differences li {
  9. margin:0 18px 0 0; padding:0;
  10. float:left;
  11. background:url(/images/diff-tabs-top-wide.gif) no-repeat 0 0;
  12.  }
  13. #differences li#diff-4 {
  14. margin-right:0;
  15. }
  16. #differences div {
  17.  font-size:0.94em;
  18. padding:6px;
  19.  background:url(/images/diff-tabs-bottom-wide.gif) no-repeat 0 100%;
  20. }
  21. #differences li:hover {
  22. background-position:-156px 0;
  23.  }
  24. #differences li:hover div {
  25.  background-position:-156px 100%;
  26. }

1 レスポンス

コメントする
  1. I found your site on technorati and read a few of your other posts. Keep up the good work. I just added your RSS feed to my Google News Reader. Looking forward to reading more from you.

    Eric Hundin

    Eric Hundin 2008 3 9 at 00:32 パーマリンク

コメントをどうぞ

Commenter Gravatar