چند خاصیت سی اس اس که به ندرت استفاده میشه اما میتونن جلوه ی خاصی به وب سایت بدهند
در این مقاله از سری مقالات تروانس میخواهیم چند خاصیت سی اس اس معرفی کنینم که به ندرت از اونها در طراحی سایت استفاده میشه اما این خاصتها میتونن جلوه ی خاصی به وب سایت شما بدهند.
۱-خاصیت caret color
این خاصیت رنگ کرسر عناصر قابل ویرایش مثل input,textarea,… را تغییر میده.نحوه ی استفاده از آن به صورت زیر می باشد.مقادیری که این ویژگی می پذیر رنگ و مقدار auto می باشد.
caret-color: auto|color;
مثال:
input{
caret-color:red
}
مثال مذکور رنگ کرسر عنصر مورد نظر را به قرمز تغییر می دهد.
۲-Scroll Behavior
این خاصیت باعث میشه عنصر html نرم و آرام اسکرول بشه اگه از این خاصیت استفاده کنید دیگه لازم نیست برای اسکرول شدن بین لینکهای داخلی از جاوااسکریپت استفاده کنید.
html {
scroll-behavior: smooth;
}
برای روشن شدن موضوع به مثال این خاصیت در وب سایت w3school مراجعه کنید
۳-backface-visibility
این خاصیت تعیین می کند زمانی که عنصر در فضای سه بعدی توسط ویژگی transform حرکت داده می شود پشت آن قابل مشاهده توسط کاربر قابل مشاهده باشد یا خیر
در حالت پیشفرض اگر عنصری در فضای سه بعدی بچرخد پشت آن عنصر نیز قابل مشاهده است اما اگر مقدار hidden
را برای این ویژگی تنظیم کنیم, دیگر پشت آن عنصر دیده نخواهد شود.
مقادیری که این عنصر قبول میکند به صورت زیر می باشد.
backface-visibility: visible|hidden|initial|inherit;
برای روشن شدن موضوع دموی سایت w3school را ببینید
۴-resize
با استفاده از این خاصیت میتونید در بارهی نحوه تغییر سایز یک عنصر توسط کاربر تصمیم بگیرید.اگه این خاصیت را طوری مقدار دهی کنید که سایز عنصر مورد نظر توسط کاربر قابل تغییر باشه سه خط مورب در گوشهی پایین سمت راست دیده میشه که کاربر با استفاده از ماوس و این سه خط مورب میتونه اندازهی عنصر را تغییر بده.
این خاصیت شش مقدار مختلف میپذیر که به صورت زیر تعریف و مقدار دهی میشود.
resize: none|both|horizontal|vertical|initial|inherit;
مقدار | نخوهی عملکرد |
none | عنصر مورد نظر قابلیت تعییر اندازه توسط کاربر را نخواهد داشت. |
both | هم عرض و هم طول عنصر مورد نظر قابلیت تغییر خواهد داشت. |
horizontal | فقط عرض عنصر مورد نظر قابل تغییر خواهد بود. |
vertical | فقط ارتفاع عنصر مورد نظر قابل تغییر خواهد بود. |
initial | مقدار پیش فرض تعریف شده برای عنصر مورد نظر. |
inherit | مقدار این خصوصیت را از والد خود به ارث میبرد. |
۵-tab-size
با این خاصیت میتونید اندازه کلید تب را در یک عنصر مشخص کنید.
به ندرت پیش میاد که استفاده کردن از این خاصیت نیاز باشه ولی دونستش خالی از لطف نیست.این خاصیت به صورت زیر تعریف و مقدار دهی میشه.یک نمونه از مواردی که میتونید از این خاصیت استفاده کنید تعیین اندازه تب عنصر کد است که برای کسانی مفیده که میخوان کدهای برنامه نویسی را تو وب سایت خود با دیگران به اشتراک بگذارند.
tab-size: number|length|initial|inherit;
مقدار | نحوهی عملکرد |
number | تعداد کاراکترهای جای خالی که در تب نمایش داده میشه. |
length | طول کاراکتر تب.این خاصیت توسط مرورگرهای مرسوم پشتیبانی نمیشه |
initial | مقدار پیش فرض تعریف شده برای عنصر مورد نظر.مقدار پیش فرض هشت کاراکتر جای خالی است. |
inherit | مقدار این خصوصیت را از والد خود به ارث میبرد. |
۶-isolation
از این خاصیت برای جلوگیری از ترکیب شدن عنصر با عنصر پشت سرش استفاده میشود.
این خاصیت به صورت زیر تعریف و مقدار دهی می شود
isolation: auto|isolate|initial|inherit;
auto | پیش فرض این خاصیت auto می باشد و موجب ترکیب عنصر مورد نظر با عنصر پشت سرش میشود |
isolate | این مقدار از ترکیب عنصر با عنصر پشت سرش جلوگیری میکند. |