jsdo.itで公開したら意外と好評だったので、解説などを書いてみたいと思います。

ゲームなどにありそうなリングメニューを、CSSだけを使って実装した例です。下に実際の動くサンプルもあるので、ぜひ触って見てください。

ちなみに右の画像は、中央の「main」にマウスオーバーした際にアニメーションでメニューが出てくる瞬間の画像です。

デモ

まずは下のサンプルをご覧ください。ちなみにアニメーションに対応しているブラウザのみ、アニメーションが実行されます。具体的には、GoogleChrome、Safari、Firefox、Operaです。

リングメニューをCSSで実装してみる - jsdo.it - share JavaScript, HTML5 and CSS

テクニックの肝

今回のテクニックの肝は、transform-originです。このプロパティは、transform系の値を変更する際、どこを基点にするかというものになります。

このtransform-origin、デフォルト値は50% 50%となっています。つまりその要素の縦横中央、ということですね。もしこれを0 0とすれば左上が基点となり、100% 100%とすれば右下が基点となるわけです。そしてこの数値には、pxも指定することができるので、細かく位置を調整することも可能となります。

今回のネタは、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 で実現しているくだりがありました。

そこではvisibility: hiddenを利用したテクニックが載っていました。
概要としては、メニューなどの部分を普通に img 要素でマークアップしておき、マウスオーバー時や閲覧中のカテゴリの画像を背景にして該当の場合に img 要素を文字通り非表示にする、という方法で実装していました。

が、その場合だともし画像オフの場合や、オフにしていなくても回線の問題などで画像が表示されていないような場合に、マウスオーバーしたとき（あるいはカテゴリ閲覧中）に情報がまったく見れない、ということが（少ないですが）可能性としてありえるのでは、と思いました。

そこで、以前書いた これで決まり？な画像置換 - DKIR を応用した、上記のような場合でも情報が見れなくならないようなロールオーバー効果を実現する方法を書いてみたいと思います。

前回のエントリー、CSSのみでIE6にposition:fixedを対応させる を使用して、下部に固定配置しつつ、マウスオーバーで Windows のタスクバーのように飛び出すフッターを作ってみました。

このサンプルは、IE6 にも対応しています。

マイコミジャーナルの「"吹き出し"を画像使わずにCSSで作る方法」で紹介されていた"CSS だけで吹き出しを作る方法"を利用して、CSS だけで作る吹き出しツールチップのデモを考えてみました。

今回のサンプルでは、画像も使っていません。
CSS による border の生成のされ方をうまく使って三角形を作り出します。
以下にデモと、今回の肝である画像を使わずに三角形を作り出すことについて書きたいと思います。

CSSだけで吹き出しツールチップを実装するデモ

前回の「CSSだけで作るマウスオーバーでの画像の拡大」の応用として作ったサンプルです。

ただ、今回は少し収穫がありました。
a:hover を使っての、a 要素内の position の操作に関する新しい発見です。

今回は「CSS だけで作るシリーズ」です。

タイトル通り、CSS だけで作るマウスオーバーによる画像拡大です。
どうやら、これから説明する方法だと IE だとクリックが正常に動かなくなるみたいです・・。

ただ、画像の拡大がメインなのでそもそもリンクしないかな、と思ってとりあえずアップしてみました。
ということで、デモは以下の通り。