بروز رسانی اسفند ۱۰ام, ۱۳۹۹ ۶:۳۴ بعد از ظهر
تیر ۲۵, ۱۳۹۷ admin آموزش پیشرفته css, آموزش مقدماتی css 0
از ویژگی cursor جهت مشخص کردن شکل ظاهری مکاننما (نشانگر موس) در زمانی که بر روی یک عنصر قرار میگیرد بهره بری و استفاده میمی شود.
با بهره بری و استفاده از آن ویژگی می قدرت ظاهر مکاننما را به اشکال گوناگونی تغییر داد و همچنین یا حتی می قدرت یک تصویر خاص جهت آن هم مشخص کردن کرد.
کاربرد ویژگی cursor
زمانی می باشد که ما بخواهیم کاربر را از عملکرد یک عنصر با خبر کنیم، مثلا فرض کنید مکاننما روی عنصری قرار میگیرد و همچنین ظاهر آن هم به شکل دست تغییر میکند، آن نشان دهنده آن می باشد که آن هم عنصر قابل کلیک شدن می باشد و همچنین می تواند یک دکمه یا لینک باشد.
توجه داشته باشید که اشکال موجود جهت آن ویژگی امکان دارد در مرورگرها و همچنین سیستم عامل های متنوع و گوناگون و مختلف متغایر و متفاوت دیدن کردن و نمایش داده می شود، پس حتما خروجی کار را در شرایط متنوع و گوناگون و مختلف بررسی کردن کنید. البته در صورتی که آن موضوع جهت کاربران تو حیاتی می باشد می توانید از یک تصویر بهره بری و استفاده کنید تا دیگر در همه جا یکسان دیدن کردن و نمایش داده می شود.
سینتکس و همچنین مقادیر آن ویژگی بصورت زیر می باشد:
/* Keyword values */
cursor: [ [<url> [<x> <y>]?,]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ] ]
cursor: pointer;
cursor: auto;
/* URL, with a keyword fallback */
cursor: url(hand.cur), pointer;
/* URL and coordinates, with a keyword fallback */
cursor: url(cursor1.png) 4 12, auto;
cursor: url(cursor2.png) 2 2, pointer;
/* Global values */
cursor: inherit;
cursor: initial;
cursor: unset;
/* Global values */
cursor: inherit;
cursor: initial;
cursor: unset;
در ادامه مقادیر ویژگی cursor
بصورت دسته بندی شده شرح داده می شوند:
auto
auto
مقدار ابتدایی و اولیه جهت آن ویژگی می باشد که باعث می می شود نرم افزار مرورگر اینترنتی بر اساس شرایط عنصری که مکاننما بر روی آن هم قرار داد شکل مورد نظر را به مکاننما بدهد. مثلا هنگام و زمانی که روی عنصری با محتوای متن هستیم مکاننما به شکل مورد نظر تغییر می کند.
default
با آن مقدار مکاننما به شکل مکاننمای پیشفرض سیستم عاملی که کاربر با آن هم وبسایت و مرکز خبرهای جدید ما را دیدن می کند در می آید که معمولا به شکل فلش می باشد.
.element
cursor: default;
none
با آن مقدار هیچ مکاننمایی جهت عنصر مورد نظر دیدن کردن و نمایش داده نخواهد شد.
<uri>
جهت cursor
می قدرت تصویر نیز مشخص کردن کرد، کافی می باشد یک یا چند آدرس تصویر را با بهره بری و استفاده از ویرگول از هم جدا کرده و همچنین در آخر یک مقدار از مقادیر دیگر مرتبط به آن ویژگی را قرار داد. در آن صورت نرم افزار مرورگر اینترنتی تلاش می کند تا تصویر مشخص کردن شده اول را به عنوان مکاننما جهت عنصر دیدن کردن و نمایش دهد در صورتی که به هر دلیلی قادر به آن کار نباشد به تصویر دوم رفت و آمد و مراجعه می کند و همچنین در صورتی که باز هم آن امکان برایش وجود نداشته باشد مقدار آخر را به عنوان مکاننما عنصر در نظر می گیرد. در پس نتیجه آن می شود که می قدرت مقادیر پشتیان جهت آن ویژگی مشخص کردن کرد.
.element
cursor: url(1.png), url(2.png), url(example.svg#linkcursor), url(example-2.cur), auto;
<x> <y>
هر کدام یک مقدار مثبت کمتر از ۳۲ می باشد که مشخص کردن کننده مکان دقیق مکاننما نسبت به گوشه بالا و همچنین سمت چپ تصویر مشخص کردن شده می باشد. مشخص کردن آن مقادیر اجباری نیست و همچنین در صورتی که نوشته نشوند نرم افزار مرورگر اینترنتی آن مختصات را از فایل تصویر می خواند (در صورتی که فایل تصویر از نوع CUR یا XBM باشد) و همچنین در غیر آن صورت مختصات برابر با گوشه بالا سمت چپ تصویر خواهد بود.
.element
cursor: url(name.png), 12 27, auto;
در مثال بالا در صورتی که نرم افزار مرورگر اینترنتی قادر به دیدن کردن و نمایش تصویر name.png
باشد مختصات دقیق مکاننما را ۱۲ پیکسل فاصله از لبه سمت چپ تصویر و همچنین ۲۷ پیکسل فاصله از لبه بالای تصویر قرار می دهد. در صورتی که هم نتواند تصویر را بارگزاری کند در پس نتیجه آن می شود که مقدار cursor
را برابر با auto
در نظر می گیرد.
context-menu
یک منوی گرافیکی در کنار فلش جهت دیدن کردن و نمایش مکاننما وجود خواهد داشت. (در زمان نوشتن آن مطلب تنها IE10 به بالا آن مورد را پیاده سازی کرده اند)
help
آن ویژگی باعث می می شود تا معمولا مکاننما جهت عنصر مورد نظر به شکل علامت سوال یا بادكنك دیدن کردن و نمایش داده می شود.
pointer
مکاننما طوری دیدن کردن و نمایش داده می می شود که مشخص کند عنصر مربوطه قابل تعامل می باشد (مثل یک لینک) و همچنین معمولا به شکل دست خواهد بود.
progress
آن مقدار مشخص کردن کننده آن می باشد که نرم افزار مرورگر اینترنتی در حال انجام عملیاتی در پس باره می باشد ولی باید توجه داشت کاربر می تواند همچنان با وبسایت و مرکز خبرهای جدید در تعامل باشد.
wait
آن مقدار نشان می دهد که نرم افزار مرورگر اینترنتی مشغول انجام کاری می باشد که کاربر بایستی و حتما تا اتمام آن هم صبر کند و همچنین نمی تواند با وبسایت و مرکز خبرهای جدید تعامل داشته باشد (برعکس مقدار progress
)
cell
آن مقدار نشان می دهد که سلول جدول می تواند انتخاب می شود.
crosshair
نشان دهنده حالت انتخاب یک بیتمپ (تصویر) دو بعدی می باشد.
text
نشان دهنده حالت انتخاب متن می باشد.
vertical-text
نشان دهنده حالت انتخاب متن عمودی می باشد.
alias
نشان دهنده آن می باشد که می قدرت یک مستعار یا میانبری جهت عنصر موجود بوجود آورد.
copy
با بهره بری و استفاده از آن مقدار می قدرت مشخص کرد که عنصر می تواند کپی می شود.
move
با بهره بری و استفاده از آن مقدار می قدرت مشخص کرد که عنصر می تواند تغییر مکان داده می شود.
no-drop
نشان می دهد که آیتم نمی تواند روی عنصر مورد نظر رها می شود.
not-allowed
نشان می دهد که یک عملیات نمی تواند انجام قبول کند.
all-scroll
امکان اسکرول در تمامی جهتها وجود داد.
col-resize
امکان تغییر مقدار و اندازه در جهت افقی وجود دارد.
row-resize
امکان تغییر مقدار و اندازه در جهت عمودی وجود دارد.
در ادامه مقادیری که نشان دهنده تغییر مکان لبه ها خواهند بود را دیدن خواهیم کرد، توجه داشته باشید کلمات north، south، east و همچنین west به ترتیب برابر شرق، جنوب، شمال و همچنین غرب می باشند پس در پس نتیجه آن می شود که به عنوان مثال ne نشان دهنده شمال شرقی می باشد که در اینجا به آن معنی می باشد که انجام عملیات تغییر مکان یا مقدار و اندازه از سمت شمال شرقی شروع می می شود. در بعضی محیط ها بعضی از آن مقدایر خروجی یکسانی را دیدن کردن و نمایش می دهند:
n-resize
e-resize
s-resize
w-resize
ne-resize
nw-resize
se-resize
sw-resize
همچنین مقادیر زیر امکان تغییر مقدار و اندازه دوجهته را دیدن کردن و نمایش می دهند:
ew-resize
ns-resize
nesw-resize
nwse-resize
مقادیر نشان دهنده تغییر بزرگنمایی و همچنین زوم:
zoom-in
zoom-out
مقادیر نشان دهنده حالت گرفتن و همچنین یا گرفتن و همچنین کشیدن آیتم:
grab
grabbing
به عنوان نمونه در مثال زیر به کاربر کمک می کنیم تا متوجه می شود امکان عمیات مورد نظر بر روی عنصر input
ی که غیر فعال می باشد وجود ندارد:
input[disabled]
cursor: not-allowed;
background-color: rgba(255, 0, 0, 0.2);
/* ... */
همچنین در مثال زیر تمام لینک ها چه بازدید شده باشند چه نه، بایستی و حتما مکان نمای مورد نظر را داشته باشند:
:link,
:visited
cursor: url(example.svg#linkcursor),
url(hyper.cur),
url(hyper.png) 2 3,
pointer
در آن مثال نرم افزار مرورگر اینترنتی سعی بر بهره بری و استفاده از مکان نمای مشخص کردن شده از نوع SVG می کند و همچنین در صورتی که آن هم نرم افزار مرورگر اینترنتی فرمت SVG را پشتیبانی نکند به سراغ گزینه دوم خواهد رفت و همچنین در صورتی که در دیدن کردن و نمایش آن هم هم مشکل داشته باشد تصویر نهایی یعنی hyper.png
را با مختصات مشخص کردن شده ۲ و همچنین ۳ دیدن کردن و نمایش می دهد. در صورتی که آن هم تصویر هم در دسترس نباشد در نهایت نرم افزار مرورگر اینترنتی pointer
را به عنوان مقدار آن ویژگی لحاظ می کند.
روش های غیره ای هم جهت فراخوانی تصاویر جهت آن ویژگی می باشد که می توانید آن هم را در آن دمو بررسی کردن کنید.
همچنین در دموی زیر تمامی مقادیر ویژگی cursor
را می توانید بررسی کردن کنید:
See the Pen CSS Cursors by Mojtaba Seyedi (@seyedi) on CodePen.
بررسی کردن بهتر پشتیبانی مرورگرها را در مورد هر یک از مقادیر را می توانید در وبسایت و مرکز خبرهای جدید موزیلا انجام دهید.
اسفند ۱۰, ۱۳۹۹ 0
بهمن ۲۵, ۱۳۹۹ 0
بهمن ۰۹, ۱۳۹۹ 0
بهمن ۰۱, ۱۳۹۹ 0
مرداد ۱۲, ۱۳۹۹ 0
اردیبهشت ۰۸, ۱۳۹۹ 0
خرداد ۱۴, ۱۳۹۶ 0
اردیبهشت ۱۰, ۱۳۹۶ 0