آموزش طراحی وب

خصوصیت clip در CSS

دوستان در این جلسه در رابطه با خصوصیت clip صحبت میکنیم. تو سایت های فارسی ندیدم که کسی بطور کامل و واضح راجع به این خصوصیت توضیح داده باشه ، تصمیم گرفتم بطور کامل و با تصویر این خصوصیت رو خدمتتون آموزش بدم.

فصل چهارم : Properties در CSS

جلسه بیست و هفتم : خصوصیت clip در CSS

سلام به همراهان همیشگی مدرسه مجازی ایرانیان

دوستان در این جلسه در رابطه با خصوصیت clip صحبت میکنیم. تو سایت های فارسی ندیدم که کسی بطور کامل و واضح راجع به این خصوصیت توضیح داده باشه ، تصمیم گرفتم بطور کامل و با تصویر این خصوصیت رو خدمتتون آموزش بدم.

 

خصوصیت clip

این خصوصیت رو به زبان عامیانه و با یک مثال مفهومی توضیح میدم. گاهی اوقات باکسی رو برای نمایش محتوا در نظر میگیرید که شامل تصویر هست و تصویرتون از اندازه ی باکستون بزرگ تره . در این هنگام شما به باکستون خاصیت position:relative میدید و به تصویرتون خاصیت position:absolute میدید . در اینجا شما می تونید با خصوصیت clip بخشی از تصویرتون رو برش بزنید و حذف کنید تا بتونید با اندازه ی باکستون هماهنگش کنید.

البته زیاد این مورد استفاده نمیشه و سعی بر این هست که تصویر رو با جزئیات کاملش کوچیک کنیم و نمایش بدیم . اما بعضی وقتا جزئیات حاشیه ی تصویر مهم نیست و شما میخواین بخشی از تصویر که مهم تره با کیفیت نمایش پیدا کنه و بخش هایی که مهم نیستند رو برش بزنید.

 

قاعده دستوری خصوصیت clip

در واقع زمانی که از این خصوصیت استفاده کنید یک مستطیل ایجاد کردید و اون رو روی تصویرتون قرار دادید، هر کجای تصویر که تو این مستطیل قرار بگیره نمایش داده میشه. تصویر زیر رو در نظر بگیرید:

1

ما کلیپ زیر رو روی این تصویر اعمال می کنیم:

نتیجه تصویری هست که میبینید ، بخش های آبی رنگ بخش هایی هستند که حذف شدند.

2

در مثال بالا به عبارتی:

۵۰ پیکسل از بالای تصویر برش دادیم

۸۰ پیکسل هم از سمت چپ برش دادیم

برای عرض تصویر مقدار عرض مورد نظر رو با مقدار سمت چپ جمع می کنیم و عرض تصویر رو محاسبه می کنیم. در واقع در مثال بالا عرض تصویر یا مستطیل ما ۱۷۰ پیکسل هست .

برای ارتفاع تصویر هم مقدار ارتفاع مورد نظر رو با مقدار بالا جمع می کنیم و ارتفاع تصویر رو محاسبه می کنیم. در واقع در مثال بالا ارتفاع تصویر ما ۱۰۰ پیکسل هست.

نتیجه ی نهایی تصویر زیر خواهد بود:

3

بخشی از تصویر رو هم که نمایان هست، در حقیقت مستطیلی هست که clip ایجاد کرده ، این مستطیل ۵۰ پیکسل از بالا فاصله میگیره و ۸۰ پیکسل از سمت چپ فاصله میگیره، عرض این مستطیل ۱۷۰ پیکسل و ارتفاع اون ۱۰۰ پیکسل میشه.

 

مرورگرهایی که خصوصیت clip رو پشتیبانی میکنند

در حال حاضر تمامی مرورگرها حتی IE8 هم این خصوصیت رو پشتیبانی میکنند.

 

خوب دوستان امیدوارم که مطلب رو خوب رسونده باشم.

یکی از دوستان بنام جناب حسنی برای این مقاله یک مثالی رو آماده کردند که برای دانلود در انتهای مقاله قرار میدم.

موفق و پاینده باشید 🙂

تهیه شده در مدرسه مجازی ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۵

  • ممنون از مطلب خوبتون . نکات بسیرا خوبی رو اشاره کردید.
    اینطور که من متوجه شدم این خاصیت از بالا و چپ برش میده درسته ؟ میشه کاری کرد که به دلخواه قسمت هایی که میخواهیم برش داده بشه مثلا راست و پایین؟؟

    • سلام دوست عزیز
      هرچقدر که مقدار right و bottom رو کمتر کنید از تصویرتون کم میشه ، انگار که برش خورده .

    • سلام دوست عزیز
      درست متوجه شدید.
      به نکته ی خوبی اشاره کردید که تو مقاله اضافه می کنم.
      فایلتون رو به عنوان مثال برای دانلود قرار میدم. دوستان دانلود می کنن و فایلتون رو و میبینن .
      موفق و پاینده باشید.

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین