CSS:お遊び編


次期バージョンのSafariはCSSのカスタムカーソルをサポート。
それに備えてお勉強しましょう。

カスタムカーソルとはリンクが張ってあるところでは「指」の形、テキストエリアなどでは「I」の形といった感じでカーソルの形が変わるものです。
これをCSSで任意のカーソルに指示してしまおうというものです。

カスタムカーソルの種類 オンマウスで反映されます(現在はIEでしか見られません:涙)
crosshair十字カーソル
default標準カーソル
pointerポインター(指)
move移動カーソル(十字)
n-resize上向き矢印
ne-resize上斜め右向き矢印
e-resize右向き矢印
se-resize下斜め右向き矢印
s-resize下向き矢印
sw-resize下斜め左向き矢印
w-resize左向き矢印
nw-resize上斜め左向き矢印
textテキストカーソル(I字)
wait時計カーソル
help?カーソル

それではタグの書き方です。
十字カーソルの場合
<SPAN style=cursor:crosshair(ここを上の表を元に書き換えます);>カーソルを変えたい部分</span>

リンク部分に適応したい場合はアンカータグ(<A>〜</A>)の内側に書けばOKです。
<A HREF="help.html"><SPAN style=cursor:help;>help</span><A>

CSSを利用して全部のアンカータグに適応したい場合は
A{cursor: crosshair;}
と書けばOKです。
※<>{}は半角にしてください。

次期Safari1.2(v125)では対応になるようですのでリリースされたらまた見に来てください。
ちょっと雰囲気を変えるにはいいかもね。

Posted: Sun - February 1, 2004 at 01:15 AM  |   |   |   |  このエントリーを含むはてなブックマーク  | ランキングを見てみる
 




© 2003 M.Kawasaki All rights reserved. Site designed by DIGICOOL