ویژگی clip در css برش در تگ html موقعیت absolute

ویژگی clip در css برش در تگ html موقعیت absolute

در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد صفت clip در زبان css توضیحاتی را ارائه نماییم.

ویژگی جدید clip در دومین نسخه زبان طراحی css یعنی CSS2 معرفی شده است.

ویژگی clip در css برش در تگ html موقعیت absolute - سایت آموزی

معرفی ویژگی کاربردی clip در زبان طراحی css

اگر یک تصویر که درون تگ img معمولا قرار میگیرد، از تگ html والدش بزرگتر باشد، چه اتفاقی می افتد؟

با خصوصیت clip می توانیم مشکل بزرگ بودن تصاویر یا محتوایی که در محدوده تگ html با موقعیت absolute قرار نمی گیرند را حل کرده و به شکل مستطیل آنها را برش دهیم.

به عبارت ساده تر توسط خاصیت clip می توانیم به شکل یک مستطیل یک تگ html را که به صورت absolute موقعیت دهی شده است، برش دهیم.

مقادیر صفت کاربردی clip در زبان طراحی سی اس اس

صفت کاربردی clip که در زبان طراحی CSS2 معرفی شده است، 3 مقدار می پذیرد که عبارتند از:

مقدار auto
مقدار shape
مقدار initial

مقدار auto درون خاصیت clip در زبان css

اگر خاصیت clip را برابر با مقدار auto قرار دهیم، در حقیقت برش در تگ html با موقعیت absolute اعمال نمی شود

مقدار auto به عنوان مقدار پیش فرض خصوصیت clip می باشد.

مثال براساس مقدار auto برای خاصیت clip

[html]input{clip: auto;}[/html]

مقدار shape درون خاصیت clip در زبان سی اس اس

اگر خاصیت clip را برابر با مقدار shape قرار دهیم، می توانیم یک تگ html را به شکل مستطیل برش دهیم.

مقادیر قابل قبول در مقدار shape عبارنتد از: ( rect ( top, right, bottom, left

مثال براساس مقدار shape برای خاصیت clip

[html]input{clip: rect(0px,60px,200px,0px);}[/html]

مقدار initial درون خاصیت clip در زبان css

اگر خاصیت clip را برابر با مقدار initial قرار دهیم، در حقیقت همان مقدار پیش فرض این خصوصیت برای تگ html مورد نظر اعمال می شود.

ویژگی clip در css برش در تگ html موقعیت absolute - سایت آموزی

بررسی خاصیت clip از نظر نسخه زبان طراحی سی اس اس

خصوصیت clip در دومین نسخه زبان طراحی css یعنی CSS2 معرفی شده است.

بررسی ساختاری خصوصیت clip


عناوین ساختاری خاصیت box-shadow	وضعیت ساختاری خاصیت box-shadow
مقدار پیش فرض	none
قابلیت توارث	ندارد
قابلیت تحرک	دارد
ورژن css صفت	CSS2
سینتکس صفت در جاوا اسکریپت	"object.style.clip="rect(0px,50px,50px,0px)