MicroAd Compass Wipe_Banner - PC/SP-header部、PC/SP-body部セットで設置 - 外部HTML
Table of Contents - いろいろ Tips - 目次  
 Sitemap Generator - サイトマップ生成プログラム 
 In-Page Search - 検索を自ページ設置 
 Download Counter - ダウンロードカウンター 
 Draft Manager - ブラウザで下書き保存 
 Text Encryption - テキスト暗号・復号化 
 CSS & JavaScript - 圧縮・整形/復元ツール 
 Simple Yet Powerful Note Tool - メモメモ 
 Task Management - 仕事/やること管理 
 Local Storage Check - ローカルストレージチェック 
 Pixel Art - ピクセルアート作成 
 Freehand Drawing - フリーハンドドローイング 
 Pomodoro Timer - ポモドーロタイマー 
 Text Counter - 文字数カウント 
 Notepad - メモ帳 
 原稿用紙エディター 
 俳句・短歌下書きツール 
 ウィンドウサイズ 
 インターネット環境 
 タブを再び開く 
 Webページ最新状態 
 ページ内文字検索 
 スマホページ内検索 
 画像を加工する 
 Macでカラーコードを調べ 
 Mac用解凍ソフト 
 ショートカット 
 コピペの方法 
 右クリック禁止を回避 
 ローマ字かな入力変換表 
 ひらがな→ヘボン式ローマ字変換 
 ウェブページで長音ローマ字 
 ファイル差分チェック 
 音声合成 
 テキスト読み上げ 
 テキスト読み上げ書き方 
 全国公衆電話の場所 
 よく使う記号 
 キーボードの記号 
 キーボードの記号と入力方法 
 操作で使うキーの名称 
 CSSでカーソルを変える 

CSS ile İmleci Değiştirme
= Fare İmleci Türleri ve CSS Ayarları =

  • Bir web sayfasında fare imlecinin veya işaretçisinin şeklini CSS "cursor" özelliğini kullanarak ayarlayabilirsiniz.
  • Bu kılavuz, farklı imleç şekilleri için CSS değerlerini ve bunların nasıl yapılandırılacağını inceler.
  • Özellikleri kopyalamak için üzerine tıklayabilirsiniz. Bu sayfada "cursor:copy" özelliği kopyalanabilir öğeler için eklenmiştir.
  • Her özellik için örnek görseller sunulmuştur. Ancak, imleç şekli işletim sistemi sürümünüze ve tarayıcınıza bağlı olarak değişebilir.
  • "Üzerine Gelindiğinde" bölümlerinin üzerine fareyi getirerek kendi ortamınızdaki imleç şeklini görebilirsiniz.
《Nasıl Ayarlanır》
  1. Bir sayfadaki birden fazla bölüme uygulamak istiyorsanız, aşağıdaki kodu <head> bölümüne veya harici bir CSS dosyasına yazmak yaygın bir uygulamadır.
    ".cursorstyle" özel bir sınıf adıdır.
    <style>
    .cursorstyle {
    cursor : pointer;
    }
    </style>      Kopyala 
  2. Yukarıdaki CSS'nin "class" özelliği kullanılarak uygulanma örnekleri.
    <span class="cursorstyle">Metin</span>  Kopyala 
    <div class="cursorstyle">Metin</div>  Kopyala 
    <a class="cursorstyle">Metin</a>  Kopyala 
  3. Tek bir bölüme veya birkaç öğeye uygulamak istediğinizde.
    "style" özelliğini kullanarak doğrudan yazabilirsiniz.
    <span style="cursor : pointer;">Metin</span>  Kopyala 
    <div style="cursor : pointer;">Metin</div>  Kopyala 
《İmleç Türleri ve CSS Değerleri》
CSS Değerleri
[Kopyalamak için Tıklayın]
 Örnek (OS)
[Tarayıcıya bağlı olarak değişebilir]
 Üzerine Gelince
Şekil Önizleme		 Açıklama
Windows Mac
auto
cursor: auto;
《Üzerine Gelme》
Tarayıcı bağlama göre imleci otomatik belirler
default
cursor: default;
《Üzerine Gelme》
Standart ok görüntüler
none
cursor: none
    
《Üzerine Gelme》
İmleç görüntülenmez
context-menu
cursor: context-menu
《Üzerine Gelme》
Bağlam menüsünü kullanmaya izin verir
help
cursor: help
《Üzerine Gelme》
Yardım öğesi
pointer
cursor: pointer
《Üzerine Gelme》
Bağlantının üzerine gelindiğinde vb.
progress
cursor: progress
《Üzerine Gelme》
Bir işlem yürütülüyor. Kullanıcı etkileşimi mümkün
wait
cursor: wait
《Üzerine Gelme》
Bir işlem yürütülüyor. Kullanıcı etkileşimi mümkün değil
cell
cursor: cell
《Üzerine Gelme》
Seçilebilir tablo hücresi
crosshair
cursor: crosshair
《Üzerine Gelme》
Çapraz imleç, genellikle bitmap üzerinde seçim belirtir
text
cursor: text
《Üzerine Gelme》
Seçilebilir metin
vertical-text
cursor: vertical-text
《Üzerine Gelme》
Seçilebilir dikey metin
alias
cursor: alias
《Üzerine Gelme》
Kısayol veya alias oluşturulabilir
copy
cursor: copy
《Üzerine Gelme》
Kopyalanabilir
move
cursor: move
《Üzerine Gelme》
Taşınabilir
no-drop
cursor: no-drop
《Üzerine Gelme》
Bu konuma bırakmak mümkün değil
not-allowed
cursor: not-allowed
《Üzerine Gelme》
İstenen işlem gerçekleştirilemez
grab
cursor: grab
《Üzerine Gelme》
Sürüklenebilir, genellikle **grabbing** ile eşleştirilir
grabbing
cursor: grabbing
《Üzerine Gelme》
Sürükleme sırasında, **grab** ile eşleştirilir
all-scroll
cursor: all-scroll
《Üzerine Gelme》
Her yöne kaydırılabilir
col-resize
cursor: col-resize
《Üzerine Gelme》
Yatay kenar hareketi ile yeniden boyutlandırılabilir
row-resize
cursor: row-resize
《Üzerine Gelme》
Dikey kenar hareketi ile yeniden boyutlandırılabilir
n-resize
cursor: n-resize
《Üzerine Gelme》
**Kuzey (üst)** yönünde kenar hareketi ile yeniden boyutlandırılabilir
w-resize
cursor: w-resize
《Üzerine Gelme》
**Batı (sol)** yönünde kenar hareketi ile yeniden boyutlandırılabilir
s-resize
cursor: s-resize
《Üzerine Gelme》
**Güney (alt)** yönünde kenar hareketi ile yeniden boyutlandırılabilir
e-resize
cursor: e-resize
《Üzerine Gelme》
**Doğu (sağ)** yönünde kenar hareketi ile yeniden boyutlandırılabilir
nw-resize
cursor: nw-resize
《Üzerine Gelme》
**Kuzeybatı (sol üst)** yönünde kenar hareketi ile yeniden boyutlandırılabilir
ne-resize
cursor: ne-resize
《Üzerine Gelme》
**Kuzeydoğu (sağ üst)** yönünde kenar hareketi ile yeniden boyutlandırılabilir
sw-resize
cursor: sw-resize
《Üzerine Gelme》
**Güneybatı (sol alt)** yönünde kenar hareketi ile yeniden boyutlandırılabilir
se-resize
cursor: se-resize
《Üzerine Gelme》
**Güneydoğu (sağ alt)** yönünde kenar hareketi ile yeniden boyutlandırılabilir
ew-resize
cursor: ew-resize
《Üzerine Gelme》
**Çift yönlü yatay** kenar hareketi ile yeniden boyutlandırılabilir
ns-resize
cursor: ns-resize
《Üzerine Gelme》
**Çift yönlü dikey** kenar hareketi ile yeniden boyutlandırılabilir
nesw-resize
cursor: nesw-resize
《Üzerine Gelme》
**Kuzeydoğu-güneybatı (sağ üst & sol alt) yönlerinde** kenar hareketi ile yeniden boyutlandırılabilir
nwse-resize
cursor: nwse-resize
《Üzerine Gelme》
**Kuzeybatı-güneydoğu (sol üst & sağ alt) yönlerinde** kenar hareketi ile yeniden boyutlandırılabilir
zoom-in
cursor: zoom-in
《Üzerine Gelme》
Yakınlaştırılabilir
zoom-out
cursor: zoom-out
《Üzerine Gelme》
Uzaklaştırılabilir
URL
Herhangi bir görüntü imleç olarak ayarlanabilir.
Görsel boyutu en fazla **128 × 128px** olabilir. Örnek görsel boyutu **70 × 70px**.
《Üzerine Gelme》
.cursorimg {cursor: url(image-path), auto;}
 Kopyala 
".cursorimg" herhangi bir ad olabilir.
<div {cursor: url(image-path), auto;}>Metin</div>
 Kopyala 
《Retina Ekran Desteği》
.cursorimg {cursor: -webkit-image-set(url(@1x-image) 1x, url(@2x-image) 2x), auto;}
 Kopyala 
スポンサーリンク
スポンサーリンク

おすすめサイト・関連サイト…

スポンサーリンク
Last updated : 2025/03/08
 Copied ! 
 Click to Copy 
© みんなの知識 ちょっと便利帳 - https://www.benricho.org/Tips/cursor-type/12-tr.html