جهت ورود به تالار گفتمان سایت کلیک کنید


آموزش تابع Calc ( محاسبات ریاضی ) در Css3

از سری آموزش های کدنویسی Css3 برای این پست از سایت اسکریپت دات کام به آموزش یک تابع به نام calc میپردازم …

این تابع تقریبا جدید , میتواند جهت طراحی سایت های ریسپانسیو کمک بسیاری به توسعه دهندگان وب کند .

کاربرد تابع calc() در مواقعی است که نیاز به تلفیق واحدهای اندازه گیری نسبی و مطلق به منظور ایجاد یک طرح انعطاف پذیر می باشد.

در این تابع میتوان 4 عمل اصلی ریاضی را اعمال و از آنها استفاده نمود .

آموزش تابع Calc ( محاسبات ریاضی ) در Css3

برای استفاده از این تابع کافیست در مقابل خاصیت هایی مانند width , height , margin , padding و font-size از این تابع استفاده نمود .

در داخل پرانتز این تابع میتوانید از 4 عمل اصلی + , – , / و * استفاده نمایید .

برای یک مثال ساده : فرض کنید میخواهید پهنای یک div با کلاس vms که %100 والد خود است را در css کدنویسی کنید :

حال شاید میخواهید از %100 , مقدار 50px کمتر باشد . طبیعتا چون دو واحد اندازه گیری مجزا هستند , بدون دانستن این تابع نمیتوان کاری کرد .

اما از هم اکنون شما میتوانید با استفاده از این تابع , این کار را به صورت زیر انجام دهید :

 و یا به عنوان مثالی دیگر : 

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

در html :

در css :

برای پیش نمایش کلیک کنید

پخش اختصاصی

گرداوری : وحید مجیدی

  • امتیاز شما به این مقاله ؟
    خیلی بدبدمعمولیخوبخیلی خوب (لطفا رای بدید)
  • جهت تبادل گفتگو و حل مشکلات در باره این موضوع , کلیک کنید

    5 پاسخ به “آموزش تابع Calc ( محاسبات ریاضی ) در Css3”

    1. تقی غفاری گفت:

      ممنونم تشکر از اینکه راهنمایی کردید.

    2. دانیال رحیمی گفت:

      عالی بود!!!
      خیلی ممنون از اینکه به اشتراک گذاشتینش!

    3. اخبار گفت:

      سلام
      ممنون جالب بود.

    4. هاشم علیان گفت:

      تابع فوق کاربردی بود

      مرسی از اسکریپت دات کام , مرسی از استاد مجیدی

    پاسخی بگذارید

    نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *