CSSを使って、WEBページでオリジナルのマウスカーソル(ポインター)を利用する

cursor
このエントリーをはてなブックマークに追加
PR

CSSで標準で利用できるマウスカーソル以外に、オリジナルのカーソルを作成してそれを表示させる方法です。画像等の開閉の時に、マウスカーソル自体をメッセージのある画像に置き換えて 閉じるや開くの動作を分かりやすく使えるのに利用できたり出来ます。イラストをメインに使ったデザインのWEBサイトで雰囲気を出すのにも向いています。

 

 

CSSでマウスカーソルをオリジナルのものにする

CSSではcursorとうプロパティがあり、値に規定値を選択するかもしくはURLで画像を指定する事が出来ます。指定できる画像はpng、jpg、gifとcurとaniが使えます。IEでは通常の画像は利用できないようで、curとaniのみ使えます。

 

CSS

.original {
 cursor: url("9.png"), url("9.cur"), pointer;
}

url(“”) という形でファイルのURLを指定する形でオリジナルのマウスカーソルを利用することが出来ます。値はカンマ(,)で区切って複数指定することが出来ます、前から順番に適応され利用できない場合はその次のをと利用できるとろこまで進みます。

画像は相対パスで指定する事が可能です、CSSと同一階層にある場合はファイル名だけで利用できます。

 

DEMO 表示

※ IE11~9 ではなぜか、オリジナルの画像は表示されませんでした、IE8では利用可能でしたがそれ以下は試していません。

 

 

cur ファイルの作り方

マウスカーソル用のファイルの作り方ですが、作成した画像をWEBでコンバートしてくれるサイトを利用するのが手軽です、画像をアップロードして変換してダウンロードするだけです。

 

PNG をCURに変換します。オンラインで無料です- Convertio

https://convertio.co/ja/png-cur/

 

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)