Tag Archives: CSS

CSSでWii風ボタン

wii_btn.jpg

 感じの良いSubmitボタンを探していたら見つけた。
Simple Round CSS Links ( Wii Buttons )
 CSSと1枚の画像のみで実現できるシンプルでかわいいWii風ボタン。ボタンの記述もシンプル。アンカータグ(Aタグ)によるボタンとSubmitボタンの双方に対応。
 また、対応ブラウザは、IE6, IE5.5, IE7, Safari 2, Firefox 2, Opera 9(ただし、submitボタンに関してはブラウザ判定要)。
 ブラウザによって(IEか、それ以外)ボタンのHTMLタグを動的に変更しなければならない。
 PHPで実装。配布する予定のスクリプトなので、get_browser()ではなく、$_SERVER[‘HTTP_USER_AGENT’]で簡易的に判断。
Wiiブラウザ風CSSボタンを作成「Wii Buttons」
CSSでWii風のシンプルで角がまるいボタンを作る

ツールチップをCSSで

tooltip.gif

 マウスカーソルをかざすとメッセージが表示されるよくあるアレ。ツールチップ。
 アンカーや画像以外でこれを実現したくて調べてみると、良く出てくるのがjavascriptを使用するもの。
 良さそうなのがあったので、じゃ、それでいいか、と思ってたらCSSのみで実現しているサンプルを見つけた。非常にシンプルで、もちろんCSSによる装飾も可能。これで十分だ。

Easy CSS Tooltip
http://www.kollermedia.at/archive/2008/03/24/easy-css-tooltip/#

<style type=”text/css”>
/* Easy CSS Tooltip – by Koller Juergen [www.kollermedia.at] */
* {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; }
a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/
a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;}
a.tooltip:hover span{display:inline; position:absolute; border:1px solid #cccccc; background:#ffffff; color:#6c6c6c;}
</style>

Easy <a href=”#” class=”tooltip”>Tooltip<span>This is the crazy little Easy Tooltip Text.</span></a>.

JavaScriptを使わずCSSのみでシンプルなツールチップ実装

イメージギャラリー2選

 目新しいものではないけれど、スタイリッシュなイメージギャラリーを知ったのでここに記録する。

Cross Browser Multi-Page Photograph Gallery

lightbox.jpg

 なんとこのギャラリーはCSSのみで実現されている。
 タグによってページを切り替えられ、サムネイル画像にマウスカーソルをかざすと、やや大きめの画像がポップアップする。
 ポップアップした画像をクリックする事で、原寸の画像が表示されるというユーザインターフェース。

Galeria
galeria.jpg

 こちらは、Java scriptによるギャラリー。
 [ previous ]、[ next ]のアンカーによってページを切り替えられ、Cross Browser Multi-Page Photograph Galleryと同様に、サムネイル画像にマウスカーソルをかざすとポップアップ、クリックでさらに拡大表示されるというもの。
 ただ、このポップアップや拡大表示は、先に紹介したギャラリーよりも、よりスタイリッシュな動作です(滑らかに拡大する)。

 2つとも、とても素晴らしい出来なので、ぜひサンプルに触れてみてください。

 シンメトリー画像がある程度溜まったら、どちらかを用いてギャラリーを開設する予定。たぶんCSSの方。