[CSS]スクリプトや画像を使用しないで、さくさく動作するニュースボックスを実装するチュートリアル

省スペースにぴったり！ 複数のパネルをマウスホバーで表示を切り替えるニュースボックスを実装するスタイルシートを紹介します。 CSS3 Easy Newsbox [ad#ad-2] 対応ブラウザはIE6/7/8/9, Firefox, Chrome, Safari, Operaとのことで、CSS3対応ブラウザでもっとも期待通りに表示されます。 ※当方のIE6では期待通り動作しませんでした。 下記はCSS3対応ブラウザ：Firefox4でのキャプチャです。 角丸、ドロップシャドウ、グラデーションが適用されています。 デモページ：IE7で表示 IE7では、角丸やドロップシャドウやグラデーションは適用されませんが、各パネルの切り替え表示には対応しています。 [ad#ad-2] ニュースボックスの実装 HTML 各パネルはa要素で実装されており、div要素で内包します。 <div id="newsb

[inthesoup]

右側の各ラベルをマウスホバーすると、それに対応した写真画像が表示されます

[hr07jp]

CSSでニュースBOXを作成

[nors]

http://www.kollermedia.at/archive/2011/05/29/css3-easy-newsbox/

[Donca]

✔ [CSS]スクリプトや画像を使用しないで、さくさく動作するニュースボックスを実装するチュートリアル