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

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

دسته بندی موضوعات
سفارش تبلیغات

خصوصیت clip در CSS

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

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

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

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

 

خصوصیت clip

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

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

 

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

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

1

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

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

2

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

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

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

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

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

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

3

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

 

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

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

 

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

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

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

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

دریافت فایل
رمز تمامی فایل های رمز دار : iranweblearn.com یا iroschool.com

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

لطفا تنها دیدگاه خود را در رابطه با این مطلب ارسال نمایید، سوالات را از طریق سامانه پرسش و پاسخ مطرح نمایید. سوالات در دیدگاه ها تایید نخواهد شد.

  • Mekaeil

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

    • میترا رحیمی

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

  • hassany

    سلام خانم رحیمی من این صفحه رو خوندم و خیلی هم مفید بود.
    برداشت خودم از این آموزش و خاصیت کلیپ رو در لینک زیر براتون میذارم ممنون میشم نظرتون رو بهم بگین.
    http://s5.picofile.com/file/8160144276/clip.rar.html

    • میترا رحیمی

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

  • hassany

    ممنونم

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

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

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟