今回のネタは、box-shadow を使った、ちょっと面白い演出とデザインの紹介です。
box-shadow は現在、最初に書かれていた仕様の CSS Backgrounds and Borders Module Level 3 からは削除されおり、まだ策定中の段階ですが、先日リリースされた Opera10.50 ではベンダープレフィクスが取れた状態で使用できるようになっています。（なぜ・・・？）
そのため、Firefox や WebKit 系ブラウザで使うには-moz-や-webkit-のベンダープレフィクスが必要です。
また今回のネタでは、transition プロパティに対応している WebKit のみ、アニメーションの演出を見ることができます。
いちおう Opera10.50 でも transiton には対応したのですが、box-shadow へのアニメーションは適用されませんでした。
ということで、百聞は一見にしかず、ということでデモを見てください。
今回のテクニックは、以前書いた ピュアCSSで実装する DKIR を応用した画像ボタンのロールオーバー効果 の応用版です。
なので HTML はいじらずに、CSS の変更だけで実現しています。
また、今回のテクニックは ul, li 要素に対して:hover擬似クラスを使って実現しているためIE6 は未対応です。が、IE6 でもマウスオーバーの効果は正常に動作するので、IE6 以外のモダンブラウザ向けに仕込んでおくといい感じです。いわゆる "プログレッシブ・エンハンスメント" ってやつですねｗ
最近、「XHTML&CSS超高速コーディング術」という 牧野工房 さんが出している本を読みました。その中で、画像のロールオーバー効果を CSS で実現しているくだりがありました。n
そこではvisibility: hiddenを利用したテクニックが載っていました。
概要としては、メニューなどの部分を普通に img 要素でマークアップしておき、マウスオーバー時や閲覧中のカテゴリの画像を背景にして該当の場合に img 要素を文字通り非表示にする、という方法で実装していました。n
が、その場合だともし画像オフの場合や、オフにしていなくても回線の問題などで画像が表示されていないような場合に、マウスオーバーしたとき（あるいはカテゴリ閲覧中）に情報がまったく見れない、ということが（少ないですが）可能性としてありえるのでは、と思いました。n
そこで、以前書いた これで決まり？な画像置換 - DKIR を応用した、上記のような場合でも情報が見れなくならないようなロールオーバー効果を実現する方法を書いてみたいと思います。n
CSS-Tricks というサイトで、画像のマウスオーバー時に 画像の内側に border を表示して、しかもレイアウトが崩れない、という面白い記事を見つけたので自分でも作ってみました。また、ごく簡単に実装できる別タイプも作ってみました。（こっちは多少表示が異なります）n
説明は以下から。n
前回のエントリー、CSSのみでIE6にposition:fixedを対応させる を使用して、下部に固定配置しつつ、マウスオーバーで Windows のタスクバーのように飛び出すフッターを作ってみました。
このサンプルは、IE6 にも対応しています。
マイコミジャーナルの「"吹き出し"を画像使わずにCSSで作る方法」で紹介されていた"CSS だけで吹き出しを作る方法"を利用して、CSS だけで作る吹き出しツールチップのデモを考えてみました。n
今回のサンプルでは、画像も使っていません。
CSS による border の生成のされ方をうまく使って三角形を作り出します。
以下にデモと、今回の肝である画像を使わずに三角形を作り出すことについて書きたいと思います。n
前回の「CSSだけで作るマウスオーバーでの画像の拡大」の応用として作ったサンプルです。n
ただ、今回は少し収穫がありました。
a:hover を使っての、a 要素内の position の操作に関する新しい発見です。n
今回は「CSS だけで作るシリーズ」です。
タイトル通り、CSS だけで作るマウスオーバーによる画像拡大です。
どうやら、これから説明する方法だと IE だとクリックが正常に動かなくなるみたいです・・。
ただ、画像の拡大がメインなのでそもそもリンクしないかな、と思ってとりあえずアップしてみました。nということで、デモは以下の通り。
前回のエントリーに引き続き、-webkit-transition を使ってアニメーションの CSS について書きたいと思います。
-webkit-transition のアニメーションについては前回の記事 CSS3はアニメーションも指定できる！ を参照ください。動画キャプチャ入りで簡単に説明してます。n
今回は、-webkit-transition を使ってアニメーションで表示されるプルダウンメニューを作ってみたいと思います。
下位階層があるメニューにマウスオーバーすると、下位階層のメニューがフェードインとともに下にスライドしながら出てくる、というものです。n
とりあえず言葉で説明しても、百聞は一見にしかずなので、サンプルを見てください。以下に動画サンプルも表示してます。
（※実際のサンプルは、webkit 系が実装している CSS3 を使用しているので、Safari か webkit 以外で見ると、通常のプルダウンメニューになります。また、IE6 では動作しません）n
すみません、プロパティの名前が一部間違っていました。-webkit-transition-propaty と書いていたのは正確には-webkit-transition-propertyです。
先日、CSS Reloaded というイベントに参加してきました。
そこでは CSS3 の可能性を示唆していました。n
内容としてはとても刺激的で、将来、現在ある JavaScript ライブラリのほとんどが必要なくなるのではないかと思わせるほどでした。n
ただ問題点として、対応ブラウザが webkit 系（Safari、Google Chromeなど）しかないこと。
また、正式に CSS3 として勧告されているわけではないこと（今 Safari でできることが実装されない可能性）。
などがあります。
ただそれでも、ぜひ実装してほしいと強く願うほど、とてもすばらしいプロパティがありました。n
ということで今回は、あまり実用性はないものの、この感動を知ってもらいたいということから、CSS3 について書きたいと思います。
ちなみに、これから書く内容は、上でも書いた通り Safari でしか実行できないため、サンプルを見る際には Safari で見てください。（Safari のダウンロードはこちらから）n
カテゴリー
最近のエントリー
テスト的に設置してます。好きにコメントしてみてくださいｗ
©2009-2010 CSS-EBLOG All Rights Reserved
