تولید کننده مکان‌نمای CSS

ابزاری برای تولید و پیش‌نمایش سبک‌های مکان‌نمای CSS2، CSS3 و مکان‌نماهای سفارشی.

مکان‌نماهای CSS2پشتیبانی جهانی

auto
برای کپی کلیک کنید
inherit
برای کپی کلیک کنید
crosshair
برای کپی کلیک کنید
default
برای کپی کلیک کنید
help
برای کپی کلیک کنید
move
برای کپی کلیک کنید
pointer
برای کپی کلیک کنید
progress
برای کپی کلیک کنید
text
برای کپی کلیک کنید
wait
برای کپی کلیک کنید
e-resize
برای کپی کلیک کنید
ne-resize
برای کپی کلیک کنید
nw-resize
برای کپی کلیک کنید
n-resize
برای کپی کلیک کنید
se-resize
برای کپی کلیک کنید
sw-resize
برای کپی کلیک کنید
s-resize
برای کپی کلیک کنید
w-resize
برای کپی کلیک کنید

مکان‌نماهای CSS3مرورگرهای مدرن

none
not IE, Safari, Opera
برای کپی کلیک کنید
context-menu
not Firefox, Chrome
برای کپی کلیک کنید
cell
not Safari
برای کپی کلیک کنید
vertical-text
برای کپی کلیک کنید
alias
not Safari
برای کپی کلیک کنید
copy
not Safari
برای کپی کلیک کنید
no-drop
برای کپی کلیک کنید
not-allowed
برای کپی کلیک کنید
ew-resize
برای کپی کلیک کنید
ns-resize
برای کپی کلیک کنید
nesw-resize
برای کپی کلیک کنید
nwse-resize
برای کپی کلیک کنید
col-resize
برای کپی کلیک کنید
row-resize
برای کپی کلیک کنید
all-scroll
برای کپی کلیک کنید
grab
only Webkit and Firefox
برای کپی کلیک کنید
grabbing
only Webkit and Firefox
برای کپی کلیک کنید
zoom-in
only Webkit and Firefox
برای کپی کلیک کنید
zoom-out
only Webkit and Firefox
برای کپی کلیک کنید

مکان‌نماهای سفارشیپیشرفته

مکان‌نماهای مبتنی بر URL

cursor: url(images/cursor.cur), auto;# required by IE
cursor: url(images/cursor.png) x y, auto;# x y are hotspot coordinates
auto is the fallback cursor when custom cursor fails to load

فرمت‌های پشتیبانی شده

.cur
.png
.jpg
.gif

مثال استفاده

/* CSS */ cursor: url('custom-cursor.png') 16 16, pointer;

مکان‌نماهای مبتنی بر URL

cursor: url(images/cursor.cur), auto;# required by IE
cursor: url(images/cursor.png) x y, auto;# x y are hotspot coordinates
auto is the fallback cursor when custom cursor fails to load

فرمت‌های پشتیبانی شده

.cur
.png
.jpg
.gif

مثال استفاده

/* CSS */ cursor: url('custom-cursor.png') 16 16, pointer;

ملاحظات دسترسی‌پذیری

  • • به جای تکیه صرف بر مکان‌نماها برای بیان عملکرد، نشانه‌های بصری اضافی ارائه دهید
  • • از مکان‌نماهایی استفاده کنید که در حالت کنتراست بالا قابل مشاهده باشند
  • • با توجه به تنظیمات دسترسی‌پذیری، از مکان‌نماهای متحرک به ندرت استفاده کنید
  • • برای کاربران ناوبری با صفحه‌کلید، نشانگرهای فوکوس ارائه دهید

بهینه‌سازی عملکرد

  • • برای جلوگیری از تأخیر، تصاویر مکان‌نمای سفارشی را از قبل بارگیری کنید
  • • برای کاهش درخواست‌های HTTP از اسپرایت‌های CSS استفاده کنید
  • • برای بهبود عملکرد از تغییرات غیرضروری مکان‌نما خودداری کنید
  • • در نظر داشته باشید که مکان‌نماهای سفارشی در محیط‌های موبایل نمایش داده نمی‌شوند
    تولید کننده مکان‌نمای CSS | toolsmoah